@font-face {
    src: url(../fonts/Oswald-Regular.woff2)format("woff2");
    font-family: Oswald;
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

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

@font-face {
    src: url(../fonts/Oswald-SemiBold.woff2)format("woff2");
    font-family: Oswald;
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    src: url(../fonts/Roboto-Regular.woff2)format("woff2");
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

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

:root {
    --content-width: 1280px;
    --container-offset: 15px;
    --container-width: calc(var(--content-width) + (var(--container-offset)*2));
    --font-family-primary: "Roboto", sans-serif;
    --font-family-secondary: "Oswald", sans-serif;
    --font-weight: 400;
    --font-size: 18px;
    --color-white: #fff;
    --color-black: #000;
    --color-dark-400: #303030;
    --color-dark-700: #161616;
    --color-gray-150: #dfdfdf;
    --color-gray-200: #f2f2f2;
    --color-gray-250: #aeaeae;
    --color-gray-300: #d6d6d6;
    --color-gray-350: #686868;
    --color-gray-400: #303030;
    --color-gray-450: #5e5e5e;
    --color-gray-500: #242424;
    --color-gray-700: ##616161;
    --color-gray-800: #2e2e2e;
    --color-yellow-400: #f8c73b;
    --color-green-400: #12af53;
    --color-red-400: #ed2e2e;
    --radius-main: 3px;
    --shadow-main: 0 4px 20px #0000000f;
    --shadow-secondary: 0 0 30px #0000001a;
    --drop-shadow: 0 0 15px #0006;
    --shadow-slide: 0 4px 20px #0009;
    --modal-shadow: 0 2px 30px #00000040
}

.checkbox__field:checked+.checkbox__content:after {
    opacity: 1
}

.checkbox__field:focus+.checkbox__content:before {
    outline: 1px solid var(--color-gray-100);
    outline-offset: 1px
}

.checkbox__field:disabled+.checkbox__content {
    opacity: .4;
    pointer-events: none
}

html,
body {
    scroll-behavior: smooth;
    overscroll-behavior-y: none
}

.page {
    height: var(--vh);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight);
    letter-spacing: 0;
    color: var(--color-dark-500);
    background-color: var(--color-white);
    font-size: clamp(13px, 1vw, 17px);
    font-style: normal;
    line-height: 1.73
}

.page__body {
    min-width: 320px;
    min-height: var(--vh)
}

.page.open {
    overflow: hidden
}

.page--no {
    height: auto
}

.page--no .page__body,
.page--no .site-container {
    min-height: 100dvh
}

.page--no .footer__inner {
    flex-direction: row;
    justify-content: space-between
}

.page--no .footer__inner>:not(:last-child) {
    margin-bottom: 0
}

.page--no .footer__copy {
    width: auto;
    padding: 0;
    display: block
}

.container {
    padding: 0 var(--container-offset);
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto
}

.site-container {
    min-height: var(--vh);
    grid-template-rows: 1fr auto;
    grid-template-columns: 100%;
    display: grid
}

.main {
    z-index: 3;
    background-color: var(--color-white)
}

section {
    z-index: 1;
    background-color: var(--color-white);
    position: relative
}

.background {
    color: var(--color-white);
    background-color: var(--color-gray-400)
}

.hidden {
    display: none !important
}

.sr-only {
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    width: 1px !important;
    height: 1px !important;
    white-space: nowrap !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    border: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important
}

.dis-scroll {
    width: 100%;
    height: 100dvh;
    height: calc(var(--vh, 1vh)*100);
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: none
}

.copyright {
    margin-left: 2.5rem
}

@media only screen and (max-width:475px) {
    .copyright {
        text-align: center;
        display: block
    }
}

.slick-list {
    padding-bottom: 33px;
    overflow: visible
}

h1,
h2,
h3,
a,
button {
    --font-weight: 600;
    width: -moz-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: var(--font-family-secondary);
    overflow: hidden
}

a,
button {
    --font-weight: 500
}

h2 {
    letter-spacing: normal;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.4
}

@media only screen and (max-width:992px) {
    h2 {
        letter-spacing: normal;
        font-size: 34px;
        line-height: 1.4
    }
}

@media only screen and (max-width:768px) {
    h2 {
        letter-spacing: normal;
        font-size: 25px;
        line-height: 1.52
    }
}

h3 {
    letter-spacing: normal;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.54
}

@media only screen and (max-width:768px) {
    h3 {
        letter-spacing: normal;
        font-size: 20px;
        line-height: 2
    }
}

a {
    color: var(--clr, var(--clr-primary-400));
    transition: color .5s
}

a:hover,
a:focus {
    color: var(--color-yellow-400);
    text-decoration: none
}

.text,
p:not(.parallax__title p) {
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7
}

.title-main.hero__title {
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.48;
    overflow: hidden
}

.title-main.hero__title.hero__title span {
    display: block
}

@media only screen and (max-width:992px) {
    .title-main.hero__title {
        letter-spacing: normal;
        font-size: 40px;
        line-height: 1.6
    }
}

@media only screen and (max-width:768px) {
    .title-main.hero__title {
        letter-spacing: normal;
        font-size: 34px;
        line-height: 1.4
    }
}

.title-maintenance {
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 600;
    line-height: 74px
}

.text-show span {
    transform: translate(0)
}

.title-animation {
    position: relative
}

.title-animation:before {
    content: "";
    z-index: 1;
    width: 0;
    height: 100%;
    background-color: var(--color-yellow-400);
    animation: 1s .2s forwards box-show, 1s 1.4s forwards title-before-hide;
    position: absolute;
    top: 0;
    left: 0
}

.title-animation>span,
.title-animation p {
    opacity: 0;
    animation: .1s 1.1s forwards title-show
}

.icons-animation {
    animation: 1s 1s forwards title-show
}

.text-animation {
    opacity: 0;
    animation: 1s .4s forwards text-show
}

.btn-animation {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: .6s .7s forwards btn-show
}

.btn-animation span {
    animation: .6s 1.3s forwards btn-show
}

.image-animation {
    animation: 1s ease-in-out forwards partners-image, .2s forwards title-show
}

@keyframes title-show {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes text-show {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50%)
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }
}

@keyframes toplinecross {
    0% {
        transform: translateY(var(--move-decrement))
    }
    50% {
        transform: translateY(0)
    }
    to {
        transform: rotate(45deg)
    }
}

