* {
  font-family: "Chillax";
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

button {
  cursor: auto
}

:root {
  --bg-color: #1C1915;
  --font-xxl: 40px;
  --font-xl: 32px;
  --font-lg: 24px;
  --font-sm: 20px;
  --primary: #F1C841
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Extralight.otf);
  font-weight: 200;
  font-style: normal
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Light.otf);
  font-weight: 300;
  font-style: normal
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Regular.otf);
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Medium.otf);
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Semibold.otf);
  font-weight: 600;
  font-style: normal
}

@font-face {
  font-family: "Chillax";
  src: url(../Assets/fontFamaliy/chillax/Chillax-Bold.otf);
  font-weight: 700;
  font-style: normal
}

body {
  font-family: "Chillax";
  font-weight: 400;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  opacity: 0
}

.p-0 {
  padding: 0px !important
}

.title {
  font-weight: 500;
  font-size: var(--font-xxl);
  line-height: 48px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: capitalize;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
  background-clip: text;
  color: #fff0;
  width: max-content;
  margin: auto
}

.fade-out {
  animation: fadeOut 300ms ease-out forwards
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(.98)
  }
}

body.fade-in {
  animation: fadeIn 400ms ease-out forwards
}

@keyframes fadeIn {
  to {
    opacity: 1
  }
}

.section-1 {
  position: relative;
  height: auto
}

.bgImg {
  position: relative;
  min-height: 100vh
}

.bgImageOnly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../Assets/space-banner/bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center
}

.bgImageOnly video {
  width: 440px;
  height: 248px;
  margin-bottom: 300px;
  border: 1px solid #0c0800;
  box-shadow: 0 5px 10px 0 #0003
}

.personImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../Assets/space-banner/persons.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1
}

.topShadowImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 240px;
  background-image: url(../Assets/space-banner/top-shadow.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2
}

.bottomShadowImage {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 550px;
  background-image: url(../Assets/space-banner/bottom-shadow.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
padding: 24px 6px 0;
}

.logo-img {
  max-width: 100%;
  height: auto;
  display: block
}

@supports (-webkit-touch-callout:none) {
  .logo-img {
    transform: translateZ(0)
  }
}

.leftMenu {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px
}

.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  position: relative;
  z-index: 1;
  background: #0C080099;
  backdrop-filter: blur(8px);
  box-shadow: 1px 1px 5px 0 #FFC41699;
  height: 40px
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(192deg, rgb(241 200 65) 26%, rgb(255 35 165) 89%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none
}

.nav-item {
  padding: 16px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: capitalize;
  text-decoration: none;
  text-shadow: 1px 1px 5px #8D730C99
}

.nav-item.active {
  background-color: var(--primary);
  padding: 6px 16px;
  color: #1d0011;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: capitalize;
  cursor: default;
  text-shadow: none
}

.logoWrapper {
  position: relative;
  display: inline-block;
  overflow: visible
}

.gradientBorder {
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(192deg, rgb(241 200 65) 26%, rgb(255 35 165) 89%);
  backdrop-filter: blur(8px);
  box-shadow: 1px 1px 5px 0 #FFC41699;
  display: inline-block
}

.getInTouch {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 14px;
  font-size: 17px;
  text-transform: capitalize;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 5px 16px;
  background-color: #f1c841;
  color: #0c0800;
  font-weight: 500
}

.getInTouch a {
  text-decoration: none;
  color: inherit
}

.getInTouchWrapper {
  display: flex;
  align-items: center;
  gap: 16px
}

.menu-icon {
  display: none
}

.menu-icon p {
  color: var(--primary)
}

.streamBottom {
  position: absolute;
  bottom: 24px;
  padding: 0 96px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%
}

.artOfSlowGradientWrapper {
  position: relative;
  display: inline-block;
  border-radius: 32px;
  backdrop-filter: blur(8px);
  box-shadow: 1px 1px 5px 0 #FFC41699;
  z-index: 1
}

.artOfSlowGradientWrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(192deg, rgb(241 200 65) 26%, rgb(255 35 165) 89%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0
}

.artOfSlow {
  position: relative;
  z-index: 1;
  background-color: #0C080099;
  border-radius: 32px;
  padding: 32px
}

.artOfSlow p {
  color: #fff8eb;
  font-size: var(--font-xxl);
  font-weight: 500;
  line-height: 48.72px;
  letter-spacing: 1px
}

.videoP {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  line-height: 48px;
  color: var(--primary)
}

.artOfSlow span {
  display: block;
  color: #f1c841
}

.artOfSlow .transformationText {
  font-size: var(--font-sm);
  color: #fff8eb;
  font-weight: 200;
  padding-top: 16px;
  max-width: 500px;
  line-height: 32px
}

.ctaButtonGroup {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 24px
}

.quiz-card-wrapper {
  position: relative;
  display: flex;
  border-radius: 32px;
  backdrop-filter: blur(8px);
  box-shadow: 1px 1px 5px 0 rgb(241 200 65 / .6);
  z-index: 1;
  max-width: 415px;
  width: 100%
}

.quiz-card-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0
}

