@import "./reset.css";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


:root{
    --container-width: 1270px; /*Переменная ширины контейнера */
    --container-padding: 15px; /*Переменная отступов контейнера */
    --secondary-text: rgba(15, 31, 28, 0.5); /*Переменная для цвета текста*/  
}

body{
    font-family: 'Poppins', sans-serif;
    background-color: #F6F6F6;
    color: #0F1F1C;
}

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

.container-right{
    padding-left: calc((100% - var(--container-width))/2 + var(--container-padding)); /* Контейнер начинается слева также, но уходит вправо до конца*/
}

/* Header */

.header{
    position: relative;
    min-height: 940px;
    padding-top: 44px;

    background: linear-gradient(132.05deg, #428E5F -17.38%, #112120 78.4%), #204434;
    color: #FFFFFF;
    overflow: hidden; /* Обрезает все что выхожит за заданный контейнер*/

    margin-bottom: 96px;
}

.header a{
    color: #FFFFFF;
}

.header__bottom img{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
}

.header__top{
    margin-bottom: 86px;
}

.header__row{
    display: flex;
}

.header__content{
    max-width: 592px;
    position: relative;
    z-index: 1;
}

.header__image {
    position: relative;
    flex-grow: 1; /*Определяет как много свободного пространства во flex назначено тек.элем*/
    pointer-events: none;

    max-width: 830px;
 
}

.header__image--element{
    position: relative;
    max-width: 830px;
    max-height:  615px;
}

.header__image--element::after,
.header__image--element::before,
.header__image::after,
.header__image::before {
    position: absolute;
    content: "";
}

.header__image::after{
    width: 170px;
    height: 50px;
    top: 54px;
    right: 30px;

    background-image: url("./../img/header/el-2.svg");
}

.header__image::before {
    width: 48px;
    height: 63px;
    top: 0;
    right: 600px;

    background-image: url("./../img/header/el-1.svg");
}

.header__image--element::after{
    width: 170px;
    height: 50px;
    top: 515px;
    right: 600px;

    background-image: url("./../img/header/el-3.svg");
}

.header__image--element::before{
    width: 63px;
    height: 83px;
    top: 515px;
    right: 0;
    background-image: url("./../img/header/el-4.svg");
}

.header__image img {
    position: absolute;
    max-width: none;
    top: -180px;
    right: -87px;
    width: 894px;
    height: 940px;
}

/* Navigation */

.nav{
    display: flex;
    justify-content: space-between;
    column-gap: 80px;
    align-items: center;
    padding: 5px;
}

.nav__list{
    font-size: 15px;
    font-weight: 500;
}

.nav__list ul{
    display: flex;
    column-gap: 80px;
}

.nav__list a{
    position: relative;
}

.nav__list a.active::after,
.nav__list a:hover::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -6px;
    display: block;

    width: 35px;
    height: 4px;
    background-color: #C4C4C4;
    border-radius: 100px;
}

.nav__list--footer a.active::after,
.nav__list--footer a:hover::after {
    display: none;
}

.nav__list--footer a:hover{
    text-decoration: underline;
}

.nav__login ul{
    align-items: center;
    display: flex;
    column-gap: 25px;
    font-size: 15px;
    font-weight: 500;
}

.nav__login--footer ul{
    column-gap: 66px;
}

.nav__burger{
    display: none;
}

.logo{
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 700; 
}

.logo a{
    color: inherit !important;
}

.logo--footer{
    color: #FF7C4E;
}

