:root {
  --black-0: #000000;
  --black-1: #020202;
  --black-2: #060606;
  --black-3: #141414;
  --blue-0: #c6deff;
  --blue-1: #28a9f7;
  --blue-2: #277cc0;
  --blue-3: #007cbf;
  --blue-4: #0d7add;
  --green-0: #24ed2c;
  --grey-0: #d9d9d9;
  --grey-1: #c4c4c4;
  --grey-2: #898989;
  --white-0: #ffffff;
  --white-1: #fffbfb;
  --white-2: #f6f6f6;
  --white-3: #f0f0f0;
  --white-4: #ebf9e5;
  --yellow-0: #ffd400;
  --sf-regular: "SFPRO-REGULAR", sans-serif;
  --sf-medium: "SFPRO-MEDIUM", sans-serif;
  --sf-bold: "SFPRO-BOLD", sans-serif;
  --lato: "Lato", sans-serif;
  --inter: "Inter", sans-serif;
  --roboto: "Roboto Serif", serif;
}

/* !color classes  */

/* !font color  */


.blackFont {

  color: #000;
}

.whiteFont {

  color: #fff;
}

/* !bg color  */
.blackBg {

  background-color: #141414;
}

.greyBg {

  background-color: #DBDBDB;
}

.whiteBg {

  background-color: #fff;
}



@font-face {
  font-family: "SFPRO-REGULAR";
  src: url(fonts/SFPRODISPLAYREGULAR.OTF) format("opentype");
}

@font-face {
  font-family: "SFPRO-MEDIUM";
  src: url(fonts/SFPRODISPLAYMEDIUM.OTF) format("opentype");
}

@font-face {
  font-family: "SFPRO-BOLD";
  src: url(fonts/SFPRODISPLAYBOLD.OTF) format("opentype");
}