@keyframes bottomlinecross {
    0% {
        transform: translateY(var(--move))
    }
    50% {
        transform: translateY(0)
    }
    to {
        transform: translateY(0)rotate(-45deg)
    }
}

@keyframes box-show {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes title-before-hide {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(calc(100% + 2px))
    }
}

@keyframes text-hide {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50%)
    }
}

@keyframes btn-show {
    0% {
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
    }
    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@keyframes toplineburger {
    0% {
        transform: rotate(45deg)
    }
    50% {
        transform: rotate(0)
    }
    to {
        transform: translateY(var(--move-decrement))rotate(0)
    }
}

@keyframes bottomlineburger {
    0% {
        transform: translateY(0)rotate(-45deg)
    }
    50% {
        transform: rotate(0)
    }
    to {
        transform: translateY(var(--move))rotate(0)
    }
}

@keyframes partners-image {
    0% {
        transform: translateY(25%)
    }
    50% {
        transform: translateY(-10%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes tabs-hide {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%)
    }
}

@keyframes tabs-show {
    0% {
        opacity: 0;
        transform: translateY(-50%)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes mobile-menu-open {
    0% {
        top: calc(-100vh - 100%)
    }
    to {
        top: 0
    }
}

@keyframes mobile-menu-close {
    0% {
        top: 0
    }
    to {
        top: calc(-100vh - 100%)
    }
}

.burger {
    --line-height: 2px;
    --buger-size: 30px;
    --move: calc(var(--buger-size)/3);
    --move-decrement: calc(var(--move)*-1);
    --transition-time: .5s;
    --lines-color: var(--color-white);
    width: var(--buger-size);
    height: var(--buger-size);
    opacity: .5;
    transition: opacity var(--transition-time)ease;
    background-color: #0000;
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.burger span {
    z-index: -1;
    width: 100%;
    height: var(--line-height);
    background-color: var(--lines-color);
    transition: transform var(--transition-time)ease, background-color var(--transition-time)ease .3s;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.burger span:before,
.burger span:after {
    content: "";
    width: 100%;
    height: var(--line-height);
    background-color: var(--lines-color);
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.645, .045, .355, 1);
    animation-fill-mode: forwards;
    position: absolute;
    left: 0
}

.burger span:before {
    transform: translateY(var(--move-decrement))rotate(0)
}

.burger span:after {
    transform: translateY(var(--move))rotate(0)
}

.burger:hover {
    opacity: 1
}

@media only screen and (max-width:768px) {
    .burger {
        display: block
    }
}

.closed.opened span {
    background-color: var(--lines-color);
    transition: background-color .3s
}

.closed.opened span:before {
    animation-name: toplineburger
}

.closed.opened span:after {
    animation-name: bottomlineburger
}

.closed.opened .nav__list {
    animation: 1.2s 1.2s forwards mobile-menu-close;
    top: 0
}

.closed.opened .nav__list:before,
.closed.opened .nav__list:after {
    animation: 1.2s .5s forwards mobile-menu-close;
    top: 0
}

.closed.opened .nav__list:after {
    animation-delay: .4s
}

.closed.opened .nav__item {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .3s;
    transition-delay: 0s
}

.header {
    z-index: 10;
    width: 100%;
    background-color: var(--color-gray-400);
    transition-property: transform, padding;
    transition-duration: .15s;
    position: fixed;
    top: 0
}

.header .btn {
    border-width: 1px
}

.header.hide {
    transform: translateY(-100%)
}

.header.header--lock {
    transform: none
}

.header.header--lock a {
    color: var(--color-gray-25);
    pointer-events: none
}

.header.header--lock .btn {
    background-color: var(--color-gray-450)
}

@media only screen and (max-width:768px) {
    .header {
        background-color: var(--color-dark-700)
    }
}

.nav {
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative
}

.nav__list {
    align-items: center;
    display: flex
}

.nav__list:before,
.nav__list:after {
    content: "";
    z-index: 1;
    width: 60%;
    height: 100vh;
    background-color: var(--color-dark-700);
    position: absolute;
    top: calc(-100vh - 100%)
}

.nav__list:before {
    display: none;
}

.nav__list:after {
    display: none;
}

@media only screen and (max-width:768px) {
    .nav__list {
        z-index: -1;
        padding-top: var(--header-height);
        width: 100%;
        height: 450px;
        flex-direction: column;
        justify-content: center;
        transition-property: transform;
        transition-duration: 1s;
        position: fixed;
		overflow: scroll;
        top: 0;
        left: 0;
        transform: translateY(-150%)
    }
}

.nav__item {
    z-index: 5
}

@media only screen and (max-width:768px) {
    .nav__item:first-of-type {
        margin-top: 0;
    }
}

.nav__item:not(:last-of-type, .footer .nav__item) {
    margin-right: 2.25rem
}
.wrap-menu {
    display: flex;
    align-items: center;
    gap: 35px;
}
@media only screen and (max-width:768px) {
    .nav__item:not(:last-of-type, .footer .nav__item) {
        margin-bottom: 20px;
        margin-right: 0
    }
    .partners__link span {
        font-size: 16px !important;
    }
    .nav__item:last-of-type:not(.footer .nav__item) {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .nav__item_custom {
        display: none;
    }
    .btn.nav__link > a.nav__link {
        font-size: 14px !important;
    }
}

.nav__item .btn {
    width: 140px;
    margin: 0 auto
}

@media only screen and (max-width:768px) {
    .nav__item {
        opacity: 0;
        visibility: hidden
    }
}

.nav__link {
    --font-weight: 500;
    text-transform: uppercase;
    color: var(--color-white);
    font-size: 14px
}

.nav__link--current {
    color: var(--color-yellow-400)
}

.nav:not(.nav--footer) {
    padding: 1.5625rem 0
}

@media only screen and (max-width:768px) {
    .nav:not(.nav--footer) .nav__link:not(.btn) {
        font-size: 22px;
        font-weight: 500;
        line-height: 48px
    }
}

@media only screen and (max-width:992px) {
    .nav:not(.nav--footer) {
        padding: 20px 0
    }
}

@media only screen and (max-width:768px) {
    .nav:not(.nav--footer) {
        background-color: var(--color-dark-700);
        padding: 10px 0
    }
}

.btn, .btn > a {
    border-radius: var(--radius-main);
    width: 100%;
    height: 42px;
    max-width: 140px;
    text-transform: uppercase;
    color: var(--color-gray-500);
    background-color: var(--color-yellow-400);
    border: 0 solid #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    transition-property: background-color, color, border-color;
    transition-duration: .4s;
    display: flex;
    position: relative
}
.footer__nav .btn {
    width: 150px;
}
.header .nav .btn > a {
    width: 140px;
    cursor: pointer !important;
    font-weight: 600 !important;
}
.header .nav .btn:hover > a {
    background-color: #ffffff !important;
}
.btn:before {
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #0000;
    position: absolute;
    top: 0;
    left: 0
}

.btn span {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    display: block
}

.btn:hover,
.btn:focus {
    border-color: var(--color-white);
    color: var(--color-dark-400);
    background-color: var(--color-white)
}

.btn--reverse {
    border-color: var(--color-yellow-400);
    background-color: var(--color-white)
}

.btn--reverse:hover,
.btn--reverse:focus {
    border-color: var(--color-gray-400);
    color: var(--color-black);
    background-color: var(--color-white)
}

.btn--clean {
    color: var(--color-white) !important;
    background-color: #0000 !important
}

.demo {
    padding: 7.5625rem 0 8.75rem
}

.demo__title {
    text-align: center;
    margin: 0 auto 3.4375rem
}

@media only screen and (max-width:1440px) {
    .demo {
        padding: 5rem 0 7.5rem
    }
}

@media only screen and (max-width:992px) {
    .demo {
        padding: 5rem 0
    }
}

.clicks {
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.clicks__btn {
    z-index: 2;
    width: 100%;
    height: 20px;
    max-width: 35px;
    background-color: #0000;
    border: none;
    position: relative
}

.clicks__btn:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='16' viewBox='0 0 52 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04861e-06 8L12 1.0718L12 14.9282L1.04861e-06 8Z' fill='%23242424'/%3E%3Crect x='52' y='9' width='41' height='2' transform='rotate(-180 52 9)' fill='%23242424'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0
}

.clicks__btn.next:before {
    transform: scaleX(-1)
}

.clicks__btn.prev {
    margin-right: 20px
}

@media only screen and (max-width:992px) {
    .clicks {
        padding-top: 30px
    }
}

@media only screen and (max-width:768px) {
    .clicks {
        padding-top: 0
    }
    .copyright {
        margin-left: 0;
    }
}

.error .error-message {
    opacity: 1;
    visibility: visible
}

.error .form__input {
    border-color: var(--color-red-400)
}

.error .form__input:focus,
.error .form__input:hover {
    border-color: var(--color-yellow-400);
    outline: none
}

.error-message {
    color: var(--color-red-400);
    opacity: 0;
    visibility: hidden;
    font-size: 11px;
    font-weight: 400;
    line-height: 32px;
    position: absolute;
    bottom: -60%;
    left: 0
}

@media only screen and (max-width:475px) {
    .error-message {
        bottom: -60%
    }
}

.form__row {
    border-top: 1px solid var(--color-gray-150);
    grid-template-columns: repeat(2, 1fr);
    gap: 2.3125rem 4.8125rem;
    padding-top: 2.375rem;
    display: grid
}

.form__row:not(:last-of-type) {
    margin-bottom: 2.1875rem
}

.form__row:last-of-type {
    margin-bottom: 2.625rem
}

@media only screen and (max-width:768px) {
    .form__row {
        gap: 2.5rem
    }
}

@media only screen and (max-width:475px) {
    .form__row {
        grid-template-columns: 1fr;
        gap: 1.875rem
    }
}

.form__area {
    position: relative
}

.form__input {
    width: 100%;
    color: var(--color-gray-700);
    background-color: var(--color-gray-200);
    border: 1px solid #0000;
    outline: 1px solid #0000;
    padding: 8px 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.3;
    transition-property: outline, border-color;
    transition-duration: .3s
}

.form__input::placeholder {
    transition: color .15s
}

.form__input:focus {
    outline-color: var(--color-yellow-400)
}

.form__input:focus::placeholder {
    color: var(--color-gray-200)
}

.form__input:hover {
    outline-color: var(--color-yellow-400)
}

.form .btn {
    max-width: 180px;
    margin-left: auto;
    padding: 11px
}

.form .btn:hover,
.form .btn:focus {
    border-color: var(--color-gray-500);
    color: var(--color-white);
    background-color: var(--color-gray-500)
}

.partners {
    padding: 9.375rem 0
}

.partners__title {
    text-align: center;
    margin: 0 auto 3.25rem
}

.partners__list {
    border-style: solid;
    border-width: 1px 0 0 1px;
    border-color: var(--color-gray-300);
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    grid-auto-rows: clamp(160px, 12.5rem, 200px);
    display: grid
}

@media only screen and (max-width:992px) {
    .partners__list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        grid-auto-rows: clamp(110px, 10.625rem, 180px)
    }
}

@media only screen and (max-width:768px) {
    .partners__list {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        grid-auto-rows: clamp(110px, 9.375rem, 160px)
    }
}

@media only screen and (max-width:475px) {
    .partners__list {
        grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
        grid-auto-rows: clamp(100px, 6.875rem, 160px)
    }
}

.partners__item {
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: var(--color-gray-300);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.partners__link {
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: flex
}

.partners__link:before {
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid #0000;
    transition-property: border-color;
    transition-duration: .5s;
    position: absolute;
    top: 0;
    left: 0
}

.partners__link img {
    margin-bottom: 10px
}

.partners__link span {
    text-transform: uppercase;
    color: var(--color-gray-500);
    font-size: 18px;
    line-height: 1.7
}

.partners__link:hover:before {
    border-color: var(--color-yellow-400)
}

.partners__link:hover img {
    filter: brightness()grayscale(0)
}

.partners__image {
    opacity: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: translateY(50%)
}

.partners__image img {
    width: 100%;
    max-width: 40px;
    filter: brightness(.5)grayscale();
    transition-property: filter;
    transition-duration: .5s
}

@media only screen and (max-width:992px) {
    .partners__image img {
        max-width: 30px
    }
}

.partners__image--huobi img {
    max-width: 30px
}

@media only screen and (max-width:768px) {
    .partners__image--huobi img {
        width: -moz-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

@media only screen and (max-width:1440px) {
    .partners {
        padding: 7.5rem 0
    }
}

@media only screen and (max-width:992px) {
    .partners {
        padding: 5rem 0
    }
}

@media only screen and (max-width:768px) {
    .partners {
        padding-bottom: 2.5rem
    }
}

.not-found {
    padding-top: var(--header-height);
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex
}

.not-found__inner {
    width: 100%;
    max-width: 600px;
    padding: 50px 10px
}

.not-found h1 {
    margin: 0 auto 10px;
    font-size: 32px
}

.not-found p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 28px
}

.not-found .btn {
    margin: 0 auto
}

.opened .nav__list {
    transform: translate(0);
    background: #161616;
}

.opened .nav__list:before,
.opened .nav__list:after {
    animation: 1s .2s forwards mobile-menu-open
}

.opened .nav__list:after {
    animation-delay: .5s
}

.opened .nav__item {
    opacity: 1;
    visibility: visible;
    transition-property: opacity, visibility;
    transition-duration: .3s;
    transition-delay: 1.8s
}

.opened span {
    background-color: #0000;
    transition: background-color .3s
}

.opened span:before,
.opened span:after {
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.645, .045, .355, 1);
    animation-fill-mode: forwards
}

.opened span:before {
    animation-name: toplinecross
}

.opened span:after {
    animation-name: bottomlinecross
}

.success {
    position: relative
}

.success:before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2312AF53'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.51078 9.41809L11.1665 5L12 5.79095L6.51078 11L4 8.29095L4.8335 7.5L6.51078 9.41809Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%)
}

.success .form__input {
    border-color: var(--color-green-400)
}

.success .form__input:focus,
.success .form__input:hover {
    border-color: var(--color-yellow-400);
    outline: none
}

.tabs {
    position: relative
}

.tabs [data-panes] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.tabs [data-panes].active {
    position: relative
}

.footer {
    z-index: 3;
    width: 100%;
    color: var(--color-white);
    background-color: var(--color-gray-500);
    padding: 2.5625rem 0 35px;
    font-size: 13px;
    position: relative;
    bottom: 0
}

.footer__logo {
    margin-right: 2.1875rem
}

.footer__inner {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.5625rem;
    display: flex
}

@media only screen and (max-width:576px) {
    .footer__inner>:not(:last-child) {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:992px) {
    .footer__inner {
        flex-wrap: wrap;
        justify-content: space-around
    }
}

@media only screen and (max-width:576px) {
    .footer__inner {
        flex-direction: column
    }
}

.footer__nav {
    align-items: center;
    display: flex
}

@media only screen and (max-width:475px) {
    .footer__nav {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px
    }
}

.footer__copy {
    justify-content: center;
    align-items: center;
    display: flex
}

@media only screen and (max-width:992px) {
    .footer__copy {
        width: 100%;
        padding-top: 30px
    }
}

@media only screen and (max-width:576px) {
    .footer__copy {
        padding-top: 0
    }
}

.footer__additional {
    border-top: 1px solid #afafaf;
    padding: 38px 0 0;
    font-size: 15px;
    line-height: 22px
}

.footer__additional p:not(:last-child) {
    margin-bottom: 15px
}

.footer .nav__item {
    opacity: 1;
    visibility: visible
}

.footer .nav__item:not(:last-of-type) {
    margin-right: 1.875rem
}

@media only screen and (max-width:475px) {
    .footer .nav__item:not(:last-of-type) {
        margin-right: 15px
    }
}

.footer .nav__link {
    font-size: 13px
}

.footer .nav__link--normal {
    text-transform: capitalize
}

@media only screen and (max-width:475px) {
    .footer {
        padding: 1.875rem 0
    }
}

.cookie {
    z-index: 3;
    width: 100%;
    color: var(--color-white);
    background-color: var(--color-gray-500);
    padding: clamp(15px, 2em, 30px);
    animation: .4s ease-in-out forwards cookie;
    position: fixed;
    bottom: 0
}

.cookie__inner {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.cookie__btns {
    width: 100%;
    max-width: 210px;
    text-align: center;
    text-transform: uppercase
}

.cookie__btns a:first-child {
    margin-bottom: 20px
}

.cookie__btns>* {
    width: 100%;
    height: 42px;
    max-width: none;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: flex
}

.cookie__content {
    width: 100%;
    max-width: 900px;
    margin-right: 20px;
    font-size: 15px;
    line-height: 26px
}

.cookie__content p:not(:last-child) {
    margin-bottom: 15px
}

@media only screen and (max-width:768px) {
    .cookie {
        padding: 30px 10px 0
    }
    .cookie__inner {
        flex-direction: column
    }
    .cookie__content {
        margin-bottom: 20px;
        margin-right: 0
    }
    .cookie__btns {
        max-width: 320px;
        display: flex
    }
    .cookie__btns a:first-child {
        margin-right: 10px
    }
}

@keyframes cookie {
    0% {
        transform: translateY(100%)
    }
    to {
        transform: translateY(0)
    }
}

.modal {
    z-index: 11;
    width: 90%;
    height: clamp(375px, 50vh, 400px);
    min-height: 310px;
    max-width: 575px;
    box-shadow: var(--modal-shadow);
    background-color: var(--color-gray-500);
    border: 0;
    border-radius: 4px;
    position: fixed;
    top: 50%;
    left: 50%;
    overflow: hidden;
    translate: -50% -50%
}

.modal::backdrop {
    background-color: #0000
}

.modal__inner {
    height: 100%;
    color: var(--color-yellow-400);
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative
}

.modal__inner:before {
    content: "";
    width: 44px;
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' rx='7' fill='%23F8C73B'/%3E%3Cpath d='M20.4615 29.992C19.1381 28.6499 14.4359 22.8411 12 21.0209V21C12.9231 21 18.5385 22.4511 20.0769 23.7512C21.9231 18.1345 28.7949 14.9101 32 14C26.6154 16.3403 20.8462 30.3821 20.4615 29.992Z' fill='%23242424'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0
}

.modal__cross {
    width: 14px;
    height: 14px;
    background-color: var(--color-black);
    border: 0;
    position: absolute;
    top: 18px;
    right: 20px
}

.modal__cross:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg  fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.76092 3.21592e-05C1.67814 0.00125285 1.59913 0.0346566 1.54065 0.0932466L0.0932443 1.54064H0.0931334C-0.0310445 1.66493 -0.0310445 1.86634 0.0931334 1.99063L5.1036 6.99908L0.0931334 12.0095C-0.0310445 12.1337 -0.0310445 12.3351 0.0931334 12.4594L1.54053 13.9068H1.54065C1.66482 14.0311 1.86635 14.0311 1.99064 13.9068L6.99912 8.89635L12.0096 13.9068H12.0095C12.1338 14.031 12.3352 14.031 12.4594 13.9068L13.9068 12.4594H13.9069C14.031 12.3351 14.031 12.1337 13.9069 12.0095L8.8964 6.99908L13.9069 1.99063C14.031 1.86634 14.031 1.66493 13.9069 1.54064L12.4595 0.0932466H12.4594C12.3352 -0.0309304 12.1338 -0.0309304 12.0095 0.0932466L6.99901 5.10368L1.99053 0.0932466H1.99064C1.92983 0.0324351 1.84693 -0.00118941 1.76092 3.21592e-05Z' fill='%23F8C73B'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0
}

.modal__desc {
    text-align: center;
    margin-top: auto;
    margin-bottom: 40px;
    padding: 0 20px
}

.modal__title {
    text-transform: uppercase;
    margin: 0 auto
}

.modal__click {
    width: calc(100% + 2px);
    text-align: center;
    background-color: var(--color-white);
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 40px 0;
    display: flex
}

.modal .btn:hover,
.modal .btn:focus {
    border-color: var(--color-gray-500);
    color: var(--color-white);
    background-color: var(--color-gray-500)
}

@media (max-height:500px) or (max-width:767px) {
    .modal__click {
        padding: 20px 0
    }
}

dialog[open] {
    animation: .5s show
}

dialog.hide {
    animation: .5s hide
}

@keyframes show {
    0% {
        transform: translateY(200%)
    }
    to {
        transform: translateY(0%)
    }
}

@keyframes hide {
    to {
        transform: translateY(200%)
    }
}

.hero {
    --hero-top: 62px;
    padding-top: calc(var(--header-height) + var(--hero-top));
    padding-bottom: 7.1875rem
}

.hero__inner {
    grid-template-columns: minmax(400px, 640px) minmax(450px, 584px);
    justify-content: space-between;
    align-items: center;
    gap: 3.75rem;
    display: grid
}

@media only screen and (max-width:992px) {
    .hero__inner {
        grid-template-columns: minmax(300px, 640px) minmax(400px, 500px);
        gap: 2.5rem
    }
}

@media only screen and (max-width:768px) {
    .hero__inner {
        grid-template-columns: 1fr
    }
}

.hero__content {
    position: relative
}

.hero__content:first-of-type {
    margin-top: -25px
}

@media only screen and (max-width:768px) {
    .hero__content:first-of-type {
        max-width: 500px;
        margin: 0 auto
    }
}

.hero__content--animation {
    height: -moz-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-width: 500px;
    margin-left: auto;
    position: sticky;
    top: 0
}

@media only screen and (max-width:768px) {
    .hero__content--squere {
        max-width: 500px;
        margin: 0 auto
    }
}

.hero__content-image {
    width: 100%
}

.hero__title {
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.4
}

@media only screen and (max-width:992px) {
    .hero__title {
        letter-spacing: normal;
        font-size: 36px;
        line-height: 1.3
    }
}

@media only screen and (max-width:768px) {
    .hero__title {
        font-size: 30px
    }
}

.hero__text {
    max-width: 580px;
    letter-spacing: normal;
    margin-bottom: 2rem;
    font-size: 15px;
    line-height: 1.7
}

.hero__btn.btn {
    padding: 11px 0;
    font-size: 14px
}

.hero--secondary {
    --hero-top: 132px;
    padding-bottom: 18.75rem
}

.hero--secondary .hero__content:first-of-type {
    margin-top: 0
}

.hero--secondary .hero__content:last-of-type {
    margin-top: -16px
}

@media only screen and (max-width:768px) {
    .hero--secondary .hero__content:last-of-type {
        margin: 0 auto;
        position: relative
    }
}

.hero--secondary .hero__inner {
    gap: 3.125rem
}

.hero--secondary p:not(:last-child) {
    margin-bottom: 1.25rem
}

@media only screen and (max-width:1280px) {
    .hero--secondary {
        --hero-top: 110px;
        padding-bottom: 12.5rem
    }
}

@media only screen and (max-width:1180px) {
    .hero {
        --hero-top: 50px;
        padding-bottom: 7.5rem
    }
}

.products {
    padding: 10.875rem 0 11.5rem;
    position: relative
}

.products:before {
    content: "";
    z-index: -1;
    height: 100%;
    max-width: clamp(320px, 42.8125rem, 691px);
    max-height: 646px;
    background-color: var(--color-yellow-400);
    animation: 5s .2s forwards box-show;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

@media only screen and (max-width:1440px) {
    .products:before {
        max-width: clamp(320px, 31.25rem, 600px)
    }
}

@media only screen and (max-width:992px) {
    .products:before {
        max-height: 550px
    }
}

@media only screen and (max-width:768px) {
    .products:before {
        transform: translateY(-55%)
    }
}

@media only screen and (max-width:576px) {
    .products:before {
        max-width: 100%;
        max-height: 470px;
        animation-duration: 3s;
        transform: translateY(-56%)
    }
}

@media only screen and (max-width:475px) {
    .products:before {
        max-height: 430px;
        transform: translateY(-58%)
    }
}

@media only screen and (max-width:374px) {
    .products:before {
        transform: translateY(-55%)
    }
}

.products__title {
    width: -moz-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 2.9375rem;
    transform: translate(14%)
}

@media only screen and (max-width:576px) {
    .products__title {
        text-align: center;
        margin: 0 auto 4.0625rem;
        transform: translate(0)
    }
}

.products__slider {
    overflow-x: hidden
}

.products__wrapper {
    min-height: 400px;
    padding-bottom: 38px;
    display: flex;
    position: relative
}

@media only screen and (max-width:992px) {
    .products__wrapper {
        min-height: 690px;
        justify-content: center
    }
}

@media only screen and (max-width:768px) {
    .products__wrapper {
        min-height: 690px;
        flex-direction: column;
        justify-content: space-between
    }
}

@media only screen and (max-width:576px) {
    .products__wrapper {
        min-height: 560px
    }
}

.products__content {
    overflow: hidden
}

.products__content:last-of-type {
    margin-bottom: 30px;
    margin-left: auto
}

.products__content>* {
    transition: transform .8s;
    transform: translate(100%)
}

.products__slide {
    height: 100%;
    opacity: 0;
    visibility: hidden;
    grid-template-columns: minmax(350px, 764px) minmax(320px, 400px);
    column-gap: 3.5rem;
    transition-property: opacity, visibility, transform;
    transition-duration: 1.2s;
    display: grid;
    position: absolute;
    overflow: hidden
}

.products__slide:first-child .btn span {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
}

@media only screen and (max-width:1280px) {
    .products__slide {
        grid-template-columns: minmax(350px, 700px) minmax(280px, 320px);
        justify-content: space-around;
        align-items: center
    }
}

@media only screen and (max-width:992px) {
    .products__slide {
        flex-direction: column-reverse;
        display: flex
    }
}

@media only screen and (max-width:768px) {
    .products__slide {
        justify-content: center
    }
}

.products__image {
    border-radius: var(--radius-main);
    width: -moz-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    box-shadow: var(--shadow-main);
    overflow: hidden
}

.products__subtitle {
    margin-bottom: 1.4375rem
}

@media only screen and (max-width:576px) {
    .products__subtitle {
        margin-bottom: 10px;
        line-height: 1.2
    }
}

.products__text {
    width: 100%;
    max-width: 390px;
    margin-bottom: 2rem
}

.products__text p:not(:last-of-type) {
    margin-bottom: 25px
}

@media only screen and (max-width:576px) {
    .products__text {
        max-width: 500px
    }
}

.products .slide-active {
    opacity: 1;
    visibility: visible;
    transition-property: opacity, visibility, transform;
    transition-duration: .4s
}

.products .slide-active .products__content>* {
    transform: translate(0)
}

.products .slide-hide .products__content>* {
    transform: translate(-100%)
}

.products .btn span {
    -webkit-clip-path: none;
    clip-path: none
}

@media only screen and (max-width:992px) {
    .products .btn {
        margin-left: auto
    }
}

@media only screen and (max-width:576px) {
    .products .btn {
        background-color: var(--color-white);
        margin-left: 0
    }
}

.products .btn:hover,
.products .btn:focus {
    border-color: var(--color-gray-500);
    color: var(--color-white);
    background-color: var(--color-gray-500)
}

.products .slick-list {
    overflow-y: visible
}

@media only screen and (max-width:992px) {
    .products {
        padding: 5rem 0;
        display: flex
    }
}

@media only screen and (max-width:768px) {
    .products {
        padding: 3.75rem 0
    }
}

.mission {
    --margin-min: calc((100% - var(--container-width))/2 + var(--container-offset));
    padding: 9.375rem 0 8.875rem;
    position: relative;
    overflow: hidden
}

.mission:before {
    content: "";
    z-index: 3;
    width: var(--margin-min);
    height: 100%;
    background-color: var(--color-gray-400);
    position: absolute;
    top: 0;
    left: 0
}

.mission__title {
    margin-bottom: 3.5rem
}

@media only screen and (max-width:768px) {
    .mission__title {
        text-align: center
    }
}

.mission__line {
    margin-left: max(var(--container-offset), var(--margin-min));
    width: 75%;
    padding-right: 1.875rem
}

@media only screen and (max-width:1280px) {
    .mission__line {
        width: 100%
    }
}
.custom-logo-link {
    max-width: 150px;
}
@media only screen and (max-width:768px) {
    .mission__line {
        margin: 0;
        padding: 0 15px
    }
}
.footer__nav .nav__list {
    margin-left: 40px !important;
}
.mission__slide {
    border-radius: var(--radius-main);
    width: 100%;
    max-width: 458px;
    box-shadow: var(--shadow-slide);
    color: var(--color-gray-350);
    background-color: var(--color-white);
    padding: 2.375rem;
    overflow: hidden
}
.mission__slide h3 {
    min-height: 80px;
}
.mission__slide h3 {
    margin-bottom: 50px;
}

@media only screen and (max-width:992px) {
    .mission__slide h3 {
        margin-bottom: 5rem
    }
}

.mission__slide p {
    min-height: 130px;
    margin-bottom: 3rem
}

@media only screen and (max-width:992px) {
    .mission__slide p {
        min-height: 110px
    }
}

@media only screen and (max-width:576px) {
    .mission__slide p {
        min-height: 130px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width:475px) {
    .mission__slide p {
        min-height: 208px;
        margin-bottom: 15px
    }
}

@media only screen and (max-width:992px) {
    .mission__slide {
        margin-right: 1.25rem;
        padding: 1.5625rem
    }
}

@media only screen and (max-width:576px) {
    .mission__slide {
        max-width: none
    }
}

.mission .slick-slide {
    margin-right: 2.375rem
}

@media only screen and (max-width:768px) {
    .mission .slick-slide {
        margin-right: 1.25rem
    }
}

.mission .slick-cloned .btn span {
    -webkit-clip-path: none;
    clip-path: none
}

.mission .slick-current .mission__slide {
    color: var(--color-gray-500);
    background-color: var(--color-yellow-400)
}

.mission .slick-current .mission__slide .btn {
    border-color: var(--color-gray-400);
    color: var(--color-white);
    background-color: var(--color-gray-400);
    pointer-events: all;
    font-weight: 500
}

.mission .slick-current .mission__slide .btn:hover,
.mission .slick-current .mission__slide .btn:focus {
    border-color: var(--color-white);
    color: var(--color-dark-400);
    background-color: var(--color-white)
}

.mission .slick-list {
    overflow: visible
}

.mission .btn {
    letter-spacing: .02em;
    color: var(--color-white);
    background-color: var(--color-gray-350);
    pointer-events: none;
    font-weight: 400
}

.mission .btn span {
    font-weight: inherit;
    letter-spacing: inherit
}

.mission .slick-dots {
    display: flex
}

.mission .slick-dots li:not(:last-child) {
    margin-right: 8px
}

.mission .slick-dots button {
    border: 1px solid var(--color-white);
    width: 8px;
    height: 8px;
    cursor: pointer;
    background-color: #0000;
    border-radius: 2px;
    font-size: 0;
    display: block
}

.mission .slick-active button {
    background-color: var(--color-white)
}

@media only screen and (max-width:992px) {
    .mission {
        padding: 5rem 0
    }
}

@media only screen and (max-width:768px) {
    .mission {
        padding: 5rem 0
    }
}

.advantages {
    padding: 8.8125rem 0
}

.advantages__inner {
    grid-template-columns: minmax(350px, 1fr) minmax(775px, 1fr);
    column-gap: 6.25rem;
    display: grid
}

@media only screen and (max-width:1280px) {
    .advantages__inner {
        grid-template-columns: minmax(300px, 1fr) minmax(600px, 1fr);
        column-gap: 3.125rem
    }
}

@media only screen and (max-width:992px) {
    .advantages__inner {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3.125rem
    }
}

@media only screen and (max-width:768px) {
    .advantages__inner {
        grid-template-columns: 1fr
    }
}

.advantages__title {
    margin-bottom: 2rem
}

@media only screen and (max-width:768px) {
    .advantages__title+p,
    .advantages__title {
        text-align: left
    }
}

.advantages__content:first-of-type {
    top: calc(var(--header-height) + 20px);
    width: 100%;
    height: -moz-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-width: 375px;
    padding-top: 4px;
    position: sticky
}

@media only screen and (max-width:768px) {
    .advantages__content:first-of-type {
        max-width: none;
        text-align: center;
        margin-bottom: 3.75rem;
        position: relative;
        top: 0
    }
}

.advantages__list {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 2.25rem 2.375rem;
    display: grid
}

@media only screen and (max-width:1280px) {
    .advantages__list {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 1.875rem
    }
}

@media only screen and (max-width:992px) {
    .advantages__list {
        grid-template-columns: 1fr;
        gap: 1.875rem
    }
}

@media only screen and (max-width:768px) {
    .advantages__list {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 1.875rem
    }
}

.advantages__item {
    box-shadow: var(--shadow-secondary);
    padding: 2.375rem 2.4375rem 2.6875rem;
    overflow: hidden
}

.advantages__item h3 {
    margin-bottom: 6.125rem
}

@media only screen and (max-width:1280px) {
    .advantages__item h3 {
        margin-bottom: 3.75rem
    }
}

@media only screen and (max-width:768px) {
    .advantages__item h3 {
        margin-bottom: 2.5rem
    }
}

.advantages__item.text-animation {
    animation-delay: .3s
}

@media only screen and (max-width:768px) {
    .advantages__item {
        padding: 1.875rem
    }
}

@media only screen and (max-width:992px) {
    .advantages {
        padding: 6.25rem 0
    }
}

@media only screen and (max-width:768px) {
    .advantages {
        padding: 5rem 0
    }
}

.parallax {
    color: var(--color-white);
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: var(--color-gray-800);
    padding: 19.375rem 0 20.125rem;
    position: relative
}

.parallax__inner {
    z-index: 3;
    width: 100%;
    max-width: 560px;
    text-align: center;
    margin: 0 auto;
    position: relative
}

.parallax__title {
    margin: 0 auto 1.875rem;
    line-height: 1.5
}

.parallax__title span {
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-yellow-400);
    display: block
}

.parallax__title span span {
    color: var(--color-white)
}

@media only screen and (max-width:1280px) {
    .parallax {
        padding: 15.625rem 0
    }
}

@media only screen and (max-width:1180px) {
    .parallax {
        padding: 12.5rem 0
    }
}

@media only screen and (max-width:992px) {
    .parallax {
        padding: 10rem 0
    }
}

@media only screen and (max-width:768px) {
    .parallax {
        background-attachment: scroll
    }
}

.missions {
    padding: 8.875rem 0;
    overflow: hidden
}

.missions__title {
    z-index: 5;
    text-align: center;
    margin: 0 auto 3.75rem;
    position: relative
}

.missions__list {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 200px;
    gap: 2.3125rem;
    animation: 1s forwards tabs-show;
    display: grid
}

.missions__list .btn {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    width: 100%;
    height: 33px;
    max-width: 102px;
    padding: 0;
    font-weight: 500
}

.missions__list.hide {
    animation: 1s .5s forwards tabs-hide;
    position: absolute
}

@media only screen and (max-width:992px) {
    .missions__list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: 160px;
        gap: 1.25rem
    }
}

@media only screen and (max-width:576px) {
    .missions__list {
        grid-auto-rows: 120px;
        gap: 1.25rem;
        padding: 15px;
        overflow: hidden
    }
}

@media only screen and (max-width:475px) {
    .missions__list {
        grid-template-columns: 1fr
    }
}

.missions__item {
    z-index: -1;
    box-shadow: var(--shadow-secondary);
    text-align: center;
    background-color: var(--color-white);
    cursor: pointer;
    border: 2px solid #0000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .625rem;
    transition: border-color .5s;
    display: flex
}

.missions__item:hover,
.missions__item:focus {
    border-color: var(--color-yellow-400)
}

.missions__item:hover .missions__name,
.missions__item:focus .missions__name {
    margin-bottom: 15px;
    font-size: 22px
}

@media only screen and (max-width:768px) {
    .missions__item:hover .missions__name,
    .missions__item:focus .missions__name {
        font-size: 18px
    }
}

.missions__item:hover .btn,
.missions__item:focus .btn {
    animation: 1s .3s forwards btn-show
}

.missions__item:hover .btn span,
.missions__item:focus .btn span {
    animation: 1s 1s forwards btn-show
}

.missions__item:hover .btn:hover,
.missions__item:hover .btn:focus,
.missions__item:focus .btn:hover,
.missions__item:focus .btn:focus {
    border-color: var(--color-gray-500);
    color: var(--color-white);
    background-color: var(--color-gray-500)
}

.missions__item.hide {
    pointer-events: none;
    animation: 1s forwards tabs-hide
}

.missions__item.active {
    z-index: 1;
    pointer-events: none;
    animation: 1s .5s forwards tabs-hide
}

@media only screen and (max-width:768px) {
    .missions__item {
        box-shadow: 0 0 15px #0000001a
    }
}

.missions__name {
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: -35px;
    font-size: 18px;
    font-weight: 500;
    line-height: 2.22;
    transition-property: font-size, margin;
    transition-duration: .5s
}

@media only screen and (max-width:992px) {
    .missions__name {
        font-size: 16px;
        line-height: 1.3
    }
}

.missions__tab {
    opacity: 0;
    visibility: hidden;
    grid-template-columns: minmax(680px, 1fr) minmax(430px, 1fr);
    justify-content: space-between;
    align-items: flex-start;
    gap: 5rem 3.5625rem;
    padding-top: 1.25rem;
    padding-bottom: 3.9375rem;
    display: grid;
    position: absolute
}

@media only screen and (max-width:992px) {
    .missions__tab>* {
        margin: 0 auto
    }
}

.missions__tab.active {
    animation: 1s 1s forwards text-show;
    position: relative
}

.missions__tab.active .btn {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: .8s 2s forwards btn-show
}

.missions__tab.active .btn span {
    animation: .8s 1.5s forwards btn-show
}

@media only screen and (max-width:1180px) {
    .missions__tab {
        grid-template-columns: minmax(500px, 1fr) minmax(430px, 1fr)
    }
}

@media only screen and (max-width:992px) {
    .missions__tab {
        width: 100%;
        grid-template-columns: 1fr;
        justify-content: center
    }
}

.missions__desc {
    width: 100%;
    max-width: 540px
}

.missions__desc h3 {
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: 0;
    margin-bottom: .875rem;
    font-size: 18px;
    line-height: 1.7
}

.missions__desc p {
    opacity: 0;
    margin-bottom: 1.625rem
}

@media only screen and (max-width:992px) {
    .missions__desc {
        transform: translate(5%)
    }
}

@media only screen and (max-width:768px) {
    .missions__desc {
        transform: translate(0)
    }
}

.missions__image {
    max-height: 350px;
    align-items: center;
    margin-right: 15px;
    display: flex;
    overflow: hidden
}

@media only screen and (max-width:992px) {
    .missions__image {
        margin: 0 auto;
        padding: 0
    }
}

.missions__btns {
    display: flex
}

.missions__btns .btn {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    border: 1px solid;
    padding: 11px 10px 10px
}

.missions__btns .btn:first-of-type {
    border-color: var(--color-gray-500);
    margin-right: 30px
}

.missions__btns .btn:last-of-type {
    border-color: var(--color-yellow-400)
}

.missions__btns .btn:hover,
.missions__btns .btn:focus {
    border-color: var(--color-gray-500);
    color: var(--color-white);
    background-color: var(--color-gray-500)
}

@media only screen and (max-width:992px) {
    .missions {
        padding: 6.25rem 0
    }
}

@media only screen and (max-width:768px) {
    .missions {
        padding: 4.375rem 0
    }
}

.data {
    padding: 8.875rem 0 9.0625rem;
    overflow: hidden
}

.data__title {
    text-align: center;
    margin: 0 auto 2.875rem
}

.data__list {
    text-align: center;
    padding: 0 7px
}

@media only screen and (max-width:768px) {
    .data__list {
        padding: 0
    }
}

@media only screen and (max-width:475px) {
    .data__list {
        margin-bottom: 30px
    }
}

.data__item img {
    width: 100%;
    max-width: 110px;
    opacity: 0;
    margin: 0 auto 2.0625rem
}

.data__item h3 {
    max-width: 330px;
    text-align: center;
    text-transform: uppercase;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto 1.25rem;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    display: flex
}

.data__item p {
    width: 100%;
    max-width: 340px;
    text-align: center;
    margin: 0 auto;
    line-height: 1.8 !important
}

.data__item .clicks {
    z-index: 2;
    width: 100%;
    justify-content: space-between;
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media only screen and (max-width:768px) {
    .data__item .clicks {
        display: flex
    }
}

@media only screen and (max-width:475px) {
    .data__item .clicks {
        justify-content: center;
        position: relative
    }
}

.data:not(.data--reverse) .clicks__btn {
    max-width: 32px
}

.data:not(.data--reverse) .clicks__btn:before {
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='16' viewBox='0 0 52 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04861e-06 8L12 1.0718L12 14.9282L1.04861e-06 8Z' fill='%23ffffff'/%3E%3Crect x='52' y='9' width='41' height='2' transform='rotate(-180 52 9)' fill='%23ffffff'/%3E%3C/svg%3E%0A")
}

.data .slick-track {
    justify-content: space-between;
    align-items: flex-start;
    display: flex
}

@media only screen and (max-width:768px) {
    .data .slick-track {
        overflow: hidden
    }
}

.data .slick-slide:not(:last-child) {
    margin-right: 25px
}

@media only screen and (max-width:992px) {
    .data .slick-slide:not(:last-child) {
        margin-right: 0
    }
}

@media only screen and (max-width:374px) {
    .data .slick-slide {
        max-width: 320px;
        text-align: center
    }
}

.data .clicks__btn {
    z-index: 2;
    position: absolute;
    bottom: 50%;
    transform: translateY(-50%)
}

.data .clicks__btn.prev {
    margin-right: 0;
    left: 30px
}

@media only screen and (max-width:576px) {
    .data .clicks__btn.prev {
        left: auto;
        transform: translate(-50%)
    }
}

.data .clicks__btn.next {
    right: 30px
}

@media only screen and (max-width:576px) {
    .data .clicks__btn.next {
        right: auto;
        transform: translate(50%)
    }
    .data .clicks__btn {
        margin: 0 auto;
        bottom: 0;
        left: 50%;
        right: 50%;
        transform: translate(-50%)
    }
}

.data .data-slider {
    position: relative
}

@media only screen and (max-width:992px) {
    .data .data-slider {
        width: 100%;
        max-width: 576px;
        margin: 0 auto;
        overflow: hidden
    }
}

@media only screen and (max-width:576px) {
    .data .data-slider {
        padding-bottom: 50px
    }
}

.data--reverse .data__title {
    margin-bottom: 3.4375rem
}

.data--reverse .data__list {
    padding: 0
}

.data--reverse .data__item {
    box-shadow: var(--shadow-secondary);
    padding: 3.125rem 1.25rem 2.75rem
}

@media only screen and (max-width:992px) {
    .data--reverse .data__item {
        box-shadow: none;
        padding: 0
    }
}

.data--titles h3 {
    min-height: 58px;
    text-align: center;
    align-items: center;
    margin-bottom: 5px
}

@media only screen and (max-width:992px) {
    .data {
        padding: 6.25rem 0
    }
}

@media only screen and (max-width:768px) {
    .data {
        padding: 4.375rem 0
    }
}

li.menu-item-has-children .nav__list {
    display: none;
    position: absolute;
    top: 64%; /* сразу под родительским пунктом */
    right: 0;
	left: auto;
    list-style: none;
    background: #303030;
    padding: 15px;
    z-index: 9999999999999;
    min-width: 180px;
}
li.menu-item-has-children:hover .nav__list {
	display: block;
}
@media(max-width: 768px) {
	li.menu-item-has-children .nav__list {
		background: #161616;
		top: 0;
		display: block;
		position: relative;
	}
	.nav__item:not(:last-of-type, .footer .nav__item), .nav__item:last-of-type:not(.footer .nav__item) {
		width: 100% !important;
	}
	.nav__item:last-of-type:not(.footer .nav__item) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.opened .nav__list {
		padding-top: 350px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
	}
}