@font-face {
    font-family: 'Bebas Neue Cyrillic';    
    src: local('Bebas Neue Cyrillic'), local('BebasNeueCyrillic'),        
        url('../fonts/BebasNeueCyrillic.woff2') format('woff2'),
        url('../fonts/BebasNeueCyrillic.woff') format('woff');        
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';    
    src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
        url('../fonts/Raleway-Regular.woff') format('woff');        
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';    
    src: url('../fonts/Raleway-Light.woff2') format('woff2'),
        url('../fonts/Raleway-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';    
    src: url('../fonts/Raleway-Medium.woff2') format('woff2'),
        url('../fonts/Raleway-Medium.woff') format('woff');        
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';    
    src: url('../fonts/Raleway-SemiBold.woff2') format('woff2'),
        url('../fonts/Raleway-SemiBold.woff') format('woff');        
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root{
    --font-base: 'Raleway', sans-serif;
    --font-second: 'Bebas Neue Cyrillic', sans-serif;

    --color-text: #152D49;
    --color-accent: #5168AE;
    --color-body-bg: #fff;
    --color-gray-1: #EFE4EE;
    --color-gray-2: #E6DED0;
    --color-orange: #FF6132;

    --transition: 0.3s linear;
    --body-fz: 16px;    
    --body-lh: 22px;    

    --text-14-fz: 14px;
    --text-14-lh: 17px;
    --text-14-mb: 20px;

    --text-16-fz: 16px;
    --text-16-lh: 19px;

    --text-18-fz: 18px;
    --text-18-lh: 22px;
    --text-18-mb: 10px;

    --text-18up-fz: 18px;

    --text-32-fz: 32px;    
    --text-32-mb: 20px;

    --hero-subtitle-mb: 15px;

    --container-padding: 20px;

    --circle-size: 8px;

    --why-digit-fz: 60px;
    --why-digit-mr: 10px;

    --quote-margin: 6px;

    --plans-header-pt: 40px;
    --plans-title-mb: 80px;    
}
@media(min-width: 376px){
    :root{
        --container-padding: 35px;
    }
}
@media(min-width: 425px){
    :root{
        --container-padding: 44px;
    }
}
@media(min-width: 767px){
    :root{
        --container-padding: 70px;
        --body-fz: 22px;
        --body-lh: 28px;

        --text-14-fz: 22px;
        --text-14-lh: 26px;
        --text-14-mb: 30px;

        --text-16-fz: 22px;
        --text-16-lh: 26px;

        --text-18-fz: 24px;
        --text-18-lh: 28px;
        --text-18-mb: 16px; /* 20px */

        --text-18up-fz: 32px;

        --text-32-fz: 42px;    
        --text-32-mb: 42px;

        --hero-subtitle-mb: 20px;

        --why-digit-fz: 120px;
        --why-digit-mr: 20px;

        --quote-margin: 8px;

        --plans-header-pt: 60px;
        --plans-title-mb: 60px;
    }     
}
@media(min-width: 992px){
    :root{
        --circle-size: 10px;
        --text-32-fz: 60px;    
        --text-32-mb: 60px;

        --quote-margin: 12px;

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

html{
    margin: 0;
    padding: 0;   
}
body{
    margin: 0;
    padding: 0;    
   
    font-size: var(--body-fz);
    line-height: var(--body-lh);
    color: var(--color-text);
    font-weight: 400;    
    font-family: var(--font-base);
    background-color: var(--color-body-bg);  
    overflow-x: hidden;    
}
.no-scroll{
    overflow: hidden;
}
img{
    max-width: 100%;
    height: auto;
}
a{
    text-decoration: none;
    color: inherit;
}
ul{
    margin: 0;
    padding: 0;
}
li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-padding);   
}
.row{
    text-align: center;
}
.site-wrapper{
    overflow-x: hidden;
    position: relative;
}

/* typography */

.btn{
    display: inline-block;
    background: var(--color-accent);
    padding: 24px 63px 24px 15px;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    font-family: var(--font-base);
    color: #fff;
    text-decoration: none;    
    position: relative;
}
@media(min-width: 414px){
    .btn{
        padding: 32px 63px 32px 44px;
    }
}
@media(min-width: 992px){
    .btn{
        padding: 36px 143px 36px 70px;
        font-size: 24px;
        line-height: 28px;
        width: 540px;
    }
}
.btn::after{
    content: '';
    position: absolute;
    top: 50%;
    height: 18px;
    width: 18px;
    right: 31px;
    background: url('../img/arrow-small.svg') 0 0 no-repeat;
    transform: translate(0, -50%);
    transition: transform var(--transition);
}
@media(min-width: 992px){
    .btn::after{
        right: 93px;
        width: 35px;
        height: 34px;
        background: url('../img/arrow.svg') 0 0 no-repeat;
    }
}
.btn:hover::after{
    transform: translate(10px, -50%);
}
@media(min-width: 992px){
    .hero__btn:hover::after{
        transform: translate(63px, -50%);
    }
}

.text-18{
    font-size: var(--text-18-fz);
    line-height: var(--text-18-lh);
    font-weight: 400;
    text-transform: none;
    margin-bottom: var(--text-18-mb);
    color: var(--color-text);
    opacity: 0.5;
    font-family: var(--font-base);
}
.text-18up{
    font-size: var(--text-18up-fz);
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--font-second);
    color: var(--color-text);
    font-weight: 400;
}
.text-24{
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--font-second);
}
.text-32{
    font-size: var(--text-32-fz);
    line-height: 1;
    font-weight: 400;
    margin-bottom: var(--text-32-mb);
    color: var(--color-text);
    text-transform: uppercase;
    font-family: var(--font-second);
}

