/*=== google fonts ===*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

:root {
    --primary-font: "Sora", sans-serif;
    --bg-black: #000;
    --bg-white: #fff;
    --white: #fff;
    --black: #000;
    --primary-color: #111111;
    --eerie-black: #1A1A1A;
    --text-color: #CCCCCC;
    --anti-flash-white: #EEEEEE;
    --caribbean-green: #20E3B2;
    --gainsboro: #DDDDDD;
    --grape: #7B1FA2;
    --blue-crayola: #0075FF;
}

/*=== Basic css ===*/
html,
body,
header,
footer,
main,
nav,
section,
div,
menu,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
button {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

ol,
ul {
    list-style: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus {
    outline: none;
}

a {
    text-decoration: none;
    display: inline-block;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    max-width: 100%;
}

body {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 400;
    background: var(--primary-color);
    color: var(--white);
}

body.menu-open {
    overflow: hidden;
}

.scrolltotop {
    width: 48px;
    height: 48px;
    line-height: 34px;
    border-radius: 9999px;
    background: var(--caribbean-green);
    text-align: center;
    font-size: 16px;
    color: var(--eerie-black);
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: none;
    animation: lab_top_up 5s linear infinite;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid var(--caribbean-green);
    z-index: 8888;
    -webkit-animation: lab_top_up 5s linear infinite;
}

.scrolltotop i {
    color: var(--eerie-black);
    padding-top: 14px;
}

.container {
    padding-left: 16px;
    padding-right: 16px;
}

.section-space {
    padding: 80px 0;
}

.title-large {
    color: var(--white);
    font-size: 72px;
    font-weight: 300;
    line-height: 120%;
}

.title-medium {
    color: var(--white);
    font-size: 48px;
    font-weight: 400;
    line-height: 150%;
}

.title-small {
    color: var(--white);
    font-size: 28px;
    font-weight: 300;
    line-height: 125%;
}

.title-small strong {
    font-weight: 700;
}

.title-extra-small {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
}

.text-14 {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
}

.text-16 {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 145%;
}

.text-18 {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 400;
    line-height: 145%;
}

.text-20 {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 300;
    line-height: 130%;
}

.text-20 strong {
    font-weight: 700;
}

.text-28 {
    color: var(--white);
    font-size: 28px;
    line-height: 125%;
}

.text-48 {
    color: var(--white);
    font-size: 48px;
    line-height: 150%;
}

.text-72 {
    color: var(--white);
    font-size: 72px;
    line-height: 120%;
}

.button {
    font-size: 16px;
    font-weight: 600;
    color: var(--eerie-black);
    padding: 14px 32px;
    background: var(--bg-white);
    border-radius: 16px;
    position: relative;
    z-index: 9;
    transition: 0.3s;
    overflow: hidden;
    white-space: nowrap;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px
}

.button:hover {
    color: var(--eerie-black);
    background: var(--caribbean-green);
}

.bg-conic {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 100%;
    filter: blur(300px);
}

.bg-conic .hero-circle-sa {
    position: absolute;
    opacity: 1;
    filter: blur(60px);
}

.base-card {
    background-color: var(--eerie-black);
    padding: 32px;
    border-radius: 32px;
}

/*=== Header area start ===*/

#headerArea {
    padding: 16px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
}

#headerArea .container {
    max-width: 1374px;
}

#headerArea.full-height {
    height: 100vh; /* fallback */
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(17, 17, 17, 0.75);
    transition: all 0.3s ease;
}

#headerArea.full-height .container, #headerArea.full-height .header-navigation {
    height: 100%;
}

.header-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 12px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--primary-color);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -ms-border-radius: 28px;
    -o-border-radius: 28px;
    transition: all 0.3s ease;
}

.header-logo {
    flex: none;
}

.header-logo img {
    max-height: 36px;
    margin-left: 12px;
}

.header-navigation-link ul, #mobileMenu ul {
    display: flex;
    align-items: center;
}

.header-navigation-link ul li a, #mobileMenu ul li a {
    color: var(--gainsboro);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.header-navigation-link ul li a {
    margin-left: 32px;
}

.header-navigation-link ul li a:hover, #mobileMenu ul li a:hover {
    color: var(--caribbean-green);
}

/* active nav link */
.header-navigation-link ul li a.active, #mobileMenu ul li a.active {
    color: var(--caribbean-green);
}

.header-island {
    display: flex;
    align-items: center;
    width: 100%;
}

#mobileMenu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#mobileMenu.show {
    height: 100%;
}

#mobileMenu ul {
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    height: 100%;
}

#mobileMenu div, #mobileMenu div .button {
    display: flex;
    width: 100%;
    justify-content: center;
}

#mobileMenu ul, #mobileMenu div {
    opacity: 0;
    max-height: 0;
    transition: max-height 0s ease, opacity 0s ease;
}

#mobileMenu.show ul, #mobileMenu.show div {
    opacity: 1;
    max-height: 100%;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

#mobileMenu ul li a, #mobileMenu a.button {
    font-size: 18px;
}

#headerArea #mobileMenu a {
    display: none;
}

/*=== LP Animated Circle ===*/

.main-circle-sa {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding: 4.2%;
}

.progressbar-container {
    padding: 4.2%;
}

.progressbar-container svg {
    transform: rotate(-90deg);
}

.progressbar-container circle {
    fill: none;
    stroke: url(#imagePattern);
    stroke-width: 82.5;
    stroke-dasharray: 1466 1466;
    stroke-dashoffset: -1466;
    animation: progressbarFillAnimation 1.5s ease-out forwards;
}

@keyframes progressbarFillAnimation  {
    to {
        stroke-dashoffset: -263.88; /* 82%: 1466 - (1466×0.82) = 293.2 */
    }
}

.header-right {
    margin-left: auto;
    padding-left: 32px;
}

.header-right ul {
    display: flex;
    align-items: center;
}

.header-right ul li {
    display: flex;
}

.header-right ul li:nth-of-type(1) a {
    color: var(--gainsboro);
    font-size: 16px;
    font-weight: 600;
    margin-right: 24px;
}

.header-right ul li:nth-of-type(1) a:hover {
    color: var(--caribbean-green);
}

#hamburgerBtn {
    cursor: pointer;
    margin-left: auto;
    margin-right: 11px;
}

#hamburgerBtn span {
    width: 28px;
    height: 3px;
    border-radius: 9999px;
    display: block;
    background: var(--bg-white);
    transition: 0.3s all ease;
    transform-origin: center;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;
}

#hamburgerBtn span:nth-of-type(2) {
    margin: 6px 0;
}

#hamburgerBtn:hover span {
    background: var(--caribbean-green);
}

#hamburgerBtn.active span:nth-child(1) {
    transform: rotate(45deg) translate(6.4px, 6.4px);
}

#hamburgerBtn.active span:nth-child(2) {
    opacity: 0;
}
#hamburgerBtn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6.4px, -6.4px);
}

/*=== main content start ===*/

.main-content {
    position: relative;
    overflow: hidden;
}

/*=== science page start ===*/

.science-area {
    padding: 173px 0 20px;
    position: relative;
    z-index: 9;
}

.science-area::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.science-area .title-large {
    font-size: 64px;
    max-width: 624px;
}

.science-area .hero-circle-sa {
    bottom: -50%;
}