.quiz-card-content {
  position: relative;
  z-index: 1;
  background-color: rgb(12 8 0 / .6);
  border-radius: 32px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px
}

.left-side-text {
  flex: 1;
  font-family: 'Chillax', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: .01em;
  text-transform: capitalize;
  color: #F1C841
}

.right-side-circle-wrapper {
  flex-shrink: 0
}

.right-side-circle {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  border: 1px solid #130D00;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  transition: all 0.4s ease
}

.right-side-text {
  font-family: 'Chillax', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: .01em;
  text-transform: capitalize;
  color: #0C0800;
  text-decoration: none
}

.right-side-circle:hover {
  background: #130D00;
  border: 1px solid #F1C841;
  box-shadow: 1px 1px 5px 0 #F1C84199
}

.right-side-circle:hover .right-side-text {
  color: #F1C841;
  transition: color 0.4s ease
}

.mobileMenu i,
.menuClose i {
  color: #0c0800;
  font-size: 22px
}

.mobileMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  cursor: pointer
}

.mobileHeader,
.menuConetnt {
  display: none
}

.menuClose .menu-label {
  font-weight: 500;
  padding-top: 4px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 1px;
  color: var(--primary)
}

.menuClose {
  display: flex;
  flex-direction: column;
  align-items: center
}

.mobileMenuWrapper {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease
}

.mobileMenuWrapper.active {
  display: flex;
  opacity: 1;
  pointer-events: auto
}

.mobileHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
 padding: 24px 6px 0 24px;
}

.logoMenu p {
  color: var(--primary);
  font-weight: 500;
  font-size: 16px
}

.menuConetnt {
  display: flex;
  flex-direction: column;
  padding: 0 24px
}

.menuConetnt a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px
}

.menuConetnt .getintouch {
  margin-top: 32px;
  margin-bottom: 32px
}

.Updates,
.install,
.subscribe {
  color: var(--primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  padding-bottom: 8px
}

.install {
  margin-bottom: 16px
}

.subscribe {
  font-weight: 400
}

.subscribe a {
  display: inline;
  text-decoration: underline;
  font-weight: 400
}

.gradient-input-wrapper {
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 4px 6px 4px 16px;
  border: 1px solid #fff0;
  background: linear-gradient(#1C1915, #1C1915) padding-box, linear-gradient(222.82deg, #8d730c -.12%, #e40087 137.82%) border-box;
  margin-top: 16px;
  margin-bottom: 38px;
  width: fit-content;
  height: 40px
}

.gradient-input-wrapper input {
  border: none;
  background: #fff0;
  outline: none;
  color: #7c660b;
  font-size: 16px;
  flex: 1;
  width: 100%;
  max-width: 300px
}

.gradient-input-wrapper input::placeholder {
  color: var(--primary);
  opacity: 1
}

.arrow a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

.arrow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block
}

.arrow {
  color: var(--primary);
  font-size: 20px;
  margin-left: 8px
}

.follow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 46px
}

.follow p {
  color: var(--primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1px
}

.follow i {
  font-size: 23px;
  color: var(--primary)
}

.store-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 40px
}