.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    
    padding-top: 32px;
    z-index: 10;
}
.header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.burger{
    position: absolute;
    z-index: 20;
    top: 34px;
    right: var(--container-padding);
    width: 40px;
    height: 24px;  
    display: block;          
}
@media(min-width: 992px){
    .burger{
        display: none;
    }
}
.burger::before{
    position: absolute;
    content: '';
    width: 40px;
    height: 4px;
    background: var(--color-text);
    top: 0;
    left: 0;
    z-index: 2;
    transition: all 0.3s linear;
}
.burger::after{
    position: absolute;
    content: '';
    width: 40px;
    height: 4px;
    background: var(--color-text);
    bottom: 0;
    left: 0;
    z-index: 2;
    transition: all 0.3s linear;
}
.burger span{
    position: absolute;
    width: 40px;
    height: 4px;
    left: 0;
    top: 10px;
    background: var(--color-text);
    transform-origin: center;
    transform: scale(1);
    transition: all 0.3s linear;
}
.burger.active span{
    transform: scale(0);
}
.burger.active::before{
    transform: rotate(45deg);
    top: 4px;
}
.burger.active::after{
    transform: rotate(-45deg);
    top: 4px;
}

.header__logo{
    width: 100px;
    position: relative;
    z-index: 11;
}
.main-menu{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 100%;
    background: var(--color-gray-2);
    padding-top: 135px;
    padding-bottom: 91px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s linear;
}
@media(min-width: 992px){
    .main-menu{
        position: static;
        left: auto;
        height: auto;
        width: auto;
        background: transparent;
        padding-top: 0;
        padding-bottom: 0;
        /* display: block; */
        flex-direction: row;
        justify-content: flex-end;
        flex-grow: 1;
    }
}
.main-menu.active{
    left: 0;
}
.main-menu__list{
    display: block;
}
@media(min-width: 992px){
    .main-menu__list{
        display: flex;
        position: relative;
        top: -4px;
    }
}
.main-menu__link{
    display: block;
    padding: 25px 42px;  
}
@media(min-width: 992px){
    .main-menu__link{      
        padding: 15px 25px;        
    }
    .main-menu__item:last-child .main-menu__link{
        padding-right: 0;
    }
}




.main-menu .contacts__info{
    padding: 0 42px 0 42px;
    display: block;    
}
@media(min-width: 992px){
    .main-menu .contacts__info{
        display: none;
    }
}
.main-menu .contacts__info-h2{
    margin-bottom: 18px;
    font-size: 32px;
    line-height: 32px;
}
.contacts__info-email{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    font-weight: 500;
    display: block;
    margin-bottom: 30px;
}   

.sosials__list{
    display: flex;
    margin: 0 -8px;
}
.sosials__item{
    margin: 0 16px;
}
.sosials__link{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;    
    display: inline-block;
}
.sosials__link--telegram{
    background: 0 0 url('../img/telegram.svg') no-repeat;
}
.sosials__link--fb{
    background: 0 0 url('../img/fb.svg') no-repeat;
}
.sosials__link--inst{
    background: 0 0 url('../img/inst.svg') no-repeat;
}


/* hero */
.hero{
    background: var(--color-gray-2);
}
@media(min-width: 992px){
    .hero{
        display: flex;
        justify-content: space-between;        
    }
}
@media(min-width: 1160px){
    .hero{
        align-items: flex-start;
    }
}

.hero__content{
    padding-top: 188px;
    padding-bottom: 100px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    position: relative;
    width: 100%;
    background: var(--color-gray-1);
}
@media(min-width: 992px){
    .hero__content{
        flex-grow: 1;
        padding-top: 183px;        
        padding-left: max(var(--container-padding), calc((100% - 1300px) / 2)); 
    }
}

.hero__title span{    
    display: block;
    margin-bottom: var(--hero-subtitle-mb);
}
@media(min-width: 767px){
    .hero__title{
        line-height: 70px;
    }
}
.hero__descr{
    font-size: var(--body-fz);
    line-height: var(--body-lh);
    margin-bottom: 0;
}
@media(min-width: 767px){
    .hero__descr{
        max-width: 575px;
        margin-bottom: 57px;
    }
}