/* Define the animation */
@keyframes growWidth {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@media only screen and (max-width: 48em) {
  @keyframes growWidth {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }
}

@media only screen and (max-width: 30em) {
  @keyframes growWidth {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }
}

@keyframes growWidth100 {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media only screen and (min-width: 1600px) {
  html {
    font-size: 72%;
  }
}

@media only screen and (min-width: 1900px) {
  html {
    font-size: 85%;
  }
}

@media only screen and (min-width: 2500px) {
  html {
    font-size: 100%;
  }
}

@media only screen and (max-width: 1100px) {
  html {
    font-size: 50%;
  }
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 62.5%;
  }
}

@media only screen and (max-width: 320px) {
  html {
    font-size: 50%;
  }
}

.landingMain {
  position: relative;
  overflow: hidden;
}

.portfolioMain {
  overflow: hidden;
}

.ecosystemMain {
  overflow: hidden;
}

body.initial-hidden {
  overflow: hidden;
}

.sfmedium77 {
  font-family: var(--sf-medium);
  font-size: 7.7rem;
}

@media only screen and (max-width: 1400px) {
  .sfmedium77 {
    font-size: 7.2rem;
  }
}


.sfmedium58 {
  font-family: var(--sf-medium);
  font-size: 5.8rem;
}

.sfmedium55 {
  font-family: var(--sf-medium);
  font-size: 5.5rem;
}

@media only screen and (max-width: 1200px) {
  .sfmedium55 {
    font-size: 5rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfmedium55 {
    font-size: 4.4rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfmedium55 {
    font-size: 3.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfmedium55 {
    font-size: 3.2rem;
  }
}

/*  */
.sfbold50 {
  font-family: var(--sf-bold);
  font-size: 5rem;
}

@media only screen and (max-width: 1200px) {
  .sfbold50 {
    font-size: 4.4rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfbold50 {
    font-size: 3.8rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfbold50 {
    font-size: 3.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfbold50 {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfbold50 {
    font-size: 2.4rem;
  }
}

@media only screen and (max-width: 400px) {
  .sfbold50 {
    font-size: 2.2rem;
  }
}

.sfbold45 {
  font-family: var(--sf-bold);
  font-size: 4.5rem;
}

@media only screen and (max-width: 1200px) {
  .sfbold45 {
    font-size: 4.2rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfbold45 {
    font-size: 3.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfbold45 {
    font-size: 2.8rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfbold45 {
    font-size: 2.6rem;
  }
}

@media only screen and (max-width: 400px) {
  .sfbold45 {
    font-size: 2rem;
  }
} */

.sfmedium45 {
  font-family: var(--sf-medium);
  font-size: 4.5rem;
}

@media only screen and (max-width: 1200px) {
  .sfmedium45 {
    font-size: 4.2rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfmedium45 {
    font-size: 3.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfmedium45 {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfmedium45 {
    font-size: 2.4rem;
  }
}

@media only screen and (max-width: 400px) {
  .sfmedium45 {
    font-size: 2.2rem;
  }
}

.sfmedium46 {
  font-family: var(--sf-medium);
  font-size: 4.6rem;
}

@media only screen and (max-width: 1200px) {
  .sfmedium46 {
    font-size: 4.2rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfmedium46 {
    font-size: 3.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfmedium46 {
    font-size: 2.8rem;
  }
}

.sfregular37 {
  font-family: var(--sf-regular);
  font-size: 3.7rem;
}

@media only screen and (max-width: 1200px) {
  .sfregular37 {
    font-size: 3.4rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .sfregular37 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfregular37 {
    font-size: 2.4rem;
  }
}

.sfregular32 {
  font-family: var(--sf-regular);
  font-size: 3.2rem;
}

.sfbold32 {
  font-family: var(--sf-bold);
  font-size: 3.2rem;
}

.sfbold30 {
  font-family: var(--sf-bold);
  font-size: 3rem;
}

@media only screen and (max-width: 1400px) {
  .sfbold30 {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfbold30 {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfbold30 {
    font-size: 2.4rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfbold30 {
    font-size: 2rem;
  }
} */

.sfbold27 {
  font-family: var(--sf-bold);
  font-size: 2.7rem;
}

.sfbold25 {
  font-family: var(--sf-bold);
  font-size: 2.5rem;
}

@media only screen and (max-width: 48em) {
  .sfbold25 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfbold25 {
    font-size: 2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfbold25 {
    font-size: 1.8rem;
  }
} */

.sfmedium25 {
  font-family: var(--sf-medium);
  font-size: 2.5rem;
}

@media only screen and (max-width: 48em) {
  .sfmedium25 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfmedium25 {
    font-size: 2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfmedium25 {
    font-size: 1.8rem;
  }
} */

.pfsfmedium25 {
  font-family: var(--sf-medium);
  font-size: 2.5rem;
}

@media only screen and (max-width: 48em) {
  .pfsfmedium25 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .pfsfmedium25 {
    font-size: 2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .pfsfmedium25 {
    font-size: 1.8rem;
  }
} */

.sfmedium22 {
  font-family: var(--sf-medium);
  font-size: 2.2rem;
}

@media only screen and (max-width: 56.25em) {
  .sfmedium22 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfmedium22 {
    font-size: 1.8rem;
  }
}

/* @media only screen and (max-width: 600px) {
  .sfmedium22 {
    font-size: 1.6rem;
  }
} */

/* @media only screen and (max-width: 30em) {
  .sfmedium22 {
    font-size: 1.5rem;
  }
} */

/* @media only screen and (max-width: 400px) {
  .sfmedium22 {
    font-size: 1.3rem;
  }
} */

.sfregular21 {
  font-family: var(--sf-regular);
  font-size: 2.1rem;
}

.sfbold20 {
  font-family: var(--sf-bold);
  font-size: 2rem;
}

@media only screen and (max-width: 48em) {
  .sfbold20 {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 600px) {
  .sfbold20 {
    font-size: 1.6rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfbold20 {
    font-size: 1.4rem;
  }
} */

.sfbold17 {
  font-family: var(--sf-bold);
  font-size: 1.7rem;
}

@media only screen and (max-width: 1200px) {
  .sfbold17 {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfbold17 {
    font-size: 1.6rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .sfbold17 {
    font-size: 1.3rem;
  }
} */

.sfregular18 {
  font-family: var(--sf-regular);
  font-size: 1.8rem;
}

@media only screen and (max-width: 48em) {
  .sfregular18 {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfregular18 {
    font-size: 1.4rem;
  }
}

.sfmedium18 {
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  letter-spacing: 1px;
}

@media only screen and (max-width: 48em) {
  .sfmedium18 {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfmedium18 {
    font-size: 1.3rem;
  }
}

.sfmedium16 {
  font-family: var(--sf-medium);
  font-size: 1.5rem;
}

@media only screen and (max-width: 48em) {
  .sfmedium16 {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfmedium16 {
    font-size: 1.3rem;
  }
}

.sfregular16 {
  font-family: var(--sf-regular);
  font-size: 1.6rem;
}

@media only screen and (max-width: 48em) {
  .sfregular16 {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 30em) {
  .sfregular16 {
    font-size: 1.3rem;
  }
}

.sfregular14 {
  font-family: var(--sf-regular);
  font-size: 1.4rem;
}

@media only screen and (max-width: 1200px) {
  .sfregular14 {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfregular14 {
    font-size: 1.3rem;
  }
}

.sfbold14 {
  font-family: var(--sf-bold);
  font-size: 1.4rem;
}

.sfmedium14 {
  font-family: var(--sf-medium);
  font-size: 1.4rem;
}

@media only screen and (max-width: 56.25em) {
  .sfmedium14 {
    font-size: 1.2rem;
  }
}

.sfregular13 {
  font-family: var(--sf-regular);
  font-size: 1.4rem;
}

@media only screen and (max-width: 56.25em) {
  .sfregular13 {
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 48em) {
  .sfregular13 {
    font-size: 1.2rem;
  }
}

.sfregular11 {
  font-family: var(--sf-regular);
  font-size: 1.1rem;
}

/* @media only screen and (max-width: 48em) {
  .sfregular11 {
    font-size: 1rem;
  }
} */

/* @media only screen and (max-width: 30em) {
  .sfregular11 {
    font-size: 0.9rem;
  }
} */

.sfmedium11 {
  font-family: var(--sf-medium);
  font-size: 1.1rem;
}

/* @media only screen and (max-width: 56.25em) {
  .sfmedium11 {
    font-size: 1rem;
  }
} */

.sfregular10 {
  font-family: var(--sf-regular);
  font-size: 1.1rem;
}

/* @media only screen and (max-width: 30em) {
  .sfregular10 {
    font-size: 1rem;
  }
} */

.lato48 {
  font-family: var(--lato);
  font-size: 4.8rem;
}

.lato42 {
  font-family: var(--lato);
  font-size: 3.2rem;
  font-weight: 900;
}

@media only screen and (max-width: 56.25em) {
  .lato42 {
    font-size: 2.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .lato42 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 30em) {
  .lato42 {
    font-size: 1.8rem;
  }
}

.lato32 {
  font-family: var(--lato);
  font-size: 3.2rem;
}

@media only screen and (max-width: 1200px) {
  .lato32 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .lato32 {
    font-size: 2.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .lato32 {
    font-size: 2.2rem;
  }
}

.lato24 {
  font-family: var(--lato);
  font-size: 2.2rem;
}

@media only screen and (max-width: 1200px) {
  .lato24 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .lato24 {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 48em) {
  .lato24 {
    font-size: 1.7rem;
  }
}

@media only screen and (max-width: 30em) {
  .lato24 {
    font-size: 1.6rem;
  }
}

.lato18 {
  font-family: var(--lato);
  font-size: 1.8rem;
}

@media only screen and (max-width: 600px) {
  .lato18 {
    font-size: 2rem;
  }
}

.lato16 {
  font-family: var(--lato);
  font-size: 1.6rem;
}

@media only screen and (max-width: 600px) {
  .lato16 {
    font-size: 1.8rem;
  }
}

.lato12 {
  font-family: var(--lato);
  font-size: 1.2rem;
}

@media only screen and (max-width: 1200px) {
  .lato12 {
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .lato12 {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 48em) {
  .lato12 {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 30em) {
  .lato12 {
    font-size: 1.4rem;
  }
}

.lato10 {
  font-family: var(--lato);
  font-size: 1rem;
}

.inter15 {
  font-family: var(--inter);
  font-size: 1.6rem;
}

.inter14 {
  font-family: var(--inter);
  font-size: 1.4rem;
}

@media only screen and (max-width: 1300px) {
  .inter14 {
    font-size: 1.3rem;
  }
}



/* @media only screen and (max-width: 48em) {
  .inter14 {
    font-size: 1.3rem;
  }
} */


.inter12 {
  font-family: var(--inter);
  font-size: 1.2rem;
}

@media only screen and (max-width: 48em) {
  .inter12 {
    font-size: 1.2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .inter12 {
    font-size: 1rem;
  }
} */

.inter11 {
  font-family: var(--inter);
  font-size: 1.1rem;
}

/* @media only screen and (max-width: 48em) {
  .inter11 {
    font-size: 1rem;
  }
} */

/* @media only screen and (max-width: 30em) {
  .inter11 {
    font-size: 0.8rem;
  }
} */

.inter10 {
  font-family: var(--inter);
  font-size: 1rem;
}

/* @media only screen and (max-width: 30em) {
  .inter10 {
    font-size: 0.8rem;
  }
} */

.inter9 {
  font-family: var(--inter);
  font-size: 0.9rem;
}

@media only screen and (max-width: 48em) {
  .inter9 {
    font-size: 1rem;
  }
}

.roboto28 {
  font-family: var(--roboto);
  font-size: 2.8rem;
}

@media only screen and (max-width: 56.25em) {
  .roboto28 {
    font-size: 2.4rem;
  }
}

@media only screen and (max-width: 48em) {
  .roboto28 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 30em) {
  .roboto28 {
    font-size: 1.8rem;
  }
}

.roboto27 {
  font-family: var(--roboto);
  font-size: 2.7rem;
}

@media only screen and (max-width: 56.25em) {
  .roboto27 {
    font-size: 2.3rem;
  }
}

@media only screen and (max-width: 48em) {
  .roboto27 {
    font-size: 2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .roboto27 {
    font-size: 1.7rem;
  }
} */

.roboto21 {
  font-family: var(--roboto);
  font-size: 2.1rem;
}

.roboto15 {
  font-family: var(--roboto);
  font-size: 1.5rem;
}

@media only screen and (max-width: 56.25em) {
  .roboto15 {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 48em) {
  .roboto15 {
    font-size: 1.4rem;
  }
}

.blueText {
  color: var(--blue-3);
}

.whiteCrossBG {
  background-color: var(--white-0) !important;
}

.whiteCrossBG .phoneHeaderBox .wrapperIconBox .wrapperIcon,
.whiteCrossBG .phoneHeaderBox .wrapperIconBox .wrapperIcon::before,
.whiteCrossBG .phoneHeaderBox .wrapperIconBox .wrapperIcon::after {
  background-color: var(--white-0) !important;
}

.whiteText {
  color: var(--white-0) !important;
}

.headerOverlay.showOverlay+.navBox .whiteText {
  color: var(--black-0) !important;
}

.headerOverlay.showOverlay+.navBox .icon path {
  fill: var(--black-0) !important;
}

/* .header.white-bg .navBox .icon path {
  fill: var(--black-0) !important;
} */
@media only screen and (min-width: 48em) {
  .header.white-bg .navBox .icon path {
    fill: var(--black-0) !important;
  }
}

/* .header.white-bg .navBox .whiteText {
  color: var(--black-0) !important;
} */
@media only screen and (min-width: 48em) {
  .header.white-bg .navBox .whiteText {
    color: var(--black-0) !important;
  }
}

/* .header.white-bg .logoBox .logoImg {
  display: block !important;
} */

@media only screen and (min-width: 48em) {
  .header.white-bg .logoBox .logoImg {
    display: block !important;
  }
}

.header.white-bg .logoBox .logoImgWhite {
  display: none !important;
}

.ecoHero .pin-spacer {
  pointer-events: none;
}

.pfHero .pin-spacer {
  pointer-events: none;
}

.tabBtn--active {
  opacity: 1 !important;
}

.tabBtn--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: var(--blue-2) !important;
  animation: growWidth 0.3s ease forwards;
}

@media only screen and (max-width: 600px) {
  .tabBtn--active::after {
    height: 2px;
  }
}

.tabContent {
  opacity: 0;
  transition: opacity 0.5s ease;
  /*   position: absolute; */
  width: 100%;
  /*   height: 100%; */
  top: 0;
  left: 0;
  display: none;
  flex-direction: column-reverse;
}

@media only screen and (max-width: 768px) {
  .tabContent {
    flex-direction: column;



  }


}




.tabContent .c1 {
  /*   background-color: #222222; */
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
  padding: 2rem 0;
}


@media only screen and (max-width: 768px) {
  .tabContent .c1 {
    width: 100%;
    height: 75%;
    /* height auto to display 1 slide */
    aspect-ratio: 1 / 1;

  }


}


@media only screen and (max-width: 480px) {

  .tabContent .c1 {
    aspect-ratio: unset;

  }

}


.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

}

.tabContent .slideNav {
  /*   background-color: #222222; */
  display: flex;
  flex-direction: column;
  gap: 1rem;

  position: relative;
  justify-content: space-between;
  align-items: flex-end;
  /*   width: 100%; */

  position: absolute;
  top: -5%;
  right: 0;
  /* 	z-index : -1; */
}


@media only screen and (max-width: 768px) {
  .tabContent .slideNav {
    width: 100%;
    padding-top: 1rem;
    position: relative;
  }

}

@media only screen and (max-width: 480px) {
  .tabContent .slideNav {
    gap: 0rem;
  }
}


.tabContent .slideNav .nav {
  display: flex;
  justify-content: space-between;
  gap: 5rem;
  /*   align-self: flex-start; */

  padding-left: 0%;
  margin-top: 2rem;

}

@media only screen and (max-width: 768px) {

  .tabContent .slideNav .nav {
    align-self: center;
    padding-left: 0%;
    margin-top: 0rem;
  }


}


.swiper-button-next,
.swiper-button-prev {
  position: relative;

  transition: all .3s ease-in-out;
  margin-top: unset;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {


  opacity: .8;

}




/* .tabContent.tabContent--4 {
  height: 50%;
} */

.tabContent .swiper-button-prev {
  background-image: url('../img/landingPage/ArrowLeft.svg');
  background-size: contain;
  /* Ensures the image scales properly */
  background-repeat: no-repeat;
  width: 2.5rem;
  /* Adjust the size as needed */
  height: 2.5rem;
}

.tabContent .swiper-button-next {
  background-image: url('../img/landingPage/ArrowRight.svg');
  background-size: contain;
  /* Ensures the image scales properly */
  background-repeat: no-repeat;
  width: 2.5rem;
  /* Adjust the size as needed */
  height: 2.5rem;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  display: none;
}

.tabContent .slideNav a {
  /*   background-color: #FFFFFF; */
  padding: 1rem 0rem;
  border-radius: 3.63rem;

  color: #FFFFFF;
  font-size: 1.2rem;
  font-family: inherit;
  font-family: var(--inter);
  text-decoration: none;
  transition: all .3s ease-in-out;
  text-align: center;
}


.tabContent .slideNav a:hover {


  opacity: .8;

}


@media only screen and (max-width: 768px) {

  .tabContent .slideNav a {
    margin-bottom: 3rem;
  }

}


@media only screen and (max-width: 480px) {
  .tabContent .slideNav a {
    margin-bottom: 0rem;
  }

}

.tabContent .swiper-slide {


  /*   background: #fff; */
  /* height: calc((100% - 30px) / 2) !important; */

  /* Center slide text vertically */

  display: flex;



  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
}

.tabContent .swiper-slide:hover img {


  scale: 1.05;
  opacity: .8;


}

.tabContent .swiper-slide img {
  /* border: 2px solid greenyellow; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out;
}

@media only screen and (max-width: 48em) {

  .tabContent .swiper-slide img {
    object-fit: contain;
    height: auto;
  }

}




.tabContent--active {
  display: flex;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 5;
}

.genSlide--active {
  opacity: 1 !important;
  transition: opacity 0.5s ease !important;
}

.LandingBorderDiv {
  background-color: var(--white-0);
  width: 100%;
  height: 4rem;
}

.hideHeader {
  top: -10rem !important;
}

.white-bg {
  background-color: var(--white-0) !important;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.white-bg-dropdown {
  background-color: var(--white-0) !important;
  color: var(--black-0) !important;
}

.slidertabBtn--active {
  opacity: 1 !important;
}

.slidertabBtn--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70%;
  height: 4px;
  background-color: var(--blue-2) !important;
  animation: growWidth 0.3s ease forwards;
}

.slidertabContent {
  overflow: visible;
  opacity: 1;
  transition: max-height 0.01s ease, opacity 0.01s ease;
}

.navSubLinkActive {
  background-color: #024B94;
}

.slideDown {
  /* opacity: 1; */
  visibility: visible !important;
  display: block !important;
  animation: easeInAnimation 0.5s cubic-bezier(0.85, 0, 0, 1) 0.2s forwards;
}

@media only screen and (max-width: 48em) {
  .slideDown {
    animation: unset;
  }
}

@keyframes heroVideoSlideAnimation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes heroInfluencerSlideAnimation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.showSecondSlide {
  max-height: 1000px !important;
}

.hideHeroVideo {
  /* display: none !important; */
  animation: heroVideoSlideAnimation 1s ease-in forwards;
}

.showInfluencerSlide {
  /* display: block !important; */
  opacity: 1 !important;
  /* animation: heroInfluencerSlideAnimation 1s ease-in forwards; */
}

.showOverlay {
  opacity: 1 !important;
  visibility: visible !important;
  top: 0 !important;
}

.logoHide {
  display: none !important;
}

.eco--active {
  opacity: 1 !important;
  visibility: visible !important;
}

.eco--activeBanner {
  display: block !important;
}

.ecoBanner--active {
  display: flex !important;
}

.ecoTabBtn--active {
  opacity: 1 !important;
}

.pfHead--active {
  display: block !important;
}

.pfContent--active {
  display: grid !important;
}

.pfTabBtn--active {
  opacity: 1 !important;
}

.disable-scroll {
  overflow: hidden;
}

.ecoBanner {
  position: relative;
  display: flex;
  flex-direction: column;
  /* padding: 14rem 8% 0 8%; */
}

/* @media only screen and (max-width: 48em) {
  .ecoBanner {
    padding: 8rem 6% 0 6%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner {
    padding: 8rem 4% 0 4%;
  }
} */

.ecoBanner .ecoBanner1 {
  width: 100%;
  display: none;
  flex-direction: column;
}

/* @media only screen and (min-width: 2000px) {
  .ecoBanner .ecoBanner1 {
    gap: 12rem;
  }
} */

.ecoBanner .ecoBanner1 .bannerSectionHeaderContainer {
  padding: 5rem 8% 0rem 8%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}







.ecoBanner .ecoBanner1 .bannerSectionHeaderContainer .bannerHeadingBox .bannerHeadingText {}

.ecoBanner .ecoBanner1 .bannerSectionHeaderContainer .bannerParaBox {
  width: 30%;
}



@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerSectionHeaderContainer .bannerParaBox .bannerParaText {
    font-size: 1.2rem;
  }
}


.ecoBanner .ecoBanner1 .bannerContainer {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  /* margin-bottom: 16rem; */
  padding: 3rem 8% 11rem 8%;
}





@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer {
    padding: 8rem 6% 6rem 6%;
  }
}

/* 
@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer {
    padding: 8rem 4% 0 4%;
  }
} */


@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer {
    /* margin-bottom: 12rem; */
    padding: 4rem 4% 8rem 4%;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox {
  height: 80vh;
  width: 100%;
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox {
    height: 50rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox {
    height: 34rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroImg {
    filter: brightness(0.6);
    object-position: right;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .onImageHeading {
  position: absolute;
  left: 50%;
  top: 10rem;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .onImageHeading {
    top: 6rem;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .onImageHeading {
    width: 80%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .onImageHeading {
    width: 88%;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .onImageHeading .onImaheHeadingText {
  color: var(--white-0);
  text-align: center;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer {
  position: absolute;
  left: 50%;
  bottom: unset;
  transform: translate(-50%, -60%);
  width: 40%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 1300px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer {
    width: 50%;
  }
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer {
    width: 60%;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer {
    width: 80%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer {
    position: relative;
    width: 100%;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox {
  display: flex;
  justify-content: space-between;
  padding: 2rem 4rem;
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox {
    padding: 1.5rem 2rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox {
  width: calc(90% / 3);
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .comingSoonBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .comingSoonBox .comingSoonText {
  color: var(--white-0);
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox .figureBox .figureText {
  font-weight: 900;
  color: var(--white-0);
  letter-spacing: 0.5px;
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox .figureBox .figureText {
    font-weight: 700;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox .figureBox .figureText {
    font-weight: 600;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox .bannerLine {
  height: 1px;
  width: 100%;
  background-color: var(--white-0);
  margin: 0.8rem 0;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroImgBox .heroLinksContainer .heroLinksMainBox .heroLinkBox .figureTitleBox .figureTitleText {
  color: var(--white-0);
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox {
  position: absolute;
  left: 0;
  top: -2rem;
  padding: 8rem 16%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 54%;
  gap: 1.4rem;
  height: 100%;
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox {
    width: 60%;
    gap: 1.2rem;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox {
    width: 80%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox {
    width: 100%;
    gap: 0.7rem;
    padding: 4rem 10%;
    top: -2rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox {
  /* height: 5rem; */
  /* width: 100%;
  max-width: 7rem; */
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media only screen and (max-width: 1400px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox {
    grid-template-columns: repeat(3, 0.7fr);
  }
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox {
    grid-template-columns: repeat(3, 0.6fr);
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox {
    grid-template-columns: repeat(3, 0.5fr);
    gap: 0.6rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox .productLogoImg {
  width: 12rem;
  /* height: 100%; */
  object-fit: contain;
  display: block;
}

@media only screen and (max-width: 1400px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox .productLogoImg {
    width: 11rem;
  }
}

@media only screen and (max-width: 1000px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox .productLogoImg {
    width: 10rem;
  }
}

@media only screen and (max-width: 600px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .productLogoBox .productLogoImg {
    width: 8rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerHeaderBox {
  width: 130%;
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerHeaderBox {
    width: unset;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerHeaderBox .bannerHeaderText {
  color: var(--white-0);
  letter-spacing: 0.05994rem;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerTitleBox .bannerTitleText {
  color: var(--white-0);
  line-height: 2.125rem;
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerTitleBox .bannerTitleText {
    line-height: 1.8rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox {
  width: 130%;
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox {
    width: 100%;
    display: none;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox .bannerParaText {
  color: var(--white-0);
  font-weight: 400;
  letter-spacing: 0.01231rem;
  line-height: 2.30531rem;
}

@media only screen and (max-width: 1200px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox .bannerParaText {
    line-height: 1.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox .bannerParaText {
    line-height: 1.7rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerParaBox .bannerParaList {
  margin-left: 1.5rem;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .svgContainer {
  display: flex;
  gap: 1rem;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .svgContainer .svgBox .svgImg {
  height: 4rem;
  /* width: 100%; */
}

@media only screen and (max-width: 1200px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .svgContainer .svgBox .svgImg {
    height: 3rem;
  }
}

/* @media only screen and (max-width: 56.25em) {
  .ecoBanner
    .ecoBanner1
    .bannerContainer
    .heroTextContentBox
    .svgContainer
    .svgBox
    .svgImg {
    height: 6rem;
  }
}
@media only screen and (max-width: 48em) {
  .ecoBanner
    .ecoBanner1
    .bannerContainer
    .heroTextContentBox
    .svgContainer
    .svgBox
    .svgImg {
    height: 5rem;
  }
}
@media only screen and (max-width: 30em) {
  .ecoBanner
    .ecoBanner1
    .bannerContainer
    .heroTextContentBox
    .svgContainer
    .svgBox
    .svgImg {
    height: 4rem;
  }
} */
.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
  width: 100%;
  /* margin-top: 1rem; */
  max-width: 28rem;
}

@media only screen and (max-width: 1200px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
    max-width: 24rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
    margin-top: 0;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
    max-width: 22rem;
  }
}

@media only screen and (max-width: 600px) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
    max-width: 20rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox {
    max-width: 14rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink {
  color: var(--black-0);
  background-color: var(--white-0);
  border-radius: 3rem;
  padding: 2rem;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
}

@media only screen and (max-width: 56.25em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink {
    padding: 1.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink {
    padding: 1.2rem;
  }
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink::before {
  content: "";
  position: absolute;
  background: var(--blue-2);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink:hover::before {
  top: 0;
}

.ecoBanner .ecoBanner1 .bannerContainer .heroTextContentBox .bannerBtnBox .btnBox .btnLink:hover {
  color: white !important;
  letter-spacing: 1.5px;
  font-weight: bold;
}

#heroLinksMainBox1 {
  background: linear-gradient(113deg, #0b183a -1.98%, #e40064 97.66%);
}

#heroLinksMainBox2 {
  background: linear-gradient(113deg, #009eff -1.98%, #014184 97.66%);
}

.ecoBenchmark {
  background-color: var(--black-0);
  display: none;
}

/* .ecoBenchmark .benchmarkContainer {
  position: relative;
  height: 60rem;
}
@media only screen and (max-width: 48em) {
  .ecoBenchmark .benchmarkContainer {
    height: 80rem;
  }
}
@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer {
    height: 70rem;
  }
} */
.ecoBenchmark .benchmarkContainer .ecoGenSlide {
  /* display: flex;
  gap: 10rem;
  padding: 8rem 8%; */
  width: 100%;
  height: 75rem;
  /* flex-shrink: 0;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;  */
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1300px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 75rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 72rem;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 50rem;
  }
}

@media only screen and (max-width: 600px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 42rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 35rem;
  }
}

@media only screen and (max-width: 400px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide {
    height: 32rem;
  }
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .ecoBenchmarkImgBox {
  width: 100%;
  height: 100%;
  padding: 6rem 0;
}

@media only screen and (max-width: 48em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .ecoBenchmarkImgBox {
    padding: 5rem 0;
  }
}

@media only screen and (max-width: 600px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .ecoBenchmarkImgBox {
    padding: 5rem 0 3rem 0;
  }
}


/* @media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .ecoBenchmarkImgBox {
    padding: 6rem 0 3rem 0;
  }
} */

.ecoBenchmark .benchmarkContainer .ecoGenSlide .ecoBenchmarkImgBox .ecoBenchmarkImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  text-align: center;
  width: 55%;
}

@media only screen and (max-width: 1250px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer {
    width: 60%;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer {
    width: 90%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer {
    width: 100%;
  }
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genParaBox {
  width: 100%;
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genParaBox .genParaText {
  /* background: linear-gradient(92deg, #0b78dd 0.22%, #59c6cd 107.09%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--white-0);
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genParaBox2 .genParaText2 {
  /* background: linear-gradient(92deg, #0b78dd 0.22%, #59c6cd 107.09%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--white-0);
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genParaBox2 .genParaText2 span {
  /* background: linear-gradient(92deg, #0b78dd 0.22%, #59c6cd 107.09%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: #17c352;
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genParaBox .genParaText .line {
  background: linear-gradient(92deg, #0b78dd 0.22%, #59c6cd 107.09%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer {
  display: flex;
  gap: 4rem;
}

@media only screen and (max-width: 56.25em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer {
    gap: 3rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer {
    gap: 2rem;
  }
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
  max-width: 16rem;
}

@media only screen and (max-width: 56.25em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
    min-width: 13rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
    min-width: 10rem;
    max-width: 10rem;
  }
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeatureLine {
  width: 100%;
  height: 4px;
  background-color: var(--blue-2);
  margin: 1rem 0;
}

@media only screen and (max-width: 600px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeatureLine {
    height: 2px;
  }
}

.ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
  width: 42rem;
  filter: brightness(0.96);
}

@media only screen and (max-width: 1250px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
    width: 36rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
    width: 32rem;
  }
}

@media only screen and (max-width: 48em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
    width: 30rem;
  }
}

@media only screen and (max-width: 600px) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
    width: 26rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoBenchmark .benchmarkContainer .ecoGenSlide .genRightContainer .genImageBox .genImage {
    width: 22rem;
  }
}

.ecoHero {
  width: 100%;
  height: 45rem;
}

@media only screen and (max-width: 48em) {
  .ecoHero {
    height: 35rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero {
    height: 30rem;
  }
}

.ecoHero .heroContainer {
  height: 100%;
  position: relative;
}

.ecoHero .heroContainer .heroContentContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ecoHero .heroContainer .heroContentContainer .heroImgBox {
  position: relative;
  height: 100%;
}

.ecoHero .heroContainer .heroContentContainer .heroImgBox .heroImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ecoHero .heroContainer .heroContentContainer .heroTextContentBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 8%;
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox {
    padding: 0 6%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox {
    padding: 0 4%;
  }
}

.ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
  width: 50%;
  color: var(--white-0);
  letter-spacing: 2px;
  line-height: 1.3;
  font-weight: 500;
  font-size: 4.5rem;
}

@media only screen and (max-width: 1200px) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
    width: 55%;
  }
}

@media only screen and (max-width: 900px) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
    width: 70%;
  }
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
    width: 90%;
    font-size: 3.8rem;
    letter-spacing: 1px;
  }
}

@media only screen and (max-width: 600px) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
    font-size: 3.4rem;
    width: 100%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroContentContainer .heroTextContentBox .heroText {
    font-size: 3rem;
  }
}

.ecoHero .heroContainer .heroLinksContainer {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 100 !important;
  pointer-events: all;
  will-change: transform;
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 56.25em) {
  .ecoHero .heroContainer .heroLinksContainer {
    /* padding: 0 16%; */
  }
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer {
    /* display: none; */
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroLinksContainer {}
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox {
  display: flex;
  align-items: baseline;
  padding: 1rem 8%;
  background-color: #277CC0;

}

@media only screen and (max-width: 56.25em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox {
    padding: 1rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox {
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox {}
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left .pageName {
  font-family: var(--lato);
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.42;
  letter-spacing: -0.24px;
  text-align: left;
  color: #fff;
  text-decoration: none;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left .pageName {
    font-size: 1.8rem;
  }
}


@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.4rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left {
    padding: 1.4rem 4%;
  }
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left .dropArrow {
  display: none;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left .dropArrow {
    display: block;
    transition: transform 0.3s ease;
  }
}

.dropArrow.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .left .dropArrow svg {
  height: 2.4rem;
  width: 2.4rem;
  display: block;
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  height: 100%;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink {
    width: 100%;

  }
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink svg {
    display: none;
  }
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink:hover {
  background-color: #024b94;
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* gap: 2rem; */
  height: 100%;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right {
    flex-direction: column;
    background-color: #024B94;
    width: 100%;
    max-height: 0px;
    align-items: flex-start;
    position: relative;
    transform: translateY(0);
    overflow: hidden;
    /* padding: 1rem 0; */
    transition: max-height 0.5s ease-out;
  }
}

.right.expanded {
  max-height: 1000px !important;
  /* Adjust as needed */
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink span {
  font-family: var(--sf-regular);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .right .navSubLink span {
    font-size: 1.8rem;
    opacity: 0.88;
  }
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .heroLink {
  outline: none;
  border: none;
  cursor: pointer;
  color: var(--white-0);
  background-color: transparent;
  letter-spacing: 1px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

@media only screen and (max-width: 48em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .heroLink {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 600px) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .heroLink {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .heroLink {
    font-size: 1.5rem;
  }
}

.ecoHero .heroContainer .heroLinksContainer .heroLinksMainBox .heroLink:hover {
  opacity: 1;
}

.ecoPartner {
  background-color: var(--white-2);
  padding-bottom: 4rem;
  position: relative;
  height: 42rem;
}

.ecoPartner .partnerContainer {
  padding: 8rem 8%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ecoPartner .partnerContainer .partnerParaBox {
  width: 35%;
}

.ecoPartner .partnerContainer .partnerLogoContainer {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
}

.ecoPartner .partnerContainer .partnerLogoContainer .partnerLogoBox .partnerLogo {
  height: 12rem;
  width: 22rem;
  object-fit: contain;
}

.ceo {
  overflow-x: hidden;
  padding-top: 2rem;
}


/* @media only screen and (max-width: 30em) {
  .ceo {
    padding-top: 6rem;
  }
} */

.ceo .ceoContainer {
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.ceo .ceoContainer .bgImageBox {
  width: 100%;
  height: 84rem;
}

@media only screen and (max-width: 1250px) {
  .ceo .ceoContainer .bgImageBox {
    height: 76rem;
  }
}

@media only screen and (max-width: 30em) {
  .ceo .ceoContainer .bgImageBox {
    height: 72rem;
  }
}

.ceo .ceoContainer .bgImageBox .bgImg {
  width: 100%;
  height: 100%;
}

.ceo .ceoContainer .ceoContentBox {
  position: absolute;
  left: 31%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 46%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (max-width: 1250px) {
  .ceo .ceoContainer .ceoContentBox {
    width: 50%;
    left: 34%;
    top: 44%;
    gap: 3rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .ceo .ceoContainer .ceoContentBox {
    gap: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .ceo .ceoContainer .ceoContentBox {
    width: 70%;
    left: 42%;
    top: 38%;
  }
}

@media only screen and (max-width: 30em) {
  .ceo .ceoContainer .ceoContentBox {
    width: 90%;
    left: 50%;
    gap: 2rem;
  }
}

.ceo .ceoContainer .ceoContentBox .ceoSvgBox svg {
  width: 7.8rem;
  height: 100%;
}

@media only screen and (max-width: 1250px) {
  .ceo .ceoContainer .ceoContentBox .ceoSvgBox svg {
    width: 5.8rem;
  }
}

@media only screen and (max-width: 48em) {
  .ceo .ceoContainer .ceoContentBox .ceoSvgBox svg {
    width: 4.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .ceo .ceoContainer .ceoContentBox .ceoSvgBox svg {
    width: 4rem;
  }
}

.ceo .ceoContainer .ceoContentBox .ceoParaBox {
  padding-bottom: 2rem;
}

.ceo .ceoContainer .ceoContentBox .ceoParaBox .ceoParaText {
  color: var(--white-0);
  line-height: 1.6;
}

@media only screen and (max-width: 1250px) {
  .ceo .ceoContainer .ceoContentBox .ceoParaBox .ceoParaText {
    line-height: 1.3;
  }
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 45%;
  line-height: 1.4;
}

@media only screen and (max-width: 56.25em) {
  .ceo .ceoContainer .ceoContentBox .ceoNameBox {
    width: 54%;
  }
}

@media only screen and (max-width: 30em) {
  .ceo .ceoContainer .ceoContentBox .ceoNameBox {
    width: 50%;
  }
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoNameText {
  color: var(--white-0);
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoTitleText {
  color: var(--white-0);
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer {
  display: flex;
  gap: 1rem;
  padding-top: 8px;
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a {
  display: block;
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a svg {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  transition: fill 0.3s ease;
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a svg path {
  transition: fill 0.3s ease;
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a .ceoTwitter path,
.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a .ceoLinkedIn path,
.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a .ceoFacebook path {
  transition: fill 0.3s ease;
  /* Add transition to the fill property */
}

.ceo .ceoContainer .ceoContentBox .ceoNameBox .ceoSocialContainer .ceoSocialBox a svg:hover path {
  opacity: 0.8;
}

.ceo .ceoContainer .ceoImgBox {
  position: absolute;
  right: 1rem;
  bottom: -12rem;
}

@media only screen and (max-width: 48em) {
  .ceo .ceoContainer .ceoImgBox {
    right: -2rem;
    bottom: -10rem;
  }
}

@media only screen and (max-width: 48em) {
  .ceo .ceoContainer .ceoImgBox {
    bottom: -8rem;
  }
}

.ceo .ceoContainer .ceoImgBox .ceoImg {
  height: 80rem;
  /*   width: 100%; */
  object-fit: contain;
}

@media only screen and (max-width: 1250px) {
  .ceo .ceoContainer .ceoImgBox .ceoImg {
    height: 70rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .ceo .ceoContainer .ceoImgBox .ceoImg {
    height: 62rem;
  }
}

@media only screen and (max-width: 48em) {
  .ceo .ceoContainer .ceoImgBox .ceoImg {
    height: 55rem;
  }
}

@media only screen and (max-width: 600px) {
  .ceo .ceoContainer .ceoImgBox .ceoImg {
    height: 50rem;
  }
}

@media only screen and (max-width: 30em) {
  .ceo .ceoContainer .ceoImgBox .ceoImg {
    height: 40rem;
  }
}

.footer {
  background-color: var(--white-2);
}

.footer .footerContainer {
  padding: 8rem 8%;
}

@media only screen and (max-width: 56.25em) {
  .footer .footerContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer {
    padding: 6rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .footer .footerContainer {
    padding: 4rem 6%;
  }
}

.footer .footerContainer .footerQuoteContainer {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  align-items: flex-start;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerQuoteContainer {
    flex-direction: column;
  }
}

.footer .footerContainer .footerQuoteContainer .footerQuoteBox {
  width: 65%;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerQuoteContainer .footerQuoteBox {
    width: 100%;
  }
}

.footer .footerContainer .footerQuoteContainer .footerQuoteBox .footerQuoteText {
  font-weight: 600;
  line-height: 1.5;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialHeading .footerSocialHeadingText {
  color: #3e3e3e;
  font-weight: 700;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialBox {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialBox .footerSocialIcon .footerSocialLink {
  display: block;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialBox .footerSocialIcon .footerSocialLink svg {
  height: 3rem;
  width: 3rem;
  display: block;
  /* cursor: pointer; */
  transition: fill 0.3s ease;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialBox .footerSocialIcon svg path:not(:last-child) {
  transition: fill 0.3s ease;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerSocialBox .footerSocialIcon:hover path:not(:last-child) {
  fill: var(--blue-1) !important;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerEmailBox {
  width: 100%;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerEmailBox .subscribeForm {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerEmailBox .subscribeForm #email {
  border: none;
  padding: 1.5rem;
  font-family: var(--lato);
  font-size: 1.2rem;
  font-weight: 400;
  background-color: var(--white-3);
  color: #1d263a;
  width: 50%;
  border-radius: 4px 0 0 4px;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerEmailBox .subscribeForm #subscribe {
  border: none;
  padding: 1.5rem;
  font-family: var(--lato);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  background-color: var(--blue-3);
  color: var(--white-0);
  width: 10rem;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.3s ease;
}

.footer .footerContainer .footerQuoteContainer .footerEmailContainer .footerEmailBox .subscribeForm #subscribe:hover {
  background-color: var(--blue-1);
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 {
  padding: 6rem 0;
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerLinksContainer .footerLinksContainer1 {
    flex-wrap: wrap;
    padding: 6rem 0 10rem 0;
  }
}

@media only screen and (max-width: 600px) {
  .footer .footerContainer .footerLinksContainer .footerLinksContainer1 {
    padding: 6rem 0 8rem 0;
  }
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox {
    flex-basis: calc(33.33% - 1rem);
    margin-bottom: 3rem;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 30em) {
  .footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox {
    flex-basis: calc(50% - 1rem);
  }
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkHeaderBox .footerLinkHeaderText {
  font-weight: 700;
  color: #3e3e3e;
}

.footerLastColumn {
  font-weight: 700 !important;
  color: #3e3e3e !important;
}

@media only screen and (max-width: 600px) {
  .footerLastColumn {
    font-size: 1.5rem !important;
  }
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList .footerLinkItem .footerLink {
  text-decoration: none;
  color: #646464;
  font-weight: 400;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 600px) {
  .footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList .footerLinkItem .footerLink {
    font-size: 1.3rem;
  }
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList .footerLinkItem .footerLink:hover {
  color: var(--blue-2) !important;
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList .footerLinkItem .footerLink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--blue-2) !important;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer .footerContainer .footerLinksContainer .footerLinksContainer1 .footerLinkBox .footerLinkItemBox .footerLinkList .footerLinkItem .footerLink:hover::after {
  width: 100%;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer .footerContainer .footerBottomContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  border-top: 1px solid var(--black-0);
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer {
    position: relative;
    flex-direction: column-reverse;
    gap: 4rem;
  }
}

@media only screen and (max-width: 600px) {
  .footer .footerContainer .footerBottomContainer {
    padding-top: 2rem;
  }
}

.footer .footerContainer .footerBottomContainer .copyrightBox {
  flex: 1;
  line-height: 1.5;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer .copyrightBox {
    text-align: center;
  }
}

.footer .footerContainer .footerBottomContainer .copyrightBox .copyrightText {
  font-weight: 400;
  color: #4f4747;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer .copyrightBox .copyrightText {
    font-size: 1.3rem;
  }
}

.footer .footerContainer .footerBottomContainer .footerLogoBox {
  margin-left: auto;
  /* Push to the right as much as possible */
  margin-right: auto;
  /* Push to the left as much as possible */
  display: flex;
  justify-content: center;
  /* Center its contents horizontally */
  align-items: center;
  /* Center its contents vertically */
  flex: 1;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer .footerLogoBox {
    position: absolute;
    top: -4rem;
  }
}

.footer .footerContainer .footerBottomContainer .footerLogoBox .footerLogo {
  height: 3.5rem;
  width: 100%;
}

@media only screen and (max-width: 1200px) {
  .footer .footerContainer .footerBottomContainer .footerLogoBox .footerLogo {
    height: 3rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .footer .footerContainer .footerBottomContainer .footerLogoBox .footerLogo {
    height: 2.6rem;
  }
}

@media only screen and (max-width: 600px) {
  .footer .footerContainer .footerBottomContainer .footerLogoBox .footerLogo {
    height: 2.8rem;
  }
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

@media only screen and (max-width: 30em) {
  .footer .footerContainer .footerBottomContainer .footerBottomLinkBox {
    width: 100%;
    justify-content: space-between;
  }
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList {
  display: flex;
  list-style: none;
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList {
    font-size: 1.3rem;

  }
}

@media only screen and (max-width: 30em) {
  .footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList {
    /* justify-content: space-between; */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1rem;
  }
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem {
  padding: 0 0.5rem;
  border-right: 1px solid var(--black-0);
}

@media only screen and (max-width: 48em) {
  .footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem {
    border-right: none;
    padding: 0 2rem;
  }
}

@media only screen and (max-width: 30em) {
  .footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem {
    padding: 0;
  }
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem:last-child {
  border-right: none;
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem .footerBottomLink {
  text-decoration: none;
  font-weight: 400;
  color: #4f4747;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem .footerBottomLink:hover {
  color: var(--blue-2);
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem .footerBottomLink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--blue-2) !important;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer .footerContainer .footerBottomContainer .footerBottomLinkBox .footerBottomList .footerBottomLinkItem .footerBottomLink:hover::after {
  width: 100%;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  will-change: transform;
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

@media only screen and (max-width: 48em) {
  .header {
    background-color: var(--blue-2);
    /* position: relative; */
  }
}

.phoneHeaderContainer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  display: none;
  width: 100vw;
}

@media only screen and (max-width: 48em) {
  .phoneHeaderContainer {
    display: block;
  }
}

.phoneHeaderContainer .phoneHeaderBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 6%;
}

@media only screen and (max-width: 48em) {
  .phoneHeaderContainer .phoneHeaderBox {
    padding: 1.2rem 6%;
  }
}

@media only screen and (max-width: 600px) {
  .phoneHeaderContainer .phoneHeaderBox {
    padding: 1rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox {
    padding: 1rem 4%;
  }
}


.phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImg {
  height: 3.2rem;
  /*   width: 100%; */
  display: block;


}

@media only screen and (max-width: 600px) {
  .phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImg {
    /* height: 2.8rem; */
  }
}

/* @media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImg {
    height: 2.2rem;
  }
} */

.phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImgWhite {
  height: 3.2rem;
  /*   width: 100%; */
  display: block;
}

@media only screen and (max-width: 600px) {
  .phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImgWhite {
    /* height: 2.8rem; */
  }
}

/* @media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox .PhoneLogoBox .PhoneLogoLink .PhoneLogoImgWhite {
    height: 2.2rem;
  }
} */

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox {
  cursor: pointer;
  padding: 8px 0;
}

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIconBlack {
  display: block;
}

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIconBlack svg {
  width: 2.8rem;
  height: 100%;
}

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon {
  height: 2px;
  width: 26px;
  background-color: var(--black-0);
  position: relative;
}

/* @media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon {
    width: 22px;
  }
} */

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  background-color: var(--black-0);
  height: 2px;
  width: 26px;
}


/* @media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon::before {
    width: 22px;
  }
} */

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  background-color: var(--black-0);
  height: 2px;
  width: 26px;
}

/* @media only screen and (max-width: 30em) {
  .phoneHeaderContainer .phoneHeaderBox .wrapperIconBox .wrapperIcon::after {
    width: 22px;
  }
} */

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox.cross .wrapperIcon::before {
  transform: rotate(45deg);
  top: 0;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  background-color: var(--white-0);
}

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox.cross .wrapperIcon::after {
  transform: rotate(-45deg);
  top: 0;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  background-color: var(--white-0);
}

.phoneHeaderContainer .phoneHeaderBox .wrapperIconBox.cross .wrapperIcon {
  background-color: transparent;
  transition: background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.header .headerContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 8%;
  padding-right: calc(8% - 1.5rem);
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 56.25em) {
  .header .headerContainer {
    padding: 1rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer {
    flex-direction: column;
    gap: 4rem;
    height: 100vh;
    width: 100vw;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--blue-2);
    padding: 2rem 4rem;
    transform: translateX(100%);
    box-shadow: black 4px 8px 12px;
  }
}

@media only screen and (max-width: 600px) {
  .header .headerContainer {
    width: 100vw;
  }
}

@media only screen and (max-width: 30em) {
  .header .headerContainer {
    width: 100vw;
    padding: 2rem 3rem;
  }
}

.header .headerContainer .logoBox {
  position: relative;
  z-index: 9;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .logoBox {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
}

.header .headerContainer .logoBox .navPara {
  position: absolute;
  left: 0;
  top: 6.2rem;
  width: 20vw;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  opacity: 0;
  user-select: none;
}

.header .headerContainer .logoBox .logoImg {
  height: 3.5rem;
  width: 100%;
  display: block;
}

@media only screen and (max-width: 1200px) {
  .header .headerContainer .logoBox .logoImg {
    height: 3rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .header .headerContainer .logoBox .logoImg {
    height: 2.6rem;
  }
}

.header .headerContainer .logoBox .logoImgWhite {
  height: 3.5rem;
}

@media only screen and (max-width: 1200px) {
  .header .headerContainer .logoBox .logoImgWhite {
    height: 3rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .header .headerContainer .logoBox .logoImgWhite {
    height: 2.6rem;
  }
}

.header .headerContainer .logoBox .sideNavLogo {
  height: 3.2rem;
  width: 100%;
  display: none;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .logoBox .sideNavLogo {
    display: block;
  }
}

@media only screen and (max-width: 600px) {
  .header .headerContainer .logoBox .sideNavLogo {
    /* height: 2.8rem; */
  }
}

/* @media only screen and (max-width: 30em) {
  .header .headerContainer .logoBox .sideNavLogo {
    height: 2.2rem;
  }
} */

.header .headerContainer .logoBox .closeBtn {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  user-select: none;
  display: none;
}

@media only screen and (max-width: 48rem) {
  .header .headerContainer .logoBox .closeBtn {
    display: block;
  }
}

.header .headerContainer .logoBox .closeBtn svg {
  display: block;
  height: 3.2rem;
  width: 3.2rem;
}

/* @media only screen and (max-width: 600px) {
  .header .headerContainer .logoBox .closeBtn svg {
    height: 2.8rem;
    width: 2.8rem;
  }
} */

.header .headerContainer .headerOverlay {
  position: absolute;
  left: 0;
  top: -15rem;
  width: 100%;
  /* height: 10rem; */
  background-color: var(--white-0);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .headerOverlay {
    display: none;
  }
}

.header .headerContainer .navBox {
  z-index: 10;
  /* position: relative; */
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox {
    overflow-y: scroll;
  }
}

.header .headerContainer .navBox .navList {
  display: flex;
  /* gap: 3rem; */
}

@media only screen and (max-width: 1200px) {
  .header .headerContainer .navBox .navList {
    /* gap: 2.4rem; */
  }
}

@media only screen and (max-width: 56.25em) {
  .header .headerContainer .navBox .navList {
    /* gap: 1.8rem; */
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList {
    flex-direction: column;
    gap: 2.4rem;
  }
}

@media only screen and (max-width: 600px) {
  .header .headerContainer .navBox .navList {
    gap: 2rem;
  }
}

.header .headerContainer .navBox .navList .navItem {
  list-style: none;
  position: relative;
  display: block;
  padding: 0 1.5rem;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem {
    padding: 0;
  }
}

/* .header .headerContainer .navBox .navList .navItem:not(:first-child) {
  padding-left: 1.5rem;
}
.header .headerContainer .navBox .navList .navItem:not(:last-child) {
  padding-right: 1.5rem;
} */

.header .headerContainer .navBox .navList .navItem .navItemBox {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header .headerContainer .navBox .navList .navItem .navItemBox .navLink {
  text-decoration: none;
  color: var(--black-0);
  padding-bottom: 2px;
  white-space: nowrap;
  display: block;
  user-select: none;
  transition: all 0.3s ease;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navItemBox .navLink {
    color: var(--white-0);
    font-size: 2.4rem;
  }
}

@media only screen and (max-width: 30em) {
  .header .headerContainer .navBox .navList .navItem .navItemBox .navLink {
    font-size: 2.srem;
  }
}

/* @media only screen and (max-width: 600px) {
  .header .headerContainer .navBox .navList .navItem .navItemBox .navLink {
    font-size: 2.1rem;
  }
} */



.header .headerContainer .navBox .navList .navItem .navItemBox .icon {
  height: 0.8rem;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 1200px) {
  .header .headerContainer .navBox .navList .navItem .navItemBox .icon {
    height: 0.7rem;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navItemBox .icon {
    height: 1.5rem;
    width: 1.5rem;
  }
}

.header .headerContainer .navBox .navList .navItem .navItemBox .icon path {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header .headerContainer .navBox .navList .navItem .navItemBox::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--blue-2) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header .headerContainer .navBox .navList .navItem .navItemBox:hover::after {
  width: 100%;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (min-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navItemBox:hover .navLink {
    color: var(--blue-2) !important;
  }
}

/* .header .headerContainer .navBox .navList .navItem .navItemBox:hover .navLink {
  color: var(--blue-2) !important;
} */

.header .headerContainer .navBox .navList .navItem .navItemBox:hover .icon path {
  fill: var(--blue-2) !important;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navItemBox:hover .icon path {
    fill: var(--white-0) !important;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4rem;
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navEcoDummy {
  display: none;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navEcoDummy {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .ecoNavWrapper {
    overflow: hidden;
    font-size: 2rem;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco {
  position: fixed !important;
  left: 0;
  padding-top: 2rem;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco {
    position: relative !important;
    padding-top: 0;
  }
}

#headerMain .overviewDesktop {
  display: inline-block;
}

@media only screen and (max-width: 48em) {
  #headerMain .overviewDesktop {
    display: none;
  }
}

#headerMain .overviewMobile {
  display: none;
}

@media only screen and (max-width: 48em) {
  #headerMain .overviewMobile {
    display: inline-block;
  }
}


.header .headerContainer .navBox .navList .navItem .navDropDownBox {
  position: absolute;
  left: -2rem;
  top: 1.5rem;
  width: 100%;
  background-color: transparent;
  z-index: -1;
  opacity: 0;
  /* display: none; */
  visibility: hidden;
  padding-bottom: 6rem;
  /* transition: all 0.2s ease-in 0.2s; */
  width: max-content;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox {
    padding-bottom: 0;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox.navDropDownEco {
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox.navDropDownEco {
    /* max-height: 0 !important; */
  }
}



@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox {
    width: 100%;
    max-height: 0;
    position: relative;
    left: unset;
    top: unset;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* gap: 4rem; */
  padding: 3rem 2rem 1rem 2rem;
}



@media only screen and (max-width: 48rem) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox.navDropDownEco .navDropDownBox1 {
    padding: 1.5rem;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navPara {
  position: absolute;
  left: 8%;
  top: 40%;
  max-width: 20vw;
  color: #898989;
  line-height: 1.85;
}

@media only screen and (max-width: 1000px) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navPara {
    display: none;
  }
}



@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    padding: 1rem 0;
  }
}

/* 
@media only screen and (max-width: 600px) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 {

    gap: 1.5rem;

  }
} */

/* .header
  .headerContainer
  .navBox
  .navList
  .navItem
  .navDropDownBox
  .navDropDownBox1
  .navDropdownLinkBox:not(:first-child) {
  padding-left: 1.5rem;
} */

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubItemWrapper {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 1.5rem 0;
  border-bottom: 0.4px solid rgba(0, 0, 0, 0.5);
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubItemWrapper {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    border-bottom: none;
    padding: 1rem 0;
    margin: 1rem 0;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #277cc0;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink {
    color: var(--white-0);
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 600px) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink {
    font-size: 2rem;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .secondSlide {
  padding: 0 !important;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .secondSlide {
    width: 100%;
    padding: 8rem 4rem !important;
    position: relative;
    top: 0;
    max-height: 0;
    left: 0;
    /* background-color: #024B94; */
    /* transform: translateX(100%); */
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 1rem !important;
    transform: translate(1rem, 1rem);
  }
}



.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox .goBackBtn {
  display: none;

}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox .goBackBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: max-content;
    margin-bottom: 4rem;
  }
}

@media only screen and (max-width: 30em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox .goBackBtn {
    margin-bottom: 3rem;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox .goBackBtn svg {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}

.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox .goBackBtn p {
  color: #fff;
  font-family: var(--sf-regular);
  font-size: 2rem;
}


.header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox {
  width: 100%;
  padding: 0 1rem;
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox {
  padding: 0 1.5rem;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox {
    /* padding: 1rem; */
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox {
    margin-top: 1rem;
  }
}

@media only screen and (max-width: 30em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownEco .navDropDownBox1 .navDropdownLinkBox {
    /* padding: 2rem 3rem !important; */
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownMob {
  display: none;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownMob {
    display: block;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownMob .navSubLink svg {
    transform: rotate(90deg);
    height: 1.5rem !important;
    width: 1.5rem !important;
    transition: transform 0.3s ease;
  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navDropdownLink {
  font-weight: bold;
  line-height: 2.4rem;
  color: #000000;
  text-decoration: none;
  transition: all 0.1s ease;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navDropdownLink {
    color: var(--white-0);
    /* font-size: 2.4rem; */

  }
}

@media only screen and (max-width: 600px) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navDropdownLink {}
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navDropdownLink:hover {
  border-bottom: 2px solid #000000;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navDropdownLink:hover {
    border-bottom: none;

  }
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink svg {
  height: 1.5rem;
  width: 1.5rem;
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink svg circle {
  transition: all 0.3s ease;
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink svg path {
  transition: all 0.3s ease;
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink span {
  transition: all 0.3s ease;
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover svg circle {
  fill: var(--blue-2);
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover svg path {
  fill: var(--white-0);
}

.header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover span {
  color: #0a5590;
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover span {
    color: #fff;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover svg path {
    fill: #06151F;
  }
}

@media only screen and (max-width: 48em) {
  .header .headerContainer .navBox .navList .navItem .navDropDownBox .navDropDownBox1 .navDropdownLinkBox .navSubLink:hover svg circle {
    fill: var(--white-0);
  }
}

.gen {
  /* background-color: var(--white-2); */
  background-color: #001f82;
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8rem 8%;
  display: none;
}

@media only screen and (max-width: 56.25em) {
  .gen {
    padding: 8rem 6%;
  }
}

.gen .genContainer {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.gen .genContainer .gentabItemBtnBox {
  display: none;
}

.gen .genContainer .genContainer1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
  position: relative;
}

.gen .genContainer .genContainer1 .genSlide {
  display: flex;
  gap: 10rem;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

@media only screen and (max-width: 1400px) {
  .gen .genContainer .genContainer1 .genSlide {
    gap: 6rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .gen .genContainer .genContainer1 .genSlide {
    gap: 4rem;
  }
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide {
    width: 70%;
    flex-direction: column-reverse;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 2rem;
  }
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8rem;
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer {
    gap: 3rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer {
    gap: 3rem;
  }
} */
.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genParaBox {
  width: 90%;
}

@media only screen and (max-width: 1400px) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genParaBox {
    width: 90%;
  }
}

@media only screen and (max-width: 48rem) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genParaBox {
    width: 100%;
  }
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genParaBox .genParaText {
  /* background: linear-gradient(92deg, #0b78dd 0.22%, #59c6cd 107.09%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--white-0);
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genNoteBox {
  margin-top: -4rem;
}

@media only screen and (max-width: 1400px) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genNoteBox {
    margin-top: 0;
  }
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genNoteBox .genNoteText {
  color: var(--white-0);
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genNoteBox .genNoteText {
    font-size: 0.9rem !important;
  }
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
}

@media only screen and (max-width: 1400px) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer {
    gap: 3rem;
  }
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* @media only screen and (max-width: 30em) {
  .gen
    .genContainer
    .genContainer1
    .genSlide
    .genLeftContainer
    .genFeatureContainer {
    gap: 2rem;
  }
} */
.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genNoteBox .genNoteText {
  letter-spacing: 0.5px;
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
  min-width: 14rem;
}

/* @media only screen and (max-width: 1400px) {
  .gen
    .genContainer
    .genContainer1
    .genSlide
    .genLeftContainer
    .genFeatureContainer
    .genFeatureBox {
    min-width: 14rem;
  }
} */
@media only screen and (max-width: 56.25em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
    min-width: 13rem;
  }
}

@media only screen and (max-width: 600px) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
    min-width: 10rem;
  }
}

@media only screen and (max-width: 30em) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox {
    min-width: 8rem;
  }
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeatureParaBox .genFeatureParaText {
  color: var(--white-0);
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeaturePercentBox .genFeaturePercentText {
  color: var(--white-0);
}

.gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeatureLine {
  width: 100%;
  height: 4px;
  background-color: #3eb873;
  margin: 1rem 0;
}

@media only screen and (max-width: 600px) {
  .gen .genContainer .genContainer1 .genSlide .genLeftContainer .genFeatureContainer .genFeatureBox .genFeatureLine {
    height: 2px;
  }
}

.gen .genContainer .genContainer1 .genSlide .genRightContainer {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer {
    height: 45%;
  }
}

@media only screen and (max-width: 30em) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer {
    height: 30%;
  }
}

.gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
  width: 100%;
  height: 36rem;
  filter: brightness(0.96);
}

@media only screen and (max-width: 1400px) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 30rem;
  }
}

@media only screen and (max-width: 1000px) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 28rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 24rem;
  }
}

@media only screen and (max-width: 48em) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 22rem;
  }
}

@media only screen and (max-width: 600px) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 20rem;
  }
}

@media only screen and (max-width: 30em) {
  .gen .genContainer .genContainer1 .genSlide .genRightContainer .genImageBox .genImage {
    height: 18rem;
  }
}

.gen .genSvgBox {
  position: absolute;
  right: 4rem;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 56.25em) {
  .gen .genSvgBox {
    right: 3rem;
  }
}

@media only screen and (max-width: 30em) {
  .gen .genSvgBox {
    right: 1rem;
  }
}

.gen .genSvgBox svg {
  height: 100%;
  width: 2rem;
}

@media only screen and (max-width: 56.25em) {
  .gen .genSvgBox svg {
    width: 1.6rem;
  }
}

@media only screen and (max-width: 48em) {
  .gen .genSvgBox svg {
    width: 2rem;
  }
}

@media only screen and (max-width: 30em) {
  .gen .genSvgBox svg {
    width: 1.6rem;
  }
}

.gen .genSvgBox svg circle {
  transition: all 0.8s ease;
}




.highlight .highlightContainer {
  padding: 4rem 8% 6rem 8%;
}

@media only screen and (max-width: 56.25em) {
  .highlight .highlightContainer {
    padding: 4rem 6% 6rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .highlight .highlightContainer {
    padding: 4rem 6% 6rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .highlight .highlightContainer {
    padding: 4rem 4%;
  }
}

.highlight .highlightContainer .highlightHeadandBtnBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0;
}

@media only screen and (max-width: 30em) {
  .highlight .highlightContainer .highlightHeadandBtnBox {
    padding: 2rem 0;
  }
}

@media only screen and (max-width: 30em) {
  .highlight .highlightContainer .highlightHeadandBtnBox .highlightHeadingBox {
    padding-left: 2%;
  }
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox {
  display: flex;
  gap: 2rem;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderLeftBtn {
  cursor: pointer;
  user-select: none;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderLeftBtn svg path {
  transition: fill 0.3s ease;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderLeftBtn svg circle {
  transition: fill 0.3s ease;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderLeftBtn svg:hover path {
  fill: var(--blue-4);
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderLeftBtn svg:hover circle {
  fill: var(--blue-0);
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderRightBtn {
  cursor: pointer;
  user-select: none;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderRightBtn svg path {
  transition: fill 0.3s ease;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderRightBtn svg circle {
  transition: fill 0.3s ease;
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderRightBtn svg:hover path {
  fill: var(--blue-4);
}

.highlight .highlightContainer .highlightHeadandBtnBox .sliderBtnBox .sliderRightBtn svg:hover circle {
  fill: var(--blue-0);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer {
  display: flex;
  gap: 1.5rem;
  position: relative;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox {
  width: calc(100% / 4);
}

@media only screen and (max-width: 48em) {
  .highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox {
    padding: 0 1rem;
  }
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a {
  text-decoration: none;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideImgBox {
  overflow: hidden;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideImgBox .slideImg {
  width: 100%;
  height: 24rem;
  object-fit: cover;
  display: block;
  object-position: center;
  transition: all 0.5s ease-out;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideContentBox {
  padding: 1rem 5px;
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideHeadingText {
  font-weight: 700;
  text-decoration: none;
  color: var(--black-0);
  transition: all 0.3s ease;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideParaText {
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  color: var(--grey-2);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideReadLink {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--blue-2);
  font-weight: 700;
  letter-spacing: 0.5px;
  width: fit-content;
  padding-bottom: 2px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideReadLink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--blue-2) !important;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a:hover .slideContentBox .slideHeadingText {
  color: var(--blue-2) !important;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a:hover .slideContentBox .slideReadLink::after {
  width: 100%;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slideBox a:hover .slideImg {
  transform: scale(1.05);
}

.landingHiring {
  position: relative;
}

.landingHiring .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  z-index: -1;
}

.landingHiring .hiringContainer {
  padding: 12rem 12%;
  background-image: url(../img/landingPage/ceoBG@1x-1.webp);
  display: flex;
  align-items: center;
  background-color: #cefdff;
}

@media only screen and (max-width: 1250px) {
  .landingHiring .hiringContainer {
    padding: 12rem 10%;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingHiring .hiringContainer {
    padding: 12rem 8%;
  }
}

@media only screen and (max-width: 48em) {
  .landingHiring .hiringContainer {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 2rem;
    padding: 10rem 8%;
  }
}

@media only screen and (max-width: 30em) {
  .landingHiring .hiringContainer {
    padding: 6rem 4%;
  }
}

.landingHiring .hiringContainer .hiringTextBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  color: #ffffff;
}

@media only screen and (max-width: 48em) {
  .landingHiring .hiringContainer .hiringTextBox {
    align-items: center;
    text-align: center;
  }
}

.landingHiring .hiringContainer .hiringTextBox .hiringHeadingBox .hiringHeadingBox {
  padding-bottom: 8px;
}

.landingHiring .hiringContainer .hiringTextBox .hiringPara1Box {
  width: 60%;
}

@media only screen and (max-width: 600px) {
  .landingHiring .hiringContainer .hiringTextBox .hiringPara1Box {
    width: 100%;
  }
}

.landingHiring .hiringContainer .hiringTextBox .hiringPara1Box .hiringPara1Text {
  /* color: var(--grey-2); */
  /* color: #666666; */
}

.landingHiring .hiringContainer .hiringTextBox .hiringPara2Box .hiringPara2Text {
  /* color: var(--grey-2); */
  /* color: #666666; */
}

.landingHiring .hiringContainer .hiringTextBox .hiringButtonBox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 48em) {
  .landingHiring .hiringContainer .hiringTextBox .hiringButtonBox {
    justify-content: center;
  }
}

.landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink {
  text-decoration: none;
  font-weight: 500;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 3rem;
  padding: 2rem;
  width: 40%;
  text-align: center;
  color: var(--white-0);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
}

@media only screen and (max-width: 1250px) {
  .landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink {
    max-width: 22rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink {
    padding: 1.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink {
    max-width: 20rem;
  }
}

.landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink::before {
  content: "";
  position: absolute;
  background: var(--black-0);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
  display: block;
}

.landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink:hover::before {
  top: 0;
}

.landingHiring .hiringContainer .hiringTextBox .hiringButtonBox .hiringButtonLink:hover {
  color: white !important;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.landingHiring .hiringContainer .hiringImgBox .hiringImg {
  height: 30rem;
  width: 100%;
  object-fit: contain;
}


@media only screen and (max-width: 1250px) {
  .landingHiring .hiringContainer .hiringImgBox .hiringImg {
    height: 28rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingHiring .hiringContainer .hiringImgBox .hiringImg {
    height: 24rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingHiring .hiringContainer .hiringImgBox .hiringImg {
    height: 20rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingHiring .hiringContainer .hiringImgBox .hiringImg {
    height: 16rem;
  }
}

.landingPara {
  display: none;
}

.landingPara .paraContainer {
  padding: 8rem 8%;
  line-height: 1.2;
  color: var(--blue-2);
}

@media only screen and (max-width: 56.25em) {
  .landingPara .paraContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .landingPara .paraContainer {
    padding: 6rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .landingPara .paraContainer {
    padding: 4rem 6%;
  }
}

.landingPara .paraContainer .landingParaText {
  width: 75%;
}

@media only screen and (max-width: 1400px) {
  .landingPara .paraContainer .landingParaText {
    width: 85%;
  }
}

@media only screen and (max-width: 48em) {
  .landingPara .paraContainer .landingParaText {
    width: 95%;
  }
}


@media only screen and (max-width: 30em) {
  .landingPara .paraContainer .landingParaText {
    width: 100%;
    line-height: 1.3;
  }
}

.landingPara .paraContainer .landingParaText span .svg1st2nd {
  width: 6rem;
}

@media only screen and (max-width: 1200px) {
  .landingPara .paraContainer .landingParaText span .svg1st2nd {
    width: 9rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingPara .paraContainer .landingParaText span .svg1st2nd {
    width: 8rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingPara .paraContainer .landingParaText span .svg1st2nd {
    width: 6rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingPara .paraContainer .landingParaText span .svg1st2nd {
    width: 5rem;
  }
}

.landingPara .paraContainer .landingParaText span .svg3rd {
  width: 2rem;
}

@media only screen and (max-width: 1200px) {
  .landingPara .paraContainer .landingParaText span .svg3rd {
    width: 2.8rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingPara .paraContainer .landingParaText span .svg3rd {
    width: 2.4rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingPara .paraContainer .landingParaText span .svg3rd {
    width: 2.2rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingPara .paraContainer .landingParaText span .svg3rd {
    width: 2rem;
  }
}

.landingSlider .sliderContainer {
  padding: 8rem 8%;
}

@media only screen and (max-width: 56.25em) {
  .landingSlider .sliderContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .landingSlider .sliderContainer {
    padding: 6rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .landingSlider .sliderContainer {
    padding: 6rem 4%;
  }
}

.landingSlider .sliderContainer .sliderHeaderContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3rem;
}

@media only screen and (max-width: 600px) {
  .landingSlider .sliderContainer .sliderHeaderContainer {
    padding-bottom: 2rem;
  }
}


.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox {
  display: none;
  gap: 2rem;
}

@media only screen and (max-width: 48em) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox {
    display: flex;
  }
}

@media only screen and (max-width: 600px) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox {
    gap: 1.6rem;
  }
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn {
  cursor: pointer;
  user-select: none;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg {
  height: 4.5rem;
  width: 4.5rem;
}

@media only screen and (max-width: 600px) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg {
    height: 3.5rem;
    width: 3.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg {
    height: 3rem;
    width: 3rem;
  }
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg path {
  transition: fill 0.3s ease;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg circle {
  transition: fill 0.3s ease;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg:hover path {
  fill: var(--blue-4);
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderLeftBtn svg:hover circle {
  fill: var(--blue-0);
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn {
  cursor: pointer;
  user-select: none;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg {
  height: 4.5rem;
  width: 4.5rem;
}

@media only screen and (max-width: 600px) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg {
    height: 3.5rem;
    width: 3.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg {
    height: 3rem;
    width: 3rem;
  }
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg path {
  transition: fill 0.3s ease;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg circle {
  transition: fill 0.3s ease;
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg:hover path {
  fill: var(--blue-4);
}

.landingSlider .sliderContainer .sliderHeaderContainer .sliderBtnBox .sliderRightBtn svg:hover circle {
  fill: var(--blue-0);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer {
  display: flex;
  gap: 1rem;
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox {
  width: calc(100% / 4);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a {
  text-decoration: none;
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideImgBox {
  margin: 0 5px;
  overflow: hidden;
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideImgBox .slideImg {
  width: 100%;
  height: 24rem;
  object-fit: cover;
  display: block;
  object-position: center;
  transition: all 0.5s ease-out;
}

@media only screen and (max-width: 48em) {
  .landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideImgBox .slideImg {
    object-position: top;
  }
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideContentBox {
  padding: 1rem 5px;
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--black-0);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideHeadingText {
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideParaText {
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  color: var(--grey-2);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideReadLink {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--blue-2);
  font-weight: 700;
  letter-spacing: 0.5px;
  width: fit-content;
  padding-bottom: 2px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a .slideBox1 .slideContentBox .slideReadLink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--blue-2) !important;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a:hover .slideContentBox .slideHeadingText {
  color: var(--blue-2) !important;
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a:hover .slideContentBox .slideReadLink::after {
  width: 100%;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingSlider .sliderContainer .slidertabContentBox .slidertabContent--1 .sliderMainContainer .slideBox a:hover .slideImg {
  transform: scale(1.05);
}

.landingSlider .sliderContainer .moreBtnContainer {
  padding-top: 3rem;
}

@media only screen and (max-width: 30em) {
  .landingSlider .sliderContainer .moreBtnContainer {
    padding-top: 1rem;
  }
}

.landingSlider .sliderContainer .moreBtnContainer .moreBox {
  width: 100%;
  display: flex;
  justify-content: center;
}

.landingSlider .sliderContainer .moreBtnContainer .moreBox .moreLink {
  text-decoration: none;
  color: var(--white-0);
  position: relative;
  display: block;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 3rem;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  -webkit-transition: all 0.4s ease-in;
  overflow: hidden;
  z-index: 1;
}

.landingSlider .sliderContainer .moreBtnContainer .moreBox .moreLink::before {
  content: "";
  position: absolute;
  background: var(--black-0);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
  display: block;
}

.landingSlider .sliderContainer .moreBtnContainer .moreBox .moreLink:hover::before {
  top: 0;
}

.landingSlider .sliderContainer .moreBtnContainer .moreBox .moreLink:hover {
  color: var(--white-0) !important;
}

.landingSocial .socialContainer {
  padding: 8rem 8%;
}

@media only screen and (max-width: 56.25em) {
  .landingSocial .socialContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer {
    padding: 6rem 4%;
  }
}

@media only screen and (max-width: 600px) {
  .landingSocial .socialContainer .socialHeadingBox .socialHeadingText {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer .socialHeadingBox .socialHeadingText {
    font-size: 2.2rem;
  }
}

.landingSocial .socialContainer .socialHeadingBox .socialHeadingText span img {
  width: 10rem;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media only screen and (max-width: 1200px) {
  .landingSocial .socialContainer .socialHeadingBox .socialHeadingText span img {
    width: 9rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingSocial .socialContainer .socialHeadingBox .socialHeadingText span img {
    width: 8rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingSocial .socialContainer .socialHeadingBox .socialHeadingText span img {
    width: 6rem;
  }
}

.landingSocial .socialContainer .socialParaBox {
  padding: 2rem 0;
  width: 70%;
}

@media only screen and (max-width: 48em) {
  .landingSocial .socialContainer .socialParaBox {
    width: 100%;
  }
}

@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer .socialParaBox {
    width: 100%;
  }
}

.landingSocial .socialContainer .socialParaBox .socialParaText {
  line-height: 1.5;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 {
  display: flex;
  gap: 2rem;
}

@media only screen and (max-width: 600px) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 {
    flex-direction: column;
  }
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox {
  flex: 1;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox {
  text-decoration: none;
}

/* .landingSocial
  .socialContainer
  .socialContentBox
  .socialContentBox1
  .socialCardBox
  a:hover
  .imgBtnBox
  svg {
  transform: translateX(40px);
} */
/* .landingSocial
  .socialContainer
  .socialContentBox
  .socialContentBox1
  .socialCardBox
  a:hover
  .socialImg {
  transform: scale(1.05);
} */
.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox {
  position: relative;
  overflow: hidden;
  height: 38rem;
}

@media only screen and (max-width: 48em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox {
    height: 26rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox {
    height: 22rem;
  }
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .socialImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.5s ease-out;
  /* filter: brightness(1.3); */
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox {
  position: absolute;
  left: 4rem;
  bottom: 6rem;
  width: calc(100% - 8rem);
}

@media only screen and (max-width: 48em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox {
    left: 2rem;
    bottom: 2rem;
    width: calc(100% - 4rem);
  }
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox {
  padding-bottom: 1rem;
  width: 80%;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox .imgTitleText {
  color: var(--white-0);
}

@media only screen and (max-width: 600px) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox .imgTitleText {
    font-size: 2rem;
  }
}


.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox {
  display: none;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
  height: 3.4rem;
  width: 3.4rem;
  transition: transform 0.5s ease-out;
}

@media only screen and (max-width: 48em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 3rem;
    width: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 2.5rem;
    width: 2.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 2rem;
    width: 2rem;
  }
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
  display: block;
  text-decoration: none;
  font-weight: 500;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 3rem;
  padding: 1rem;
  width: 20%;
  text-align: center;
  color: var(--white-0);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  min-width: 10rem;
}

/* @media only screen and (max-width: 1250px) {
  .landingSocial
    .socialContainer
    .socialContentBox
    .socialContentBox1
    .socialCardBox
    .socialImgBox
    .imgDetailBox
    .socialBtnBox
    .socialBtnLink {
    max-width: 22rem;
  }
}
*/
@media only screen and (max-width: 30em) {
  .landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
    width: 25%;
    padding: 0.8rem;
  }
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink::before {
  content: "";
  position: absolute;
  background: var(--white-0);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
  display: block;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink:hover::before {
  top: 0;
}

.landingSocial .socialContainer .socialContentBox .socialContentBox1 .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink:hover {
  color: var(--blue-2) !important;
  letter-spacing: 1.2px;
  /* font-weight: bold; */
}

.landingTabWrapper .landingTab {
  padding: 6rem 8% 4rem 8%;
  min-height: 100vh;
  height: 100vh !important;
  background-color: #141414;
  display: flex;
  align-items: center;
}

.landingTabWrapper .landingTab .tabContainer {
  position: relative;
  width: 100%;
  /*   	    height: 80%; */
}

@media only screen and (max-width: 56.25em) {
  .landingTabWrapper .landingTab {
    padding: 6rem 6% 4rem 6%;
  }
}

@media only screen and (max-width: 480px) {
  .landingTabWrapper .landingTab {
    min-height: unset;
    height: unset !important;
  }

  .landingTabWrapper .landingTab .swiper-wrapper {

    height: auto;

  }

}


.landingTabWrapper .landingTab .tabContainer .tabHeadingBox {
  padding-bottom: 2.5rem;
  border: 1px border transparent;
  display: none;
}


.landingTabWrapper .landingTab .tabContainer .tabHeadingBox p {
  color: #FFFFFF;
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox {
    padding-bottom: 2rem;
  }
}

@media only screen and (max-width: 600px) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText {
    font-size: 2.8rem;
    display: none;
  }
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText {
    font-size: 2.5rem;
    display: none;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
  width: 10rem;
}

.landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
  width: 10rem;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media only screen and (max-width: 1200px) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
    width: 9rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
    width: 8rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
    width: 6rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabHeadingBox .tabHeadingText span img {
    width: 5rem;
  }
}

@media only screen and (max-width: 48em) {
  .landingTabWrapper .landingTab .tabContainer #tabHeadingBoxLarge {
    display: none;
  }
}

.landingTabWrapper .landingTab .tabContainer #tabHeadingBoxSmall {
  display: none;
}

@media only screen and (max-width: 48em) {
  .landingTabWrapper .landingTab .tabContainer #tabHeadingBoxSmall {
    /*     display: block; */
    width: 90%;
  }
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer #tabHeadingBoxSmall {
    width: 100%;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabItemBtnBox {
  display: flex;
  gap: 4rem;
  border: 1px border transparent;
  width: 80%;
}

.landingTabWrapper .landingTab .tabContainer .tabItemBtnBox button {
  color: #FFFFFF !important;
}

@media only screen and (max-width: 48em) {
  .landingTabWrapper .landingTab .tabContainer .tabItemBtnBox {
    gap: 3rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabItemBtnBox {
    gap: 1.8rem;
    width: 100%;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabItemBtnBox .tabBtn {
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--black-0);
  cursor: pointer;
  opacity: 0.6;
  padding-bottom: 10px;
  position: relative;
  transition: all 0.3s ease;
  font-size: 2.4rem;
}

@media only screen and (max-width: 600px) {
  .landingTabWrapper .landingTab .tabContainer .tabItemBtnBox .tabBtn {
    padding-bottom: 6px;
    font-size: 1.3rem;
  }
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabItemBtnBox .tabBtn {
    padding-bottom: 4px;
    font-size: 1.7rem;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabItemBtnBox .tabBtn:hover {
  opacity: 1;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox {
  /*   position: relative; */
  margin-top: 5rem;
  height: 100%;
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabContentBox {
    height: unset;
    margin-top: 0rem;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer {
  position: relative;
  height: 100%;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabImgBox {
  height: 100%;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabImgBox .tabImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox {
  position: absolute;
  left: 14rem;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(99.09% 208.09% at -11.81% 113.52%,
      #a2b6d3 0%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(144.02% 144.02% at 19.36% -14.56%,
      #8cf6ef 0%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(168.76% 168.76% at 116.28% 110.07%,
      #ffa6cb 0%,
      rgba(255, 255, 255, 0) 100%),
    #fff;
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 36rem;
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox {
    width: 30rem;
    padding: 3rem 3rem;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailTitleBox {
  width: 70%;
}

@media only screen and (max-width: 600px) {
  .landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailTitleBox {
    width: 85%;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailParaBox {
  width: 90%;
  /*   padding-bottom: 2rem; */
}

@media only screen and (max-width: 30em) {
  .landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailParaBox {
    width: 100%;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailParaBox .tabDetailParaText {
  line-height: 1.6;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox .tabDetailButtonLink {
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 3rem;
  padding: 2rem;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: var(--white-0);
  font-weight: 500;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 48em) {
  .landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox .tabDetailButtonLink {
    padding: 1.5rem;
  }
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox .tabDetailButtonLink::before {
  content: "";
  position: absolute;
  background: var(--black-0);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox .tabDetailButtonLink:hover::before {
  top: 0;
}

.landingTabWrapper .landingTab .tabContainer .tabContentBox .tabContent .tabImgContainer .tabDetailBox .tabDetailButtonBox .tabDetailButtonLink:hover {
  color: white !important;
  letter-spacing: 1.5px;
  font-weight: bold;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
}

.socialHero {
  overflow: hidden;
}

.socialHero .socialHeroContainer {
  position: relative;
}

.socialHero .socialHeroContainer .socialHeroImgBox {
  height: 45rem;
}

@media only screen and (max-width: 48em) {
  .socialHero .socialHeroContainer .socialHeroImgBox {
    height: 35rem;
  }
}

@media only screen and (max-width: 30em) {
  .socialHero .socialHeroContainer .socialHeroImgBox {
    height: 30rem;
  }
}

.socialHero .socialHeroContainer .socialHeroImgBox .socialHeroImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.socialHero .socialHeroContainer .socialHeroHeadingBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 8%;
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox {
    top: 75%;
    padding: 0 6%;
  }
}

@media only screen and (max-width: 30em) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox {
    padding: 0 4%;
  }
}

.socialHero .socialHeroContainer .socialHeroHeadingBox .socialHeroHeadingText {
  color: var(--white-0);
  width: 65%;
  line-height: 1.4;
  font-weight: 500;
  font-size: 4.5rem;
}

@media only screen and (max-width: 1000px) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox .socialHeroHeadingText {
    width: 90%;
  }
}

@media only screen and (max-width: 48em) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox .socialHeroHeadingText {
    /* width: 80%; */
    font-size: 3.8rem;
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox .socialHeroHeadingText {
    /* width: 80%; */
    font-size: 3.4rem;
  }
}

@media only screen and (max-width: 30em) {
  .socialHero .socialHeroContainer .socialHeroHeadingBox .socialHeroHeadingText {
    /* width: 95%; */
    font-size: 2.6rem;
  }
}

.socialPageContentBox .socialContentBox {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding: 8rem 8%;
}

@media only screen and (max-width: 48em) {
  .socialPageContentBox .socialContentBox {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox {
    padding: 4rem 4%;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox {
  flex: 1;
}

.socialPageContentBox .socialContentBox .socialCardBox {
  text-decoration: none;
  color: var(--white-0);
}

/* .socialPageContentBox
  .socialContentBox
  .socialCardBox
  .socialCardLink:hover
  .imgBtnBox
  svg {
  transform: translateX(40px);
}
.socialPageContentBox
  .socialContentBox
  .socialCardBox
  .socialCardLink:hover
  .socialImg {
  transform: scale(1.05);
} */
.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox {
  position: relative;
  overflow: hidden;
  height: 60rem;
}

@media only screen and (max-width: 600px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox {
    height: 40rem;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .socialImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.5s ease-out;
  /* filter: brightness(1.2); */
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 8rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox {
    top: 65%;
    width: calc(100% - 6rem);
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgHeadingBox {
  padding-bottom: 1rem;
  width: 80%;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgHeadingBox .imgHeadingText {
  color: var(--white-0);
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox {
  width: 35%;
}

@media only screen and (max-width: 56.25em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox {
    width: 45%;
  }
}

@media only screen and (max-width: 600px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox {
    width: 60%;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox {
    width: 90%;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgTitleBox .imgTitleText {
  line-height: 1.85525rem;
  /* 141.667% */
  letter-spacing: 0.5px;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox {
  width: 35%;
}

@media only screen and (max-width: 56.25em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox {
    width: 45%;
  }
}

@media only screen and (max-width: 600px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox {
    width: 60%;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox {
    width: 90%;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox .imgParaText {
  line-height: 1.4;
  letter-spacing: 0.5px;
  font-size: 1.3rem;
}

@media only screen and (max-width: 48em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox .imgParaText {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgParaBox .imgParaText {
    font-size: 1.1rem;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox {
  padding-top: 1rem;
  display: none;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
  height: 3.4rem;
  width: 3.4rem;
  transition: transform 0.5s ease-out;
}

@media only screen and (max-width: 48em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 3rem;
    width: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 2.5rem;
    width: 2.5rem;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .imgBtnBox svg {
    height: 2rem;
    width: 2rem;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox {
  padding-top: 2rem;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
  display: block;
  text-decoration: none;
  font-weight: 500;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 3rem;
  padding: 1.5rem;
  width: 20%;
  text-align: center;
  color: var(--white-0);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
}

@media only screen and (max-width: 1400px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
    min-width: 14rem;
  }
}

@media only screen and (max-width: 600px) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
    padding: 1.2rem;
  }
}

@media only screen and (max-width: 30em) {
  .socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink {
    min-width: 12rem;
  }
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink ::before {
  content: "";
  position: absolute;
  background: var(--white-0);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.3s ease-out;
  display: block;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink :hover::before {
  top: 0;
}

.socialPageContentBox .socialContentBox .socialCardBox .socialImgBox .imgDetailBox .socialBtnBox .socialBtnLink :hover {
  color: var(--blue-2) !important;
  letter-spacing: 1.2px;
  /* font-weight: bold; */
}

.pfHero {
  width: 100%;
  height: 45rem;
}

@media only screen and (max-width: 48em) {
  .pfHero {
    height: 35rem;
  }
}

@media only screen and (max-width: 30em) {
  .pfHero {
    height: 30rem;
  }
}

.pfHero .pfheroContainer {
  height: 100%;
  position: relative;
}

.pfHero .pfheroContainer .pfheroContentContainer {
  height: 100%;
  width: 100%;
  transition: all 0.3s ease;
}

.pfHero .pfheroContainer .pfheroContentContainer .pfheroImgBox {
  position: relative;
  height: 100%;
}

.pfHero .pfheroContainer .pfheroContentContainer .pfheroImgBox .pfheroImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 8%;
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox {
    padding: 0 6%;
  }
}

@media only screen and (max-width: 30em) {
  .pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox {
    padding: 0 4%;
  }
}

.pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox .pfheroText {
  width: 50%;
  color: var(--white-0);
  letter-spacing: 2px;
  line-height: 1.3;
  font-weight: 500;
  font-size: 4.5rem;
}

@media only screen and (max-width: 48em) {
  .pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox .pfheroText {
    width: 90%;
    letter-spacing: 1px;
  }
}

@media only screen and (max-width: 600px) {
  .pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox .pfheroText {
    font-size: 3.8rem;
  }
}

@media only screen and (max-width: 600px) {
  .pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox .pfheroText {
    font-size: 3.2rem;
    width: 100%;
  }
}

.pfHero .pfheroContainer .pfheroContentContainer .pfheroTextContentBox .pfheroParaText {
  color: var(--white-0);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
}

.pfHero .pfheroContainer .pfheroLinksContainer {
  position: absolute;
  left: 50%;
  bottom: -9rem;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 24%;
  z-index: 100 !important;
  pointer-events: all;
  display: none;
}

@media only screen and (max-width: 1000px) {
  .pfHero .pfheroContainer .pfheroLinksContainer {
    padding: 0 16%;
  }
}

@media only screen and (max-width: 48em) {
  .pfHero .pfheroContainer .pfheroLinksContainer {
    padding: 0 8%;
  }
}

@media only screen and (max-width: 600px) {
  .pfHero .pfheroContainer .pfheroLinksContainer {
    padding: 0 4%;
  }
}

@media only screen and (max-width: 30em) {
  .pfHero .pfheroContainer .pfheroLinksContainer {
    padding: 0;
    bottom: -8rem;
  }
}

.pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
  display: flex;
  justify-content: center;
  gap: 8rem;
  padding: 3rem 4rem;
  background: linear-gradient(113deg, #1277f6 -1.98%, #38cff6 97.66%);
}

@media only screen and (max-width: 56.25em) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
    gap: 6rem;
  }
}

@media only screen and (max-width: 48em) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
    gap: 4rem;
  }
}

@media only screen and (max-width: 600px) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
    gap: 4rem;
  }
}

@media only screen and (max-width: 30em) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
    gap: 3rem;
    padding: 2rem 1.5rem;
  }
}

@media only screen and (max-width: 400px) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox {
    gap: 2rem;
  }
}

.pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox .pfheroLink {
  outline: none;
  border: none;
  cursor: pointer;
  color: var(--white-0);
  background-color: transparent;
  letter-spacing: 1px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

@media only screen and (max-width: 400px) {
  .pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox .pfheroLink {
    font-size: 1.5rem;
  }
}

.pfHero .pfheroContainer .pfheroLinksContainer .pfheroLinksMainBox .pfheroLink:hover {
  opacity: 1;
}

.pfContent .pfContentContainer {
  padding: 8rem 8%;
}

@media only screen and (max-width: 48em) {
  .pfContent .pfContentContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 600px) {
  .pfContent .pfContentContainer {
    padding: 8rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .pfContent .pfContentContainer {
    padding: 8rem 4%;
  }
}

.pfContent .pfContentContainer .pfContentTabContainer .pfMainHeadingBox {
  padding-bottom: 3rem;
  display: none;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfMainHeadingBox .pfMainHeadingText {
  font-weight: 500;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab {
  display: none;
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 2rem;
  grid-row-gap: 6rem;
}

@media only screen and (max-width: 48em) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab {
    grid-template-columns: repeat(3, auto);
  }
}

@media only screen and (max-width: 30em) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink {
  text-decoration: none;
  color: var(--black-0);
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox {
  width: 100%;
  height: 30rem;
  overflow: hidden;
  position: relative;
}

@media only screen and (max-width: 56.25em) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox {
    height: 24rem;
  }
}

@media only screen and (max-width: 600px) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox {
    height: 20rem;
  }
}

@media only screen and (max-width: 30em) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox {
    height: 18rem;
  }
}

@media only screen and (max-width: 400px) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox {
    height: 16rem;
  }
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox .pfHoverTextBox {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease-in;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox .pfHoverTextBox .pfHoverText {
  color: var(--white-0);
  letter-spacing: 0.5px;
}

@media only screen and (max-width: 400px) {
  .pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox .pfHoverTextBox .pfHoverText {
    font-size: 1.2rem;
  }
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardImgBox .pfCardImg {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardTitleBox {
  padding-top: 1rem;
  width: 90%;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink .pfCardContainer .pfCardTitleBox .pfCardTitleText {
  color: var(--black-0);
  transition: all 0.3s ease;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink:hover .pfCardImg {
  transform: scale(1.05);
  filter: brightness(0.4) blur(4px);
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink:hover .pfHoverTextBox {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.pfContent .pfContentContainer .pfContentTabContainer .pfContentTab .pfContentBox .pfCardLink:hover .pfCardTitleText {
  color: var(--blue-2) !important;
}

body {
  /*   opacity: 0; */
}

.header.white .headerContainer .navBox .navList .navItem .navlink {
  color: white;
  transition: all 0.3s ease-in-out;
}

.wwa_banner {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 0 0% 0 8%;
  align-items: center;
  width: 100%;
  background-color: #f6f6f6;
}

.wwa_banner .bg {
  mix-blend-mode: darken;
  display: flex;
  justify-content: flex-end;
}

.wwa_banner .text {
  width: 75%;
}

.wwa_banner .text .line.small {
  font-size: 3rem;
  line-height: 4.25rem;
}

.wwa_banner .text h1 {
  position: relative;
  color: #060201;
  font-family: var(--sf-medium);
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.25rem;
  width: 100%;
}

.wwa_banner .bg {
  width: 50%;
}

.wwa_banner .bg img {
  width: 100%;
  height: 100%;
  /* 	opacity: .7; */
  /* max-width: 50rem; */
}

.www_about {
  display: flex;
  flex-direction: column;
  padding: 12rem 8% 14rem 8%;
  gap: 10rem;
}

.www_about .b1 {
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.www_about .b2 {
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.www_about img {
  width: 100%;
}

.www_about .b1 .c2 img {
  width: 100%;
  height: auto;
  max-width: 30rem;
  object-fit: contain;
}

.www_about .b2 .c1 img {
  width: 100%;
  height: auto;
  max-width: 40rem;
  object-fit: contain;
}

.www_about .b1 .c1 {
  width: 60%;
}

.www_about .b1 .c2 {
  width: 40%;
  display: flex;
  justify-content: center;
}

.www_about .b2 .c1 {
  width: 40%;
}

.www_about .b2 .c2 {
  width: 45%;
}

.www_about h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 5.49819rem;
  font-style: normal;
  font-weight: 500;
  line-height: 6.75rem;
  /* 122.768% */
  letter-spacing: -0.10994rem;
  margin-bottom: 3rem;
}

.www_about p {
  color: #898989;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.5rem;
  /* 195.652% */
  letter-spacing: 0.02875rem;
  width: 75%;
}

.www_about .b2 .c2 p {
  width: 100%;
}

.wwa_philosophy {
  position: relative;
  padding: 6rem 8% 12rem 8%;
  display: flex;
  flex-direction: column;
  gap: 7rem;
  background-color: #277cc0;
}

.wwa_philosophy .head {
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
}

.wwa_philosophy .head h1 {
  color: #ffffff;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.wwa_philosophy .head p {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--sf-regular);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  letter-spacing: 0.025rem;
  width: 45%;
}

.wwa_philosophy .content .block img {
  max-width: 5rem;
  max-height: 5rem;
  margin-bottom: 2.5rem;
}

.wwa_philosophy .content {
  display: flex;
  gap: 15rem;
  flex-grow: 1;
  flex-basis: 0;
}

.wwa_philosophy .content .block {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
}

.wwa_philosophy .content .block h1 {
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-family: var(--sf-bold);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.625rem;
  /* 131.25% */
}

.wwa_philosophy .content .block p {
  color: #ffffff;
  font-family: var(--sf-regular);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  /* 171.429% */
  letter-spacing: 0.0175rem;
  width: 70%;
  opacity: 0.8;
}

.wwa_cultureAndValue {
  position: relative;
  display: flex;
  padding: 9rem 8% 12rem 8%;
  gap: 5rem;
  display: none;
}

.wwa_cultureAndValue .c1 {
  position: relative;
  width: 40%;
}

.wwa_cultureAndValue .c2 {
  width: 60%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.wwa_cultureAndValue .c2 .arrows {
  display: flex;
  gap: 1.1rem;
  align-self: flex-end;
  margin-bottom: 7.9rem;
}

.wwa_cultureAndValue .c2 .arrows-mobile {
  display: none;
}

.wwa_cultureAndValue .c2 .arrows svg,
.wwa_cultureAndValue .c2 .arrows svg path,
.wwa_cultureAndValue .c2 .arrows svg circle {
  width: 5.4rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.wwa_cultureAndValue .c2 .arrows svg:hover path {
  fill: var(--blue-4);
}

.wwa_cultureAndValue .c2 .arrows svg:hover circle {
  fill: var(--blue-0);
}

.wwa_cultureAndValue .c2 .content {
  display: flex;
  flex-shrink: 0;
  gap: 5rem;
}

.wwa_cultureAndValue .c1 .head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 2.5rem;
  gap: 2.5rem;
}

.wwa_cultureAndValue .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  white-space: nowrap;
}

.wwa_cultureAndValue .head a {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem;
  /* 162.5% */
  letter-spacing: 0.02rem;
  border-radius: 2.70531rem;
  border: 1px solid #000;
  padding: 1.45rem;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  display: none;
}

.wwa_cultureAndValue .head a::before {
  content: "";
  position: absolute;
  background: var(--blue-2);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.wwa_cultureAndValue .head a:hover::before {
  height: 100%;
}

.wwa_cultureAndValue .head a:hover {
  color: white;
  border-color: white;
}

.wwa_cultureAndValue .c1 img {
  width: 35rem;
  height: 100%;
  object-fit: contain;
}

.wwa_cultureAndValue .block {
  padding: 3.5rem;
}

.wwa_cultureAndValue .c2 h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.625rem;
  /* 131.25% */
  margin-bottom: 0.69rem;
}

.wwa_cultureAndValue .c2 p {
  color: #898989;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  /* 139.13% */
  letter-spacing: 0.02875rem;
}

.wwa_cultureAndValue .c2 .block img {
  max-width: 5rem;
  max-width: 5rem;
  margin-bottom: 1.8rem;
}

.wwa_leadership {
  position: relative;
  padding: 5rem 8% 5rem 8%;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
}

.wwa_leadership .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 2.5rem;
}

/* .wwa_leadership .content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  grid-column-gap: 4.5rem;
  grid-row-gap: 4.5rem;
} */

.wwa_leadership .content {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  grid-column-gap: 4.5rem;
  grid-row-gap: 4.5rem;
}

.wwa_leadership .content .block {
  grid-column: auto / span 2;
  display: flex;
  flex-direction: column;
}

.wwa_leadership .content .block:nth-child(1) {
  grid-column: auto / span 3;
  /* Span all three columns */
}

.wwa_leadership .content .block:nth-child(2) {
  grid-column: auto / span 3;
}

.wwa_leadership .content .block {
  display: flex;
  flex-direction: column;
}

.wwa_leadership .content .block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 60rem;
  margin-bottom: 1.57rem;
}

.wwa_leadership .content .block h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140.5%;
  /* 2.45875rem */
  margin-bottom: 0.3rem;
}

.wwa_leadership .content .block p {
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--sf-medium);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140.5%;
  margin-bottom: 0.7rem;
}

.wwa_leadership .content .block h2 {
  color: #898989;
  font-family: var(--sf-regular);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 184.5%;
  /* 2.42156rem */
  margin-bottom: 2rem;
}

.wwa_leadership .content .block .socials {
  display: flex;
  gap: 1.2rem;
}

.wwa_leadership .content .block .socials svg {
  width: 2.8rem;
  height: 2.8rem;
}

.wwa_leadership .content .block .socials svg path {
  transition: all 0.3s ease-in-out;
}

.wwa_leadership .content .block .socials svg:hover path {
  fill: var(--blue-1);
}

.wwa_leadership .content .block .socials svg:hover #x {
  fill: white;
}

.hide .wwa_investors {
  display: none;
}

.wwa_investors {
  position: relative;
  display: flex;
  gap: 3.6rem;
  flex-direction: column;
  padding: 8rem 8% 5rem 8%;
}

.wwa_investors .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.wwa_investors .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 4rem;
}

.wwa_investors .content .block {
  display: flex;
  flex-direction: column;
  /* gap: 1.3rem; */
}

.wwa_investors .content .block p {
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--sf-medium);
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140.5%;
  margin-bottom: 0.7rem;
}

.wwa_investors .content .block h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.82763rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0.3rem;
}

.wwa_investors .content .block img {
  width: 100%;
  max-height: 30rem;
  transition: all 0.5s ease-out;
  margin-bottom: 1.57rem;
  object-fit: cover;
}

.wwa_investors .content .block img:hover {
  transform: scale(0.98);
}

.wwa_coreTeam {
  background-color: #f6f6f6;
  position: relative;
  display: flex;
  gap: 3.6rem;
  flex-direction: column;
  padding: 8rem 8% 2.5rem 8%;
}

.wwa_coreTeam .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.wwa_coreTeam .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto, auto);
  grid-column-gap: 3rem;
  grid-row-gap: 7rem;
}

.wwa_coreTeam .content .block {
  display: flex;
  flex-direction: column;
}

.wwa_coreTeam .content .block h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.82763rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0.3rem;
}

.wwa_coreTeam .content .block p {
  color: #898989;
  font-family: var(--sf-medium);
  font-size: 1.52763rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.wwa_coreTeam .content .block img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-out;
  margin-bottom: 1.2rem;
}

.wwa_coreTeam .content .block img:hover {
  transform: scale(0.98);
}

.wwa_timeline {
  padding: 11rem 8% 7rem 8%;
  /*   background: #cbfafc; */
  display: flex;
  gap: 5rem;
  position: relative;
}

.wwa_timeline .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.wwa_timeline .head {
  width: 50%;
}

.wwa_timeline img {
  width: 50%;
  object-fit: contain;
  /*   mix-blend-mode: darken; */
}

.wwa_timeline .head h1 {
  color: #fff;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 3rem;
}

.wwa_timeline .head p {
  color: #fff;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 184.5%;
  /* 2.42156rem */
  width: 100%;
}

.wwa_milestone {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 11rem 8% 7rem 8%;
  /* background-color: #e3ffcd; */
}

.wwa_milestone .head {
  display: flex;
  margin-bottom: 7rem;
  flex-direction: column;
}

.wwa_milestone .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 3rem;
}

.wwa_milestone .head p {
  color: #898989;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 184.5%;
  /* 2.42156rem */
  width: 50%;
}

.wwa_milestone .timeline {
  margin: 0 auto;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 1.25rem 1fr;
  height: auto;
  color: #ffffff;
  grid-column-gap: 1.06rem;
  padding-top: 10rem;
}

.wwa_milestone .timeline .block1 {
  display: flex;
  justify-content: flex-end;
}

.wwa_milestone .timeline .block2 {
  display: flex;
  justify-content: flex-start;
}

.wwa_milestone .timeline .card {
  display: flex;
  padding: 1.8rem 2rem;
  justify-content: space-between;
  align-items: center;
  background: radial-gradient(99.09% 208.09% at -11.81% 113.52%,
      #a2b6d3 0%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(144.02% 144.02% at 19.36% -14.56%,
      #8cf6ef 0%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(168.76% 168.76% at 116.28% 110.07%,
      #ffa6cb 0%,
      rgba(255, 255, 255, 0) 100%),
    #fff;
  margin-bottom: 4rem;
  max-width: 45rem;
  width: 100%;
}

.wwa_milestone .timeline .card h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2.6875rem;
  /* 165.385% */
  padding: 2rem 0;
  text-align: left;
}

.wwa_milestone .timeline .card h1 span {
  font-family: var(--sf-bold);
  font-weight: 700;
}

.wwa_milestone .timeline .card p {
  color: #000;
  text-align: center;
  font-family: var(--sf-medium);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.75rem;
  /* 150% */
}

.wwa_milestone .timeline .card .line {
  background: rgba(193, 193, 193, 0.6);
  width: 1px;
  margin: 0 1.25rem;
  height: 100%;
  position: relative;
}

.wwa_milestone .timeline .lineM {
  background-color: #eaeaea;
  position: relative;
}

.wwa_milestone .timeline .lineM:nth-child(2):before {
  content: "";
  background-image: url("../img/whoweare/spring.webp");
  background-size: 14rem 14rem;
  background-repeat: no-repeat;
  position: absolute;
  top: -13rem;
  left: -6.4rem;
  width: 14rem;
  height: 14rem;
}

.wwa_milestone .timeline .lineM .dot {
  position: absolute;
  bottom: -1.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #277cc0;
  z-index: 5;
  left: 0;
}

.wwa_media_partner {
  position: relative;
  display: flex;
  padding: 7rem 8% 7rem 8%;
  justify-content: space-between;
  gap: 7rem;
  width: 100%;
  flex-direction: column;
}

.wwa_media_partner .c1 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wwa_media_partner .c2 {
  width: 100%;
  display: flex;
}

.wwa_media_partner .c1 h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.125rem;
  /* 113.889% */
  letter-spacing: -0.09rem;
  margin-bottom: 1rem;
}

.wwa_media_partner .c1 h2 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.21875rem;
  /* 149.226% */
  color: #898989;
  display: none;
}

.wwa_media_partner .c2 .brands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5rem;
  grid-row-gap: 2rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wwa_media_partner .c2 .brands img {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  scale: 0.8;
  aspect-ratio: 1/1;
}

/* .wwa_media_partner .c2 .brands img:nth-child(1) {
  height: 5rem;
}

.wwa_media_partner .c2 .brands img:nth-child(2) {
  height: 12rem;
}

.wwa_media_partner .c2 .brands img:nth-child(3) {
  height: 5rem;
}

.wwa_media_partner .c2 .brands img:nth-child(4) {
  height: 5rem;
} */

.media_corporateNews {
  padding: 10rem 12rem 5rem 12rem;
}

.media_corporateNews .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 2.5rem;
}

.media_corporateNews .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.media_corporateNews .head h2 a {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  padding: 1.25rem 3.25rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.media_corporateNews .head h2 a:hover {
  opacity: 0.7;
}

.media_corporateNews .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  grid-column-gap: 2.9rem;
  grid-row-gap: 6rem;
  height: 100%;
}

.media_corporateNews .content .block a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.media_corporateNews .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 1.8rem;
  transition: all 0.5s ease-out;
}

.media_corporateNews .content img:hover {
  transform: scale(0.98);
}

.media_corporateNews .content h1 {
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  /* 131.25% */
  margin-bottom: 0.3rem;
  transition: all 0.3s ease-in-out;
}

.media_corporateNews .content .block:hover h1 {
  color: #277cc0;
}

.media_corporateNews .content p {
  overflow: hidden;
  color: #898989;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem;
  /* 141.667% */
}

.media_internalUpdates {
  padding: 7rem 12rem 7rem 12rem;
  background: #f6f6f6;
}

.media_internalUpdates .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 2.5rem;
}

.media_internalUpdates .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.media_internalUpdates .head h2 a {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  padding: 1.25rem 3.25rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.media_internalUpdates .head h2 a:hover {
  opacity: 0.7;
}

.media_internalUpdates .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  grid-column-gap: 2.9rem;
  grid-row-gap: 6rem;
  height: 100%;
}

.media_internalUpdates .content .block a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.media_internalUpdates .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 1.8rem;
  transition: all 0.5s ease-out;
}

.media_internalUpdates .content img:hover {
  transform: scale(0.98);
}

.media_internalUpdates .content h1 {
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  /* 131.25% */
  margin-bottom: 0.3rem;
  transition: all 0.3s ease-in-out;
}

.media_internalUpdates .content .block:hover h1 {
  color: #277cc0;
}

.media_internalUpdates .content p {
  overflow: hidden;
  color: #898989;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem;
  /* 141.667% */
}

.media_partner {
  position: relative;
  display: flex;
  padding: 7rem 12rem 7rem 12rem;
  justify-content: space-between;
  gap: 7rem;
  width: 100%;
}

.media_partner .c1 {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.media_partner .c2 {
  width: 50%;
  display: flex;
}

.media_partner .c1 h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.125rem;
  /* 113.889% */
  letter-spacing: -0.09rem;
  margin-bottom: 1rem;
}

.media_partner .c1 h2 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.48681rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.21875rem;
  /* 149.226% */
}

.media_partner .c2 .brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 5rem;
  grid-row-gap: 2rem;
  align-items: center;
  justify-content: center;
}

.media_partner .c2 .brands img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.media_partner .c2 .brands img:nth-child(1) {
  height: 5rem;
}

.media_partner .c2 .brands img:nth-child(2) {
  height: 3rem;
}

.media_partner .c2 .brands img:nth-child(3) {
  height: 10rem;
}

.media_partner .c2 .brands img:nth-child(4) {
  height: 3rem;
}

.internalUpdatesPage {
  padding: 10rem 8% 7rem 8%;
  background: #f6f6f6;
}

.internalUpdatesPage .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 2.5rem;
}

.internalUpdatesPage .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.internalUpdatesPage .head h2 a {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  padding: 1.25rem 3.25rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.internalUpdatesPage .head h2 a:hover {
  opacity: 0.7;
}

.internalUpdatesPage .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 2.9rem;
  grid-row-gap: 6rem;
  height: 100%;
}

.internalUpdatesPage .content .block a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.internalUpdatesPage .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 1.8rem;
  transition: all 0.5s ease-out;
}

.internalUpdatesPage .content img:hover {
  transform: scale(0.98);
}

.internalUpdatesPage .content h1 {
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  /* 131.25% */
  margin-bottom: 0.3rem;
  transition: all 0.3s ease-in-out;
}

.internalUpdatesPage .content .block:hover h1 {
  color: #277cc0;
}

.internalUpdatesPage .content p {
  overflow: hidden;
  color: #898989;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem;
  /* 141.667% */
}

.internalUpdatesPage .seeMore {
  display: flex;
  position: relative;
  width: 100%;
  padding: 5rem 0 8rem 0;
  justify-content: center;
}

.internalUpdatesPage .seeMore h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  padding: 1.25rem 3.25rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.internalUpdatesPage .seeMore h1:hover {
  opacity: 0.7;
}

.corporateNewsPage {
  padding: 10rem 8% 5rem 8%;
}

.corporateNewsPage .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 2.5rem;
}

.corporateNewsPage .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.corporateNewsPage .head h2 a {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  padding: 1.25rem 3.25rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.corporateNewsPage .head h2 a:hover {
  opacity: 0.7;
}

.corporateNewsPage .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 2.9rem;
  grid-row-gap: 6rem;
  height: 100%;
}

.corporateNewsPage .content .block {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.corporateNewsPage .content .block a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.corporateNewsPage .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
  margin-bottom: 1.8rem;
  transition: all 0.5s ease-out;
}

.corporateNewsPage .content img:hover {
  transform: scale(0.98);
}

.corporateNewsPage .content h1 {
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  /* 131.25% */
  margin-bottom: 0.3rem;
  transition: all 0.3s ease-in-out;
}

.corporateNewsPage .content .block:hover h1 {
  color: #007cbf;
}

.corporateNewsPage .content p {
  overflow: hidden;
  color: #898989;
  text-overflow: ellipsis;
  whitespace: nowrap;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem;
  /* 141.667% */
}

.corporateNewsPage .seeMore {
  display: flex;
  position: relative;
  width: 100%;
  padding: 5rem 0 8rem 0;
  justify-content: center;
}

.corporateNewsPage .seeMore h1 {
  position: relative;
  color: #fff;
  display: inline;
  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.02rem;
  border-radius: 2.30531rem;
  padding: 1.25rem 3.25rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
}

.corporateNewsPage .seeMore h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  left: 0;
  background: var(--blue-2);
  z-index: -1;
  transition: all 0.3s ease-out;
  background-color: #000;
}

.corporateNewsPage .seeMore h1:hover::before {
  color: white;
  background-color: #000;
  height: 100%;
}

.investors_banner {
  display: flex;
  flex-direction: column;
  padding: 12rem 8% 0rem 8%;
}

.investors_banner>h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 1.7rem;
}

.investors_banner img {
  width: 100%;
  height: 100%;
  margin-bottom: 3rem;
}

.investors_banner .block .head a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
  text-decoration: none;
  display: none;
}

.investors_banner .block .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3.25rem;
  /* 162.5% */
  letter-spacing: 0.04rem;
  padding: 1.81rem 0;
  transition: all 0.3s ease-in-out;
}

.investors_banner .block .head h2 {

  color: #000;
  font-family: var(--sf-bold);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.04rem;
  padding: 1.81rem 0;
  transition: all 0.3s ease-in-out;
  border: 1px solid black;
  padding: 2rem;
  border-radius: 30px;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease-in-out;
  display: none;
}

.investors_banner .block .head h2:hover {
  opacity: 0.7;
}

.investors_financialResults {
  position: relative;
  padding: 9rem 8% 0rem 8%;
}

.investors_financialResults>.head {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.investors_financialResults>.head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 2.56rem;
}

.investors_financialResults .content .block {
  display: flex;
  flex-direction: column;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
  padding: 0 1.25rem;
}

.investors_financialResults .content .block .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.investors_financialResults .content .block .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3.25rem;
  /* 162.5% */
  letter-spacing: 0.04rem;
  padding: 1.81rem 0;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .content .block .head h2 {
  /* display: none; */
  color: #000;
  font-family: var(--sf-bold);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.04rem;
  padding: 1.81rem 0;
  transition: all 0.3s ease-in-out;
  border: 1px solid black;
  padding: 2rem;
  border-radius: 30px;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .content .block .head h2:hover {
  opacity: 0.7;
}

.investors_financialResults .content .block .box {
  display: flex;
  gap: 2.31rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.investors_financialResults .content .block.active .box {
  max-height: 10rem;
}

.investors_financialResults .content .block .head img {
  transition: all 0.3s ease-in-out;
  width: 2rem;
  height: 2rem;
  display: none;
}

.investors_financialResults .content .block.active .head img {
  transform: rotate(180deg);
}

/* .investors_financialResults .content .block.active .head h1 {
  color: #007cbf;
} */

.investors_financialResults .content .block .box>div {
  flex-grow: 1;
  flex-basis: 0;
  border-radius: 0.625rem;
  background: #f6f6f6;
  margin-bottom: 1.88rem;
}

.investors_financialResults .content .block .box a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.19rem;
  gap: 1rem;
  height: 100%;
  text-decoration: none;
}

.investors_financialResults .content .block .box a h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  /* 260% */
  letter-spacing: 0.025rem;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .content .block .box a img {
  width: 3.3rem;
  height: 3.3rem;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .content .block .box a:hover img {
  transform: translateX(5px);
}

.investors_financialResults .content .block .box a:hover h1 {
  color: #007cbf;
}

/* !pop up =====================  */

.investors_financialResults .popUp {
  /* border: 2px solid red; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 4rem 2.5rem;
  border-radius: 5px;
  background-color: #fefeff;
  display: none;
  flex-direction: column;
  box-shadow: 5px 7px 30px -2px rgba(0, 0, 0, 0.64);
  -webkit-box-shadow: 5px 7px 30px -2px rgba(0, 0, 0, 0.64);
  -moz-box-shadow: 5px 7px 30px -2px rgba(0, 0, 0, 0.64);
  width: 100%;
  max-width: 40rem;
  animation-name: easeInAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
}

.investors_financialResults .popUp.active {
  display: flex;
}

.investors_financialResults .popUp p {
  display: grid;
}

.investors_financialResults .popUp .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.investors_financialResults .popUp .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3.25rem;
  /* 162.5% */
  letter-spacing: 0.04rem;
}

.investors_financialResults .popUp .head img {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.investors_financialResults .popUp div>h1 {
  color: #000;
  font-family: var(--sf-regular);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 144.53% */
  margin-bottom: 0.8rem;
}

.investors_financialResults .popUp div input {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.25rem;
  /* 260% */
  letter-spacing: 0.025rem;
  outline: none;
  border: 1px solid rgba(128, 128, 128, 0.588);
  padding: 0.1rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
  width: 100%;
}

.investors_financialResults .popUp .submit {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02rem;
  padding: 1.25rem 4.35rem;
  background: #000;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  margin-top: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
  outline: none;
  border: none;
  color: white;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  justify-self: center;
  align-self: center;
}

.investors_financialResults .popUp .submit::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  left: 0;
  background: var(--blue-2);
  z-index: -1;
  transition: all 0.3s ease-out;
}

.investors_financialResults .popUp .submit:hover::before {
  color: white;
  height: 100%;
}

/* !contact form 7  */

.investors_financialResults .popUp .wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 12px;
  font-family: inherit;
  font-weight: normal;
  display: block;
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .popUp .wpcf7 form .wpcf7-response-output {
  margin: 0;
  font-family: inherit;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
  animation-name: easeInAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
}

@keyframes easeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.investors_financialResults .popUp .wpcf7 form .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .popUp .wpcf7-not-valid-tip {
  color: #dc3232;
  font-family: var(--sf-regular);
  font-size: 12px;
  font-weight: normal;
  display: block;
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

/* .investors_financialResults .popUp .wpcf7-not-valid-tip {
  display: none;
} */

.investors_financialResults .popUp .wpcf7 form.sent .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  border: 0;
  margin: 0;
  padding: 0;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}

.investors_financialResults .popUp form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  transition: all 0.3s ease-in-out;
}

/* !=============== */

.investors_governanceAndSustainability {
  position: relative;
  padding: 9rem 8% 9rem 8%;
  background: #f6f6f6;
  display: none;
}

.investors_governanceAndSustainability>.head {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.investors_governanceAndSustainability>.head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  margin-bottom: 2.56rem;
}

.investors_governanceAndSustainability .content .block {
  display: flex;
  flex-direction: column;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
  padding: 0 1.25rem;
}

.investors_governanceAndSustainability .content .block .head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.investors_governanceAndSustainability .content .block .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3.25rem;
  /* 162.5% */
  letter-spacing: 0.04rem;
  padding: 1.81rem 0;
  transition: all 0.3s ease-in-out;
}

.investors_governanceAndSustainability .content .block .box {
  display: flex;
  gap: 2.31rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.investors_governanceAndSustainability .content .block.active .box {
  max-height: 10rem;
}

.investors_governanceAndSustainability .content .block .head img {
  transition: all 0.3s ease-in-out;
  width: 2rem;
  height: 2rem;
}

.investors_governanceAndSustainability .content .block.active .head img {
  transform: rotate(180deg);
}

.investors_governanceAndSustainability .content .block.active .head h1 {
  color: #007cbf;
}

.investors_governanceAndSustainability .content .block .box>div {
  flex-grow: 1;
  flex-basis: 0;
  border-radius: 0.625rem;
  background-color: white;
  margin-bottom: 1.88rem;
}

.investors_governanceAndSustainability .content .block .box a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.19rem;
  gap: 1rem;
  height: 100%;
  text-decoration: none;
}

.investors_governanceAndSustainability .content .block .box a h1 {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  /* 260% */
  letter-spacing: 0.025rem;
  transition: all 0.3s ease-in-out;
}

.investors_governanceAndSustainability .content .block .box a img {
  width: 3.3rem;
  height: 3.3rem;
  transition: all 0.3s ease-in-out;
}

.investors_governanceAndSustainability .content .block .box a:hover img {
  transform: translateX(5px);
}

.investors_governanceAndSustainability .content .block .box a:hover h1 {
  color: #007cbf;
}

.investors_contact {
  position: relative;
  padding: 12rem 8% 7rem 8%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.investors_contact .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.investors_contact .contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 40%;
}

.investors_contact .contact input {
  width: 100%;
  padding: 1.81rem 1.25rem;
  border: none;
  outline: none;
  transition: all 0.3s ease-in-out;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.197);
  color: black;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  letter-spacing: 0.025rem;
}

.investors_contact .contact div {
  width: 100%;
}

.investors_contact .contact input:focus::placeholder {
  color: transparent;
}

.investors_contact .contact input::placeholder {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  letter-spacing: 0.025rem;
  transition: all 0.3s ease-in-out;
}

.investors_contact .contact .submit {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.02rem;
  padding: 1.25rem 4.35rem;
  background: #000;
  border-radius: 2.30531rem;
  border: 1px solid #000;
  margin-top: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
  outline: none;
  border: none;
  color: white;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
}

.investors_contact .contact .submit::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  left: 0;
  background: var(--blue-2);
  z-index: -1;
  transition: all 0.3s ease-out;
}

.investors_contact .contact .submit:hover::before {
  color: white;
  height: 100%;
}

/* !contact form 7  */

.investors_contact .wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 12px;
  font-family: var(--sf-regular);
  font-weight: normal;
  display: block;
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.investors_contact .wpcf7 form .wpcf7-response-output {
  margin: 0;
  font-family: var(--sf-regular);
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
  animation-name: easeInAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
}

@keyframes easeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.investors_contact .wpcf7 form .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  transition: all 0.3s ease-in-out;
}

.investors_contact .wpcf7-not-valid-tip {
  color: #dc3232;
  font-family: var(--sf-regular);
  font-size: 12px;
  font-weight: normal;
  display: block;
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

/* .investors_contact .wpcf7-not-valid-tip {
  display: none;
} */

.investors_contact .wpcf7 form.sent .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  border: 0;
  margin: 0;
  padding: 0;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
}

.investors_contact form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  transition: all 0.3s ease-in-out;
}

/* !=============== */

.contact_main {
  display: flex;
  gap: 5rem;
  padding: 12rem 8% 8rem 8%;
}

.contact_main .c1 .block {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto, auto);
  grid-column-gap: 2.5rem;
  grid-row-gap: 5.13rem;
}

.contact_main .c1 .block .image {
  position: relative;
  margin-bottom: 1.8rem;
}

.contact_main .c1 .block .image h2 {
  position: absolute;
  bottom: 3.5rem;
  left: 1.5rem;
  color: #fff;
  font-family: "Lato";
  font-size: 1.9995rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.61563rem;
  /* 80.801% */
}

.contact_main .c1 .block img {
  width: 100%;
  object-fit: cover;
}

.contact_main .c2 svg {
  width: 100%;
  height: 100%;
}

.contact_main .c1 .head {
  margin-bottom: 2rem;
}

.contact_main .c1 .head h1 {
  color: #1e1e1e;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.contact_main .c1 .block h1 {
  color: #000;
  font-family: var(--sf-regular);
  font-size: 2.01806rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 1.4rem;
}

.contact_main .c1 .block p {
  color: #898989;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875rem;
  /* 79.492% */
}

.contact_main .c1 .block p strong {
  color: #000;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875rem;
}

.contact_form {
  display: flex;
  background: #277cc0;
  padding: 6rem 8% 6rem 8%;
  flex-direction: column;
}

.contact_form .head {
  margin-bottom: 1.9rem;
}

.contact_form .head h1 {
  color: #ffffff;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.contact_form .content {
  display: flex;
  gap: 5rem;
}

.contact_form .content .c1 {
  width: 50%;
}

.contact_form .content .c2 {
  width: 50%;
}

.contact_form .content .head h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
}

.contact_form .content .c1 h1 {
  color: #ffffff;
  font-family: var(--sf-bold);
  font-size: 1.47375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;
  /* 115.352% */
  letter-spacing: 0.0295rem;
  margin-bottom: 0.56rem;
}

.contact_form .content .c1 p,
.contact_form .content .c1 a {
  color: #ffffff;
  font-family: var(--sf-regular);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.7rem;
  /* 200.284% */
  letter-spacing: 0.017rem;
  margin-bottom: 2.5rem;
  max-width: 35rem;
}

.contact_form .content .c2 input {
  width: 100%;
  padding: 1.81rem 1.25rem;
  border: none;
  outline: none;
  transition: all 0.3s ease-in-out;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  letter-spacing: 0.025rem;
  background-color: #277cc0;
}

.contact_form .content .c2 input:focus::placeholder {
  color: transparent;
}

.contact_form .content .c2 input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-family: var(--sf-regular);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875rem;
  color: #ffffff;
  /* 150% */
  letter-spacing: 0.025rem;
  transition: all 0.3s ease-in-out;
}

.contact_form .content .c2 .submit {
  color: white;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.02rem;
  padding: 1.25rem 5rem;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 2.30531rem;
  margin-top: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
  outline: none;
  border: none;
}

.contact_form .content .c2 .submit::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  left: 0;
  background: var(--blue-2);
  z-index: -1;
  transition: all 0.3s ease-out;
  background-color: #000;
}

.contact_form .content .c2 .submit:hover::before {
  color: white;
  background-color: #000;
  height: 100%;
}

/* !contact form 7  */

.contact-form .wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 12px;
  font-family: inherit;
  font-weight: normal;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.contact_form .wpcf7 form .wpcf7-response-output {
  margin: 0;
  font-family: inherit;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
  animation-name: easeInAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  color: #ffffff;
}

@keyframes easeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.contact_form .wpcf7 form .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  transition: all 0.3s ease-in-out;
}

.contact_form .wpcf7-not-valid-tip {
  color: #dc3232;
  font-family: var(--sf-regular);
  font-size: 12px;
  font-weight: normal;
  display: block;
  position: relative;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.signup-form .wpcf7 form.sent .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  border: 0;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease-in-out;
}

.signup-form form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  transition: all 0.3s ease-in-out;
}

/* !=============== */

/*! Below 1200px  !1200px/16 = 75em */
@media (max-width: 75em) {
  .wwa_banner .text h1 {
    font-size: 3.5rem;
    line-height: 4.75rem;

  }
}

@media (max-width: 53.125em) {
  .wwa_banner .text h1 {
    font-size: 3rem;
    line-height: 4.25rem;
  }
}

@media (max-width: 48em) {

  .wwa_banner .bg img {
    opacity: .6;
  }

  .wwa_banner .text h1 {
    font-size: 2.3rem;
    line-height: 3.5rem;
    font-weight: bolder;
  }
}

/*! Below 1024px  1024px/16 = 64em */
@media (max-width: 64em) {
  .wwa_philosophy .content {
    gap: 5rem;
  }

  .www_about p {
    width: 95%;
  }

  .wwa_cultureAndValue .block {
    padding: 1.5rem;
  }

  .wwa_banner .text .line.small {
    font-size: 2rem;
    line-height: 3.25rem;
  }
}

/*! Below 768px   768px/16 = 48em */
@media (max-width: 48em) {
  .wwa_banner .text .line.small {
    font-size: 1.5rem;
    line-height: 2.45rem;
  }

  .wwa_banner .bg {
    width: 100%;
  }

  .wwa_banner .text {
    position: absolute;
    width: 100%;
    padding: 0 6% 0 6%;
  }

  .wwa_banner {
    padding: 0 0% 0 0%;
  }

  .www_about {
    padding: 7rem 6% 7rem 6%;
    gap: 5rem;
  }

  .www_about .b1 {
    flex-direction: column-reverse;
    gap: 3rem;
  }

  .www_about .b1 .c1 {
    width: 100%;
  }

  .www_about .b2 {
    flex-direction: column;
    gap: 3rem;
  }

  .www_about .b2 .c2 {
    width: 100%;
  }

  .www_about .b2 .c1 {
    width: 60%;
  }

  .www_about .b1 .c2 {
    width: 50%;
  }

  .www_about h1 {
    font-size: 3rem;
    line-height: 4.3rem;
    margin-bottom: 1.5rem;
  }

  .wwa_philosophy .head h1 {
    font-size: 3rem;
    line-height: 4.35rem;
  }

  .wwa_philosophy .content .block h1 {
    font-size: 1.8rem;

    line-height: 2.425rem;
  }

  .wwa_cultureAndValue .head h1 {
    font-size: 3rem;

    font-weight: 500;
    line-height: 4.35rem;
  }

  .wwa_cultureAndValue .head a {
    font-size: 1rem;
    line-height: 1.225rem;

  }

  .wwa_leadership .head h1 {
    font-size: 3rem;

    line-height: 4.35rem;
  }

  .wwa_timeline {
    flex-direction: column;
    gap: 3rem;
  }

  .wwa_timeline .head {
    width: 100%;
  }

  .wwa_timeline img {
    width: 100%;
  }

  .wwa_investors .head h1,
  .wwa_coreTeam .head h1,
  .wwa_media_partner .c1 h1,
  .wwa_timeline .head h1,
  .wwa_milestone .head h1,
  .corporateNewsPage .head h1,
  .contact_main .c1 .head h1,
  .contact_main .c1 .head h1,
  .contact_form .head h1 {
    font-size: 3rem;

    line-height: 4.35rem;
  }

  .wwa_milestone .timeline .card h1 {
    font-size: 1.3rem;

    line-height: 2.3rem;
  }

  .wwa_milestone .timeline {
    grid-column-gap: 0.7rem;
  }

  .wwa_philosophy {
    padding: 6rem 6% 5rem 6%;
    gap: 3rem;
  }

  .wwa_philosophy .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
  }

  .wwa_cultureAndValue {
    flex-direction: column;
    padding: 7rem 6% 7rem 6%;
  }

  .wwa_cultureAndValue .c1 .head {
    gap: 2rem;
  }

  .wwa_cultureAndValue .c2 .arrows-mobile {
    display: flex;
    gap: 1.1rem;
    align-self: flex-end;
    margin-bottom: 0rem;
  }

  .wwa_cultureAndValue .c1 img {
    width: 100%;
  }

  .wwa_cultureAndValue .c1 {
    position: relative;
    width: 100%;
  }

  .wwa_cultureAndValue .c2 .arrows {
    display: none;
  }

  .wwa_cultureAndValue .c2 {
    width: 100%;
  }

  .wwa_leadership {
    padding: 5rem 6% 5rem 6%;
  }

  .wwa_leadership .content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    grid-column-gap: 3.5rem;
    grid-row-gap: 3.5rem;
  }

  .wwa_investors {
    padding: 7rem 6% 2.5rem 6%;
  }

  .wwa_investors .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
  }

  .wwa_coreTeam {
    padding: 7rem 6% 2.5rem 6%;
  }

  .wwa_coreTeam .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
  }

  .wwa_media_partner {
    padding: 7rem 6% 7rem 6%;
    justify-content: space-between;
    gap: 3.5rem;
  }

  .wwa_media_partner .c2 .brands {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
  }

  .wwa_milestone {
    padding: 7rem 6% 7rem 6%;
  }

  .wwa_timeline .head p {
    width: 100%;
  }

  .wwa_milestone .head p {
    width: 100%;
  }

  .wwa_milestone .timeline {
    padding: 0;
    padding-top: 10rem;
    grid-template-columns: 1fr 1.25rem 1fr;
    width: 100%;
  }

  .wwa_milestone .timeline .block1 .card {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .wwa_milestone .timeline .block2 .card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*! Below 768px   768px/16 = 48em */
@media (max-width: 48em) {
  .investors_banner {
    padding: 7rem 6% 2rem 6%;
  }

  .investors_banner img {
    margin-bottom: 0.5rem;
  }

  .investors_banner>h1,
  .investors_contact .head h1 {
    font-size: 3rem;
    line-height: 4.25rem;
  }

  .investors_financialResults>.head h1 {
    font-size: 3rem;
    line-height: 4.25rem;
    margin-bottom: 0.5rem
  }

  .investors_financialResults .content .block {
    padding: 0;
  }

  .investors_financialResults .content .block .box {
    flex-direction: column;
  }

  .investors_financialResults .content .block.active .box {
    flex-direction: column;
  }

  .investors_financialResults .content .block.active .box {
    max-height: 100rem;
    margin-bottom: 2rem;
  }

  .investors_financialResults .content .block .box>div {
    margin-bottom: 0rem;
  }

  .investors_financialResults {
    position: relative;
    padding: 9rem 6% 0rem 6%;
  }

  .investors_contact .contact {
    width: 100%;
  }

  .investors_financialResults .popUp {
    width: 95%;
    max-width: 100%;
  }

  .investors_financialResults .content .block .head h2 {
    text-align: center;
  }

  .investors_financialResults .content .block .head h1 {
    font-size: 1.6rem;
  }

  .investors_financialResults .content .block .head {
    gap: 1rem;
  }

  .investors_financialResults .content .block .head h2 {
    padding: 1rem;
    font-size: 1.2rem;
    margin-bottom: 0rem;
  }

  .investors_banner.block .head h2 {
    text-align: center;
  }

  .investors_banner .block .head h1 {
    font-size: 1.6rem;
  }

  .investors_banner.block .head {
    gap: 1rem;
  }

  .investors_banner .block .head h2 {
    padding: 1rem;
    font-size: 1.2rem;
    margin-bottom: 0rem;
  }
}

/* ! ***** Mobile ****************************** */
/*! Below 768px   768px/16 = 48em */
@media (max-width: 48em) {
  .corporateNewsPage {
    padding: 7rem 6% 5rem 6%;
  }

  .corporateNewsPage .content {
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-column-gap: 2.9rem;
    grid-row-gap: 5rem;
    height: 100%;
  }

  .corporateNewsPage .content img {
    height: 22rem;
  }

  .corporateNewsPage .seeMore {
    padding: 5rem 0 5rem 0;
  }
}

/* ! ***** Mobile ****************************** */
/*! Below 768px   768px/16 = 48em */
@media (max-width: 48em) {
  .contact_main {
    padding: 8rem 6% 7rem 6%;
  }

  .contact_main .c1 .block {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2.5rem;
    grid-row-gap: 5.13rem;
  }

  .contact_form .content {
    flex-direction: column;
    gap: 3rem;
  }

  .contact_form .content .c1 {
    width: 100%;
  }

  .contact_form .content .c2 {
    width: 100%;
  }
}

/* .phoneHeaderContainer.white-bg .phoneHeaderBox.show {
  background: linear-gradient(
    90deg,
    white 0%,
    white 40vw,
    #277cc0 40vw,
    #277cc0 100%
  );
} */

.whoWeAreMain {
  overflow: hidden;
  /* border: 1px solid red;
  width: 100%; */
}

/* !privacy and policy  */

.privacy_policy {
  position: relative;
  padding: 8rem 8% 9rem 8%;
}

.privacy_policy h1 {
  color: #000;
  font-family: var(--sf-bold);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  margin-bottom: 1.7rem;
}

.privacy_policy ul,
.privacy_policy ol {
  padding-left: 2%;
}

.privacy_policy ul li {
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--sf-regular);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 171.429%;
  letter-spacing: 0.0175rem;
  width: 50%;
}

.privacy_policy strong {
  color: #000;

  font-family: var(--sf-medium);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.125rem;
  /* 141.667% */
  letter-spacing: 0.03rem;
  display: inline-block;
  margin-bottom: 0.7rem;
}

.privacy_policy p,
.privacy_policy a {
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--sf-regular);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 171.429%;
  letter-spacing: 0.0175rem;
  width: 50%;
}

@media (max-width: 48em) {
  .privacy_policy p {
    width: 100%;
  }

  .privacy_policy ul li {
    width: 100%;
  }

  .contact_form .content .c1 p {
    max-width: 100%;
  }
}

/* !careers  */

.careers {
  position: relative;
  padding: 12rem 8% 9.25rem 8%;
  background-color: #101f82;
}

.careers .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.careers .head h1 {
  color: #fff;
  font-family: var(--sf-regular);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 5.75rem;
  /* 127.778% */
  max-width: 70rem;
  margin-bottom: 3rem;
}

.careers .contactForm {
  max-width: 70rem;
}

.careers .contactForm input {
  width: 100%;
  padding: 1.81rem 1.25rem;
  border: none;
  outline: none;
  transition: all 0.3s ease-in-out;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-family: var(--sf-medium);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  /* 150% */
  letter-spacing: 0.025rem;
  background-color: transparent;
}

.careers .contactForm input:focus::placeholder {
  color: transparent;
}

.careers .contactForm input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-family: var(--sf-regular);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875rem;
  color: #ffffff;
  /* 150% */
  letter-spacing: 0.025rem;
  transition: all 0.3s ease-in-out;
}

.careers .contactForm .submit {
  color: white;
  font-family: var(--sf-medium);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  /* 162.5% */
  letter-spacing: 0.02rem;
  padding: 1.25rem 5rem;
  background: linear-gradient(91deg, #0f7cdd 0%, #51bdcf 100.59%);
  border-radius: 2.30531rem;
  margin-top: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
  outline: none;
  border: none;
}

.careers .contactForm .submit::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  left: 0;
  background: var(--blue-2);
  z-index: -1;
  transition: all 0.3s ease-out;
  background-color: #000;
}

.careers .contactForm .submit:hover::before {
  color: white;
  background-color: #000;
  height: 100%;
}

/* !contact form 7  */

.careers.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 12px;
  font-family: inherit;
  font-weight: normal;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.careers .wpcf7 form .wpcf7-response-output {
  margin: 0;
  font-family: inherit;
  padding: 0;
  border: 2px solid #00a0d2;
  border: 0;
  font-size: 13px;
  text-align: left;
  margin-top: 1rem;
  transition: all 0.3s ease-in-out;
  animation-name: easeInAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
}

@keyframes easeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.careers .wpcf7 form .wpcf7-response-output {
  font-family: var(--sf-regular);
  font-weight: 200;
  transition: all 0.3s ease-in-out;
  color: white;
}

.careers .wpcf7-not-valid-tip {
  color: #dc3232;
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

/* !=============== */

@media only screen and (max-width: 48em) {
  .careers .head h1 {
    font-size: 2.5rem;

    line-height: 3.75rem;
  }
}

/* .careersMain {
  margin-top: 6rem;
} */

.hero .heroContainer .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 5rem;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4rem;
  list-style-type: none;
}

@media only screen and (max-width: 1200px) {
  .hero .heroContainer .slick-dots {
    bottom: 3rem;
  }
}

@media only screen and (max-width: 48em) {
  .hero .heroContainer .slick-dots {
    bottom: 2rem;
  }
}

.hero .heroContainer .slick-dots li::marker {
  display: none;
}

.hero .heroContainer .slick-dots li button {
  height: 1rem;
  width: 1rem;
  border-radius: 2rem;
  font-size: 0;
  cursor: pointer;
  border: 1px solid black;
}

/* 
@media only screen and (max-width: 48em) {
  .hero .heroContainer .slick-dots li button {
    height: 0.8rem;
    width: 0.8rem;
  }
} */

.hero .heroContainer .slick-dots .slick-active button {
  background-color: rgb(62, 184, 115);
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slick-dots {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 3rem;
  list-style-type: none;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slick-dots li::marker {
  display: none;
}

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slick-dots li button {
  height: 1rem;
  width: 1rem;
  border-radius: 2rem;
  font-size: 0;
  cursor: pointer;
  border: 1px solid black;
}

/* @media only screen and (max-width: 48em) {
  .highlight .highlightContainer .slidertabContent .sliderMainContainer .slick-dots li button {
    height: 0.8rem;
    width: 0.8rem;
  }
} */

.highlight .highlightContainer .slidertabContent .sliderMainContainer .slick-dots .slick-active button {
  background-color: rgb(62, 184, 115);
}


.autoSlide .asContainer {
  padding: 10rem 0 10rem 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
}

@media only screen and (max-width: 56.25em) {
  .autoSlide .asContainer {
    padding: 10rem 0 10rem 6%;
  }
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer {
    flex-direction: column;
    gap: 10rem;
    padding: 8rem 0 12rem 6%;
  }
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer {
    padding: 6rem 0 8rem 4%;
    gap: 8rem;
  }
}


.autoSlide .asContainer .asHeaderBox {
  width: 40vw;
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asHeaderBox {
    width: 100%;
  }
}

.autoSlide .asContainer .asHeaderBox .asHeaderText {
  font-weight: 500;
  letter-spacing: -0.1431rem;
  width: 100%;
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asHeaderBox .asHeaderText {
    width: 80%;
  }
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer .asHeaderBox .asHeaderText {
    width: 96%;
  }
}

.autoSlide .asContainer .asImageContainer {
  position: relative;
  width: 50%;
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asImageContainer {
    width: 65%;
  }
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer .asImageContainer {
    width: 100%;
  }
}


.autoSlide .asContainer .asImageContainer .ecoNameBox {
  position: relative;
  z-index: 20;
  padding: 1rem 3rem;
  background-color: #ae5175;
  border-radius: 10rem;
  width: 37rem;
  height: 7rem;
  transition: all 0.2s ease;
}

@media only screen and (max-width: 56.25em) {
  .autoSlide .asContainer .asImageContainer .ecoNameBox {
    width: 30rem;
  }
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asImageContainer .ecoNameBox {
    width: 26rem;
  }
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer .asImageContainer .ecoNameBox {
    width: 22rem;
    height: 6rem;
  }
}

.autoSlide .asContainer .asImageContainer .ecoNameBox .ecoNameText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asImageContainer .ecoNameBox .ecoNameText {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer .asImageContainer .ecoNameBox .ecoNameText {
    font-size: 2.6rem;
  }
}

.autoSlide .asContainer .asImageContainer .ecoSliderContainer {
  position: absolute;
  left: 95%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

@media only screen and (max-width: 30em) {
  .autoSlide .asContainer .asImageContainer .ecoSliderContainer {
    left: 85%;
  }
}

@media only screen and (max-width: 1200px) {
  .autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSliderWrapper .ecoSlide .ecoImage {
    display: block;
    width: 24rem;
    height: 24rem;
  }
}

@media only screen and (max-width: 48em) {
  .autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSliderWrapper .ecoSlide .ecoImage {
    width: 20rem;
    height: 20rem;
  }
}

/* 
.autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSliderWrapper {
  transform: scaleX(-1);
} */

/* .autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSliderWrapper .ecoSlide {
  opacity: 0;
}

.autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSliderWrapper .ecoSlide.slick-active {
  opacity: 1;
} */



/*
.autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSlide+.ecoSlide {
  position: relative;
  border: 1px solid green;
  z-index: 1 !important;
}
.autoSlide .asContainer .asImageContainer .ecoSliderContainer .ecoSlide+.ecoSlide {
  position: relative;
  border: 1px solid orange;
  z-index: 1 !important;
} */


.ecoSliderContainer .slick-track {
  display: flex;
}

.ecoSliderContainer .slick-list {
  overflow: visible;
}

.ecoSliderContainer .slick-slider {
  width: 500px !important;
  /* border: solid 1px red; */
  overflow: hidden;
  border-radius: 20rem 0 0 20rem;
}

@media only screen and (max-width: 1200px) {
  .ecoSliderContainer .slick-slider {
    width: 350px !important;
  }
}

@media only screen and (max-width: 48em) {
  .ecoSliderContainer .slick-slider {
    width: 380px !important;
  }
}


.ecoSliderContainer .slick-slide.slick-active {}

/*  
.ecoSliderContainer .slick-slide {
  transition: none !important;
  opacity: 1 !important;
}

.ecoSliderContainer .slick-active+.slick-slide {
  pointer-events: none !important;
}

.ecoSliderContainer .slick-active+.slick-slide+.slick-slide {
  z-index: 997 !important;
  pointer-events: none !important;
}

.ecoSliderContainer .slick-active .ecoImage {
  transform: translateX(0) !important;
}

.ecoSliderContainer .slick-active+.slick-slide .ecoImage {
  transform: translateX(50%) !important;
  transition: transform 0.2s ease-out !important;
  filter: brightness(0.7);
}

.ecoSliderContainer .slick-active+.slick-slide+.slick-slide .ecoImage {
  transform: translateX(100%) !important;
  transition: transform 0.2s ease-out !important;
  filter: brightness(0.5);
}


*/
/* 
.z999 {
  z-index: 1199 !important;
} */

.ecoNameBox .slick-track {
  text-align: center;
}

.showSliderText {
  opacity: 1 !important;
}

.showNavText {
  opacity: 1 !important;
  user-select: all !important;
}

.cardMove {
  animation: slideMove 0.2s forwards;
}

@keyframes slideMove {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  50% {
    opacity: 0;
    transform: translateX(200%);
  }

  100% {
    opacity: 1;
    transform: translateX(100%);
  }
}

#mute-video {
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  position: absolute;
  right: 2%;
  top: 3%;
  z-index: 10;
}

@media only screen and (max-width: 600px) {
  #mute-video {
    right: 4%;
  }
}

#mute-video svg {
  height: 3rem;
  width: 3rem;
}

#mute-video .muteSVG {
  display: none;
}

.muteBtnHide {
  display: none !important;
}

.muteBtnShow {
  display: block !important;
}

/* .ecoSliderWrapper {
  &>.ecoSlide:not(:first-child) {
    display: none;
  }
} */