/* Change this dynamically */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

html, body {
  height: 100%; }

/*common css start here*/
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", serif;
  font-weight: 400;
  font-size: 16px;
  color: #1E1E1D;
  overflow-x: hidden; }

/*css change*/
ul {
  margin: 0px;
  padding: 0px;
  list-style: none; }

img {
  max-width: 100%;
  display: block;
  margin: auto; }

/*Global wrapper classes*/
.com-pd-60 {
  padding: 60px 0px; }

.mb-100 {
  margin-bottom: 100px; }

.col-50 {
  width: 50%; }

.mtb-100 {
  margin: 100px 0px; }

.com-pd-100 {
  padding: 100px 0; }

.text-center {
  text-align: center; }

a {
  text-decoration: none; }

.wrapper {
  margin: auto;
  max-width: calc(100% - 160px); }

input, select, button {
  font-family: "Poppins", serif; }

.brands-slider-section h1 {
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 31.93px;
  padding-bottom: 36px; }

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  transition: all 0.5s ease-in-out; }
  header .hamburgerIcon {
    display: none; }
  header .header-container {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px; }
    header .header-container .acnestar-logo {
      transition: all 0.5s ease-in-out; }
      header .header-container .acnestar-logo .blackLogo {
        display: none; }
    header .header-container .header-list ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: 76%;
      gap: 35px; }
      header .header-container .header-list ul li a {
        font-weight: 300;
        font-size: 14px;
        line-height: 15px;
        position: relative;
        color: #FFFFFF; }
        header .header-container .header-list ul li a::after {
          content: "";
          position: absolute;
          bottom: -5px;
          left: 50%;
          width: 0;
          height: 2px;
          background: #FFFFFF;
          transition: width 0.3s ease, left 0.3s ease; }
        header .header-container .header-list ul li a:hover::after {
          width: 100%;
          left: 0; }
      header .header-container .header-list ul li .dark-mode {
        color: #1E1E1D; }

.fixedHeader {
  background-color: #1e1e1d63;
  backdrop-filter: blur(10px); }
  .fixedHeader .header-list ul li a {
    color: #FFFFFF !important; }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F3EEEA;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; }

/* Container for logo and close button */
.mobileHeaderTop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.mobileHeaderLogo img {
  height: 25.12px; }

#closeBtn {
  background: none;
  border: none;
  cursor: pointer; }

/* Navigation Links */
.headerList {
  width: 100%;
  margin-top: 20px; }

.headerList ul {
  margin: 15px 0;
  text-decoration: none; }

.headerList ul li:not(:last-child) {
  border-bottom: 1px solid gray;
  padding: 16px 0; }

.headerList ul li:first-child {
  padding-top: 0; }

.headerList ul li:last-child {
  padding-top: 16px; }

.headerList ul li a {
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #1E1E1D; }

.headerList a:hover {
  color: #ff5733;
  /* Change color on hover */ }

@media only screen and (max-width: 768px) {
  header .acnestar-logo {
    height: 24px;
    width: 137px; }
  header .hamburgerIcon {
    display: block; }
    header .hamburgerIcon button {
      border: none;
      background-color: transparent; }
  header .header-container {
    margin: auto;
    max-width: calc(100% - 38px);
    display: flex;
    align-items: center; }
  header .header-list {
    display: none; } }
footer {
  border-top: 0.5px solid #C0C0C0;
  margin-top: 27px; }
  footer .footer-div {
    display: flex;
    justify-content: space-between; }
    footer .footer-div div a {
      color: #1E1E1D; }
      footer .footer-div div a span {
        color: #0000ff; }
    footer .footer-div div .social-media-icons {
      display: flex;
      gap: 11px; }
      footer .footer-div div .social-media-icons a {
        display: inline-block;
        margin: 0 2px;
        position: relative;
        text-decoration: none;
        color: #1E1E1D; }
        footer .footer-div div .social-media-icons a:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -5px;
          top: 50%;
          transform: translateY(-50%);
          height: 20px;
          width: 0.7px;
          background-color: #1E1E1D; }
        footer .footer-div div .social-media-icons a:first-child {
          margin-left: 0px; }
        footer .footer-div div .social-media-icons a:first-child:hover {
          color: #1877F2; }
    footer .footer-div div h5 {
      padding-bottom: 16px;
      font-weight: 500;
      font-size: 16px;
      line-height: 21.28px;
      color: #1E1E1D; }
    footer .footer-div div p {
      padding-bottom: 16px;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      color: #1E1E1D; }
    footer .footer-div div ul {
      display: flex;
      flex-direction: column;
      gap: 16px; }
      footer .footer-div div ul li {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #1E1E1D; }
        footer .footer-div div ul li a {
          position: relative; }
          footer .footer-div div ul li a::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: #1E1E1D;
            transition: width 0.3s ease, left 0.3s ease; }
          footer .footer-div div ul li a:hover::after {
            width: 100%;
            left: 0; }
  footer .company-trademark {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.5px solid #C0C0C0;
    padding: 32px 0px; }

.banner-section {
  background-image: url("../assets/img/acne-bg.jpg");
  height: 720px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover; }
  .banner-section .banner-heading {
    position: absolute;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 962px;
    text-align: center;
    font-size: 90px;
    color: #FFFFFF;
    font-weight: 275;
    font-size: 90px;
    line-height: 100px; }
    .banner-section .banner-heading span {
      display: block;
      font-weight: 500; }
  .banner-section .video-section {
    position: absolute;
    bottom: 15px;
    right: 30px;
    height: auto; }
    .banner-section .video-section video {
      width: 369px;
      height: 207px;
      border-radius: 16px; }
    .banner-section .video-section button {
      position: absolute;
      left: 14.7px;
      bottom: 14.7px;
      width: 47.5px;
      height: 47.5px;
      border-radius: 50%;
      text-decoration: none;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer; }
      .banner-section .video-section button img {
        width: 16px;
        height: 30px;
        border: 1px;
        padding-left: 3px; }

.section2 {
  background-color: #F3EEEA; }
  .section2 .section2-headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px; }
    .section2 .section2-headings h2 {
      font-weight: 310;
      font-size: 130px;
      line-height: 110px;
      text-align: center;
      color: #1E1E1D; }
    .section2 .section2-headings h3 {
      font-weight: 500;
      font-size: 130px;
      line-height: 110px;
      text-align: center;
      color: #1E1E1D; }
  .section2 .CreamSection {
    max-width: 1200px;
    margin: auto; }
    .section2 .CreamSection .minimalistCream {
      margin: auto;
      padding-bottom: 40px;
      position: relative; }
      .section2 .CreamSection .minimalistCream::after {
        content: '';
        position: absolute;
        right: 31%;
        top: 32%;
        width: 71px;
        height: 115px;
        background: url(../assets/img/curveImg.svg) no-repeat; }
      .section2 .CreamSection .minimalistCream img {
        margin-top: -83px; }
      .section2 .CreamSection .minimalistCream .creamDescription {
        position: absolute;
        right: 0;
        bottom: 11%; }
        .section2 .CreamSection .minimalistCream .creamDescription p {
          width: 350px;
          font-size: 16px;
          font-weight: 275;
          line-height: 24px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none; }

.research-work-section .researchDiv {
  max-width: 1200px;
  margin: auto; }
  .research-work-section .researchDiv h6 {
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    line-height: 33.6px;
    padding: 101px 0 6px 0;
    color: #1E1E1D; }
  .research-work-section .researchDiv p {
    font-size: 80px;
    font-weight: 300;
    line-height: 96px;
    text-align: center; }
    .research-work-section .researchDiv p span {
      font-size: 80px;
      font-weight: 500;
      line-height: 96px; }
.research-work-section .research-work-cards {
  display: grid;
  grid-template-columns: repeat(5, 3fr);
  gap: 30px;
  padding: 60px 0px 100px 0px;
  flex-wrap: wrap; }
  .research-work-section .research-work-cards .research-card {
    text-align: center;
    border: 1px solid #F1F1F1;
    border-radius: 16px;
    padding: 30px 20px;
    transition: transform 0.3s ease, background-color 0.3s ease; }
    .research-work-section .research-work-cards .research-card:hover {
      transform: scale(1.02);
      /* Scale the card slightly */
      background-color: white;
      /* Change background color to white */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
    .research-work-section .research-work-cards .research-card div img {
      height: 67px;
      margin-bottom: 15px; }
    .research-work-section .research-work-cards .research-card p {
      font-size: 16px;
      font-weight: 400;
      line-height: 25.6px;
      color: #565656; }

.faqSection {
  border-radius: 26px;
  background-color: #8278B0; }
  .faqSection .faqTitle {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }
    .faqSection .faqTitle h1 {
      text-align: center;
      color: #FFFFFF;
      padding: 60px 0 58px 0px;
      font-family: Poppins;
      font-size: 120px;
      font-weight: 400;
      line-height: 95px; }
  .faqSection .faqList {
    padding: 0px 3px; }
    .faqSection .faqList .faqItem {
      padding: 20px;
      background-color: #8278B0;
      cursor: pointer;
      position: relative;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      margin-top: -14px;
      padding: 25px 50px 35px 50px; }
      .faqSection .faqList .faqItem .faqQuestion {
        font-size: 32px;
        font-weight: 300;
        line-height: 42px;
        display: block;
        /* Ensure the question is visible by default */ }
      .faqSection .faqList .faqItem .Icon {
        position: absolute;
        right: 50px;
        top: 40%;
        transform: translateY(-50%);
        color: #1E1E1D; }
      .faqSection .faqList .faqItem .minusIcon {
        display: none; }
      .faqSection .faqList .faqItem p {
        margin: 0;
        color: #FFFFFF;
        font-weight: bold; }
      .faqSection .faqList .faqItem .faqAnswer {
        display: none;
        margin-top: 10px;
        color: #FFFFFF;
        font-size: 14px; }
      .faqSection .faqList .faqItem .faqAnswerDetails {
        display: none; }
        .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails {
          display: flex;
          justify-content: space-around;
          align-items: center; }
          .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails h5 {
            font-size: 32px;
            font-weight: 300;
            line-height: 42px; }
          .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails p {
            font-size: 18px;
            font-weight: 300;
            line-height: 27px;
            width: 531px; }
      .faqSection .faqList .faqItem:hover {
        background-color: #665a9b; }
      .faqSection .faqList .faqItem:nth-child(odd) {
        background-color: #FFFFFF; }
        .faqSection .faqList .faqItem:nth-child(odd) p {
          color: #1E1E1D; }
        .faqSection .faqList .faqItem:nth-child(odd) p.faqQuestion {
          color: #1E1E1D; }
      .faqSection .faqList .faqItem:nth-child(even) .plusIcon {
        filter: brightness(0) invert(1); }
      .faqSection .faqList .faqItem:nth-child(even) .minusIcon {
        filter: brightness(0) invert(1); }
      .faqSection .faqList .faqItem:nth-child(even) .faqAnswerDetails h5 {
        color: #FFFFFF; }

.campaignSection .campaignImage {
  position: relative; }
  .campaignSection .campaignImage img {
    max-width: 100%;
    display: block;
    width: 100%; }
.campaignSection .discover-btn {
  position: absolute;
  left: 33%;
  bottom: 29%;
  padding: 14.14px 47px;
  border-radius: 73px;
  border: none;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  color: #1E1E1D;
  background-color: #FFFFFF;
  cursor: pointer; }

.BuzzSection {
  background-color: #F9F7F6;
  margin-bottom: 100px; }
  .BuzzSection .buzzWrapper {
    max-width: calc(100% - 360px);
    margin: auto; }
  .BuzzSection .buzzTitle {
    display: flex;
    flex-direction: column; }
    .BuzzSection .buzzTitle p {
      font-size: 80px;
      font-weight: 300;
      line-height: 95px;
      padding: 60px 0px 51px 0px; }
      .BuzzSection .buzzTitle p span {
        font-size: 80px;
        font-weight: 500;
        line-height: 95px; }
  .BuzzSection .buzzGroupImage {
    display: flex;
    justify-content: space-around;
    gap: 21px;
    padding-bottom: 50px; }
    .BuzzSection .buzzGroupImage .resultImgDiv {
      width: 50%; }
      .BuzzSection .buzzGroupImage .resultImgDiv .resultImg {
        position: relative;
        padding-top: 100%; }
        .BuzzSection .buzzGroupImage .resultImgDiv .resultImg img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; }
    .BuzzSection .buzzGroupImage .creamsImages {
      display: flex;
      flex-direction: column;
      width: 50%;
      gap: 21px; }
      .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 {
        display: flex;
        gap: 21px; }
        .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg {
          width: 50%; }
          .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow {
            position: relative;
            padding-top: 100%;
            background-color: #8278B0;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.7s ease-in-out; }
            .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow img {
              position: absolute;
              top: 50%;
              left: 50%;
              object-fit: cover;
              transform: translate(-50%, -50%); }
            .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(44deg);
              background: url("../assets/img/colorfulUpArrow.svg") no-repeat center;
              background-size: cover;
              width: 50%;
              height: 50%;
              opacity: 0; }
            .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow:hover {
              background-color: #FFFFFF;
              transition: 1s ease-in-out; }
              .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow:hover img {
                opacity: 0;
                visibility: hidden;
                /* Fully hide the image */ }
              .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .forwardGroupImg .forwardArrow:hover::before {
                opacity: 1;
                transition: all 0.5s ease-in-out;
                transform: translate(-50%, -50%) rotate(0deg); }
        .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .GroupImg {
          width: 50%; }
          .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .GroupImg .creamGroupImg {
            position: relative;
            padding-top: 100%; }
            .BuzzSection .buzzGroupImage .creamsImages .creamGroup1 .GroupImg .creamGroupImg img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              object-fit: cover; }
      .BuzzSection .buzzGroupImage .creamsImages div {
        width: 100%; }

.productSection {
  position: relative; }
  .productSection .productsItem {
    display: flex; }
  .productSection .productSlider .productsItem .productVideo {
    width: 50%;
    height: 750px; }
    .productSection .productSlider .productsItem .productVideo video {
      width: 100%;
      object-fit: cover; }
  .productSection .productSlider .productsItem .productDescriptionSection {
    width: 50%; }
    .productSection .productSlider .productsItem .productDescriptionSection .productDescription {
      padding: 63px 0px; }
      .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productLogo {
        margin-bottom: 20px; }
      .productSection .productSlider .productsItem .productDescriptionSection .productDescription .gelLogo {
        margin-top: 20px; }
      .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails {
        margin-top: 30px; }
        .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters {
          display: flex;
          justify-content: center;
          gap: 13px;
          align-items: center;
          padding-top: 32px; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slide-counter {
            font-size: 36px;
            font-weight: 300;
            line-height: 54px; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next {
            border: 1px solid #FFFFFF;
            cursor: pointer;
            background-color: transparent;
            transition: all 0.4s ease-in-out;
            /* Smooth transition */
            position: relative;
            height: 30px;
            width: 30px;
            border-radius: 50%; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next:hover {
              border: 1px solid #1E1E1D; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next .hoverEffect1 {
              opacity: 0;
              top: 50%;
              position: absolute;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: all 0.3s ease-in; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next .moveEffect1 {
              transition: all 0.5s ease-in-out; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next:hover .hoverEffect1 {
              opacity: 1; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next:hover .moveEffect1 {
              transform: translateX(100%);
              opacity: 0; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev {
            border: 1px solid transparent;
            cursor: pointer;
            background-color: transparent;
            /* Smooth transition */
            position: relative;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            transition: all 0.4s ease-in-out; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev:hover {
              border: 1px solid #1E1E1D; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev .hoverEffect1 {
              opacity: 0;
              top: 50%;
              position: absolute;
              left: 50%;
              transform: translate(50%, 50%);
              transition: all 0.8s ease-in-out; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev .moveEffect1 {
              transition: all 0.5s ease-in-out; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev:hover .hoverEffect1 {
              opacity: 1; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-prev:hover .moveEffect1 {
              transform: translateX(100%);
              opacity: 0; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next:hover .hoverEffect1 {
            opacity: 1; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-next:hover .moveEffect1 {
            transform: translateX(100%);
            opacity: 0; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters button.slick-prev.slick-arrow {
            right: 0; }
            .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters button.slick-prev.slick-arrow img {
              rotate: 180deg; }
          .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails .sliderCounters .slick-disabled img {
            opacity: 0.5; }
        .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails h6 {
          font-size: 30px;
          font-weight: 300;
          line-height: 40.5px;
          padding-bottom: 6px; }
        .productSection .productSlider .productsItem .productDescriptionSection .productDescription .productDetails p {
          font-size: 18px;
          font-weight: 275;
          line-height: 27px;
          width: 420px;
          margin: auto; }
      .productSection .productSlider .productsItem .productDescriptionSection .productDescription .vertical-border {
        width: 445px;
        margin-top: 20px;
        margin: auto;
        height: 1px;
        border: 1px solid #F3F4F6; }

.aiAssesmentSection {
  background-color: #F3EEEA;
  position: relative;
  padding-bottom: 42px; }
  .aiAssesmentSection .selectContainer {
    display: none; }
  .aiAssesmentSection .container {
    display: flex;
    max-width: calc(100% - 160px);
    background: #fff;
    margin: auto;
    padding: 50px 50px 102px 50px;
    border-radius: 32px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    gap: 40px;
    position: relative; }
    .aiAssesmentSection .container::before {
      content: "";
      position: absolute;
      top: -75px;
      left: 0;
      width: 100%;
      height: 75px;
      background-image: url(../assets/img/smooth.svg);
      z-index: 999;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      pointer-events: none; }
    .aiAssesmentSection .container .info-section {
      width: 100%;
      position: relative; }
      .aiAssesmentSection .container .info-section p {
        margin-bottom: 15px;
        color: #333;
        font-size: 14px;
        line-height: 26px; }
      .aiAssesmentSection .container .info-section .dropdown-section {
        display: flex;
        gap: 10px;
        margin-top: 10px; }
        .aiAssesmentSection .container .info-section .dropdown-section select {
          padding: 12.5px 0px;
          width: 100%;
          border: 0;
          border-bottom: 1px solid #A6A6A6;
          outline: none;
          font-size: 14px;
          font-weight: 300;
          line-height: 21px;
          color: #1E1E1D; }
      .aiAssesmentSection .container .info-section button {
        display: inline-block;
        background: #fff;
        border: 1px solid #363636;
        padding: 15px 23px;
        cursor: pointer;
        border-radius: 100px;
        transition: all 0.3s ease;
        margin-top: 25px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16.8px;
        letter-spacing: 0.02em;
        color: #363636;
        display: flex;
        gap: 7px; }
      .aiAssesmentSection .container .info-section::after {
        content: "";
        /* Ensures the pseudo-element appears */
        position: absolute;
        top: 50%;
        right: -33px;
        transform: translate(-50%, -50%);
        border: 0.5px solid #EAEBEE;
        height: 100%;
        width: auto; }
    .aiAssesmentSection .container .weather-section {
      text-align: center;
      width: 100%; }
      .aiAssesmentSection .container .weather-section .TemperatureDiv {
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .aiAssesmentSection .container .weather-section .TemperatureDiv img {
          margin: 0; }
      .aiAssesmentSection .container .weather-section .temperature {
        font-size: 40px;
        font-weight: 275;
        line-height: 64px;
        color: #1E1E1D; }
      .aiAssesmentSection .container .weather-section .location {
        text-align: left;
        margin-top: 29px; }
        .aiAssesmentSection .container .weather-section .location h6 {
          font-size: 24px;
          font-weight: 500;
          color: #1E1E1D; }
        .aiAssesmentSection .container .weather-section .location p {
          font-size: 16px;
          font-weight: 300;
          line-height: 25.6px;
          color: #1E1E1D; }
    .aiAssesmentSection .container .tips-section {
      width: 100%; }
      .aiAssesmentSection .container .tips-section img {
        margin: 0; }
      .aiAssesmentSection .container .tips-section .tips-text {
        text-align: left;
        margin-top: 38px; }
        .aiAssesmentSection .container .tips-section .tips-text h6 {
          font-size: 24px;
          font-weight: 500;
          line-height: 38.4px;
          color: #1E1E1D; }
        .aiAssesmentSection .container .tips-section .tips-text p {
          font-size: 16px;
          font-weight: 300;
          line-height: 25.6px;
          color: #1E1E1D; }
  .aiAssesmentSection .skincareImg {
    margin: auto;
    padding: 52px 0px 0px 0px;
    position: relative; }
    .aiAssesmentSection .skincareImg p {
      font-size: 80px;
      font-weight: 300;
      line-height: 95px;
      max-width: 800px; }
      .aiAssesmentSection .skincareImg p span {
        font-size: 80px;
        font-weight: 500;
        line-height: 95px; }
    .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel {
      position: relative;
      max-width: 650px;
      margin: auto; }
    .aiAssesmentSection .skincareImg .upArrowIcon {
      position: absolute;
      top: 33%;
      left: -135px;
      border: 1px solid #1E1E1D;
      text-decoration: none;
      width: 124px;
      height: 124px;
      border-radius: 50%;
      background: transparent;
      transform: translateY(50%); }
    .aiAssesmentSection .skincareImg .oliyMark {
      position: absolute;
      left: 30%;
      top: 22%; }
    .aiAssesmentSection .skincareImg .wrinklesMark {
      position: absolute;
      top: 23%;
      right: 31%; }
    .aiAssesmentSection .skincareImg .pigmentationMark {
      position: absolute;
      bottom: 37%;
      left: 37%; }
    .aiAssesmentSection .skincareImg .oilySkin {
      position: absolute;
      left: 13%;
      top: 13%;
      padding: 7px 7px 7px 7px;
      border-radius: 12px;
      background-color: #FFFFFF; }
      .aiAssesmentSection .skincareImg .oilySkin p {
        font-family: "Inter", serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 14.57px;
        padding-bottom: 6px;
        padding-left: 3px; }
      .aiAssesmentSection .skincareImg .oilySkin button {
        padding: 10px 12px 12px 12px;
        border-radius: 22px;
        background-color: #A29AC3;
        font-family: "Inter", serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 9.71px;
        color: #FFFFFF;
        border: none;
        cursor: pointer; }
    .aiAssesmentSection .skincareImg .wrinklesSkin {
      position: absolute;
      right: 19%;
      top: 26%;
      padding: 9px 11px 7px 11px;
      border-radius: 12px;
      background-color: #FFFFFF; }
      .aiAssesmentSection .skincareImg .wrinklesSkin p {
        font-family: "Inter", serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 14.57px;
        padding-bottom: 6px;
        padding-left: 3px;
        color: #1E1E1D; }
      .aiAssesmentSection .skincareImg .wrinklesSkin button {
        padding: 8px 10px 7px 10px;
        border-radius: 22px;
        background-color: #A29AC3;
        font-family: "Inter", serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 9.71px;
        color: #FFFFFF;
        border: none;
        cursor: pointer; }
    .aiAssesmentSection .skincareImg .pigmentationKSkin {
      position: absolute;
      left: 23%;
      bottom: 33%;
      padding: 10px 12px 10px 13px;
      border-radius: 12px;
      background-color: #FFFFFF; }
      .aiAssesmentSection .skincareImg .pigmentationKSkin p {
        font-family: "Inter", serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 14.57px;
        padding-bottom: 6px;
        padding-left: 3px;
        color: #1E1E1D; }
      .aiAssesmentSection .skincareImg .pigmentationKSkin button {
        padding: 8px 10px 7px 10px;
        border-radius: 22px;
        background-color: #66599F;
        font-family: "Inter", serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 9.71px;
        color: #FFFFFF;
        border: none;
        cursor: pointer; }
  .aiAssesmentSection .TestDiv {
    position: absolute;
    right: -38%;
    top: 45%;
    transform: translateY(50%); }
    .aiAssesmentSection .TestDiv p {
      font-size: 18px;
      font-weight: 275;
      line-height: 27px;
      width: 290px;
      color: #1E1E1D; }
    .aiAssesmentSection .TestDiv button {
      padding: 3px 33px 4px 32px;
      border-radius: 19px;
      opacity: 0px;
      background-color: #3C317B;
      color: #FFFFFF;
      border: none;
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
      margin-top: 10px;
      cursor: pointer; }

.faq-footer {
  display: none; }

@media only screen and (max-width: 991px) {
  header .acnestar-logo {
    height: 24px;
    width: 137px; }
  header .hamburgerIcon {
    display: block; }
    header .hamburgerIcon button {
      border: none;
      background-color: transparent; }
  header .header-container {
    margin: auto;
    max-width: calc(100% - 38px);
    display: flex;
    align-items: center; }
  header .header-list {
    display: none; }

  .banner-section .banner-heading {
    top: 38%;
    width: 100%;
    font-size: 50px;
    line-height: 61px; }

  .section2 .section2-headings {
    padding-top: 40px; }
  .section2 .wrapper {
    margin: auto;
    max-width: calc(100% - 19px);
    overflow-x: hidden; }
  .section2 .section2-headings h2 {
    font-size: 60px;
    line-height: normal; }
  .section2 .section2-headings h3 {
    font-size: 50px;
    line-height: normal; }
  .section2 .CreamSection .minimalistCream {
    padding-bottom: 200px; }
    .section2 .CreamSection .minimalistCream img {
      margin-top: -34px;
      height: 341px; }
    .section2 .CreamSection .minimalistCream .creamDescription {
      right: 0px;
      padding: 0px 50px;
      bottom: 40px;
      max-width: calc(100% - 38px);
      margin: auto; }
      .section2 .CreamSection .minimalistCream .creamDescription p {
        width: unset;
        font-size: 15px;
        text-align: center; }
    .section2 .CreamSection .minimalistCream::after {
      right: 28px; }

  .aiAssesmentSection .container {
    display: none; }
  .aiAssesmentSection .selectContainer {
    display: block;
    max-width: calc(100% - 38px);
    margin: auto; }
    .aiAssesmentSection .selectContainer h5 {
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      color: #1E1E1D;
      padding: 32px 19px 22px 0px; }
    .aiAssesmentSection .selectContainer p {
      font-size: 14px;
      font-weight: 400;
      line-height: 22.4px;
      padding: 0; }
    .aiAssesmentSection .selectContainer .dropdown-section {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      padding-top: 21px; }
      .aiAssesmentSection .selectContainer .dropdown-section select {
        padding: 12.5px 0px;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #A6A6A6;
        outline: none;
        font-size: 14px;
        font-weight: 300;
        line-height: 21px;
        color: #1E1E1D;
        background: transparent; }
    .aiAssesmentSection .selectContainer button {
      display: inline-block;
      background: transparent;
      border: 1px solid #363636;
      padding: 15px 23px;
      cursor: pointer;
      border-radius: 100px;
      transition: all 0.3s ease;
      margin-top: 25px;
      font-size: 14px;
      font-weight: 600;
      line-height: 16.8px;
      letter-spacing: 0.02em;
      color: #363636;
      display: flex;
      gap: 7px; }
      .aiAssesmentSection .selectContainer button:hover {
        background: #333;
        color: white; }
    .aiAssesmentSection .selectContainer .weather-section {
      background-color: #FFFFFF;
      padding: 16px 0px 0px 16px;
      margin-top: 32px;
      border-radius: 10px; }
      .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv {
        display: flex;
        justify-content: space-between; }
        .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv img {
          margin: 0; }
        .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv .temperature {
          font-size: 40px;
          font-weight: 275;
          line-height: 64px;
          margin-right: 28px; }
      .aiAssesmentSection .selectContainer .weather-section .location {
        padding: 16px 61px 16px 16px; }
        .aiAssesmentSection .selectContainer .weather-section .location h6 {
          font-size: 24px;
          font-weight: 500;
          line-height: 38.4px; }
        .aiAssesmentSection .selectContainer .weather-section .location p {
          font-size: 14px;
          font-weight: 300;
          line-height: 22.4px; }
    .aiAssesmentSection .selectContainer .tips-section {
      background-color: #FFFFFF;
      padding: 16px 61px 17px 16px;
      margin-top: 24px;
      border-radius: 10px; }
      .aiAssesmentSection .selectContainer .tips-section img {
        margin: 0;
        padding-bottom: 10px; }
      .aiAssesmentSection .selectContainer .tips-section .tips-text h6 {
        font-size: 24px;
        font-weight: 500;
        line-height: 38.4px; }
      .aiAssesmentSection .selectContainer .tips-section .tips-text p {
        font-size: 14px;
        font-weight: 300;
        line-height: 22.4px; }
  .aiAssesmentSection .skincareImg {
    padding: 40px 0px 0px 0px;
    max-width: calc(100% - 38px); }
    .aiAssesmentSection .skincareImg p {
      font-size: 30px;
      font-weight: 300;
      line-height: 36px;
      padding: 0px 19px; }
      .aiAssesmentSection .skincareImg p span {
        font-size: 30px;
        line-height: normal; }
    .aiAssesmentSection .skincareImg .upArrowIcon {
      display: none; }
    .aiAssesmentSection .skincareImg .aiAssementImgSection {
      background: #F7F7F7;
      margin: auto;
      border-radius: 12px; }
      .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel {
        position: relative;
        max-width: 650px;
        margin: auto;
        padding: 19px 21px 0px 22px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .skinCareModelImg {
          padding: 32px 30px 0px 50px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .oilySkin {
          left: 18%;
          top: 15%;
          padding: 9px 8px 12px 6px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .wrinklesSkin {
          right: 20%;
          top: 21%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .pigmentationKSkin {
          left: 15%;
          bottom: 43%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .oliyMark {
          left: 34%;
          top: 24%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .pigmentationMark {
          bottom: 49%;
          left: 34%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .wrinklesMark {
          left: 49%;
          top: 20%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .TestDiv {
          right: 0;
          position: relative;
          transform: translate(0px, 0px);
          padding: 31px 0px 20px 0px; }
          .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .TestDiv p {
            font-size: 14px;
            line-height: 21px;
            padding: 0;
            width: auto; }

  .productSection {
    margin: 40px 0px; }
    .productSection .productSlider .productItem .productsItem .productDescriptionSection {
      width: 100%; }
      .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription {
        padding: 20px 0px; }
        .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription .vertical-border {
          width: 80%; }
        .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription .productDetails p {
          font-size: 14px;
          font-weight: 400;
          line-height: 21px;
          width: 100%;
          padding: 0 15px; }
    .productSection .productSlider .productItem .productsItem .productVideo {
      display: none; }
    .productSection .slickCounterSection {
      max-width: 168px;
      margin: auto;
      position: relative; }
      .productSection .slickCounterSection .sliderCounters {
        position: static;
        gap: 4px; }

  .BuzzSection {
    margin: 50px 0px; }
    .BuzzSection .buzzWrapper {
      max-width: calc(100% - 38px); }
      .BuzzSection .buzzWrapper .buzzTitle p {
        font-size: 30px;
        font-weight: 300;
        line-height: 45px;
        text-align: center; }
        .BuzzSection .buzzWrapper .buzzTitle p span {
          font-size: 30px;
          font-weight: 500;
          line-height: 45px;
          padding: 0; }
      .BuzzSection .buzzWrapper .buzzGroupImage {
        display: flex;
        flex-direction: column;
        align-items: center; }
        .BuzzSection .buzzWrapper .buzzGroupImage .resultImgDiv {
          width: 100%; }
        .BuzzSection .buzzWrapper .buzzGroupImage .creamsImages {
          width: 100%; }

  .campaignSection .campaignImage .discover-btn {
    left: 18%;
    bottom: 21%;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 20px; }

  .faqSection .faqTitle h1 {
    text-align: center;
    font-size: 30px;
    line-height: 45px; }
  .faqSection .faqList .faqItem {
    padding: 40px 19px 40px 19px; }
    .faqSection .faqList .faqItem .minusIcon {
      right: 10px;
      /* bottom: 25%; */
      top: 189px; }
    .faqSection .faqList .faqItem .plusIcon {
      right: 6px;
      top: 58px; }
    .faqSection .faqList .faqItem .faqQuestion {
      font-size: 20px;
      font-weight: 300;
      line-height: 30px; }
    .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails {
      display: flex;
      flex-direction: column; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div {
        width: 100%; }
        .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div img {
          margin: 0;
          width: 166.33px; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div h5 {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div p {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        width: 100%; }

  .desktopFooter {
    display: none; }

  .faq-footer {
    display: block;
    background-color: #f9f9f9;
    padding: 20px;
    border-top: 1px solid #ddd; }
    .faq-footer .faq-container .faq-title {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      text-align: center; }
    .faq-footer .faq-container .faq-item {
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd; }
      .faq-footer .faq-container .faq-item button {
        font-size: 18px;
        font-weight: 500;
        line-height: 23.94px; }
      .faq-footer .faq-container .faq-item .faq-question {
        width: 100%;
        text-align: left;
        padding: 15px;
        color: #1E1E1D;
        background-color: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-question::after {
          content: '';
          background-image: url("../assets/img/footermobileicon.svg");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width: 16px;
          height: 29px;
          position: absolute;
          right: 26px;
          font-size: 12px;
          rotate: 180deg;
          transition: all 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-question[aria-expanded="true"]::after {
          transform: rotate(180deg); }
      .faq-footer .faq-container .faq-item .faq-answer {
        padding: 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-answer ul {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding-bottom: 24px; }
          .faq-footer .faq-container .faq-item .faq-answer ul li {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; }
            .faq-footer .faq-container .faq-item .faq-answer ul li a {
              text-decoration: none;
              color: #1E1E1D; }
        .faq-footer .faq-container .faq-item .faq-answer p {
          margin: 10px 0;
          color: #666;
          font-size: 14px; }
      .faq-footer .faq-container .faq-item[open] .faq-answer {
        max-height: 200px; }
    .faq-footer .faq-container .socialMediaDiv {
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 24px; }
      .faq-footer .faq-container .socialMediaDiv h5 {
        font-size: 18px;
        font-weight: 500;
        line-height: 23.94px; }
      .faq-footer .faq-container .socialMediaDiv .social-media-icons {
        display: flex;
        gap: 22px; }
        .faq-footer .faq-container .socialMediaDiv .social-media-icons a {
          position: relative; }
          .faq-footer .faq-container .socialMediaDiv .social-media-icons a::after {
            content: '';
            background-image: url("../assets/img/Line13.svg");
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            right: -17px;
            width: 10px;
            height: 19px;
            top: 0; }

  .brands-slider-section {
    padding: 50px 19px; }
    .brands-slider-section .slick-slide .inner {
      padding-left: 50px; }

  .research-work-section .research-work-cards {
    grid-template-columns: repeat(2, 3fr); } }
@media only screen and (max-width: 563px) {
  .banner-section {
    background-image: url("../assets/img/mobileViewBannerimg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%; }
    .banner-section .video-section {
      width: 221px;
      right: 15px;
      bottom: 8px; }
      .banner-section .video-section video {
        width: 100%;
        height: 100%;
        border-radius: 16px; }
      .banner-section .video-section button {
        left: 8.7px;
        bottom: 10.7px;
        width: 28.5px;
        height: 28.5px; }
    .banner-section .banner-heading {
      font-size: 30px;
      max-width: calc(100% - 19px);
      line-height: 45px;
      text-align: start; }

  .section2 .section2-headings {
    padding-top: 40px; }
  .section2 .wrapper {
    margin: auto;
    max-width: calc(100% - 19px);
    overflow-x: hidden; }
  .section2 .section2-headings h2 {
    font-size: 30px;
    line-height: normal; }
  .section2 .section2-headings h3 {
    font-size: 30px;
    line-height: normal; }
  .section2 .CreamSection .minimalistCream {
    padding-bottom: 200px; }
    .section2 .CreamSection .minimalistCream img {
      margin-top: -34px;
      height: 341px; }
    .section2 .CreamSection .minimalistCream .creamDescription {
      right: 0px;
      left: 16px;
      padding: 0px 19px;
      bottom: 40px;
      max-width: calc(100% - 38px);
      margin: auto; }
      .section2 .CreamSection .minimalistCream .creamDescription p {
        width: auto;
        font-size: 12px; }
    .section2 .CreamSection .minimalistCream::after {
      right: 28px; }

  .research-work-section .researchDiv h6 {
    font-size: 14px;
    padding: 40px 19px 14px 19px;
    line-height: 19px; }
  .research-work-section .researchDiv p {
    font-size: 30px;
    line-height: 36px;
    padding: 0px 19px; }
    .research-work-section .researchDiv p span {
      font-size: 30px;
      line-height: 36px; }
  .research-work-section .research-work-cards.wrapper {
    max-width: calc(100% - 38px);
    display: grid;
    grid-template-columns: repeat(2, 3fr);
    padding: 40px 0px 40px 0px; }
    .research-work-section .research-work-cards.wrapper .research-card p {
      font-size: 12px;
      line-height: 19px; }

  .aiAssesmentSection .container {
    display: none; }
  .aiAssesmentSection .selectContainer {
    display: block;
    max-width: calc(100% - 38px);
    margin: auto; }
    .aiAssesmentSection .selectContainer h5 {
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      color: #1E1E1D;
      padding: 32px 19px 22px 0px; }
    .aiAssesmentSection .selectContainer p {
      font-size: 14px;
      font-weight: 400;
      line-height: 22.4px;
      padding: 0; }
    .aiAssesmentSection .selectContainer .dropdown-section {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      padding-top: 21px; }
      .aiAssesmentSection .selectContainer .dropdown-section select {
        padding: 12.5px 0px;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #A6A6A6;
        outline: none;
        font-size: 14px;
        font-weight: 300;
        line-height: 21px;
        color: #1E1E1D;
        background: transparent; }
    .aiAssesmentSection .selectContainer button {
      display: inline-block;
      background: transparent;
      border: 1px solid #363636;
      padding: 15px 23px;
      cursor: pointer;
      border-radius: 100px;
      transition: all 0.3s ease;
      margin-top: 25px;
      font-size: 14px;
      font-weight: 600;
      line-height: 16.8px;
      letter-spacing: 0.02em;
      color: #363636;
      display: flex;
      gap: 7px; }
      .aiAssesmentSection .selectContainer button:hover {
        background: #333;
        color: white; }
    .aiAssesmentSection .selectContainer .weather-section {
      background-color: #FFFFFF;
      padding: 16px 0px 0px 16px;
      margin-top: 32px;
      border-radius: 10px; }
      .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv {
        display: flex;
        justify-content: space-between; }
        .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv img {
          margin: 0; }
        .aiAssesmentSection .selectContainer .weather-section .TemperatureDiv .temperature {
          font-size: 40px;
          font-weight: 275;
          line-height: 64px;
          margin-right: 28px; }
      .aiAssesmentSection .selectContainer .weather-section .location {
        padding: 16px 61px 16px 16px; }
        .aiAssesmentSection .selectContainer .weather-section .location h6 {
          font-size: 24px;
          font-weight: 500;
          line-height: 38.4px; }
        .aiAssesmentSection .selectContainer .weather-section .location p {
          font-size: 14px;
          font-weight: 300;
          line-height: 22.4px; }
    .aiAssesmentSection .selectContainer .tips-section {
      background-color: #FFFFFF;
      padding: 16px 61px 17px 16px;
      margin-top: 24px;
      border-radius: 10px; }
      .aiAssesmentSection .selectContainer .tips-section img {
        margin: 0;
        padding-bottom: 10px; }
      .aiAssesmentSection .selectContainer .tips-section .tips-text h6 {
        font-size: 24px;
        font-weight: 500;
        line-height: 38.4px; }
      .aiAssesmentSection .selectContainer .tips-section .tips-text p {
        font-size: 14px;
        font-weight: 300;
        line-height: 22.4px; }
  .aiAssesmentSection .skincareImg {
    padding: 40px 0px 0px 0px;
    max-width: calc(100% - 38px); }
    .aiAssesmentSection .skincareImg p {
      font-size: 29px;
      font-weight: 300;
      line-height: 36px; }
      .aiAssesmentSection .skincareImg p span {
        font-size: 30px;
        line-height: normal; }
    .aiAssesmentSection .skincareImg .upArrowIcon {
      display: none; }
    .aiAssesmentSection .skincareImg .aiAssementImgSection {
      background: #F7F7F7;
      margin: auto;
      border-radius: 12px; }
      .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel {
        position: relative;
        max-width: 650px;
        margin: auto;
        padding: 19px 21px 0px 22px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .skinCareModelImg {
          padding: 32px 30px 0px 50px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .oilySkin {
          left: 5%;
          top: 9%;
          padding: 9px 8px 12px 6px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .wrinklesSkin {
          right: 6.83px;
          top: 88px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .pigmentationKSkin {
          left: 5%;
          bottom: 43%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .oliyMark {
          left: 30%;
          top: 55px; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .pigmentationMark {
          bottom: 49%;
          left: 34%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .wrinklesMark {
          left: 49%;
          top: 20%; }
        .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .TestDiv {
          right: 0;
          position: relative;
          transform: translate(0px, 0px);
          padding: 31px 0px 20px 0px; }
          .aiAssesmentSection .skincareImg .aiAssementImgSection .skinCareModel .TestDiv p {
            font-size: 14px;
            line-height: 21px;
            padding: 0;
            width: auto; }

  .productSection {
    margin: 40px 0px; }
    .productSection .productSlider .productItem .productsItem .productDescriptionSection {
      width: 100%; }
      .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription {
        padding: 20px 0px; }
        .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription .vertical-border {
          width: 80%; }
        .productSection .productSlider .productItem .productsItem .productDescriptionSection .productDescription .productDetails p {
          font-size: 14px;
          font-weight: 400;
          line-height: 21px;
          width: 100%;
          padding: 0 15px; }
    .productSection .productSlider .productItem .productsItem .productVideo {
      display: none; }
    .productSection .slickCounterSection {
      max-width: 168px;
      margin: auto;
      position: relative; }
      .productSection .slickCounterSection .sliderCounters {
        position: static;
        gap: 4px; }

  .BuzzSection {
    margin: 50px 0px; }
    .BuzzSection .buzzWrapper {
      max-width: calc(100% - 38px); }
      .BuzzSection .buzzWrapper .buzzTitle p {
        font-size: 30px;
        font-weight: 300;
        line-height: 45px;
        text-align: center; }
        .BuzzSection .buzzWrapper .buzzTitle p span {
          font-size: 30px;
          font-weight: 500;
          line-height: 45px;
          padding: 0; }
      .BuzzSection .buzzWrapper .buzzGroupImage {
        display: flex;
        flex-direction: column;
        align-items: center; }
        .BuzzSection .buzzWrapper .buzzGroupImage .resultImgDiv {
          width: 100%; }
        .BuzzSection .buzzWrapper .buzzGroupImage .creamsImages {
          width: 100%; }

  .campaignSection .campaignImage .discover-btn {
    left: 18%;
    bottom: 21%;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 20px; }

  .faqSection .faqTitle h1 {
    text-align: center;
    font-size: 30px;
    line-height: 45px; }
  .faqSection .faqList .faqItem {
    padding: 40px 19px 40px 14px; }
    .faqSection .faqList .faqItem .minusIcon {
      right: 10px;
      /* bottom: 25%; */
      top: 189px; }
    .faqSection .faqList .faqItem .plusIcon {
      right: 6px;
      top: 53px; }
    .faqSection .faqList .faqItem .faqQuestion {
      font-size: 16px;
      font-weight: 300;
      line-height: 27px; }
    .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails {
      display: flex;
      flex-direction: column; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div {
        width: 100%; }
        .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div img {
          margin: 0;
          width: 166.33px; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div h5 {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; }
      .faqSection .faqList .faqItem .faqAnswerDetails .faqDetails div p {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        width: 100%; }

  .desktopFooter {
    display: none; }

  .faq-footer {
    display: block;
    background-color: #f9f9f9;
    padding: 20px;
    border-top: 1px solid #ddd; }
    .faq-footer .faq-container .faq-title {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      text-align: center; }
    .faq-footer .faq-container .faq-item {
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd; }
      .faq-footer .faq-container .faq-item button {
        font-size: 18px;
        font-weight: 500;
        line-height: 23.94px; }
      .faq-footer .faq-container .faq-item .faq-question {
        width: 100%;
        text-align: left;
        padding: 15px;
        color: #1E1E1D;
        background-color: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-question::after {
          content: '';
          background-image: url("../assets/img/footermobileicon.svg");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width: 16px;
          height: 29px;
          position: absolute;
          right: 26px;
          font-size: 12px;
          rotate: 180deg;
          transition: all 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-question[aria-expanded="true"]::after {
          transform: rotate(180deg); }
      .faq-footer .faq-container .faq-item .faq-answer {
        padding: 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out; }
        .faq-footer .faq-container .faq-item .faq-answer ul {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding-bottom: 24px; }
          .faq-footer .faq-container .faq-item .faq-answer ul li {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; }
            .faq-footer .faq-container .faq-item .faq-answer ul li a {
              text-decoration: none;
              color: #1E1E1D; }
        .faq-footer .faq-container .faq-item .faq-answer p {
          margin: 10px 0;
          color: #666;
          font-size: 14px; }
      .faq-footer .faq-container .faq-item[open] .faq-answer {
        max-height: 200px; }
    .faq-footer .faq-container .socialMediaDiv {
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 24px; }
      .faq-footer .faq-container .socialMediaDiv h5 {
        font-size: 18px;
        font-weight: 500;
        line-height: 23.94px; }
      .faq-footer .faq-container .socialMediaDiv .social-media-icons {
        display: flex;
        gap: 22px; }
        .faq-footer .faq-container .socialMediaDiv .social-media-icons a {
          position: relative; }
          .faq-footer .faq-container .socialMediaDiv .social-media-icons a::after {
            content: '';
            background-image: url("../assets/img/Line13.svg");
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            right: -17px;
            width: 10px;
            height: 19px;
            top: 0; }

  .brands-slider-section {
    padding: 50px 19px; }
    .brands-slider-section .slick-slide .inner {
      padding-left: 50px; } }
.productBanner {
  background: #F3EEEA;
  padding-top: 200px;
  padding-bottom: 90px; }
  .productBanner .bannerHeading h1 {
    font-weight: 300;
    font-size: 80px;
    line-height: 120px;
    letter-spacing: 0%;
    text-align: center; }
  .productBanner .bannerHeading p {
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: center; }

.productImageSection .BannerImg img {
  margin: 0;
  width: 100%; }

.productListingSection {
  padding-bottom: 100px; }
  .productListingSection .productListing {
    display: flex; }
    .productListingSection .productListing .productListDesc .prodListDesc div {
      padding: 143px 75px 144px 80px; }
      .productListingSection .productListing .productListDesc .prodListDesc div p:first-child {
        font-weight: 300;
        font-size: 24px;
        line-height: 33.6px;
        padding-bottom: 10px; }
      .productListingSection .productListing .productListDesc .prodListDesc div p:nth-of-type(2) {
        font-weight: 300;
        font-size: 16px;
        line-height: 22.4px;
        color: .productListingSection .productListing .productListDesc .prodListDesc div p:nth-of-type(2) black; }
      .productListingSection .productListing .productListDesc .prodListDesc div h2 {
        font-weight: 300;
        font-size: 52px;
        line-height: 62.4px;
        letter-spacing: 0%;
        padding-bottom: 30px; }
        .productListingSection .productListing .productListDesc .prodListDesc div h2 span {
          font-weight: 500;
          font-size: 52px;
          line-height: 62.4px;
          letter-spacing: 0%; }
      .productListingSection .productListing .productListDesc .prodListDesc div button {
        padding: 5px 32px;
        border-radius: 50px;
        font-family: Poppins;
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        letter-spacing: 0%;
        margin-top: 40px;
        border: 1.5px solid #1E1E1D;
        background: transparent;
        cursor: pointer; }
        .productListingSection .productListing .productListDesc .prodListDesc div button:hover {
          background: #3C317B;
          color: #FFFFFF;
          border-color: transparent; }
  .productListingSection .productListImgs .ProductImageDiv {
    position: relative;
    padding-top: 100%;
    height: 100%; }
    .productListingSection .productListImgs .ProductImageDiv img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }

.sucessStorySection .successStoryHeading {
  text-align: center; }
  .sucessStorySection .successStoryHeading p {
    font-weight: 300;
    font-size: 24px;
    line-height: 33.6px; }
  .sucessStorySection .successStoryHeading h3 {
    font-weight: 300;
    font-size: 80px;
    line-height: 96px; }
    .sucessStorySection .successStoryHeading h3 span {
      font-weight: 500;
      font-size: 80px;
      line-height: 96px; }
  .sucessStorySection .successStoryHeading h4 {
    font-weight: 300;
    font-size: 80px;
    line-height: 96px; }
.sucessStorySection .slick .slick-slide .inner {
  margin-right: 30px; }
  .sucessStorySection .slick .slick-slide .inner .successStoryCard {
    border: 1.4px solid #F9F7F6;
    border-radius: 16px; }
    .sucessStorySection .slick .slick-slide .inner .successStoryCard .innerCard {
      padding: 20px; }
      .sucessStorySection .slick .slick-slide .inner .successStoryCard .innerCard .productRating {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 20px; }
        .sucessStorySection .slick .slick-slide .inner .successStoryCard .innerCard .productRating img {
          margin: 0; }
      .sucessStorySection .slick .slick-slide .inner .successStoryCard .innerCard .successCardDesc p {
        font-weight: 300;
        font-size: 16px;
        line-height: 22.4px; }
      .sucessStorySection .slick .slick-slide .inner .successStoryCard .innerCard .testimonialDiv {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 30px; }

@media only screen and (max-width: 991px) {
  .productBanner {
    padding-top: 100px; }
    .productBanner .bannerHeading h1 {
      font-size: 40px;
      line-height: 80px; }

  .sucessStorySection .successStoryHeading {
    padding-bottom: 40px; }
    .sucessStorySection .successStoryHeading p {
      font-size: 24px;
      line-height: 33.6px; }
    .sucessStorySection .successStoryHeading h3 {
      font-size: 20px;
      line-height: 40px; }
      .sucessStorySection .successStoryHeading h3 span {
        font-size: 50px;
        line-height: 73px; }
    .sucessStorySection .successStoryHeading h4 {
      font-size: 40px;
      line-height: 48px; }
  .sucessStorySection .slick .slick-slide .inner .successStoryCard {
    border: 1.4px solid #F9F7F6; }

  .productListingSection .productListing {
    flex-direction: column-reverse; }
    .productListingSection .productListing .productListImgs {
      order: -1; }
    .productListingSection .productListing .productListDesc {
      order: 2;
      text-align: center; }
    .productListingSection .productListing .productListDesc .prodListDesc div {
      padding: 50px;
      text-align: center; }
      .productListingSection .productListing .productListDesc .prodListDesc div p:first-child {
        font-size: 18px;
        line-height: 14.6px; }
      .productListingSection .productListing .productListDesc .prodListDesc div h2 {
        font-size: 32px;
        line-height: 50px;
        padding-bottom: 6px; }
        .productListingSection .productListing .productListDesc .prodListDesc div h2 span {
          font-size: 32px;
          line-height: 48.4px; }
  .productListingSection .col-50 {
    width: 100%; } }
@media only screen and (max-width: 563px) {
  .productBanner {
    padding-top: 100px; }
    .productBanner .bannerHeading h1 {
      font-size: 40px;
      line-height: 80px; }

  .sucessStorySection .successStoryHeading {
    padding-bottom: 40px; }
    .sucessStorySection .successStoryHeading p {
      font-size: 24px;
      line-height: 33.6px; }
    .sucessStorySection .successStoryHeading h3 {
      font-size: 20px;
      line-height: 40px; }
      .sucessStorySection .successStoryHeading h3 span {
        font-size: 50px;
        line-height: 73px; }
    .sucessStorySection .successStoryHeading h4 {
      font-size: 40px;
      line-height: 48px; }
  .sucessStorySection .slick .slick-slide .inner .successStoryCard {
    border: 1.4px solid #F9F7F6; }

  .productListingSection .productListing {
    flex-direction: column-reverse; }
    .productListingSection .productListing .productListImgs {
      order: -1; }
    .productListingSection .productListing .productListDesc {
      order: 2;
      text-align: center; }
    .productListingSection .productListing .productListDesc .prodListDesc div {
      padding: 50px;
      text-align: center; }
      .productListingSection .productListing .productListDesc .prodListDesc div p:first-child {
        font-size: 18px;
        line-height: 14.6px; }
      .productListingSection .productListing .productListDesc .prodListDesc div h2 {
        font-size: 32px;
        line-height: 50px;
        padding-bottom: 6px; }
        .productListingSection .productListing .productListDesc .prodListDesc div h2 span {
          font-size: 32px;
          line-height: 48.4px; }
  .productListingSection .col-50 {
    width: 100%; } }
.contactUsSection .contactUsBanner {
  position: relative;
  width: 100%; }
  .contactUsSection .contactUsBanner img {
    width: 100%;
    height: auto;
    object-fit: cover; }
  .contactUsSection .contactUsBanner .getInTouchSection {
    position: absolute;
    left: 80px;
    /* Use percentage for responsive alignment */
    bottom: 71px;
    max-width: 600px;
    padding: 15px;
    border-radius: 10px; }
    .contactUsSection .contactUsBanner .getInTouchSection h5 {
      font-size: 42px;
      color: white; }
    .contactUsSection .contactUsBanner .getInTouchSection p {
      font-size: 20px;
      color: white; }
      .contactUsSection .contactUsBanner .getInTouchSection p span {
        text-decoration: underline; }

.contactFormSection .contactUs {
  max-width: calc(100% - 540px);
  margin: auto;
  text-align: center; }
  .contactFormSection .contactUs .contactHeadings div {
    position: relative;
    width: fit-content;
    margin: auto; }
  .contactFormSection .contactUs .contactHeadings h6 {
    font-weight: 300;
    font-size: 80px;
    line-height: 96px;
    letter-spacing: 0%;
    position: relative; }
    .contactFormSection .contactUs .contactHeadings h6 .span1 {
      position: absolute;
      left: 0;
      z-index: 1;
      top: 76px;
      font-weight: 300;
      font-size: 20px;
      line-height: 28px;
      background-color: #8278B0;
      border-radius: 100px;
      padding: 10px 10px;
      rotate: 349deg;
      rotate: 180d;
      color: #FFFFFF; }
    .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) {
      position: relative; }
      .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span2 {
        position: absolute;
        left: -6px;
        z-index: 1;
        top: 23px;
        font-weight: 300;
        font-size: 20px;
        line-height: 28px;
        background-color: #F3EEEA;
        border-radius: 100px;
        padding: 10px 10px;
        rotate: 331deg;
        rotate: 180d;
        color: #FFFFFF; }
      .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span3 {
        position: absolute;
        right: -3px;
        z-index: 1;
        top: 42px;
        font-weight: 300;
        font-size: 20px;
        line-height: 28px;
        background-color: #F3EEEA;
        border-radius: 100px;
        padding: 16px 20px;
        rotate: 29deg;
        rotate: 180d;
        color: #FFFFFF; }
  .contactFormSection .contactUs .contactHeadings p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%; }
  .contactFormSection .contactUs .contactUsForm {
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-top: 60px; }
    .contactFormSection .contactUs .contactUsForm .parentFormDiv {
      display: flex;
      flex-direction: column;
      padding: 40px;
      gap: 40px; }
      .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields {
        display: flex;
        flex-direction: column;
        justify-content: start; }
        .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields label {
          text-align: start; }
        .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields input {
          border: none;
          border-bottom: 1px solid #ddd; }
          .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields input:focus-visible {
            outline: none; }
        .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields .submitBtn {
          padding: 20px 210px;
          border-radius: 100px;
          border: none;
          background: #8278B0;
          color: #FFFFFF;
          font-weight: 300;
          font-size: 16px;
          line-height: 19.2px; }

@media only screen and (max-width: 991px) {
  .contactUsSection .contactUsBanner .getInTouchSection {
    left: 34px;
    bottom: 13px;
    max-width: 400px;
    padding: 5px; }
    .contactUsSection .contactUsBanner .getInTouchSection h5 {
      font-size: 32px; }
    .contactUsSection .contactUsBanner .getInTouchSection p {
      font-size: 14px; }

  .contactFormSection,
  .mtb-100 {
    margin: 50px 0; }
    .contactFormSection .contactUs,
    .mtb-100 .contactUs {
      max-width: calc(100% - 38px); }
      .contactFormSection .contactUs .contactHeadings h6,
      .mtb-100 .contactUs .contactHeadings h6 {
        font-size: 30px;
        line-height: 24px;
        padding-bottom: 70px; }
        .contactFormSection .contactUs .contactHeadings h6 .span1,
        .mtb-100 .contactUs .contactHeadings h6 .span1 {
          top: 22px;
          left: 0;
          padding: 5px 5px;
          font-size: 16px;
          line-height: 20px;
          rotate: 349deg; }
        .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span2,
        .mtb-100 .contactUs .contactHeadings h6:nth-of-type(2) .span2 {
          top: -43px;
          left: 0px;
          font-size: 16px;
          line-height: 20px;
          rotate: 331deg; }
        .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span3,
        .mtb-100 .contactUs .contactHeadings h6:nth-of-type(2) .span3 {
          right: unset;
          top: -3px;
          padding: 10px 10px;
          font-size: 16px;
          line-height: 20px; }
      .contactFormSection .contactUs .contactHeadings p,
      .mtb-100 .contactUs .contactHeadings p {
        font-size: 14px;
        line-height: 21px; }
      .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields .submitBtn,
      .mtb-100 .contactUs .contactUsForm .parentFormDiv .formFields .submitBtn {
        padding: 10px; } }
@media only screen and (max-width: 563px) {
  .contactUsSection .contactUsBanner .getInTouchSection {
    left: 0;
    /* top: 24px; */
    bottom: 0;
    /* transform: translate(-50%, -50%); */
    padding: 10px; }
    .contactUsSection .contactUsBanner .getInTouchSection h5 {
      font-size: 25px; }
    .contactUsSection .contactUsBanner .getInTouchSection p {
      font-size: 14px; }

  .contactFormSection,
  .mtb-100 {
    margin: 50px 0; }
    .contactFormSection .contactUs,
    .mtb-100 .contactUs {
      max-width: calc(100% - 38px); }
      .contactFormSection .contactUs .contactHeadings h6,
      .mtb-100 .contactUs .contactHeadings h6 {
        font-size: 30px;
        line-height: 24px;
        padding-bottom: 70px; }
        .contactFormSection .contactUs .contactHeadings h6 .span1,
        .mtb-100 .contactUs .contactHeadings h6 .span1 {
          top: 22px;
          left: 0;
          padding: 5px 5px;
          font-size: 16px;
          line-height: 20px;
          rotate: 349deg; }
        .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span2,
        .mtb-100 .contactUs .contactHeadings h6:nth-of-type(2) .span2 {
          top: -43px;
          left: 0px;
          font-size: 16px;
          line-height: 20px;
          rotate: 331deg; }
        .contactFormSection .contactUs .contactHeadings h6:nth-of-type(2) .span3,
        .mtb-100 .contactUs .contactHeadings h6:nth-of-type(2) .span3 {
          right: unset;
          top: -3px;
          padding: 10px 10px;
          font-size: 16px;
          line-height: 20px; }
      .contactFormSection .contactUs .contactHeadings p,
      .mtb-100 .contactUs .contactHeadings p {
        font-size: 14px;
        line-height: 21px; }
      .contactFormSection .contactUs .contactUsForm .parentFormDiv .formFields .submitBtn,
      .mtb-100 .contactUs .contactUsForm .parentFormDiv .formFields .submitBtn {
        padding: 10px; } }
.blogsBannerSection .blogsBannerImg {
  position: relative; }
  .blogsBannerSection .blogsBannerImg img {
    margin: 0;
    width: 100%; }
  .blogsBannerSection .blogsBannerImg .bannerDescSection {
    position: absolute;
    bottom: 0; }
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv {
      max-width: calc(100% - 160px);
      margin: auto;
      display: flex;
      align-items: center;
      gap: 50px;
      padding-bottom: 80px; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne {
        width: 60%; }
        .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #FFFFFF; }
        .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne p {
          font-weight: 400;
          font-size: 42px;
          line-height: 63px;
          color: #FFFFFF; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo {
        width: 40%; }
        .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo p {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #FFFFFF; }

.blogsCardSection .blogCardsList {
  max-width: calc(100% - 160px);
  margin: auto; }
  .blogsCardSection .blogCardsList .blogCardsMain {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    justify-content: center;
    gap: 30px; }
    .blogsCardSection .blogCardsList .blogCardsMain .blogCard span {
      font-weight: 300;
      font-size: 16px;
      line-height: 22.4px;
      letter-spacing: 0%; }
    .blogsCardSection .blogCardsList .blogCardsMain .blogCard p:nth-of-type(1) {
      font-weight: 300;
      font-size: 24px;
      line-height: 28.8px;
      padding: 20px 0px; }
    .blogsCardSection .blogCardsList .blogCardsMain .blogCard p:nth-of-type(2) {
      font-weight: 300;
      font-size: 16px;
      line-height: 24px; }
    .blogsCardSection .blogCardsList .blogCardsMain .blogCard .blogs-btn {
      display: flex;
      gap: 7px; }
      .blogsCardSection .blogCardsList .blogCardsMain .blogCard .blogs-btn button {
        margin-bottom: 22px;
        padding: 8px 16px;
        background-color: #8278B0;
        color: #FFFFFF;
        border: none;
        border-radius: 100px;
        font-weight: 300;
        font-size: 14px;
        line-height: 15px;
        line-height: 21px;
        letter-spacing: 0%;
        cursor: pointer; }
    .blogsCardSection .blogCardsList .blogCardsMain .blogCard .blogImg {
      position: relative;
      padding-top: 68%; }
      .blogsCardSection .blogCardsList .blogCardsMain .blogCard .blogImg img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        object-fit: cover; }

@media only screen and (max-width: 991px) {
  .blogsBannerSection .blogsBannerImg img {
    height: 600px;
    object-fit: cover; }
  .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv {
    max-width: calc(100% - 38px);
    flex-direction: column;
    gap: 20px; }
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne,
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo {
      width: 100%; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne span,
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo span {
        font-size: 16px;
        line-height: 24px; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne p,
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo p {
        font-size: 16px;
        line-height: 27px; }
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne p {
      font-size: 28px;
      line-height: 38px; }

  .blogsCardSection,
  .com-pd-100 {
    padding: 50px 0; }
    .blogsCardSection .blogCardsList,
    .com-pd-100 .blogCardsList {
      max-width: calc(100% - 38px); }
      .blogsCardSection .blogCardsList .blogCardsMain,
      .com-pd-100 .blogCardsList .blogCardsMain {
        grid-template-columns: repeat(1, 1fr); } }
@media screen and (max-width: 563px) {
  .blogsBannerSection .blogsBannerImg img {
    height: 600px;
    object-fit: cover; }
  .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv {
    max-width: calc(100% - 38px);
    flex-direction: column;
    gap: 20px; }
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne,
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo {
      width: 100%; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne span,
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo span {
        font-size: 16px;
        line-height: 24px; }
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne p,
      .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescTwo p {
        font-size: 16px;
        line-height: 27px; }
    .blogsBannerSection .blogsBannerImg .bannerDescSection .bannerInnerDiv .bannerDescOne p {
      font-size: 28px;
      line-height: 38px; }

  .blogsCardSection,
  .com-pd-100 {
    padding: 50px 0; }
    .blogsCardSection .blogCardsList,
    .com-pd-100 .blogCardsList {
      max-width: calc(100% - 38px); }
      .blogsCardSection .blogCardsList .blogCardsMain,
      .com-pd-100 .blogCardsList .blogCardsMain {
        grid-template-columns: repeat(1, 1fr); } }
.faqSection .faqList {
  padding: 0px; }

/*# sourceMappingURL=main.css.map */