.hero__btn--h{
    position: absolute;
    bottom: -40px;
    left: 0;
}
@media(min-width: 992px){
    .hero__btn--h{
        bottom: 0;
    }
}
@media(min-width: 1441px){
    .hero__btn--h{
        left: auto;
    }
}
.hero__img{
    width: 100%;
}
@media(min-width: 992px){
    .hero__img{
        width: 50%;
        max-width: 628px;
        flex-shrink: 0;
    }
}
@media(min-width: 1441px){
    .hero__img{
        max-width: none;
        position: relative;
        height: 800px;
    }
}
.hero__img img{
    display: block;
    height: 420px;
    object-fit: cover;
}
@media(min-width: 992px){
    .hero__img img{
       height: 100%;        
    }
}
@media(min-width: 1160px){
    .hero__img img{
        height: auto;        
     }
}
@media(min-width: 1441px){
    .hero__img img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.promo{
    padding: 30px 0;
    height: 80px;
    background: #fff;
}
.promo--rivacy{
    background: #fff;
    margin-bottom: 106px;
}
@media(min-width: 992px){
    .promo{
        padding: 60px 0;
        height: 170px;
    }
    .promo--rivacy{
        margin-bottom: 0;
    }
}
.promo__wrapper{
    display: flex;    
    position: absolute;
    justify-content: flex-start;
}
.promo__wrapper span{
    flex-shrink: 0;
    position: relative;
    margin-right: 28px;
    display: inline-block;
}
@media(min-width: 992px){
    .promo__wrapper span{    
        margin-right: 55px;    
    }
}
.promo__wrapper span::after{
    content: "";
    width: var(--circle-size);
    height: var(--circle-size);
    right: -18px;
    background: var(--color-orange);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}
@media(min-width: 992px){
    .promo__wrapper span::after{        
        right: -30px;    
    }
}
.promo__wrapper span img{
    display: block;
    height: 20px;
    object-fit: cover;
}
@media(min-width: 992px){
    .promo__wrapper span img{
        height: auto;
    }
}






/* about */
.about{
    background: var(--color-gray-2);
}
@media(min-width: 768px){
    .about__wrapper{
        display: flex;
        flex-direction: row-reverse;        
    }    
}
@media(min-width: 1180px){
    .about__wrapper{
        align-items: stretch;
    }
}
.about__content-wrapper{
    padding: 0 var(--container-padding);    
}
@media(min-width: 768px){
    .about__content-wrapper{
        width: 50%;
        flex-shrink: 0;
    }
}
@media(min-width: 1180px){
    .about__content-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media(min-width: 1280px){
    .about__content-wrapper{
        padding-left: 100px;
        padding-right: max(var(--container-padding), calc((100% - 1300px) / 2));
    }
}
.about__content{
    padding: 90px 0;
}
.about__content p:not(:last-child){
    margin-bottom: 30px;
}
.about__content a{
    color: var(--color-orange);
    text-decoration: underline;
}
@media(min-width: 1180px){
    .about__content{
        padding: 0;
    }
}

.about__img-wrapper{
    position: relative;
    height: 300px;
}
@media(min-width: 768px){
    .about__img-wrapper{
        margin-top: 90px;
    }
}
@media(min-width: 992px){
    .about__img-wrapper{
        height: auto;
        margin-top: 0px;
    }
}
.about__img{
    display: block;
    object-fit: cover;
    height: 100%;
}
.about__img--d{
    content: "";
    position: absolute;    
    top: 50%;
    left: 50%;
    height: 136px;
    width: 136px;
    background: 0 0 url('../img/play.png') no-repeat;
    transform: translate(-50%, -50%);
}

/* practice */
.practice{
    background: var(--color-gray-2);
}
.practice__descr a{
    color: var(--color-orange);
    text-decoration: underline;
}
@media(min-width: 768px){
    .practice__wrapper{
        display: flex;
        flex-direction: row;        
    }    
}
@media(min-width: 1180px){
    .practice__wrapper{
        align-items: stretch;
    }
}
.practice__content-wrapper{
    padding: 0 var(--container-padding);    
}
@media(min-width: 768px){
    .practice__content-wrapper{
        width: 50%;
        flex-shrink: 0;
    }
}
@media(min-width: 1180px){
    .practice__content-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media(min-width: 1280px){
    .practice__content-wrapper{
        padding: 0;
        padding-right: 40px;
        padding-left: max(var(--container-padding), calc((100% - 1300px) / 2));
    }   
}

@media(min-width: 1280px){
    .practice__content{
        padding-right: 40px;
        padding-left: max(var(--container-padding), calc((100% - 1300px) / 2));
    }
}
.practice__content{
    padding: 90px 0;
}
@media(min-width: 1180px){
    .practice__content{
        padding: 0;
    }
}

.practice__img-wrapper{
    position: relative;
    height: 500px;
}
@media(min-width: 768px){
    .practice__img-wrapper{
        width: 50%;
        flex-shrink: 0;
        padding: 90px 0;
        height: auto;
    }
}
@media(min-width: 992px){
    .practice__img-wrapper{
        height: auto;
        padding: 0;
    }
}
.practice__img{
    display: block;
    object-fit: cover;
    height: 100%;
}
.practice__list{
    max-width: 550px;
    margin-bottom: 60px;
}
.practice__item{
    padding-left: 20px;
    margin-bottom: 20px;
    position: relative;
}
.practice__item::before{
    position: absolute;
    content: "";
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: var(--color-orange);
    top: calc( ( var(--body-lh) - var(--circle-size) ) / 2 );
    left: 0;    
}

/* why */

.why{
    background: var(--color-gray-2);
}
@media(min-width: 767px){
    .why__row{
        display: flex;
        justify-self: center;
        flex-direction: row-reverse;
    }
}
.why__row-content{ 
    padding: 90px var(--container-padding) 100px;
}
@media(min-width: 767px){
    .why__row-content{ 
        width: 50%;
        padding: 60px var(--container-padding) 70px 30px;
    }
}
@media(min-width: 992px){
    .why__row-content{         
        /* padding: 90px var(--container-padding) 100px 45px;    */     
        padding: 130px var(--container-padding) 221px 45px;
    }
}
@media(min-width: 992px){
    .why__list{
        max-width: 600px;
    }
}
.why__item{
    display: flex;
    margin-bottom: 30px;
}
.why__digit{
    flex-shrink: 0;
    margin-right: var(--why-digit-mr);
    font-size: var(--why-digit-fz);
    line-height: 1;
    color: var(--color-accent);
    font-family: var(--font-second);
}
.why__row-img{ 
    height: 500px;
    position: relative; 
}
@media(min-width: 767px){
    .why__row-img{ 
        width: 50%;
        flex-shrink: 0;
        padding: 90px 0;
    }
}
@media(min-width: 992px){
    .why__row-img{ 
        height: auto;
    }
}
.why__row-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why__row-img .hero__btn{
 position: absolute;
 top: 0; 
 left: 0;
 transform: translateY(-50%); 
}
@media(min-width: 767px){
    .why__row-img .hero__btn{
        top: auto;
        bottom: 0;
        transform: translateY(50%); 
    }
}
@media(min-width: 992px){
    .why__row-img .hero__btn{
        transform: translateY(0); 
        left: 100%;
    }
}


/* benefits */
.benefits{
    /* padding: 140px var(--container-padding) 0px; */
    padding-top: 140px;
}
@media(min-width:992px){
    .benefits{
        position: relative;
        display: flex;
        padding-top: 0;
    }
    .benefits__content{
        width: 50%;    
    }
}

.why__h2{
    text-align: center;
    margin-bottom: 60px;
}
.benefits__item{
    /* text-align: center; */
}
.benefits__item .h4{    
    display: inline-block;
    margin-bottom: 30px;    
}
@media(min-width: 992px){
    .benefits__item .h4{
        margin-bottom: 20px;
        margin-top: 20px;
    }
}
.why__descr{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    /* color: #000; */
    color: var(--color-text);
    max-width: 340px;    
    margin: 0 auto;
    min-height: 57px;
}
.benefits__item img{
    margin-top: 40px;
    /* height: 70vw; */
    height: 93vw;
    width: 100%;
    object-fit: cover;
}
.benefits__img{
    display: none;
}
@media(min-width:992px){
/*     .benefits__decor{
    position: absolute;
    height: 20px;
    width: 20px;
    background: #000;
    top: 175px;
    left: 30%;
    z-index: 20;
} */
    .benefits__img{
        width: 50%;
        background: var(--color-gray-1);  
        //height: calc(100vh - 66px); /* -header-height */
        height: 100vh;
        position: relative;
        left: 50%;
        position: absolute;
        display: block;        
    }
    .benefits__img img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.7s ease-out;
    }
    .benefits__img.fixed{    
        position: fixed;
        top: 0px;    
    }
    .benefits__img.absolute{
        position: absolute;
        top: auto;
        bottom: 0;
        
    }
    .img-top.active{    
        opacity: 0;
        filter: blur(10px);
    }
    .img-bottom{    
        opacity: 0;
        filter: blur(10px);
    }
    .img-bottom.active{    
        opacity: 1;
        filter: blur(0);
    }

    .benefits__title{
        position: absolute;
        width: 50%;
        /* top: 166px; */
        top: 100px;
        left: 0;
        text-align: center;
        z-index: 4;
    }
    .benefits__title::before{
        content: '';
        width: 100%;
        bottom: -74px;
        left: 0;
        height: 294px;
        background: linear-gradient(0deg, transparent 0%, var(--color-gray-2) 20%, var(--color-gray-2) 100%);
        position: absolute;
        z-index: -1;
    }
    .benefits__title.fixed{
        position: fixed;     
    }
    .benefits__title.absolute{
        position: absolute;  
        top: auto;
        bottom: calc(100vh - 215px);    
    }
}
.benefits__slider{
    position: relative;
    padding-bottom: 80px;
}
.b__item,
.benefits__item{
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    text-align: center;
    /* padding: 0 var(--container-padding); */
}
@media(min-width:992px){
    .benefits__item{
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 66px);
        width: 100%;
        padding: 0;
    }
    .benefits__item-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        flex-grow: 1;
    }
}
.swiper-pagination{
    bottom: 33px !important;
    height: 16px;
}
.swiper-pagination-bullet{
    width: 16px;
    height: 16px;
    background: var(--color-orange);
    opacity: 0.5;    
}
.swiper-pagination-bullet-active{
    opacity: 1;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 10px;
}
@media(min-width:992px){
    .benefits__slider{
        padding-bottom: 0;        
    }
    .swiper-pagination{
        display: none;
    }
    .benefits__list{
        display: block;
    }
    .benefits__item img{
        display: none;
    }
}

