@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%;
}
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);}

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

.sub {
    font-size: 18px;
    color: var(--color);
}

.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: 49px;}

    .center {max-width: 1300px;}

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

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

@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: 991px) {
    .h-768 {display: none !important;}
    .s-768 {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: #fff;
    border-radius: 30px;
    white-space: nowrap;
    background: linear-gradient(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
}
.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: var(--color);
}
.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(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
}

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

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

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

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

.intro {
    background: radial-gradient(93.75% 131.09% at 97.4% 5.56%, #9D3535 0%, #D96837 69.91%, #E29B6A 100%);
    position: relative;
    color: #fff;
    margin-top: 15px;
    overflow: hidden;
}

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

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

.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: 80px;
}

.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: 670px;
}
.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;
    left: -100px;
    max-width: 900px;
    min-width: 900px;
}
.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 .title {font-size: 35px;}
    .intro-content .title b {font-size: 45px;}
    .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(192.09deg, #9E3635 1.66%, #CB5C37 46.49%, #E29B6A 91.31%);}
    .intro:before {display: none;}
    .intro .center {flex-direction: column;}

    .intro-content {
        zoom: 1;
        padding-top: 30px;
        padding-bottom: 0;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }
    .intro-content .title {font-size: 8.2vw;}
    .intro-content .title b {
        font-size: 10vw;
        display: block;
    }
    .intro-content .subtitle {
        font-size: 3vw;
        margin-bottom: 10px;
    }
    .intro-content .info {
        font-size: 3.9vw;
        line-height: 1.7;
    }
    .intro-content .text {
        font-size: 3.45vw;
        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: 150px;
    }

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

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

/* ------------------ MARQUEE MHP ------------------ */
.marquee-mhp {padding: 24px 0 !important;}
.marquee-mhp .list {
    --gap: 30px;
    --duration: 100s;
}
.marquee-mhp .item {
    --width: inherit !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #808080;
    white-space: nowrap;
}
.marquee-mhp .item svg {
    width: 20px;
    height: 20px;
}

/* ------------------ MHP ------------------ */
.mhp {
    background: #fff;
    margin-top: 0;
}

.mhp .center {
    display: grid;
    grid-template-columns: 0.66fr 1fr;
    align-items: center;
}

.mhp-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-height: 840px;
    overflow: hidden;
}
.mhp-product .item {
    border-radius: 15px;
    overflow: hidden;
    display: flex;
}
.mhp-product .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.disclaimer {
    font-size: 13px;
    font-weight: normal;
}
.disclaimer a {
    text-decoration: underline;
    color: var(--color);
}
.disclaimer a:hover {text-decoration: none;}

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

    .mhp-content {
        padding: 60px 0 60px 60px;
        font-size: 17px;
    }

    .mhp-content h2.title {max-width: 550px;}

    .mhp-product {
        gap: 30px;
        max-height: 740px;
        max-height: 780px;
    }

    .marquee[direction="vertical"] .list {--gap: 30px !important;}
    .marquee[direction="vertical"] .item {--height: 270px !important;}
}

@media (max-width: 1279px) {
    .marquee[direction="vertical"] .item {--height: 230px !important;}
}

@media (max-width: 991px) {
    .mhp {padding-top: 50px;}
    .mhp .d-none.s-991 {text-align: center;}
    .mhp h2.title {
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .mhp .center {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mhp-content {
        zoom: 1;
        padding: 50px 0;
    }
    .mhp-content h2.title {max-width: 67vw;}
    .mhp-content .btn-group {
        justify-content: center;
        margin-bottom: 30px;
    }

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

    .mhp-product {
        grid-template-columns: 1fr;
        max-height: initial;
        margin-left: -15px;
        margin-right: -15px;
        gap: 20px;
    }
    .marquee[direction="vertical"] {flex-direction: row !important;}
    .marquee[direction="vertical"] .list {
        --gap: 20px !important;
        gap: 0 var(--gap) !important;
        flex-direction: row !important;
        animation: spin var(--duration) infinite linear !important;
        padding-top: 0 !important;
        padding-right: var(--gap) !important;
    }
    .marquee[direction="vertical"][reverse="true"] .list {
        animation-direction: reverse !important;
    }
    .marquee[direction="vertical"] .item {
        --width: 200px !important;
        height: auto !important;
        flex: 0 0 var(--width) !important;
        width: var(--width) !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 600px) {
    .mhp {
        overflow: hidden;
        padding-top: 40px;
    }
    .mhp .d-none.s-991 {text-align: left;}
    .mhp h2.title {
        margin-top: 20px;
        margin-bottom: 35px;
    }
    
    .mhp-content {
        font-weight: normal;
        font-size: 16.5px;
    }
    .mhp-content h2.title {
        margin: 24px 0 24px 0;
        max-width: inherit;
    }

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

    .marquee[direction="vertical"] .item {--width: 175px !important;}
}

/* ------------------ CONTROL ------------------ */
.control {
    background: #fff;
    padding: 85px 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 65px auto !important;
    max-width: 1450px;
}
.splide-control .slide {
    padding: 0 15px;
    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 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: 18px;
    font-weight: 500;
    margin: 0 auto 5px auto;
}
.splide-control .slide small {
    font-size: 12px;
    font-weight: 500;
    margin-top: auto;
}

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

.dropdown .inner:not(.collapsed) {
    max-height: 250px;
    overflow-y: auto;
}
.dropdown .inner::-webkit-scrollbar {width: 5px;}
.dropdown .inner::-webkit-scrollbar-track {width: 5px;}
.dropdown .inner::-webkit-scrollbar-thumb {
    width: 5px;
    background: var(--color);
}

.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 .center {text-align: center;}
.control .dropdown hr {
    background: transparent;
    border-top: #eee;
    margin: 30px 0 0;
}
.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: #6F707F;
    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: 0 auto;
}

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

@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;}
}

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

    .control .tx-c div br {display: none;}
}

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

    .control .tx-c {font-weight: 500;}
    .control .tx-c div:last-child {
        font-weight: normal;
        font-size: 17px;
    }

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

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

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

    .control .dropdown {
        padding: 15px;
        border-radius: 18px;
        font-size: 12px;
        max-width: 1280px;
        color: #6F707F;
    }
    .control .dropdown a {color: #6F707F;}
    .control .dropdown button {
        font-size: 11px;
        margin-right: 7px;
    }

    .collapsed {max-height: 135px;}
}

