@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* Обнулення стилів для всіх елементів */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    list-style: none;
}

/* Стилі для заголовків */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: inherit;
}

/* Стилі для абзаців */
p {
    margin: 0;
    padding: 0;
}

/* Обнулення для списків */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Таблиці */
table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
th, td {
    padding: 0;
    text-align: left;
}

/* Форми */
form, input, button, select, textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

/* Зображення */
img {
    border: 0;
    display: block;
    max-width: 100%;
}

/* Посилання */
a {
    text-decoration: none;
    color: inherit;
}

/* Блоки */
div, span {
    margin: 0;
    padding: 0;
}

/* Елементи введення типу checkbox/radio */
input[type="checkbox"],
input[type="radio"] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html, body {
    height: 100%; /* Видаліть це, якщо не потрібно для інших цілей */
    font-family: 'Roboto', sans-serif;
    margin: 0; /* Додайте це для уникнення зайвих відступів */
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% висоти viewport */
    margin: 0;
}

body.menu-open{
    overflow: hidden;
}

.leaflet-touch .leaflet-control-attribution{
    display: none;
}

main {
    flex: 1;
}

/* wrapper */
.wrapper{
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
    height: 100%;
}

/* header */
header{
    max-width: 1920px;
    width: 100%;
    background-color: #db1d00;
    height: auto;
    padding: 15px 3% 15px 3%;
    position: fixed;
    z-index: 9999;
}

.header__content{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;

    max-width: 1700px;
    width: 100%;
    margin: 0 auto;

    align-items: center;
    justify-content: space-around;
}

/* header logo */
.header__logo{
    max-width: 130px;
    width: 100%;
}

.header__logo img{
    display: block;
    width: 100%;
}

/* header menu */
.header__menu{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.header__menu nav ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;
    font-size: 18px;
    color: white;
    font-weight: 600;
    line-height: 1.5em;
}

.header__menu nav ul li a {
    color: #ffffff; /* білий колір для звичайного посилання */
    text-decoration: none; /* прибираємо стандартне підкреслення */
    position: relative; /* Необхідно для розташування псевдоелемента */
}

/* Стиль для посилання на наведенні */
.header__menu nav ul li a:hover {
    color: #d4d4d4; /* темно-синій колір при наведенні */
}

/* Стиль для псевдоелемента, який буде створювати лінію під посиланням */
.header__menu nav ul li a::after {
    content: ''; /* Безконтентний псевдоелемент */
    position: absolute; /* Абсолютне позиціювання */
    bottom: -2px; /* Розташування лінії трохи нижче тексту */
    left: 0;
    width: 100%; /* Лінія має бути такої ж ширини, як посилання */
    height: 2px; /* Висота лінії */
    background-color: #d4d4d4; /* Колір лінії (можна змінити на бажаний) */
    transform: scaleX(0); /* Спочатку лінія не показується */
    transform-origin: bottom right; /* Початкове місце розширення лінії */
    transition: transform 0.3s ease; /* Плавне розширення лінії */
}

/* Анімація для псевдоелемента на наведення */
.header__menu nav ul li a:hover::after {
    transform: scaleX(1); /* Розширюємо лінію на всю ширину при наведенні */
    transform-origin: bottom left; /* Напрямок розширення лінії */
}

/* header contant */
.header__contact{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    align-items: center;
}

.header__contact a{
    font-size: 24px;
    color: #ffffff;
}

.header__contact a:hover{
    color: #d4d4d4;
}