/* quote */
.quote{
    background: var(--color-gray-1);
}
@media(min-width:767px){
    .quote__row{
        display: flex;
        justify-content: space-between;    
        flex-direction: row-reverse;    
    }
}
.quote__text{ 
    padding: 90px var(--container-padding);
}
@media(min-width:767px){
    .quote__text{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        /* padding-right: var(--container-padding); */
    }
}
.quote blockquote{     
    margin: 0;
    margin-bottom: 30px;
}
@media(min-width:992px){
    .quote blockquote{
        max-width: 770px;
        margin-bottom: 23px;
    }
}
.quote blockquote span{
    color: var(--color-orange);
}
.quote blockquote span:first-child{
    margin-right: calc( -1 * var(--quote-margin));
}
.quote blockquote span:last-child{
    margin-left: calc( -1 * var(--quote-margin));
}
.quote__author{
    font-size: var(--text-18-fz);
    line-height: var(--text-18-lh);
    opacity: 0.5;
}
.quote__img{
    margin-right: 0;
    height: 500px;
    width: 100%;
}
@media(min-width:767px){
    .quote__img{
        flex-shrink: 0;
        margin-right: 50px;
        height: auto;
        width: 41.8%;
    }
}
.quote__img img{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* plans */
@media(min-width:992px){
    .plans__wrapper{
        display: flex;        
    }
}
.plans__item{
    padding: 0;   
    width: 100%;
}
@media(min-width:992px){
    .plans__item{
        width: 25%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        /* transition: width 0.3s linear; */
        transition: width 0.5s linear;
    }
    .plans__item.active{
        width: 50%;
    }
}


.plans__item:nth-child(1){
    background: var(--color-gray-2);
}
.plans__item:nth-child(2){
    background: var(--color-gray-1);
}
.plans__item:nth-child(3){
    background: var(--color-accent);
    color: #fff;
}
.plans__item:nth-child(3) .plan__btn{
    background: var(--color-gray-2);
    color: var(--color-accent);
}

.plans__item-header{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    will-change: max-height;
    /* transition: all 0.7s ease-out; */
    box-sizing: content-box;
    padding: 0 var(--container-padding);
}
.active .plans__item-header{
    padding-top: var(--plans-header-pt);
    opacity: 1;
    max-height: none;
}
@media(min-width:992px){
    .plans__item-header{
        padding-top: var(--plans-header-pt);
        opacity: 1;
        max-height: none;
        width: 500px;
        transform: translateX( calc(100% + var(--container-padding)) );        
    }
    .active .plans__item-header{
        transform: translateX(0);
    }
}


.plans__item-subtitle{   
    color: var(--color-text);
    opacity: 0.5;    
}
.plans__item:nth-child(3) .plans__item-subtitle{
    color: #fff;
}
.plans__item-title{ 
    margin-bottom: var(--plans-title-mb);
}
.plans__item:nth-child(3) .plans__item-title{
    color: #fff;
}
.plans__item-name{
    margin-bottom: 0; 
    padding-left: var(--container-padding);
    flex-grow: 1;
    height: 100%;
    line-height: 76px;
}
@media(min-width:992px){
    .plans__item-name{
        line-height: 1;
        margin-bottom: 30px;
    }
}

.plans__item:nth-child(3) .plans__item-name{
    color: #fff;
}
.plans__item-controll{
    display: flex;
    width: 100%;
    justify-content: space-between;        
    margin-bottom: 2px;
    padding: 0;
    position: relative;
    z-index: 2;
}
.plans__item-icon{
    height: 20px;
    width: 20px;
    position: absolute;
    right: var(--container-padding);
    top: 50%;
    transform: translateY(-50%);
}
@media(min-width:992px){
    .plans__item-icon{
        display: none;
    }
}
.plans__item-icon::before{
    content: "";
    width: 20px;
    height: 4px;
    background: var(--color-text);
    transform: rotate(90deg);
    position: absolute;
    top: 8px;
    left: 0;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}
.plans__item-icon::after{
    content: "";
    width: 20px;
    height: 4px;
    background: var(--color-text);        
    position: absolute;
    top: 8px;
    left: 0;
    pointer-events: none;
}
.active .plans__item-icon::before{
    transform: rotate(0deg);
}
.plans__item:nth-child(3) .plans__item-icon::before,
.plans__item:nth-child(3) .plans__item-icon::after{
    background: #fff;
}

.plans__item-content{
    max-height: 0;
    will-change: max-height;

    height: 0;
    opacity: 0;
    overflow: hidden;        
    /* transition: all 0.7s ease-out; */
    box-sizing: content-box;   
    padding: 0 var(--container-padding);   
    position: relative; 
}
.active .plans__item-content{
    opacity: 1;
    padding-bottom: 141px;
    max-height: none;
    height: auto;
} 
@media(min-width:992px){
    .plans__item-content{
        opacity: 1;
        padding-bottom: 141px;
        max-height: none;
        height: auto;
        transform: translateX(calc(100% + var(--container-padding)) );        
        flex-grow: 1;
    }
    .active .plans__item-content{
        transform: translateX(0);
    }
}
.plans__item-descr p{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    margin-bottom: var(--text-14-mb);
}
@media(min-width:992px){
    .plans__item-descr p{
        max-width: 500px;
    }
}
.plans__item-descr-b{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    margin-bottom: var(--text-14-mb);
    padding-left: 20px;
    position: relative;
}
@media(min-width:992px){
    .plans__item-descr-b{
        max-width: 500px;
    }
}    
.plans__item-descr-b::before{
    position: absolute;
    content: "";
    border-radius: 50%;
    background: var(--color-orange);
    left: 0;
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc( ( var(--text-14-lh) - var(--circle-size)) / 2 );
}
.plans__item-descr-b:last-child{
    margin-bottom: 0;
}
.plan__btn{
    position: absolute;
    bottom: 0;
    left: 0;
}
.plans__item:nth-child(3) .plan__btn::after{
    background: url('../img/arrow-blue--small.svg') 0 0 no-repeat;
}
@media(min-width: 992px){
    .plans__item:nth-child(3) .plan__btn::after{
        background: url('../img/arrow-blue.svg') 0 0 no-repeat;
    }   
}

.plans__item-price{
    margin-bottom: 30px;
}
@media(min-width: 992px){
    .plans__item-price{
        padding-right: 0px;
        opacity: 0;        
        transition: all 0.3s linear;
        transition-delay: 0.2s;
    }
    .active .plans__item-price{
        opacity: 1;
        padding-right: 100px;
    }
}
.plans__item-price span{
    color: var(--color-orange);
}
.plans__item:nth-child(3) .plans__item-price{
    color: #fff;
}


/* contacts */

 .contacts{
    background: var(--color-gray-1);
}

@media(min-width: 992px){
    .contacts__row{
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
    }
    .contacts__content{
        flex-grow: 1;    
    }
}

.contacts__form-wrapper{
    padding: 90px var(--container-padding) 0;
    background: var(--color-gray-2);
    margin-bottom: -2px;
}
@media(min-width: 992px){
    .contacts__form-wrapper{
        padding-top: 90px;    
        padding-left: 50px;    
        margin-bottom: 0;
    }
}
.contacts__h4{
    margin-bottom: 56px;
}
@media(min-width: 992px){
    .contacts__h4{
        margin-bottom: 60px;
    }
}
.contacts__form label{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    margin-bottom: 40px;
    width: 100%;    
    display: block;
}
@media(min-width: 992px){
    .contacts__form label{
        max-width: 420px;
    }
}
input[type='text'], input[type='tel'], input[type='email']{
    font-size: var(--text-16-fz);
    line-height: var(--text-16-lh);
    margin-top: 8px;
}
label.last{
    margin-bottom: 45px;
}
.contacts__img{
    height: 500px;
    width: 100%;
    position: relative;   
    overflow: hidden; 
}
@media(min-width: 992px){
    .contacts__img{
        width: 50%;
        height: auto;
        flex-shrink: 0;
    }
}
.contacts__img img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    object-fit: scale-down;
    object-fit: cover;

}
 @media(min-width: 481px){
    .contacts__img img{
        height: auto;
    }
}
@media(min-width: 992px){
    .contacts__img img{
        height: 100%;
    }
}