.gradientBorderWrapper {
  position: relative;
  display: inline-block;
  padding: 2px;
  border-radius: 16px;
  background: linear-gradient(230.12deg, #8d730c 24.68%, #e40087 112.86%)
}

.btnPrimary,
.btnSecondary {
  font-family: "Chillax";
  border-radius: 16px;
  font-size: var(--font-sm);
  font-weight: 500;
  padding: 8px 23px;
  text-decoration: none
}

.btnPrimary {
  position: relative;
  z-index: 1;
  text-transform: capitalize;
  background-color: #f1c841;
  color: #0c0800;
  font-family: "Chillax", sans-serif;
  border-radius: 16px;
  border: 1px solid rgb(221 33 33 / .6);
  cursor: pointer;
  padding: 8px 23px;
  overflow: hidden;
  transition: color 0.3s ease
}

.btnPrimary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(191deg, #F1C841 24.68%, #FF23A5 112.86%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1
}

.btnPrimary:hover::after {
  opacity: 1
}

.btnPrimary:hover {
  color: #130D00
}

.btnSecondary:hover {
  background-color: #FFC416;
  color: #130D00;
  font-weight: 500;
  transition: all 0.4s ease
}

.btnSecondary {
  position: relative;
  font-family: "Chillax";
  background-color: #fff0;
  color: #f1c841;
  font-weight: 400;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 1px 1px 5px 0 #8d730c99;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
  border: none
}

.btnSecondary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(192deg, rgb(241 200 65) 26%, rgb(255 35 165) 89%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease
}

.btnSecondary>* {
  position: relative;
  z-index: 2
}

.section-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 225px 0;
  margin-top: 96px
}

.slowArt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.slowArtIntro {
  font-weight: 500;
  font-size: var(--font-xxl);
  max-width: 800px;
  letter-spacing: 1px;
  line-height: 48px;
  text-align: center;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
  background-clip: text;
  color: #fff0;
  margin-top: 41px
}

.surveyPrompt {
  font-weight: 500;
  font-size: var(--font-lg);
  text-align: center;
  color: var(--primary);
  padding-top: 30px;
  line-height: 32px;
  text-transform: capitalize;
  max-width: 400px
}

.surveyBtn {
  position: relative;
  padding: 8px 23px;
  background-color: #f1c841;
  font-family: 'Chillax', sans-serif;
  font-size: 18px;
  color: #0C0800;
  font-weight: 500;
  border-radius: 16px;
  border: none;
  z-index: 1;
  overflow: hidden;
  text-transform: capitalize;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 37px;
  text-decoration: none
}

.surveyBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  z-index: -1
}

.surveyBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(191deg, #F1C841 24.68%, #FF23A5 112.86%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1
}

.surveyBtn:hover::after {
  opacity: 1
}

.surveyBtn:hover {
  color: #130D00
}

.section-3 {
  padding: 75px 0 80px 130px;
  margin-top: 100px
}

.wellnessHeading {
  display: flex;
  justify-content: center;
  text-align: center
}

.wellnessHeading p {
  font-size: var(--font-xxl);
  color: #7c660b;
  max-width: 600px;
  line-height: 1.4;
  font-weight: 500
}

.wellnessLayout {
  display: flex;
  justify-content: end;
  align-items: stretch;
  gap: 56px;
  margin-top: 80px;
  overflow: hidden
}

.section-3 .gradientBorderWrapper {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  padding: 1px;
  border-radius: 25px;
  display: block;
  margin-bottom: 45px;
  width: 100%
}

.cardBox {
  background-color: #1C1915;
  border-radius: 24px;
  padding: 30px;
  color: #0c0800;
  font-size: 18px;
  width: 387px
}

.gradientBorderWrapper-sm {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  padding: 1px;
  border-radius: 26px;
  display: inline-block
}

.wellnessTitle {
  border-radius: 24px;
  padding: 15px 24px;
  background-color: var(--primary)
}

.wellnessTitle p {
  font-size: 26px;
  color: #0C0800;
  font-weight: 500;
  line-height: 40px
}

.wellnessP p {
  padding-top: 24px;
  font-size: var(--font-lg);
  color: var(--primary);
  font-weight: 500;
  line-height: 32px
}

.wellnessImgWrapper {
  position: relative;
  display: inline-block;
  border-top-left-radius: 64px;
  border-bottom-left-radius: 64px;
  overflow: visible;
  padding: 1px;
  width: 864px;
  height: 796px
}

.wellnessImgWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(100% - 20px);
  border-top-left-radius: 64px;
  border-bottom-left-radius: 64px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  z-index: -1;
  padding: 3px;
  -webkit-mask-image: linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0)
}