/* ------------------ EXPERT ------------------ */
.expert {
    padding: 65px 0 65px 0;
    background: #fff;
}
.expert .tx-c {
    max-width: 1140px;
    margin: 0 auto;
}
.expert .tx-c p {
    max-width: 800px;
    margin: 0 auto;
}
.expert h2.title {margin: 10px 0 20px 0;}

.expert .foot {
    text-align: center;
    padding: 0 100px;
    max-width: 1100px;
    margin: -60px auto 0 auto;
    font-size: 14px;
    position: relative;
    z-index: 5;
}
.expert .foot .text a {
    color: inherit;
    text-decoration: underline;
}
.expert .foot .text a:hover {text-decoration: none;}
.expert .btn-group {
    flex-direction: column;
    align-items: center;
    margin-top: 55px;
}
.expert .btn.transition {
    color: #000229;
} 

.splide-expert {margin: 25px auto 0 auto;}
.splide-expert .splide__track {overflow: visible;}
.splide-expert .slide {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 630px;
    overflow: hidden;
    background: #F5F5F6;
    border-radius: 24px;
}
.splide-expert .content {
    position: absolute;
    inset: 0;
    padding: 30px 20px;
    display: flex;
    align-items: start;
    flex-direction: column;
    font-size: 18px;
    font-weight: normal;
}
.splide-expert .content .lifemd {
    position: absolute;
    right: 20px;
    bottom: 20px;
    max-width: 135px;
}
.splide-expert h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.splide-expert .content h5 {
    font-size: 23px;
    font-weight: normal;
    line-height: 1.3;
    color: #fff;
}
.splide-expert .content h5 b {
    display: block;
    font-weight: 600;
}
.splide-expert .content h4 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 35px;
}
.splide-expert .content .btn {margin-top: auto;}
.splide-expert .content small {
    margin-top: auto;
    font-size: 11px;
    margin-bottom: -15px;
}

