.knowledge-center__hero-details {
  padding-bottom: calc(var(--val-1) * 3);
}
/* Hero Section */
.heroContainerLeftSide {
  /* width: calc(100% - 355px - 24px); */
  width: calc(100% - 40% - var(--val-1\/5));
  /* max-width: 900px; */
  /* min-width: 565px; */
}
/* @media screen and (max-width: 1024px) {
  .heroContainerLeftSide {
    max-width: 700px;
  }
} */
/* .heroTitle {
  margin-top: var(--val-1);
} */
.heroTopTitle {
  font-size: var(--val-4);
  line-height: var(--val-5);
  font-weight: var(--font-bold);
  color: var(--text-color-grey1);
}
.heroDescription {
  margin-top: var(--val-2);
  max-width: 85%;
}
@media screen and (max-width: 768px) {
  .heroDescription {
    max-width: 100%;
  }
}
.heroDescription p {
  font-size: var(--val-1\/5);
  font-weight: var(--font-regular);
  line-height: var(--val1\/5);
  color: var(--text-color-grey2);
}
.userReviewSection {
  margin-top: var(--val-3);
}
/* avatar */
.author__content-img .knowledge-center__avatar-item {
  height: 50px;
  width: 50px;
  /* background-color: var(--bg-color-hero); */
  /* background-color:var(--bg-color-white); */
  background-color: #fff;
  transform: translateY(0);
    transition: transform 0.2s ease;
}
.author__content-img .knowledge-center__avatar-item:hover {
  transform: translateY(-2px);
}
.author__content-title {
font-size: var(--val-1);
    font-weight: var(--font-regular);
    line-height: var(--val1\/5);
    color: var(--text-color-grey2);
}
.author__content-title:hover {
  text-decoration: underline;
}
.author__content-description {
font-size: 14px;
    font-weight: var(--font-regular);
    line-height: var(--val1\/5);
    color: var(--text-color-grey2);
}
.heroContainerRightSide {
  width: 40%;
  padding-left: 3vw;
}
.heroContainerRightSide__img-wrapper {
  position: relative;
  border-radius: var(--border-radius-3);
  overflow: hidden;
  aspect-ratio: 1/1.2;
  width: 100%;
}
.heroContainerRightSide#heroContainerRightSide img {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-3);
  object-fit: cover;
  object-position: center;

  position: absolute !important;
  left: 0;
  top: 0;
}
.heroContainerRightSide#heroContainerRightSide iframe {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-3);

  position: absolute !important;
  left: 0;
  top: 0;
  z-index: 1;
}
.heroContainerRightSide__caption {
  margin-top: 5px;
}

.heroContainerRightSide__caption p {
  font-size: 12px;
  color: var(--text-color-grey2);
}
/* End Hero Section */

/* Body Content */
.bodyContainer {
  margin-bottom: var(--val-3);
}
@media screen and (min-width: 1024px) {
  .bodyContainer {
    padding: 0 var(--val-5);
    padding-top: var(--val-05);
    /* margin-bottom: var(--val-5); */
  }
}
.bodyContainer > div:not(:first-child) {
  margin-top: var(--val-3);
}
.bodyContent__description {
  margin-top: var(--val-1);
}
.bodyContent__description p > br {
  display: none;
}
.bodyContent__description p {
  font-size: 18px;
  color: var(--text-color-grey2);
  font-weight: var(--font-regular);
}
.bodyContent__description strong {
  color: var(--text-color-grey2);
}
.bodyContent__description p:not(:first-child, :last-child) {
  margin-top: var(--val-1) !important;
  margin-bottom: var(--val-1) !important;
}
.bodyContent__description a {
  color: var(--text-color-primary);
}
.bodyContent__description h1,
.bodyContent__description h2,
.bodyContent__description h3,
.bodyContent__description h4 {
  margin-top: var(--val-1\/5) !important;
  margin-bottom: -10px !important;
  font-size: var(--val-1\/5);
  color: var(--text-color-grey1);
  font-weight: var(--font-semibold);
}
.bodyContent__description blockquote {
  font-size: 26px;
  font-weight: var(--font-bold);
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 26px;
  border-left: 4px solid #314bff;
  color: var(--text-color-grey1);
}
.bodyContent__description > ul {
  margin-top: var(--val-5) !important;
  padding-left: var(--val-20) !important;
}
.bodyContent__description > ul li {
  list-style: disc;
}

/* Question Section */
.sectionQustion {
  margin-bottom: var(--val-4);
}
.qustionSectionLeft p {
  font-size: 18px;
  font-weight: var(--font-regular);
  color: var(--text-color-grey1);
}
.qustionSectionRight button {
  font-size: var(--val-13);
  font-weight: var(--font-semibold);
  padding: 5px 18px;
  color: var(--text-color-primary);
  background-color: var(--bg-color-transparent);
  border: 1px solid var(--text-color-primary) !important;
  border-radius: 5px;
}
.qustionSectionRight button.active__btn {
  color: var(--text-color-white);
  background-color: var(--bg-color-primary);
}
/* End Question Section */

/* Posts Section */
@media screen and (max-width: 1023px) {
  .sectionOldAndNewPost {
    flex-direction: column;
    align-items: flex-start;
  }
  .sectionOldAndNewPost-right {
    justify-content: flex-start;
  }
  .sectionOldAndNewPost-right .sectionOldAndNewPostDescription p,
  .sectionOldAndNewPost-right .sectionOldAndNewPostDescription a {
    text-align: start;
  }
  .sectionOldAndNewPost-right .sectionOldAndNewPostDescription {
    order: 1;
  }
  .sectionOldAndNewPost-right .sectionOldAndNewPostImage {
    order: 0;
  }
}
.sectionOldAndNewPost-left,
.sectionOldAndNewPost-right {
  min-width: 370px;
  max-width: 460px;
}
.sectionOldAndNewPostImage {
  max-width: 140px;
  min-width: 140px;
}
.sectionOldAndNewPostDescription a:hover {
  text-decoration: underline !important;
}
.sectionOldAndNewPostDescription a {
  font-size: var(--val-1\/5);
  color: var(--text-color-grey1);
  font-weight: var(--font-semibold);
  margin-top: var(--val-1);
}
.sectionOldAndNewPostDescription p {
  font-size: 18px;
  color: var(--text-color-grey2);
  font-weight: var(--font-regular);
}
/* End Posts Section */
/* End Body Content */

/* Recommended Section */
.details-page__recommended .common__heading {
  font-weight: var(--font-regular);
  font-size: var(--val-2);
  color: var(--text-color-grey1);
}
/* End Recommended Section */