@media (max-width: 1107px) {
    .select__city{
        gap: 10px;
    }

    .switch__city{
        width: 40px;
        height: 40px;
    }

    .select__city__top,
    .select__city__bottom{
        width: 48%;
        flex-direction: column;
    }

    .items__city__bottom,
    .select__passenger,
    .select__city__bottom .submit__button{
        width: 100%;
    }

    .select__city__bottom .submit__button{
        height: 47px;
    }

    .select__city__bottom{
        gap: 10px;
    }

    .switch__city{
        left: auto;
        right: 20px;
        transform: translate(0%, -50%);
    }

    .travel__info.active{
        margin-top: 175px;
    }

    
}
@media (max-width: 1024px) {
    .thumb {
        width: 48%; /* Для планшетів два зображення в рядку */
    }

    .more__photo__btn {
        font-size: 0.9rem; /* Зменшення шрифта кнопки на планшетах */
    }
}

@media (max-width: 1022px) {
    .contact__info{
        max-width: 1170px;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 25px;
        justify-content: space-between;
    }

    .contact__map{
        max-width: 1170px;
        width: 100%;
        height: 400px;
    }
    
}

@media (max-width: 938px) {
    .travel__info__top h2{
        justify-content: center;
        text-align: center;
    }
}


@media (max-width: 853px) {
    .route__section  .route__map{
        width: 100%;
    }
}

@media (max-width: 781px) {
    .country__info{
        justify-content: space-evenly;
    }
}

@media (max-width: 768px) {
    .header__logo{
        max-width: 100px;
    }

    .header__burger{
        margin-right: 20px;
        display: flex;
    }

    .header__content{
        justify-content: space-between;
    }

    /* Початковий стан меню */
    .header__menu {
        position: relative;
        display: none;
        opacity: 0; /* Меню спочатку невидиме */
        transform: translateY(-20px); /* Меню знаходиться трохи вище, щоб додати ефект появи */
        transition: all 0.3s ease; /* Плавна анімація для елементів */
    }

    /* Стан меню після додавання класу "open" */
    .header__menu.open {
        padding: 20px 0px;
        width: 100%;
        height: 100vh;
        background-color: #2b2b2b;
        display: flex;
        position: absolute;
        left: 0px;
        top: 60px;
        justify-content: center;
        opacity: 1; /* Меню стає видимим */
        transform: translateY(0); /* Меню рухається до своєї звичайної позиції */
        transition: all 0.3s ease; /* Плавна анімація для елементів */
        overflow: auto;
    }

    /* Стан для елементів списку меню */
    .header__menu.open ul {
        text-align: center;
        flex-direction: column;
        gap: 5px;
        transition: all 0.3s ease; /* Плавна анімація для елементів */
        font-size: 20px;
    }

    /* Стан для самого бургер-меню (щоб воно було видно) */
    .header__menu.open ul li {
        margin: 10px 0; /* Відстань між пунктами меню */
        opacity: 1;
        transform: translateY(10px); /* Зсуваємо елементи вниз */
        transition: all 0.3s ease; /* Плавна анімація для елементів */
    }


    .banner__section{
        padding: 1% 3%;
    }

    .banner__content{
        margin-top: -50px;
    }

    .country__info{
        justify-content: space-evenly;
    }

    .country__select{
        margin-top: 5px;
    }

    .country__list__top{
        display: block;
    }

    .country__list__bottom{
        flex-wrap: wrap;
    }

    .country__list__bottom .country__flag{
        max-width: 1170px;
        width: 100%;
    }

    .country__list__bottom .country__flag img{
        width: 100%;
        height: 150px;
    }

    .country__list__bottom .country__info {
        display: flex; /* Початковий display для елемента */
        max-height: 0;  /* Спочатку максимальна висота 0, щоб приховати */
        opacity: 0;  /* Початкова прозорість */
        overflow: hidden;  /* Приховує все, що виходить за межі */
        transform: translateY(-20px); /* Початкове зсування елемента вгору */
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Плавні переходи для висоти, прозорості та позиції */
    }
    
    .country__list__bottom .country__info.open {
        max-height: 500px; /* Висота, яка дозволяє вмісту відображатися. Можна змінити залежно від розміру контенту */
        opacity: 1; /* Повна прозорість */
        transform: translateY(0); /* Відновлення позиції елемента */
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Плавні переходи для висоти, прозорості та позиції */
    }

    .country__map {
        height: 75vh;
    }
    
    .country__map .map {
        height: 75vh;
    }

    .our__services{
        margin: 80px 0px 0px 10px;
    }

    .about__us{
        margin: 80px 0px 10px 0px;
    }

    .contacts__section{
        margin: 80px 0px 0px 10px;
    }

    .thumb {
        width: 100%; /* Один елемент в рядку на мобільних */
    }

    .more__photo__btn {
        font-size: 1rem; /* Збільшення шрифта кнопки на мобільних */
    }

    /* Для мобільних: відображати зображення в один стовпець */
    .row {
        flex-direction: column;
        gap: 20px; /* Відстань між зображеннями у стовпці */
    }
}

@media (max-width: 566px) {
    .travel__info__button button{
        max-width: 1170px;
        width: 100%;
        height: 47px;
        margin: 0px;
    }
}

@media (max-width: 555px) {
    .select__city__top,
    .select__city__bottom{
        width: 100%;
    }

    .travel__info.active{
        margin-top: 280px;
    }

    .travel__info__left,
    .travel__info__right{
        max-width: 1170px;
        width: 100%;
        text-align: center;
    }

    .travel__info__left{
        border-bottom: 2px solid #db1d00;
    }

    .travel__info__right{
        padding: 10px 0px 10px;
    }
}

@media (max-width: 481px) {
    .country__list__bottom .country__info{
        justify-content: center;
    }

    .row {
        flex-direction: column; /* Відображення зображень в один стовпець */
    }

    .thumb {
        width: 100%; /* Зображення в один стовпець */
    }

    .more__photo__btn {
        font-size: 0.9rem; /* Зменшення шрифта кнопки */
    }
}

@media (max-width: 478px){
    .footer__content .footer__content__top{
        text-align: center;
        justify-content: center;
    }
    
}

@media (max-width: 472px) {
    .contact__info{
        justify-content: center;
        text-align: center;
    }

    .contacts h1,
    .contacts__tabs,
    .contact__info .contact__info__items{
        width: 100%;
        margin: 0px;
        text-align: center;
        justify-content: center;
    }

}

@media (max-width: 379px) {
    .country__info{
        justify-content: center;
        text-align: center;
    }

    .country__list__bottom.second{
        flex-direction: row;
    }
}