.contacts__info{
    /* padding: 90px 44px 152px; */
    padding: 90px var(--container-padding) 152px;
}
@media(min-width: 992px){
    .contacts__info{
        padding-top: 100px;
        padding-left: 50px;
        padding-bottom: 44px;
    }
}
input[type='text'],
input[type='tel'],
input[type='email']{
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-text);
    border-radius: 0px;
    background: transparent;
    font-size: var(--body-fz);
    line-height: var(--body-lh);
    margin-top: 9px;    
    color: var(--color-text);
}
input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus{
    outline: none;
    border: none;
    border-bottom: 1px solid var(--color-accent);
}
select{
    display: block;
    margin-top: 9px;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-text);
    background: transparent;
    font-size: var(--body-fz);
    line-height: var(--body-lh);
    color: var(--color-text);
    font-weight: 400;
}
select:focus{
    outline: none;
    border: none;
    border-bottom: 1px solid var(--color-accent);
}

label.last{
    margin-bottom: 60px;
}
.form__btn{
    position: relative;
    /* left: calc( -1 * var(--container-padding) );     */
    left: -21px;
    left: calc( -1 * ( var(--container-padding) + 1px ) );
    border: none;

}
@media(min-width: 992px){
    .form__btn{
        left: -51px;
    }
}