.wellnessImgWrapper img {
  display: block;
  width: 864px;
  height: 794px;
  object-fit: cover;
  border-top-left-radius: 64px;
  border-bottom-left-radius: 64px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 1
}

.section-4 {
  margin-top: 293px
}

.excellenceHeading {
  display: flex;
  justify-content: center;
  text-align: center
}

.excellenceHeading p {
  font-size: 40px;
  color: var(--primary);
  font-weight: 500
}

.section-4 .gradientBorderWrapper {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  padding: 1px;
  border-radius: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 120px auto;
  width: fit-content
}

.excellenceCards {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  background-color: #1C1915;
  border-radius: 64px
}

.excellenceCard {
  padding: 32px;
  background-color: var(--primary);
  border-radius: 32px
}

.excellenceCard:nth-child(2) {
  height: fit-content
}

.excellenceCardBorder {
  background: linear-gradient(222.82deg, #8D730C -.12%, #E40087 137.82%);
  padding: 1px;
  border-radius: 24px;
  display: inline-block
}

.excellenceCardTitle {
  background-color: #F1C841;
  border-radius: 24px;
  width: 124px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center
}

.excellenceCardTitle p {
  font-size: var(--font-xl);
  line-height: 32px;
  font-weight: 500;
  color: #130D00
}

.excellenceCardp p {
  font-size: var(--font-sm);
  color: #130D00;
  font-weight: 400;
  max-width: 300px;
  padding-top: 16px;
  line-height: 32px;
  font-weight: 500
}

.excellenceDots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--primary);
  width: 140px;
  padding: 16px;
  border-radius: 24px;
  margin: 0 auto;
  display: none
}

.excellenceDots div {
  height: 8px;
  width: 8px;
  background-color: var(--primary);
  border-radius: 100px;
  transition: width 0.3s ease
}

.excellenceDots div.active {
  width: 40px
}

.dot1 {
  width: 40px
}

.slowdownMessage {
  text-align: center;
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--primary);
  padding-bottom: 97px;
  line-height: 36px
}

.section-5 {
  margin-top: 387px
}

.scienceSection {
  display: flex;
  align-items: stretch;
  gap: 64px
}

.scienceImgBorder {
  border-top-right-radius: 68px;
  border-bottom-right-radius: 68px;
  background: linear-gradient(#fff8eb, #fff8eb) padding-box, linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%) border-box;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: #fff0;
  display: inline-block;
  height: 988px
}

.scienceImg {
  border-top-right-radius: 68px;
  border-bottom-right-radius: 68px;
  overflow: hidden
}

.scienceImg video {
  width: 768px;
  height: 986px;
  object-fit: cover;
  display: block
}

.scienceContentTitle h2 {
  font-size: var(--font-xxl);
  font-weight: 500;
  color: var(--primary);
  text-align: left;
  width: auto
}

.scienceContent span {
  display: block
}

.scienceContentpara p {
  font-size: var(--font-lg);
  color: var(--primary);
  font-weight: 300;
  max-width: 526px;
  margin-top: 42px;
  line-height: 36px
}

.scienceContentpara b {
  font-weight: 500
}

.scienceCardsWrapper {
  overflow-x: hidden;
  margin-top: 40px
}

.scienceCards {
  display: flex
}

.scienceContentCards1 {
  width: 550px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 46px
}

.scienceCardLink {
  font-size: 16px;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 1px
}

.scienceCardLink span {
  font-size: 25px
}

.scienceCardLinkWrapper {
  margin-top: 10px
}

.scienceCardGradientWrapper {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  padding: 1px;
  border-radius: 32px;
  display: inline-block;
  box-shadow: 1px 1px 5px 0 #8d730c99
}

.scienceCard1 {
  cursor: pointer;
  position: relative;
  min-height: 170px;
  width: 240px;
  border-radius: 32px;
  background-color: #1C1915;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.scienceCardLabel {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1C1915;
  border-bottom-right-radius: 24px;
  padding: 5px 21px;
  font-size: 16px;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-top: none;
  border-left: none
}

.scienceCardInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center
}

.scienceCardTitle {
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  margin: 0
}

.scienceCardSubtitle {
  font-size: 12px;
  color: var(--primary);
  margin: 0
}

.scienceContent .surveyBtn {
  margin-top: 99px;
  display: inline-block
}

.section-6 {
  margin-top: 357px
}

