/* CSS Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--fontDefault);
    font-family: Roboto, serif;
    color: var(--colorBlack);
    font-weight: 400;
}

/* Keyframes */
@keyframes rotate360 {
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg;
    }
}

/* Fonts */
@font-face {
    src: url("../fonts/Roboto-Bold.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}
@font-face {
    src: url("../fonts/Roboto-SemiBold.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}
@font-face {
    src: url("../fonts/Roboto-Regular.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    src: url("../fonts/Roboto-Light.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 200;
    font-style: normal;
}
@font-face {
    src: url("../fonts/Roboto-Thin.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 100;
    font-style: normal;
}
@font-face {
    src: url("../fonts/Roboto-Italic.ttf");
    font-family: Roboto;
    font-display: swap;
    font-weight: 400;
    font-style: italic;
}

/* Global CSS */
:root{
    --h1: calc(110vw / 19.2);
    --h2: calc(100vw / 19.2);
    --h3: calc(86vw / 19.2);
    --h4: calc(80vw / 19.2);
    --h5: calc(64vw / 19.2);
    --h6: calc(40vw / 19.2);
    --h7: calc(36vw / 19.2);
    --h8: calc(32vw / 19.2);
    --h9: calc(28vw / 19.2);
    --h10: calc(25vw / 19.2);
    --h11: calc(24vw / 19.2);
    --h12: calc(20vw / 19.2);
    --h13: 16px;
    --fontDefault: calc(18vw / 19.2);
    --colorMainGradient: linear-gradient(to bottom, #003B00, #006E07);
    --colorMainDark: #003B00;
    --colorMain: #006E07;
    --colorMainLight: #B2EAB5;
    --colorWhite: #FFFFFF;
    --colorGrey: #D9D9D9;
    --colorBlackLight: #18171C;
    --colorBlack: #000000;
    --borderRadiusSmall: 18px;
    --borderRadius: 25px;
    --borderRadiusBig: 40px;
}
html{
    scroll-behavior: smooth;
}
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background-color: var(--colorWhite);
}
html::-webkit-scrollbar-thumb {
    background-color: var(--colorMain);
    border: 3px solid var(--colorWhite);
    border-radius: 5px;
}
body{
    overflow-x: hidden;
}
main{
    overflow-x: hidden;
}
header{
    z-index: 9;
    position: fixed;
    width: 100%;
    backdrop-filter: blur(5px);
}
.header_relative{
    position: relative;
}
.section{
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
    width: 100%;
    padding: 5vh 0;
    position: relative;
    z-index: 2;
    max-width: 100vw;
}
.container{
    width: 100%;
    padding: 0 3%;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: start;
    gap: 50px;
}
.grid{
    display: grid;
}
.grid-row{
    grid-auto-flow: column;
}
.grid-column{
    grid-auto-flow: row;
}
.gap-5{
    gap: 5px;
}
.gap-10{
    gap: 10px;
}
.gap-15{
    gap: 15px;
}
.gap-25{
    gap: 25px;
}
.gap-50{
    gap: 50px;
}
.gap-75{
    gap: 75px;
}
.gap-100{
    gap: 100px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-bottom-25{
    margin-bottom: 25px;
}
.margin-bottom-50{
    margin-bottom: 50px;
}
.margin-bottom-75{
    margin-bottom: 75px;
}
.margin-bottom-100{
    margin-bottom: 100px;
}
.justify-content-start{
    justify-content: start;
}
.justify-content-center{
    justify-content: center;
}
.justify-content-end{
    justify-content: end;
}
.justify-content-space-between{
    justify-content: space-between;
}
.align-content-start{
    align-content: start;
}
.align-content-center{
    align-content: center;
}
.align-content-end{
    align-content: end;
}
.align-content-space-between{
    align-content: space-between;
}
.align-items-start{
    align-items: start;
}
.align-items-center{
    align-items: center;
}
.align-items-end{
    align-items: end;
}
.justify-items-start{
    justify-items: start;
}
.justify-items-center{
    justify-items: center;
}
.justify-items-end{
    justify-items: end;
}
.align-self-start{
    align-self: start;
}
.align-self-center{
    align-self: center;
}
.align-self-end{
    align-self: end;
}
.justify-self-start{
    justify-self: start;
}
.justify-self-center{
    justify-self: center;
}
.justify-self-end{
    justify-self: end;
}
.link{
    cursor: pointer;
    text-decoration: none;
}
.text-inherit{
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}
.color-inherit{
    color: inherit;
}
.color-main{
    color: var(--colorMain);
}
.color-main-light{
    color: var(--colorMainLight);
}
.color-main-dark{
    color: var(--colorMainDark);
}
.color-white{
    color: var(--colorWhite);
}
.color-black{
    color: var(--colorBlack);
}
.color-black-light{
    color: var(--colorBlackLight);
}
.color-gray{
    color: var(--colorGrey);
}
.color-gray-dark{
    color: #464646;
}
.h1{
    font-size: var(--h1);
}
.h2{
    font-size: var(--h2);
}
.h3{
    font-size: var(--h3);
}
.h4{
    font-size: var(--h4);
}
.h5{
    font-size: var(--h5);
}
.h6{
    font-size: var(--h6);
}
.h7{
    font-size: var(--h7);
}
.h8{
    font-size: var(--h8);
}
.h9{
    font-size: var(--h9);
}
.h10{
    font-size: var(--h10);
}
.h11{
    font-size: var(--h11);
}
.h12{
    font-size: var(--h12);
}
.h13{
    font-size: var(--h13);
}
.text-alight-center{
    text-align: center;
}
.text-alight-end{
    text-align: end;
}
.weight-100{
    font-weight: 200;
}
.weight-200{
    font-weight: 200;
}
.weight-400{
    font-weight: 400;
}
.weight-600{
    font-weight: 600;
}
.weight-700{
    font-weight: 700;
}
.italic{
    font-style: italic;
}
.width-100{
    width: 100%;
}

/* Menu */
.menu__section{
    padding: 20px 0;
}
.menu__nav_fixed{
    display: none;
}
.menu__logo{
    width: calc(400vw / 19.2);
}
.menu__logo img{
    width: 100%;
}
.menu__link{
    background-color: rgba(255, 255, 255, 0.55);
    padding: 15px 50px;
    color: var(--colorWhite);
    border-radius: var(--borderRadiusSmall);
}
.menu__nav{
    padding: 15px;
    border-radius: 27px;
    background-image: var(--colorMainGradient);
}

/* Banner */
.banner__circle, .reviews__circle{
    background-image: url("../img/bg/circleFade.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1178px;
    height: 1178px;
    position: absolute;
    background-position: center center;
    z-index: -2;
}
.banner__circle_1{
    top: -800px;
    left: -450px;
}
.banner__circle_2{
    top: 200px;
    left: -600px;
}
.banner__circle_3{
    top: 700px;
    right: -800px;
}
.banner__inner_1{
    grid-template-columns: 2.5fr 1fr;
}
.banner__section{
    padding-top: 200px;
}
.rounded{
    padding: 15px 45px;
    border: 1px solid var(--colorBlack);
    border-radius: var(--borderRadiusBig);
}
.rounded_mini{
    padding: 10px 35px;
    border: 1px solid var(--colorBlack);
    border-radius: var(--borderRadiusBig);
}
.rounded_filled-black{
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}
.rounded_white{
    border-color: var(--colorWhite);
}
.banner__hi{
    position: relative;
    background-color: var(--colorBlackLight);
    border-radius: 45px;
    padding: 40px;
}
.banner-hi__star{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 40px;
    right: 40px;
}
.banner-hi__text{
    line-height: 146%;
}
.banner__inner_2{
    grid-template-columns: 2fr 3fr;
}
.banner-inner-2__rows{
    grid-template-rows: 1fr 1fr;
}
.banner-inner-2__box_black{
    background-color: var(--colorBlackLight);
}
.banner-inner-2__box_black > *{
    color: var(--colorWhite);
}
.banner-inner-2__box_grey{
    background-color: var(--colorGrey);
}
.banner-inner-2__box{
    padding: 30px;
    border-radius: var(--borderRadiusBig);
}
.banner-inner-2__img{
    object-fit: cover;
    object-position: center center;
    width: 100%;
    border-radius: var(--borderRadiusBig);
}
.banner-inner-2-leveling__content{
    width: 70%;
}
.banner-inner-2-leveling__title{
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--colorBlack);
}
.banner-inner-2__leveling{
    background-color: var(--colorMainLight);
    padding: 50px;
    border-radius: var(--borderRadiusBig);
    position: relative;
}
.banner-inner-2-leveling__text{
    line-height: 137%;
}
.banner-inner-2-leveling__arrow{
    position: absolute;
    bottom: 50px;
    right: 50px;
    height: 100px;
    width: 100px;
}
.banner__inner_2::before{
    content: '';
    width: 285px;
    height: 285px;
    background-image: url("../img/ban/ob.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -150px;
    left: 20px;
    animation: rotate360 15s linear infinite;
}

/* People */
.people__inner{
    grid-template-columns: 2.3fr 3fr;
    position: relative;
}
.people-content__person{
    width: 110%;
    padding: 40px;
    border-radius: var(--borderRadiusBig);
    position: relative;
    box-shadow: var(--colorGrey) 0 0 25px -10px;
}
.people__content{
    position: absolute;
    bottom: 5vh;
    display: none;
}
.people__content_active{
    display: grid;
}
.people-content-person__arrow{
    aspect-ratio: 1/1;
    position: absolute;
    height: 100%;
    background-image: url("../img/icons/arrow_white.png");
    border-radius: var(--borderRadiusBig);
    background-color: var(--colorMain);
    background-position: center center;
    background-size: 60px 60px;
    background-repeat: no-repeat;
    right: 0;
}
.people__persons{
    grid-template-columns: 3fr 1fr 1fr;
    transition: grid-template-columns .3s ease;
}
.people-persons__img{
    background-size: cover;
    background-position: center top;
    border-radius: var(--borderRadiusBig);
    cursor: pointer;
    position: relative;
    z-index: 2;
    height: 75vh;
}
.people-persons__img_3{
    background-position: 65% top;
}
.people-persons__img_2{
    display: grid;
    grid-auto-flow: row;
    padding: 40px;
    align-content: end;
    justify-items: center;
}
.people-persons-img__click{
    width: 60px;
    height: 60px;
    z-index: 4;
    display: none;
}
.people-persons-img__click_active{
    display: block;
}
.people-persons__img::before{
    content: '';
    z-index: 1;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--borderRadiusBig);
}
.people-content__text{
    width: 95%;
}
.people-inner__wrap{
    position: relative;
    z-index: 3;
}
.people-content-person_info{
    width: 75%;
}
.people__content_mobile{
    display: none;
}
.people__title_mobile{
    display: none;
}
@keyframes marque {
    0%{
        translate: 0 0;
    }
    100%{
        translate: calc(-50% - 25px) 0;
    }
}
/* About */
.about-marque__items{
    justify-content: start;
    gap: 50px;
    animation: marque 20s linear infinite;
    position: relative;
}
.about-marque__icon{
    position: relative;
    width: 95px;
    height: 95px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.about-marque__icon::before{
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    width: 1px;
    background-color: var(--colorBlack);
    height: 100%;
}
.about-marque__card{
    grid-auto-flow: column;
    padding: 50px;
    background-color: var(--colorWhite);
    border-radius: var(--borderRadius);
    gap: 100px;
    width: 35vw;
    justify-content: start;
}
.about__inner{
    width: 100%;
    padding: 70px;
    border-radius: var(--borderRadiusBig);
    background-image: vaR(--colorMainGradient);
}
.about__marque{
    overflow: hidden;
}
.about__arrow{
    width: 95px;
    height: 95px;
    object-position: center center;
    object-fit: contain;
}
.about__text{
    width: 75%;
}
.about-marque__description{
    line-height: calc(37vw / 19.2);
}

/* Info */
.info__inner{
    background-image: linear-gradient(to bottom, var(--colorMainLight), var(--colorWhite));
    border-radius: var(--borderRadiusBig);
    padding: 50px;
}
.info__tabs{
    background-color: var(--colorWhite);
    border-radius: 22px;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
.info__star{
    width: 28px;
    height: 28px;
    background-image: url("../img/icons/star2Black.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.info-tabs-button__backpack{
    border-radius: 22px;
    background-image: var(--colorMainGradient);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: left .3s ease;
}
.info__tabs{
    position: relative;
}
.info-tabs__button{
    padding: 30px;
    background-color: transparent;
    color: var(--colorBlack);
    transition: all .3s ease;
    cursor: pointer;
    border-radius: 22px;
    outline: none;
    border: none;
    position: relative;
    z-index: 2;
}
.info-tabs__button > *{
    transition: all .3s ease;
}
.info-tabs__button_active > *{
    color: var(--colorWhite);
}
.info-tabs__button_active .info__star{
    background-image: url("../img/icons/star2.png");
}
.info-contents__wrap{
    display: none;
}
.info-contents__wrap_active{
    display: grid;
}
.info-contents__wrap_1{
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.info__contents{
    padding: 70px;
    background-color: var(--colorWhite);
    border-radius: 22px;
}
.info-contents-1__text{
    line-height: calc(40vw / 19.2);
}
.info-contents-1__icon{
    width: 90px;
    height: 90px;
}
.info-contents-wrap-2__inner{
    grid-template-columns: 1fr 1fr;
}
.info-contents-wrap-2-inner__box_1{
    grid-template-columns: 1fr 1fr;
    background-color: var(--colorBlackLight);
    border-radius: 22px;
    padding: 30px;
}
.info-contents-wrap-2-inner-box-1__icon{
    width: 70px;
    height: 70px;
}
.info-contents-wrap-2-inner-box-1__img{
    width: 100%;
    background-image: url("../img/info/info_photo1.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 22px;
    min-height: 430px;
    height: 100%;
}
.info-contents-wrap-2-inner__box_2{
    grid-template-rows: 1fr 5fr;
    background-color: var(--colorGrey);
    border-radius: 22px;
    padding: 30px;
}
.info-contents-wrap-2-inner-box-2__photos{
    grid-template-columns: 1fr 1fr;
}
.info-contents-wrap-2-inner-box-2__img{
    border-radius: 22px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.info-contents-wrap-3__item{
    padding-bottom: 30px;
    border-bottom: 2px solid var(--colorMain);
    gap: 15px;
}
.info-contents-wrap-3__item:last-child{
    padding-bottom: 0;
    border-bottom: 2px solid transparent;
}

/* Activity */
.activity__inner{
    grid-template-areas:
            "a b c d"
            "e f g g"
            "h i j k"
            "l l l m";
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.activity__card{
    width: 100%;
    min-height: 350px;
    border-radius: var(--borderRadiusBig);
    padding: 25px 35px;
    background-color: var(--colorGrey);
    display: grid;
    cursor: pointer;
    scale: 1;
    transition: scale .3s ease;
    position: relative;
    z-index: 5;
    overflow: hidden;
}
.activity__card:hover{
    scale: 1.01;
}
.activity__card_1{
    grid-area: a;
    background-color: var(--colorGrey);
}
.activity__card_1 .activity-card__bg{
    width: 300px;
    position: absolute;
    top: -70px;
    right: 25px;
    z-index: -2;
}
.activity__card_2{
    grid-area: b;
    background-image: var(--colorMainGradient);
}
.activity__card_2 .activity-card__bg{
    width: 300px;
    position: absolute;
    top: 20%;
    left: 0;
    z-index: -2;
}
.activity__card_3{
    grid-area: c;
    background-color: var(--colorGrey);
}
.activity__card_4{
    grid-area: d;
    background-color: var(--colorMainLight);
}
.activity__card_4 .activity-card__bg{
    width: 350px;
    position: absolute;
    top: 0;
    right: 30px;
    z-index: -2;
}
.activity__card_5{
    grid-area: e;
    background-image: var(--colorMainGradient);
}
.activity__card_6{
    grid-area: f;
    background-color: var(--colorGrey);
}
.activity__card_6 .activity-card__bg{
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
}
.activity__card_7{
    grid-area: g;
    background-color: var(--colorBlackLight);
    padding: 40px;
}
.activity__card_8{
    grid-area: h;
    background-color: var(--colorGrey);
}
.activity__card_8 .activity-card__bg{
    width: 350px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
}
.activity__card_9{
    grid-area: i;
    background-color: var(--colorMainLight);
}
.activity__card_10{
    grid-area: j;
    background-image: var(--colorMainGradient);
}
.activity__card_11{
    grid-area: k;
    background-color: var(--colorGrey);
}
.activity__card_12{
    grid-area: l;
    background-color: var(--colorBlackLight);
    padding: 40px;
}
.activity__card_13{
    grid-area: m;
    background-image: var(--colorMainGradient);
}
.activity__arrow{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--colorBlackLight);
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
}
.activity__arrow img{
    width: 20px;
    height: 20px;
}
.rounded_activity{
    font-size: 14px;
    padding: 5px 10px;
    color: var(--colorMain);
    border-color: var(--colorMain);
    opacity: 0;
}
.activity__arrow_white{
    background-color: var(--colorWhite);
}
.rounded_black{
    color: var(--colorBlack);
    border-color: var(--colorBlack);
}
.rounded_white_activity{
    color: var(--colorWhite);
    border-color: var(--colorWhite);
}
.activity__section{
    z-index: 3;
}
.activity-card__img{
    width: 100%;
    object-position: center center;
    object-fit: contain;
}
.activity-card__text{
    line-height: 146%;
}
.activity-card__text_mobile{
    display: none;
}

/* Modal */
.modal__section{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.modal__section_active{
    display: grid;
}
.modal__inner{
    border-radius: var(--borderRadiusBig);
    padding: 70px;
    background-color: var(--colorWhite);
    height: 94vh;
    overflow-y: overlay;
    overflow-x: hidden;
    position: relative;
    display: none;
}
.modal__inner_active{
    display: grid;
}
.table__box{
    width: 100%;
}
.modal__wrap{
    grid-template-columns: 1.2fr 2fr;
}
.modal__box{
    padding: 40px;
    background-image: var(--colorMainGradient);
    border-radius: var(--borderRadius);
}
.modal__img{
    width: 100%;
    border-radius: 14px;
}
.modal__table td{
    padding: 20px;
    border-right: 2px solid var(--colorMain);
    border-bottom: 2px solid var(--colorMain);
}
.modal__table td:last-child{
    border-right: none;
}
.modal__table tr:last-child > td{
    border-bottom: none;
}
.modal__cross{
    position: absolute;
    right: 70px;
    top: 70px;
    font-size: 56px;
    cursor: pointer;
}
.modal__link img{
    width: 50px;
    height: 50px;
}
.modal-link__arrow{
    width: 12px !important;
    height: 12px !important;
}
.modal__link_green{
    border-radius: var(--borderRadiusBig);
    padding: 10px 30px;
    background-color: var(--colorMainLight);
}
.modal__text_grey{
    padding: 30px;
    border-radius: var(--borderRadius);
    background-color: var(--colorGrey);
}
.modal__link_red{
    border-radius: var(--borderRadiusBig);
    padding: 10px 30px;
    background-color: #EAB2B2;
}
.modal__link_yellow{
    border-radius: var(--borderRadiusBig);
    padding: 10px 30px;
    background-color: #EADFB2;
}
.modal__wrap_2{
    grid-template-columns: 1fr 1fr;
}
.modal__wrap_3{
    grid-template-columns: 1fr 3.5fr;
}
.modal__title{
    margin-right: 20px;
}
.modal__wrap_4{
    grid-template-columns: 1fr 1fr 1fr;
}
.modal__video{
    width: 100%;
    border-radius: var(--borderRadius);
}

/* Reviews */
.reviews__card{
    grid-template-rows: auto auto 1fr;
    min-height: 550px;
    height: 25vw;
    background-color: var(--colorWhite);
    padding: 30px;
    border-radius: 30px;
    box-shadow: var(--colorGrey) 0 0 10px -3px;
}
.reviews__img{
    width: 60px;
    height: 60px;
}
.reviews__card_video{
    grid-template-rows: auto 1fr;
    position: relative;
    z-index: 2;
    background-image: url("../img/reviews/video.png");
    background-position: center center;
    background-size: cover;
    cursor: pointer;
}
.reviews__card_video::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 59, 0, 0.6);
    z-index: -1;
    border-radius: 30px;
}
.reviews__play{
    width: 100px;
    height: 60px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.reviews-card__video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30px;
    object-fit: cover;
    object-position: center;
    display: none;
}
.reviews-card__video_active{
    display: block;
}
.reviews__card_green{
    background-color: var(--colorMainLight);
}
.reviews__left{
    background-image: url("../img/reviews/slider-left.png");
    left: -30px !important;
}
.reviews__right{
    background-image: url("../img/reviews/slider-right.png");
    right: -30px !important;
}
.reviews__left svg, .reviews__right svg{
    display: none;
}
.reviews__left, .reviews__right{
    background-size: contain;
    width: 80px;
    height: 80px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
}
.reviews__wrapper{
    position: relative;
    max-width: 94vw;
}
.reviews__circle_1{
    top: -50px;
    left: -650px;
}
.reviews__circle_2{
    top: -350px;
    right: -800px;
}

/* Program */
.program__inner{
    grid-template-columns: 1fr 1fr;
}
.program__img{
    width: 100%;
}
.recommendation__inner{
    grid-template-columns: 1fr 1fr 1fr;
}
.recommendation__card{
    min-height: 650px;
    border-radius: var(--borderRadiusBig);
    padding: 30px;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorMainDark);
    position: relative;
}
.recommendation__card:first-child{
    z-index: 2;
}
.recommendation-card__number{
    width: 70px;
    height: 70px;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1px solid var(--colorMain);
    position: absolute;
    right: 30px;
    top: 30px;
}
.recommendation-card__number_white{
    border: 1px solid var(--colorWhite);
}
.recommendation-card__title{
    line-height: calc(49vw / 19.2);
}
.recommendation__card_gradient{
    background-image: var(--colorMainGradient);
    border: none;
    /*box-shadow: var(--colorMainDark) 0 0 60px 0;*/
}
.recommendation-card__img{
    height: 330px;
    object-position: center center;
    object-fit: cover;
    border-radius: 17px;
    width: 100%;
}

/* Footer */
.footer__inner{
    padding: 30px;
}
.footer__wrap{
    grid-template-columns: 3fr 2.4fr;
    padding: 40px;
    border-radius: var(--borderRadiusBig);
    background-image: var(--colorMainGradient);
}
.footer__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 23px;
}
.btn_arrow{
    aspect-ratio: 1/1;
    height: 100%;
    border-radius: 50%;
    background-color: var(--colorWhite);
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
    position: relative;
    left: -7px;
}
.btn_arrow img{
    width: 20px;
    height: 20px;
}
.btn{
    text-decoration: none;
    color: var(--colorBlack);
    padding: 15px 40px;
    border-radius: var(--borderRadiusBig);
    background-color: var(--colorWhite);
    cursor: pointer;
}
.footer__star{
    width: 100px;
    height: 100px;
}
.footer__contacts{
    border-radius: 27px;
    background-color: var(--colorBlackLight);
    padding: 30px;
}
.footer__link img{
    width: 35px;
    height: 35px;
}
.footer__rights{
    color: #757784;
}
.footer__up img{
    width: 35px;
    height: 35px;
}
.footer__contacts_mobile{
    display: none;
}

/* Media */
@media (max-width: 1480px) {
    .banner-hi__star{
        width: 60px;
        height: 60px;
    }
    .rounded{
        padding: 10px 30px;
    }
    .menu__link{
        padding: 10px 30px;
    }
    .banner__inner_2::before{
        width: 200px;
        height: 200px;
        top: -100px;
    }
    .about-marque__card{
        padding: 30px;
        gap: 60px;
    }
    .about-marque__icon{
        width: 60px;
        height: 60px;
    }
    .about-marque__icon::before{
        right: -30px;
    }
    .about__arrow{
        width: 65px;
        height: 65px;
    }
    .info-tabs__button{
        padding: 15px;
    }
    .activity-card__bg{
        width: 250px !important;
    }
    .activity__card{
        min-height: 280px;
    }
    .activity__arrow{
        width: 40px;
        height: 40px;
    }
    .activity__arrow img{
        width: 15px;
        height: 15px;
    }
    .activity__card_7, .activity__card_12{
        padding: 30px;
    }
    .btn{
        padding: 10px 30px;
    }
    .btn_arrow img{
        width: 10px;
        height: 10px;
    }
    .info-contents-wrap-2__inner{
        grid-template-columns: 1fr;
    }
    .info-contents-1__icon{
        width: 70px;
        height: 70px;
    }
    .footer__star{
        width: 70px;
        height: 70px;
    }
}
@media (max-width: 1280px) {
    .people__inner{
        grid-template-columns: 2fr 3.2fr;
    }
    .people-content__person{
        padding: 20px;
        border-radius: var(--borderRadiusSmall);
    }
    .people-content-person__arrow{
        border-radius: var(--borderRadiusSmall);
        background-size: 30px 30px;
    }
    .info-contents__wrap_1{
        grid-template-columns: 1fr 1fr;
    }
    .info-contents__wrap_1 > div{
        justify-items: center;
        text-align: center;
    }
    .info-contents__wrap_1 > div br{
        display: none;
    }
    .rounded-activity__word{
        display: none;
    }
    .rounded_activity{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
        display: grid;
        grid-auto-flow: row;
        justify-items: center;
        align-content: center;
    }
    .activity__inner{
        grid-template-areas:
                "a b c"
                "d e f"
                "g g h"
                "i j k"
                "m l l";
        grid-template-columns: 1fr 1fr 1fr;
    }
    .banner__hi{
        gap: 20px;
    }
}
@media (max-width: 1024px) {
    :root {
        --h1: calc(110vw / 19.2);
        --h2: calc(100vw / 19.2);
        --h3: calc(86vw / 19.2);
        --h4: calc(80vw / 19.2);
        --h5: calc(64vw / 19.2);
        --h6: calc(56vw / 19.2);
        --h7: calc(40vw / 19.2);
        --h8: calc(36vw / 19.2);
        --h9: calc(32vw / 19.2);
        --h10: calc(30vw / 19.2);
        --h11: 16px;
        --h12: 14px;
        --h13: 12px;
        --fontDefault: calc(18vw / 19.2);
        --borderRadiusSmall: 14px;
        --borderRadius: 20px;
        --borderRadiusBig: 30px;
    }
    .banner__inner_1{
        grid-template-columns: 3fr 2fr;
    }
    .banner-hi__star{
        width: 50px;
        height: 50px;
    }
    .rounded{
        padding: 10px 20px;
    }
    .banner__inner_1 .gap-50{
        gap: 25px;
    }
    .banner__inner_2::before{
        width: 150px;
        height: 150px;
        top: -75px;
    }
    .banner-inner-2-leveling__arrow{
        width: 50px;
        height: 50px;
    }
    .rounded_mini{
        padding: 10px 20px;
    }
    .banner-inner-2__leveling{
        padding: 30px;
    }
    .info-contents-wrap-2-inner-box-1__img{
        min-height: 300px;
    }
    .rounded_activity{
        padding: 0;
    }
    .reviews__right{
        width: 60px;
        height: 60px;
    }
    .reviews__left{
        width: 60px;
        height: 60px;
    }
    .recommendation__inner{
        overflow-x: overlay;
        width: 100%;
    }
    .recommendation__card{
        min-height: 50vh;
        width: 350px;
        padding: 20px;
    }
    .recommendation-card__img{
        height: 200px;
    }
    .recommendation__card_gradient {
        /*box-shadow: var(--colorMainDark) 0 0 20px 0;*/
    }
    .recommendation-card__number {
        width: 50px;
        height: 50px;
        top: 20px;
        right: 20px;
        font-size: 20px;
    }
    .recommendation__container{
        justify-items: start;
    }
    .recommendation-card__title br{
        display: none;
    }
    .recommendation-card__title{
        font-size: 20px;
        line-height: 130%;
    }
    .menu__nav_fixed{
        display: grid;
        padding: 15px;
        border-radius: 27px;
        background-image: var(--colorMainGradient);
        bottom: 10%;
        position: fixed;
        z-index: 9;
        left: 0;
        right: 0;
        margin: auto;
        width: fit-content;
    }
    .banner__section{
        padding-top: 50px;
    }
    header{
        position: relative;
    }
    .menu__nav{
        display: none;
    }
    .menu__link img{
        width: 35px;
    }
    .menu__link{
        display: grid;
        grid-auto-flow: row;
        align-content: center;
        justify-items: center;
    }
    .people__title_mobile{
        display: grid;
    }
    .people__title{
        display: none;
    }
    .people-persons__img_mobile{
        width: 100%;
        border-radius: var(--borderRadiusBig);
        cursor: default;
        height: auto;
        aspect-ratio: 348/230;
    }
    .people__content_mobile{
        position: relative;
        display: grid;
    }
    .people__persons{
        display: none;
    }
    .people__content{
        display: none;
    }
    .people__inner{
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .people-content__person{
        width: 95%;
        background-color: var(--colorWhite);
        top: -25px;
        z-index: 10;
    }
    .info__star{
        width: 20px;
        height: 20px;
    }
    .activity__card{
        min-height: 260px;
    }
    .footer__wrap{
        gap: 25px;
        padding: 25px;
    }
    .footer__inner{
        padding: 20px;
    }
    .about-marque__card{
        padding: 20px;
        width: 45vw;
    }
    .about-marque__icon{
        width: 50px;
        height: 50px;
    }
    .banner__hi{
        gap: 25px;
    }
    .info-contents__wrap_1 div{
        gap: 10px;
    }
    .modal__box{
        padding: 20px;
    }
    .modal__wrap{
        grid-template-columns: 1fr;
    }
    .modal__cross{
        top: 30px;
        right: 30px;
    }
    .modal__inner{
        padding: 40px;
    }
    .modal__link img{
        width: 40px;
        height: 40px;
    }
    .table__box{
        overflow-x: overlay;
        height: 300px;
    }
    .table__box_1{
        height: 200px;
    }
    .table__box_2{
        height: 200px;
    }
    .table__box_3{
        height: 300px;
    }
    .table__box_5{
        height: 200px;
    }
    .table__box_8{
        height: 200px;
    }
    .table__box_9{
        height: 200px;
    }
}
@media (max-width: 768px) {
    :root {
        --h1: calc(170vw / 19.2);
        --h2: calc(170vw / 19.2);
        --h3: calc(140vw / 19.2);
        --h4: calc(170vw / 19.2);
        --h5: calc(120vw / 19.2);
        --h6: calc(90vw / 19.2);
        --h7: calc(64vw / 19.2);
        --h8: calc(70vw / 19.2);
        --h9: calc(64vw / 19.2);
        --h10: calc(56vw / 19.2);
        --h11: calc(50vw / 19.2);
        --h12: calc(48vw / 19.2);
        --h13: calc(42vw / 19.2);
        --fontDefault: calc(18vw / 19.2);
        --borderRadiusSmall: 14px;
        --borderRadius: 20px;
        --borderRadiusBig: 30px;
    }
    .menu__logo img{
        width: 250px;
    }
    .banner__inner_1{
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .banner__inner_2{
        grid-template-columns: 1fr;
    }
    .banner__inner_2::before{
        top: calc(100vw / 19.2);
        right: 0;
        left: unset;
        width: calc(500vw / 19.2);
        height: calc(500vw / 19.2);
    }
    .banner-inner-2__leveling{
        gap: 25px;
    }
    .banner__hi{
        min-height: 300px;
    }
    .banner-inner-2__rows{
        gap: 10px;
    }
    .banner-inner-2__rows > .gap-25{
        gap: 10px;
    }
    .about__header{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
        gap: 25px;
    }
    .about-header__text{
        justify-self: start;
        text-align: start;
    }
    .about__inner{
        padding: 40px;
    }
    .about-marque__card:nth-child(5),
    .about-marque__card:nth-child(6),
    .about-marque__card:nth-child(7),
    .about-marque__card:nth-child(8){
        display: none;
    }
    .about-marque__items{
        display: grid;
        grid-template-columns: 1fr;
        animation: none;
        grid-auto-flow: unset;
        gap: 15px;
        height: 200px;
        overflow: overlay;
        border-radius: 20px;
    }
    .about-marque__card{
        width: 100%;
        padding: 30px;
    }
    .info__tabs{
        width: 100%;
        overflow: overlay;
    }
    .info-tabs__button{
        min-width: 300px;
    }
    .info-tabs-button__backpack{
        display: none;
    }
    .info-tabs__button_active{
        background-image: var(--colorMainGradient);
    }
    .info-contents__wrap_1{
        grid-template-columns: 1fr;
    }
    .info__contents{
        padding: 20px;
    }
    .info-contents-wrap-2-inner-box-1__icon{
        width: 50px;
        height: 50px;
    }
    .info__inner{
        padding: 20px;
    }
    .info-contents-wrap-2-inner__box_1{
        grid-template-columns: 1fr 1.5fr;
        padding: 20px;
        gap: 15px;
    }
    .info-contents-wrap-2-inner__box_1{
        grid-template-columns: 1fr 1.5fr;
        padding: 20px;
    }
    .activity__card{
        padding: 30px;
    }
    .activity__inner{
        grid-template-areas:
                "a b"
                "c d"
                "e f"
                "g g"
                "h i"
                "j k"
                "l m";
        grid-template-columns: 1fr 1fr;
    }
    .activity__header{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
        gap: 25px;
    }
    .activity-card__text_mobile{
        display: grid;
        align-self: start;
    }
    .activity__text_header{
        justify-self: start;
        text-align: start;
    }
    .activity__card_12 .activity-card__text{
        display: none;
    }
    .activity__card_12{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
    }
    .activity__card_12{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
    }
    .activity__card_12 .activity-card__btn{
        justify-self: end;
    }
    .info-contents__wrap_3{
        gap: 25px;
    }
    .reviews__right{
        right: 0 !important;
    }
    .reviews__left{
        left: 0 !important;
    }
    .program__inner{
        grid-template-columns: 1fr;
    }
    .footer__text_up{
        display: none;
    }
    .footer__link img, .footer__up img{
        width: 25px;
        height: 25px;
    }
    .footer__wrap{
        grid-template-columns: 1fr;
    }
    .footer__img{
        order: 2;
        height: 300px;
    }
    .footer__title{
        width: 90%;
        margin-bottom: 0;
    }
    .footer__star{
        width: 40px;
        height: 40px;
        position: absolute;
        top: 80px;
        right: 50px;
    }
    .footer__btn{
        position: absolute;
        bottom: 28%;
        left: 60px;
    }
    .footer__contacts{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
        gap: 10px;
    }
    .footer__contacts_mobile{
        display: grid;
    }
    .footer__up{
        display: none;
    }
    .footer__socials{
        display: none;
    }
    .footer__up_mobile{
        display: grid;
    }
    .footer__socials_mobile{
        display: grid;
    }
    .footer__rights{
        justify-self: start;
        text-align: start;
    }
    .footer__inner{
        padding: 10px;
    }
    .btn{
        padding: 8px;
        white-space: nowrap;
    }
    .activity__inner{
        gap: 10px;
    }
    .about-marque__description{
        line-height: unset;
    }
    .info-contents-1__text{
        line-height: unset;
    }
    .modal__header{
        grid-template-columns: 1fr;
        grid-auto-flow: unset;
        justify-items: start;
    }
    .table__box_1{
        height: 250px;
    }
    .table__box_2{
        height: 200px;
    }
    .table__box_3{
        height: 300px;
    }
    .table__box_5{
        height: 250px;
    }
    .table__box_6{
        height: 350px;
    }
    .table__box_8{
        height: 200px;
    }
    .table__box_9{
        height: 250px;
    }
}
@media (max-width: 576px) {

    :root {
        --h1: calc(170vw / 19.2);
        --h2: calc(170vw / 19.2);
        --h3: calc(140vw / 19.2);
        --h4: calc(170vw / 19.2);
        --h5: calc(120vw / 19.2);
        --h6: calc(90vw / 19.2);
        --h7: calc(78vw / 19.2);
        --h8: calc(76vw / 19.2);
        --h9: calc(70vw / 19.2);
        --h10: calc(64vw / 19.2);
        --h11: 11px;
        --h12: calc(64vw / 19.2);
        --h13: 9px;
        --fontDefault: calc(18vw / 19.2);
        --borderRadiusSmall: 14px;
        --borderRadius: 20px;
        --borderRadiusBig: 30px;
    }
    .activity__card{
        padding: 20px;
        min-height: 130px;
    }
    .activity__arrow{
        width: 25px;
        height: 25px;
    }
    .activity__arrow img{
        width: 10px;
        height: 10px;
    }
    .rounded_activity{
        width: 25px;
        height: 25px;
    }
    .activity-card__bg{
        width: 100px !important;
    }
    .activity__card_1 .activity-card__bg{
        top: -50px;
    }
    .activity-card__text br{
        display: none;
    }
    .banner-hi__text{
        font-size: var(--h7);
    }
    .about-marque__card{
        gap: 30px;
        padding: 25px;
    }
    .about-marque__icon::before{
        right: -15px;
    }
    .about-marque__icon{
        width: 35px;
        height: 35px;
    }
    .about__inner{
        padding: 20px;
    }
    .about__container{
        gap: 25px;
    }
    .about__description img{
        display: none;
    }
    .about__text{
        width: 100%;
    }
    .info-tabs__button{
        min-width: 200px;
        padding: 10px;
        border-radius: 15px;
    }
    .info-contents-1__text{
        line-height: unset;
    }
    .info-contents-1__icon{
        width: 50px;
        height: 50px;
    }
    .info-contents-wrap-2-inner__box_1{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .info-contents-wrap-2-inner-box-1__box{
        gap: 10px;
    }
    .info-contents-wrap-2-inner-box-2__photos{
        gap: 10px;
    }
    .reviews__author{
        font-size: var(--h8);
    }
    .menu__link{
        padding: 10px 15px;
    }
    .menu__link img{
        width: 25px;
    }
    .reviews__card{
        min-height: 420px;
    }
    .reviews__right, .reviews__left{
        width: 40px;
        height: 40px;
    }
    .recommendation__card{
        width: 300px;
    }
    .footer__btn{
        bottom: 31%;
    }
    .recommendation__card_gradient{
        box-shadow: var(--colorMainDark) 0 0 25px 0;
    }
    .table__box_1{
        height: 200px;
    }
    .table__box_2{
        height: 200px;
    }
    .table__box_3{
        height: 250px;
    }
    .table__box_4{
        height: 200px;
    }
    .table__box_5{
        height: 220px;
    }
    .table__box_6{
        height: 300px;
    }
    .table__box_7{
        height: 250px;
    }
    .table__box_8{
        height: 150px;
    }
    .table__box_9{
        height: 200px;
    }
    .modal__inner{
        padding: 20px;
	gap: 25px;
    }
    .modal__link img{
        width: 30px;
        height: 30px;
    }
}