/* first slide */
.slide-first {background: linear-gradient(117.96deg, #D97744 20.5%, #AA3B32 109.06%) !important;}
.slide-first .image {
    max-width: 315px;
    margin-left: auto;
    margin-top: auto;
    position: relative;
    z-index: 3;
}
.slide-first .content {z-index: 3;}
.slide-first .content h4 {
    color: #fff;
    font-weight: 500;
    font-size: 23px;
}
.slide-first .wrap-orbit {
    zoom: 0.95;
    top: inherit;
    right: inherit;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

/* second slide */
.slide-second svg {
    margin-top: auto;
    width: 100%;
}

/* theerd slide */
.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;
}

.slide-theerd .content h4 {color: var(--color);}

.candles li {
    border-radius: 30px;
    height: 100%;
    background: linear-gradient(355.29deg, #A43532 -23.86%, #D76635 46.9%, #E6C689 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); }
}

.slide-theerd .candles li:nth-child(1) { --max-h: 100%; --min-h: 60%; }
.slide-theerd .candles li:nth-child(2) { --max-h: 95%;  --min-h: 57%; }
.slide-theerd .candles li:nth-child(3) { --max-h: 90%;  --min-h: 53%; }
.slide-theerd .candles li:nth-child(4) { --max-h: 85%;  --min-h: 50%; }
.slide-theerd .candles li:nth-child(5) { --max-h: 80%;  --min-h: 47%; }
.slide-theerd .candles li:nth-child(6) { --max-h: 75%;  --min-h: 43%; }
.slide-theerd .candles li:nth-child(7) { --max-h: 70%;  --min-h: 40%; }
.slide-theerd .candles li:nth-child(8) { --max-h: 100%;  --min-h: 32%; }

/* fourth slide */
.slide-fourth {
    background: linear-gradient(149deg, #011120 -30%, #0e5085 100%) !important;
    color: #fff;
}
.slide-fourth .image {
    max-width: 290px;
    margin-top: auto;
    margin-left: auto;
    position: relative;
    z-index: 2;
}
.slide-fourth .box {
    background: rgba(0,0,0,.05);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px rgba(255,255,255,.2), inset -1px -1px rgba(255,255,255,.2);
    border-radius: 12px;
    position: absolute;
    top: 210px;
    left: 20px;
    right: 20px;
    padding: 10px 10px 60px 10px;
    overflow: hidden;
}
.slide-fourth .box .percent {
    font-size: 109px;
    font-weight: 300;
    line-height: 1;
}
.slide-fourth .box .percent sup {
    font-family: var(--roboto);
    font-size: 90px;
    font-weight: 100;
}
.slide-fourth .box p {
    font-size: 10px;
    font-weight: 300;
}
.slide-fourth .box p b {font-weight: 500;}
.slide-fourth .box svg {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* slide fifth */
.slide-fifth .content h5,
.slide-fifth h6 {color: #000229;}
.slide-fifth ul {
    display: flex;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    padding: 4px;
    margin-top: 15px;
    width: 100%;
}
.slide-fifth ul li {
    flex: 1;
    min-height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #98A0A3;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--greycliff);
}
.slide-fifth ul li.active {
    background: rgba(219,123,71,.15);
    color: #CB5B34;
    border-radius: 40px;
}
.slide-fifth p {
    text-align: center;
    margin: 35px auto 0 auto;
    color: #000229;
    font-size: 16px;
    max-width: 350px;
}
.slide-fifth .content svg {
    margin-top: auto;
    width: 100%;
}
.slide-fifth .content small {
    font-size: 11px;
    display: block;
    margin: 5px auto 0 auto;
    color: #000;
}

/* slide sixth */
.slide-sixth {background: linear-gradient(117.96deg, #D97744 20.5%, #AA3B32 109.06%) !important;}
.slide-sixth h5,
.slide-sixth .content h6 {color: #fff;}
.slide-sixth .image {
    margin: auto auto 25px auto;
    max-width: 290px;
}

/* slide seventh */
.slide-seventh {background: linear-gradient(117.96deg, #D97744 20.5%, #AA3B32 109.06%) !important;}
.slide-seventh h5,
.slide-seventh .content h6 {color: #fff;}
.slide-seventh .image {
    margin: auto auto 0 auto;
    width: 100%;
    z-index: 3;
}
.slide-seventh .content {z-index: 4;}
.slide-seventh .text {
    margin-top: auto;
    background: rgba(217,217,217,.08);
    backdrop-filter: blur(15px);
    box-shadow: 1px 1px rgba(255,255,255,.5), -1px -1px rgba(255,255,255,.5);
    color: #fff;
    border-radius: 17px;
    font-size: 17px;
    font-weight: 500;
    padding: 15px 20px;
}
.slide-seventh .content small {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    display: block;
    position: absolute;
    right: 20px;
    bottom: 5px;
}

.slide-seventh .candles {
    height: 330px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    padding: 0 20px;
}
.slide-seventh .candles li {background: rgba(251,251,251,.17);}

.slide-seventh .candles li:nth-child(1) { --max-h: 100%; --min-h: 60%; }
.slide-seventh .candles li:nth-child(2) { --max-h: 95%;  --min-h: 57%; }
.slide-seventh .candles li:nth-child(3) { --max-h: 90%;  --min-h: 53%; }
.slide-seventh .candles li:nth-child(4) { --max-h: 85%;  --min-h: 50%; }
.slide-seventh .candles li:nth-child(5) { --max-h: 80%;  --min-h: 47%; }
.slide-seventh .candles li:nth-child(6) { --max-h: 75%;  --min-h: 43%; }
.slide-seventh .candles li:nth-child(7) { --max-h: 70%;  --min-h: 40%; }
.slide-seventh .candles li:nth-child(8) { --max-h: 100%;  --min-h: 32%; }

/* slide eighth */
.slide-eighth .content h5 {color: #000229;}
.slide-eighth .image {
    margin: 20px 0;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    position: relative;
}
.slide-eighth .image img {object-fit: cover;}
.slide-eighth .image span {
    position: absolute;
    right: 15px;
    bottom: 5px;
    font-size: 9px;
    font-family: var(--manrope);
    color: #000;
}
.slide-eighth .text {
    font-size: 15.5px;
    text-align: center;
}

.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) {
    .expert {padding: 50px 0;}
    .splide-expert .slide {zoom: 0.85;}
    .expert .tx-c,
    .expert .foot {zoom: 0.9;}
    .splide-expert .slide {min-height: 650px;}
}

@media (max-width: 1279px) {
    .splide-expert .slide {zoom: 0.7;}
    .expert .tx-c,
    .expert .foot {zoom: 0.8;}
    .expert .foot {
        max-width: 910px;
        padding: 0;
    }

    .splide__arrow,
    .splide__pagination {zoom: 0.8;}
    .splide-expert .slide {min-height: 700px;}
}

@media (max-width: 991px) {
    .expert .tx-c, 
    .expert .foot {zoom: 1;}
    .expert .foot {max-width: 450px;}
    .splide-expert .slide {min-height: 750px;}

}

@media (max-width: 768px) {
    .splide-expert .slide {min-height: 670px;}
}

@media (max-width: 600px) {
    .expert {padding: 50px 0 30px 0;}
    .expert h2.title {
        margin: 25px 0 20px 0;
        font-size: 7vw;
    }
    .expert .tx-c p {font-weight: 600;}

    .splide-expert {margin-top: 35px;}
    .splide-expert .slide {
        zoom: 0.75;
        min-height: 650px;
    }
    .splide-expert .content {
        font-size: 19px;
        font-weight: 500;
    }

    .slide-first .content h4 {font-size: 26px;}
    .slide-eighth .text {font-size: 16.5px;}

    .expert .foot {
        margin-top: 30px;
        font-size: 10px;
    }
    .expert .foot .text a {
        display: inline-block;
    }

    .splide__pagination {margin-top: 50px;}
    .splide__arrow, 
    .splide__pagination {
        zoom: 0.7;
    }

    .expert .btn-group {
        margin-top: 35px;
        padding: 0 10px;
    }

    .expert .btn {
        min-height: 50px;
        font-size: 15px;
        padding: 0 15px;
        gap: 8px;
    }
    .expert .btn > div {max-height: 23px;}
}

/* ------------------ TRT ------------------ */
.trt {
    background: linear-gradient(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
    position: relative;
    overflow: hidden;
}

.trt .center {
    display: flex;
    max-width: 1800px;
}

.trt-image {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.trt-image:after {
    content: '';
    background: url(../img/trt/bg.webp) no-repeat left bottom;
    background-size: cover;
    position: absolute;
    inset: 0;
}
.trt-image img {
    position: absolute;
    right: 50px;
    bottom: -50px;
    z-index: 3;
    max-width: 140px;
    animation: floatCloud 20s ease-in-out infinite alternate;
}

.trt-content {
    width: 50%;
    margin-left: auto;
    padding: 105px 0 105px 70px;
    color: #fff;
}
.trt-content h2.title {
    color: #fff;
    font-weight: normal;
    margin: 5px 0 20px 0;
}
.trt-content h2.title b {font-weight: 600;}

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

.trt-content .descr {
    font-size: 18.8px;
    font-weight: normal;
    margin: 40px 0 55px 0;
}
.trt-content .descr b {font-weight: 600;}

@media (max-width: 1600px) {
    .trt-image img {zoom: 0.8;}
    .trt-content {
        zoom: 0.9;
        padding: 70px 0 70px 55px;
    }
    .trt-content .descr {font-size: 16.9px;}

    .fact {font-size: 19px;}
}

@media (max-width: 1279px) {
    .trt-image img {zoom: 0.7;}
    .trt-content {
        zoom: 0.8;
        padding: 75px 0 50px 30px;
    }
    .trt-content .descr {font-size: 16.9px;}

    .fact {font-size: 18px;}
}

@media (max-width: 991px) {
    .trt .center {flex-direction: column;}
    .trt-image {
        position: relative;
        width: auto;
        min-height: 550px;
        margin-left: -15px;
        margin-right: -15px;
        order: 1;
        border-radius: 25px 25px 0 0;
        overflow: hidden;
    }
    .trt-content {
        zoom: 1;
        width: auto;
        padding: 50px 0 50px 0;
    }
    .trt-content .btn-group {justify-content: center;}
    .trt-content h2.title {max-width: 70vw;}
    .fact {max-width: 72vw;}
}

@media (max-width: 600px) {
    .trt {
        background: linear-gradient(57.68deg, #E09261 24.63%, #CA5B37 71.61%, #9E3636 129.52%);
        overflow: hidden;
    }
    .trt-content h2.title {
        max-width: inherit;
        font-weight: 600;
        margin: 10px 0 30px 0;
        font-size: 8.5vw;
    }

    .fact {
        max-width: inherit;
        font-weight: 600;
        line-height: 1.5;
        padding-left: 10px;
        font-size: 3.9vw;
        border-width: 3px;
    }

    .trt-content .descr {
        font-size: 16px;
        margin: 25px 0 35px 0;
    }
    .trt-content {padding: 50px 0 20px 0;}

    .trt-image {
        border-radius: 20px 20px 0;
        min-height: 450px;
        overflow: hidden;
    }
    .trt-image img {zoom: 0.65;}
    .trt-image:after {
        background: url(../img/trt/bg-mob.webp) no-repeat left bottom;
        background-size: cover;
        border-radius: 0;
    }
}

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

.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;
}
.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;}

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

    .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: 7.3vw;
    }
    .step .sub {
        font-size: 15.5px;
        font-weight: normal;
    }

    .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(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
    position: relative;
    overflow: hidden;
}
.health .center {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
}

.health-content {
    padding-right: 140px;
    color: #fff;
    padding: 125px 0 130px 0;
}
.health-content h2.title {
    color: #fff;
    font-weight: 600;
    font-size: 44px;
    margin: 15px 0 15px 0;
}
.health-content .text {
    font-size: 20px;
    font-weight: 500;
    max-width: 645px;
}
.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 .accordeon {
    margin: 30px 0 35px 0;
    color: #fff;
}

.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 .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-mhp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 57%;
    display: flex;
    align-items: end;
}
.health-mhp .image {
    margin: auto auto 0 auto;
    max-width: 670px;
    display: flex;
    position: relative;
    z-index: 2;
}

.logo-mhp {
    display: inline-flex;
    flex-direction: column;
    text-align: right;
    position: absolute;
    top: 100px;
    right: 65px;
    color: #fff;
    max-width: 440px;
    width: 100%;
}
.logo-mhp h3 {
    font-size: 90px;
    font-weight: 600;
    line-height: 1;
}
.logo-mhp p {
    font-family: var(--roboto);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    padding-right: 45px;
}

.health-mhp .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-mhp .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-mhp .percent strong {
    font-size: 113px;
    font-weight: normal;
    line-height: 1;
}
.health-mhp .percent p {
    font-size: 15px;
    font-weight: 500;
}
.health-mhp .percent p b {font-weight: bold;}

.health-mhp .candles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    grid-template-columns: repeat(18, 1fr);
    gap: 20px;
    max-height: 610px;
    padding-left: 115px;
}
.health-mhp .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; }

.health-mhp .scale {
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    transform-origin: center;
    will-change: transform;
    opacity: 0.5;
}

@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);}
}

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

.health-mhp .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);}
}

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

@media (max-width: 1600px) {
    .health .center {grid-template-columns: 0.88fr 1fr;}
    .health-content {
        padding: 70px 35px 75px 0;
        zoom: 0.9;
    }
    .health-content h2.title {font-size: 42px;}
    .health-mhp .image {zoom: 0.8;}
    .logo-mhp {
        top: 100px;
        right: 70px;
        zoom: 0.8;
    }
    .health-mhp .percent {
        zoom: 0.85;
        right: 65px;
    }
    .health-mhp .candles {zoom: 0.8;}

    .health-mhp .man {
        max-height: 92%;
        margin-left: 20px;
    }
    .health-mhp .candles {zoom: 0.8;}
}

@media (max-width: 1279px) {
    .health .center {grid-template-columns: 0.7fr 1fr;}
    .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-mhp .image {zoom: 0.6;}

    .logo-mhp {
        top: 60px;
        right: 15px;
        zoom: 0.7;
    }

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

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

    .health-mhp .metrics {
        right: 20px;
        bottom: 50px;
        zoom: 0.8;
    }

    .health-mhp .disclaimer {
        right: 25px;
        bottom: 12px;
        font-size: 10px;
    }

    .health-mhp .man {max-height: 97%;}
}

@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-mhp {
        width: auto;
        position: relative;
        margin-left: -15px;
        margin-right: -15px;
    }

    .health-mhp .man {
        max-height: inherit;
        margin-left: auto;
    }
    .health-mhp .candles {
        zoom: 1;
        padding-left: 15px;
        gap: 10px;
        max-height: 450px;
    }
}

@media (max-width: 600px) {
    .health {background: linear-gradient(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);}
    .health .subtitle {
        font-size: 11px;
        color: #fff;
        text-transform: capitalize;
    }
    .health-content {padding: 40px 0 25px 0;}
    .health-content h2.title {
        font-size: 8.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 .accordeon {
        gap: 10px;
        margin-top: 20px;
    }
    .health-content .item-accordeon {border-radius: 15px;}
    .btn-accordeon {gap: 15px;}
    .health-content .btn-accordeon {
        padding: 10px 17px;
        font-size: 15px;
        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-mhp .image {
        zoom: 1;
        max-width: 355px;
        min-height: 500px;
        width: 100%;
    }

    .logo-mhp {
        top: -20px;
        right: 15px;
        zoom: 0.5;
    }

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

    .health-mhp .candles {
        zoom: 1;
        max-height: 300px;
        padding: 0;
    }

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

    .health-content .desrc {
        font-size: 11px;
        line-height: 1.7;
    }
    .health-content .desrc br {display: none;}

    .click-image .metrics {
        right: 15px;
        bottom: 50px;
        zoom: 0.57;
    }
    .metrics > div {padding: 25px;}

    .health-mhp .disclaimer {
        right: 20px;
        bottom: 10px;
        font-size: 7px;
    }

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

    .health-mhp .scale {
        position: absolute;
        top: -25px;
        right: inherit;
        min-width: 600px;
        transform: translateX(-50%);
    }

    .health-mhp .man {margin-left: -50px;}
    .health-mhp .metrics {zoom: 0.6;}
}

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

/* ------------------ LABS ------------------ */
.labs {
    background: #fff;
    padding: 75px 0 100px 0;
}
.labs .tx-c {
    max-width: 750px;
    margin: 0 auto;
}
.labs h2.title {margin: 10px 0;}

.splide-labs {
    margin: 45px auto 0 auto;
    max-width: 1300px;
}
.splide-labs.is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.labs-card {
    background: #F5F5F6;
    border-radius: 24px;
    padding: 32px 32px 45px 32px;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.labs-card.first {
    background: #ededed;
    color: #34343F;
}
.labs-card .head {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #34343F;
}
.labs-card .image {
    width: 85px;
    height: 85px;
    border-radius: 20px;
    background: #EBEBEE;
    display: flex;
    align-items: center;
    justify-content: center;
}
.labs-card .image img {max-width: 45px;}
.labs-card.first .image {background: #fff;}
.labs-card .head h3 {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
}
.labs-card .head p {
    font-weight: normal;
    font-size: 24px;
}
.labs-card .text {margin: 30px 0;}
.labs-card > p {margin-top: auto;}

@media (max-width: 1600px) {
    .labs {padding: 60px 0 80px 0;}
    .labs .tx-c {max-width: 700px;}
    .labs .tx-c,
    .splide-labs.is-initialized:not(.is-active) .splide__list {zoom: 0.9;}
}

@media (max-width: 1279px) {
    .labs {padding: 50px 0 50px 0;}
    .labs .tx-c {max-width: 650px;}
    .labs .tx-c,
    .splide-labs.is-initialized:not(.is-active) .splide__list {zoom: 0.8;}
    .labs-card .head h3 {font-size: 20px;}
    .labs-card .head p {font-size: 20px;}
}

@media (max-width: 991px) {
    .labs .tx-c {max-width: 64vw;}
    .labs .tx-c, 
    .splide-labs.is-initialized:not(.is-active) .splide__list {zoom: 1;}

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

@media (max-width: 600px) {
    .labs .tx-c {max-width: inherit;}
    .labs h2.title {
        margin: 25px 0;
        font-size: 7.3vw;
    }
    .labs .sub {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .splide-labs {margin-top: 35px;}
    .labs-card {
        border-radius: 20px;
        padding: 25px;
        font-size: 14px;
    }
    .labs-card .image {
        width: 75px;
        height: 75px;
    }
    .labs-card .image img {max-width: 40px;}
    .labs-card .head h3 {font-size: 17px;}
    .labs-card .text {margin: 25px 0 35px 0;}
    .labs-card .head p {font-size: 15px;}
    .splide-labs .splide__pagination {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ------------------ TESTOSTERONE ------------------ */
.testosterone {
    background: linear-gradient(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
    color: #fff;
    padding: 60px 0 25px 0;
    position: relative;
    overflow: hidden;
}
.testosterone .wrap-orbit {
    top: inherit;
    bottom: 0;
    right: 0;
    transform: translate(calc(50% + 150px), calc(50% + 150px));
}
.testosterone .subtitle {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
}
.testosterone h2.title {
    color: #fff;
    font-weight: 600;
    margin: 15px 0;
}
.testosterone .text {
    font-size: 18px;
    font-weight: normal;
    opacity: 0.8;
    max-width: 765px;
    margin: 0 auto;
}
.testosterone .text b {font-weight: 600;}

.splide-testosterone {
    max-width: 1320px;
    margin: 30px auto 0 auto;
    position: relative;
    z-index: 3;
}
.splide-testosterone.is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.testosterone-card {
    border-radius: 20px;
    background: rgba(255,255,255,.2);
    padding: 15px 25px;
    height: 100%;
}
.testosterone-card h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}
.testosterone-card small {
    font-size: 14px;
    font-weight: bold;
    display: block;
}
.testosterone-card p {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.5;
    margin-top: 10px;
}

.testosterone .btn-group {
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    gap: 5px;
}
.testosterone .btn:first-child {min-width: 295px;}

.testosterone .disclaimer {
    text-align: center;
    padding: 0 15px;
    font-size: 12px;
    color: #fff;
    margin-top: 20px;
}

.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);
}

.marquee[direction="vertical"] {flex-direction: column;}  
.marquee[direction="vertical"] .list {
    --gap: 35px;
    gap: var(--gap) 0;
    padding-top: var(--gap);
    animation: spin-vertical var(--duration) infinite linear;
    flex-direction: column;
    padding-right: 0;
}
.marquee[direction="vertical"][reverse="true"] .list {animation-direction: reverse;}
.marquee[direction="vertical"] .item {
    --height: 330px;
    height: var(--height);
    flex: 0 0 var(--height);
    width: 100%; 
}

@keyframes spin-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

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

.marquee-indicator {
    margin-top: 60px;
    position: relative;
    z-index: 2;
}
.marquee-indicator .content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    background: rgba(217,217,217,.08);
    border-radius: 17px;
    box-shadow: 1px 1px rgba(255,255,255,.5), -1px -1px rgba(255,255,255,.5);
    padding: 15px 20px 10px 20px;
}
.marquee-indicator .tag {
    display: inline-flex;
    background: #8c8b4d;
    border-radius: 4px;
    padding: 5px 10px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-family: var(--roboto);
}
.marquee-indicator p {
    font-size: 15px;
    font-family: var(--roboto);
    margin-top: 10px;
}
.marquee-indicator .rounded {
    position: relative;
    line-height: 0;
}
.marquee-indicator .rounded span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-family: var(--roboto);
}

@media (max-width: 1600px) {
    .testosterone .head {zoom: 0.9;}
    .marquee-indicator {
        zoom: 0.9;
        margin-top: 50px;
    }
    .testosterone-card p {font-size: 13px;}
}

@media (max-width: 1279px) {
    .testosterone .head,
    .marquee-indicator {zoom: 0.8;}
}

@media (max-width: 991px) {
    .testosterone .head, 
    .marquee-indicator {zoom: 1;}
    .testosterone .head {
        max-width: 75vw;
        margin: 0 auto;
    }

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

@media (max-width: 600px) {
    .testosterone {
        padding: 45px 0;
        background: linear-gradient(100.97deg, #BB4E36 22.04%, #DE8151 101.29%);
    }
    .testosterone .head {
        max-width: inherit;
        text-align: left;
    }

    .testosterone .subtitle {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        opacity: 1;
        color: #fff;
    }
    .testosterone h2.title {
        margin: 15px 0;
        font-size: 8.6vw;
    }

    .testosterone .text {
        font-size: 16.5px;
        opacity: 1;
    }
    .testosterone .text b {font-weight: 600;}

    .testosterone-card {padding: 15px 20px;}
    .testosterone-card h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .testosterone-card small {
        font-size: 13px;
        font-weight: 600;
    }
    .testosterone-card p {
        font-size: 12px;
        font-weight: 500;
    }
    .splide-testosterone .splide__pagination {margin-top: 40px;}

    .testosterone .btn-group {margin-top: 35px;}

    .marquee-indicator {
        margin-top: 30px;
        zoom: 0.9;
    }
}

/* ------------------ BENEFITS ------------------ */
.benefits {
    background: #fff;
    padding: 50px 0 85px 0;
}
.benefits h2.title {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.benefits .sub {
    margin-top: 15px;
    font-size: 22px;
    font-weight: 500;
    color: #6F707F;
}
.splide-benefits {margin-top: 45px;}
.splide-benefits .splide__track {overflow: visible;}
.splide-benefits .slide {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.splide-benefits .slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.splide-benefits .content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 35px 25px 25px 35px;
    display: flex;
    flex-direction: column;
    color: #fff;
}
.splide-benefits .content > p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}
.splide-benefits .content > h3 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: auto;
}
.splide-benefits .content > h3 a {color: #fff;}
.splide-benefits .content > div {
    display: flex;
    align-items: end;
    gap: 10px;
}
.splide-benefits .content ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(5px);
    padding: 30px;
    color: #fff;
    border-radius: 23px;
}
.splide-benefits .content ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.splide-benefits .content ul li svg {
    width: 20px;
    height: 20px;
}

.splide-benefits .link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-left: auto;
    white-space: nowrap;
}
.splide-benefits .link div {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.splide-benefits .link div svg {
    width: 10px;
    height: 10px;
    transition: all 0.3s;
}
.splide-benefits .link:hover div {
    background: #fff;
    color: #000;
}

.benefits .foot {
    text-align: center;
    padding: 0 100px;
    max-width: 1100px;
    margin: -50px auto 0 auto;
    font-size: 14px;
    color: #474747;
    position: relative;
    z-index: 3;
}
.benefits .foot a {
    color: #474747;
    text-decoration: underline;
}
.benefits .foot a:hover {text-decoration: none;}

@media (max-width: 1600px) {
    .splide-benefits .slide {zoom: 0.8;}
    .benefits .foot {
        max-width: 900px;
        padding: 0;
    }
}

@media (max-width: 1279px) {
    .benefits {padding: 50px 0 50px 0;}
    .splide-benefits .slide {zoom: 0.7;}
    .benefits .foot {
        max-width: inherit;
        margin-top: 30px;
    }
}

@media (max-width: 991px) {
    .benefits .foot {
        max-width: inherit;
        margin-top: 30px;
    }

    .splide-benefits .content ul {padding: 20px;}
}

@media (max-width: 600px) {
    .benefits .tx-c p {
        font-weight: 500;
        font-size: 3.9vw;
    }
    .benefits h2.title {
        font-size: 9.5vw;
        margin: 20px 0 20px 0;
    }
    .benefits h2.title br {display: none;}

    .splide-benefits {margin-top: 40px;}
    .splide-benefits .content {padding: 30px 15px 20px 30px;}
    .splide-benefits .content > h3 {font-size: 35px;}
    .splide-benefits .content > p {font-size: 15px;}

    .splide-benefits .content ul {
        gap: 10px;
        backdrop-filter: blur(25px);
        padding: 25px;
        border-radius: 20px;
    }
    .splide-benefits .link {zoom: 0.9;}
    .benefits .foot {font-size: 11px;}
}

/* ------------------ DOCTOR ------------------ */
.doctor {
    position: relative;
    background: #fff;
    overflow: hidden;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.doctor .center {
    display: flex;
    max-width: 1700px;
} 

.doctor-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    display: flex;
}
.doctor-image picture {
    line-height: 0;
    width: 100%;
}
.doctor-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.doctor-image .text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(78,78,78,.35);
    font-size: 37px;
    font-weight: 500;
    line-height: 1.3;
    padding: 40px 15px;
    text-align: center;
    color: #fff;
}

.doctor-content {
    width: 50%;
    margin-left: auto;
    padding: 60px 0 60px 80px;
}
.doctor .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.doctor h2.title {
    font-size: 52px;
    font-weight: 500;
}
.doctor .head p {
    font-size: 22px;
    text-transform: uppercase;
    color: #000229;
    margin-top: 10px;
}
.doctor .head img {max-width: 145px;}

.doctor-content .text {
    color: #000229;
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #000229;
    margin: 20px 0 25px 0;
}

.doctor-content .descr {
    font-size: 20px;
    margin-bottom: 15px;
}

.signature i {
    display: inline-block;
    max-width: 215px;
    height: 70px;
}
.signature p {
    font-size: 18px;
    line-height: 1.4;
}

.doctor-content small {
    font-size: 14px;
    margin-top: 20px;
    display: block;
}

@media (max-width: 1600px) {
    .doctor-image .text {zoom: 0.9;}
    .doctor-content {
        zoom: 0.9;
        padding: 50px 0 50px 60px;
    }
    .doctor h2.title {font-size: 43px;}
    .doctor .head p {font-size: 19px;}
    .doctor-content .text {font-size: 18.5px;}
    .doctor-content .descr {font-size: 17px;}
    .doctor-content small {font-size: 12px;}
}

@media (max-width: 1600px) {
    .doctor-image .text {zoom: 0.8;}
    .doctor-content {
        zoom: 0.8;
        padding: 80px 0 80px 30px;
    }
    .doctor h2.title {font-size: 39px;}
    .doctor .head p {font-size: 16px;}
    .doctor .head img {max-width: 125px;}
    .doctor-image .text {
        font-size: 30px;
        padding: 25px 15px;
    }
}

@media (max-width: 991px) {
    .doctor .center {flex-direction: column;}

    .doctor-image {
        position: relative;
        width: auto;
        order: 1;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 25px 25px 0 0;
        overflow: hidden;
    }

    .doctor-content {
        zoom: 1;
        padding: 50px 0 50px 0;
        width: auto;
    }
    .doctor-content .text {max-width: 75vw;}
}

@media (max-width: 600px) {
    .doctor {padding-top: 30px;}
    .doctor-image {
        order: 0;
        margin-top: 30px;
        border-radius: 20px;
    }
    .doctor-content {
        padding-top: 5px;
        color: #000229;
    }
    .doctor .head {
        align-items: start;
        flex-direction: column;
        gap: 5px;
    }
    .doctor .head img {
        max-width: 90px;
        order: -1;
    }
    .doctor .head p {margin-top: 5px;}
    .doctor h2.title {font-size: 9vw;}
    .doctor-content {font-weight: normal;}
    .doctor-content .text {max-width: inherit;}
    .doctor-content .text {
        font-size: 16.5px;
        padding-left: 10px;
        border-width: 3px;
    }
    .doctor-content .descr {
        margin-bottom: 30px;

        font-size: 16.5px;
        font-weight: normal;

    }

    .signature i {max-width: 255px;}
    .signature p {
        font-size: 15px;
        line-height: 1.8;
    }

    .doctor-content small {font-size: 10px;}

    .doctor-image .text {
        font-size: 5vw;
        line-height: 1.6;
        padding: 25px 10px;
        zoom: 1;
    }
}

/* ------------------ 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: 660px;
    margin-left: auto;
    margin-right: auto;
}

.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: 72vw;}
    .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: 9.5vw;
    }

    .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;
    }
}

/* ------------------ PRODUCTS ------------------ */
.products {
    padding: 70px 0 30px 0;
    background: #fff;
}
.products .tx-c {
    max-width: 690px;
    margin: 0 auto;
}
.products h2.title {margin: 15px 0;}
.products .discloure {
    text-align: center;
    font-size: 13px;
    margin-top: 30px;
    padding: 0 15px;
}

.splide-products {margin: 35px auto 0 auto;}
.splide-products.is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.products-card {
    border-radius: 32px;
    background: #E6E6EA;
    padding: 10px;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.products-card .fda {
    position: absolute;
    top: 45px;
    left: 30px;
    z-index: 2;
}
.products-card:hover {background: #dfdfe4;}
.products-card .image {position: relative;}
.products-card .image img {transition: all 0.3s;}
.products-card:hover .image img {transform: scale(1.02);}
.products-card .descr {
    border-radius: 24px;
    background: #F5F5F6;
    padding: 30px;
    margin-top: auto;
    flex-grow: 1;
}
.products-card .descr h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #000229;
}
.products-card .descr p {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6F707F;
    margin-bottom: 30px;
    margin-top: 10px;
}
.products-card .descr .btn {
    width: 100%;
    min-height: 75px;
    border-radius: 40px;
    font-size: 24px;
}
.products-card .descr .btn > div {min-height: 37px;}
.products-card .descr .isi {
    font-size: 16px;
    color: var(--color);
    text-decoration: underline;
    margin-top: 15px;
    display: block;
    text-align: center;
}
.products-card .descr .isi:hover {text-decoration: none;}

@media (max-width: 1850px) {
    .products-card .descr h3 {font-size: 28px;}
}

@media (max-width: 1600px) {
    .products {padding: 50px 0 30px 0;}
    .products .tx-c {zoom: 0.9;}
    .splide-products.is-initialized:not(.is-active) .splide__list {zoom: 0.85;}
    .products-card .descr {padding: 25px;}
    .products-card .descr h3 {font-size: 22px;}
}

@media (max-width: 1279px) {
    .products {padding: 50px 0 30px 0;}
    .products .tx-c {zoom: 0.8;}
    .splide-products.is-initialized:not(.is-active) .splide__list {zoom: 0.7;}
}

@media (max-width: 991px) {
    .products .tx-c {
        zoom: 1;
        max-width: 75vw;
    }
    .products h2.title {
        margin: 25px auto;
        max-width: 500px;
    }

    .splide-products .splide__track {overflow: visible;}
    .products-card .descr {padding: 25px;}
}

@media (max-width: 600px) {
    .products {padding-bottom: 30px;}
    .products .tx-c {max-width: inherit;}
    .products .sub {font-size: 16.5px;}
    .products-card {border-radius: 20px;}
    .products-card .fda {
        top: 10px;
        left: 10px;
    }
    .products-card .descr {
        border-radius: 16px;
        padding: 20px;
    }
    .products-card .descr h3 {font-size: 20px;}
    .products-card .descr p {
        font-size: 13px;
        margin-bottom: 25px;
        margin-top: 5px;
    }
    .products-card .descr .btn {
        min-height: 60px;
        font-size: 20px;
    }
    .products-card .descr .btn > div {min-height: 31px;}
    .products-card .descr .isi {font-size: 13px;}
    .splide-products .splide__pagination {
        left: 50%;
        transform: translateX(-50%);
    }

    .products .discloure br {display: none;}
}

/* ------------------ 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 .item-accordeon {border-bottom: 1px solid #ebebee;}
.faq .item-accordeon .inner {
    padding-bottom: 32px;
    font-size: 24px;
}
.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.5vw;
        font-weight: 500;
        margin: 5px 0 25px 0;
        color: var(--color);
    }

    .faq .btn {
        min-height: 50px;
        font-size: 15px;
        padding: 0 20px;
        width: 100%;
        max-width: 90%;
    }
    .faq .btn > div {max-height: 23px;}
}

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

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

.important .c-blue {color: #26368B;}
.important .head {
    background: #26368B;
    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.sticky .center {padding-bottom: 25px;}
.important h2,
.important h3 {font-size: 15px;}
.important h3 {margin: 5px 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;
    }
    .important address {
        margin-top: 20px;
        text-align: left;
    }
}

/* ------------------ FOOTER ------------------ */
.footer {
    background: #000229;
    border-radius: 24px 24px 0 0;
    margin-top: -20px;
    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;}
.footer-text p b {font-weight: bold;}

#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;}
    .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;}
}