/* footer */
 .footer{
    padding: 44px 0;
    background: var(--color-gray-2);
    position: relative;    
}
@media(min-width: 992px){
    .footer{
        padding: 100px 0;        
    }
}

.footer__nav{
    width: 100%;
    text-align: center;
}
.footer__nav-list{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0;    
}
@media(min-width: 992px){
    .footer__nav-list{    
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin: 0 -30px;
        width: calc(100% - 215px);
        margin-left: 215px;
    }
}
.footer__nav-link{
    display: block;
    width: 100%;
    padding: 16px 0;
    line-height: 28px;
    font-size: 24px;
    font-weight: 600;
}
@media(min-width: 992px){
    .footer__nav-link{    
        padding: 0 30px;    
    }
}
.logo--footer{
    position: absolute;
    left: var(--container-padding);   
    top: -44px;
    transform: translateY(-50%);
}
@media(min-width: 992px){
    .logo--footer{  
        /* top: 30px;
        left: max(var(--container-padding), calc((100% - 1300px) / 2)); */
        top: 50%;
        left: max(var(--container-padding), calc((100% - 1300px) / 2));
        transform: translateY(-50%);
    }
}



/* #scroll-up */
#scroll-up{
    width: 40px;
    height: 40px;    
    background: var(--color-accent);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: -30%;
    right: 15px;
    z-index: 20;    
}
#scroll-up img{
    display: block;
}
#scroll-up.show-scroll{
    bottom: 20px;
}