.header__burger {
    width: 30px;
    height: 30px;
    position: relative; /* Додаємо позиціонування контейнера для правильного позиціювання ліній */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header__burger span {
    position: relative; /* Важливо додати для span, щоб псевдоелементи могли правильно позиціонуватися */
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Перша лінія, стандартний вигляд */
.header__burger span:before {
    content: ''; /* Не забувайте додавати content */
    position: absolute;
    top: -8px; /* Розташування першої лінії */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Третя лінія, розташована знизу */
.header__burger span:after {
    content: ''; /* Не забувайте додавати content */
    position: absolute;
    top: 8px; /* Розташування третьої лінії */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Анімація для бургер-меню в відкритому стані */
.header__burger.open span {
    background-color: transparent; /* Забираємо колір лінії, щоб не залишалося */
}

/* Лінія перед */
.header__burger.open span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    transform: rotate(45deg); /* Поворот на 45 градусів */
    transition: all 0.3s ease;
}

/* Лінія після */
.header__burger.open span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    transform: rotate(-45deg); /* Поворот на -45 градусів */
    transition: all 0.3s ease;
}


/* Index.html */
/* banner section */
.banner__section{
    max-width: 1920px;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/home.jpg);
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7% 10% 5% 10%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner__content{
    max-width: 650px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.banner__content h1{
    font-size: clamp(40px, 5vw + 10px, 62px);
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: -0.36px;
}

.banner__content h1 span{
    color: #db1d00;
}

.banner__content p{
    color: #ffffff;
    font-size: clamp(18px, 2vw + 10px, 26px);
    line-height: 1.5em;
    letter-spacing: -0.36px;
    margin: 10px 0px 20px 0px;
}

.banner__content button{
    color: #fff;
    background-color: #db1d00;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: clamp(14px, 1vw + 10px, 18px);
    font-weight: 500;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid #db1d00;
    padding: 10px 20px;
    gap: 5px;
}

.banner__content button i{
    font-weight: 500;
}

.banner__content button:hover,
.banner__content button:active{
    border: 2px solid #fff;
}

/* benefits  */
.benefit__section{
    max-width: 1170px;
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    padding: 20px 30px;
    margin: -100px auto 50px;
    z-index: 2;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.benefit__title{
    margin-bottom: 15px;
}

.benefit__title h2{
    font-size: clamp(18px, 2vw + 10px, 26px);
    font-weight: 600;
    line-height: 1.5em;
    color: #505050;
}

.benefit__section .benefit__items{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: start;
    gap: 10px;
}

.benefit__section .benefit__item{
    max-width: 240px;
    width: 100%;
    text-align: center;
    padding: 10px;
    min-height: 90px;
    border-radius: 5px;
    color: #505050;
}

.benefit__item i{
    font-size: 28px;
    color: #707070;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.benefit__item h3{
    font-size: 18px;
    margin: 0px 0px 5px 0px;
    line-height: 1.5em;
}

.benefit__item p{
    font-size: 16px;
    line-height: 1.5em;
    color: #707070;
}

/* route section */
.route__section {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0px;
}

.route__section .route__content{
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    padding: 0px 30px;
}

.route__section  .route__map{
    margin-top: 20px;
    width: 100%;
    height: 250px; 
    overflow: hidden; 
}

.route__section  .map{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{
    display: none;
}

.route__info{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.route__section h2{
    font-size: clamp(22px, 2vw + 10px, 26px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.route__section p{
    font-size: clamp(16px, 1vw + 10px, 20px);
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #707070;
}

.route__section button{
    font-size: clamp(14px, 1vw + 10px, 16px);
    line-height: 1.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #707070;;
    padding: 5px 0px;
    text-decoration: solid;
    color: #707070;
}

.route__section button:hover,
.route__section button:active{
    border-bottom: 1px solid #505050;
    color: #505050;
}

.route__section button i{
    margin: 1px 0px 0px 0px;
}

/* country section */
.country__section{
    max-width: 1170px;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0px;
}

.country__content{
    padding: 0px 30px;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    flex-direction: column;
}

.country__list{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.country__list__top{
    display: none;
    padding: 20px 0px 0px;
}

.country__list__top button{
    color: #505050;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: clamp(14px, 1vw + 10px, 16px);
}

.country__list__top i{
    font-size: clamp(16px, 1vw + 10px, 20px);
    color: #505050;
    transition: transform 0.3s ease;

}

.country__list__bottom{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px 0px 10px;
    gap: 20px;
    justify-content: space-between;
    align-items: start;
}

.country__list__bottom.second{
    padding: 20px 0px;
    border: 0px;
    flex-direction: row-reverse;
}

.country__list__bottom .country__flag{
    max-width: 150px;
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 5px;
}

.country__list__bottom .country__flag img{
    width: 100%;
    height: 100%;
    display: block;
}

.country__list__bottom .country__info{
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.city__list{
    max-width: 200px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.city__list h2{
    font-size: 20px;
    color: #505050;
    margin: 0px 0px 10px 0px;
    line-height: 1.5em;
}

.city__list ul li{
    margin: 0px 0px 5px 0px;
}

.city__list ul li a{
    position: relative;
    line-height: 1.5em;
    color: #707070;
    font-size: 16px;
}

.city__list ul li a:hover{
    text-decoration: solid;
}

.city__list ul li a:hover {
    color: #505050;
}

.city__list ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #505050;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.city__list ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.country__content hr {
    width: 100%;
    text-align: center;
    background-color: #d4d4d4;
    height: 1px;
    border: none; /* додатково додаємо це, щоб прибрати стандартний бордер hr */
}
/* Index.html */


/* Route.html */
.route__country__select {
    margin: 60px auto 0px;
    max-width: 1920px;
    width: 100%;
    height: auto;
}

.route__country__select__content {
    max-width: 1920px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.country__select {
    position: absolute;
    margin-top: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    max-width: 1170px;
    width: 100%;
    padding: 20px 3%;
    border-radius: 10px 10px 0px 0px;
    z-index: 401;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.country__select form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    color: #707070;
    align-items: center;
}

.select__city__top,
.select__city__bottom{
    width: 49%;
}

.select__city__bottom{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.select__city__bottom .submit__button
{
    width: 40%;
}

.select__city__bottom button{
    width: 100%;
    height: 100%;
}

.select__city__bottom button:hover{
    border: 1px solid #db1d00;
    background-color: #ffffff;
    color: #db1d00;
}

.country__map {
    display: block;
    max-width: 1920px;
    width: 100%;
    height: 100vh;
}

.country__map.disabled{
    display: none;
}

.country__map .map {
    height: 100vh;
}

/* Стилі для select__city */
.select__city {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

.switch__city{
    height: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 999;
    color: #707070;
}

.switch__city button{
    color: #707070;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.items__city {
    position: relative;
    flex: 1;
}

.items__city__top {
    position: absolute;
    top: -10px; /* Піднімаємо заголовок над лінією бордера */
    left: 20px; /* Зміщуємо назву вліво */
    background-color: #fff; /* Фон, щоб перекривати бордер */
    padding: 0 10px; /* Відступи для тексту */
    font-weight: bold;
    font-size: 16px;
    color: #707070;
}

.items__city__bottom {
    border: 1px solid #707070;
    border-radius: 5px;
    padding: 5px 20px; /* Підвищуємо внутрішні відступи */
    display: flex;
    align-items: center;
}

.items__city__bottom i {
    color: #707070;
    font-size: 18px;
}

.items__city__bottom input {
    font-size: 16px;
    padding: 8px 10px; /* Збільшуємо відступи для зручності */
    color: #707070;
    border: none;
    outline: none;
    flex: 1;
}

.suggestions-box {
    position: absolute;
    top: 45px;
    left: 0;
    background-color: white;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

/* Контейнер випадаючого списку */
#passengerCount-suggestions {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 100%;
    display: none;
    /* Нова властивість - автоматична висота */
    max-height: 80vh; /* 80% від висоти вікна перегляду */
    overflow-y: auto; /* Дозволити скрол тільки при необхідності */
}

/* Загальний блок опцій */
.passenger-option {
    padding: 12px; /* Трохи зменшимо відступи */
}

/* Блок для кожного типу пасажира */
.passenger-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* Зменшимо відстань між рядками */
    font-size: 14px;
    line-height: 1.5em;
}

/* Лічильник (+/-) */
.passenger-counter {
    display: flex;
    align-items: center;
    gap: 8px; /* Зменшимо відстань між елементами */
}

/* Кнопки +/- */
.passenger-counter button {
    width: 24px; /* Зменшимо розмір кнопок */
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px; /* Зменшимо розмір шрифту */
    color: #707070;
    line-height: 1.5em;
}

.passenger-counter button:hover,
.passenger-counter button:active,
.passenger-counter button:visited{
    border: none;
    color: #707070;
}

/* Кнопка "Готово" */
.passenger-confirm {
    width: 100%;
    padding: 8px; /* Зменшимо відступи */
    background: #db1d00;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px; /* Зменшимо відступ зверху */
    font-size: 13px; /* Зменшимо розмір шрифту */
}

.passenger-confirm:hover,
.passenger-confirm:active{
    color: #db1d00;
    background-color: #fff;
    border: 1px solid #db1d00;
}

/* Стилі для select__passenger */
.select__passenger {
    position: relative;
    width: 60%;
}

.select__passenger__top {
    position: absolute;
    top: -10px; /* Піднімаємо заголовок над лінією бордера */
    left: 20px; /* Зміщуємо назву вліво */
    background-color: #fff; /* Фон, щоб перекривати бордер */
    padding: 0 10px; /* Відступи для тексту */
    font-weight: bold;
    font-size: 16px;
    color: #707070;
}

.select__passenger__bottom {
    border: 1px solid #707070;
    border-radius: 5px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.select__passenger__bottom i {
    color: #707070;
    font-size: 18px;
}

.select__passenger__bottom input {
    font-size: 16px;
    padding: 8px 10px;
    color: #707070;
    border: none;
    outline: none;
    flex: 1;
}

.items__city__bottom input::placeholder, .select__passenger__bottom input::placeholder {
    color: #707070;
}

.submit__button button{
    background-color: #db1d00;
    color: #fff;
    border: 1px solid #db1d00;
    border-radius: 5px;
    padding: 5px 15px;
}

.items__city__bottom.error {
    border: 1px solid red !important;
    border-radius: 4px;
}

.items__city__bottom.error i {
    color: red !important;
}

.items__city__bottom.error input {
    color: red !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.travel__info{
    display: none;
    max-width: 1170px;
    width: 100%;
    margin: 0px auto;
    padding: 0px 5%;
}

.travel__info.active{
    display: flex;
    flex-direction: column;
    margin: 150px auto 50px;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}


.travel__info__top{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    color: #db1d00;
    padding: 20px 0px;
}

.travel__info__top h2{
    max-width: 335px;
    width: 100%;
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: 600;
    line-height: 1.5em;
    color: #db1d00;
    display: flex;
    align-items: center;
}

.fromCityInfo{
    display: flex;
    justify-content: left;
}

.toCityInfo{
    display: flex;
    justify-content: right;
}

.travel__info__top hr{
    width: 100%;
    text-align: center;
    height: 3px;
    border: none; /* додатково додаємо це, щоб прибрати стандартний бордер hr */
    border-radius: 5px;
    margin: 0px 20px;
    background-color: #db1d00;
}

.travel__info__bottom{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    margin: 10px 0px;
    line-height: 1.5em;
    color: #505050;
}

.travel__info__left,
.travel__info__right{
    max-width: 250px;
    width: 100%;
    overflow: hidden;
    padding: 0px 0px 10px;
}


.travel__info__left{
    text-align: left;
}

.travel__info__right{
    text-align: right;
}

.travel__info__left h3,
.travel__info__right h3{
    font-size: clamp(14px, 1vw + 10px, 18px);
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #707070;
}

.travel__info__left h4,
.travel__info__right h4{
    font-size: clamp(14px, 1vw + 10px, 18px);
    line-height: 1.5em;
    margin: 20px 0px 0px 0px;
    color: #707070;
}


.travel__info__button{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0px 0px 20px;
}

.travel__info__button button{
    max-width: 250px;
    width: 100%;
    background-color: #db1d00;
    color: #fff;
    border: 1px solid #db1d00;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: clamp(14px, 1vw + 10px, 18px);
}

.travel__info__button button:hover{
    background-color: #fff;
    color: #db1d00;
    border: 1px solid #db1d00;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 998;
    display: none;
}

.send__info {
    display: none;
    max-width: 320px;
    width: 100%;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.send__info.active {
    display: flex;
}

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

.send__info__form h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #db1d00;
}

.send__info__form h3 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #707070;
}

.send__info__form h4 {
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
    color: #707070;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
}

.form-group input {
    width: 100%;
    padding: 15px 10px 5px 10px;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    background-color: transparent;
    outline: none;
    box-sizing: border-box;
    color: #333;
    transition: border-color 0.3s ease;
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 16px;
    color: #a0a0a0;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Стан при фокусі */
.form-group input:focus {
    border-bottom: 2px solid #db1d00;
}

.form-group input:focus + label {
    top: 0;
    font-size: 12px;
    color: #db1d00;
}

/* Стан з текстом, але без фокусу */
.form-group input:not(:placeholder-shown):not(:focus) + label {
    top: 0;
    font-size: 12px;
    color: #707070;
}

/* Помилковий стан (якщо потрібно) */
.form-group input.error {
    border-bottom: 2px solid #ff0055;
}

.form-group input.error + label {
    color: #ff0055;
}

.error-message {
    color: #db1d00;
    font-size: 12px;
    display: none;
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
}

/* Індикатор успішної валідації (галочка) */
.success-icon {
    color: #28a745;
    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

/* Стилі для невалідного поля */
.form-group input.error {
    border-bottom: 2px solid #db1d00;
}

.form-group input.error + label {
    color: #db1d00;
}

/* Стилі для валідного поля */
.form-group input.valid {
    border-bottom: 2px solid #28a745;
}

.form-group input.valid + label {
    color: #28a745;
}

.form-group input.valid ~ .success-icon {
    display: block;
}

/* Анімація помилки */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.form-group input.error {
    animation: shake 0.5s ease-in-out;
}

/* Стилі для випадаючого списку країн */
.country-code {
    position: absolute;
    left: 0;
    top: -25px;
    width: 120px;
    padding: 5px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1;
    background: white;
}

/* Група для телефону (з кодом країни) */
.phone-group {
    position: relative;
    padding-top: 25px;
    margin-bottom: 25px;
}

.orderTicket {
    width: 100%;
    padding: 12px;
    background-color: #db1d00;
    color: white;
    border: 1px solid #db1d00;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.orderTicket:hover {
    background-color: white;
    color: #db1d00;
    border: 1px solid #db1d00;
}

.orderTicket:active {
    background-color: white;
    color: #db1d00;
    border: 1px solid #db1d00;
}
/* Route.html */


/* Service.html */
.our__services{
    max-width: 1170px;
    width: 100%;
    margin: 100px auto 50px;
    padding: 0px 5%;
    text-align: justify;
}

.our__services h1{
    font-size: clamp(22px, 2vw + 10px, 34px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.our__services p{
    font-size: clamp(16px, 1vw + 10px, 20px);
    line-height: 1.5em;
    margin: 0px 0px 20px 0px;
    color: #707070;
}

.our__services p span{
    font-weight: bold;
    color: #db1d00;
}

.our__services h3{
    font-size: clamp(18px, 2vw + 10px, 26px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.our__services ol,
.our__services ul{
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 20px;
    font-size: clamp(14px, 1vw + 10px, 18px);
    line-height: 1.5em;
    color: #707070;
}
.our__services ol li,
.our__services ul li{
    margin: 0px 0px 15px 0px;
    color: #707070;
}

.our__services ol li strong,
.our__services ul li strong{
    font-weight: bold;
    color: #db1d00;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.our__services ol li strong i,
.our__services ul li strong i{
    font-size: clamp(16px, 1vw + 10px, 18px);
    color: #db1d00;
    margin-right: 5px;
    line-height: 1.5em;
}

.our__services p a {
    color: #db1d00;
    font-weight: bold;
    position: relative; /* важливо для позиціонування псевдоелемента */
    text-decoration: none; /* прибираємо стандартне підкреслення */
}

.our__services p a:hover{
    color: #ff2200;
}

.our__services p a::after {
    content: ""; /* створюємо порожній контент */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* полоса буде мати ширину 0 на початку */
    height: 2px; /* висота полоски */
    background-color: #ff2200; /* колір полоски */
    transform: scaleX(0); /* спочатку полоса буде невидимою */
    transform-origin: bottom right; /* встановлюємо точку початку анімації */
    transition: transform 0.3s ease-out; /* плавна анімація для появи полоски */
}

.our__services p a:hover::after {
    transform: scaleX(1); /* при наведенні полоса буде ширшою */
    transform-origin: bottom left; /* точка початку анімації змінюється на ліву */
}

.our__services p b{
    color: #db1d00;
}
/* Service.html */

/* About Us */
.about__us{
    max-width: 1170px;
    width: 100%;
    margin: 100px auto 0px;
    padding: 0px 3%;
    text-align: justify;
}

.about__us.part__two{
    margin: 20px auto 50px;
}

.about__us h1{
    font-size: clamp(22px, 2vw + 10px, 34px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.about__us p{
    font-size: clamp(16px, 1vw + 10px, 20px);
    line-height: 1.5em;
    margin: 0px 0px 20px 0px;
    color: #707070;
}

.about__us p a {
    color: #db1d00;
    font-weight: bold;
    position: relative; /* важливо для позиціонування псевдоелемента */
    text-decoration: none; /* прибираємо стандартне підкреслення */
}

.about__us p a:hover{
    color: #ff2200;
}

.about__us a::after{
    content: ""; /* створюємо порожній контент */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* полоса буде мати ширину 0 на початку */
    height: 2px; /* висота полоски */
    background-color: #ff2200; /* колір полоски */
    transform: scaleX(0); /* спочатку полоса буде невидимою */
    transform-origin: bottom right; /* встановлюємо точку початку анімації */
    transition: transform 0.3s ease-out; /* плавна анімація для появи полоски */
}

.about__us p a:hover::after {
    transform: scaleX(1); /* при наведенні полоса буде ширшою */
    transform-origin: bottom left; /* точка початку анімації змінюється на ліву */
}

.about__us h3{
    font-size: clamp(18px, 2vw + 10px, 26px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 5px 0px;
    color: #db1d00;
}

/* Основні стилі для галереї */
.gallery {
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px 3%;
}

.gallery h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}

/* Стилі для контейнера з мініатюрами */
.gallery__thumbnails {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Відстань між групами */
}

/* Групи зображень */
.group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Відстань між рядами в групі */
}

/* Рядки зображень */
.row {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Відстань між зображеннями */
}

/* Стилі для кожної мініатюри */
.thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 23%; /* Задаємо ширину для кожного зображення */
}

.thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Стилі для кнопки "Більше фото" */
.more__photo {
    text-align: center;
    margin-top: 20px;
}

.more__photo__btn {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.more__photo__btn:hover {
    background-color: #555;
}

/* Перехід при натисканні */
.more__photo__btn:active {
    transform: scale(0.98);
}



/* About Us */

/* Contact */

.contacts{
    max-width: 1170px;
    width: 100%;
    margin: 100px auto 50px;
    padding: 0px 5%;
    text-align: justify;
}

.contacts h1{
    font-size: clamp(22px, 2vw + 10px, 34px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.contacts__tabs {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto 0px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.contacts__tabs__item {
    position: relative; /* Важливо для позиціонування псевдоелемента */
    cursor: pointer;
    padding: 10px 0px;
    font-size: 18px;
    color: #333;
    transition: color 0.3s; /* Плавний перехід для кольору */
    text-decoration: none; /* Прибираємо стандартне підкреслення */
    font-size: clamp(18px, 1vw + 10px, 21px);
}

/* Стан при наведенні на таб */
.contacts__tabs__item:hover {
    color: #ff2200;
    font-weight: bold;
}

/* Псевдоелемент для полоски */
.contacts__tabs__item::after {
    content: ""; /* Створюємо порожній контент */
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%; /* Полоса початково має ширину 0 */
    height: 2px; /* Висота полоски */
    background-color: #ff2200; /* Колір полоски */
    transform: scaleX(0); /* Полоса невидима по замовчуванню */
    transform-origin: bottom right; /* Точка початку анімації */
    transition: transform 0.3s ease-out; /* Плавна анімація для появи полоски */
}

/* При наведенні на таб полоска з'являється */
.contacts__tabs__item:hover::after {
    transform: scaleX(1); /* При наведенні полоска розширюється */
    transform-origin: bottom left; /* Точка початку анімації змінюється на ліву */
}

/* Для активного таба: прибираємо полоску */
.contacts__tabs__item.active::after {
    transform: scaleX(1); /* Показуємо полоску для активного таба */
    transform-origin: bottom left; /* Точка початку анімації змінюється на ліву */
}

/* Стиль для активного таба (наприклад, змінюємо колір) */
.contacts__tabs__item.active {
    color: #ff2200; /* Можна змінити колір активного таба */
    font-weight: bold; /* Активний таб стає жирним */
}


.contacts__tabs__item.active {
    font-weight: bold;
    color: #db1d00;
}

.vertical__divider {
    margin: 0px 20px;
    color: #333;
}

.contact__tab__content {
    display: none;
    margin-top: 5px;
}

.contact__tab__content.active {
    display: block;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 20px;
}

.tab {
    transition: color 0.3s ease;
}

.tab:hover {
    color: #ff2200;
}

.contact__info{
    max-width: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact__info h2{
    font-size: clamp(16px, 2vw + 10px, 20px);
    font-weight: 600;
    line-height: 1.5em;
    color: #505050;
    margin-bottom: 5px;
}

.contact__info h3{
    font-size: clamp(16px, 1vw + 10px, 16px);
    font-weight: 400;
    line-height: 1.5em;
    color: #707070;
}

.contact__info .contact__info__items{
    max-width: 200px;
    width: 100%;
    text-align: left;
}

.contact__info .contact__info__items h3{
    margin-bottom: 5px;
}

.contact__info .contact__info__items a{
    font-size: clamp(16px, 1vw + 10px, 16px);
    line-height: 1.5em;
    text-decoration: none;
}

.contact__info .contact__info__items .fa-brands.fa-viber{
    color: #7F58D2;
    font-size: 22px;
    margin-right: 5px;
}

.contact__info .contact__info__items .fa-brands.fa-whatsapp{
    color: #25D366;
    font-size: 22px;
    margin-right: 5px;
}

.contact__info .contact__info__items .bx.bxl-instagram-alt{
    color: #E1306C;
    font-size: 24px;
    margin-right: 5px;
}

.contact__info .contact__info__items .bx.bxl-facebook-circle{
    color: #3B5998;
    font-size: 24px;
    margin-right: 5px;
}

.contact__info .contact__info__items .bx.bxl-telegram{
    color: #0088cc;
    font-size: 24px;
    margin-right: 5px;
}

.contact__info .contact__info__items .bx.bxl-tiktok{
    color: #db1d00;
    font-size: 24px;
    margin-right: 5px;
}

.contact__info ul li{
    margin: 0px 0px 5px 0px;
    font-size: clamp(16px, 1vw + 10px, 16px);
    line-height: 1.5em;
    color: #707070;
}

.contact__map{
    max-width: 600px;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 5px;
}
.contact__map .ukraine__map,
.contact__map .france__map{
    width: 100%;
    height: 100%;
}


/* Contact */

footer{
    max-width: 1920px;
    width: 100%;
    height: auto;
    background-color: #2b2b2b;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
    margin-top: auto;
}

footer .footer__content{
    max-width: 1170px;
    width: 100%;
    padding: 0px 3%;
}

.footer__content .footer__content__top{
    padding: 0px 0px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    gap: 50px;
}

.footer__content__top .footer__logo{
    max-width: 150px;
    width: 100%;
}

.footer__content__top .footer__logo img{
    max-width: 150px;
    width: 100%;
    object-fit: cover;
}

.footer__menu,
.footer__office__list,
.oreder__tickets{
    max-width: 200px;
    width: 100%;
    height: auto;
}

.footer__menu h2,
.oreder__tickets h2{
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5em;
}

.footer__menu nav ul li{
    margin-bottom: 5px;
    font-size: 16x;
    line-height: 1.5em;
}

.footer__office__list h2{
    font-size: 18px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.footer__office__list h3,
.oreder__tickets h3{
    line-height: 1.5em;
    margin-bottom: 10px;
    font-size: 16px;
}

.footer__office__list ul li{
    line-height: 1.5em;
    margin-bottom: 5px;
}

.footer__content .footer__content__bottom{
    text-align: center;
    padding: 20px 0px 0px;
}


.page__not__found{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 130px 3% 100px;
}

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

.error__content h1{
    font-size: clamp(34px, 2vw + 10px, 72px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #db1d00;
    margin-bottom: 25px;
}

.error__content h2,
.error__content h3{
    font-size: clamp(16px, 1vw + 10px, 26px);
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px 0px 10px 0px;
    color: #505050;
}

.error__content a {
    color: #db1d00;
    font-weight: bold;
    margin-top: 20px;
    position: relative;
    text-decoration: none; /* Прибираємо стандартне підкреслення */
    transition: color 0.3s ease; /* Для плавної зміни кольору */
}

.error__content a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ff2600;
    transition: width 0.3s ease, left 0.3s ease;
}

.error__content a:hover {
    color: #ff2600; /* Колір при наведенні */
}

.error__content a:hover::after {
    width: 100%;
    left: 0;
    color: #ff2600;
}