.calmByTitle {
  font-weight: 500;
  font-size: var(--font-xxl);
  color: var(--primary);
  text-align: center;
  padding-top: 82px
}

.calmByP {
  font-weight: 400;
  font-size: 32px;
  color: var(--primary);
  text-align: center;
  padding-top: 52px;
  line-height: 48px;
  letter-spacing: 1px;
  text-transform: capitalize
}

.clamSpan {
  text-transform: math-auto
}

.calmByCards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px;
  margin: 80px auto;
  border-radius: 64px;
  max-width: fit-content;
  width: 100%;
  box-sizing: border-box;
  justify-items: center;
  background: linear-gradient(#1C1915, #1C1915) padding-box, linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%) border-box;
  border: 1px solid #fff0
}

.card1,
.card2,
.card3,
.card4 {
  width: 294px;
  border-radius: 32px;
  padding: 30px;
  background: linear-gradient(#1C1915, #1C1915) padding-box, linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%) border-box;
  border: 1px solid #fff0;
  opacity: .95;
  transform: scale(1);
  transition: background 0.4s ease, border 0.4s ease, opacity 0.4s ease, transform 0.4s ease
}

.card1 {
  height: 437px
}

.card2,
.card3 {
  height: 405px
}

.card4 {
  height: 373px
}

.curate {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 24px;
  gap: 10px;
  background: linear-gradient(#F1C841, #F1C841) padding-box, linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%) border-box;
  border: 2px solid #fff0;
  box-shadow: 0 0 0 1px #130D00;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline-offset: -2px;
  transition: outline-width 0.3s ease, border-color 0.3s ease
}

.curate p {
  font-weight: 500;
  font-size: 28px;
  color: #130D00;
  line-height: 40px
}

.card1P {
  font-weight: 500;
  font-size: var(--font-lg);
  color: var(--primary);
  padding-top: 24px;
  line-height: 32px
}

.catd1P2 {
  font-weight: 400;
  font-size: 18px;
  color: var(--primary);
  padding-top: 24px;
  line-height: 32px
}

.card1P,
.catd1P2 {
  transition: color 0.4s ease
}

.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  opacity: 1;
  transform: scale(.985)
}

.card1:hover .curate,
.card2:hover .curate,
.card3:hover .curate,
.card4:hover .curate {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  box-shadow: none;
  border-color: #130D00;
  transition: border 0.3s ease
}

.curate-icon path,
.curate-icon rect {
  transition: all 0.3s ease
}

.card4:hover .curate-icon path {
  stroke: #130D00
}

.card4:hover .curate-icon rect {
  fill: #130D00;
  stroke: #130D00
}

.card1:hover .card1P,
.card2:hover .card1P,
.card3:hover .card1P,
.card4:hover .card1P,
.card1:hover .catd1P2,
.card2:hover .catd1P2,
.card3:hover .catd1P2,
.card4:hover .catd1P2 {
  color: #130D00;
  font-weight: 500
}

.stillness {
  font-weight: 500;
  font-size: var(--font-xl);
  color: #7c660b;
  text-align: center;
  margin-top: 97px;
  margin-bottom: 92px
}

.section-7 {
  margin-top: 416px
}

.expectationSection {
  display: flex;
  justify-content: end;
  align-items: stretch;
  gap: 64px;
  flex-wrap: wrap
}

.expectationContent {
  position: relative;
  padding: 64px 32px 0 64px;
  border-radius: 64px;
  height: 100%;
  max-width: 768px;
  box-sizing: border-box;
  background-color: #1C1915;
  z-index: 1;
  overflow: hidden
}

.expectationContent::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 64px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1
}

.expectationImgBorder {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  border-radius: 64px 0 0 64px;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #fff0;
  margin-right: 0;
  width: 100%;
  max-width: 768px;
  max-height: 880px;
  box-sizing: border-box
}

.expectationImgInner {
  background-color: #1C1915;
  border-radius: inherit;
  overflow: hidden;
  width: 100%;
  height: 100%
}

.expectationImgInner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit
}

.contentHeading {
  color: var(--primary);
  font-size: var(--font-xxl);
  font-weight: 500;
  padding-top: 16px;
  padding-bottom: 64px;
  text-align: left
}

.contentHeading span {
  display: block;
  color: var(--primary)
}