.science-item {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.science-item-right {
    width: 480px;
    text-align: right;
    margin-top: auto;
}

.science-item-right p {
    color: var(--gainsboro);
}

.science-middle {
    max-width: 790px;
    padding: 48px 0;
}

.science-middle p {
    color: var(--gainsboro);
}

.science-item-second {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 8px;
}

.science-item-second-inner a {
    padding: 24px;
    background: var(--eerie-black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 238px;
    position: relative;
    overflow: hidden;
    z-index: 9;
    margin-bottom: 20px;
    box-shadow: 0 0 1px 1px inset rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    transition: 0.4s;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.science-item-second-inner a .bg-conic {
    opacity: 0;
    transition: 0.4s;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
    transform: scale(0.25);
}

.science-item-second-inner a:hover .bg-conic {
    opacity: 1;
}

.science-item-second-inner div:nth-of-type(2) {
    width: 100%;
    text-align: right;
}

.science-item-second-inner h3 {
    color: var(--white);
}

.science-item-second-inner .service-item-btn {
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
    width: 48px;
    height: 48px;
    padding: 0 8px;
    margin-left: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    -ms-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
}

.science-item-second-inner .service-item-btn small {
    font-size: 14px;
    font-weight: 600;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
}

.science-item-second-inner .service-item-btn i {
    font-size: 14px;
}

.science-item-second-inner a:hover .service-item-btn {
    width: 164px;
    padding: 0 30px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}

.science-item-second-inner a:hover .service-item-btn small {
    max-width: 90px;
    transition-delay: 0.1s;
    opacity: 1;
    visibility: visible;
    padding-right: 12px;
}

.science-area .mySwiper .swiper-slide {
    width: 240px;
}

/*=== sharks page start ===*/

.sharks-area {
    padding: 80px 0;
    position: relative;
    z-index: 91;
}

.sharks-content {
    display: flex;
    flex-wrap: wrap;
}

.sharks-left {
    width: 480px;
}

.sharks-right {
    width: calc(100% - 480px);
    padding-left: 32px;
}

.sharks-right p {
    margin-bottom: 20px;
}

.sharks-right p:last-of-type {
    margin-bottom: 0;
}

/*=== biological page start ===*/

.biological-area {
    padding: 80px 0;
    position: relative;
    z-index: 9;
}

.biological-upper {
    margin-bottom: 64px;
}

.biological-item {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 30px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}

.biological-item-image {
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.biological-item-image img {
    width: 100%;
}

.biological-item-content {
    text-align: center;
    padding: 40px 0 24px;
    min-height: 226px;
}

.biological-item-content h2 {
    margin-bottom: 24px;
}

.biological-item-content p {
    line-height: 170%;
    max-width: 264px;
    margin: 0 auto;
}

.biological-bottom {
    max-width: 584px;
    margin-top: 34px;
}

.biological-area .hero-circle-sa {
    top: -120px;
}

.biological-area .mySwiper .swiper-slide {
    width: 330px;
}

/*=== hallmarks page start ===*/

.hallmarks-area {
    position: relative;
    z-index: 9;
}

.hallmarks-content .row {
    --bs-gutter-x: 48px;
}

.hallmarks-content {
    padding-top: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hallmarks-upper {
    margin-bottom: 48px;
}

.hallmarks-upper h2 {
    color: var(--caribbean-green);
    font-size: 36px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 16px;
}

.hallmarks-item {
    margin-bottom: 48px;
}

.hallmarks-item .title-extra-small {
    font-weight: 300;
    color: var(--anti-flash-white);
    margin-bottom: 24px;
}

.hallmarks-item-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hallmarks-item-image {
    width: 200px;
    position: relative;
    z-index: 9;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    overflow: hidden;
}

/* .hallmarks-item-image::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    background: conic-gradient(from 25deg at 50% 50.38%, #7B1FA2 0deg, #20E3B2 109.0384590625763deg, #0075FF 256.1538362503052deg, #7B1FA2 360deg);
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
} */

.hallmarks-item-image img {
    width: 100%;
}

.hallmarks-item-content {
    width: calc(100% - 200px);
    padding-left: 32px;
}

/*=== aging page start ===*/

.aging-area {
    padding: 80px 0 16px;
    z-index: 0;
    position: relative;
}

.aging-area .hero-circle-sa {
    left: 10%;
    top: -100%;
    scale: 1.5;
}

.aging-content .row {
    --bs-gutter-x: 64px;
}

.aging-item {
    margin-bottom: 64px;
}

.aging-item img {
    max-width: 100%;
    display: block;
    margin-bottom: 24px;
}

.aging-item .title-small {
    margin-bottom: 24px;
}

.aging-area .mySwiper2 .swiper-slide {
    width: 250px;
}

/*=== aging page start ===*/

.action-area {
    padding: 80px 0;
    position: relative;
    z-index: 9;
}

.action-area .container {
    max-width: 1470px;
}

.action-content {
    display: flex;
    position: relative;
    z-index: 9;
    padding: 80px 120px;
    border-radius: 48px;
    gap: 64px;
    justify-content: space-between;
    overflow: hidden;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px;
}

.action-content .hero-circle-sa.one {
    left: 0;
    top: -50%;
}

.action-content .hero-circle-sa.two {
    left: 90%;
    top: 0;
}

.action-left {
    width: 370px;
}

.action-right {
    width: calc(100% - 380px);
}

.action-right .title-extra-small {
    font-weight: 400;
    color: var(--anti-flash-white);
    line-height: 145%;
    text-align: right;
    margin-bottom: 24px;
}

.action-area .background-video video {
    border-radius: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    -ms-border-radius: 48px;
    -o-border-radius: 48px;
}

/*=== faq area start ===*/

.faq-area {
    padding: 80px 0 160px;
    position: relative;
    z-index: 9;
}

.faq-area .row {
    --bs-gutter-x: 32px;
}

.accordion-item {
    border: 1px solid rgba(26, 26, 26, 0.05);
    background: var(--eerie-black);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1)!important;
    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    -moz-border-radius: 24px !important;
    -ms-border-radius: 24px !important;
    -o-border-radius: 24px !important;
}

.accordion-title {
    padding: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 16px;
}

.accordion-title span {
    height: 24px;
    display: flex;
    align-items: center;
}

.accordion-title span i {
    font-size: 22px;
    color: var(--white);
}

.accordion-title span i:nth-of-type(2) {
    display: none;
}

.accordion-title.active span i:nth-of-type(1) {
    display: none;
}

.accordion-title.active span i:nth-of-type(2) {
    display: block;
}

.accordion-title .title-extra-small {
    font-weight: 300;
}

.accordion-title.active span i,
.accordion-title.active .title-extra-small {
    color: var(--caribbean-green);
}

.accordion-body {
    padding: 0 24px 24px 59px;
    display: none;
}

.accordion-body ul li {
    display: flex;
    align-items: start;
}

.accordion-body ul li span {
    display: block;
    margin: 0 8px 4px;
}

/*=== marquee area start ===*/

.marquee-area {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    position: relative;
    z-index: 9;
    overflow: hidden;
}

.marquee-area .bg-conic .one,
.marquee-area .bg-conic .three {
    bottom: 0;
}

.marquee-area .bg-conic .two,
.marquee-area .bg-conic .four {
    top: 0%;
}

.marquee-area .bg-conic .one  {
    left: 0% ;
}

.marquee-area .bg-conic .two  {
    left: 33.33% ;
}

.marquee-area .bg-conic .three  {
    left: 66.66% ;
}

.marquee-area .bg-conic .four  {
    left: 100% ;
}

.marquee {
    width: 100vw;
    height: 54px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    animation: scrolling 20s linear infinite;
    padding: 0;
    margin: 0;
    width: max-content;
    will-change: transform;
}

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

.marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    line-height: 150%;
    padding: 0 40px;
    white-space: nowrap;
}

.marquee-content li img {
    height: 48px;
    display: block;
    object-fit: contain;
}

/*=== footer area start ===*/

.footer-area {
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: var(--primary-color);
}

.footer-content {
    padding: 64px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-left {
    width: calc(100% - 276px);
}

.footer-logo {
    margin-bottom: 80px;
}

.footer-logo img {
    max-width: 100%;
}

.footer-left h2 {
    color: var(--white);
    font-size: 36px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 32px;
}

.footer-left h2 span {
    color: var(--caribbean-green);
}

.footer-left-button ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-left-button ul li {
    display: flex;
}

.footer-left-button ul li:nth-of-type(1) {
    width: 100%;
    margin-bottom: 24px;
}

.footer-left-button ul li a.button {
    font-size: 18px;
    padding: 15px 34px;
}

.footer-left-button ul li a.button {
    font-size: 18px;
    padding: 15px 34px;
}

.footer-left-button ul li:nth-of-type(2) a {
    color: var(--white);
    border: 1px solid var(--white);
    background-color: transparent;
    margin-right: 24px;
}

.footer-left-button ul li:nth-of-type(2) a:hover {
    color: var(--caribbean-green);
    border-color: var(--caribbean-green);
}

.footer-left-button ul li:nth-of-type(3) a {
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    line-height: 130%;
}

.footer-left-button ul li:nth-of-type(3) a:hover {
    color: var(--caribbean-green);
}

.footer-right {
    width: 276px;
}

.footer-right-link ul li a {
    color: var(--gainsboro);
    font-size: 24px;
    font-weight: 300;
    line-height: 125%;
    display: inline-block;
    margin-bottom: 32px;
}

.footer-right-link ul li a:hover {
    color: var(--caribbean-green);
}

.footer-right-icon ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-right-icon ul li a {
    font-size: 22px;
    color: var(--white);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
}

.footer-right-icon ul li a:hover {
    color: var(--eerie-black);
    background-color: var(--caribbean-green);
    border: 1px solid var(--caribbean-green);
}

.copyright-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.copyright-item ul {
    display: flex;
    align-items: center;
}

.copyright-item ul li:nth-of-type(1) {
    margin-right: 24px;
}

.copyright-item ul li a:hover {
    color: var(--caribbean-green);
}

/*=== Background Video ===*/
.background-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.background-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.background-video video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

.background-video video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/*=== team page start ===*/

.team-science-area {
    background-image: none;
    position: relative;
    padding-bottom: 40px;
    z-index: 9;
}

.team-science-area::after {
    display: none;
}

.team-science-shadow {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    text-align: center;
}

.team-science-area .background-video {
    height: auto;
    transform: translateY(-60%);
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -o-transform: translateY(-60%);
}

/*=== action area start ===*/
.action-area-second .action-left {
    width: 372px;
    z-index: 8;
}

.action-area-second .action-right {
    width: calc(100% - 372px);
    padding-left: 64px;
    z-index: 8;
}

.action-area-second .action-right .text-20 {
    color: var(--anti-flash-white);
    text-align: right;
    margin-bottom: 24px;
}

/*=== team area start ===*/

.team-title {
    margin-bottom: 64px;
}

.team-area .row {
    row-gap: 24px;
}

.team-item {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--eerie-black);
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
}

.team-item-inner {
    padding: 32px;
    position: relative;
    z-index: 9;
    background: rgba(255, 255, 255, 0.05);
    min-height: 376px;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.team-item-inner .bg-conic {
    transform: scale(0.25);
    opacity: 0.2;
}

.team-item-inner .bg-conic .hero-circle-sa {
    bottom: -100%;
}

.team-item-image {
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.team-item-image img {
    max-width: 100%;
}

.team-item-content {
    padding: 0 32px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 256px;
    left: 0;
    z-index: 2;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.team-item-content .title-extra-small {
    margin-bottom: 8px;
}

.team-item-content .text-18 {
    color: var(--caribbean-green);
    padding-top: 8px;
    border-top: 1px solid var(--caribbean-green);
    margin-bottom: 24px;
}

.team-item-content p {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.team-item-inner:hover .team-item-image {
    opacity: 0;
}

.team-item-inner:hover .team-item-content {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.team-item-inner:hover .team-item-content p {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.background-video-second {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: -2;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.background-video-second video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.team-area .mySwiper3 .swiper-slide {
    width: 300px;
}

/*=== value area start ===*/

.value-area {
    position: relative;
    z-index: 9;
}

.value-content {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}

.value-left {
    width: 433px;
    position: relative;
    z-index: 9;
}

.value-left::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 5px);
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}

.value-left video {
    width: 100%;
    height: 665px;
    object-fit: cover;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

.value-right {
    width: calc(100% - 433px);
    padding-left: 80px;
}

.value-right .title-medium {
    margin-bottom: 64px;
}

.value-right-inner {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 26px;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
}

.value-right-inner img {
    max-width: 100%;
    display: block;
    margin-bottom: 24px;
}

.value-right-inner .title-extra-small {
    margin-bottom: 16px;
    max-width: 240px;
}

.value-area .hero-circle-sa {
    top: 0;
}

/*=== collectively area start ===*/

.collectively-area {
    padding: 80px 0 160px 0;
    position: relative;
    z-index: 9;
}

.collectively-content {
    display: flex;
    flex-wrap: wrap;
}

.collectively-left {
    width: 481px;
}

.collectively-right {
    width: calc(100% - 481px);
    padding-left: 64px;
}

.collectively-right ul li {
    color: var(--anti-flash-white);
    margin-bottom: 48px;
}

.collectively-right ul li:last-of-type {
    margin-bottom: 0;
}

/*=== join page start ===*/

.join-science-area {
    padding-bottom: 357px;
}

/*=== service area start ===*/

.service-area {
    margin-top: -293px;
    padding-bottom: 56px;
}

.service-area .row {
    --bs-gutter-x: 16px;
}

.service-item a{
    padding: 32px;
    box-shadow: 0 0 1px 1px inset rgba(255, 255, 255, 0.10);
    background: var(--eerie-black);
    min-height: 530px;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: start;
    overflow: hidden;
    z-index: 9;
    margin-bottom: 24px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}

.service-item .title-small {
    color: var(--caribbean-green);
    margin-bottom: 32px;
    transition: 0.4s all ease;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.science-item-second-inner a:hover .title-small {
    color: var(--white);
}

.service-item ul {
   margin-bottom: auto;
}

.service-item ul li {
    color: var(--gainsboro);
    font-size: 16px;
    font-weight: 400;
    line-height: 145%;
    display: flex;
    align-items: start;
    margin-bottom: 16px;
}

.service-item ul li span {
    width: 32px;
    flex: 0 0 32px;
}

.service-item ul li span img {
    max-width: 100%;
}

.service-item .science-item-second-inner {
    margin-top: auto;
    text-align: right;
}

.service-item .science-item-second-inner a {
    min-height: auto;
    padding: 0;
    width: auto;
    border: none;
    margin: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.service-item .science-item-second-inner a:hover::after {
    display: none;
}

.service-item .science-item-second-inner a {
    display: inline-block;
}

.service-item.science-item-second-inner .service-item-btn {
    margin-top: 8px;
}

.science-item-second-inner.service-item a:hover .service-item-btn {
    color: var(--primary-color);
    background: var(--white);
}

.service-item.science-item-second-inner .bg-conic {
    opacity: 0;
    transform: scale(0.5);
    top: 50%;
    transition: 0.4s;
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    -ms-transition: 0.4s all ease;
    -o-transition: 0.4s all ease;
}

.service-area .col-md-6:nth-child(1) a:hover .service-item-btn {
    width: 202px;
}

.service-area .col-md-6:nth-child(2) a:hover .service-item-btn {
    width: 263px;
}

.service-area .col-md-6:nth-child(3) a:hover .service-item-btn {
    width: 198px;
}

.service-area .col-md-6:nth-child(1) a:hover .service-item-btn small {
    max-width: 128px;
}

.service-area .col-md-6:nth-child(2) a:hover .service-item-btn small {
    max-width: 189px;
}

.service-area .col-md-6:nth-child(3) a:hover .service-item-btn small {
    max-width: 124px;
}

/*=== validated area start ===*/

.validated-area {
    background-image: url(../images/validated-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 120px;
    padding: 120px 0;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    z-index: 9;
}

.validated-area::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/validated-bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
    display: none;
}

.validated-area::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 87.18%, #111 100%), linear-gradient(180deg, #111 0%, rgba(17, 17, 17, 0.00) 8.76%, rgba(17, 17, 17, 0.00) 88.91%, #111 100%);
    z-index: -1;
}

.validated-item-inner {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--eerie-black);
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    max-width: 481px;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
}

.validated-item-inner-second {
    position: relative;
    z-index: 9;
    padding: 32px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}

.validated-item-inner-second .text-20 {
    color: var(--gainsboro);
    margin-bottom: 32px;
}

.validated-item-inner-second .text-18 {
    color: var(--gainsboro);
    font-weight: 600;
    margin-bottom: 8px;
}

.validated-item-inner-second .text-16 {
    color: var(--caribbean-green);
    font-weight: 600;
}

.validated-item ul li:nth-of-type(1) .validated-item-inner {
    margin-left: 205px;
}

.validated-item ul li:nth-of-type(2) .validated-item-inner {
    margin-top: -80px;
    margin-left: auto;
}

.validated-item ul li:nth-of-type(3) .validated-item-inner {
    margin-top: -80px;
}

.validated-item ul li:nth-of-type(4) .validated-item-inner {
    margin-top: -80px;
    margin-left: auto;
    margin-right: 103px;
}

.validated-item ul li:nth-of-type(5) .validated-item-inner {
    margin-top: -80px;
    margin-left: 103px;
}

.validated-item ul li:nth-of-type(6) .validated-item-inner {
    margin-top: -80px;
    margin-left: auto;
}

.validated-item-inner-second .bg-conic {
    transform: scale(0.25);
    opacity: 0.2;
    top: 50%;
}

.validated-area .mySwiper3 .swiper-slide {
    width: 342px;
}

/*=== faq page start ===*/

.faq-science-area {
    background-image: none;
    padding-bottom: 80px;
}

.faq-science-area::after {
    display: none;
}

.faq-content {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}

.faq-left {
    width: 306px;
    padding-top: 120px;
}

.faq-left ul {
    font-size: 0;
}

.faq-left ul li a.button {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-color: transparent;
    margin-bottom: 16px;
}

.faq-right {
    width: calc(100% - 306px);
    margin-left: auto;
    position: relative;
    z-index: 8;
}

.faq-user,
.faq-investor,
.faq-partner {
    padding: 100px 0 60px;
}

.faq-user {
    background: linear-gradient(0deg, rgba(17, 17, 17, 0.00) 80%, #111 100%), linear-gradient(180deg, rgba(17, 17, 17, 0.00) 80%, #111 100%), rgba(123, 31, 162, 0.10);
}

.faq-right-title {
    padding-left: 20px;
    border-left: 4px solid var(--grape);
    margin-bottom: 48px;
}

.faq-right-title h2 {
    color: var(--white);
    font-size: 36px;
    font-weight: 400;
}

.faq-investor {
    background: linear-gradient(0deg, rgba(17, 17, 17, 0.00) 80%, #111 100%), linear-gradient(180deg, rgba(17, 17, 17, 0.00) 80%, #111 100%), rgba(32, 227, 178, 0.05);
}

.faq-investor .faq-right-title {
    border-color: var(--caribbean-green);
}

.faq-partner {
    background: linear-gradient(0deg, #111 0%, rgba(17, 17, 17, 0.00) 20%), linear-gradient(0deg, rgba(17, 17, 17, 0.00) 80%, #111 100%), rgba(0, 117, 255, 0.05);
}

.faq-partner .faq-right-title {
    border-color: var(--blue-crayola);
}

.faq-bottom {
    padding-bottom: 80px;
}

.faq-bottom .title-small {
    font-size: 24px;
    color: var(--gainsboro);
}

/*=== question page start ===*/

.question-area {
    position: relative;
    z-index: 9;
    padding: 80px 0;
    border-bottom: 1px solid #4074a9;
    text-align: center;
}

.question-content .title-medium {
    margin-bottom: 24px;
}

.question-content .text-20 {
    margin-bottom: 48px;
}

.question-content .text-20 a {
    color: var(--white);
}

.question-content .text-20 a:hover {
    color: var(--caribbean-green);
}

.question-content ul {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.question-content ul li:nth-of-type(1) {
    width: 100%;
    margin-bottom: 48px;
}

.question-content ul li:nth-of-type(2) {
    margin-right: 24px;
}

.question-content ul li a {
    font-size: 18px;
}

.question-content ul li:nth-of-type(2) a,
.question-content ul li:nth-of-type(3) a {
    color: var(--white);
    border: 1px solid var(--white);
    background-color: transparent;
}

/*=== login page start ===*/

.login-area {
    position: relative;
    z-index: 9;
    overflow: hidden;
}

.login-area .hero-circle-sa {
    position: absolute;
    bottom: -5%;
}

.login-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 32px;
}

.login-item {
    margin: auto 0;
    padding: 40px 0;
}

.login-item .title-medium {
    text-align: center;
    margin-bottom: 32px;
}

.login-item form {
    max-width: 379px;
    margin: 0 auto;
}

.login-item .title-medium {
    text-align: center;
    margin-bottom: 32px;
}

.login-input {
    position: relative;
    margin-bottom: 12px;
    z-index: 9;
}

.login-input label {
    color: rgba(255, 255, 255, 0.30);
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    top: 16px;
    left: 20px;
    z-index: -1;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    -ms-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
}

.login-input input, .login-input textarea {
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    display: flex;
    align-items: center;
    width: 100%;
    height: 55px;
    padding: 4px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.03);
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    -ms-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
}

.login-input textarea {
    min-height: 200px;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

.login-input input:focus,
.login-input input:not(:placeholder-shown) {
    padding-top: 20px;
    border-color: var(--white);
}

.login-input textarea:focus,
.login-input textarea:not(:placeholder-shown) {
    padding-top: 24px;
    border-color: var(--white);
}

.login-input input:focus ~ label,
.login-input input:not(:placeholder-shown) ~ label,
.login-input textarea:focus ~ label,
.login-input textarea:not(:placeholder-shown) ~ label {
    font-size: 12px;
    top: 8px;
    color: var(--white);
}

.login-input input:-webkit-autofill ~ label, .login-input text-area:-webkit-autofill ~ label {
    color: var(--primary-color) !important;
    z-index: 1;
}

.login-input input:-webkit-autofill, .login-input textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--primary-color) !important;
}

.login-item form a {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
}

.login-item form a:hover {
    color: var(--caribbean-green);
}

.login-item form button.button {
    width: 100%;
    border: none;
    margin-top: 24px;
}

.login-item p {
    margin-bottom: 32px;
}

.login-item p a {
    color: var(--text-color);
    font-weight: 700;
}

.login-item p a:hover {
    color: var(--caribbean-green);
}

/*=== waitlist page start ===*/

.waitlist-area {
    padding: 173px 0 64px;
    position: relative;
    z-index: 9;
}

.waitlist-area::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 436px;
    left: 0;
    top: 0;
    background-image: url(../images/waitlist-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    z-index: -1;
}

.waitlist-left {
    padding-right: 80px;
}

.waitlist-left .row {
    --bs-gutter-x: 48px;
}

.waitlist-left-title {
    margin-bottom: 80px;
}

.waitlist-left-title .title-large {
    margin-bottom: 16px;
}

.waitlist-left-inner {
    margin-bottom: 48px;
}

.waitlist-left-inner img {
    max-width: 100%;
    display: block;
    margin-bottom: 16px;
}

.waitlist-left-inner .text-20 {
    color: var(--white);
}

.waitlist-right {
    position: relative;
    z-index: 9;
}

.waitlist-right .bg {
    position: relative;
    z-index: -9999;
    transform: scale(0.5);
}

.waitlist-right .hero-circle-sa {
    bottom: 2100%;
}

.waitlist-right-top {
    border-top: 2px solid rgba(255, 255, 255, 0.10);
    border-right: 2px solid rgba(255, 255, 255, 0.10);
    border-left: 2px solid rgba(255, 255, 255, 0.10);
    background: var(--primary-color);
    padding: 48px;
    position: relative;
    z-index: 9;
    border-radius: 24px 24px 0 0;
    -webkit-border-radius: 24px 24px 0 0;
    -moz-border-radius: 24px 24px 0 0;
    -ms-border-radius: 24px 24px 0 0;
    -o-border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.waitlist-right .login-item {
    padding: 0;
}

.waitlist-right-top form {
    max-width: 100%;
}

.waitlist-right-top p {
    text-align: center;
    margin: 24px 0 0;
}

.waitlist-right-top p a {
    font-weight: 600;
}

.waitlist-right-inner-second {
    padding: 79px 0;
    text-align: center;
    display: none;
}

.waitlist-right-inner-second img {
    max-width: 100%;
    display: block;
    margin: 0 auto 32px;
}

.waitlist-right-inner-second .title-medium {
    margin-bottom: 32px;
}

.waitlist-right-inner-second .text-18 {
    color: var(--gainsboro);
}

.waitlist-right-top .background-video {
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.waitlist-right-top .background-video video {
    border-radius: 24px 24px 0 0;
    -webkit-border-radius: 24px 24px 0 0;
    -moz-border-radius: 24px 24px 0 0;
    -ms-border-radius: 24px 24px 0 0;
    -o-border-radius: 24px 24px 0 0;
}

.waitlist-right-bottom {
    position: relative;
    z-index: 9;
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    -webkit-border-radius: 0 0 24px 24px;
    -moz-border-radius: 0 0 24px 24px;
    -ms-border-radius: 0 0 24px 24px;
    -o-border-radius: 0 0 24px 24px;
}

.waitlist-right-bottom .info {
    width: 50%;
    padding: 24px;
    padding-top: 0;
    text-align: center;
}

.waitlist-right-bottom .text-14 {
    color: var(--white);
    margin-top: 8px;
}

.waitlist-right-bottom .bg-conic {
    transform: scale(0.25);
}


.waitlist-right-bottom .one {
    top: -200%;
    left: -25%;
}

.waitlist-right-bottom .two {
    bottom: -200%;
    left: 125%;
}

.request .title-medium {
    font-size: 36px;
}

.action-area.action-area-second img {
    height: 80%;
    max-width: 60%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/*=== invest page start ===*/

.invest-area {
    padding: 173px 0 80px;
    position: relative;
    z-index: 9;
}

/* .invest-area::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(44deg, rgba(123, 31, 162, 0.20) 0%, rgba(32, 227, 178, 0.20) 50%, rgba(0, 117, 255, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
    background-blend-mode: hard-light, normal;
    z-index: -1;
} */

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

.invest-content .title-large {
    margin-bottom: 32px;
}

.invest-content .title-large span {
    color: var(--caribbean-green);
}

.invest-content .title-extra-small {
    font-weight: 400;
    color: var(--gainsboro);
    margin-bottom: 48px;
}

.invest-content .button {
    font-size: 18px;
    padding: 15px 34px;
}

/*=== market area start ===*/

.market-area {
    background-color: var(--primary-color);
}

.market-upper {
    margin-bottom: 48px;
}

.market-content {
    background-color: var(--eerie-black);
    padding: 32px 0;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
}

.market-item {
    padding: 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    min-height: 336px;
}

.market-item .title-large {
    color: var(--caribbean-green);
    margin-bottom: 82px;
}

/*=== invest area start ===*/

.invest-area-second {
    padding-bottom: 34px;
}

.invest-area-second .market-upper .text-20 {
    text-align: right;
}

.invest-item {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--eerie-black);
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    margin-bottom: 30px;
}

.invest-item-image {
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.invest-item-image img {
    width: 100%;
}

.invest-item-content {
    padding: 40px 0 24px;
    text-align: center;
}

.invest-item-content .title-extra-small {
    margin-bottom: 24px;
}

.invest-item-content .text-16 {
    line-height: 170%;
    max-width: 280px;
    margin: 0 auto;
}

.invest-area-second .mySwiper4 .swiper-slide {
    width: 330px;
}

/*=== waitlist area start ===*/

.waitlist-area-second {
    background-color: var(--primary-color);
    background-image: none;
    padding: 80px 0 0;
}

.waitlist-area-second::after {
    width: 100%;
    height: calc(100% - 200px) !important;
    background-image: url(../images/waitlist-bg2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 200px;
    left: 0;
}

.waitlist-area-second::before {
    display: none;
}

.waitlist-left-mobile {
    background-image: url(../images/waitlist-bg4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 48px;
}

.waitlist-area-second .waitlist-left {
    padding-right: 64px;
}

.waitlist-area-second .waitlist-left-title {
    margin-bottom: 96px;
}

.waitlist-area-second .waitlist-left-inner {
    margin-bottom: 48px;
}

.waitlist-area-second .waitlist-left-inner .title-small {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.waitlist-area-second .waitlist-left-inner .title-small img {
    max-width: 100%;
    margin-right: 16px;
}

.waitlist-area-second .waitlist-right::after {
    height: 100%;
    background: conic-gradient(from 25deg at 50% 50.38%, rgba(123, 31, 162, 0.50) 0deg, rgba(32, 227, 178, 0.50) 109.0384590625763deg, rgba(0, 117, 255, 0.50) 256.1538362503052deg, rgba(123, 31, 162, 0.50) 360deg);
    filter: blur(20px);
}

.waitlist-area-second .waitlist-right-inner-second {
    padding: 150px 0;
}

.waitlist-area-second .waitlist-right-inner-second .title-medium {
    margin-left: -2px;
    margin-right: -2px;
}

/*=== partner page start ===*/

.invest-area-third .background-video {
    height: auto;
    transform: translateY(-45%);
    -webkit-transform: translateY(-45%);
    -moz-transform: translateY(-45%);
    -ms-transform: translateY(-45%);
    -o-transform: translateY(-45%);
}

.waitlist-area-third::after {
    height: calc(100% - 272px) !important;
    top: 272px;
}

.invest-area-third::after {
    display: none;
}

.partner-area {
    padding: 80px 0 34px;
    position: relative;
    z-index: 9;
}

.partner-title {
    text-align: center;
    margin-bottom: 48px;
}

.partner-item {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--eerie-black);
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    margin-bottom: 30px;
}

.partner-item-inner {
    padding: 32px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    position: relative;
    z-index: 9;
    overflow: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
}

.partner-item-inner img {
    max-width: 100%;
    display: block;
    margin: 0 auto 24px;
}

.partner-item-inner .title-small {
    margin-bottom: 32px;
}

.partner-item-inner .text-18 {
    min-height: 130px;
}

.partner-item-inner .bg-conic {
    transform: scale(0.5);
    opacity: 0.2;
    top: 50%;
}

.waitlist-area-third {
    background-position: 0 272px;
}

.partner-area .mySwiper5 .swiper-slide {
    width: 300px;
}

/*=== privacy page start ===*/

.privacy-area {
    padding: 140px 0 16px;
    position: relative;
    z-index: 9;
}

.privacy-content {
    max-width: 584px;
    margin: 0 auto;
}

.privacy-item {
    padding-bottom: 32px;
}

.privacy-content h3 {
    color: var(--white);
    font-size: 36px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 32px;
}

.privacy-content p {
    color: var(--gainsboro);
    font-size: 20px;
    font-weight: 400;
    line-height: 145%;
    margin-bottom: 32px;
}

.privacy-content p strong,
.privacy-content p a {
    color: var(--gainsboro);
    font-weight: 700;
    line-height: 130%;
}

.privacy-content a:hover {
    color: var(--caribbean-green);
}

.privacy-content ul {
    margin-bottom: 32px;
}

.privacy-content ul li {
    color: var(--gainsboro);
    font-size: 20px;
    font-weight: 400;
    line-height: 145%;
    position: relative;
    padding-left: 30px;
}

.privacy-content ul li::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    top: 10px;
    left: 12px;
    background-color: var(--gainsboro);
}

.privacy-content ul li strong,
.privacy-content ul li a {
    color: var(--gainsboro);
    font-weight: 700;
    line-height: 130%;
}

.privacy-content .privacy-item-inner li::after {
    content: '1.';
    width: 30px;
    height: auto;
    background-color: transparent;
    top: 0;
    left: 6px;
}

.privacy-content .privacy-item-inner li:nth-of-type(2):after {
    content: '2.';
}

.privacy-content .privacy-item-inner li:nth-of-type(3):after {
    content: '3.';
}

.privacy-content .privacy-item-inner li:nth-of-type(4):after {
    content: '4.';
}

.privacy-content .privacy-item-inner li:nth-of-type(5):after {
    content: '5.';
}

.privacy-content .privacy-item-inner li:nth-of-type(6):after {
    content: '6.';
}



/*=================== HOME PAGE STYLE START HARE ============= */
.hero-area-sa {
    padding-top: 173px;
    padding-bottom: 83px;
    min-height: 1200px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.hero-circle-sa {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 1469px;
    height: 1469px;
    border-radius: 9999px;
    background: conic-gradient(from 25deg at 50% 50.38%, #7B1FA2 0deg, #20E3B2 109.0384590625763deg, #0075FF 251.99999570846558deg, #7B1FA2 360deg);
    filter: blur(60px);
    opacity: 0.2;
    z-index: -9999;
    transform: translateX(-50%);
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    animation: rotate-color 10s linear infinite;
    background-blend-mode: screen;
}

.hero-circle-sa::before {
    content: "";
    clear: both;
    display: block;
    width: 734.5px;
    height: 734.5px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes rotate-color {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

.hero-top-sa {
    display: flex;
    width: 790px;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    gap: 32px;
    max-width: 100%;
}

.hero-top-sa h2 {
    color: #FFF;
    text-align: center;
    font-size: 84px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
}

.hero-top-sa h2 span {
    font-size: 72px;
    color: #20E3B2;
    position: relative;
    display: block;
}

.hero-top-sa h2 span::before {
    content: "";
    display: block;
    width: 62px;
    height: 4px;
    background: #20E3B2;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.hero-top-sa h2 span::after {
    content: "";
    display: block;
    width: 62px;
    height: 4px;
    background: #20E3B2;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.hero-top-sa p {
    color: #DDD;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%;
    max-width: 584px;
    margin-inline: auto;
}


.hero-main-wp-sa {
    padding-top: 64px;
    display: flex;
    justify-content: center;
}
.hero-progressbar {
    position: relative;
	width: 600px;
}

.loaded-ractangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s;
}

.hero-progressbar.loaded .loaded-ractangle {
    opacity: 1;
    transform: rotate(0);
}

.hero-sigle-item {
    position: absolute;
    left: 35%;
    top: 40%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: 0.5s;
    transition-delay: 0.5s;
    visibility: hidden;
}
.hero-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
    border-radius: 8px;
    background: rgba(17, 17, 17, 0.20);
}
.hero-card-top span {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    white-space: nowrap;
}

.hero-card-top svg {
    height: 28px;
    width: 28px;
}

.hero-card-progress {
    width: 100%;
    height: 10px;
    background: #111111;
    display: flexbox;
    border-radius: 999px;
}
.hero-card-progress .progressbar-line {
    border-radius: 9999px;
    background: linear-gradient(90deg, #7B1FA2 0%, #0075FF 60.64%, #20E3B2 121.28%);
    height: 100%;
    width: 80%;
}

.loaded .hero-sigle-item.cancer-risk {
    bottom: 28%;
    top: unset;
    left: -14%;
    visibility: visible;
}

.loaded .hero-sigle-item.dementia-risk {
    top: 36%;
    left: 86%;
    visibility: visible;
}
.loaded .hero-sigle-item.metabolic-risk {
    top: 68%;
    left: 66%;
    visibility: visible;
}


.loaded .hero-sigle-item.cardiovascular-risk {
	top: 16%;
	left: -18%;
    visibility: visible;
}


/*============== hero style end here =========== */
/*======== health plan area style start here ========= */

.health-plan-area {
    padding-block: 80px;
    background: url(../images/health-plan-bg.webp) no-repeat;
    background-size: cover;
    background-position: top;
    position: relative;
    z-index: 2;
    /*! overflow: hidden; */
}

.animate-loaded {
    animation-name: background-smooth-animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
}

@keyframes background-smooth-animation {
    0% {
        background-position: top center;
    }
    33% {
        background-position: center center;
    }
    66% {
        background-position: bottom center;
    }
    100% {
        background-position: top center;
    }
}

.health-plan-top {
    display: flex;
    width: 100%;
    max-width: 790px;
    flex-direction: column;
    margin-inline: auto;
    gap: 32px;
}

.health-plan-top h2 {
    color: #FFF;
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.health-plan-top p {
    color: #CCC;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
}

.health-plan-main-wp {
    margin-top: 150px;
    position: relative;
    z-index: 2;
}

.health-plan-inner {
    width: 960px;
    height: 600px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.10);
    margin-inline: auto;
    position: relative;
    max-width: 100%;
    transition: all 0.3s ease-out;
}

.health-plan-inner .health-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    max-width: 700px;
    width: 100%;
    border-bottom-right-radius: 48px;
    object-fit: contain;
}

.health-plan-area.active .health-plan-inner {
    background: rgba(0, 0, 0, 0.5);
}

.health-text-content {
    position: absolute;
    left: -120px;
    top: 32px;
    max-width: 495px;
    opacity: 0;
    transition: all 0.3s ease-out;
}
.health-text-content h3 {
    color: #fff;
    font-size: 72px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
}


.health-plan-area.active .health-text-content,
.health-plan-area.active .left-bottom-frame,
.health-plan-area.active .health-right-frame {
    opacity: 1;
}

.left-bottom-frame {
    display: flex;
    width: 484px;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    position: absolute;
    left: -168px;
    bottom: 32px;
    z-index: 11;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.single-health-item {
    display: flex;
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
}
.single-health-item .health-inner-card {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.health-inner-card .status-circle {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
    background: #20E3B2;
    border-radius: 50%;
}

.status-circle.circle-teal {
    background: #7B1FA2;
}

.status-circle.circle-red {
    background: #FF3B30;
}

.health-right-frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: absolute;
    right: -128px;
    top: 161px;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.health-right-item {
    display: flex;
    height: 90px;
    padding: 16px 24px;
    align-items: center;
    gap: 16px;
    border-radius: 24px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.health-right-item .icon {
    border-radius: 6px;
    background: rgba(32, 227, 178, 0.20);
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1/1;
}
.health-right-item span {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}

.health-inner-card span {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}

.health-right-item.health-item-two {
    display: flex;
    height: 81px;
    padding: 14.4px 21.6px;
    align-items: center;
    gap: 14.4px;
    opacity: 0.75;
    filter: blur(2px);
}

.health-right-item.health-item-one {
    width: 358px;
}

.health-right-item.health-item-three {
    display: flex;
    height: 72px;
    padding: 12.8px 19.2px;
    align-items: center;
    gap: 12.8px;
    border-radius: 19.2px;
    border: 3.2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0.5;
    filter: blur(4px);
}

.health-plan-area.wheel-1 {
    background-position: center center;
}


.health-plan-area.wheel-2 {
    background-position: bottom center;
}
.wheel-1 .health-inner-card {
	background: linear-gradient(to left, rgba(26, 32, 44, 1), rgba(52, 107, 230 , .7));
}

.wheel-1 .health-right-item {
    background: linear-gradient(to left, rgba(26, 32, 44, 1), rgba(43, 149, 156, .8));
    border: none;
}
.wheel-2 .health-right-item {
    background: linear-gradient(to right, rgba(26, 32, 44, 1), rgba(31, 154, 232, .8));
    border: none;
}
.wheel-2 .health-inner-card {
	background: linear-gradient(to left, rgba(26, 32, 44, .7), rgba(26, 32, 44, .7));
}


/*====================== Health Plan area end hare ================ */
/*============== omega biology area style start hare =============== */

.omega-biology-area {
    padding-block: 80px;
    background: #111111;
}

.biology-top-card {
    display: flex;
    align-items: end;
    gap: 32px;
}

.biology-top-card p {
    width: 481px;
    color: #CCC;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
}
.biology-top-card h2 {
    color: #fff;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    flex: 1;
}

.omega-biology-wrapper {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.biology-content-card {
    display: flex;
    gap: 24px;
}

.single-biology-card {
    width: 100%;
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #1A1A1A;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.biology-card-content {
    display: flex;
    padding: 24px 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.biology-card-content h4 {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}
.biology-card-content p {
    color: #CCC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    max-width: 261px;
}
.biology-card-image img {
	width: 100%;
	border-radius: 12px;
}
.biology-card-image {
	position: relative;
}

.tested-info-s {
    position: absolute;
    left: -23px;
    top: 40px;
    z-index: 5;
    max-width: 334px;
    width: 100%;
}

.personalized-health-s {
    position: absolute;
    top: -16px;
    right: -16px;
    max-width: 206px;
}

.biology-card-image {
    position: relative;
}
.biology-images-ractangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.health-plan-overlay {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #111111;
    opacity: 1;
    transition: 0.3s;
	z-index: -1;
}

.health-plan-wrapper {
	min-height: 1700px;
}

.home-main-content {
    overflow: unset !important;
}

.mobile-card-section {
	position: sticky;
	top: 250px;
}









/* ============================
How it works page design ============================ */

.htw-hero-section {
    min-height: 535px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.htw-hero-section .second-item {
    margin-left: auto;
}

.htw-hero-section .science-item-left {
    width: 100%;
}

.htw-hero-section .science-item-left.were-designed-title {
	width: 344px;
}

.htw-hero-section .middle-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    z-index: -1;
}

.htw-hero-section .middle-img img{
    max-width: 480px;
    border-radius: 24px;
}

.htw-hero-section .title-large {
    text-align: start;
}

.htw-hero-bottom-text p {
    color: var(--White, #FFF);
    font-size: 36px;
    font-weight: 400;
    line-height: 150%; /* 54px */
    text-align: center;
    padding-top: 120px;
}

/* health journey area  */
.health-journey-area {
    overflow: hidden;
}

.health-journey-area .container {
    max-width: 1420px;
}

.health-journey-area .container > .hero-circle-sa {
    top: -5%;
}

.journey-progress-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 48px;
    margin-top: 64px;
    padding: 96px;
}

.journey-progress-wrapper .bg-conic .hero-circle-sa.one {
    top: -5%;
    left: 20%;
}

.journey-progress-wrapper .bg-conic .hero-circle-sa.two {
    top: 5%;
    left: 70%;
}

.journey-progress-wrapper .bg-conic .hero-circle-sa.three {
    bottom: 5%;
    left: 20%;
}

.journey-progress-wrapper .bg-conic  .hero-circle-sa.four {
    bottom: -5%;
    left: 70%;
}

.single-journey-conts .row {
    row-gap: 48px;
    --bs-gutter-x: 48px;
}

.single-journey-conts {
    margin-bottom: 160px;
}

.single-journey-conts .col-lg-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.journey-progress-wrapper .single-journey-conts:last-child {
    margin-bottom: 0;
}

.single-journey-conts .content-columns {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.single-journey-conts .content-columns:after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background-color: #20e3b2;
    position: absolute;
    top: 0;
}

.single-journey-conts .content-columns div {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.single-journey-conts.active .content-columns div {
    opacity: 1;
    transition-delay: 0.2s;
}

/* Trigger animation only when active */
.single-journey-conts.active .content-columns:after {
    animation: journeyBoxTransition 0.4s ease-in-out forwards;
}

@keyframes journeyBoxTransition {
    0% {
        width: 0;
        right: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
        left: 0;
        right: auto;
    }
}

.single-journey-conts.active.reverse .content-columns:after {
    animation: journeyBoxTransition02 0.4s ease-in-out forwards;
}

@keyframes journeyBoxTransition02 {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
        right: 0;
        left: auto;
    }
}

.single-journey-conts .img {
    max-width: 416px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.single-journey-conts.active .img  {
    opacity: 1;
    transition-delay: 0.3s;
}

.single-journey-conts .img img {
    width: 100%;
    border-radius: 20px;
}

.single-journey-conts .content-columns h3 {
    color: var(--Primary, #20E3B2);
    font-size: 48px;
    font-weight: 400;
    line-height: 150%; /* 72px */
}

.single-journey-conts .content-columns h2 {
    color: var(--White, #FFF);
    font-size: 36px;
    font-weight: 400;
    line-height: 150%; /* 54px */
}

.single-journey-conts .content-columns p {
    padding: 32px 0 48px 0;
    color: var(--White-3, #DDD);
    font-size: 20px;
    font-weight: 300;
    line-height: 130%; /* 26px */
    max-width: 490px;
}

.single-journey-conts.reverse .content-columns h3, .single-journey-conts.reverse .content-columns h2, .single-journey-conts.reverse .content-columns p {
    text-align: right;
    margin-left: auto;
}

.single-journey-conts .content-columns ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single-journey-conts .content-columns ul li {
    display: flex;
    gap: 16px;
    color: var(--White-2, #EEE);
    font-size: 20px;
    font-weight: 600;
    line-height: 130%; /* 26px */
    align-items: flex-start;
}

.single-journey-conts .content-columns ul li svg {
    transform: translateY(5px);
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

/* htw-faq-area */
.htw-faq-area {
    padding-top: 160px;
    padding-bottom: 87px;
}

.htw-faq-left h2 {
    color: var(--White, #FFF);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 72px */
}

/* future-of-preventive area */

.future-of-preventive-area {
    padding-top: 160px;
}

.future-of-prevente-top {
    padding-bottom: 64px;
}

.future-of-prevente-top h2 {
    color: var(--White, #FFF);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 72px */
}

.future-of-prevente-top p {
    color: var(--White-3, #DDD);
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 26px */
    text-align: right;
    max-width: 481px;
    margin-left: auto;
}

.future-of-prevent-inner {
    text-align: center;
    position: relative;
    max-width: fit-content;
    margin-inline: auto;
    margin-top: 64px;
}

.future-of-prevent-inner .bg-container {
    overflow: hidden;
    border-radius: 48px;
}

.future-of-prevent-inner .bg-conic {
    position: relative;
    display: block;
    width: 994px;
    height: 566px;
    margin-top: -64px;
}

.future-mobile-img {
    margin-top: -565px;
}

.future-of-prevent-inner .fop-box {
    position: absolute;
    left: 163px;
    top: 114px;
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--Border-200, rgba(255, 255, 255, 0.15));
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);

}

.future-of-prevent-inner .fop-box .top {
    display: flex;
    align-items: center;
    color: var(--White, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 20.8px */
    display: flex;
    padding: 16px 12px;
    gap: 12px;
    border-radius: 8px;
    background: rgba(17, 17, 17, 0.20);
    flex: 0 0 100%;
    width: 100%;
    text-wrap: nowrap;
}

.future-of-prevent-inner .progressbar {
    display: flex;
    height: 10px;
    padding-right: 53px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 9999px;
    background: var(--background-dark-mode, #111);
    position: relative;
}

.future-of-prevent-inner .progressbar .progress-range {
   border-radius: 9999px;
    background: linear-gradient(90deg, #7B1FA2 0%, #0075FF 60.64%, #20E3B2 121.28%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 75%;
}

.future-of-prevent-inner .fop-box-01 {
    top: 15%;
}

.future-of-prevent-inner .fop-box-02 {
    left: auto;
    right: 160px;
    top: auto;
    bottom: 32px;
}

.future-of-prevent-inner .fop-box-03 {
    left: auto;
    right: 32px;
    top: 32px;
    max-width: 260px;
}

.future-of-prevent-inner .fop-box-03 .box-img {
    width: 100%;
}

.future-of-prevent-inner .fop-box-03 .box-img img {
    width: 100%;
    border-radius: 5px;
}

.future-of-prevent-inner .fop-box-03 span {
    font-size: 14px;
}

.future-of-prevent-inner .fop-box-04 {
    left: 32px;
    right: auto;
    top: auto;
    bottom: 112px;
    align-items: flex-start;
    border-radius: 16px 16px 16px 0;
    text-align: left;
}

.future-of-prevent-inner .fop-box-04 .top {
    border-radius: 8px 8px 8px 0;
}

.future-bottom-icon {
    position: absolute;
    left: 32px;
    top: auto;
    bottom: 32px;
    text-align: left;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.10);
    border-radius: 9999px;
}

.future-mobile-img {
    transform: translateY(80px);
    transition: 0.3s;
    opacity: 0;
}

.future-of-preventive-area.active .future-mobile-img {
    transform: translateY(0);
    opacity: 1;
}

.future-of-preventive-area .transform01, .future-of-preventive-area .future-bottom-icon{
    transform: translateX(-50px);
    transition: 0.3s;
    opacity: 0;
}

.future-of-preventive-area.active .transform01, .future-of-preventive-area.active .future-bottom-icon {
    transform: translateX(-0px);
    opacity: 1;
    transition-delay: 0.3s;
}

.future-of-preventive-area .transform02 {
    transform: translateX(50px);
    transition: 0.3s;
    opacity: 0;
}

.future-of-preventive-area.active .transform02 {
    transform: translateX(0px);
    opacity: 1;
    transition-delay: 0.3s;
}

.were-designed-title {
    transform: translateX(-50px);
}

.future-mobile-img img {
    max-height: 565px;
}

/*=== Investor Portal ===*/
#kpis h2 , #documents h2, #investorPortal #contact h2, #roadmap h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 150%;
}

#investorPortal {
    position: relative;
    overflow: hidden;
}

#investorPortal .hero-circle-sa.one {
    top: 15%;
    left: 0vw;
}

#investorPortal .hero-circle-sa.two {
    top: 40%;
    left: 100vw;
}

#investorPortal .hero-circle-sa.three {
    bottom: -20%;
    left: 50%;
}

.base-card .line {
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

/*=== Investor Portal - Header ===*/
#investorPortal header .bg-conic .one,
#investorPortal header .bg-conic .three {
    bottom: 0;
}

#investorPortal header .bg-conic .two,
#investorPortal header .bg-conic .four {
    top: 0%;
}

#investorPortal header .bg-conic .one  {
    left: 0% ;
}

#investorPortal header .bg-conic .two  {
    left: 33.33% ;
}

#investorPortal header .bg-conic .three  {
    left: 66.66% ;
}

#investorPortal header .bg-conic .four  {
    left: 100% ;
}

/*=== Investor Portal - Message From Our CEO ===*/
#ceoMessage {
    margin-bottom: 32px;
}

#ceoMessage h2 {
    line-height: 150%;
    margin-bottom: 32px;
}

#ceoMessage p {
    width: 100%;
    max-width: 600px;
    line-height: 145%;
}

#ceoMessage span {
    color: var(--caribbean-green);
}

#ceoMessage img {
    height: 80px;
    width: 80px;
}

#ceoMessage .base-card {
    gap: 32px;
    margin-top: -96px;
}

#ceoMessage .base-card div:nth-child(1) > div {
    left: 32px;
    bottom: 32px;
}

/*=== Investor Portal - Stats ===*/
#stats {
    margin-bottom: 32px;
}

#stats .base-card {
    gap: 32px;
}

#stats p:nth-child(1) > span:nth-child(1) {
    color: var(--caribbean-green);
}

#stats .progress {
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 48px;
}

#stats .progress-bar {
    border-radius: 0 9999px 9999px 0;
    background: var(--caribbean-green)
}

/*=== Investor Portal - KPIs ===*/
#kpis {
    margin-bottom: 64px;
}

#kpis .info {
    padding: 16px 0 16px 24px;
    border-left: 3px solid var(--blue-crayola);
    width: 100%;
}

/*=== Investor Portal - Reports & Documents ===*/
#documents h3 {
    font-size: 24px;
    line-height: 145%;
}

.document {
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.document a {
    font-size: 20px;
    color: var(--white);
}

/*=== Investor Portal - Roadmap ===*/
#roadmap {
    margin-top: 120px;
    margin-bottom: 120px;
}

#roadmap h2 {
    text-align: center;
    margin-bottom: 64px;
}

#roadmap .step {
    max-width: 784px;
    display: flex;
    margin: 0 auto;
}

#roadmap .step:nth-child(even) {
    flex-direction: row-reverse;
}

#roadmap .step p {
    padding: 24px 0 24px 24px;
}

#roadmap .step:nth-child(even) p {
    text-align: end;
    padding: 24px 24px 24px 0;
}