/* selectstyle */
.jq-selectbox {
    width: 100%;
}
.jq-selectbox__select{    
    margin-top: 9px;    
    border: none;
    border-bottom: 1px solid var(--color-text);
    background: transparent;
    font: var(--body-fz)/var(--body-lh) var(--font-base);    
    color: var(--color-text);
    font-weight: 300;
    border-radius: 0;
    box-shadow: none !important;
    text-shadow: none;
    padding-left: 0;

}
.jq-selectbox__select:hover{
    background: transparent;
}
.jq-selectbox__select:active{
    background: transparent;
}
.jq-selectbox.focused .jq-selectbox__select{
    border: none;
}
.jq-selectbox__trigger{
    border-left: none;
}
.jq-selectbox__trigger-arrow{
    top: 9px;
    border-top: 9px solid #999;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
@media(min-width: 992px){
    .jq-selectbox__trigger-arrow{
        top: 9px;
        border-top: 16px solid #999;
        border-right: 9px solid transparent;
        border-left: 9px solid transparent;
    }
}
.jq-selectbox__dropdown{
    border: 1px solid var(--color-text);
    border-radius: 0;
    box-shadow: none;
    background: var(--color-gray-2);
    padding: 10px 0;
    font: var(--body-fz)/var(--body-lh) var(--font-base);
    color: var(--color-text);
    font-weight: 300;
}
.jq-selectbox li{
    padding: 10px 20px;
}
.jq-selectbox li.selected {
    background-color: var(--color-gray-1);
    color: var(--color-text);
}
.jq-selectbox li:hover{
    background: var(--color-accent);
    color: #fff;
}

.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output{
    border-color: var(--color-accent);
}
.wpcf7 form .wpcf7-response-output{
    border: 1px solid var(--color-accent);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
    border-color: var(--color-accent);
}
.wpcf7-response-output{
    font: 20px/26px var(--font-base);
}
.wpcf7-not-valid-tip{
    font: 16px/26px var(--font-base);
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output{
    color: #dc3232;
}
.wpcf7-response-hide{
    display: none;
}


/* sweet-alert */
.swal2-popup{
    padding: 0 0 3em !important;
}
.swal2-title{
    line-height: 1.15 !important;
    color: var(--color-text) !important;
}
.swal2-close {
    color: var(--color-text) !important;
}
.swal2-icon.swal2-success{
    border-color:var(--color-accent) !important;
    color: var(--color-accent) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color:var(--color-accent) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid rgba(81,104,174,.3) !important;
}
.swal2-close:focus{
    box-shadow: none !important;
}

/* polylang */
.lang__desktoop{
    display: none;
    /* display: inline-block;
    width: auto;
    margin-left: 50px; */
}
.lang__desktop{
    display: none;
}
@media(min-width: 992px){
    .lang__desktoop{
        display: inline-block;
        width: auto;
        margin-left: 50px;
    }
    .lang__desktoop select{
        border: none;
    }
    .lang__desktoop .jq-selectbox__select{
        border: none;
        padding-right: 35px;
    }
    .lang__desktoop .jq-selectbox__trigger{
        width: 20px;
    }
    .lang__desktoop .jq-selectbox__trigger-arrow{
        top: 4px;
        border-top: 15px solid var(--color-text);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        right: 16px;
    }
    .lang__desktoop .jq-selectbox__dropdown{
        margin-top: 10px;
        padding: 0;
        border: none;
        background: transparent;
    }
    .lang__desktoop .jq-selectbox li.selected{
        background: transparent;
        color: var(--color-text);
    }
    .lang__desktoop .jq-selectbox li{
        padding: 0 0 20px 0;
        font-size: 24px;
        line-height: 24px;
        font-family: var(--font-second);
        font-weight: 400;
        opacity: 0.5;
        transition: opacity 0.3s linear;
    }
    .lang__desktoop .jq-selectbox li:hover{
        opacity: 1;
        background: transparent;
        color: var(--color-text);
    }
    .lang__desktoop .jq-selectbox__select-text{
        font-size: 24px;
        line-height: 24px;
        font-family: var(--font-second);
        font-weight: 400;
    }

    /* new design */
    .lang__desktop{
        margin: 0;
        padding: 0;
        margin-left: 50px;
        display: block;
    }
    .lang__desktop .pll-parent-menu-item{        
    }
    .lang__desktop li.pll-parent-menu-item a.pll-selected{
        display: inline-block;        
        padding-top: 10px;
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 24px;
        font-family: var(--font-second);
        font-weight: 400;
        color: var(--color-text);
        position: relative;
    }
    .lang__desktop li.pll-parent-menu-item a.pll-selected::after{
        content: "";
        border-top: 12px solid #152D49;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        position: absolute;
        top: 0;
        left: 100%;
        transform: translate(5px, 16px);
        transition: transform 0.3s linear;
    }
    .lang__desktop .sub-menu{
        visibility: hidden;
        opacity: 0;
        height: 0;
        transition: all 0.3s linear;
    }
    .lang__desktop .pll-parent-menu-item:hover .sub-menu{
        visibility: visible;
        opacity: 1;
    }
    /* .lang__desktop .pll-parent-menu-item:hover a.pll-selected::after{
        transform: translate(5px, 16px) rotate(180deg);
    } */
    .lang__desktop .sub-menu li.lang-item a{
        font-size: 24px;
        line-height: 24px;
        font-family: var(--font-second);
        font-weight: 400;
        color: var(--color-text);
    }

}
.lang__mobile{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.lang__mobile .lang-item a{
    font-family: var(--font-second);
    font-size: 24px;
    line-height: 24px;
    font-weight: 40;
    color: rgba(21, 45, 73, 0.5);
}
.lang__mobile .lang-item{
    margin-right: 60px;
}
.lang__mobile .lang-item:last-child{
    margin-right: 0;
}
.lang__mobile .lang-item.current-lang a{
    color: var(--color-text);
}
.lang__mobile .lang-item:hover a{
    color: var(--color-text);
}


/* page styles */
.page-hero{
    height: 455px;
    background: var(--color-gray-1);
    display: flex;
    justify-content: center;
    align-items: center; 
}
.page-content{
    background: var(--color-gray-2);
    padding-top: 60px;
    padding-bottom: 60px;
}
.page-content__wrapper{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 45px;
}
.list-item{
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-base);
    margin-bottom: 40px;
}
.page-content p{
    margin-bottom: 40px;
}
.page-content a{
    color: var(--color-orange);
    text-decoration: underline;
}
.page-hero h1.page__title{
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    margin: 0 45px;
    font-family: var(--font-second);
}
@media(min-width: 992px){    
    .footer__nav-list{        
        width: calc(100% - 180px);
        margin-left: 180px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .footer__nav-list li{
        margin-bottom: 20px;
    }     
}
@media(max-width: 1023px){
    .page-hero{
        height: auto;
        padding-top: 147px;
    }
    .page-hero h1.page__title{
        font-size: 32px;
        line-height: 1.2; 
        margin-bottom: 87px;       
    }
    .page-content{
        padding-top: 90px;
        padding-bottom: 80px;
    }
    .page-content p{
        font-size: 16px;
        line-height: 28px;
        font-weight: 300;
    }
    .page-content p.list-item{
        font-size: 16px;
        line-height: 28px;
        font-weight: 600;
        margin-bottom: 45px;
    }
    /* .footer span.logo--footer{
        top: 108px;
    }
    .home .footer{
        padding-top: 55px;
    }
    .home .footer span.logo--footer{
        top: 0px;
    } */
}
@media(max-width: 991px){
    .footer__nav-list{        
        width: 100%;
        margin-left:0;        
        justify-content: center;
    }
    .footer__nav-list li{
        margin-bottom: 0px;
    } 
}
/* @media(max-width: 600px){
    .footer{
        padding-top: 130px;
    }
}
@media(max-width: 360px){
    .footer{
        padding-top: 190px;
    }
} */

footer .container{
    position: relative;
}
.page .site-wrapper{
    background: var(--color-gray-2);
}