.healthContent h3 {
  color: var(--primary);
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 16px;
  padding-top: 16px;
  letter-spacing: 1px
}

.healthContentList {
  padding-top: 33px
}

.expectationSection .healthContentList li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  color: var(--primary);
  line-height: 24px;
  font-weight: 500;
  font-size: 18px;
  padding-bottom: 24px
}

.plug-play-section {
  text-align: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 230px;
  margin-bottom: 300px
}

.plug-play-section h1 {
  font-size: var(--font-xxl);
  font-weight: 500;
  line-height: 48.72px;
  letter-spacing: 1px;
  color: var(--primary);
  text-transform: capitalize;
  margin-bottom: 50px
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  justify-content: center;
  margin-bottom: 32px
}

.feature-border {
  border-radius: 32px;
  background: linear-gradient(222.82deg, #8d730c -.12%, #e40087 137.82%);
  padding: 1px
}

.feature-card {
  border-radius: 32px;
  background-color: #1C1915;
  background-clip: padding-box;
  height: 239px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s ease-in-out;
  will-change: background-color;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background-color 0.3s ease, box-shadow 0.3s ease
}

.feature-card p {
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--primary);
  margin: 0;
  padding: 0
}

.icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px
}

.icon .img1,
.icon .img2 {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center
}

.icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.icon .img1 {
  opacity: 1;
  z-index: 2
}

.icon .img2 {
  opacity: 0;
  z-index: 1
}

.feature-card:hover .icon .img1 {
  opacity: 0
}

.feature-card:hover .icon .img2 {
  opacity: 1
}

.feature-card:hover {
  background-color: var(--primary);
  box-shadow: 1px 1px 5px 0 #8d730c99
}

.feature-card:hover {
  background-color: var(--primary);
  box-shadow: 1px 1px 5px 0 #8d730c99
}

.feature-card:hover p {
  color: #130D00
}

.whatdoweserve {
  margin-bottom: 232px
}

.whatServerSection {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden
}

.hotelReception {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1
}

.whatServerSection video {
  position: absolute;
  top: 35%;
  left: 52%;
  width: 375px;
  height: 211px;
  border: 1px solid #0C0800;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 2
}

.wellness-video {
  position: absolute;
  top: 35%;
  left: 52%;
  width: 375px;
  height: 211px;
  border: 1px solid #0C0800;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 2
}

.location-video {
  position: absolute;
  border: 1px solid #0C0800;
  object-fit: cover;
  z-index: 2
}

.whatserve-text {
  position: absolute;
  top: 4%;
  left: 50%;
  max-width: 589px;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  color: var(--primary);
  text-align: center;
  margin: 0;
  z-index: 4
}

.whatServeUpperShadow,
.whatServeDownShadow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 227px;
  z-index: 3
}

.whatServeUpperShadow {
  top: 0
}

.whatServeDownShadow {
  bottom: 0
}

.location-nav-wrapper {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5
}

.location-nav {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #f1c841;
  border-radius: 32px;
  background-color: #261d0399;
  backdrop-filter: blur(8px);
  flex-wrap: nowrap;
  cursor: pointer
}

.location-item {
  flex: 0 0 auto;
  font-size: 18px;
  white-space: nowrap;
  padding: 16px;
  border-radius: 32px;
  list-style: none;
  color: #f1c841;
  font-weight: 500;
  line-height: 24px
}

.location-item.active {
  background-color: #f1c841;
  color: #0c0800;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer
}

.location-item:not(.active):hover {
  background-color: #f1c841;
  color: #0c0800;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer
}

#backgroundImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease-in-out
}

.fade-out {
  opacity: 1
}

.slow-section {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.slow-section .icon {
  margin-bottom: 40px
}

.text-lines {
  display: flex;
  flex-direction: column;
  gap: 50px
}

.line {
  font-size: var(--font-xxl);
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 1px;
  text-transform: capitalize;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
  background-clip: text;
  color: #fff0
}

.partner-host-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-height: 100vh;
  max-width: 1235px;
  margin: 188px auto 0;
  padding: 15px
}

.gradient-border {
  padding: 1px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  max-width: 960px;
  width: 100%
}

.gradient-border.left {
  border-radius: 64px 0 0 64px;
  padding-right: 0
}

.gradient-border.left .info-card {
  border-radius: 64px 0 0 64px;
  padding-right: 0;
  height: 100%
}

