@charset "UTF-8";


@font-face {
    font-display: swap;
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/roboto-condensed-v31-latin-ext-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/roboto-condensed-v31-latin-ext-700.woff2) format("woff2")
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@-webkit-keyframes swiper-preloader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes move-along {
    0% {
        offset-distance: 0
    }

    to {
        offset-distance: 100%
    }
}

@keyframes move-along {
    0% {
        offset-distance: 0
    }

    to {
        offset-distance: 100%
    }
}

@-webkit-keyframes pulse {

    0%,
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes pulse {

    0%,
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@-webkit-keyframes pulse-bg {
    0% {
        -webkit-filter: drop-shadow(0 0 0 #ff0);
        filter: drop-shadow(0 0 0 #ff0)
    }

    to {
        -webkit-filter: drop-shadow(0 0 30px green);
        filter: drop-shadow(0 0 30px green)
    }
}

@keyframes pulse-bg {
    0% {
        -webkit-filter: drop-shadow(0 0 0 #ff0);
        filter: drop-shadow(0 0 0 #ff0)
    }

    to {
        -webkit-filter: drop-shadow(0 0 30px green);
        filter: drop-shadow(0 0 30px green)
    }
}

@-webkit-keyframes pulse-bg-2 {
    0% {
        -webkit-filter: drop-shadow(0 0 0 green);
        filter: drop-shadow(0 0 0 green);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-filter: drop-shadow(0 0 10px #ffd24a);
        filter: drop-shadow(0 0 10px #ffd24a);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }
}

@keyframes pulse-bg-2 {
    0% {
        -webkit-filter: drop-shadow(0 0 0 green);
        filter: drop-shadow(0 0 0 green);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-filter: drop-shadow(0 0 10px #ffd24a);
        filter: drop-shadow(0 0 10px #ffd24a);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }
}

@-webkit-keyframes btn-arrow {
    0% {
        -webkit-transform: translateY(-50%) translateX(0) scale(1);
        transform: translateY(-50%) translateX(0) scale(1);
        -webkit-filter: drop-shadow(0 0 30px #fff);
        filter: drop-shadow(0 0 30px #fff)
    }

    to {
        -webkit-transform: translateY(-50%) translateX(4px) scale(1.1);
        transform: translateY(-50%) translateX(4px) scale(1.1);
        -webkit-filter: drop-shadow(0 0 0 #fff);
        filter: drop-shadow(0 0 0 #fff)
    }
}

@keyframes btn-arrow {
    0% {
        -webkit-transform: translateY(-50%) translateX(0) scale(1);
        transform: translateY(-50%) translateX(0) scale(1);
        -webkit-filter: drop-shadow(0 0 30px #fff);
        filter: drop-shadow(0 0 30px #fff)
    }

    to {
        -webkit-transform: translateY(-50%) translateX(4px) scale(1.1);
        transform: translateY(-50%) translateX(4px) scale(1.1);
        -webkit-filter: drop-shadow(0 0 0 #fff);
        filter: drop-shadow(0 0 0 #fff)
    }
}

@-webkit-keyframes steam {

    0%,
    to {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }
}

@keyframes steam {

    0%,
    to {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }
}

@-webkit-keyframes rotate-orange {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-orange {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    font-size: 1rem
}

body {
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    line-height: var(--line-height);
    font-size: 16px;
    color: #3332a2
}

details,
main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: 700
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

button::-moz-focus-inner {
    padding: 0
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio],
legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xs,
.container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

:root {
    --container-width: 100%
}

::-ms-clear {
    display: none
}

* {
    -webkit-tap-highlight-color: transparent
}

#comebacker_main_div {
    display: none !important;
    height: 0 !important
}

a:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}

:active,
:focus,
:hover,
:visited,
a,
a:active,
a:focus,
a:hover,
a:visited {
    outline: 0 !important
}

::-moz-focus-inner {
    border: 0;
    outline: 0
}

select {
    outline: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(https://179523.selcdn.ru/public/layout-images/select-triangle.svg);
    background-repeat: no-repeat
}

select,
select:hover {
    background-size: 10px 10px;
    background-position: right 10px center
}

select:focus {
    outline: 0 !important;
    outline-color: transparent;
    outline-width: 0
}

select::-ms-expand {
    display: none !important;
    background: 0 0 !important;
    position: fixed;
    border: 0 !important;
    outline: 0 !important
}

button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=file]>input[type=button]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
option::-moz-focus-inner,
select::-moz-focus-inner {
    border: 0
}

:not(#fake) {
    outline: 0
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}

:root {
    --h1: 32px;
    --h2: 28px;
    --h3: 24px;
    --h4: 20px;
    --h5: 18px;
    --h6: 16px;
    --line-height: 1.3
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2
}

.h1,
h1 {
    font-size: calc(var(--h1) + var(--coef, 0px))
}

.h2,
h2 {
    font-size: calc(var(--h2) + var(--coef, 0px))
}

.h3,
h3 {
    font-size: calc(var(--h3) + var(--coef, 0px))
}

.h4,
h4 {
    font-size: calc(var(--h4) + var(--coef, 0px))
}

.h5,
h5 {
    font-size: calc(var(--h5) + var(--coef, 0px))
}

.h6,
h6 {
    font-size: calc(var(--h6) + var(--coef, 0px))
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1em
}

.text-bold {
    font-weight: 700
}

.text-uppercase {
    text-transform: uppercase
}

.text-shadow {
    text-shadow: 1px 1px 1px #999
}

.text-pink {
    color: #c31c76
}

.text-blue {
    color: #3332a2
}

.text-yellow {
    color: #ffef79
}

.text-gray {
    color: #525252
}

.text-gradient-yellow {
    background: -webkit-gradient(linear, right top, left top, from(#ffa600), to(#ffef79));
    background: linear-gradient(270deg, #ffa600 0, #ffef79 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text {
    font-size: calc(1em + var(--coef, 0px))
}

.text-smaller {
    --coef: -0.125rem
}

.text-normal {
    --coef: 0px
}

.text-bigger {
    --coef: 0.125rem
}

.swiper-scrollbar {
    --swiper-scrollbar-bg-color: #525252;
    --swiper-scrollbar-drag-bg-color: linear-gradient(270deg, #FFA600 0%, #FFEF79 100%);
    --swiper-scrollbar-sides-offset: 0;
    --swiper-scrollbar-bottom: 0;
    --swiper-scrollbar-size: 6px;
    --swiper-scrollbar-border-radius: 6px;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
    position: relative !important;
    bottom: 0;
    left: 0;
    margin-top: 1rem
}

.swiper-scrollbar-drag {
    cursor: pointer
}

.title-logo {
    height: 1.4em;
    vertical-align: top;
    margin: 0 .5rem;
    display: inline-block
}

.text-nowrap {
    white-space: nowrap
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -.125em
}

.icon-right {
    margin-right: .5em
}

.w-50 {
    width: 50%
}

@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper,
.swiper-wrapper {
    position: relative;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    list-style: none;
    padding: 0;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
}

.swiper-backface-hidden .swiper-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    -ms-scroll-snap-type: none;
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: "";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-ordinal-group: 10000;
    -ms-flex-order: 9999;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    -webkit-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size)/44*27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - var(--swiper-navigation-size)/2);
    z-index: 10;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transform-origin: center;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: .3s opacity;
    transition: .3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(.33);
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2)
}

button.swiper-pagination-bullet {
    border: 0;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    -webkit-transition: .2s top, .2s -webkit-transform;
    transition: .2s transform, .2s top;
    transition: .2s transform, .2s top, .2s -webkit-transform
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: .2s left, .2s -webkit-transform;
    transition: .2s transform, .2s left;
    transition: .2s transform, .2s left, .2s -webkit-transform
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: .2s right, .2s -webkit-transform;
    transition: .2s transform, .2s right;
    transition: .2s transform, .2s right, .2s -webkit-transform
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar,
.swiper-scrollbar-drag {
    border-radius: var(--swiper-scrollbar-border-radius, 10px)
}

.swiper-scrollbar {
    -ms-touch-action: none;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    -ms-touch-action: none;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next+.swiper-slide,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-filter: blur(50px);
    filter: blur(50px)
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-transition-property: opacity, height, -webkit-transform;
    transition-property: transform, opacity, height;
    transition-property: transform, opacity, height, -webkit-transform
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.block {
    --padding-top: 25px;
    --padding-bottom: 25px;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom)
}

.promo {
    --padding-top: 8px;
    --offset-wave: -700px
}

.promo-grid {
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 .5rem;
    grid-template-areas: "L L T T T T T T T T H H" "S S S S S S S S S S S S" "F F F F F F F F F F F F" "P P P P P P P P P . . ." "B B B B B B B B B B B B"
}

.promo-grid__header {
    grid-area: H
}

.promo-grid__logo {
    grid-area: L
}

.promo-grid__title {
    grid-area: T
}

.promo-grid__subtitle {
    grid-area: S;
    margin-bottom: 18px
}

.promo-grid__product {
    grid-area: P;
    margin-bottom: .5rem;
    position: relative;
    z-index: 2
}

.promo-grid__image {
    grid-area: I;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.promo-grid__features {
    grid-area: F;
    margin-bottom: 1rem
}

.promo-grid__button {
    grid-area: B
}

.promo__title {
    margin-bottom: 0
}

.promo__image {
    display: block;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.promo__header {
    display: none
}

.promo__logo {
    display: inline-block
}

.promo__btn {
    width: 100%;
    z-index: 2
}

.feature,
.features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.features {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gap-inherit, 20px)
}

.feature {
    gap: .5rem
}

.feature__icon {
    --icon-size: 40px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.burger {
    background: 0 0;
    padding: 0;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: 30px
}

.subtitle {
    background: #c31c76;
    color: #fff;
    border-radius: .5rem;
    padding: .25rem .5rem;
    font-weight: 600
}

.bg-dark {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #3332a2;
    background-image: url(../img/purple-bg-mob.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--bg-position-x, center) var(--bg-position-y, top)
}

.bg-dark:before,
.bg-wave:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    pointer-events: none;
    width: 100%
}

.bg-dark:before {
    height: 100%;
    top: 0;
    z-index: 1;
    background-image: url(../img/lines.svg), url(../img/lines.svg);
    background-size: 1036px 548px, 1036px 548px;
    background-repeat: no-repeat, no-repeat;
    background-position: right calc((100vw - var(--container-width))/2 + var(--container-width)/1.5) bottom -100px, left calc((100vw - var(--container-width))/2 + var(--container-width)/1.5) top -182px
}

.bg-dark .container {
    position: relative;
    z-index: 3
}

.bg-dark__orange {
    display: none
}

.bg-wave:after {
    bottom: 0;
    z-index: 2;
    background-image: url(../img/wave.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: var(--bg-size-wave, 3310px auto);
    height: calc(var(--height-wave, 150px) + var(--offset-wave, 0px))
}

.bg-light {
    background: #fffdea
}

.product {
    --label-size: 60px;
    --product-size: 400px;
    --padding-value: calc(var(--label-size) / 2);
    position: relative;
    padding-top: calc(var(--label-size)/2);
    max-width: var(--product-size-inherit, var(--product-size));
    width: 100%
}

.product--orange {
    --label-offset-value: 20%
}

.product--orange.product--label-left {
    --label-offset-left: 0px;
    --label-offset-right: auto;
    padding-left: var(--padding-value);
    padding-right: 0
}

.product--orange.product--label-right {
    --label-offset-left: auto;
    --label-offset-right: var(--label-offset-value);
    padding-left: 0;
    padding-right: 0
}

.product--smoothie {
    --label-offset-value: 17%
}

.product--smoothie.product--label-left {
    --label-offset-left: var(--label-offset-value);
    --label-offset-right: auto;
    padding-left: 0;
    padding-right: 0
}

.product--smoothie.product--label-right {
    --label-offset-left: 0px;
    --label-offset-right: auto;
    padding-left: 0;
    padding-right: var(--padding-value)
}

.product__image {
    position: relative;
    display: block
}

.product__image img {
    width: 100%
}

.label,
.product__image:before {
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute
}

.product__image:before {
    content: "";
    display: block;
    height: 100%;
    bottom: 0;
    background-position: bottom center;
    z-index: 1
}

.label {
    --ch-black: #21762E;
    --eer-black: transparent;
    --night-rider: orange;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #59D26C;
    width: var(--label-size);
    height: var(--label-size);
    background-image: url(../img/label.png);
    background-position: center;
    text-align: center;
    line-height: var(--label-size);
    top: 0;
    font-size: calc(var(--label-size)*.35);
    font-weight: 600;
    border-radius: 50%;
    -webkit-animation: pulse-bg 1s linear infinite;
    animation: pulse-bg 1s linear infinite;
    left: var(--label-offset-left, auto);
    right: var(--label-offset-right, auto)
}

.label__value {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    display: inline-block
}

.label__percent {
    font-size: .5em
}

.ingredients {
    overflow: hidden
}

.ingredients-swiper {
    overflow: visible
}

.ingredients-swiper .swiper-slide {
    height: auto
}

.ingredient {
    height: 100%;
    padding: 0 1.5rem;
    position: relative
}

.ingredient__title {
    --line-height: 1.2;
    line-height: var(--line-height);
    min-height: calc(2em*var(--line-height))
}

.ingredient__img {
    height: 140px;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.swiper-slide:not(:last-child) .ingredient:after {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 2.5em);
    background: #525252;
    position: absolute;
    right: 0;
    top: 0
}

.testimonial {
    --size-quote: 40px;
    --shrink-quote-offset: 2;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem
}

.testimonial__image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto
}

.testimonial__text {
    margin-bottom: calc(var(--size-quote)/var(--shrink-quote-offset));
    padding-bottom: calc(var(--size-quote)/var(--shrink-quote-offset))
}

.testimonial__text:after,
.testimonial__text:before {
    content: "";
    display: block;
    width: var(--size-quote);
    height: var(--size-quote);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='34' viewBox='0 0 47 34' fill='none'%3E%3Cpath d='M32.7076 33.6077C30.8071 33.6077 29.3068 33.2577 28.2065 32.5575C27.2063 31.7573 26.7062 30.7071 26.7062 29.4068C26.7062 24.9057 27.2563 20.8548 28.3565 17.254C29.4568 13.6532 30.8571 10.5524 32.5575 7.95183C34.2579 5.35123 35.9583 3.40079 37.6587 2.10048C39.4591 0.700162 40.9595 0 42.1597 0C42.7599 0 43.36 0.100022 43.9601 0.300065C44.6603 0.400087 45.2604 0.600134 45.7606 0.900205C46.2607 1.20028 46.5107 1.65038 46.5107 2.25052C46.5107 2.65061 46.3607 3.20074 46.0606 3.90089C45.7606 4.60106 45.4605 5.25121 45.1604 5.85135C44.0602 8.05186 43.11 10.3524 42.3098 12.7529C41.6096 15.0535 41.0595 17.554 40.6594 20.2547C40.2593 22.8553 40.0592 25.7059 40.0592 28.8066C40.0592 30.207 39.5591 31.3572 38.5589 32.2574C37.5587 33.1576 36.0583 33.6077 34.0579 33.6077H32.7076ZM6.00139 33.6077C4.10095 33.6077 2.6006 33.2577 1.50035 32.5575C0.500115 31.7573 0 30.7071 0 29.4068C0 24.9057 0.550127 20.8548 1.65038 17.254C2.75064 13.6532 4.15096 10.5524 5.85135 7.95183C7.55174 5.35123 9.25214 3.40079 10.9525 2.10048C12.7529 0.700162 14.2533 0 15.4536 0C16.0537 0 16.6538 0.100022 17.254 0.300065C17.9541 0.400087 18.5543 0.600134 19.0544 0.900205C19.5545 1.20028 19.8046 1.65038 19.8046 2.25052C19.8046 2.65061 19.6545 3.20074 19.3545 3.90089C19.0544 4.60106 18.7543 5.25121 18.4543 5.85135C17.354 8.05186 16.4038 10.3524 15.6036 12.7529C14.9034 15.0535 14.3533 17.554 13.9532 20.2547C13.5531 22.8553 13.3531 25.7059 13.3531 28.8066C13.3531 30.207 12.853 31.3572 11.8527 32.2574C10.8525 33.1576 9.35216 33.6077 7.3517 33.6077H6.00139Z' fill='%23C31C76'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute
}

.testimonial__text:before {
    left: 0;
    top: 0
}

.testimonial__text:after {
    right: 0;
    bottom: 0;
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1)
}

.testimonial__author {
    position: relative
}

.testimonial__author:before {
    content: "";
    display: block;
    width: 135px;
    height: 1px;
    background: #525252;
    position: absolute;
    top: calc(var(--size-quote)/var(--shrink-quote-offset)*-1);
    left: 0
}

.reviews {
    overflow: hidden
}

.reviews-swiper {
    overflow: visible
}

.reviews__title {
    margin-bottom: 35px
}

.review {
    padding: 0 30px
}

.swiper-slide:not(:last-child) .review {
    border-right: 1px solid rgba(255, 255, 255, .5)
}

.review__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: -1;
    padding-top: 20px;
    margin-bottom: 1rem
}

.review__header:before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59' height='46' viewBox='0 0 59 46' fill='none'%3E%3Cpath d='M15.9961 0L27.9492 6.94336C22.9102 14.9121 20.3027 22.998 20.127 31.2012V45.8789H0V32.6953C0 27.1875 1.52344 21.3281 4.57031 15.1172C7.67578 8.84766 11.4844 3.80859 15.9961 0ZM46.1426 0L58.0957 6.94336C53.0566 14.9121 50.4492 22.998 50.2734 31.2012V45.8789H30.1465V32.6953C30.1465 27.1875 31.6699 21.3281 34.7168 15.1172C37.8223 8.84766 41.6309 3.80859 46.1426 0Z' fill='white'/%3E%3C/svg%3E");
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -10px;
    top: 0;
    z-index: -1
}

.review__ava {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: block
}

.review__ava img {
    border-radius: 50%;
    width: 100%;
    height: 100%
}

.review__author {
    margin-bottom: .125rem
}

.review__rating {
    margin-bottom: .25rem
}

.review__text {
    line-height: 1.5
}

.btn,
.rating {
    position: relative
}

.rating {
    --star-size: 20px;
    --star-offset: 1px;
    width: calc(var(--star-size)*5);
    height: var(--star-size)
}

.rating:after,
.rating:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: repeat-x
}

.rating:before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.62747L11.9214 6.24697C12.1014 6.67976 12.5084 6.97547 12.9756 7.01293L17.9627 7.41275L14.1631 10.6676C13.8071 10.9725 13.6516 11.451 13.7604 11.9069L14.9212 16.7735L10.6516 14.1656C10.2515 13.9213 9.74845 13.9213 9.34843 14.1656L5.07875 16.7735L6.23961 11.9069C6.34837 11.451 6.19291 10.9725 5.83692 10.6676L2.03726 7.41275L7.02438 7.01293C7.49162 6.97547 7.89863 6.67976 8.07864 6.24697L10 1.62747Z' stroke='%2321762E' stroke-width='2'/%3E%3C/svg%3E%0A")
}

.rating:after {
    width: calc(var(--star-size)*var(--star-rating));
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2359D26C' /%3E%3Cstop offset='100%25' stop-color='%2321762E' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9.42292 1.38746C9.63642 0.874148 10.3636 0.874147 10.5771 1.38746L12.4984 6.00695C12.5884 6.22335 12.7919 6.3712 13.0256 6.38993L18.0127 6.78975C18.5668 6.83417 18.7916 7.52574 18.3693 7.88741L14.5697 11.1422C14.3917 11.2947 14.314 11.5339 14.3683 11.7619L15.5292 16.6285C15.6582 17.1693 15.0699 17.5967 14.5955 17.3069L10.3258 14.699C10.1258 14.5768 9.87423 14.5768 9.67422 14.699L5.40454 17.3069C4.9301 17.5967 4.34182 17.1693 4.47081 16.6285L5.63167 11.7619C5.68605 11.5339 5.60832 11.2947 5.43032 11.1422L1.63066 7.88741C1.20845 7.52574 1.43315 6.83417 1.98731 6.78975L6.97444 6.38993C7.20806 6.3712 7.41156 6.22335 7.50157 6.00695L9.42292 1.38746Z' fill='url(%23grad)'/%3E%3C/svg%3E%0A")
}

.btn {
    --ch-black: #21762E;
    --eer-black: transparent;
    --night-rider: orange;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #59D26C;
    cursor: pointer;
    display: inline-block;
    border-radius: 50rem;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1;
    padding: 1rem calc(1rem + 1em + 4px) 1rem 1rem;
    border: 0;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#59d26c), to(#21762e));
    background: linear-gradient(90deg, #59d26c 0, #21762e 100%);
    background-size: 100% 100%;
    font-weight: 600;
    white-space: nowrap;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.btn:hover {
    background-size: 150% 100%
}

.btn:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1652 3.51557C14.9984 4.39446 16.2163 4.95947 17.8187 5.21058L17.8187 7.97282C16.2163 8.16116 14.9984 8.72616 14.1652 9.66783C13.3319 10.5467 12.8833 11.7395 12.8192 13.1834L9.74257 12.4301C9.80667 11.3001 10.1271 10.3584 10.704 9.60505C11.2168 8.85172 11.9218 8.28671 12.8192 7.97282L-2.34546e-07 7.97282L-3.6171e-07 5.1478L12.8192 5.1478C11.9859 4.83391 11.2809 4.33169 10.704 3.51557C10.1912 2.76223 9.87076 1.82056 9.74257 0.690552L12.8192 -8.17353e-06C12.8833 1.44389 13.3319 2.5739 14.1652 3.51557Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 1rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-animation: btn-arrow 2s ease-out infinite;
    animation: btn-arrow 2s ease-out infinite
}

.header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}

.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.menu__item {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.menu__item:hover {
    color: rgba(255, 255, 255, .5)
}

.functions {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto
}

.functions__item {
    position: relative
}

.function {
    --padding: 1rem;
    border-radius: calc(var(--padding) + .5rem);
    padding: var(--padding);
    background: #fff;
    -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .07);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg)
}

.function:not(:first-child) {
    margin-top: calc(var(--padding)*-2)
}

.function:not(.is-active):not(:last-child),
.function:not(:last-child).is-active {
    padding-bottom: calc(var(--padding)*3)
}

.function--yellow {
    --bg: #FFF7BD;
    z-index: 1
}

.function--green {
    --bg: #EEFFEA;
    z-index: 2
}

.function--red {
    --bg: #FFEBF6;
    z-index: 3
}

.function--white {
    --bg: #ffffff;
    z-index: 4
}

.function-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "H H H H H H H H H H H H" "I I I I I I I I I I I I" "D D D D D D D D D D D D"
}

.function-grid__header {
    grid-area: H
}

.function-grid__image {
    grid-area: I;
    position: relative
}

.function-grid__description {
    grid-area: D
}

.function__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 15px
}

.function__title {
    margin-bottom: 0
}

.function.is-active .function__header {
    margin-bottom: 12px
}

.function__icon {
    width: 50px;
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.function__image {
    border-radius: var(--padding);
    display: block;
    overflow: hidden
}

.function__image img {
    display: block
}

.function.is-active .function__image {
    max-height: 800px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.function:not(.is-active) .function__image {
    max-height: 0
}

.function__description {
    color: #525252
}

.function.is-active .function__description {
    max-height: 800px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
    margin-top: 12px
}

.function:not(.is-active) .function__description {
    max-height: 0;
    overflow: hidden
}

.indicators__results {
    max-width: 390px;
    margin: 0 auto
}

.indicators__title {
    max-width: 290px;
    margin-left: auto;
    margin-right: auto
}

.results {
    --gap-outside-y: 1.5rem;
    --gap-outside-x: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gap-outside-y) var(--gap-outside-x)
}

.results__item {
    width: 100%
}

.result {
    --progress-size: 80px;
    --gap-inside-y: 0;
    --gap-inside-x: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--gap-inside-y) var(--gap-inside-x);
    position: relative
}

.result:not(:last-child):before {
    content: "";
    display: block;
    background: rgba(255, 255, 255, .5);
    width: calc(100% - var(--progress-size) - var(--gap-inside-x));
    height: 1px;
    right: 0;
    top: calc(100% + var(--gap-outside-y)/2);
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.progress {
    position: relative;
    width: var(--progress-size);
    height: var(--progress-size);
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    background: #fff;
    border-radius: 50%
}

.progress__bar {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    overflow: visible
}

.progress__bar-bg,
.progress__bar-fg {
    stroke: #9494bd;
    stroke-width: 20px;
    fill: none
}

.progress__bar-fg {
    stroke: url(#progress-gradient);
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    -webkit-transition: stroke-dashoffset 2s ease-out;
    transition: stroke-dashoffset 2s ease-out;
    will-change: stroke-dashoffset
}

.progress__value {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.progress__value-number {
    font-size: var(--h3)
}

.progress__value-percent {
    font-size: .75rem
}

.needs {
    --offset-y: 44px;
    --offset-x: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--offset-y) 0;
    margin-left: calc(var(--offset-x)*-1);
    margin-right: calc(var(--offset-x)*-1)
}

.needs__item {
    padding: 0 var(--offset-x);
    width: 100%
}

.need {
    --image-size: 90px;
    --gap-x: 1rem;
    --gap-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-y) var(--gap-x);
    position: relative
}

.need__title {
    margin-bottom: .5rem
}

.need__image {
    width: var(--image-size);
    height: var(--image-size);
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.need__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.need:nth-child(2) .need__image {
    -webkit-transform: rotate(-27deg);
    transform: rotate(-27deg)
}

.need:nth-child(3) .need__image {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg)
}

.need:nth-child(4) .need__image {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg)
}

.use {
    --offset-wave: 30px
}

.use-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    grid-template-areas: "S S S S S S S S S S S S" "P P P P P P P . . . . ." "P P P P P P P N N N N N"
}

.use-grid__product {
    grid-area: P
}

.use-grid__steps {
    grid-area: S
}

.use-grid__note {
    grid-area: N
}

.use__note {
    color: #3332a2
}

.use__product {
    position: relative
}

.goal__product:after,
.use__product:after {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    background-image: url(../img/bg-dark-orange.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 100%;
    top: 0;
    -webkit-animation: rotate-orange 4s linear infinite;
    animation: rotate-orange 4s linear infinite
}

.steps {
    --gap-outside-y: 2rem;
    --gap-outside-x: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gap-outside-y) var(--gap-outside-x)
}

.step {
    --gap-inside-y: 1.5rem;
    --gap-inside-x: 1.5rem;
    position: relative
}

.step__arrow {
    display: none
}

.step__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-inside-y) var(--gap-inside-x)
}

.step__title {
    white-space: nowrap
}

.step:not(:last-child):before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    left: 0;
    top: calc(100% + var(--gap-outside-y)/2);
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
}

.goal {
    --offset-wave: -200px
}

.goal-grid {
    --gap-y: 2rem;
    --gap-x: 1rem;
    display: grid;
    gap: var(--gap-y) var(--gap-x);
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "A1 A1 A1 A1 A1 A1 A2 A2 A2 A2 A2 A2" "A3 A3 A3 A3 A3 A3 A4 A4 A4 A4 A4 A4" "P P P P P P P P P P . ."
}

.goal-grid__advantage:nth-of-type(1) {
    --arrow-after-display: block;
    --border-bottom-display: block;
    --arrow: url(../img/arrow-left.png);
    grid-area: A1
}

.goal-grid__advantage:nth-of-type(2) {
    --arrow-before-display: block;
    --border-bottom-display: block;
    --arrow: url(../img/arrow-right.png);
    grid-area: A2
}

.goal-grid__advantage:nth-of-type(3) {
    --arrow-after-display: block;
    --arrow: url(../img/arrow-left-bottom.png);
    grid-area: A3
}

.goal-grid__advantage:nth-of-type(4) {
    --arrow-before-display: block;
    --arrow: url(../img/arrow-right-bottom.png);
    grid-area: A4
}

.goal-grid__product {
    grid-area: P
}

.goal__title {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.goal__product {
    position: relative
}

.advantage {
    height: 100%
}

.advantage__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    gap: 12px;
    height: 100%
}

.advantage__body:before {
    content: "";
    display: var(--border-bottom-display, none);
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    top: calc(100% + var(--gap-y)/2);
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
}

.advantage__icon {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    gap: 0 12px
}

.advantage__description {
    text-align: center
}

.price {
    --offset-x: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-left: calc(var(--offset-x)*-1);
    margin-right: calc(var(--offset-x)*-1)
}

.price:before,
.price__item-value--old:before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #525252;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.price__item {
    width: 50%;
    padding: 0 var(--offset-x);
    text-align: center
}

.price__item-title {
    line-height: 1
}

.price__item-value {
    --price-size: 35px;
    line-height: var(--price-size-inherit, var(--price-size))
}

.price__item-value--old {
    font-size: calc(var(--price-size-inherit, var(--price-size)) - 5px);
    position: relative;
    display: inline-block
}

.price__item-value--old:before {
    height: 1px;
    width: 100%
}

.price__item-value--new {
    font-size: var(--price-size-inherit, var(--price-size))
}

.price__item-value .x_currency {
    font-size: .75em
}

.form__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
}

.form__row--column,
.form__row--row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.form__row--row {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row
}

.form__col {
    width: 100%
}

.form__input {
    --size: 1rem;
    position: relative;
    z-index: 2
}

.form__input:before {
    content: "";
    display: block;
    width: var(--size);
    height: var(--size);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: var(--size);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 20
}

.form__input--name:before {
    background-image: url(../img/name-icon.svg)
}

.form__input--phone:before {
    background-image: url(../img/phone-icon.svg)
}

.form__btn {
    width: 100%
}

.form__note {
    display: inline-block
}

.input,
.order--white:before {
    display: block;
    background: #fff
}

.input {
    padding: var(--size) var(--size) var(--size) calc(var(--size)*3);
    border-radius: 50rem;
    border: var(--border-input, none);
    outline: 0;
    -webkit-box-shadow: 0 3.159px 6.317px 0 rgba(36, 130, 51, .2) inset;
    box-shadow: 0 3.159px 6.317px 0 rgba(36, 130, 51, .2) inset;
    position: relative;
    z-index: 1;
    width: 100%;
    font: inherit;
    line-height: 1
}

.order__price {
    margin-bottom: 12px
}

.order--white {
    --border-input: .911px solid rgba(46, 45, 147, 0.25);
    border: 1px solid #fff;
    border-radius: 1.5rem;
    padding: 24px;
    position: relative;
    z-index: 1
}

.order--white:before {
    content: "";
    width: calc(100% - 12px - 12px);
    height: calc(100% - 12px - 12px);
    border-radius: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1
}

.expert {
    color: #525252
}

.expert-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 0;
    grid-template-areas: "T T T T T T T T T T T T" "P P P P D D D D D D D D" "L L L L L L L L L L C C"
}

.expert-grid__title {
    grid-area: T
}

.expert-grid__description {
    grid-area: D;
    -ms-flex-item-align: center;
    align-self: center
}

.expert-grid__profile {
    grid-area: P
}

.expert-grid__components {
    grid-area: C
}

.expert-grid__locations {
    grid-area: L
}

.expert__title {
    margin-bottom: 0
}

.expert__description {
    margin-left: .75rem
}

.expert__locations {
    position: relative
}

.expert__components {
    max-width: 50px;
    margin-left: auto;
    margin-right: auto
}

.expert__note {
    --gap-y: 2rem;
    position: relative;
    margin-top: var(--gap-y)
}

.expert__note:before {
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background: #525252;
    position: absolute;
    left: 0;
    top: calc(var(--gap-y)/2*-1)
}

.profile__image {
    display: block
}

.profile__name {
    margin-bottom: 0;
    display: none
}

.profile__position {
    display: none
}

.components {
    --gap-y: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gap-y) 0
}

.components__item {
    position: relative
}

.components__item:not(:last-child):before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-down-short' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: calc(100% + var(--gap-y)/2);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.component__image {
    width: 100%
}

.location,
.locations {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .75rem
}

.locations {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.location {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.location__flag {
    width: 36px;
    border-radius: 2px;
    border: 1px solid #525252;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: none
}

.action {
    position: relative;
    background: -webkit-gradient(linear, right top, left top, from(#ffa600), to(#ffef79));
    background: linear-gradient(270deg, #ffa600 0, #ffef79 100%)
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .5rem 1.25rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-areas: "P P P T T T T T T T T T" "F F F F F F F F F F F F"
}

.action-grid__product {
    grid-area: P
}

.action-grid__title {
    grid-area: T
}

.action-grid__form {
    grid-area: F
}

.action__title {
    font-size: 23px
}

.final {
    --bg-position-x: 20%
}

.final-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "T T T T T T T T T T T T" "S S S S S S S S S S S S" "F F F F F F F F F F F F" ". P P P P P P P P P P ." "O O O O O O O O O O O O"
}

.final-grid__title {
    grid-area: T
}

.final-grid__subtitle {
    grid-area: S
}

.final-grid__product {
    grid-area: P
}

.final-grid__features {
    grid-area: F
}

.final-grid__order {
    grid-area: O
}

.final__title {
    margin-bottom: 0
}

.popup {
    --height-wave: 75%;
    --bg-size-wave: cover;
    border-radius: 1.5rem
}

.popup__inner {
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    gap: 0 1rem;
    z-index: 10
}

.popup__product {
    --product-size-inherit: 250px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 0
}

.popup__order {
    width: 100%
}

.ever-popup__inner {
    max-width: calc(100% - 30px)
}

@media (min-width:320px) {
    :root {
        --container-width: 320px
    }

    .container,
    .container-xs {
        max-width: 320px
    }
}

@media (min-width:375px) {
    :root {
        --container-width: 375px
    }

    .container,
    .container-xs {
        max-width: 360px
    }
}

@media screen and (min-width:375px) {
    .location__flag {
        display: block
    }

    .action__title {
        font-size: 25px
    }
}

@media (min-width:420px) {
    :root {
        --container-width: 420px
    }

    .container,
    .container-xs {
        max-width: 420px
    }
}

@media screen and (min-width:420px) {
    .action-grid {
        gap: 1rem;
        grid-template-areas: "T T T T T T T T T T T T" "P P P P F F F F F F F F"
    }

    .action__title {
        text-align: center
    }
}

@media screen and (max-width:479px) {
    .promo-grid {
        position: relative
    }

    .promo-grid:after,
    .promo-grid:before {
        content: "";
        display: block;
        position: absolute;
        background-repeat: no-repeat
    }

    .promo-grid:before {
        background-image: url(../img/wave.svg);
        background-position: left 40% bottom;
        background-size: cover;
        width: 100vw;
        height: 160px;
        bottom: calc(var(--padding-bottom)*-1);
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 1
    }

    .promo-grid:after {
        width: 215px;
        aspect-ratio: 1/1.45;
        background-image: url(../img/promo-img_mob.webp);
        background-size: contain;
        background-position: center bottom;
        bottom: 100px;
        right: -45px;
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1)
    }

    .promo-grid__logo {
        min-width: 67px
    }

    .promo-grid__image {
        position: relative;
        z-index: -1;
        height: 100%;
        display: none
    }

    .promo__title {
        --h2: 1rem
    }

    .promo__subtitle {
        font-size: 17px;
        margin-top: 24px;
        position: relative
    }

    .promo__subtitle:before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, .5);
        position: absolute;
        top: -19px;
        left: 0
    }

    .promo__image {
        position: absolute;
        width: 200px;
        min-width: 215px;
        right: -15px;
        top: 0
    }

    .promo__features .features__item:last-child {
        width: 55%
    }

    .widget {
        background: rgba(0, 0, 0, .5);
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        display: none
    }

    .widget__inner {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: -webkit-transform 400ms;
        transition: transform 400ms;
        transition: transform 400ms, -webkit-transform 400ms;
        will-change: transform
    }

    .widget.is-open .widget__inner {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .widget__close {
        background: 0 0;
        cursor: pointer;
        border: 0;
        outline: 0;
        color: #fff
    }

    .widget__close svg {
        pointer-events: none
    }

    .widget__inner {
        width: 290px;
        height: 100%;
        padding: 1.5rem;
        margin-left: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

    .menu,
    .widget__inner,
    .widget__menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .widget__menu {
        width: 100%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .menu {
        gap: 40px;
        font-weight: 600
    }
}

@media (min-width:480px) {
    :root {
        --container-width: 480px
    }

    .container,
    .container-xs {
        max-width: 480px
    }

    .text-xs-left {
        text-align: left
    }

    .text-xs-right {
        text-align: right
    }

    .text-xs-center {
        text-align: center
    }
}

@media screen and (min-width:480px) {
    :root {
        --h1: 36px;
        --h2: 30px
    }

    .text-xs-smaller {
        --coef: -0.125rem
    }

    .text-xs-normal {
        --coef: 0px
    }

    .text-xs-bigger {
        --coef: 0.125rem
    }

    .swiper-scrollbar {
        margin-top: 1.5rem
    }

    .w-xs-100 {
        width: 100%
    }

    .block {
        --padding-top: 30px;
        --padding-bottom: 30px
    }

    .promo {
        --padding-top: 24px;
        --offset-wave: 60px
    }

    .promo-grid {
        grid-template-columns: repeat(12, 1fr);
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        gap: 1rem;
        grid-template-areas: "H H H H H H H H H H H H" "L L L L T T T T T T T T" "S S S S S S S S S S S S" ". F F F F F F F F F F ." "P P P P P P I I I I I I" "B B B B B B I I I I I I"
    }

    .promo-grid__image {
        -ms-flex-item-align: end;
        align-self: end;
        margin-bottom: calc(var(--padding-bottom)*-1)
    }

    .promo-grid__features,
    .promo-grid__product,
    .promo-grid__subtitle {
        margin-bottom: 0
    }

    .promo__header {
        display: block
    }

    .promo__burger,
    .promo__subtitle:before {
        display: none
    }

    .promo__logo {
        width: 100%
    }

    .promo__subtitle {
        margin-top: 0
    }

    .promo__image {
        max-width: 220px
    }

    .features {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .features__item {
        width: 100%
    }

    .feature__icon {
        --icon-size: 45px
    }

    .goal__product:after,
    .promo__widget,
    .use__product:after {
        display: none
    }

    .bg-dark {
        background-image: url(../img/purple-bg.svg)
    }

    .product--orange.product--label-xs-left {
        --label-offset-left: 0px;
        --label-offset-right: auto;
        padding-left: var(--padding-value);
        padding-right: 0
    }

    .product--orange.product--label-xs-right {
        --label-offset-left: auto;
        --label-offset-right: var(--label-offset-value);
        padding-left: 0;
        padding-right: 0
    }

    .use {
        --offset-wave: -60px;
        --padding-bottom: 60px
    }

    .use-grid {
        grid-template-areas: "P P P P P S S S S S S S" "N N N N N S S S S S S S" ". . . . . S S S S S S S"
    }

    .use__note {
        color: #fff
    }

    .step {
        --gap-inside-y: 0.5rem
    }

    .step__body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .goal__title {
        margin-bottom: .75rem
    }

    .goal-grid {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        grid-template-areas: "P P P P P P A1 A1 A1 A1 A1 A1" "P P P P P P A2 A2 A2 A2 A2 A2" "P P P P P P A3 A3 A3 A3 A3 A3" "P P P P P P A4 A4 A4 A4 A4 A4"
    }

    .goal-grid__advantage:nth-of-type(3) {
        --border-bottom-display: block
    }

    .goal__product {
        padding-bottom: var(--padding-value)
    }

    .advantage__body {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .advantage__description {
        text-align: left
    }

    .expert-grid {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .components {
        --gap-y: 20px
    }

    .location,
    .locations {
        gap: 1rem
    }

    .location__flag {
        width: 44px
    }

    .action-grid {
        grid-template-areas: "T T T T T T T T T T T T" "P P P F F F F F F F F F"
    }

    .final-grid {
        grid-template-areas: "T T T T T T T T T T T T" "P P P P P S S S S S S S" "P P P P P F F F F F F F" "P P P P P . . . . . . ." ". O O O O O O O O O O ."
    }
}

@media (min-width:640px) {
    :root {
        --container-width: 640px
    }

    .container,
    .container-sm {
        max-width: 640px
    }

    .text-sm-left {
        text-align: left
    }

    .text-sm-right {
        text-align: right
    }

    .text-sm-center {
        text-align: center
    }

            .promo__subtitle {
        margin-left: -55px;
        /* margin-right: -50px; */
    }
}

@media screen and (min-width:640px) {
    .text-sm-smaller {
        --coef: -0.125rem
    }

    .text-sm-normal {
        --coef: 0px
    }

    .text-sm-bigger {
        --coef: 0.125rem
    }

    .promo {
        --padding-top: 24px;
        --offset-wave: 100px
    }

    .promo-grid {
        grid-template-areas: "H H H H H H H H H H H H" "L L L L T T T T T T T T" "L L L L S S S S S S S S" "F F F F F F P P P P P P" "I I I I I I P P P P P P" "I I I I I I B B B B B B" "I I I I I I . . . . . ."
    }

    .promo__image {
        max-width: 230px;
        margin-left: auto;
        margin-right: auto
    }

    .product--orange.product--label-sm-left {
        --label-offset-left: 0px;
        --label-offset-right: auto;
        padding-left: var(--padding-value);
        padding-right: 0
    }

    .product--orange.product--label-sm-right {
        --label-offset-left: auto;
        --label-offset-right: var(--label-offset-value);
        padding-left: 0;
        padding-right: 0
    }

    .indicators__results,
    .indicators__title {
        max-width: 100%
    }

    .results {
        --gap-outside-x: 1rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .results__item {
        width: calc(50% - var(--gap-outside-x)/2)
    }

    .result:not(:last-child):before {
        display: none
    }

    .needs__item {
        width: 50%
    }

    .use-grid {
        gap: 1.5rem;
        grid-template-areas: "P P P P P S S S S S S S" "P P P P P N N N N . . ." "P P P P P . . . . . . ."
    }

    .use__title {
        max-width: 630px;
        margin-left: auto;
        margin-right: auto
    }

    .use__note {
        font-size: 18px;
        width: 260px;
        margin-top: 10px;
        background: #fff;
        padding: 15px;
        color: #1c1c63;
        text-align: center;
        border-radius: 110px
    }

    .step {
        --gap-inside-y: 0.5rem
    }

    .step__body {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .goal-grid {
        grid-template-areas: ".  .  .  .  P P P P .  .  .  . " "A1 A1 A1 A1 P P P P A2 A2 A2 A2" "A3 A3 A3 A3 P P P P A4 A4 A4 A4" ".  .  .  .  P P P P .  .  .  . "
    }

    .goal-grid__advantage:nth-of-type(3) {
        --border-bottom-display: none
    }

    .goal__product {
        margin-left: auto;
        margin-right: auto
    }

    .advantage__body:before {
        width: 100%
    }

    .expert-grid {
        gap: 1rem;
        grid-template-areas: "P P P T T T T T T T T T" "P P P D D D D D D D C C" "L L L L L L L L L L C C"
    }

    .expert__description {
        margin-left: 0
    }

    .expert__components {
        max-width: 70px
    }

    .action-grid {
        grid-template-areas: "P P P T T T T T T T T T" "P P P F F F F F F F F F";
        max-width: 550px;
        margin: 0 auto
    }

    .final-grid {
        grid-template-areas: "T T T T T T T T T T T T" "S S S S S S F F F F F F" "P P P P P P F F F F F F" "P P P P P P O O O O O O" "P P P P P P . . . . . ."
    }
}

@media (min-width:768px) {
    :root {
        --container-width: 768px
    }

    .container,
    .container-md,
    .container-sm {
        max-width: 768px
    }

    .text-md-left {
        text-align: left
    }

    .text-md-right {
        text-align: right
    }

    .text-md-center {
        text-align: center
    }
                .promo__subtitle {
        margin-left: 0;
        /* margin-right: -50px; */
    }
}

@media screen and (min-width:768px) {
    :root {
        --h1: 44px;
        --h2: 38px;
        --h3: 28px
    }

    .text-md-smaller {
        --coef: -0.125rem
    }

    .text-md-normal {
        --coef: 0px
    }

    .text-md-bigger {
        --coef: 0.125rem
    }

    .swiper-scrollbar {
        margin-top: 2rem;
        max-width: 200px
    }

    .block {
        --padding-top: 40px;
        --padding-bottom: 40px
    }

    .promo {
        --padding-top: 24px;
        --padding-bottom: 0
    }

    .promo-grid {
        grid-template-areas: "H H H H H H H H H H H H" "L L L T T T T T T T T T" "S S S S S S S F F F F F" "I I I I I I . F F F F F" "I I I I I I . P P P P P" "I I I I I I . B B B B B"
    }

    .promo-grid__button {
        margin-bottom: 40px
    }

    .promo__image {
        max-width: 100%
    }

    .feature__icon {
        --icon-size: 50px
    }

    .product--orange.product--label-md-left {
        --label-offset-left: 0px;
        --label-offset-right: auto;
        padding-left: var(--padding-value);
        padding-right: 0
    }

    .product--orange.product--label-md-right {
        --label-offset-left: auto;
        --label-offset-right: var(--label-offset-value);
        padding-left: 0;
        padding-right: 0
    }

    .testimonial {
        --shrink-quote-offset: 1.5;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .testimonial__text {
        position: relative;
        margin-top: calc(var(--size-quote)/var(--shrink-quote-offset));
        padding-top: calc(var(--size-quote)/1.5);
        padding-bottom: calc(var(--size-quote)/1.5)
    }

    .testimonial__text:before {
        top: auto;
        bottom: 100%
    }

    .testimonial__text:after {
        bottom: auto;
        top: 100%
    }

    .testimonial__author:before {
        width: 180px
    }

    .functions {
        max-width: 1060px
    }

    .function:not(.is-active):before {
        content: "";
        display: block;
        width: 100%;
        height: calc(var(--padding)*3);
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, var(--bg)));
        background: linear-gradient(to bottom, transparent 0%, var(--bg) 50%);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1
    }

    .function:not(.is-active):last-child:before {
        height: calc(var(--padding)*2)
    }

    .function-grid {
        gap: 0 1.5rem;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        grid-template-areas: "H H H H H H I I I I I I" "D D D D D D I I I I I I" ". . . . . . I I I I I I"
    }

    .function.is-active .function__description {
        margin-top: 0
    }

    .function:not(.is-active) .function__image {
        position: absolute;
        left: 0;
        top: 0;
        max-height: 800px
    }

    .use-grid {
        grid-template-areas: "P P P P P S S S S S S S" "P P P P P N N N N . . ." "P P P P P . . . . . . ."
    }

    .steps {
        --gap-outside-y: 3rem
    }

    .step {
        --arrow-size: 70px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: var(--gap-inside-y) var(--gap-inside-x)
    }

    .step__arrow {
        display: block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: var(--arrow-size)
    }

    .step:not(:last-child):before {
        left: calc(var(--arrow-size) + var(--gap-inside-x));
        width: calc(var(--arrow-size) + var(--gap-inside-x)*1.5)
    }

    .goal-grid {
        --gap-y: 60px;
        --gap-x: 40px;
        grid-template-columns: repeat(11, 1fr);
        grid-template-areas: ".  .  .  P P P P P .  .  . " "A1 A1 A1 P P P P P A2 A2 A2" "A3 A3 A3 P P P P P A4 A4 A4" ".  .  .  P P P P P .  .  . "
    }

    .advantage__icon {
        width: 60px;
        height: 60px
    }

    .expert-grid {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        grid-template-areas: "P P P T T T T T T T T T" "P P P D D D D D D D C C" "P P P L L L L L L L C C" ". . . . . . . . . . C C"
    }

    .profile__name {
        display: block;
        margin-top: 1rem
    }

    .profile__position {
        display: block
    }

    .action-grid {
        max-width: 100%;
        grid-template-areas: ". P P P . . . . . . . ." ". P P P T T T T T T T ." ". P P P F F F F F F F ." ". P P P . . . . . . . ."
    }

        .popup__inner {
        padding: 1.5rem;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end
    }
    .popup {
        --height-wave: 115%;
    }
}

@media (min-width:1024px) {
    :root {
        --container-width: 1024px
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1024px
    }

    .text-lg-left {
        text-align: left
    }

    .text-lg-right {
        text-align: right
    }

    .text-lg-center {
        text-align: center
    }

    .promo__subtitle {
        margin-left: -55px;
        margin-right: -55px;
    }
}

@media screen and (min-width:1024px) {
    :root {
        --h1: 50px;
        --h2: 40px;
        --h3: 30px;
        --h4: 24px;
        --h5: 22px;
        --h6: 18px
    }

    .text-lg-smaller {
        --coef: -0.125rem
    }

    .text-lg-normal {
        --coef: 0px
    }

    .text-lg-bigger {
        --coef: 0.125rem
    }

    .swiper-scrollbar {
        margin-top: 3rem;
        max-width: 250px
    }

    .block {
        --padding-top: 60px;
        --padding-bottom: 60px
    }

    .promo {
        --padding-top: 24px;
        --padding-bottom: 0;
        --offset-wave: 15px
    }

    .promo__title {
        font-size: var(--h2)
    }

    .promo-grid {
        gap: 1.5rem;
        grid-template-areas: "L L L H H H H H H H . ." "L L L T T T T T T T T T" "L L L S S S S S I I I I" "F F F F P P P P I I I I" "B B B B P P P P I I I I" ". . . . P P P P I I I I"
    }

    .promo__product {
        padding-bottom: var(--padding-value);
    }

    .promo__image {
        max-width: 100%
    }

    .feature {
        gap: 1rem
    }

    .feature__icon {
        --icon-size: 55px
    }

    .product--orange.product--label-lg-left {
        --label-offset-left: 0px;
        --label-offset-right: auto;
        padding-left: var(--padding-value);
        padding-right: 0
    }

    .product--orange.product--label-lg-right {
        --label-offset-left: auto;
        --label-offset-right: var(--label-offset-value);
        padding-left: 0;
        padding-right: 0
    }

    .product {
        --label-size: 80px
    }

    .ingredients {
        --padding-top: 100px
    }

    .testimonial__image {
        max-width: 350px
    }

    .review {
        padding: 0 40px
    }

    .review__header {
        gap: 30px
    }

    .how {
        --padding-top: 100px
    }

    .function {
        --padding: 1.5rem
    }

    .function__header {
        gap: 0 1.5rem
    }

    .function__icon {
        width: 70px;
        height: 70px
    }

    .indicators {
        --padding-bottom: 100px
    }

    .results {
        --gap-outside-x: 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .results__item {
        width: 20%
    }

    .result {
        --gap-inside-y: 0.5rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        --progress-size: 120px;
        --gap-inside-y: 1rem;
        padding: 0 1rem
    }

    .result:not(:last-child):before {
        width: 1px;
        height: var(--progress-size);
        bottom: auto;
        top: 0;
        -webkit-transform: none;
        transform: none;
        display: block;
        height: 100%
    }

    .progress__value-number {
        font-size: var(--h2)
    }

    .progress__value-percent {
        font-size: 25px
    }

    .target {
        --padding-bottom: 100px
    }

    .needs__item {
        width: 25%
    }

    .need {
        --image-size: 150px;
        --gap-y: 1rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center
    }

    .need:not(:last-child):before {
        content: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H40' stroke='%23FCA3CE'/%3E%3Ccircle cx='20' cy='5' r='5' fill='url(%23paint0_linear_42_98)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_42_98' x1='25' y1='5.03597' x2='15' y2='5.03597' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFA600'/%3E%3Cstop offset='1' stop-color='%23FFEF79'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
        display: block;
        position: absolute;
        right: 0;
        top: calc(var(--image-size)/2);
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%)
    }

    .use {
        --padding-bottom: 80px;
        --offset-wave: 0px
    }

    .use-grid {
        gap: 1.5rem;
        grid-template-areas: "P P P P P S S S S S S S" "P P P P P N N N N . . ." "P P P P P . . . . . . ."
    }

    .use__title {
        margin-bottom: 50px
    }

    .steps {
        --gap-outside-y: 4rem
    }

    .step {
        --arrow-size: 110px;
        --gap-inside-y: 2rem;
        --gap-inside-x: 2rem
    }

    .step__title {
        font-size: var(--h2)
    }

    .goal-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: ".  .  .  .  P P P P .  .  .  . " "A1 A1 A1 A1 P P P P A2 A2 A2 A2" "A3 A3 A3 A3 P P P P A4 A4 A4 A4" ".  .  .  .  P P P P .  .  .  . "
    }

    .advantage {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0 1rem
    }

    .advantage:after,
    .advantage:before {
        content: "";
        display: block;
        width: 90px;
        height: 60px;
        background: var(--arrow);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

    .advantage:after {
        display: var(--arrow-after-display, none)
    }

    .advantage:before {
        display: var(--arrow-before-display, none)
    }

    .advantage__body {
        gap: 0 1rem;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }

    .advantage__body:before {
        width: 100px
    }

    .price__item-lg-row,
    .price__item-title-lg-column {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left
    }

    .price__item-lg-row {
        --price-size-inherit: 28px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: .5rem
    }

    .price__item-title-lg-column {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .form__row-lg--column,
    .form__row-lg--row,
    .price__item-title-lg-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .form__row-lg--row {
        -webkit-box-orient: horizontal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .expert-grid {
        gap: 1.5rem
    }

    .expert__note {
        --gap-y: 3rem
    }

    .location,
    .locations {
        gap: 1.5rem
    }

    .location__flag {
        width: 73px
    }

    .action {
        background: 0 0
    }

    .action-grid {
        grid-template-areas: "P T T T F F F F F F F F"
    }

    .action__title {
        line-height: 1.2;
        font-size: var(--h6);
        text-align: left
    }

    .action__inner {
        --padding-top: 0.5rem;
        --padding-bottom: 0.5rem;
        background: -webkit-gradient(linear, right top, left top, from(#ffa600), to(#ffef79));
        background: linear-gradient(270deg, #ffa600 0, #ffef79 100%);
        border-radius: 50rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .action__container {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .final {
        --offset-wave: -30px
    }

    .final-grid {
        gap: 1.5rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        grid-template-areas: "T T T T T T T P P P P P" "S S S S S S . P P P P P" "O O O O F F F P P P P P"
    }

    .final-grid__product {
        -ms-flex-item-align: end;
        align-self: end
    }

    .final__subtitle {
        font-size: var(--h5)
    }

    .final__product {
        --product-size-inherit: 500px
    }

    .popup {
        --height-wave: calc(100% + 30px)
    }



    .popup__product {
        --product-size-inherit: 300px
    }

    .popup__order {
        width: 350px
    }


}

@media (min-width:1220px) {
    :root {
        --container-width: 1190px
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        --container-width: 1190px;
        max-width: 1190px
    }

    .text-xl-left {
        text-align: left
    }

    .text-xl-right {
        text-align: right
    }

    .text-xl-center {
        text-align: center
    }
        .promo__subtitle {
        margin-left: -50px;
        margin-right: -50px;
    }
}

@media screen and (min-width:1220px) {
    :root {
        --line-height: 1.5;
        --h1: 55px;
        --h2: 45px;
        --h3: 35px;
        --h4: 30px;
        --h5: 25px;
        --h6: 20px
    }

    body {
        font-size: 18px
    }

    .text-xl-blue {
        color: #3332a2
    }

    .text-xl-gradient-blue {
        background: -webkit-gradient(linear, left top, right top, from(#4e4cd2), to(#110f7a));
        background: linear-gradient(90deg, #4e4cd2 0, #110f7a 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .text-xl-smaller {
        --coef: -0.125rem
    }

    .text-xl-normal {
        --coef: 0px
    }

    .text-xl-bigger {
        --coef: 0.125rem
    }

    .swiper-scrollbar {
        margin-top: 4rem;
        max-width: 330px
    }

    .promo {
        --offset-wave: 35px;
    }

    .promo-grid {
        grid-template-areas: ". . . H H H H H H . . ." "L L L T T T T T I I I I" "L L L S S S S S I I I I" ". . . S S S S S I I I I" "F F F F P P P P I I I I" "B B B B P P P P I I I I" ". . . . P P P P I I I I"
    }

    .promo__image {
        max-width: calc(100% + 75px);
        margin-left: -75px;
        -webkit-transform: none;
        transform: none
    }

    .promo__product {
        --product-size-inherit: 350px;

    }

    .feature {
        gap: 1.25rem
    }

    .feature__icon {
        --icon-size: 60px
    }

    .bg-dark__orange,
    .bg-orange:before {
        display: block;
        position: absolute;
        -webkit-animation: rotate-orange 8s linear infinite;
        animation: rotate-orange 8s linear infinite
    }

    .bg-dark__orange {
        width: 240px;
        height: 240px;
        top: -120px;
        z-index: 4
    }

    .bg-dark__orange--right {
        right: calc((100vw - var(--container-width))/2 + 150px)
    }

    .bg-dark__orange--left {
        left: calc((100vw - var(--container-width))/2)
    }

    .bg-orange {
        position: relative
    }

    .bg-orange:before {
        content: "";
        width: 150px;
        height: 150px;
        background-image: url(../img/bg-orange.webp);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        top: calc(var(--padding-top) - 75px);
        right: calc(50vw + var(--container-width)/2)
    }

    .product--orange.product--label-xl-left {
        --label-offset-left: 0px;
        --label-offset-right: auto;
        padding-left: var(--padding-value);
        padding-right: 0
    }

    .product--orange.product--label-xl-right {
        --label-offset-left: auto;
        --label-offset-right: var(--label-offset-value);
        padding-left: 0;
        padding-right: 0
    }

    .product--smoothie.product--label-xl-left {
        --label-offset-left: var(--label-offset-value);
        --label-offset-right: auto;
        padding-left: 0;
        padding-right: 0
    }

    .product--smoothie.product--label-xl-right {
        --label-offset-left: auto;
        --label-offset-right: 0;
        padding-left: 0;
        padding-right: var(--padding-value)
    }

    .product {
        --label-size: 100px
    }

    .ingredients {
        --padding-top: 164px;
        --padding-bottom: 114px
    }

    .ingredients__title {
        font-size: var(--h1);
        margin-bottom: 94px
    }

    .testimonials {
        --padding-top: 85px;
        --padding-bottom: 64px
    }

    .testimonial {
        --size-quote: 60px
    }

    .testimonial__image {
        max-width: 430px
    }

    .reviews__title {
        margin-bottom: 90px
    }

    .how {
        --padding-top: 120px;
        --padding-bottom: 110px
    }

    .how__title {
        font-size: var(--h1)
    }

    .indicators {
        --padding-top: 90px;
        --padding-bottom: 140px
    }

    .indicators__title {
        margin-bottom: 70px
    }

    .result {
        --progress-size: 150px;
        --gap-inside-y: 1.5rem
    }

    .progress__value-number {
        font-size: 50px
    }

    .progress__value-percent {
        font-size: 30px
    }

    .target {
        --padding-top: 90px;
        --padding-bottom: 120px
    }

    .needs {
        --offset-x: 25px
    }

    .needs__item {
        width: 25%
    }

    .need {
        --gap-y: 1.5rem;
        --image-size: 190px
    }

    .need__title {
        margin-bottom: 1.125rem
    }

    .use {
        --padding-top: 100px;
        --padding-bottom: 100px;
        --offset-wave: 35px
    }

    .use-grid {
        gap: 30px 40px;
        grid-template-areas: "P P P P S S S S S S S S" "P P P P N N N N . . . ." "P P P P . . . . . . . ."
    }

    .use__product {
        --product-size-inherit: 400px
    }

    .use__note {
        margin-left: 40px
    }

    .steps {
        --gap-outside-y: 4.5rem
    }

    .goal {
        --padding-top: 70px;
        --padding-bottom: 70px
    }

    .goal-grid {
        --gap-y: 90px
    }

    .goal__product {
        --product-size-inherit: 450px
    }

    .advantage {
        gap: 0 3rem
    }

    .advantage__body:before {
        width: 155px
    }

    .advantage__description {
        font-size: 20px;
        font-weight: 600
    }

    .price__item-value {
        --price-size: 40px
    }

    .expert {
        --padding-top: 95px;
        --padding-bottom: 40px
    }

    .expert-grid {
        gap: 2rem 3rem;
        grid-template-areas: "P P P P T T T T T T T T" "P P P P D D D D D D D ." "P P P P L L L L L C C ." ". . . . . . . . . C C ."
    }

    .expert__note {
        --gap-y: 80px
    }

    .expert__components {
        max-width: 80px
    }

    .final {
        --offset-wave: 150px
    }

    .final__features {
        --gap-inherit: 70px
    }

    .final-grid {
        grid-template-areas: "T T T T T T T P P P P P" "S S S S S S S P P P P P" "O O O O F F F P P P P P"
    }

    .final__product {
        --product-size-inherit: 700px
    }
}

@media (min-width:1440px) {
    .text-xxl-left {
        text-align: left
    }

    .text-xxl-right {
        text-align: right
    }

    .text-xxl-center {
        text-align: center
    }
}

@media screen and (min-width:1440px) {
    .text-xxl-smaller {
        --coef: -0.125rem
    }

    .text-xxl-normal {
        --coef: 0px
    }

    .text-xxl-bigger {
        --coef: 0.125rem
    }
}

@media screen and (min-width:320px) and (max-width:639px) {
    .need:not(:last-child):before {
        content: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H40' stroke='%23FCA3CE'/%3E%3Ccircle cx='20' cy='5' r='5' fill='url(%23paint0_linear_42_98)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_42_98' x1='25' y1='5.03597' x2='15' y2='5.03597' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFA600'/%3E%3Cstop offset='1' stop-color='%23FFEF79'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
        display: block;
        position: absolute;
        left: calc(var(--image-size) + var(--gap-x) + var(--offset-x));
        bottom: calc(var(--offset-y)/2*-1);
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }
}

@media screen and (max-width:479px) and (min-width:375px) {
    .promo-grid:after {
        width: 230px
    }
}

@media screen and (max-width:479px) and (min-width:420px) {
    .promo-grid:after {
        width: 260px
    }
}

@media screen and (min-width:640px) and (max-width:767px) {
    .need {
        --gap-y: 1rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center
    }

    .need:not(:nth-last-of-type(-n+2)):before {
        content: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H40' stroke='%23FCA3CE'/%3E%3Ccircle cx='20' cy='5' r='5' fill='url(%23paint0_linear_42_98)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_42_98' x1='25' y1='5.03597' x2='15' y2='5.03597' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFA600'/%3E%3Cstop offset='1' stop-color='%23FFEF79'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
        display: block;
        position: absolute;
        left: 50%;
        bottom: calc(var(--offset-y)/2*-1);
        -webkit-transform: translateY(50%) translateX(-50%);
        transform: translateY(50%) translateX(-50%)
    }
}

@media screen and (min-width:768px) and (max-width:1023px) {
    .need:not(:nth-last-of-type(-n+2)):before {
        content: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H40' stroke='%23FCA3CE'/%3E%3Ccircle cx='20' cy='5' r='5' fill='url(%23paint0_linear_42_98)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_42_98' x1='25' y1='5.03597' x2='15' y2='5.03597' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFA600'/%3E%3Cstop offset='1' stop-color='%23FFEF79'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
        display: block;
        position: absolute;
        left: calc(var(--image-size) + var(--gap-x) + var(--offset-x));
        bottom: calc(var(--offset-y)/2*-1);
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }
}