#roadmap .step .ball {
    min-height: 32px;
    min-width: 32px;
    font-size: 16px;
    color: var(--primary-color);
    background: var(--caribbean-green);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

#roadmap .step.disabled .ball {
    color: transparent;
    background: transparent;
    border: 2px solid var(--caribbean-green);
}

#roadmap .step .line:nth-child(1) {
    width: 100%;
    height: 2px;
    background: var(--caribbean-green);
}

#roadmap .step .line:nth-child(2) {
    width: 2px;
    height: 100%;
    background: var(--caribbean-green);
}

#roadmap .step.disabled .line {
    /*background: rgba(255, 255, 255, 0.3)!important;*/
    background: var(--caribbean-green);
}

#roadmap .step:last-child .line:nth-child(2) {
    display: none;
}

/*=== Investor Portal - Contact Us ===*/
#investorPortal #contact {
    margin-bottom: 64px;
}

#investorPortal #contact {
    margin-bottom: 64px;
}

#investorPortal #contact h2 {
    text-align: center;
    margin-bottom: 32px;
}

#investorPortal .waitlist-right-top {
    max-width: 500px;
    border: 2px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    margin: 0 auto;
}

/*=== Investor Portal - Footer ===*/
#investorPortal footer {
    background: var(--primary-color);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#investorPortal footer a:hover {
    color: var(--caribbean-green);
}