@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Light.woff2') format('woff2'),
        url('/fonts/Manrope-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Bold.woff2') format('woff2'),
        url('/fonts/Manrope-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-ExtraBold.woff2') format('woff2'),
        url('/fonts/Manrope-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Medium.woff2') format('woff2'),
        url('/fonts/Manrope-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Regular.woff2') format('woff2'),
        url('/fonts/Manrope-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Thin.woff2') format('woff2'),
        url('/fonts/Manrope-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Semibold.woff2') format('woff2'),
        url('/fonts/Manrope-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('/fonts/GreycliffCF-Medium.woff2') format('woff2'),
        url('/fonts/GreycliffCF-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('/fonts/GreycliffCF-Light.woff2') format('woff2'),
        url('/fonts/GreycliffCF-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('/fonts/GreycliffCF-Bold.woff2') format('woff2'),
        url('/fonts/GreycliffCF-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('/fonts/GreycliffCF-Regular.woff2') format('woff2'),
        url('/fonts/GreycliffCF-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('/fonts/GreycliffCF-DemiBold.woff2') format('woff2'),
        url('/fonts/GreycliffCF-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --color: #0C1217;
    --akcent: #00D953;
    --manrope: 'Manrope', sans-serif;
    --roboto: "Roboto Mono", monospace;
    --greycliff: "Greycliff CF", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

html {scroll-behavior: smooth;}

body {
    font-family: var(--manrope);
    font-size: 22px;
    line-height: 1.6;
    background: #f0f0f2;
    color: var(--color);
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {line-height: 1.2;}

img {
    max-width: 100%;
    height: auto;
}

a {text-decoration: none;}

sup {
    vertical-align: super;
    font-size: 70%;
    line-height: 0;
}
sup.dagger {font-size: 60%;}

p + p {margin-top: 25px;}
p b {font-weight: 500;}

h2.title {
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -4%;
    color: #000229;
}
h2.title span {color: var(--akcent);}
h2.title sup.number {
    font-weight: normal;
    font-size: 12px;
}

.subtitle {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}

.sub {
    font-size: 18px;
    color: var(--color);
}
.sub a {
    color: var(--color);
    text-decoration: underline;
}
.sub a:hover {text-decoration: none;}

.tx-c {text-align: center;}
.tx-l {text-align: left;}
.tx-r {text-align: right;}

.wrapper {overflow: hidden;}
.d-none {display: none;}

.center {
    max-width: 1625px;
    margin: 0 auto;
    padding: 0 15px;
}

.main-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F6;
    color: #abacb8;
    min-height: 30px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 30px;
}

@media (max-width: 1800px) {
    h2.title {font-size: 51px;}
}

@media (max-width: 1600px) {
    .subtitle {font-size: 16px;}
    h2.title {font-size: 54px;}

    .center {max-width: 1300px;}

    .main-label {
        padding: 0 15px;
        font-size: 15px;
    }
}

@media (max-width: 1400px) {
    h2.title {font-size: 50px;}
}

@media (max-width: 1279px) {
    h2.title {font-size: 4.1vw;}
    body {font-size: 18px;}
}

@media (max-width: 991px) {
    .h-991 {display: none !important;}
    .s-991 {display: block !important;}
}

@media (max-width: 600px) {
    .h-600 {display: none !important;}
    .s-600 {display: block !important;}

    body {font-size: 16px;}
    h2.title {font-size: 8vw;}
    .subtitle {
        font-size: 13px;
        color: rgba(255,255,255,.7);
    }

    .main-label {
        font-size: 11px;
        min-height: 35px;
    }

    .sub {
        font-size: 16px;
        font-weight: normal;
    }
}

/* ------------------ BUTTON ------------------ */
.btn-group {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 12px;
    min-height: 56px;
    min-width: 195px;
    padding: 0 30px;
    font-family: var(--manrope);
    font-size: 18px;
    font-weight: 500;
    color: #26368B;
    border-radius: 30px;
    white-space: nowrap;
    background: var(--akcent);
}
.btn > div {
    position: relative;
    top: 0;
    overflow: hidden;
    max-height: 28px;
}
.btn > div > div {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    transition: all 0.2s ease-out;
}
.btn svg {
    width: 8px;
    height: 15px;
    margin-top: 1px;
}
.btn:hover > div > div {transform: translateY(-50%);}
.btn.glass {
    background: rgba(255,255,255,.31);
    backdrop-filter: blur(7px);
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.5);
    color: #fff;
}
.btn.white {
    background: #fff;
    color: #26368B;
}
.btn.grad {
    background: linear-gradient(319.31deg, #0D96DB -33.16%, #26368B 68.47%);
    color: #fff;
}
.btn.ghost {
    background: transparent;
    color: #000229;
    border: 1px solid #EBEBEE;
}
.btn.transition {
    background: none;
    color: #fff;
    padding: 0;
    font-size: 16px;
    gap: 10px;
}
.btn.transition > div {max-height: 26px;}
.btn.transition svg {zoom: 0.8;}
.btn.gray {
    background: #DFDFE4;
    color: #000229;
}
.btn.gray:hover {
    color: #fff;
    background: linear-gradient(319.31deg, #0D96DB -33.16%, #26368B 68.47%);
}

@media (max-width: 991px) {
    .btn-group {gap: 5px 30px;}
}

/* ------------------ HEADER ------------------ */
.header {
    background: #fff;
    padding: 2px 0;
    border-radius: 0 0 20px 20px;
}
.header .center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header .logo {
    display: inline-flex;
    max-width: 360px;
}

@media (max-width: 1279px) {
    .header {zoom: 0.9;}
}

@media (max-width: 991px) {
    .header .btn {
        min-width: auto;
        padding: 0 20px;
    }
}

/* ------------------ INTRO ------------------ */
.rounded-sm {
    border-radius: 32px;
    margin-top: 20px;
}

.intro {
    background: linear-gradient(328.29deg, #0D96DB -35.92%, #26368B 43.59%);
    position: relative;
    color: #fff;
    margin-top: 15px;
    overflow: hidden;
}

.intro .center {
    display: flex;
    gap: 15px;
}

.intro-content {
    max-width: 730px;
    width: 100%;
    padding-top: 90px;
    padding-bottom: 195px;
}

.intro-content h3 {
    font-size: 60px;
    font-weight: normal;
    line-height: 1.25;
}

.intro-content .subtitle {
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    margin-bottom: 10px;
    color: #fff;
}
.intro-content .subtitle b {font-weight: 600;}

.intro-content .title {
    font-size: 63px;
    font-weight: normal;
}
.intro-content .title b {
    font-weight: 600;
    font-size: 84px;
    color: #6efb7e;
}

.intro-content .text {
    font-size: 17px;
    font-weight: normal;
    line-height: 1.4;
    margin: 20px 0 30px 0;
    max-width: 675px;
}
.intro-content .text b {font-weight: bold;}

.info {
    font-size: 22px;
    font-weight: bold;
    padding-left: 20px;
    border-left: 4px solid #fff;
}

.intro-content .info {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    padding-left: 12px;
    border-width: 3px;
    margin-bottom: 25px;
    margin-top: 20px;
    max-width: 665px;
}
.intro-content .info b {font-weight: bold;}

.intro-image {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
}
.intro-image .image {
    margin-top: auto;
    display: flex;
    position: relative;
    z-index: 2;
    min-width: 1050px;
    min-height: 500px;
    left: -100px;
}
.intro-image .image img {
    position: relative;
    z-index: 2;
    width: 100%;
    object-fit: cover;
}

.wrap-orbit {
    width: 1002px;
    height: 1002px;
    position: absolute;
    top: calc(-50% - 150px);
    right: -70px;
    opacity: 0.11;
}
.orbit {
    position: absolute;
    inset: 0;
    animation: orbit 20s linear infinite;
}
.orbit img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-1 {animation-duration: 12s;}
.orbit-2 {animation-duration: 18s;}
.orbit-3 {animation-duration: 25s;}
.orbit-7 {animation-duration: 60s;}

@keyframes orbit {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.product {
    position: absolute;
    left: -100px;
    bottom: 100px;
    max-width: 350px;
    z-index: 3;
    background: rgba(0,0,0,.1);
    backdrop-filter: blur(15px);
    border-radius: 22px;
    box-shadow: inset 1px 1px rgba(255,255,255,.3), inset -1px -1px rgba(255,255,255,.3);
    padding: 15px 10px 0 35px;
    animation: floatCloud 50s ease-in-out infinite alternate;
}
.product img:last-child {
    margin-bottom: -25px;
    margin-top: 5px;
    margin-left: -5px;
}
.product h4 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.5;
}
.product p {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

@keyframes floatCloud {
    0% {transform: translateY(0px) translateX(0px);}
    50% {transform: translateY(20px) translateX(20px);}
    100% {transform: translateY(-20px) translateX(-20px);}
}

@media (max-width: 1600px) {
    .rounded-sm {border-radius: 25px;}

    .intro-content {zoom: 0.9;}
    .intro-image .image {zoom: 0.87;}
    .product {
        zoom: 0.8;
        left: 20px;
        bottom: 205px;
    }
    .wrap-orbit {
        zoom: 0.75;
        top: calc(-50% - 90px);
    }
}

@media (max-width: 1279px) {
    .rounded-sm {border-radius: 25px;}

    .intro-content {zoom: 0.8;}
    .intro-image .image {zoom: 0.75;}
    .product {
        zoom: 0.7;
        left: 75px;
        bottom: 150px;
    }
    .wrap-orbit {
        zoom: 0.6;
        right: -250px;
        top: calc(-50% - 10px);
    }
}

@media (max-width: 991px) {
    .intro-content {
        zoom: 1;
        padding-top: 70px;
        padding-bottom: 70px;
        max-width: 430px;
    }
    .intro-content .subtitle {font-size: 13px;}
    .intro-content .title {font-size: 35px;}
    .intro-content .title b {font-size: 45px;}
    .intro-content h3 {font-size: 30px;}
    .intro-content .info {font-size: 16px;}
    .intro-content .text {font-size: 14px;}

    .wrap-orbit {right: -400px;}
}

@media (max-width: 600px) {
    .rounded-sm {border-radius: 20px;}

    .intro {background: linear-gradient(172.8deg, #26368B 7.1%, #26368B 44.93%, #1A64B1 82.75%);}
    .intro:before {display: none;}
    .intro .center {flex-direction: column;}

    .intro-content {
        zoom: 1;
        padding-top: 40px;
        padding-bottom: 0;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }
    .intro-content .title {font-size: 7.9vw;}
    .intro-content .title b {
        font-size: 11.2vw;
        display: block;
    }
    .intro-content h3 {font-size: 7.7vw;}
    .intro-content .subtitle {
        font-size: 3vw;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .intro-content .info {
        font-size: 3.6vw;
        line-height: 1.7;
    }
    .intro-content .text {
        font-size: 3.2vw;
        font-weight: 500;
        line-height: 1.7;
    }

    .btn-group {
        justify-content: center;
        padding: 0 10px;
    }
    .btn-group .btn {width: 100%;}

    .intro-image {
        margin-top: -20px;
        position: relative;
        width: auto;
    }
    .intro-image .image {
        zoom: 1;
        min-width: 610px;
        left: initial;
        right: 70px;
    }

    .wrap-orbit {
        top: calc(-50% + 200px);
        right: -685px;
        zoom: 0.5;
    }

    .product {
        zoom: 0.8;
        left: 15px;
        bottom: 60px;
    }
}

/* ------------------ XYOSTED ------------------ */
.xyosted {
    background: #fff;
    padding: 35px 0 50px 0;
}

.xyosted .center {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    align-items: center;
}

.xyosted-product {
    background: linear-gradient(340.32deg, #0D96DB -38.73%, #26368B 39.81%);
    border-radius: 30px;
    position: relative;
    display: flex;
    color: #fff;
}
.xyosted-product .badge {
    position: absolute;
    top: -25px;
    right: 28px;
}
.xyosted-product .disclosure {
    max-width: 175px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 135px;
    right: 10px;
}
.xyosted-product .wrap {
    max-width: 380px;
    width: 100%;
    padding-left: 45px;
    padding-top: 40px;
    padding-bottom: 50px;
}
.xyosted-product .head {
    max-width: 315px;
    width: 100%;
}
.xyosted-product .head img {width: 100%;}
.xyosted-product .head h3 {
    font-size: 61px;
    font-weight: 600;
}
.xyosted-product .head p {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
}

.xyosted-product ul {
    margin-top: 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xyosted-product li {
    padding: 15px 20px;
    background: rgba(217, 217, 217, .08);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--roboto);
    font-size: 13px;
    font-weight: normal;
    box-shadow: inset 1px 1px rgba(255,255,255,.5), inset -1px -1px rgba(255,255,255,.5);
}
.xyosted-product li .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(54,54,54,.3);
    border-radius: 3px;
    font-size: 10px;
    padding: 0 8px;
    min-height: 20px;
    min-width: 70px;
}
.xyosted-product li:first-child {
    flex-direction: column;
    align-items: start;
    padding-bottom: 7px;
}
.xyosted-product .proportions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9px;
}
.xyosted-product .proportions > div {
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
    min-height: 80px;
}
.xyosted-product .proportions > div p {
    font-size: 16px;
    font-weight: normal;
}
.xyosted-product .proportions > div:nth-child(2) {background: #1f7f78;}

.xyosted-product .text-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-family: var(--manrope);
    width: 100%;
}
.xyosted-product .text-arrow svg {
    width: 10px;
    height: 15px;
    transform-origin: center;
    transform: rotate(-90deg);
    color: var(--akcent);
}

.xyosted-product  .wrap > a {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-decoration: underline;
}
.xyosted-product .wrap > a:hover {text-decoration: none;}

.xyosted-product .image {
    position: absolute;
    top: -60px;
    right: 0;
    max-width: 490px;
}

.xyosted-content {
    padding-left: 90px;
    font-size: 21px;
}
.xyosted-content h2.title {margin: 10px 0 20px 0;}
.xyosted-content p:nth-child(2) {font-weight: 500;}
.xyosted-content p:nth-child(4) {max-width: 735px;}
.xyosted-content p:nth-child(2) b {font-weight: 600;}
.xyosted-content p:nth-child(3) {font-size: 13px;}
.xyosted-content .btn-group {
    margin-top: 35px;
    margin-bottom: 30px;
}
.xyosted-content .btn.transition {color: #000229;}

.xyosted-product .disclaimer {
    position: absolute;
    left: 45px;
    bottom: 30px;
    font-size: 12px;
}

.disclaimer {
    font-size: 13px;
    font-weight: normal;
}

@media (max-width: 1600px) {
    .marquee-xyosted {zoom: 0.9;}

    .xyosted-product {zoom: 0.9;}
    .xyosted-product .badge {
        position: absolute;
        top: -20px;
        right: 28px;
        max-width: 110px;
    }
    .xyosted-product .image {
        top: -50px;
        right: -25px;
        max-width: 420px;
    }
    .xyosted-product .badge {
        position: absolute;
        top: -15px;
        right: 23px;
        max-width: 105px;
    }
    .xyosted-product .disclosure {
        max-width: 175px;
        font-size: 9px;
        top: 115px;
    }
    .xyosted-content {
        zoom: 0.83;
        padding-left: 55px;
        font-size: 22.5px;
    }
}

@media (max-width: 1279px) {
    .marquee-xyosted {margin-bottom: 40px;}
    .xyosted-product .badge {zoom: 0.8;}
    .xyosted-product {zoom: 0.8;}
    .xyosted-product .wrap {
        max-width: 365px;
        padding-left: 30px;
        padding-top: 25px;
    }
    .xyosted-product .image {
        top: -25px;
        right: 26px;
        max-width: 305px;
        transform: rotate(13deg);
    }
    .xyosted-product .badge {right: 34px;}
    .xyosted-product .disclosure {
        font-size: 8px;
        top: 90px;
    }

    .xyosted-product .disclaimer {left: 30px;}
}

@media (max-width: 991px) {
    .xyosted .center {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .xyosted-content {
        zoom: 1;
        padding-left: 0;
    }
    .xyosted-content h2.title {max-width: 67vw;}
    .xyosted-product {
        max-width: 750px;
        width: 100%;
        margin: 0 auto;
    }
    .xyosted-content .btn-group {
        justify-content: center;
        margin-bottom: 30px;
    }

    .disclaimer {
        text-align: center;
        font-size: 12px;
    }

    .xyosted-product .image {
        top: 125px;
        right: inherit;
        left: 240px;
        max-width: 355px;
    }

    .xyosted-product .badge {
        right: 325px;
        top: 20px;
        max-width: 300px;
    }

    .xyosted-product .disclosure {
        font-size: 12px;
        top: 48px;
        text-align: left;
        max-width: 235px;
    }
    .xyosted-product .disclosure br {display: none;}
}

@media (max-width: 600px) {
    .xyosted {
        overflow: hidden;
        padding-top: 50px;
    }
    .xyosted .center {gap: 30px;}
    .xyosted h2.title {margin-top: 20px;}

    .xyosted-product .wrap {
        max-width: 260px;
        padding-left: 15px;
        padding-top: 30px;
    }
    .xyosted-product .head {
        max-width: 153px;
        padding-left: revert-layer;
    }
    .xyosted-product .head h3 {font-size: 36px;}
    .xyosted-product .head p {
        font-size: 6px;
        padding-right: 19px;
    }
    
    .xyosted-content {
        font-weight: normal;
        font-size: 16.5px;
    }
    .xyosted-content h2.title {
        margin: 24px 0 24px 0;
        max-width: inherit;
    }
    .xyosted-content p:nth-child(2) {font-weight: 500;}

    .xyosted-product {
        width: auto;
        margin-left: -15px;
        margin-right: -15px;
        zoom: 1;
        border-radius: 20px;
    }
    .xyosted-product ul {
        margin-top: 30px;
        margin-bottom: 10px;
        gap: 10px;
    }
    .xyosted-product li {
        padding: 12px 10px;
        border-radius: 10px;
        gap: 10px;
        font-size: 9px;
    }
    .xyosted-product li .label {
        font-size: 8px;
        padding: 0 5px;
        min-height: 17px;
        min-width: 60px;
    }

    .xyosted-product .text-arrow {font-size: 10px;}

    .xyosted-product .image {
        z-index: 2;
        max-width: 284px;
        top: 80px;
        left: 168px;
        width: 100%;
        transform-origin: center;
        transform: rotate(10deg);
    }

    .xyosted-product .badge {
        zoom: 0.6;
        right: 267px;
        top: 15px;
        max-width: 300px;
    }

    .xyosted-product .proportions > div {
        font-size: 25px;
        min-height: 55px;
    }

    .xyosted-product .wrap > a {font-size: 10px;}

    .xyosted-product .disclosure {
        font-size: 7.5px;
        top: 37px;
        text-align: left;
        max-width: 143px;
    }

    .disclaimer {
        font-size: 10px;
        text-align: left;
    }

    .xyosted-product .disclaimer {
        left: 15px;
        bottom: 10px;
        font-size: 10px;
        max-width: 265px;
    }
}

@media (max-width: 400px) {
    .xyosted-product .image {
        right: -75px;
        left: 149px;
        max-width: 275px;
        transform: rotate(18deg);
    }
    .xyosted-product .head {max-width: 120px;}
    .xyosted-product .badge {zoom: 0.55;}
    .xyosted-product .disclosure {
        font-size: 7px;
        max-width: 134px;
        right: 5px;
    }
}

/* ------------------ CONTROL ------------------ */
.control {
    background: #fff;
    padding: 85px 0 55px 0;
}

.control .tx-c {
    max-width: 1120px;
    margin: 0 auto;
}
.control .tx-c b {font-weight: 600;}
.control h2.title {
    margin-top: 10px;
    margin-bottom: 25px;
}

.splide-control.is-initialized:not(.is-active) ul {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    margin: 90px auto 35px auto !important;
    max-width: 1450px;
}
.splide-control .slide {
    padding: 0 25px;
    position: relative;
    text-align: center;
}
.splide-control .slide:after {
    content: '';
    display: block;
    width: 1px;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    background: #DFDFE4;
}
.splide-control li:last-child .slide:after {display: none;}
.splide-control .slide {height: 100%;}
.splide-control .slide h3 {
    font-size: 64px;
    font-weight: 600;
    color: #000229;
    margin-bottom: 10px;
}
.splide-control .slide sup {line-height: 1;}
.splide-control .slide p {
    font-size: 17px;
    font-weight: 500;
    max-width: 315px;
    min-height: 75px;
    margin: 0 auto 20px auto;
}
.splide-control .slide small {
    font-size: 12px;
    font-weight: normal;
    margin-top: auto;
    display: block;
}

.collapsed {
    max-height: 165px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.control .dropdown {
    padding: 25px 25px 5px 25px;
    border-radius: 20px;
    border: 1.5px solid #BEBEC5;
    margin: 0 auto;
    font-size: 14px;
    max-width: 1280px;
}
.control .dropdown p + p {margin-top: 15px}
.control .dropdown p b {font-weight: 600;}
.control .dropdown a {
    color: var(--color);
    text-decoration: underline;
}
.control .dropdown a:hover {text-decoration: none;}
.control .dropdown button {
    background: none;
    outline: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: var(--color);
    margin-right: -10px;
    cursor: pointer;
    transition: all 0.3s;
}
.control .dropdown button:hover {color: var(--akcent)}

.control .disclaimer {
    max-width: 1250px;
    font-size: 13px;
    margin: 35px auto 0 auto;
    text-align: center;
}

.control .btn-group .btn {min-width: 330px;}
.control .btn-group {
    flex-direction: column;
    align-items: center;
}
.control .btn.transition {color: #000229;}

.splide__arrow {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F5F5F6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: inherit;
    bottom: 0;
    right: 0;
    transform: none;
    opacity: 1;
}
.splide__arrow svg {display: none;}
.splide__arrow:after {
    content: '';
    display: inline-block;
    position: absolute;
    inset: 0;
    background: url(../img/ic-arr.svg) no-repeat center;
    transform-origin: center;
}
.splide__arrow--prev {
    left: inherit;
    right: 85px;
}
.splide__arrow--prev:after {transform: rotate(-180deg);}

.splide__pagination {
    position: static;
    transform: none;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0 15px;
    padding: 0;
    background: #F5F5F6;
    border-radius: 24px;
    margin-top: 80px;
    min-height: 59px;
    max-width: 180px;
    position: relative;
    bottom: 0;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;           
    -ms-overflow-style: none;
    justify-content: flex-start;   
    scroll-snap-type: x mandatory;
    border-left: 25px solid #F5F5F6;
    border-right: 25px solid #F5F5F6;
}
.splide__pagination::-webkit-scrollbar {
    display: none;
}

.splide__pagination li {
    line-height: 0;
    flex: 0 0 auto;
    scroll-snap-align: center;
}
.splide__pagination li button {
    margin: 0;
    background: #D9D9D9;
}
.splide__pagination li button.is-active {
    transform: none;
    background: #000229;
}

@media (max-width: 1600px) {
    .control {padding: 60px 0;}
    .control .center {zoom: 0.9;}
    .splide-control .slide p {font-size: 15px;}
}

@media (max-width: 1279px) {
    .control {padding: 50px 0;} 
    .control .tx-c {zoom: 0.8;}
    .control .splide-control {zoom: 0.9;}
    .control .slide {padding: 0 10px;}

    .splide__arrow,
    .splide__pagination {zoom: 0.8;}
}

@media (max-width: 991px) {
    .control .center,
    .control .splide-control,
    .control .tx-c {zoom: 1;}
    .splide-control {margin: 50px -15px;}
    .splide-control .slide {
        padding: 0 25px;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .control {padding: 50px 0 30px 0;}
    .control h2.title {
        margin-top: 20px;
        margin-bottom: 15px;
        font-size: 7.3vw;
    }
    .control h2.title br {display: none;}

    .control .tx-c {
        font-weight: 500;
        font-size: 15.5px;
    }

    .splide-control {margin: 50px -15px 30px -15px;}
    .splide-control .slide h3 {font-size: 45px;}
    .splide-control .slide p {
        font-size: 16px;
        margin: 0 auto 10px auto;
    }

    .splide-control .splide__pagination {
        left: 50%;
        transform: translateX(-50%);
        margin-top: 40px;
    }

    .control .disclaimer {font-size: 10px;}

    .control .dropdown {
        padding: 15px 10px 5px 10px;
        border-radius: 18px;
        font-size: 12px;
        max-width: 1280px;
    }
    .control .dropdown button {
        font-size: 11px;
        margin-right: 7px;
    }

    .collapsed {max-height: 135px;}

    .splide__arrow, 
    .splide__pagination {
        zoom: 0.7;
    }
}

/* ------------------ CLICK ------------------ */
.click {
    position: relative;
    background: #fff;
    overflow: hidden;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.click .center {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.click-content {
    padding: 80px 15px 95px 0;
    color: #000229;
    max-width: 745px;
    margin-left: auto;
}
.click-content small {
    display: block;
    font-size: 12px;
    margin-top: 15px;
}
.click h2.title {
    letter-spacing: 0;
    margin: 10px 0 25px 0;
    max-width: 700px;
}
.click h2.title b {font-weight: 600;}
.click .fact {
    border-left: 4px solid #000229;
    padding-left: 15px;
    font-weight: 600;
}
.click-content .descr {
    margin-top: 25px;
    max-width: 705px;
}
.click-content ul {
    margin: 30px 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.click-content ul li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 20px;
}
.click-content ul svg {
    width: 17px;
    height: 17px;
}
.click-content .btn.transition {
    color: #26368B;
    font-weight: 600;
    font-size: 22px;
    margin-top: 10px;
}
.click-content .btn.transition > div {max-height: 35px;}
.click-content .btn.transition svg {zoom: 1;}
.click-content .btn.transition svg {margin-top: 3px;}

.click-content .disclaimer {
    max-width: 700px;
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
}

.click-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(324.4deg, #0D96DB -35.08%, #26368B 50.83%);
    display: flex;
    align-items: end;
}
.click-image .scale {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    transform-origin: center;
    will-change: transform;
}

@keyframes scale {
    0% {transform: rotate(0) translateX(0);}
    25% {transform: rotate(-2deg) translateX(30px);}
    50% {transform: rotate(0) translateX(0);}
    75% {transform: rotate(2deg) translateX(-30px);}
    100% {transform: rotate(0) translateX(0);}
}

.click-image .man {
    position: relative;
    z-index: 3;
    max-height: 900px;
    height: 100%;
    display: flex;
    margin-left: auto;
}
.click-image .man img {
    object-fit: cover;
    object-position: left bottom;
}
.click-image small {
    position: absolute;
    left: 45px;
    bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 3;
    color: #fff;
}

.click-image .product {
    top: 75px;
    left: 35px;
    bottom: initial;
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.click-image .metrics {
    position: absolute;
    right: 20px;
    bottom: 50px;
    z-index: 3;
    color: #fff;
}

.metrics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 380px;
    width: 100%;
}
.metrics > div {
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(20px);
    padding: 35px;
}
.metrics .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}
.metrics .head p {margin: 0 !important;}
.metrics ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.metrics ul li {max-width: 85px;}
.metrics ul strong {
    font-size: 28px;
    line-height: 1;
    font-weight: normal;
}
.metrics ul strong sub {
    font-size: 13px;
    vertical-align: baseline;
}
.metrics ul p {
    font-size: 7.5px;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.metrics .progres {
    height: 5px;
    background: #777272;
    border-radius: 4px;
    display: flex;
}
.metrics .progres span {
    display: block;
    background: #fff;
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s;
    width: var(--width);
}

.metrics .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.metrics .box strong {
    font-size: 28px;
    line-height: 1;
    font-weight: normal;
}
.metrics .box p {
    font-size: 7.5px;
    text-transform: uppercase;
}

.metrics .box img {
    transform-origin: center;
    animation: parts 10s linear forwards infinite;
}

@keyframes parts {
    0% {transform: rotate(0) skew(0, 0) translateY(0);}
    25% {transform: rotate(3deg) skew(10deg, 10deg) translateY(10px);}
    50% {transform: rotate(0) skew(0, 0) translateY(0);}
    75% {transform: rotate(-3deg) skew(-10deg, -10deg) translateY(-10px);}
    100% {transform: rotate(0) skew(0, 0) translateZ(0);}
}

.click-image .disclaimer {
    position: absolute;
    right: 30px;
    bottom: 15px;
    z-index: 3;
    color: #fff;
    font-size: 12px;
}

@media (max-width: 1600px) {
    .click-content,
    .click-image {zoom: 0.9;}
    .click-content {padding: 55px 15px 60px 0;}
    .click-image .man {max-height: 830px;}
}

@media (max-width: 1279px) {
    .click-content,
    .click-image {zoom: 0.8;}
    .click-content {padding: 50px 15px 50px 0;}
    .click-content ul li {
        gap: 10px;
        font-size: 17px;
    }
    .click-content .btn.transition {zoom: 0.9;}
    .click-image .metrics {
        right: 20px;
        bottom: 50px;
        zoom: 0.8;
    }

    .click-image .disclaimer {
        right: 25px;
        bottom: 12px;
        font-size: 10px;
    }
}

@media (max-width: 991px) {
    .click .center {grid-template-columns: 1fr;}
    .click-content {
        padding-right: 0;
        margin-left: 0;
        max-width: inherit;
        zoom: 1;
    }
    .click .fact {max-width: 70vw;}

    .click-image {
        zoom: 1;
        position: relative;
        width: auto;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 25px 25px 0 0;
    }
}

@media (max-width: 600px) {
    .click .d-none.s-600 {
        order: -2;
        padding: 30px 0 30px 0;
    }

    .click-content {
        padding: 0 0 35px 0;
        font-weight: normal;
        font-size: 16.5px;
    }
    .click h2.title {margin-top: 15px;}
    .click .fact {
        max-width: initial;
        border-left: 3px solid #000229;
        padding-left: 10px;
    }
    .click-content ul {
        margin: 25px 0 20px 0;
        gap: 7px;
    }
    .click-content ul li {
        gap: 7px;
        font-size: 15px;
    }
    .click-content .btn.transition {zoom: 0.75;}
    .click-content .disclaimer {margin-top: 30px;}

    .click-image {
        border-radius: 20px;
        order: -1;
        overflow: hidden;
    }
    .click-image .metrics {
        right: 15px;
        bottom: 50px;
        zoom: 0.57;
    }
    .metrics > div {padding: 25px;}

    .click-image .disclaimer {
        right: 20px;
        bottom: 10px;
        font-size: 7px;
    }

    .click-image .product {
        top: 150px;
        left: 40px;
        bottom: initial;
        zoom: 0.46;
    }

    .click-image .scale {
        position: absolute;
        top: 60px;
        right: inherit;
        min-width: 600px;
        transform: translateX(-50%);
    }
}

@media (max-width: 400px) {
    .click-image .metrics {zoom: 0.59;}
    .metrics > div {padding: 25px;}
    .click-image .disclaimer {font-size: 7px;}
}

/* ------------------ STEP ------------------ */
.step {
    background: #fff;
    padding: 40px 0 60px 0;
}
.step .sub b {font-weight: 600;}
.step .center {
    position: sticky;
    top: -15rem;
    z-index: 20;
}
.step h2.title {
    margin: 10px auto 20px auto;
    max-width: 750px;
}
.step .sub {
    max-width: 1265px;
    margin-left: auto;
    margin-right: auto;
}

.splide-step {padding: 30px 0 45px 0;}
.splide-step.is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.step-card {
    opacity: 0.2;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-card .image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
    max-height: 383px;
}
.step-card .image img {
    width: 64%;
    height: auto;
    object-fit: cover;
    border-radius: 32px;
    transition: width 0.6s cubic-bezier(0.05, 0.7, 0.1, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
}
.step-card.is-active,
.splide-step .is-active .step-card {opacity: 1;}
.step-card.is-active .image img,
.splide-step .is-active .step-card .image img {width: 100%;}

.step-card .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 30px;
    background: #F5F5F6;
    color: #6F707F;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 15px;
    margin: 20px 0;
}

.step-card .descr {
    position: relative;
    padding-top: 30px;
    font-size: 17px;
    text-align: center;
}
.step-card .descr:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: #6F707F;
}
.step-card .descr h4 {font-weight: bold;}

.step .btn-group {
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.step .btn {min-width: 280px;}
.step .btn.transition {color: #000229;}

.step .link {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.step .link span {
    color: var(--color);
    text-decoration: underline;
    cursor: pointer;
}
.step .link span:hover {text-decoration: none;}

@media (max-width: 1600px) {
    .step .tx-c, 
    .step .btn-group {zoom: 0.9;}
    .step-card .image {max-height: 300px;}
    .step .center {top: -13rem;}
}

@media (max-width: 1279px) {
    .step {padding: 50px 0 50px 0;}
    .step .tx-c, 
    .step .btn-group,
    .splide-step.is-initialized:not(.is-active) .splide__list {zoom: 0.8;}
    .step-card .descr {font-size: 15px;}

    .step .center {top: -11rem;}
}

@media (max-width: 991px) {
    .step .tx-c, 
    .step .btn-group {zoom: 1;}

    .step .center {top: -13rem;}
}

@media (max-width: 810px) {
    .step {overflow: hidden;}
    .step .tx-c {
        max-width: 650px;
        margin: 0 auto;
    }

    .splide-step.is-initialized:not(.is-active) .splide__list {zoom: 1;}

    .splide-step .splide__track {overflow: visible;}
}

@media (max-width: 600px) {
    .step {padding: 50px 0 30px 0;}
    .step h2.title {
        margin: 25px 0 20px 0;
        font-size: 8.5vw;
    }
    .step .sub {
        font-size: 15.5px;
        font-weight: 500;
    }
    .step .sub br {display: none;}

    .splide-step {padding: 15px 0 20px 0;}

    .step-card .tag {
        min-width: 60px;
        min-height: 25px;
        font-size: 14px;
        margin: 13px 0;
    }
    .step-card .descr {
        font-size: 14px;
        padding-top: 20px;
    }
}

/* ------------------ HEALTH ------------------ */
.content-accordeon {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

.health {
    background: linear-gradient(339.66deg, #0D96DB -39.18%, #26368B 55.84%);
    position: relative;
    overflow: hidden;
}
.health .center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.health-content {
    padding-right: 140px;
    color: #fff;
    padding: 85px 125px 35px 0;
}
.health-content h2.title {
    color: #fff;
    font-weight: normal;
    font-size: 44px;
    margin: 15px 0 15px 0;
}
.health-content h2.title b {font-weight: 600;}
.health-content .text {
    font-size: 20px;
    font-weight: 500;
    max-width: 700px;
    margin-bottom: 35px;
}
.health-content .text b {font-weight: bold;}
.health-content h4 {
    font-size: 28px;
    font-weight: 600;
    margin: 25px 0 20px 0;
}
.health-content h4 span {color: #FF00FF;}

.health-content .small-text {
    font-size: 16px;
    font-family: var(--manrope);
    font-weight: 500;
    margin-top: 35px;
}

.health-content .accordeon {
    margin: 14px 0 35px 0;
    color: #fff;
}
.health-content > small {
    font-size: 13px;
    display: block;
}

.btn-accordeon {
    display: flex;
    align-items: center;
    gap: 18px;
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
}

.health-content .accordeon {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.health-content .item-accordeon {
    border-radius: 24px;
    background: rgba(255,255,255,.1);
    transition: all 0.3s ease;
}
/*.health-content .item-accordeon.active {background: rgba(255,255,255,.2);}*/
.health-content .btn-accordeon {
    padding: 19px 24px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    width: 100%;
    text-align: left;
    cursor:default;
}
.health-content .btn-accordeon > svg {
    width: 26px;
    height: 26px;
}
.health-content .btn-accordeon .caret {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    margin-left: auto;
    transition: all 0.3s ease;
    transform-origin: center;
    flex-shrink: 0;
}
.health-content .item-accordeon.active .caret {
    transform: rotate(-180deg);
}
.health-content .btn-accordeon .caret svg {
    transform: rotate(90deg);
    width: 9px;
    height: 11px;
    margin-top: 2px;
}
.health-content .content-accordeon .inner {
    padding: 0 19px 24px 19px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.health-content .desrc {
    font-size: 15px;
    font-weight: 500;
}
.health-content .desrc a {color: #fff;}
.health-content .desrc b {font-weight: bold;}

.health-xyosted {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
}
.health-xyosted .image {
    margin: auto auto 0 auto;
    max-width: 650px;
    display: flex;
    position: relative;
    z-index: 2;
}
.health-xyosted:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(0, #1C5FAD, transparent);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    z-index: 5;
}

.logo-xyosted {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: right;
    position: absolute;
    top: 120px;
    right: 40px;
    color: #fff;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.logo-xyosted img:nth-child(2) {
    max-width: 200px;
    margin: 25px 0 15px 0;
}
.logo-xyosted small {
    display: block;
    font-size: 12px;
    max-width: 202px;
}
.logo-xyosted h3 {
    font-size: 90px;
    font-weight: 600;
    line-height: 1;
}
.logo-xyosted p {
    font-family: var(--roboto);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    padding-right: 45px;
}
.logo-xyosted img:last-child {
    max-width: 200px;
    margin: 30px auto 0 auto;
}

.health-xyosted .percent {
    width: 315px;
    height: 315px;
    position: absolute;
    top: 265px;
    right: 85px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.health-xyosted .percent:after {
    content: '';
    display: block;
    position: absolute;
    top: -60px;
    right: -60px;
    left: -60px;
    bottom: -60px;
    background: url(../img/health/percent.svg) no-repeat center;
    background-size: contain;
    animation: parts 10s linear forwards infinite;
}

@keyframes parts {
    0% {transform: rotate(0);}
    25% {transform: rotate(5deg);}
    50% {transform: rotate(0);}
    75% {transform: rotate(-5deg);}
    100% {transform: rotate(0);}
}

.health-xyosted .percent strong {
    font-size: 113px;
    font-weight: normal;
    line-height: 1;
}
.health-xyosted .percent p {
    font-size: 15px;
    font-weight: 500;
}
.health-xyosted .percent p b {font-weight: bold;}

.candles {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 8px;
    height: 100%;
    max-height: 210px;
    list-style: none;
    width: 100%;
    padding: 0 15px;
    margin-top: auto;
}
.candles li {
    border-radius: 30px;
    height: 100%;
    background: linear-gradient(355.29deg, #26368B 4.48%, #0D96DB 134.76%);
    animation: spectrum infinite alternate;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0.0, 0.5, 1.0);
}

@keyframes spectrum {
    0% { opacity: 1; max-height: var(--min-h); }
    10% { opacity: 1; max-height: var(--max-h); }
    20% { opacity: 1; max-height: var(--max-h); }
    30% { opacity: 1; max-height: var(--max-h); }
    40% { opacity: 1; max-height: var(--max-h); }
    50% { opacity: 1; max-height: var(--max-h); }
    60% { opacity: 1; max-height: var(--max-h); }
    70% { opacity: 1; max-height: var(--max-h); }
    80% { opacity: 1; max-height: var(--min-h); }
    90% { opacity: 1; max-height: var(--min-h); }
    100% { opacity: 1; max-height: var(--min-h); }
}

.health-xyosted .candles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    grid-template-columns: repeat(18, 1fr);
    gap: 20px;
    max-height: 610px;
}
.health-xyosted .candles li {background: rgba(255,255,255,.1)}

.candles li:nth-child(1)  { --max-h: 98%;  --min-h: 52%; animation-duration: 22s;  animation-delay: 0.00s; }
.candles li:nth-child(2)  { --max-h: 92%;  --min-h: 49%; animation-duration: 28s;  animation-delay: 0.15s; }
.candles li:nth-child(3)  { --max-h: 85%;  --min-h: 46%; animation-duration: 19s;  animation-delay: 0.05s; }
.candles li:nth-child(4)  { --max-h: 79%;  --min-h: 43%; animation-duration: 25s;  animation-delay: 0.30s; }
.candles li:nth-child(5)  { --max-h: 69%;  --min-h: 38%; animation-duration: 30s;  animation-delay: 0.10s; }
.candles li:nth-child(6)  { --max-h: 59%;  --min-h: 33%; animation-duration: 23s;  animation-delay: 0.40s; }
.candles li:nth-child(7)  { --max-h: 49%;  --min-h: 28%; animation-duration: 21s;  animation-delay: 0.20s; }
.candles li:nth-child(8)  { --max-h: 39%;  --min-h: 23%; animation-duration: 27s;  animation-delay: 0.35s; }
.candles li:nth-child(9)  { --max-h: 33%;  --min-h: 20%; animation-duration: 18s;  animation-delay: 0.08s; }
.candles li:nth-child(10) { --max-h: 33%;  --min-h: 20%; animation-duration: 31s;  animation-delay: 0.25s; }
.candles li:nth-child(11) { --max-h: 39%;  --min-h: 23%; animation-duration: 24s;  animation-delay: 0.45s; }
.candles li:nth-child(12) { --max-h: 49%;  --min-h: 28%; animation-duration: 20s;  animation-delay: 0.12s; }
.candles li:nth-child(13) { --max-h: 59%;  --min-h: 33%; animation-duration: 26s;  animation-delay: 0.38s; }
.candles li:nth-child(14) { --max-h: 69%;  --min-h: 38%; animation-duration: 29s;  animation-delay: 0.22s; }
.candles li:nth-child(15) { --max-h: 79%;  --min-h: 43%; animation-duration: 22s;  animation-delay: 0.48s; }
.candles li:nth-child(16) { --max-h: 85%;  --min-h: 46%; animation-duration: 24s;  animation-delay: 0.18s; }
.candles li:nth-child(17) { --max-h: 92%;  --min-h: 49%; animation-duration: 27s;  animation-delay: 0.42s; }
.candles li:nth-child(18) { --max-h: 98%;  --min-h: 52%; animation-duration: 20s;  animation-delay: 0.28s; }

@media (max-width: 1600px) {
    .health-content {
        padding: 70px 35px 35px 0;
        zoom: 0.9;
    }
    .health-content h2.title {font-size: 42px;}
    .health-xyosted .image {zoom: 0.85;}
    .logo-xyosted {
        top: 120px;
        right: 20px;
        zoom: 0.9;
    }
    .health-xyosted .percent {
        zoom: 0.85;
        right: 65px;
    }
    .health-xyosted .candles {zoom: 0.8;}
}

@media (max-width: 1279px) {
    .health-content {
        padding: 50px 25px 50px 0;
        zoom: 0.8;
    }
    .health-content .text {font-size: 17px;}
    .health-content .btn-accordeon {
        padding: 16px 20px;
        font-size: 18px;
        text-align: left;
    }
    .health-content .content-accordeon .inner {padding: 0 20px 20px 20px;}
    .health-content h4 {
        font-size: 20px;
        margin: 20px 0 20px 0;
    }
    .health-xyosted .image {zoom: 0.6;}

    .logo-xyosted {
        top: 0;
        right: -60px;
        zoom: 0.8;
    }

    .health-xyosted .percent {
        top: 200px;
        zoom: 0.8;
        right: 15px;
    }

    .health-xyosted .candles {zoom: 0.6;}
}

@media (max-width: 991px) {
    .health .center {grid-template-columns: 1fr;}
    .health-content .text {max-width: 800px;}
    .health-content {
        padding: 50px 0 50px 0;
        zoom: 1;
    }

    .health-xyosted {
        width: auto;
        position: relative;
    }
}

@media (max-width: 600px) {
    .health {background: linear-gradient(28.67deg, #196AB6 6.07%, #204FA0 41.46%, #26368B 85.09%);}
    .health .subtitle {
        font-size: 11px;
        color: #fff;
        text-transform: capitalize;
    }
    .health-content {padding: 40px 0 25px 0;}
    .health-content h2.title {
        font-size: 7.5vw;
        margin: 20px 0 25px 0;
    }
    .health-content .text {font-size: 15.6px;}
    .health-content .text b {
        font-weight: 600;
        font-size: 17px;
    }
    .health-content h4 {
        font-size: 17px;
        margin: 25px 0 35px 0;
    }

    .health-content .small-text {margin-top: 20px;}

    .health-content .accordeon {gap: 10px;}
    .health-content .item-accordeon {border-radius: 15px;}
    .btn-accordeon {gap: 15px;}
    .health-content .btn-accordeon {
        padding: 10px 17px;
        font-size: 3.1vw;
        font-weight: 500;
        gap: 13px;
    }
    .health-content .btn-accordeon > svg {
        width: 20px;
        height: 20px;
    }
    .health-content .btn-accordeon .caret {
        width: 25px;
        height: 25px;
    }
    .health-content .btn-accordeon .caret svg {
        width: 7px;
        height: 9px;
    }
    .health-content .content-accordeon .inner {
        padding: 0 13px 15px 18px;
        font-size: 13px;
    }

    .health-xyosted .image {
        zoom: 1;
        max-width: 355px;
        min-height: 500px;
        width: 100%;
    }

    .logo-xyosted {
        top: -40px;
        right: -125px;
        zoom: 0.8;
    }
    .logo-xyosted img:first-child {display: none;}
    .logo-xyosted img:last-child {
        max-width: 215px;
        width: 100%;
        margin: 30px 25px 0 auto;
    }
    .logo-xyosted small {max-width: 200px;}

    .health-xyosted .percent {
        top: 145px;
        zoom: 0.5;
        right: 0;
    }

    .health-xyosted .candles {
        zoom: 1;
        padding: 0;
        gap: 8px;
        max-height: 220px;
    }

    .health-xyosted:after {
        height: 150px;
        background: linear-gradient(0, #1C5FAD, transparent);
    }

    .health-content .desrc {
        font-size: 10px;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .health-content .desrc b {font-weight: normal;}
    .health-content > small {font-size: 10px;}
}

/* ------------------ REVIEWS ------------------ */
.reviews {
    background: #fff;
    padding: 60px 0 40px 0;
}
.reviews .tx-c {
    max-width: 785px;
    margin: 0 auto;
}
.reviews h2.title {margin: 10px 0 15px 0;}
.reviews .sub {
    max-width: 645px;
    margin-left: auto;
    margin-right: auto;
}

.marquee {
    display: flex;
    overflow-x: hidden;
    padding: 1px 0;
}
.marquee .list {
    --gap: 40px;
    --duration: 100s;
    display: flex;
    gap: 0 var(--gap);
    animation: spin var(--duration) infinite linear;
    padding-right: var(--gap);
}
.marquee[reverse="true"] .list {animation-direction: reverse;}
.marquee .item {
    --width: 310px;
    width: var(--width);
    flex: 0 0 var(--width);
}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}

.marquee-reviews {margin-top: 40px;}
.marquee-reviews .list {
    --gap: 4px;
    --duration: 300s;
}
.marquee-reviews .item {
    --width: 500px;
    cursor: pointer;
}
.marquee-reviews .image,
.marquee-reviews .content {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.marquee-reviews .image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.marquee-reviews .image small {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 10px;
    color: #fff;
}
.marquee-reviews .content {
    background: #EDEDED;
    padding: 40px 30px;
    font-size: 18px;
    color: #000229;
}
.marquee-reviews .content > p {margin-bottom: 15px;}
.marquee-reviews .content .bottom {margin-top: auto;}
.marquee-reviews .content small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}
.marquee-reviews .content strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-top: 3px;
}

.reviews .foot {
    text-align: center;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reviews .foot > p {
    font-size: 18px;
    color: #000229;
}
.reviews .foot .btn-group {
    margin-top: 30px;
    flex-direction: column;
    gap: 5px;
}
.reviews .foot .btn-group .btn:first-child {min-width: 280px;}
.reviews .foot .btn-group .btn.transition {color: #000229;}
.reviews .foot small {
    display: block;
    font-size: 14px;
    margin-top: 40px;
}

@media (max-width: 1600px) {
    .reviews .tx-c,
    .marquee-reviews,
    .reviews .foot {zoom: 0.9;}
}

@media (max-width: 1279px) {
    .reviews .tx-c {max-width: 670px;}
    .reviews .tx-c,
    .marquee-reviews,
    .reviews .foot {zoom: 0.8;}
}

@media (max-width: 991px) {
    .reviews .tx-c,
    .marquee-reviews,
    .reviews .foot {zoom: 1;}

    .reviews .tx-c {max-width: 67vw;}
    .reviews h2.title {margin: 10px auto 15px auto;}
}

@media (max-width: 600px) {
    .reviews {padding: 45px 0 40px 0;}
    .reviews .tx-c {max-width: inherit;}
    .reviews h2.title {
        margin: 15px auto 20px auto;
        font-size: 8.5vw;
    }
    .reviews .sub {font-size: 18.6px;}

    .marquee-reviews {margin-top: 25px;}
    .marquee-reviews .item {--width: 400px;}
    .marquee-reviews .content {
        padding: 40px 25px;
        font-size: 15px;
        border-radius: 20px;
    }
    .marquee-reviews .content > p {margin-bottom: 10px;}
    .marquee-reviews .content strong {font-size: 13px;}

    .reviews .foot > p {
        font-size: 4vw;
        color: #6F707F;
        font-weight: 500;
    }
    .reviews .foot .btn-group {
        margin-top: 0;
        width: 100%;
    }
    .reviews .foot small {
        font-size: 10px;
        max-width: 350px;
        margin-top: 35px;
    }
}

/* ------------------ FAQ ------------------ */
.faq {
    background: #fff;
    padding: 100px 0 75px 0;
}
.faq .center {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    max-width: 1700px;
    gap: 30px;
}
.faq-title {padding-left: 100px;}
.faq-title h2.title {font-size: 77px;}
.faq-title p {
    font-size: 20px;
    margin: 25px 0;
}
.faq-title .btn {
    min-width: 330px;
    margin-top: 30px;
}

.faq .item-accordeon {border-bottom: 1px solid #ebebee;}
.faq .item-accordeon .inner {
    padding-bottom: 32px;
    font-size: 24px;
}
.faq .item-accordeon a {
    color: var(--color);
    text-decoration: underline;
}
.faq .item-accordeon a:hover {text-decoration: none;}
.faq .item-accordeon .inner small {
    font-size: 16px;
    display: block;
    margin-top: 35px;
}
.faq .btn-accordeon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 30px 0;
    font-size: 26px;
    font-weight: 600;
    font-family: var(--manrope);
    color: #000229;
    width: 100%;
}
.faq .btn-accordeon .caret {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e7e7eb;
    border-radius: 50%;
    margin-left: auto;
    transition: all 0.3s ease;
    transform-origin: center;
    flex-shrink: 0;
}
.faq .btn-accordeon .caret svg {
    transform: rotate(90deg);
    width: 9px;
    height: 11px;
    margin-top: 2px;
    color: #999aa9;
}
.faq .item-accordeon.active .caret {
    transform: rotate(-180deg);
    background: #ebebee;
}

@media (max-width: 1600px) {
    .faq {padding: 60px 0;}
    .faq-title {
        padding-left: 0;
        zoom: 0.9;
    }
    .faq-content {zoom: 0.75;}
}

@media (max-width: 1279px) {
    .faq {padding: 50px 0;}
    .faq-title {zoom: 0.8;}
    .faq-content {zoom: 0.7;}
}

@media (max-width: 991px) {
    .faq .center {
        display: grid;
        grid-template-columns: 1fr;
    }

    .faq h2.title {text-align: center;}
    .faq h2.title br {display: none;}

    .faq-title {
        zoom: 1;
        order: 1;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .faq {
        padding: 30px 0 70px 0;
        border-radius: 20px 20px 0 0;
    }
    .faq h2.title {
        text-align: left;
        max-width: 250px;
    }
    .faq .center {gap: 10px;}
    .faq .btn-accordeon {
        padding: 25px 0;
        font-size: 20px;
    }
    .faq .item-accordeon .inner {
        padding-bottom: 25px;
        font-size: 20px;
        font-weight: 500;
    }
    .faq-title {margin-top: 30px;}
    .faq-title p {
        font-size: 4.1vw;
        font-weight: 500;
        margin: 5px 0 0 0;
    }

    .faq .btn {
        min-height: 60px;
        font-size: 15px;
        padding: 0 20px;
    }
    .faq .btn > div {max-height: 23px;}
}

/* ------------------ IMPORTANT ------------------ */
.important {
    margin-top: 35px;
    background: #fff;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.8;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.important.sticky {
    position: sticky;
    bottom: 0;
    z-index: 999;
    display: block;
    margin: 0;
    color: inherit;
    height: 25vh;
}

.important .c-blue {color: #26368B;}
.important .head {
    background: #1a276b;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    padding: 10px 15px;
    text-align: center;
}
.important .center {
    padding-top: 25px;
    padding-bottom: 60px;
}
.important .center > div {margin: 20px 0 0;}
.important.sticky .center {padding-bottom: 0;}
.important h2,
.important h3 {font-size: 17px;}
.important h3 {margin: 10px 0;}
.important ul li {
    position: relative;
    padding-left: 25px;
}
.important ul li:before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color);
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -2px;
}
.important address {
    margin-top: 90px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
}
.important address b {font-weight: bold;}
.important address a {color: var(--color);}
.important address a:hover {text-decoration: underline;}

@media (max-width: 600px) {
    .important {
        margin-top: -15px;
        background: #f5f5f6;
        font-size: 12px;
        line-height: 1.5;
    }
    .important .center > div {margin-top: 20px;}
    .important h2, .important h3 {
        font-size: 12px;
        font-weight: 600;
    }
    div.head > h2 {
        font-size: 15px;
    }
    .important address {
        margin-top: 20px;
        text-align: left;
    }
}

/* ------------------ FOOTER ------------------ */
.footer {
    background: #000229;
    border-radius: 24px 24px 0 0;
    margin-top: -20px;
    padding-bottom: 25px;
    position: relative;
    z-index: 99;
    top: 0;
    color: #fff;
    list-style: none;
    -webkit-font-smoothing: antialiased;
}

.footer .center {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    gap: 0;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
.footer-main h3 {
    color: #6F707F;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-main ul a {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 13px;
}
.footer-main ul a svg {
    width: 13px;
    height: 13px;
}
.footer-main ul li + li {margin-top: 20px;}
.main-hover {color: #fff;}
.main-hover > div {
    overflow: hidden;
    max-height: 28px;
}
.main-hover > div > div {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    transition: all 0.2s ease-out;
}
.main-hover:hover > div > div {transform: translateY(-50%);}

.footer-social {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    margin-top: 145px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    background: #151637;
    border-radius: 24px;
    padding: 0 32px;
    min-height: 88px;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s ease-out;
}
.footer-social a:hover {
    background: #fff;
    color: #151637;
}
.footer-social a img {display: none;}

.footer-address {
    margin-top: 55px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.footer-address a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
}
.footer-address a:first-child svg {
    width: 16px;
    height: 16px;
}
.footer-address a:last-child svg {
    width: 18px;
    height: 18px;
}

.footer-logo {padding: 125px 0;}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    border-top: none !important;
    order: -1;
}
.footer-bottom .copy {
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
}

.footer-bottom ul {
    display: flex;
    gap: 38px;
    list-style: none;
}
.footer-bottom ul li {position: relative;}
.footer-bottom ul li:after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 15px;
}
.footer-bottom ul li:last-child:after {display: none;}
.footer-bottom ul a {
    font-size: 17px !important;
    text-decoration: none;
}
.footer-bottom ul a:hover {color: #fff;}

.footer-bottom > div {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-bottom > div img:first-child {max-width: 120px;}
.footer-bottom > div img:last-child {max-width: 65px;}

.footer-btns {display: none;}

.footer-text p {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}
.footer-text p + p {margin-top: 20px;}
.footer-text p a {color: #fff;}
.footer-text p a:hover {text-decoration: underline;}

#cannellamedia {display: none !important;}

@media (max-width: 1600px) {
    .footer-main ul a {font-size: 15px;}
    .main-hover > div {max-height: 23px;}

    .footer-social {margin-top: 100px;}
    .footer-social a {zoom: 0.8;}

    .footer-address {
        margin-top: 40px;
        zoom: 0.8;
    }

    .footer-logo {padding: 90px 0;}

    .footer-bottom {padding: 15px 0;}
    .footer-bottom .copy {font-size: 10px;}
    .footer-bottom ul {zoom: 0.7;}
}

@media (max-width: 991px) {
    .footer-main ul a {font-size: 13px;}
    .footer-main ul li + li {margin-top: 15px;}

    .footer-address {zoom: 0.7;}

    .footer-social {margin-top: 60px;}
    .footer-social a {zoom: 0.7;}

    .footer-logo {padding: 60px 0;}

    .footer-bottom > div {
        gap: 15px;
        zoom: 0.8;
    }

    .footer-bottom ul {zoom: 0.6;}
}

@media (max-width: 767px) {
    .footer-main ul li + li {margin-top: 10px;}
    .footer-bottom {
        padding: 25px 0;
        flex-direction: column;
        gap: 20px 0;
    }
    .footer-bottom .copy {
        font-size: 13px;
        text-align: center;
    }
    .footer-bottom ul {zoom: 0.7;}
    .footer-bottom > div {
        gap: 20px;
        zoom: 1;
    }
}

@media (max-width: 550px) {
    .footer {padding-bottom: 80px;}
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px;
    }
    .footer-main ul a {font-size: 15px;}

    .footer-social {margin-top: 45px;}
    .footer-social a {
        justify-content: center;
        zoom: 1;
        border-radius: 20px;
    }
    .footer-social a span {display: none;}
    .footer-social a img {
        display: inline-block;
        zoom: 0.7;
    }

    .footer-address {
        zoom: 1;
        justify-content: space-between;
    }
    .footer-address img {
        position: relative;
        top: 2px;
    }

    .footer-btns {
        display: flex;
        gap: 17px;
        margin-top: 25px;
    }

    .footer-logo {padding: 40px 0;}

    .footer-bottom {padding: 40px 0 15px 0 !important;}
    .footer-bottom ul {
        zoom: 1;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 38px;
    }

    .footer-bottom ul a {font-size: 14px !important;}
    .footer-bottom ul li:after {margin-top: 0 !important;}
    .footer-bottom .copy {
        font-size: 14px;
        order: 1;
    }
}

@media (max-width: 413px) {
    .footer-bottom ul a {font-size: 13px !important;}
    .footer-address a {font-size: 15px;}
}

/* ------------------ POPUP ------------------ */
.popup-pdf {
    height: 100%;
    max-width: 70%;
    width: 100%;
}
.popup-pdf iframe {
    width: 100%;
    height: 100%;
}

.popup-close {
    position: absolute;
    top: 10px;
    left: 100%;
    margin-left: 15px;
    transition: all 0.3s;
    cursor: pointer;
}
.popup-close svg {
    width: 20px;
    height: 20px;
    color: #fff;
}
.popup-close:hover {opacity: 0.7;}

@media (max-width: 991px) {
    .popup-pdf {max-width: 90%;}
    .popup-close {
        margin-left: 8px;
        top: 3px;
    }
    .popup-close svg {
        width: 15px;
        height: 15px;
    }
}



@media (max-width: 599px) {
  .splide-step .splide__track {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}