.gradient-border.right {
  border-radius: 0 64px 64px 0
}

.gradient-border.right .info-card {
  border-radius: 0 64px 64px 0;
  padding-right: 0;
  height: 100%
}

.info-card {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #1C1915;
  border-radius: 30px;
  padding: 0 40px;
  overflow: hidden;
  position: relative
}

.column {
  flex: 1;
  padding: 0 32px;
  min-width: 300px;
  position: relative
}

.border-gradient {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 1px
}

.border-gradient-right {
  border-right: 1px solid;
  border-image-slice: 1;
  border-width: 1px
}

.column h4 {
  font-weight: 500;
  font-size: var(--font-xxl);
  line-height: 48px;
  letter-spacing: 1px;
  text-align: left;
  text-transform: capitalize;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff0;
  background-clip: text;
  color: #fff0;
  margin-bottom: 40px;
  margin-top: 100px
}

.column p {
  font-size: 32px;
  margin-bottom: 40px;
  color: var(--primary);
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 1px
}

.healthContentList {
  list-style: none;
  padding-left: 0;
  margin-bottom: 40px
}

.partner-host-section .healthContentList li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--primary);
  margin-bottom: 32px;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 1px
}

.column .infoBtn {
  margin-bottom: 90px
}

.infoBtn {
  position: relative;
  padding: 8px 23px;
  background-color: #f1c841;
  font-family: 'Chillax', sans-serif;
  font-size: 18px;
  color: #0C0800;
  font-weight: 500;
  border-radius: 16px;
  border: none;
  z-index: 1;
  overflow: hidden;
  text-transform: capitalize;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 37px;
  display: inline-block;
  text-decoration: none
}

.infoBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  z-index: -1
}

.gradient-border:hover .info-card {
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  color: #130D00;
  transition: background-color 0.5sx ease, color 0.5s ease
}

.gradient-border:hover .info-card .column p,
.gradient-border:hover .info-card .healthContentList li {
  color: #130D00;
  transition: color 0.5s ease-out
}

.gradient-border:hover .infoBtn {
  background-color: #130D00;
  color: #FFC416
}

.gradient-border:hover .infoBtn:hover {
  background-color: #7c660b;
  color: #EBFBFF
}

.gradient-border:hover .info-card .column h4 {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #130D00;
  transition: color 0.5s ease-out
}

.gradient-border:hover .healthContentList li img {
  filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(10deg) brightness(90%);
  transition: filter 0.3s ease
}

.footer-section {
  background: #1C1915;
  padding: 196px 32px 109px 32px
}

.footer-container {
  max-width: 1235px;
  margin: 0 auto
}

.footer-gradient {
  background: #1C1915;
  border-radius: 64px;
  position: relative;
  padding: 56px 53px
}

.footer-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  border-radius: 64px;
  background: linear-gradient(233.53deg, #8d730c 11.3%, #e40087 141.56%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0
}

.footer-content {
  position: relative;
  z-index: 2
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap
}

.footer-divider {
  position: relative;
  height: 1px;
  background: none;
  border: none;
  margin: 32px 0;
  padding: 0
}

.footer-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%)
}

.follow-us {
  display: flex;
  gap: 19px
}

.follow-us p {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
  line-height: 32px;
  letter-spacing: 1px
}

.follow-us img {
  object-fit: contain
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 220px;
  margin-top: 56px;
  padding: 24px 0
}

.footer-heading {
  font-size: var(--font-xl);
  line-height: 35px;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--primary);
  text-align: left
}

.footer-links li {
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--primary);
  list-style: none;
  font-weight: 500
}

.platform-list li {
  font-weight: 300;
  margin-bottom: 12px;
  line-height: 32px;
  font-size: 16px;
  color: var(--primary);
  list-style: none
}

.footer-links li a,
.getintouch {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1px
}

.footer-col p a {
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1px
}

.footer-signup-title {
  line-height: 24px;
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
  padding-top: 32px;
  padding-bottom: 8px
}

.getintouch a {
  text-decoration: none;
  padding-top: 32px
}

.footer-subscribe {
  color: var(--primary);
  margin-bottom: 16px;
  width: 205px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 1px;
  font-size: 14px;
  padding-top: 8px
}