.btn{
    display: inline-block;
    padding: 13px 43px;
    font-size: 15px;
    color: #FFFFFF !important;

    background: linear-gradient(129.54deg, #FF7B4E 15.57%, #FF584E 95.03%), #FFFFFF;
    border-radius: 100px;
}

.btn:hover{
    transition: all 0.2 ease-in 0s;
    background: linear-gradient(129.54deg, #f35e2c 15.57%, #FF584E 95.03%), #FFFFFF;
}

/* Header content*/

.header__badge {
    display: inline-block;
    padding: 12px 30px;

    font-size: 18px;
    font-weight: 500;

    background: rgba(255, 255, 255, 0.25);
    border-radius: 15px;

    margin-bottom: 7px;
}

.header__title {
    font-size: 55px;
    font-weight: 400;
    margin-bottom: 30px;
}

.header__text {
    font-size: 25px;
    font-weight: 700;
    color: rgb(255, 255, 255, 0.5);
    margin-bottom: 68px;
}

.btn--header{
    font-weight: 600;
    font-size: 25px;
    padding: 27px 48px;
    border-radius: 27px;
}

/* Destinations */

.destinations {
    overflow-x: hidden; /*Убирает скролл для того что выходит за пределы экрана*/
    margin-bottom: 200px;
}

.destinations__row {
    display: flex;
    column-gap: 50px;
}

.destinations__content {
    max-width: 496px;
}

.destinations__slider {
    width: 1110px;
    flex-shrink: 0; /*Чтобы блок не сжимался при уменьшении разрешения*/
}

.destinations__title {
    font-size: 55px;
    font-weight: 600;
    margin-bottom: 15px;
}

.destinations__title span{
    font-size: 30px;
}

.destinations__text {
    font-size: 25px;
    font-weight: 500;

    color: var(--secondary-text);
    margin-bottom: 60px;
}

.btn--destinations{
    padding: 25px 45px;
    font-size: 20px;
    border-radius: 27px;
}

/*Slider */

.slider {
    position: relative;
    height: 456px;
}

.slider__item {
    width: 335px;
    height: 402px;
    object-fit: cover;
    border-radius: 35px;
    margin-top: 27px;
}

.slider .center .slider__item{
    margin-top: 0;
    width: 380px;
    height: 456px;
    transition: 0.2s ease-in;
}

.slider__btn{
    position: absolute;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);

    display: block;
    width: 68px;
    height: 68px;
    background: linear-gradient(129.54deg, #FF7B4E 15.57%, #FF584E 95.03%), #8B8B8B;
    border-radius: 34px;

    display: flex;
    align-items: center;
}

.slider__btn--prev{
    left: -27px;
    padding-left: 26px;
    justify-content: flex-start;
}

.slider__btn--next{
    right: -27px;
    padding-right: 26px;
    justify-content: flex-end;
}

/* Customers */

.customers{
    margin-bottom: 233px;
}

.customers__row {
    display: flex;
    column-gap: 68px;
}

.customers__image {
    max-width: 478px;
}

.customers__image img{
    border-radius: 60px;
}

.customers__title {
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 35px;
    max-width: 565px;
}

.review{
    max-width: 491px;
}

.review__client {
    display: flex;
    column-gap: 33px;
    align-items: center;
    margin-bottom: 60px;
}

.review__client-image {
    width: 134px;
    height: 134px;

    background: #FF794E;
    border-radius: 50%;
    align-items: center;
    overflow: hidden;
}

.review__client-text-name {
    font-weight: 500;
    font-size: 33px;
    margin-bottom: 10px;
}

.review__client-text-country {
    font-weight: 400;
    font-size: 25px;
    color: var(--secondary-text);
}

.review__text {
    font-weight: 500;
    font-size: 22px;
    color: var(--secondary-text);
    margin-bottom: 30px;
}

/*Prepare*/

.prepare{
    margin-bottom: 135px;
}

.prepare__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 581px;
    padding: 40px 15px;

    text-align: center;
    background: #FFFFFF;
    border-radius: 60px;
}

.prepare__content::after,
.prepare__content::before{
    content: "";
    position: absolute;
    width: 63px;
    height: 83px;
}

.prepare__content::before{
    left: 74px;
    bottom: 56px;
    background-image: url("./../img/cta/cta-el-01.svg");
}

.prepare__content::after{
    top: 74px;
    right: 80px;
    background-image: url("./../img/cta/cta-el-02.svg");
}

.prepare__title {
    font-weight: 500;
    font-size: 45px;
    margin-bottom: 30px;
}

.prepare__text {
    font-weight: 400;
    font-size: 30px;
    color: var(--secondary-text);
    margin-bottom: 60px;
}

.btn--prepare{
    padding: 25px 55px;
    font-size: 20px;
    border-radius: 27px;
}

/* Subscribe */

.subscribe {
    margin-bottom: 106px;
}

.subscribe__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.subscribe__title {
    max-width: 494px;
    font-weight: 600;
    font-size: 55px;
    margin-bottom: 60px;
}

.subscribe-form {
    padding: 12px 15px 12px 46px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #C4C4C4;
    border-radius: 35px;

    display: flex;
    column-gap: 20px;
}

.subscribe-form__input {
    font-size: 24px;
    font-weight: 500;
}

.subscribe-form__input::placeholder {
    color: var(--secondary-text);
}

.btn--subscribe {
    padding: 34px 87px;
    font-size: 25px;
    font-weight: 600;
    border-radius: 35px;
}

/* Footer */

.footer{
    margin-bottom: 74px;
}

.footer a{
    color: var(--secondary-text);
}

/* Burger menu */

.menu-icon-wrapper {
    --icon-width: 35px;
    --icon-heigth: 3px;

    width: var(--icon-width);
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-icon{
    position: relative;
    width: var(--icon-width);
    height: var(--icon-heigth);
    background-color: #FFFFFF;
}

.menu-icon::after,
.menu-icon::before{
    position: absolute;
    left: 0;
    content: "";
    width: var(--icon-width);
    height: var(--icon-heigth);

    background-color: #FFFFFF;
    transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}

.menu-icon::after{
    top: 10px; 
}

.menu-icon::before{
    top: -10px; 
}

.menu-icon.menu-icon-active{
    background-color: transparent;
}

.menu-icon.menu-icon-active::after{
    transform: rotate(-45deg);
    top: 0;
    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}

.menu-icon.menu-icon-active::before{
    transform: rotate(45deg);
    top: 0;
    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}


/* Popup menu */

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease 0s;
}

.popup.open{
    opacity: 1;
    visibility: visible;
}

.popup__body {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;

}

.popup__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(132.05deg, #428E5F -17.38%, #112120 78.4%), #204434;
    max-width: 480px;
    border-radius: 20px;
    padding: 30px 50px;
}

.popup__close{
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 20px;
    color: #FFFFFF;
    cursor: pointer;
}

.popup_title {
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 20px;
}

.form-registration {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-registration  > *:not(:last-child) {
    margin-bottom: 20px;
}

.form-registration__input {
    min-width: 10px;
    padding: 10px 15px;
    border: 1px solid #000000;
    background-color: #ffffff;
    border-radius: 5px;

}

.btn--form{
    padding: 13px 43px;
    color: #FFFFFF !important;
    border-radius: 10px;
}

.no-scroll{
    overflow-y: hidden;
}

/* Media */

@media (max-width: 1269px) {
    .container-right{
        padding-left: 20px
    }
}

@media (max-width: 1200px) {
    .destinations__slider{
        width: 900px;
    }
}

@media (max-width: 1020px) {
    .nav__list--header ul{
        display: none;
    }

    .nav__login--header ul{
        display: none;
    }

    .nav__burger{
        display: block;
    }

    .nav--mobile{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99;

        flex-direction: column;
        align-items: center;

        padding-top: 40px;
        padding-bottom: 70px;
        background: linear-gradient(182.05deg, #4b9165 -17.38%, #112120 78.4%), #204434;

        transition: all .5s ease-in-out;
    }
    
    .nav--mobile .logo{
        font-size: 35px;
    }

    .nav--mobile .nav__list ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 40px;

        font-size: 20px;
    }

    .nav__list a.active::after,
    .nav__list a:hover::after {
       display: none;
    }

   .nav--mobile .nav__login ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 40px;

        font-size: 20px;  
    }

    .nav--mobile .nav__burger{
        position: fixed;
        top: 45px;
        right: 60px;   
    }

    .header__image img{
        top: -180px;
        right: -270px;
        width: 894px;
        height: 940px;
    }

    .header__image::after{
        right: -130px;
    }

    .header__image--element::after,
    .header__image::before {
        right: 350px;
    }
    
    .header__image--element::before{
        right: 0;
    }

    /* Destinations */

    .destinations__slider{
        width: 600px; 
    }

    .slider .slider__item {
        width: 223px;
        height: 268px;
        margin-top: 47px;
    }
    
    .slider .center .slider__item{
        margin-top: 20px;
        width: 254px;
        height: 304px;
    }
        
    .slider__btn {
        top: 40%;
    }

    /* Customers */

    .customers__title {
        font-size: 35px;
        margin-bottom: 15px;
    }

    .review__client-text-name {
        font-size: 28px;
        margin-bottom: 5px;
    }

    .review__client-text-country {
        font-size: 22px;
    }
    
    .review__client {
        margin-bottom: 30px;
    }

    .review__text{
        font-size: 18px;
        margin-bottom: 15px;
        max-width: 400px;
    } 
}

@media (max-width: 850px) {
    .container-right{
        padding-right: 10px;
    }
    
    /* Header */

    .header{
        padding-top: 28px;
        min-height: unset;
    }
    .header__row{
        flex-direction: column;
    }

    .header__image img{
        position: static;
        width: 80%;
        height: auto;
    }

    .header__image::after{
        top: 500px;
        right: 640px;
    }
    
    .header__image::before {
        top: 160px;
        right: 680px;
    }
    
    .header__image--element::after{
        top: 160px;
        right: 90px;
    }
    
    .header__image--element::before{
        top: 500px;
        right: 100px
    }

    .header__title{
        font-size: 32px;
        margin-bottom: 20px;
    }

    .header__text{
        font-size: 18px;
        margin-bottom: 20px;
        max-width: 350px;
    }
    
    .header__badge {
        padding: 10px 24px;
        font-size: 16px;
    }

    .btn--header{
        font-size: 20px;
        padding: 20px 30px;
        border-radius: 18px;
    }

    /* Destinations */

    .destinations {
        margin-bottom: 25px;
    }

    .destinations__row {
        flex-direction: column;
        row-gap: 20px;
    }

    .destinations__slider{
        width: 100%; 
    }

    .destinations__title{
        font-size: 35px;
        margin-bottom: 10px;
    }

    .destinations__title span {
        font-size: 22px;
    }

    .destinations__text{
        font-size: 18px;
        margin-bottom: 25px;
    }

    .btn--destinations {
        padding: 20px 35px;
        font-size: 15px;
        border-radius: 20px;
    }

    .slider {
        height: 415px;
    }

    .slider__btn {
        width: 58px;
        height: 58px;
    }

    .slider__btn--prev{
        left: -10px;
        padding-left: 21px;
    }
    
    .slider__btn--next{
        right: -10px;
        padding-right: 21px;
    }  
    
    /* Customers */

    .customers {
        margin-bottom: 100px;
    }

    .customers__title{
        font-size: 26px;

    }
    .customers__row {
        column-gap: 30px;
    }

    .review__client-image {
        width: 104px;
        height: 104px;
    }

    .review__client{
        column-gap: 10px;
    }

    .review__client-text-name {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .review__client-text-country {
        font-size: 18px;
    }

    .review__client {
        margin-bottom: 30px;
    }

    .review__text{
        font-size: 18px;
        margin-bottom: 15px;
        max-width: 400px;
    } 

    .review__client-text-name {
        font-size: 24px;
        margin-bottom: 5px;
    }

    /* Prepare */

    .prepare {
        margin-bottom: 100px;
    }
    
    .prepare__content{
        border-radius: 40px;
    }
    .prepare__title {
        font-size: 35px;
        margin-bottom: 20px;
    }

    .prepare__text {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .btn--prepare {
        padding: 20px 35px;
        font-size: 15px;
        border-radius: 20px;
    }

    /* Subscribe */

    .subscribe__title {
        font-size: 35px;
        margin-bottom: 30px;
    }

    .subscribe-form {
        padding: 10px 13px 10px 48px;
        border-radius: 27px;
        column-gap: 18px;
    }

    .subscribe-form__input {
        font-size: 18px;
    }

    .btn--subscribe {
        padding: 20px 30px;
        font-size: 20px;
        border-radius: 27px;
    }

    /* Footer */

    .footer {
        margin-bottom: 24px;
    }

    .nav--footer{
        flex-direction: column-reverse;
        row-gap: 20px
    }

    .nav__login--footer{
        display: none;
    }

    .nav__list ul {
        column-gap: 60px;
    }
}

@media (max-width: 700px) {
    .header__image::after,
    .header__image::before,
    .header__image--element::after,
    .header__image--element::before{
        display: none;
    }
}

@media (max-width: 650px){
    .customers__row {
        flex-direction: column-reverse;
        row-gap: 45px;
    }

    .customers__image {
        max-width: 408px;
    }
  
}

@media  (max-width: 500px){
    .destinations__slider{
        width: 300px; 
        margin: 0 auto;
    }
  
    .slider .center .slider__item{
       width: auto;
       padding-left: 10px;
    }
        
    .slider__btn--prev{
        left: -12px;
        padding-left: 21px;
    }
    
    .slider__btn--next{
        right: 10px;
        padding-right: 21px;
    }  
    
}

@media (max-width: 460px) {
    .nav {
        column-gap: 50px;
    }
    .nav--mobile .nav__burger {
        top: 20px;
        right: 20px;
    }

    .nav--mobile .nav__login ul,
    .nav--mobile .nav__list ul {
        row-gap: 25px;
    }


    .header__title{
        font-size: 26px;
        margin-bottom: 20px;
    }

    .header__text{
        font-size: 16px;
        margin-bottom: 20px;
        max-width: 350px;
    }
    
    .header__badge {
        padding: 8px 22px;
        font-size: 14px;
    } 

    /* Prepare */
  
    .prepare__content{
        border-radius: 40px;
    }
    .prepare__title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .prepare__text {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .btn--prepare {
        padding: 20px 35px;
        font-size: 15px;
        border-radius: 20px;
    }

    .prepare__content::after {
        top: 32px;
        right: 40px;
    }

    .prepare__content::before {
        left: 35px;
        bottom: 36px;
    }

    /* Subscribe */

    .subscribe__title {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .subscribe-form {
        flex-direction: column;
        padding: 10px 13px 20px 20px;
        row-gap: 15px;
    }

    .subscribe-form__input {
        font-size: 16px;
        padding: 20px;
        background-color: #d4d4d41a;
    }

    /* Footer */

    .nav__list {
        font-size: 14px;
    }

    .nav__list ul {
        column-gap: 32px;
    }
}