.email-subscribe {
  -webkit-font-smoothing: antialiased;
  position: relative;
  align-items: center;
  padding: 1px;
  background: linear-gradient(230.12deg, #F1C841 24.68%, #FF23A5 112.86%);
  width: fit-content;
  position: relative;
  display: flex;
  border-radius: 12px
}

.email-subscribe input,
.email-subscribe button {
  border: none;
  outline: none;
  background-color: #fff0;
  font-size: 16px;
  line-height: 32px;
  height: 100%;
  color: var(--primary);
  appearance: none;
  -webkit-appearance: none
}

.email-subscribe input {
  border: none;
  outline: none;
  border-radius: 12px;
  background-color: #1C1915;
  color: #fff;
  font-size: 14px;
  width: 247px;
  height: 40px;
  display: block;
  flex: 1;
  padding: 0 0 0 8px;
  min-width: 0;
  border: none
}

.email-subscribe input::placeholder {
  color: var(--primary);
  opacity: 1;
  font-family: "Chillax", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px
}

.email-submit-link {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff0;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.email-subscribe button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block
}

.footer-availability {
  color: var(--primary);
  font-size: 16px;
  padding-bottom: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 1px
}

.footer-apps {
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 32px;
  line-height: 32px;
  letter-spacing: 1px
}

.app-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px
}

.app-store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 45px;
  width: 170px;
  padding: 4px 10px;
  background-color: #ede8d0;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--primary);
  color: var(--primary);
  width: fit-content
}

.app-store-btn img {
  height: 25px;
  width: auto
}

.fa-solid,
.fas {
  font-weight: 900;
  font-size: 25px
}

.app-store-btn span {
  font-size: 12px
}

.app-store-btn strong {
  font-size: 18px;
  font-weight: 600;
  display: block
}

.footer-links-bottom {
  display: flex;
  gap: 16px
}

.footer-col .footer-subscribe a {
  cursor: pointer;
  font-weight: 300;
  color: var(--primary);
  text-decoration: underline;
  font-size: 14px
}

.footer-bottom {
  display: flex;
  justify-content: start;
  gap: 36px
}

.footerBottom {
  display: flex;
  gap: 32px
}

.footer-bottom img {
  width: 52px;
  height: auto;
  object-fit: contain
}

.footerBottom p {
  color: var(--primary);
  font-weight: 300;
  line-height: 32px
}

.footer-links-bottom a {
  color: var(--primary);
  text-decoration: underline;
  line-height: 32px;
  cursor: pointer;
  font-weight: 300
}

a.scienceCardWrapper {
  text-decoration: none
}

.scienceCardWrapper:hover .scienceCardGradientWrapper .scienceCard1 {
  background-color: var(--primary);
  color: #fff
}

.scienceCardWrapper:hover .scienceCardGradientWrapper .scienceCardLabel {
  background-color: #fff0;
  color: #130D00;
  border-color: #130D00;
  font-weight: 500
}

.scienceCardInner .img1,
.scienceCardInner .img2 {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease-in-out;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.scienceCardInner {
  position: relative
}

.scienceCardInner .img1 {
  opacity: 1;
  z-index: 2
}

.scienceCardInner .img2 {
  opacity: 0;
  z-index: 1
}

.scienceCardWrapper:hover .img1 {
  opacity: 0
}

.scienceCardWrapper:hover .img2 {
  opacity: 1
}

.partner-host-section div {
  height: unset
}

.swiper-pagination {
  margin-top: 16px
}

@media (max-width:991px) {
  .plugplay-swiper {
    width: 100%;
    padding-bottom: 32px;
    display: none
  }

  .plugplay-swiper {
    display: block
  }

  .features-grid {
    display: none
  }
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--primary);
  padding: 16px;
  border-radius: 24px;
  width: fit-content;
  margin: 47px auto
}

.swiper-pagination-bullet {
  background: var(--primary);
  border: 2px solid var(--primary);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  opacity: 1;
  transition: all 0.3s ease
}

.swiper-pagination-bullet-active {
  background-color: var(--primary);
  width: 40px;
  border-radius: 12px
}

@media (min-width:992px) {
  .swiper-pagination {
    display: none
  }
}

.no-controls::-webkit-media-controls {
  display: none !important
}

.no-controls::-moz-media-controls {
  display: none !important
}

.no-controls {
  pointer-events: none
}