/* Звичайний шрифт */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Курсив */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Середній (Medium) - часто використовується для підзаголовків */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Жирний (Bold) - для назв авто та головних заголовків */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   1. ЗМІННІ ТА БАЗОВІ НАЛАШТУВАННЯ
   ========================================= */
:root {
    --main-accent: #f5500a;
    /* Ваш фірмовий помаранчевий */

    --text-color: #e0e0e0;
    /* Світло-сірий текст (основний) */
    --header-bg: #1a1a1a;
    /* Темний фон шапки (трохи темніший за фон сайту) */

    --body-bg: #3E3E3E;
    /* <--- ВАШ НОВИЙ ФОН САЙТУ */

    --black: #000000;
    /* Додаємо чорний для тіні */

    /* 👇 НОВИЙ СТАНДАРТ ШИРИНИ (1600px) 👇 */
    --site-max-width: 1600px;
}

/* 1. Глобальні змінні розмірів для всього сайту */
:root {
    /* Десктоп (Комп'ютери) */
    --h1-size: 46px;
    --h2-size: 34px;
    --h3-size: 24px;
}

/* 2. Адаптація для планшетів та великих телефонів */
@media (max-width: 768px) {
    :root {
        --h1-size: 32px;
        --h2-size: 26px;
        --h3-size: 20px;
    }
}

/* 3. Адаптація для маленьких смартфонів */
@media (max-width: 480px) {
    :root {
        --h1-size: 28px;
        --h2-size: 24px;
        --h3-size: 19px;
    }
}

/* 4. Застосування стилів до тегів та класів-синонімів */

h1,
.hero-title {
    font-family: 'Google Sans', sans-serif;
    font-size: var(--h1-size) !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: #ffffff;
}

h2,
.section-title {
    font-family: 'Google Sans', sans-serif;
    font-size: var(--h2-size) !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    color: #ffffff;
}

h3,
.tab-title,
.card-title {
    font-family: 'Google Sans', sans-serif;
    font-size: var(--h3-size) !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #ffffff;
}

:root {
    /* Десктоп: 18px — стандарт для сучасних сервісів */
    --p-size: 18px;
    /* Мобільні: 16px — золота середина */
    --p-size-mobile: 16px;

    /* Міжрядковий інтервал (дуже важливо для читабельності) */
    --p-line-height: 1.6;
}

p {
    font-family: 'Google Sans', sans-serif;
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    font-weight: 400;
    /* Звичайна вага */
    color: #ffffff;
    opacity: 0.9;
    /* Робить текст м'якшим для очей */
    margin-bottom: 1.5rem;
    /* Відступ між абзацами */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
    p {
        font-size: var(--p-size-mobile);
        line-height: 1.5;
        /* Трохи щільніше на малих екранах */
        margin-bottom: 1.2rem;
    }
}

/* Контейнер списку */
ul,
ol {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-left: 1.2rem;
    /* Відступ для маркерів */
}

/* Кожен пункт списку */
li {
    font-family: 'Google Sans', sans-serif;
    font-size: var(--p-size);
    /* Використовуємо ту саму змінну, що й для P */
    line-height: var(--p-line-height);
    color: #ffffff;
    opacity: 0.9;
    margin-bottom: 10px;
    /* Відступ між пунктами */
}

/* Стилізація маркерів (крапочок) */
ul li::marker {
    color: #f5500a;
    /* Ваш акцентний помаранчевий колір */
    font-size: 1.1em;
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
    li {
        font-size: var(--p-size-mobile);
        margin-bottom: 8px;
    }

    ul,
    ol {
        padding-left: 1rem;
    }
}

:root {
    --section-spacing: 80px;
    --section-spacing-mobile: 50px;
}

section,
.section-padding {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
    box-sizing: border-box;
}

/* Адаптація під мобільні пристрої */
@media (max-width: 768px) {

    section,
    .section-padding {
        padding-top: var(--section-spacing-mobile);
        padding-bottom: var(--section-spacing-mobile);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Google Sans', sans-serif;
    width: 100%;
    /* Завжди на всю ширину вікна */
    background-color: var(--body-bg);
    /* Застосовуємо #3E3E3E */
    color: #f0f0f0;
    /* <--- Змінив текст на майже білий, щоб читалось */
    overflow-x: hidden;
    /* Забороняємо горизонтальну прокрутку */

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

body {
    font-family: 'Google Sans', sans-serif;
}

/* Приклад використання різних начертань */
h1,
h2 {
    font-weight: 700;
    /* Автоматично підтягне Bold файл */
}

.car-price {
    font-weight: 500;
    /* Автоматично підтягне Medium файл */
}

/* 2. КОНТЕЙНЕР КОНТЕНТУ (Обмеження по ширині) */
.page-container {
    width: 100%;
    /* Тягнеться, але... */
    max-width: var(--site-max-width);
    /* ...зупиняється на 1900px */

    margin: 0 auto;
    /* <--- МАГІЯ: Це центрує блок посередині екрану */

    padding: 0 40px;
    /* Відступи, щоб текст не лип до країв */
    box-sizing: border-box;
    /* Рахуємо ширину з урахуванням відступів */
}


/* =========================================
   2. ШАПКА (HEADER) - ОНОВЛЕНО ДЛЯ 1900px
   ========================================= */
.main-header {
    background-color: var(--header-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;

    /* Центруємо внутрішній контейнер */
    display: flex;
    justify-content: center;
    padding: 0;
    /* Відступи переносимо всередину */
}

/* Внутрішній контейнер шапки */
.header-wrapper {
    width: 100%;
    max-width: var(--site-max-width);
    /* <--- Тепер 2560px */
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 40px;
    box-sizing: border-box;
}

/* Логотип */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

/* Навігація (Контейнер) */
.nav-menu {
    display: flex;
    gap: 30px;
    height: 100%;
    align-items: center;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* Посилання в меню */
.nav-link {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    /* Світло-сірий #e0e0e0 */
    text-decoration: none;
    padding: 30px 0;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--main-accent);
    /* Акцент при наведенні */
}

/* Стрілочка для пунктів з підменю */
.nav-link:not(.no-arrow)::after {
    content: '▾';
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
    transition: transform 0.3s;
}

/* Права частина (Телефон + Кнопка) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Перемикач мови (Desktop) */
.lang-switch {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    /* Жирний шрифт */
    font-size: 14px;
    margin: 0 20px;
    /* Відступи з боків */
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

.lang-switch:hover {
    color: var(--main-accent);
    /* Помаранчевий при наведенні */
}

/* Вертикальна лінія зліва від EN (розділювач) */
.lang-switch::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Тьмяна лінія */
}

.phone-number {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 15px;
    transition: color 0.3s;
}

.phone-number:hover {
    color: var(--main-accent);
}

/* --- СОЦІАЛЬНІ ІКОНКИ --- */
.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Відстань між іконками */
    margin-right: 20px;
    /* Відстань до номера телефону */
    padding-right: 20px;
    /* Додатковий розділювач */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Тонка лінія-розділювач (опціонально) */
}

.social-icons a {
    text-decoration: none;
    color: var(--text-color);
    /* Світло-сірий колір (#e0e0e0) */
    font-size: 20px;
    /* Розмір іконок */
    transition: transform 0.3s, color 0.3s;
}

/* Ефект при наведенні */
.social-icons a:hover {
    color: var(--main-accent);
    /* Стають помаранчевими */
    transform: translateY(-2px);
    /* Легке підстрибування */
}

.btn-cta {
    background-color: var(--main-accent);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    transition: transform 0.1s ease-in, background-color 0.1s ease-in, box-shadow 0.1s ease-in;
    display: inline-block;
}

.btn-cta:hover {
    transform: scale(1.05);
}


/* =========================================
   3. MEGA MENU (Загальні стилі)
   ========================================= */
.mega-menu {
    background-color: var(--header-bg);
    /* Темний фон (як у шапки) */
    border-top: 3px solid var(--main-accent);
}

.mega-column h4 {
    margin: 0 0 15px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    /* Сірий колір заголовків */
    letter-spacing: 1px;
}

.mega-menu a {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    /* Світлий текст (#e0e0e0) */
    padding: 10px 0;
    font-size: 14px;
    transition: padding-left 0.2s, color 0.2s;

    /* ЛІНІЇ ЗАЛИШАЄМО ЧІТКИМИ */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* Чітка світла лінія на темному */
}

/* Ховер на посиланнях */
.mega-menu a:hover {
    color: var(--main-accent);
    padding-left: 10px;
    border-bottom-color: var(--main-accent);
    /* При наведенні лінія стає помаранчевою */
}

/* =========================================
   4. ДЕСКТОП ВЕРСІЯ (PC > 1190px)
   ========================================= */
@media (min-width: 1190px) {

    /* Бургер ховаємо */
    .hamburger {
        display: none;
    }

    /* Стилі випадайки для ПК */
    .mega-menu {
        position: absolute;
        top: 80px;
        left: -20px;
        width: 500px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 8px 8px;

        /* Ефекти появи */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    /* Показуємо при НАВЕДЕННІ (Hover) тільки на ПК */
    .nav-item:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}



/* =========================================
   5. МОБІЛЬНА ВЕРСІЯ (Tablet/Phone <= 1190px)
   ========================================= */
@media (max-width: 1190px) {

    /* Кнопка Бургер */
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        order: 3;
        margin-left: 20px;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background-color: var(--text-color);
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* Анімація хрестика */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* Ховаємо праву частину хедера */
    .header-actions {
        display: none;
    }

    /* --- ГОЛОВНЕ МЕНЮ --- */
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        /* Висота на весь екран мінус шапка */
        background-color: var(--header-bg);

        /* ВАЖЛИВІ ЗМІНИ ТУТ: */
        display: flex;
        flex-direction: column;
        /* Стовпчик */
        justify-content: flex-start;
        /* Притискаємо все вгору (щоб не було дірок) */
        gap: 0;
        /* ПРИБИРАЄМО ВІДСТУПИ МІЖ ПУНКТАМИ */

        padding: 0;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    .nav-menu.active {
        left: 0;
    }

    /* Кожен пункт меню */
    .nav-item {
        width: 100%;
        display: block;
        /* Займає всю ширину */
        height: auto;
        /* Висота залежить від контенту */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* Тонкий розділювач */
    }

    /* Саме посилання (Напрямки, Послуги...) */
    .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;

        /* Компактні відступи */
        padding: 15px 20px;

        font-size: 16px;
        /* Оптимальний шрифт */
        width: 100%;
        box-sizing: border-box;
        color: var(--text-color);
    }

    /* Стрілочка */
    .nav-link:not(.no-arrow)::after {
        content: '▼';
        font-size: 10px;
        transition: transform 0.3s;
    }

    /* Поворот стрілочки при відкритті */
    .nav-item.active .nav-link::after {
        transform: rotate(180deg);
        color: var(--main-accent);
    }

    /* Фарбуємо текст активного пункту */
    .nav-item.active .nav-link {
        color: var(--main-accent);
    }

    /* --- АКОРДЕОН (ПІДМЕНЮ) --- */
    .mega-menu {
        position: static;
        width: 100%;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        border-top: none;
        background-color: #252525;
        /* Фон підменю трохи світліший */

        /* СХОВАНО ЗА ЗАМОВЧУВАННЯМ */
        display: none;
        padding: 0;
    }

    /* Колонки всередині стають просто блоками */
    .mega-column {
        padding: 0;
        width: 100%;
    }

    /* Заголовки груп (Європа, Оренда...) */
    .mega-column h4 {
        margin: 0;
        padding: 15px 20px 5px 20px;
        /* Відступи заголовків */
        font-size: 11px;
        color: #888;
    }

    /* Посилання всередині підменю */
    .mega-menu a {
        padding: 12px 20px 12px 40px;
        /* 40px зліва - щоб показати вкладеність */
        font-size: 15px;
        color: #ccc;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Дуже слабка лінія */
        background: transparent;
        /* Прибираємо фони */
    }

    /* ЛОГІКА: Показуємо підменю, коли батько має клас active */
    .nav-item.active .mega-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }
}

/* Ховаємо кнопку EN мобільної версії ЗА ЗАМОВЧУВАННЯМ для всіх */
.mobile-lang-header {
    display: none;
}

@media (max-width: 1190px) {

    /* --- Увімкнення EN на мобільному --- */
    .mobile-lang-header {
        display: block;
        /* Вмикаємо її назад */
        font-weight: 800;
        font-size: 16px;
        color: var(--text-color);
        text-decoration: none;

        /* Вирівнювання: притискаємо вправо до бургера */
        margin-left: auto;
        margin-right: 25px;
        /* Відступ від бургера */
        padding: 10px 0;
        /* Зона кліку */
    }

    /* Щоб бургер не відштовхувався занадто далеко */
    .hamburger {
        margin-left: 0;
    }
}

/* --- Hero Section Styles --- */

.hero-section {
    padding-top: 200px;
    position: relative;
    /* Висота екрану мінус висота шапки (припустимо 80px) */
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    /* Центруємо по вертикалі */
    overflow: hidden;
    /* Безпечні відступи зверху/знизу */
    padding-bottom: 10vh;
}

/* Відступ для мобільних пристроїв */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 100px;
        /* 👈 Текст підніметься значно вище, але не налізе на шапку */
        min-height: 100svh;
        /* 👈 Екран ідеально заповнить видиму частину телефона */
    }
}

/* Використовуємо CSS Grid для розмітки всередині вашого page-container */
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Текст займає трохи більше місця */
    align-items: center;
    position: relative;
}

/* --- Ліва колонка (Текст) --- */
.hero-content {
    z-index: 10;
    /* Щоб текст був НАД картинкою */
    position: relative;
    /* Ефект накладання: зсуваємо правий край тексту на територію картинки */
    margin-right: -80px;
    padding-right: 20px;
}

.hero-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    /* Адаптивний розмір шрифту */
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    /* Bold */
    /* ExtraBold */
    text-transform: uppercase;
    margin: 0 0 24px 0;
    color: #ffffff;
    /* Білий заголовок для контрасту на темному */
    letter-spacing: -1px;
}

/* --- Опис Hero Section --- */
.hero-description {
    color: var(--text-color);
    margin-bottom: 40px;

    /* ВАШЕ НАЛАШТУВАННЯ: на великих екранах (1900px+) він займає половину колонки */
    width: 80%;

    /* Безпечне обмеження, щоб текст ніколи не був ширшим за контейнер */
    max-width: 100%;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- Кнопки --- */
.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    padding: 15px 30px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-transform: none !important;
    text-decoration: none;
    border-radius: 12px;
    /* Трохи згладжені кути */
    transition: transform 0.1s ease-in, background-color 0.1s ease-in, box-shadow 0.1s ease-in;
    cursor: pointer;
    letter-spacing: 0;
}

/* Ефект збільшення при наведенні (Hover) та натисканні (Active) */
.btn:hover,
.btn:active {
    /* 2. Збільшення розміру */
    transform: scale(1.05);
}

/* Помаранчева кнопка */
.btn-primary {
    background-color: var(--main-accent);
    color: #ffffff;
    border: 2px solid var(--main-accent);
    padding: 10px 30px;
}

/* =========================================
   КНОПКА ДЛЯ ГОЛОВНОГО ЕКРАНА (БІЛА, ПРОЗОРА)
   ========================================= */
.btn-hero-outline {
    display: inline-block;
    background-color: transparent;
    /* Прозорий фон */
    color: #ffffff;
    /* Білий текст */
    border: 2px solid #ffffff;
    /* Біла рамка (бордюр) */

    /* Відступи точно як у головної кнопки .btn-cta */
    min-width: 230px;
    padding: 15px 30px;
    border-radius: 12px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: none !important;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0;

    /* Плавна анімація для кольорів та розміру */
    transition: all 0.1s ease;
}

/* Ефект при наведенні (Hover) */
.btn-hero-outline:hover {
    color: var(--main-accent);
    /* Текст стає фірмовим помаранчевим */
    border-color: var(--main-accent);
    /* Рамка стає помаранчевою */
    transform: scale(1.05);
    /* Кнопка збільшується на 5% */
}

@media (max-width: 768px) {
    .btn-hero-outline {
        width: 100%;
    }
}

/* --- Права колонка (Зображення) --- */
.hero-image-wrapper {
    position: relative;
    z-index: 1;
    /* Під текстом */
    display: flex;
    justify-content: flex-end;
    /* Притискаємо вправо */
}

.hero-image {
    width: 100%;
    height: auto;
    max-height: 80vh;
    /* Щоб не було гігантським на великих екранах */
    object-fit: contain;
    /* Зберігаємо пропорції авто */

    /* Фільтр, щоб картинка "сіла" в темний дизайн (трохи затемнюємо) */
    /* filter: brightness(0.9); */
}

/* Декоративне світіння позаду авто (ефект "фірмовий стиль") */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: var(--main-accent);
    opacity: 0.15;
    /* Дуже слабке світіння */
    filter: blur(100px);
    z-index: -1;
    border-radius: 50%;
}

/* =========================================
   3. АДАПТАЦІЯ (MEDIA QUERIES)
   ========================================= */

/* 1. ПРОМІЖНА АДАПТАЦІЯ (Ноутбуки) */
/* Коли екран стає меншим за 1400px, текст розширюється на всю колонку */
@media (max-width: 1400px) {
    .hero-description {
        width: 100%;
    }
}

/* --- МОБІЛЬНА АДАПТАЦІЯ (Планшети та телефони) --- */
@media (max-width: 1024px) {


    .hero-grid {
        display: block;
        position: relative;
    }

    /* 1. Текст (без змін) */
    .hero-content {
        position: relative;
        z-index: 5;
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        text-align: center;
    }

    .hero-description {
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    .hero-buttons {
        justify-content: center;
    }

    /* 2. Зображення (ВИПРАВЛЕНО) */
    .hero-image-wrapper {
        position: absolute;

        /* Центруємо зображення точно по центру блоку */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Магія центрування */

        /* Змінюємо розміри, щоб уникнути обрізання */
        width: 100%;
        /* Ширина як у екрана */
        max-width: 500px;
        /* Але не ширше 500px (щоб на планшеті не було гігантським) */
        height: 100%;

        z-index: 1;
        opacity: 0.25;
        /* Трохи прозоріше, щоб текст краще читався */
        pointer-events: none;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-image {
        width: 100%;
        /* Вписуємо картинку в контейнер */
        height: auto;

        /* Зменшуємо ліміт висоти, як ви просили */
        max-height: 350px;

        object-fit: contain;
        /* Гарантує, що все фото буде видно повністю */
    }
}

@media (max-width: 768px) {
    .btn {
        width: 100%;
        padding: 15px;
    }
}


/* =========================================
   3. SERVICES SECTION
   ========================================= */

/* Глобальне налаштування плавної прокрутки для всієї сторінки */
html {
    scroll-behavior: smooth;
}

.services-section {
    padding: 100px 0;
    position: relative;
}

.section-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    color: #ffffff;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- GRID (Десктоп) --- */
.services-grid {
    display: grid;
    /* 4 колонки рівної ширини */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ОНОВЛЕНИЙ КЛАС КАРТКИ */
.service-card {
    /* Прибираємо суцільний сірий колір, тепер там буде картинка */
    /* background-color: #4a4a4a; <-- ВИДАЛИТИ ЦЕ */

    /* Налаштування фону */
    background-size: cover;
    /* Картинка розтягується на весь блок */
    background-position: center;
    /* Центрування картинки */
    background-repeat: no-repeat;

    /* ТІНЬ, яку ви просили */
    box-shadow: 1px 2px 5px 0 var(--black);

    padding: 30px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    /* При ховері тінь можна робити глибшою */
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

.service-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
    min-height: 50px;
    /* Фіксуємо висоту заголовка для рівності */
}

.service-desc {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1;
    /* Текст займає весь вільний простір, штовхаючи кнопку вниз */
    line-height: 1.5;
}

/* Центрування кнопки в картці */
.service-card .service-btn {
    align-self: center;
    /* Центрування по горизонталі у Flex-контейнері */
    min-width: 180px;
    /* Трохи компактніша кнопка для карток */
    font-size: 0.9rem;
    padding: 14px 24px;
}

/* Приховуємо акордеон на десктопі */
.services-accordion {
    display: none;
}


/* =========================================
   АДАПТАЦІЯ (Services)
   ========================================= */

/* Планшети та малі ноутбуки (до 1200px) */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 колонки */
        max-width: 800px;
        margin: 0 auto;
        /* Центруємо сітку */
    }
}

/* Мобільні пристрої (до 768px) */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* Приховуємо сітку */
    .services-grid {
        display: none;
    }

    /* Показуємо акордеон */
    .services-accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* Стилі Акордеону */
    /* ОНОВЛЕННЯ ДЛЯ МОБІЛЬНОГО (АКОРДЕОН) */
    .accordion-item {
        /* Теж додаємо фон та тінь */
        background-size: cover;
        background-position: center;
        box-shadow: 1px 2px 5px 0 var(--black);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 12px;

    }

    /* Щоб текст в акордеоні читався, додамо підкладку під сам хедер і контент */
    .accordion-header {
        background-color: rgba(0, 0, 0, 0.6);
        /* Напівпрозорий чорний */
        /* ...інші стилі без змін... */
        padding: 20px;
        font-family: 'Google Sans', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .accordion-content {
        background-color: rgba(0, 0, 0, 0.8);
        /* Ще темніший для тексту */
        /* ...інші стилі без змін... */
        padding: 0 20px 25px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }



    /* РОБИМО КНОПКУ ПОМАРАНЧЕВОЮ ТІЛЬКИ В АКОРДЕОНІ */
    .accordion-content .service-btn {
        background-color: var(--main-accent) !important;
        /* Заливка помаранчевим */
        border: 2px solid var(--main-accent) !important;
        /* Рамка теж помаранчева */
        color: #ffffff !important;
        /* Білий текст */
        box-shadow: 0 4px 12px rgba(245, 80, 10, 0.4);
        /* Тінь для об'єму */
    }


    /* Прибирання стандартного маркера для Webkit */
    .accordion-header::-webkit-details-marker {
        display: none;
    }

    .accordion-header:hover {
        background-color: #555;
    }

    .accordion-icon {
        font-size: 1.5rem;
        color: var(--main-accent);
        font-weight: 400;
    }

    /* Зміна іконки при відкритті */
    details[open] .accordion-icon {
        transform: rotate(45deg);
        /* Плюс стає хрестиком */
        display: inline-block;
    }

    .accordion-content {
        padding: 0 20px 25px 20px;
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .accordion-content p {
        color: var(--text-color);
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .accordion-content .service-btn {
        width: 100%;
        box-sizing: border-box;
        /* Щоб padding не розпирав кнопку */
    }
}

@media (max-width: 768px) {

    /* 1. Зменшуємо відступи контейнера для всього сайту */
    .page-container {
        /* Було 40px. Ставимо 20px, щоб контент (як акордеон) став ширшим */
        padding: 0 15px;
    }

    /* 2. Зменшуємо розмір заголовків секцій, щоб не були гігантськими */
    .section-title {
        font-size: 2rem;
        /* 32px */
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .page-container {
        /* Було 40px. Ставимо 20px, щоб контент (як акордеон) став ширшим */
        padding: 0 10px;
    }
}

/* =========================================
   4. FLEET SECTION (FIXED VERSION)
   ========================================= */

.fleet-section {
    padding: 100px 0;
    text-align: center;
}

.section-subtitle {
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .section-subtitle {
        margin-top: 10px;
    }
}

/* --- СІТКА --- */
.fleet-grid {
    display: grid;

    /* БУЛО (однакові): grid-template-columns: repeat(4, 1fr); */

    /* СТАЛО (ручне регулювання ширини): */
    /* 1-а колонка (Легкові): 0.9fr (трохи вужча)
       2-а колонка (Мінівени): 1fr  (стандарт)
       3-я колонка (Буси):    1.2fr (ширша)
       4-а колонка (Автобус): 1.6fr (найширша, для довгого автобуса)
    */
    grid-template-columns: 0.9fr 1fr 1.2fr 1.6fr;

    gap: 15px;
    align-items: flex-end;
}

/* --- ЕЛЕМЕНТ (Посилання) --- */
.fleet-item {
    text-decoration: none;
    cursor: pointer;
    display: block;
}

/* --- ОБГОРТКА (Гараж) --- */
.fleet-img-wrapper {
    /* 1. Задаємо фіксовану висоту простору для авто */
    height: 150px;
    width: 100%;

    /* 2. Flexbox, щоб притиснути картинку до низу */
    display: flex;
    align-items: flex-end;
    /* КЛЮЧОВИЙ МОМЕНТ: Колеса на підлозі */
    justify-content: center;
    /* Центр по горизонталі */

    margin-bottom: 20px;
}

/* --- КАРТИНКА (Базові налаштування) --- */
.fleet-img {
    width: auto;
    /* Автоширина збереже пропорції */
    height: auto;
    /* Скидаємо висоту */
    max-width: 100%;
    /* Щоб не вилізла за межі ширини */
    display: block;

    transition: transform 0.3s ease;
    transform-origin: bottom center;
    /* Росте вгору */
}

/* --- РОЗМІРИ (Ієрархія через макс. висоту) --- */

/* Легкова: найнижча */
.type-sedan .fleet-img {
    max-height: 50px;
}

/* Мінівен: трохи вищий */
.type-minivan .fleet-img {
    max-height: 70px;
}

/* Мікроавтобус: середній */
.type-minibus .fleet-img {
    max-height: 90px;
}

/* Автобус: найвищий (майже на весь блок) */
.type-bus .fleet-img {
    max-height: 115px;
}

/* --- ТЕКСТ --- */
.fleet-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    text-transform: none;
    transition: color 0.3s ease;
}

/* --- HOVER --- */
.fleet-item:hover .fleet-img {
    transform: scale(1.1);
}

.fleet-item:hover .fleet-title {
    color: var(--main-accent);
}

/* =========================================
   КАТЕГОРІЇ АВТОПАРКУ (УНІВЕРСАЛЬНИЙ БЛОК)
   ========================================= */

/* 1. БАЗОВІ СТИЛІ (ДЕСКТОП > 1190px) */
.fleet-mobile-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 картки в ряд на великих екранах */
    gap: 25px;
    padding: 20px 0;
}

/* Стара таблиця (якщо вона десь залишилась) - приховуємо всюди */
.fleet-grid {
    display: none !important;
}

/* Картка (Десктопний вигляд за замовчуванням) */
.fleet-mobile-card {
    display: flex;
    flex-direction: column;
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 25px;
    align-items: center;
    text-align: center;
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.fleet-mobile-card:hover {
    transform: translateY(-5px);
    /* Картка піднімається */
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

/* Верхня частина картки (Іконка + Назва) */
.card-left {
    width: 100%;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.class-icon {
    width: 140px;
    /* Трохи більша іконка для десктопа */
    height: 70px;
    margin-bottom: 15px;
    object-fit: contain;
}

.class-name {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Нижня частина картки (Характеристики + Кнопка) */
.card-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    /* Щоб кнопка завжди була внизу */
    justify-content: space-between;
}

.specs-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spec-text {
    font-family: 'Google Sans', sans-serif;
    color: #bbb;
    font-size: 1rem;
}

/* Кнопка */
.btn-more {
    background: transparent;
    border: 2px solid var(--text-color);
    color: var(--text-color);
    font-family: 'Google Sans', sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}

.btn-more:hover {
    border-color: var(--main-accent);
    color: var(--main-accent);
    transform: scale(1.05);
}

/* =========================================
   2. ПЛАНШЕТИ (до 1190px)
   ========================================= */
@media (max-width: 1190px) {
    .fleet-mobile-wrapper {
        grid-template-columns: repeat(2, 1fr);
        /* 2 картки в ряд */
        gap: 20px;
    }

    .class-icon {
        width: 120px;
        height: 60px;
    }
}


/* =========================================
   3. ТЕЛЕФОНИ (до 768px)
   ========================================= */
@media (max-width: 768px) {
    .fleet-mobile-wrapper {
        display: flex;
        /* Змінюємо Grid на Flex для стовпчика */
        flex-direction: column;
        gap: 15px;
    }

    /* Картка знову стає горизонтальною (іконка зліва, текст справа) */
    .fleet-mobile-card {
        flex-direction: row;
        padding: 15px;
        text-align: left;
    }

    /* Ліва частина тепер збоку */
    .card-left {
        width: 45%;
        border-bottom: none;
        border-right: 1px solid #333;
        padding-bottom: 0;
        margin-bottom: 0;
        padding-right: 15px;
        align-items: center;
        /* Центруємо іконку у своїй колонці */
    }

    .class-icon {
        width: 100px;
        height: 50px;
        margin-bottom: 10px;
    }

    .class-name {
        font-size: 1rem;
        text-align: center;
    }

    /* Права частина тепер збоку */
    .card-right {
        width: 55%;
        padding-left: 15px;
        align-items: flex-start;
        /* Вирівнюємо по лівому краю */
    }

    .specs-list {
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .spec-text {
        font-size: 0.85rem;
    }

    .btn-more {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
}

/* =========================================
   5. HOW TO ORDER SECTION
   ========================================= */

.order-section {
    padding: 100px 0;
    /* Можна зробити фон трохи світлішим за body, щоб виділити секцію */
    /* background-color: #2b2b2b;  <-- Опціонально */
    text-align: center;
}

.order-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 колонки */
    gap: 30px;
}

/* --- КАРТКА --- */
.order-card {
    background: var(--header-bg);
    /* Трохи світліший фон для картки */
    padding: 30px;
    border-radius: 12px;
    /* Легке заокруглення (або 0, якщо у вас гострі кути) */
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Вирівнювання по лівому краю */
    position: relative;
    overflow: hidden;
    /* Щоб декоративні елементи не вилазили */
    text-align: left;
}

/* Ефект при наведенні */
.order-card:hover {
    transform: translateY(-10px);
    /* Картка піднімається */
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

/* --- НУМЕРАЦІЯ (Головна фішка) --- */
.order-number {
    font-family: 'Google Sans', sans-serif;
    font-weight: 900;
    /* Жирний шрифт */
    font-size: 4rem;
    /* Велика цифра */
    line-height: 1;

    /* Робимо цифру помаранчевою, але прозорою */
    color: rgba(245, 80, 10, 0.15);

    /* Або варіант: контурна цифра (дуже стильно) */
    /* -webkit-text-stroke: 2px var(--main-accent);
       color: transparent; */

    margin-bottom: 20px;

    /* Можна поставити цифру в абсолютну позицію в куток, 
       але "в потоці" (margin-bottom) виглядає читабельніше для кроків */
}

/* При наведенні цифра стає яскравішою */
.order-card:hover .order-number {
    color: var(--main-accent);
    /* Стає повноцінно помаранчевою */
    opacity: 1;
}


/* --- ТЕКСТ --- */
.order-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.order-text {

    font-size: 1rem;
    line-height: 1.5;
    color: #b0b0b0;
    /* Сірий текст для опису */
}

/* =========================================
   АДАПТАЦІЯ (ORDER)
   ========================================= */

/* Планшет: 2 колонки по 2 картки */
@media (max-width: 1024px) {
    .order-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобільний: 1 колонка (стовпчик) */
/* Для кроків краще стовпчик, ніж свайп, бо це послідовність дій */
@media (max-width: 600px) {
    .order-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .order-number {
        font-size: 3rem;
        /* Трохи менша цифра */
    }
}

/* =========================================
   6. CLIENTS SECTION (Нам довіряють)
   ========================================= */

.clients-section {
    padding: 80px 0;
    text-align: center;
    /* Можна зробити фон трохи іншим, щоб візуально розбити секції */
    /* background-color: #1a1a1a; */
}

.clients-grid {
    display: grid;
    /* AUTO-FILL: Це магія. Браузер сам вирішить, скільки колонок влізе.
       minmax(180px, 1fr) означає: колонка мінімум 180px, але може розтягуватись.
       Це замінює написання media queries для колонок.
    */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 30px;
    /* Відступи між логотипами */
    align-items: center;
    /* Центрування по вертикалі */
}

.client-item {
    height: 100px;
    /* Фіксована висота клітинки */
    display: flex;
    justify-content: center;
    /* Центр по горизонталі */
    align-items: center;
    /* Центр по вертикалі */

    /* Опціонально: легкий фон для кожного логотипу */
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.client-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Логотип не буде спотворюватись */

    /* ФІШКА: Робимо логотип сірим і напівпрозорим */
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.4s ease;
}

/* --- HOVER ЕФЕКТИ --- */

.client-item:hover {
    /* Трохи підсвічуємо фон при наведенні */
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

.client-item:hover .client-logo {
    /* Повертаємо колір і прибираємо прозорість */
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
    /* Легке збільшення логотипу */

}

/* =========================================
   АДАПТАЦІЯ CLIENTS
   ========================================= */

@media (max-width: 600px) {
    .clients-grid {
        /* На мобільному робимо гарантовано 2 колонки */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .client-item {
        height: 80px;
        /* Трохи менші клітинки */
        padding: 15px;
    }
}

/* =========================================
   7. BLOG SECTION (CAROUSEL)
   ========================================= */

.blog-section {
    padding: 100px 0;
}

/* Заголовок і кнопки в один рядок */
/* --- ОБГОРТКА ЗАГОЛОВКА ТА КНОПОК --- */
.section-header-wrapper {
    display: grid;
    /* Створюємо 3 колонки: ліва (порожня), центральна (під текст), права (під кнопки) */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 40px;
}

/* Блок із заголовком та підзаголовком (перший div) */
.section-header-wrapper>div:first-child {
    grid-column: 2;
    /* Ставимо чітко в центральну колонку */
    text-align: center;
    /* Вирівнюємо сам текст посередині */
}

/* Кнопки навігації */
.blog-controls {
    grid-column: 3;
    /* Ставимо в праву колонку */
    justify-self: end;
    /* Притискаємо до правого краю екрана */
    display: flex;
    gap: 15px;
}

/* Фікс відступів для підзаголовка, щоб він був ближче до заголовка */
.section-header-wrapper .section-subtitle {
    margin-top: 5px;
    margin-bottom: 0;
}

/* --- ВІКНО КАРУСЕЛІ --- */
.blog-carousel-window {
    overflow: hidden;
    /* Ховаємо все, що вилазить за межі */
    margin-bottom: 50px;
}

/* --- ТРЕК (Стрічка з картками) --- */
.blog-track {
    display: flex;
    gap: 30px;
    /* Відступ між картками */

    /* Дозволяємо скрол, але ховаємо скролбар */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Прилипання */
    scroll-behavior: smooth;
    /* Плавна прокрутка */

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 20px;
    /* Місце для тіні */
    padding: 10px 0 20px 10px;
}

.blog-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* --- КАРТКА --- */
.blog-card {
    /* РОЗРАХУНОК ШИРИНИ:
       (100% мінус 2 відступи по 30px) поділити на 3 картки */
    min-width: calc((100% - 60px) / 3);

    scroll-snap-align: start;
    /* Зупинятися на початку картки */

    background-color: var(--header-bg);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;


}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

/* Картинка */
.blog-img-wrapper {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.1);
}

/* Дата (накладена на фото або під ним) */
.blog-date {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--main-accent);
    /* Помаранчевий */
    color: #fff;
    padding: 8px 15px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Google Sans', sans-serif;
    border-top-right-radius: 8px;
}

/* Контент */
.blog-content {
    padding: 25px;
    flex-grow: 1;
    /* Розтягує контент, щоб кнопки були на одному рівні */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.blog-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-title {
    color: var(--main-accent);
}

/* Кнопка "Детальніше" */
.blog-btn {
    text-decoration: none;
    color: #b0b0b0;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    border-bottom: 1px solid transparent;
}

.blog-btn:hover {
    color: var(--main-accent);
    border-bottom: 1px solid var(--main-accent);
}

.blog-footer {
    text-align: center;
}

/* --- СТИЛЬ ДЛЯ ІКОНОК У КНОПКАХ --- */
.control-icon {
    width: 24px;
    /* Розмір іконки (змініть за потреби) */
    height: 24px;
    object-fit: contain;

    /* Якщо ваші іконки чорного кольору, а фон темний, 
       цей рядок зробить їх білими (інвертує колір): */
    /* filter: invert(1); */

    transition: transform 0.3s ease;
}

/* Опціонально: легкий рух самої іконки при наведенні на кнопку */
.control-btn:hover #blog-prev .control-icon {
    transform: translateX(-3px);
    /* Стрілка вліво зсувається вліво */
}

.control-btn:hover #blog-next .control-icon {
    transform: translateX(3px);
    /* Стрілка вправо зсувається вправо */
}

/* =========================================
   АДАПТАЦІЯ БЛОГУ
   ========================================= */

/* Планшет (2 картки) */
@media (max-width: 1024px) {
    .blog-card {
        /* (100% мінус 1 відступ 30px) / 2 */
        min-width: calc((100% - 30px) / 2);
    }
}

/* Мобільний (1 картка) */
@media (max-width: 768px) {

    /* На телефоні вишиковуємо все в один стовпчик по центру */
    .section-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Все по центру */
        gap: 20px;
    }

    .blog-card {
        min-width: 100%;
        /* Одна картка на весь екран */
        margin-right: 0;
        /* Прибираємо зайві відступи, gap працює */
    }

    .blog-track {
        gap: 20px;
    }
}

/* --- ПРОЗОРА КНОПКА (Ghost Button) --- */
.blog-btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background-color: transparent;
    /* Прозорий фон */
    border: 2px solid #ffffff;
    /* Біла рамка */
    color: #ffffff;
    /* Білий текст */
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: none;
    text-decoration: none;
    border-radius: 12px;
    /* Якщо ваші основні кнопки квадратні/злегка закруглені */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Ефект при наведенні (Мінімалістичний) */
.blog-btn-outline:hover {
    background-color: transparent;
    /* Залишаємо фон прозорим */
    color: var(--main-accent);
    /* Текст стає помаранчевим */
    border-color: var(--main-accent);
    /* Рамка також стає помаранчевою */

    /* Тінь і підстрибування можна залишити або прибрати за бажанням */
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .blog-btn-outline {
        width: 100%;
    }
}

/* Додатковий відступ зверху, щоб відірвати кнопку від карток */
.blog-footer {
    text-align: center;
    margin-top: 40px;
}


/* =========================================
   УНІВЕРСАЛЬНІ КНОПКИ НАВІГАЦІЇ (Блог + Відгуки)
   ========================================= */

/* 1. Базовий стан кнопки */
.control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Базовий стан іконки */
.control-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 0.3s ease;
    /* Робимо помаранчеву іконку білою */
    filter: brightness(0) invert(1);
}

/* --- HOVER ЕФЕКТ (Тільки колір та масштаб) --- */

.control-btn:hover {
    border-color: var(--main-accent);
    background: transparent;
    transform: scale(1.1);
    /* Легке збільшення всієї кнопки */
}

.control-btn:hover .control-icon {
    filter: none;
    /* Іконка стає помаранчевою, без зсуву */
}

/* =========================================
   8. REVIEWS SECTION (CLONE OF BLOG)
   ========================================= */

.reviews-section {
    padding: 40px 0;
    /* Як у блозі */
}

/* Вікно каруселі (ховає те, що вилазить) */
.reviews-carousel-window {
    width: 100%;
    overflow: hidden;
}

/* Трек (Стрічка) */
.reviews-track {
    display: flex;
    gap: 30px;
    /* Стандартний відступ, як у блозі */
    transition: transform 0.5s ease-in-out;
    /* Плавна прокрутка */

    /* Скрол для тач-пристроїв */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 5px 20px 10px;

    /* Приховуємо скролбар для Firefox */
    scrollbar-width: none;

    /* Приховуємо скролбар для Internet Explorer та старого Edge */
    -ms-overflow-style: none;
}

/* Приховуємо скролбар для Chrome, Safari та нових Edge */
.reviews-track::-webkit-scrollbar {
    display: none;
}


/* --- КАРТКА ВІДГУКУ --- */
.review-card {
    /* ДЕСКТОП: 3 картки. (100% - 2 проміжки по 30px) / 3 */
    flex: 0 0 calc((100% - 60px) / 3);
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    height: auto;
    box-shadow: 1px 2px 5px 0 var(--black);
    scroll-snap-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 2px 10px 20px 0 rgba(0, 0, 0, 0.5);
}

/* --- ВМІСТ КАРТКИ (Стилізація) --- */
.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.review-author-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-author {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.review-date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-top: 5px;
}

.google-logo {
    width: 24px;
    height: 24px;
}

.review-stars {
    color: #fbbc05;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.review-text {
    font-family: 'Google Sans', sans-serif;
    color: #b0b0b0;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    white-space: normal;
    /* Текст повністю */
}


/* =========================================
   АДАПТАЦІЯ (ЯК У БЛОЗІ)
   ========================================= */

/* ПЛАНШЕТ (max-width: 1024px) -> 2 картки */
@media (max-width: 1024px) {
    .review-card {
        flex: 0 0 calc((100% - 30px) / 2);
    }
}

/* МОБІЛЬНИЙ (max-width: 768px) -> 1 картка */
@media (max-width: 768px) {
    .reviews-track {
        gap: 15x;
    }

    .review-card {
        flex: 0 0 100%;
        /* Рівно одна картка */

        scroll-snap-align: center;
    }

    .review-text {
        font-size: 0.95rem;
    }
}

/* --- SIMPLE TEXT SECTION --- */


/* Обмежуємо ширину самого тексту всередині контейнера */
/* На десктопі краще не розтягувати текст на всі 1200px+ */
.text-grid-wrapper {
    max-width: 100%;
}


.simple-content p {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    /* Regular */
    line-height: 1.7;
    margin-bottom: 25px;
    opacity: 0.9;
    /* Легке пом'якшення для довгих текстів */
}

/* --- АДАПТАЦІЯ --- */
@media (max-width: 1024px) {
    .simple-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .simple-text-section {
        padding: 50px 0;
    }

    .simple-title {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .simple-content p {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

/* --- СТИЛІ ДЛЯ ПОСИЛАНЬ В ТЕКСТІ --- */

.accent-link {
    color: #ffffff;
    /* Початковий колір - білий, як і решта тексту */
    text-decoration: underline;
    /* Додаємо підкреслення */
    text-underline-offset: 5px;
    /* Дизайнерський відступ лінії від тексту */
    text-decoration-thickness: 1px;
    /* Товщина лінії */
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
    font-weight: 500;
    /* Робимо посилання трохи помітнішим (Medium) */
}

.accent-link:hover {
    /* ЗАМІНИ #ff4500 НА СВІЙ АКЦЕНТНИЙ КОЛІР */
    color: var(--main-accent);
    text-decoration-color: var(--main-accent);
    /* Лінія теж змінює колір */
}

/* Прибираємо стандартне виділення посилань, якщо вони вже були відвідані */
.accent-link:visited {
    color: #ffffff;
}

/* При ховері на відвідане посилання теж має бути акцент */
.accent-link:visited:hover {
    color: var(--main-accent);
}

/* =========================================
/* =========================================
   9. FOOTER
   ========================================= */

.site-footer {
    background-color: var(--header-bg);
    /* Дуже темний фон, майже чорний */
    color: #ffffff;
    padding-top: 80px;
    padding-bottom: 30px;
}

.footer-top {
    display: grid;
    /* 4 колонки: 1.5 частини, 1 частина, 1 частина, 1.2 частини */
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* --- ЛОГОТИП У ФУТЕРІ --- */
.logo-futer {
    display: inline-block;
    /* Щоб посилання коректно обгортало картинку */
    margin-bottom: 20px;
    /* Відступ від логотипа до тексту опису */
}

.logo-futer img {
    display: block;
    /* Прибирає "невидимий відступ" знизу картинки */
    width: 100%;
    /* Картинка займає всю ширину блоку... */
    max-width: 180px;
    /* ...АЛЕ не більше 180 пікселів. Це оптимальний розмір для футера. */
    height: auto;
    /* Зберігаємо пропорції (щоб не сплющило) */
    object-fit: contain;
    /* Гарантує, що картинка влізе красиво */
}

/* --- АДАПТАЦІЯ ДЛЯ ТЕЛЕФОНУ --- */
@media (max-width: 768px) {
    .logo-futer {
        /* Центруємо сам блок посилання */
        display: block;
        margin: 0 auto 20px auto;
        text-align: center;
    }

    .logo-futer img {
        /* Центруємо картинку всередині */
        margin: 0 auto;
        /* На телефоні можна зробити трохи менше, щоб не займало пів екрану */
        max-width: 160px;
    }
}

/* --- КОЛОНКИ --- */
.footer-col {
    display: flex;
    flex-direction: column;
}

.brand-col .footer-desc {
    color: #a0a0a0;
    line-height: 1.6;
    margin-top: 20px;
    font-size: 0.95rem;
    max-width: 300px;
}

.footer-title {
    font-family: 'Gilroy', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- ПОСИЛАННЯ --- */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

/* Ефект ховеру: стає помаранчевим і трохи зсувається */
.footer-links a:hover {
    color: var(--main-accent);
    padding-left: 5px;
}

/* --- КОНТАКТИ --- */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;

}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    /* Вирівнювання по верху */
    gap: 15px;
    margin-bottom: 20px;
    color: #a0a0a0;
}

.footer-contact-list a {
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact-list a:hover {
    color: var(--main-accent);
    padding-left: 5px;
}

.footer-icon {
    width: 20px;
    height: 20px;
    /* Робимо іконки помаранчевими через фільтр (якщо вони svg) */
    /* Або білими, як вам більше подобається */
    filter: invert(36%) sepia(31%) saturate(4326%) hue-rotate(360deg) brightness(92%) contrast(74%);
    /* Код для орієнтовно помаранчевого */
    margin-top: 2px;
}

/* --- СОЦМЕРЕЖІ (Стиль кнопок як у навігації) --- */
.footer-socials {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    /* Білі іконки */
    transition: all 0.3s ease;
}

.social-btn:hover {
    border-color: var(--main-accent);
    transform: translateY(-3px);
}

.social-btn:hover img {
    /* Тут можна зробити іконку помаранчевою або залишити білою */
    filter: none;
}


/* --- НИЖНЯ ЧАСТИНА (BOTTOM) --- */
.footer-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-bottom: 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--main-accent);
}

.footer-copy {
    color: #888888;
    /* Класичний спокійний сірий */
    font-size: 14px;
    /* Зазвичай копірайт роблять трохи меншим */
    text-align: center;
    margin-top: 20px;
    opacity: 0.7;
    /* Додатково приглушуємо яскравість */
    font-family: 'Google Sans', sans-serif;
}

/* =========================================
   АДАПТАЦІЯ ФУТЕРА
   ========================================= */

@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        /* 2 колонки на планшеті */
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 60px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        /* 1 колонка на телефоні */
        gap: 40px;
        text-align: center;
        /* Центруємо текст для краси */
    }

    .brand-col .footer-desc {
        margin: 20px auto 0 auto;
        /* Центруємо опис */
    }

    .footer-contact-list li {
        justify-content: center;
        /* Центруємо контакти */
    }

    .footer-socials {
        justify-content: center;
        /* Центруємо соцмережі */
    }

    /* Нижній бар теж у стовпчик */
    .footer-bottom {
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
        text-align: center;
    }
}

/* =========================================
   10. MODAL (POPUP)
   ========================================= */

/* Затемнення фону */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Темний напівпрозорий фон */
    backdrop-filter: blur(5px);
    /* Ефект розмиття (як на iPhone) */
    z-index: 9999;
    /* Поверх усього */

    /* Стан "Приховано" */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Стан "Активно" (додається через JS) */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Саме вікно */
.modal-content {
    background-color: #2b2b2b;
    /* Темно-сірий фон картки */
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* Анімація появи (збільшення) */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Тексти */
.modal-title {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

.modal-subtitle {
    color: #aaa;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.4;
}

/* Поля вводу */
.input-group {
    margin-bottom: 20px;
}

.modal-input {
    width: 100%;
    padding: 15px;
    background-color: #1a1a1a;
    /* Ще темніший фон для полів */
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.modal-input:focus {
    border-color: var(--main-accent);
    /* Помаранчевий при кліку */
}

/* Кнопка */
.modal-submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--main-accent);
    /* Помаранчевий градієнт */
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 1px;
}

.modal-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
}

/* Налаштування поля вводу з прапорцем */
.iti {
    width: 100%;
    display: block;
}

/* Колір тексту в полі вводу */
.iti__form-control {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    width: 100%;
}

/* Список країн (Dropdown) */
.iti__country-list {
    background-color: #2b2b2b;
    /* Темний фон списку */
    color: #fff;
    border: 1px solid #444;

    /* ВАЖЛИВО: щоб список не ховався за межами модалки */
    z-index: 10000 !important;
}

/* Колір при наведенні на країну */
.iti__country.iti__highlight {
    background-color: #444;
}

/* Розділювач */
.iti__flag-box,
.iti__country-name {
    margin-right: 6px;
}

/* =========================================
   ШРИФТИ ДЛЯ МОДАЛЬНИХ ВІКОН (Google Sans)
   ========================================= */

/* 1. Заголовки та тексти */
.modal-title,
.modal-subtitle,
.modal-content p {
    font-family: 'Google Sans', sans-serif !important;
}

/* 2. Поля вводу (Ім'я та Телефон) */
.modal-input,
.iti__selected-flag,
/* Текст обраної країни */
.iti__country-list

/* Список країн */
    {
    font-family: 'Google Sans', sans-serif !important;
}

/* 3. Кнопка "Чекаю дзвінка" та "Зрозуміло" */
.modal-submit-btn {
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 700;
    /* Жирний, щоб краще виглядало */
    letter-spacing: 1px;
    /* Трохи розрядити літери */
}

/* 4. Налаштування ваги шрифтів для краси */
.modal-title {
    font-weight: 800;
    /* Дуже жирний заголовок */
}

.modal-subtitle {
    font-weight: 500;
    /* Середня товщина для підзаголовка */
}

.modal-input {
    font-weight: 600;
    /* Жирний текст, коли людина вводить дані */
}

/* =========================================
   FAB BUTTON (RIGHT BOTTOM)
   ========================================= */

/* Контейнер кнопки (Фіксований у кутку) */
.fab-container {
    position: fixed;
    bottom: 30px;
    /* Відступ знизу */
    right: 30px;
    /* Відступ справа */
    z-index: 999;
    /* Поверх усього */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Показуємо тільки на екранах < 1190px */
    display: none;
}

@media (max-width: 1190px) {
    .fab-container {
        display: flex;
        /* Вмикаємо на мобільних */
    }
}

/* --- ГОЛОВНА КНОПКА --- */
.fab-main-btn {
    width: 60px;
    height: 60px;
    background: #1a1a1a;
    border-radius: 50%;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    position: relative;
    z-index: 2;
    /* Щоб була вище за опції при анімації */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Пульсація */
.fab-main-btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 2px solid #424141;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Іконки всередині кнопки */
.fab-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.icon-closed {
    filter: brightness(0) invert(1);
}

.icon-closed,
.icon-opened {
    position: absolute;
    transition: all 0.3s ease;
}

.icon-opened {
    opacity: 0;
    transform: rotate(-90deg);
}


/* --- МЕНЮ ОПЦІЙ (Виїжджає ВВЕРХ) --- */
.fab-options {
    position: absolute;
    bottom: 75px;
    left: 0;
    right: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;

    /* Стан: Приховано */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* --- СТИЛЬ КНОПОК МЕНЮ (Темні з помаранчевими іконками) --- */
.fab-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* ТЕМНИЙ ФОН (щоб було видно помаранчеву іконку) */
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(10px);
    ;
    border: 1px solid #444;
    /* Легка рамка для виділення */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    text-decoration: none;
    transition: transform 0.2s, background-color 0.3s;
}

/* Налаштування самих іконок */
.fab-option img {
    width: 34px;
    /* Оптимальний розмір */
    height: 34px;

    /* ВАЖЛИВО: Прибираємо будь-які фільтри, 
       щоб іконка залишалася помаранчевою */
    /* filter: none; */
    filter: brightness(0) invert(1);
}

/* Ефект натискання */
.fab-option:active {
    transform: scale(0.9);
}

/* Ховер ефект (трохи світлішає при наведенні) */
.fab-option:hover {
    background-color: #383838;
    border-color: #ff8c00;
    /* При наведенні рамка стає помаранчевою */
}

/* АКТИВАЦІЯ МЕНЮ (Коли натиснули головну кнопку) */
.fab-container.active .fab-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Затримка появи кнопок (щоб вилітали по черзі) */
.fab-options .fab-option:nth-child(4) {
    transition-delay: 0.05s;
}

/* WhatsApp */
.fab-options .fab-option:nth-child(3) {
    transition-delay: 0.1s;
}

/* Telegram */
.fab-options .fab-option:nth-child(2) {
    transition-delay: 0.15s;
}

/* Viber */
.fab-options .fab-option:nth-child(1) {
    transition-delay: 0.2s;
}

/* Call */




/* --- АКТИВНИЙ СТАН (Відкрито) --- */
.fab-container.active .fab-main-btn {
    transform: scale(1.1);
    background: #333;
    /* Кнопка стає темною */
}

.fab-container.active .icon-closed {
    opacity: 0;
    transform: rotate(90deg);
}

.fab-container.active .icon-opened {
    opacity: 1;
    transform: rotate(0);
}

/* Показати меню */
.fab-container.active .fab-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Піднімається на місце */
}

/* =========================================
   БЛОК НОВИН (Таби та Картки)
   ========================================= */

.news-section {
    margin: 0 0 40px 0;
}

/* Таби */
.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    justify-content: center;
}

.tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--text-color);
    color: #fff;
    font-family: 'Google Sans', sans-serif;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.tab-btn.active,
.tab-btn:hover {
    background: linear-gradient(135deg, var(--main-accent));
    border-color: transparent;
}

/* Сітка новин */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Картка новини */
.news-card {
    background: var(--header-bg);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 2px 5px 0 var(--black);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.news-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-date {
    color: var(--main-accent);
    font-size: 0.85rem;
    margin-bottom: 10px;
    font-family: 'Google Sans', sans-serif;
}

.news-card h3 {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.news-card p {
    color: #aaa;
    font-size: 0.95rem;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Кнопка читати далі */
.read-more {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    border-bottom: 1px solid var(--main-accent);
    align-self: flex-start;
    padding-bottom: 2px;
    transition: color 0.3s;
}

.read-more:hover {
    color: var(--main-accent);
}

/* =========================================
   СТОРІНКА ЧИТАННЯ НОВИНИ (article.html)
   ========================================= */

/* Загальний фон та відступи сторінки */
.article-page {
    padding: 120px 0 80px 0;
    background-color: #1a1a1a;
    /* Темний фон сайту */
    min-height: 60vh;
}

/* Звужуємо контейнер, щоб текст було зручно читати */
.article-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Кнопка "Назад" */
.btn-back {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.btn-back:hover {
    color: var(--main-accent);
    /* Ваш акцентний колір */
}

/* Заголовок статті */
.article-title {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    margin-bottom: 15px;
    font-size: 2.5rem;
    line-height: 1.2;
}

/* Дата */
.article-meta {
    color: var(--main-accent);
    font-family: 'Google Sans', sans-serif;
    display: block;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Головне фото */
.article-image {
    width: 100%;
    max-height: 450px;
    /* Щоб вертикальні фото не займали весь екран */
    object-fit: cover;
    /* Красиво обрізає фото під розмір */
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Текст самої новини */
.article-body {
    color: #e0e0e0;
    font-family: 'Google Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    /* Збільшений міжрядковий інтервал для легкості читання */
}

.article-body p {
    margin-bottom: 20px;
}

/* Виділення жирним в тексті */
.article-body b,
.article-body strong {
    color: #fff;
}

/* --- СТИЛІ ДЛЯ БЛОКУ CEO --- */
.ceo-block {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Відстань між фото і текстом */
    margin-bottom: 40px;
    /* Відстань до кнопки */
    padding-left: 15px;
}

.ceo-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Робить фото круглим */
    object-fit: cover;
    border: 2px solid #333;
    /* Легка рамка навколо фото */
}

.ceo-info {
    display: flex;
    flex-direction: column;
}

.ceo-name {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
}

.ceo-position {
    font-family: 'Google Sans', sans-serif;
    color: var(--main-accent);
    /* Акцентний колір для посади */
    font-size: 0.9rem;
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
    .ceo-block {
        margin-bottom: 30px;
    }
}

/* =========================================
   ХЛІБНІ КРИХТИ (BREADCRUMBS)
   ========================================= */

/* =========================================
   ПОЗИЦІОНУВАННЯ КРИХТ НА ГОЛОВНОМУ ЕКРАНІ
   ========================================= */

/* 1. Головний екран стає "маяком" для абсолютних елементів */
.page-hero {
    position: relative;
    /* ОБОВ'ЯЗКОВО для роботи абсолютного позиціонування всередині */
    padding-bottom: 100px;
    /* Робимо відступ знизу, щоб текст банера не наліз на крихти */
}

/* 2. Контейнер, який притискається до низу екрана */
.hero-bottom-left {
    position: absolute;
    bottom: 60px;
    /* Відстань від нижнього краю банера (можна міняти) */
    left: 0;
    width: 100%;
    /* Розтягуємо на всю ширину, щоб всередині спрацював page-container */
    z-index: 10;
    /* Щоб крихти були поверх фону */
}

/* 3. Оновлюємо самі крихти (прибираємо старі відступи) */
.breadcrumbs-container {
    padding: 0;
    background-color: transparent;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Google Sans', sans-serif;
    font-size: 0.95rem;
}

.breadcrumb-item a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--main-accent);
}

.breadcrumb-separator {
    color: #696969;
    margin: 0 12px;
    font-size: 0.9rem;
    user-select: none;
}

.breadcrumb-item.active {
    color: #ffffff;
    font-weight: 500;
}

/* =========================================
   АДАПТАЦІЯ КРИХТ ДЛЯ ПЛАНШЕТІВ ТА МОБІЛЬНИХ
   ========================================= */
/* 3. Адаптація для планшетів та телефонів (< 1024px) */
@media (max-width: 1024px) {

    /* Повністю приховуємо блок з крихтами */
    .hero-bottom-left {
        display: none;
    }

    /* Прибираємо штучний відступ знизу у банера, оскільки крихт там більше немає */
    .hero-inner-container {
        padding-bottom: 0;
    }
}

/* =========================================
   ТАБИ ПОСЛУГ
   ========================================= */

/* Навігація (кнопки) */
.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    /* Для перенесення на мобільних */
}



/* Обгортка контенту */
.tabs-content-wrapper {
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 1px 2px 5px 0 var(--black);
    max-width: 1000px;
    margin: 0 auto;
    /* Центруємо блок */
    min-height: 250px;
    /* Фіксуємо мінімальну висоту, щоб блок не стрибав при перемиканні */
}

/* Самі панелі з контентом */
.tab-panel {
    display: none;
    /* Ховаємо всі панелі за замовчуванням */
    animation: fadeIn 0.5s ease;
}

.tab-panel.active {
    display: block;
    /* Показуємо тільки активну */
}

.tab-title {
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.includes-title {
    margin-top: 0;
    /* Прибрали зайвий відступ зверху, бо працює margin-bottom від .tab-desc */
    margin-bottom: 15px;
    /* Рівний крок */
    color: #fff;
    font-family: 'Google Sans', sans-serif;
    font-size: 1.2rem;
}

.tab-list {
    margin: 0 0 25px 0;
    /* Рівномірний відступ до кнопки знизу */
    padding: 0;
    list-style-type: none;
}

/* Малюємо помаранчевий буліт (крапку) перед кожним пунктом */
.tab-list li::before {
    content: "✓";
    /* Замінили "✓" на жирну крапку (буліт) */
    color: var(--main-accent);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.5rem;
    /* Зробили крапку трохи більшою */
    line-height: 1.1;
    /* Вирівняли крапку по висоті тексту */
}

.tab-list li {
    margin-bottom: 10px;
    /* Зменшили з 12px до 10px для акуратності */
    padding-left: 30px;
    position: relative;
    color: #ccc;
    font-size: 1.05rem;
    line-height: 1.5;
}

.tab-action {
    margin-top: 0;
    /* Прибрали велетенський відступ, тепер відступ диктує низ списку */
    text-align: center;
}

.tab-subtitle {
    margin-bottom: 15px;
    /* Рівний крок */
    color: var(--main-accent);
    font-family: 'Google Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

.tab-desc {
    margin-bottom: 20px;
    /* Трохи більший відступ перед новим логічним блоком */
    color: #ccc;
    line-height: 1.6;
    font-size: 1.1rem;
}

.tab-action {
    margin-top: 20px;
}



/* Анімація плавної появи */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
    .tabs-nav {
        flex-direction: column;
        gap: 10px;
    }

    .tab-btn {
        width: 100%;
    }

    .tabs-content-wrapper {
        padding: 25px 20px;
    }

    .tab-title {
        font-size: 1.5rem;
    }
}

/* =========================================
   ТАБИ АВТОПАРКУ (З картинками на ПК)
   ========================================= */
.fleet-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.fleet-tab {
    flex: 1;
    max-width: 250px;
    height: 180px;
    /* Фіксована висота таба, щоб вони були однакові */
    background-color: transparent;
    border: none;
    border-bottom: none;
    padding: 10px 10px 15px 10px;
    cursor: pointer;
    text-align: center;
    overflow: visible;
    /* ВАЖЛИВО: Забороняємо обрізати картинки, якщо вони трохи вилізуть */

    /* Трюк для вирівнювання: притискаємо все донизу */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    transition: all 0.3s ease;
}

.fleet-tab.active {
    border-color: var(--main-accent);
}

.tab-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    transition: opacity 0.3s;
}

/* Базові стилі для всіх машинок */
.tab-img-transparent {
    width: auto;
    /* Ширина підлаштовується автоматично під висоту */
    object-fit: contain;
    /* Малюнок не спотворюється */
    margin: 0 auto 15px auto;
    /* Відступ 15px від тексту вниз */
    display: block;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: grayscale(100%);
}

/* =========================================
  ПРОПОРЦІЇ АВТОМОБІЛІВ (РЕАЛЬНІ РОЗМІРИ)
  ========================================= 
*/
.img-car {
    height: 60px;
    /* Седан - найнижчий */
}

.img-minivan {
    height: 85px;
    /* Мінівен - вищий і масивніший */
}

.img-minibus {
    height: 100px;
    /* Мікроавтобус (Спринтер) - найбільший */
}

.img-biznes {
    height: 60px;
}

.img-vip {
    height: 60px;
}

.img-minivan-comfort {
    height: 80px;
}

.img-minivan-biznes {
    height: 80px;
}

.img-minivan-vip {
    height: 80px;
}

/* Ефекти при наведенні та кліку (анімація збільшення) */
.fleet-tab:hover .tab-img-transparent,
.fleet-tab.active .tab-img-transparent {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
    /* Легке збільшення, не робіть більше, щоб не обрізалось */
}


.fleet-tab:hover .tab-img,
.fleet-tab.active .tab-img {
    opacity: 1;
}

.tab-text {
    display: block;
    color: #ffffff;
    /* Робимо текст білим завжди */
    font-family: 'Google Sans', sans-serif;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

/* Базовий стиль для тексту всіх табів (сірий або білий) */
.tab-text {
    display: block;
    color: #888;
    /* Базовий колір неактивного тексту */
    font-family: 'Google Sans', sans-serif;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    /* Плавна зміна кольору */
}

/* КОЛІР ДЛЯ АКТИВНОГО ТАБА ТА ПРИ НАВЕДЕННІ */
.fleet-tab.active .tab-text,
.fleet-tab:hover .tab-text {
    color: var(--main-accent);
    /* Ваш акцентний колір */
}

/* =========================================
   АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (< 768px)
   ========================================= */
@media (max-width: 768px) {

    /* ... ваші інші мобільні стилі ... */

    /* Примусово залишаємо текст білим при натисканні (активний стан) і тапах (hover) на мобільному */
    .fleet-tab:hover .tab-text,
    .fleet-tab.active .tab-text {
        color: #ffffff;
    }

    /* Якщо ви хочете, щоб на телефоні текст табів ЗАВЖДИ був білим (навіть неактивних), додайте ще це: */
    .tab-text {
        color: #ffffff;
    }


    /* 1. Навігація: ставимо кнопки одна під одною (стовпчиком) */
    .fleet-tabs-nav {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px;
    }

    /* 2. Повністю ховаємо машинки на телефоні */
    .tab-img-transparent {
        display: none !important;
    }

    /* 3. Перетворюємо таби на звичайні кнопки */
    .fleet-tab {
        height: auto;
        /* Прибираємо висоту 180px */
        max-width: 100%;
        /* Розтягуємо на всю ширину */
        background-color: transparent;
        border: 2px solid #333;
        /* Додаємо рамку, як у звичайних кнопок */
        border-radius: 8px;
        /* Закруглюємо кути */
        padding: 15px 20px;
        justify-content: center;
    }

    /* 4. Активна кнопка на телефоні (заливається помаранчевим) */
    .fleet-tab.active {
        background-color: #ff8c00;
        border-color: #ff8c00;
    }

    /* 5. Текст на мобільному завжди білий і трохи менший */
    .tab-text {
        color: #ffffff;
        font-size: 1.1rem;
    }

    /* Гарантуємо, що текст не стане помаранчевим при кліку на телефоні */
    .fleet-tab:hover .tab-text,
    .fleet-tab.active .tab-text {
        color: #ffffff;
    }

    /* ... тут ваші інші мобільні стилі (для карток, попапу тощо) ... */
}


/* =========================================
   СІТКА КАРТОК АВТО
   ========================================= */
.fleet-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.fleet-panel.active {
    display: block;
}

.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.car-card {
    background-color: transparent;
    /* Прибрали темний фон #111 */
    box-shadow: none;
    /* Прибрали тінь, якщо вона була */
    border-radius: 0;
}

.car-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    /* Радіус 12px тепер застосовується саме до фото */
    display: block;
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Анімація при наведенні (Hover) на картку */
.car-card:hover .car-card-img {
    transform: translateY(-8px);
    /* Фотографія "підстрибує" на 8 пікселів вгору */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
    /* Тінь стає глибшою, створюючи об'єм */
}

.car-card-body {
    padding: 0 0 0 0;
    /* Прибрали бокові відступи, залишили тільки зверху */
}

.car-card-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 20px !important;
    color: #fff;
    margin: 15px 0;
    text-align: left;
    /* Вирівнюємо назву чітко по лівому краю */
}

.car-card-actions {
    display: flex;
    gap: 10px;
}

.btn-outline {
    flex: 1;
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 10px;
    border-radius: 12px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.1s ease;
    text-transform: none;
}

.btn-outline:hover {
    border: 2px solid var(--main-accent);
    color: var(--main-accent);
    transform: scale(1.05);
}

.btn-small {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 1rem;
    display: inline-block;
}

/* =========================================
   МОДАЛЬНЕ ВІКНО (ПОПАП)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #1a1a1a;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.car-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.car-carousel::-webkit-scrollbar {
    display: none;
}

.carousel-img {
    width: 100%;
    /* Фото займає всю ширину каруселі */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Автоматично обрізає краї, не розтягуючи фото */
    flex-shrink: 0;
    /* Забороняє стискання картинки в flex-контейнері */
    scroll-snap-align: start;
    /* Магнітний ефект при гортанні */
}




.carousel-hint {
    text-align: center;
    color: #aaa;
    font-size: 0.8rem;
    padding: 5px 0;
    background: #111;
}

.modal-info {
    padding: 25px;
}

.modal-car-title {
    color: #fff;
    font-family: 'Google Sans', sans-serif;
    margin-bottom: 15px;
}

.modal-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 5px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.modal-specs li {
    color: #ccc;
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
}

.modal-specs span {
    color: #ff8c00;
    font-weight: bold;
}

.modal-desc {
    color: #aaa;
    margin-bottom: 25px;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
}

.modal-btn-order {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Обгортка каруселі для позиціонування стрілок */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 60px;
}

/* Кнопки-стрілки (На ПК) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.carousel-btn:hover {
    background: var(--main-accent);
    /* Фірмовий колір при наведенні */
}

/* Розставляємо стрілки по краях */
.prev-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

/* Плейсхолдер (Крапки пагінації) */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 15px 0;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    background: #555;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: var(--main-accent);
    /* Активна крапка стає помаранчевою і трохи більшою */
    transform: scale(1.2);
}

/* Ховаємо старий текст, якщо ви його не видалили */
.carousel-hint {
    display: none;
}

/* =========================================
   АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (< 768px)
   ========================================= */
@media (max-width: 768px) {
    .fleet-tabs-nav {
        flex-direction: column;
        gap: 10px;
    }

    /* На мобільних ховаємо фото табів і робимо їх просто кнопками */
    .tab-img {
        display: none;
    }

    .fleet-tab {
        padding: 15px;
        background-color: transparent;
        border: 2px solid var(--text-color);
        color: var(--text-color);
        padding: 10px 20px;
        background: transparent;
        border: 1px solid var(--text-color);
        color: #fff;
        font-family: 'Google Sans', sans-serif;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.1s ease;
    }

    .fleet-tab.active {
        background: var(--main-accent);
        border-color: transparent;
        color: var(--text-color);
    }


    .tab-text {
        color: var(--text-color);
        position: static;
        text-shadow: none;
    }

    .car-card-actions {
        flex-direction: column;
        /* Вибудовує елементи один над одним */
        gap: 10px;
        /* Відстань між кнопками */
    }

    /* 2. Розтягуємо кожну кнопку на 100% ширини */
    .car-card-actions .btn-outline,
    .car-card-actions .btn-small {
        width: 100%;
        flex: none;
        /* Вимикаємо пропорційне розтягування, яке працювало на ПК */
        box-sizing: border-box;
        /* Щоб рамки і відступи не вилазили за краї */
    }

    /* На телефонах стрілки не потрібні, там зручно свайпати пальцем */
    .carousel-btn {
        display: none;
    }

    .carousel-dots {
        padding: 10px 0;
    }
}

/* =========================================
   АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (< 768px)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Забираємо будь-які відступи у темного фону-обгортки */
    .modal-overlay {
        padding: 0 !important;
    }

    /* 2. Жорстко задаємо фулскрін і центрування */
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        /* 100% видимої висоти екрану */
        max-width: 100% !important;
        max-height: none !important;
        /* Знімаємо обмеження висоти */
        border-radius: 0 !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Примусове центрування по вертикалі */
        align-items: center !important;
        /* Центрування по горизонталі (для крапочок і тексту) */

        overflow-y: auto;
        padding: 0px 10px;
    }

    /* 3. Фіксуємо хрестик, щоб він не брав участі у флекс-центруванні */
    .modal-close {
        position: fixed !important;
        top: 50px !important;
        right: 20px !important;
        z-index: 100 !important;
    }

    /* 4. Контейнер з фотографією (щоб він не розтягувався на весь екран) */
    .carousel-wrapper {
        width: 100%;
        flex: none !important;
    }

    /* 5. Контейнер з текстом (щоб текст був по лівому або по центру, як вам зручніше) */
    .modal-info {
        width: 100%;
        box-sizing: border-box;
        padding: 15px !important;
        flex: none !important;
    }
}

/* =========================================
   СЕКЦІЯ ТАРИФІВ ТА ТАБЛИЦЯ
   ========================================= */
.tariffs-section,
.rental-tariffs-section {
    padding: 80px 0;
}

/* Навігація табів тарифів (у вигляді акуратних кнопок) */
.tariff-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.tariff-tab {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--text-color);
    color: #fff;
    font-family: 'Google Sans', sans-serif;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.tariff-tab.active,
.tariff-tab:hover {
    background: linear-gradient(135deg, var(--main-accent));
    border-color: transparent;
}

@media (max-width: 768px) {
    .tariff-tab {
        width: 100%;
    }
}

/* Панелі табів */
.tariff-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tariff-panel.active {
    display: block;
}

.tariff-content-wrapper {
    width: 100%;
}

/* Обгортка таблиці (для заокруглення та чорного фону) */
.table-responsive {
    background-color: var(--header-bg);
    /* Чорний фон таблиці */
    border-radius: 12px;
    /* Радіус 12px */
    overflow-x: auto;
    /* Горизонтальний скрол для телефонів */
    box-shadow: 1px 2px 5px 0 var(--black);
    width: 100%;
    box-sizing: border-box;
}

/* Сама таблиця */
.price-table {
    width: 100%;
    border-collapse: collapse;
    /* Прибираємо подвійні лінії між клітинками */
    text-align: left;
    font-family: 'Google Sans', sans-serif;
}

/* Заголовки стовпчиків */
.price-table th {
    padding: 20px;
    color: #888;
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--main-accent);
    text-align: center;
    /* Трохи товстіша акцентна лінія під заголовком */
}

/* Клітинки з цінами та маршрутами */
.price-table td {
    padding: 20px;
    color: #fff;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 140, 0, 0.3);
    text-align: center;
    /* Напівпрозора помаранчева лінія */
}

/* Прибираємо лінію у самого останнього рядка, щоб не псувати радіус знизу */
.price-table tbody tr:last-child td {
    border-bottom: none;
}

/* Маршрут робимо білим і жирнішим для акценту */
.price-table td:first-child {
    font-weight: bold;
    color: #ffffff;
    text-align: left;
}

/* АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ */
@media (max-width: 768px) {
    .tariff-tabs-nav {
        flex-direction: column;
    }

    .price-table th,
    .price-table td {
        padding: 15px;
        font-size: 1rem;
        white-space: nowrap;
        /* Забороняємо перенесення тексту на телефоні, щоб таблиця рівно скролилась вбік */
    }
}

/* =========================================
   ГОРИЗОНТАЛЬНИЙ СКРОЛ ДЛЯ ВСІХ ТАБІВ НА МОБІЛЬНИХ (< 768px)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Вкажіть тут класи всіх ваших контейнерів з табами. 
   Я додав найпопулярніші назви (.tabs-nav), змініть їх на свої за потреби */
    .news-tabs,
    .tabs-nav,
    .fleet-tabs-nav,
    .tariff-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        /* Забороняємо перенос на новий рядок */
        justify-content: flex-start;
        /* Притискаємо до лівого краю */

        overflow-x: auto;
        /* Вмикаємо горизонтальний свайп */
        overflow-y: hidden;
        /* Ховаємо вертикальний перенос */

        -webkit-overflow-scrolling: touch;
        /* Плавний "інерційний" скрол для iPhone */
        scrollbar-width: none;
        /* Ховаємо повзунок у Firefox */

        padding-bottom: 10px;
        /* Відступ знизу, щоб скрол не перекривав кнопки */
        margin-bottom: 20px;
    }

    /* 2. Ховаємо повзунок скролу в Chrome / Safari / Edge */
    .tabs-nav::-webkit-scrollbar,
    .news-tab::-webkit-scrollbar,
    .fleet-tabs-nav::-webkit-scrollbar,
    .tariff-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    /* 3. Забороняємо самим кнопкам стискатися і ламати текст */
    .news-tabs,
    .tabs-nav,
    .fleet-tabs-nav,
    .tariff-tabs-nav {
        flex: 0 0 auto !important;
        /* Кнопка тримає свій розмір */
        white-space: nowrap !important;
        /* Текст строго в один рядок */
    }
}

.open-booking-btn,
.open-event-btn,
.open-tourism-btn,
.open-rental-btn,
.open-wedding-btn {
    display: inline-flex;
    background-color: var(--main-accent);
    color: #ffffff;
    border: 2px solid var(--main-accent);
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 12px;
    /* Плавний перехід - обов'язково має бути тут! */
    transition: transform 0.1s ease-in, background-color 0.1s ease-in, box-shadow 0.1s ease-in;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.open-booking-btn:hover,
.open-event-btn:hover,
.open-tourism-btn:hover,
.open-rental-btn:hover,
.open-wedding-btn:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {

    .open-booking-btn,
    .open-event-btn,
    .open-tourism-btn,
    .open-rental-btn,
    .open-wedding-btn {
        width: 100%;
    }
}

/* =========================================
   ПОКРОКОВА ФОРМА ТРАНСФЕРУ
   ========================================= */
.booking-wizard {
    max-width: 500px;
    font-family: 'Google Sans', sans-serif;
}

.booking-wizard h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-align: center;
}

/* Прогрес-бар */
.wizard-progress {
    width: 100%;
    height: 6px;
    background: #222;
    margin-bottom: 25px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--main-accent);
    width: 16.66%;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Кроки */
.wizard-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Поля з іконками */
.input-with-icon {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    pointer-events: none;
    /* Щоб клік проходив крізь іконку на інпут */
}

.input-with-icon input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    /* Місце для іконки */
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    font-family: 'Google Sans', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.input-with-icon input:focus {
    border-color: #ff8c00;
    outline: none;
}

/* Кастомізація календаря (Крок 3) */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    /* Робить іконку календарика білою */
    cursor: pointer;
}

input[type="date"] {
    color-scheme: dark;
    /* Темна тема для спливаючого календаря */
}

/* Радіокнопки месенджерів (Крок 5) */
.radio-group-messengers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.radio-label input {
    display: none;
}

.radio-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #0a0a0a;
    color: #bbb;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.radio-label input:checked+.radio-custom {
    border-color: #ff8c00;
    color: #fff;
    background: rgba(255, 140, 0, 0.1);
}

/* Кнопки Назад/Далі */
.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}

.wizard-actions.right-align {
    justify-content: flex-end;
}

.btn-secondary {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Google Sans', sans-serif;
    flex: 1;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #222;
}

.wizard-actions .btn-cta {
    flex: 1;
}

.phone-input-wrapper .iti {
    width: 100%;
}

/* Нові унікальні класи для кнопок форми, щоб не було конфлікту з .btn-cta */
.wizard-btn-next,
.wizard-btn-submit {
    background: var(--main-accent);
    /* Ваш колір */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 12px;
    font-family: 'Google Sans', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* Для рівномірного розподілу в ряду з кнопкою "Назад" */
}

.wizard-btn-next:hover,
.wizard-btn-submit:hover {
    background: var(--main-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

.wizard-btn-next:active,
.wizard-btn-submit:active {
    transform: translateY(0);
}

/* Універсальний стиль для кнопки закриття (кружечка) */
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    /* Фіксована ширина кружечка */
    height: 34px;
    /* Фіксована висота кружечка */

    /* ЦЕНТРУВАННЯ СИМВОЛУ "×" ТОЧНО ПОСЕРЕДИНІ */
    display: flex;
    align-items: center;
    /* Центрування по вертикалі */
    justify-content: center;
    /* Центрування по горизонталі */

    background: rgba(255, 255, 255, 0.05);
    /* Легкий фон */
    border-radius: 50%;
    /* Робимо коло */

    color: #888;
    /* Колір хрестика */
    font-size: 28px;
    /* Розмір хрестика */
    font-family: Arial, sans-serif;
    /* Шрифт для гарного символу "×" */
    line-height: 1;
    /* Прибираємо вплив висоти рядка */
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;

    /* Скидаємо можливі відступи, які заважають */
    padding: 0;
    margin: 0;
    border: none;
}

/* Ефект при наведенні */
.modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: rotate(90deg);
    /* Стильний поворот при наведенні */
}

/* ЗАБЕЗПЕЧЕННЯ МІСЦЯ ПІД ХРЕСТИК В КОНТЕНТІ */
.modal-content {
    position: relative;
    /* Обов'язково для позиціонування хрестика */
    padding-top: 10px;
    /* Звільняємо місце під хрестик зверху в усіх формах */
}

/* Адаптація поля телефону intl-tel-input */
.phone-input-container {
    width: 100%;
    margin-bottom: 15px;
}

/* Примушуємо обгортку плагіна бути на всю ширину */
.phone-input-container .iti {
    width: 100%;
    display: block;
}

/* Стилізація самого інпуту телефону */
.phone-input-container input#client-phone,
#event-phone,
#tourism-phone,
#wed-client-phone,
#rental-client-phone {
    width: 100% !important;
    padding: 14px 15px 14px 100px !important;
    /* Більший відступ зліва для прапорця */
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    font-family: 'Google Sans', sans-serif;
    font-size: 1rem;
    height: 52px;
    /* Така ж висота, як у інших полів */
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.phone-input-container input#client-phone,
#event-phone,
#tourism-phone,
#wed-client-phone:focus {
    border-color: #ff8c00;
    outline: none;
}

/* Стилізація випадаючого списку країн (Темна тема) */
.iti__country-list {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    max-width: 300px;
    border-radius: 8px;
    font-family: 'Google Sans', sans-serif;
}

.iti__country:hover,
.iti__highlight {
    background-color: #333 !important;
}

.iti__selected-flag {
    background-color: transparent !important;
    padding-left: 15px !important;
}

.iti__arrow {
    border-top-color: #888 !important;
}

.iti__arrow--up {
    border-bottom-color: #888 !important;
}

/* Стилі для іконок з бібліотек (FontAwesome / Boxicons) */
.messenger-icon {
    font-size: 32px;
    /* Розмір іконки */
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.radio-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px !important;
    border: 1px solid #333;
    background: #0a0a0a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* При виборі картка підсвічується, а іконка трохи збільшується */
.radio-label input:checked+.radio-custom {
    border-color: var(--main-accent);
    background: rgba(255, 140, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
}

.radio-label input:checked+.radio-custom .messenger-icon {
    transform: scale(1.15);
}

.radio-custom span {
    font-family: 'Google Sans', sans-serif;
    font-size: 0.9rem;
    color: #bbb;
}

.radio-label input:checked+.radio-custom span {
    color: #fff;
    font-weight: bold;
}

/* Змінюємо колір обраної дати на ваш помаранчевий */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--main-accent) !important;
    border-color: var(--main-accent) !important;
}

/* Колір сьогоднішньої дати */
.flatpickr-day.today {
    border-color: var(--main-accent) !important;
}

.flatpickr-day.today:hover {
    background: #ff8c00 !important;
    color: #fff !important;
}

/* Стиль самого вікна календаря */
.flatpickr-calendar {
    background: #1a1a1a !important;
    /* Темний фон як у форми */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
}

/* =========================================
   АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ
   ========================================= */

@media (max-width: 768px) {

    /* Зменшуємо бокові відступи самого вікна (попапу) */
    #booking-modal .modal-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 25px !important;
        width: 95%;
        /* Щоб вікно займало майже всю ширину екрана */
    }

    /* Якщо кнопки "Далі" і "Назад" на мобільному стають занадто тісно, 
       можна дати їм трохи більше місця між собою */
    .wizard-actions {
        gap: 10px;
    }

    /* Трохи зменшуємо шрифти заголовків кроків для акуратності */
    .wizard-step h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
}

/* Для зовсім маленьких екранів (старі iPhone тощо) */
@media (max-width: 400px) {
    #booking-modal .modal-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Можна зробити іконки месенджерів трохи меншими, щоб вони точно влізли */
    .radio-custom {
        padding: 15px 5px;
    }
}

/* Контейнер для відступу */
.checkbox-wrapper {
    margin-top: 15px;
    text-align: left;
}

/* Приховуємо стандартний чекбокс */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Базовий стиль контейнера (label) */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    font-size: 16px;
}

/* Стиль самої "коробочки" */
.checkmark {
    height: 22px;
    width: 22px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Напівпрозорий фон */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    /* Закруглені кути як у кнопок */
    margin-right: 12px;
    position: relative;
    transition: all 0.2s ease;
}

/* Ефект при наведенні */
.custom-checkbox:hover .checkmark {
    border-color: #f5500a;
}

/* Коли чекбокс активний (натиснутий) */
.custom-checkbox input:checked~.checkmark {
    background-color: #f5500a;
    border-color: #f5500a;
}

/* Створюємо саму галочку (приховану за замовчуванням) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    /* Малюємо галочку через кордони */
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Показуємо галочку при виборі */
.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Стиль тексту поруч */
.label-text {
    opacity: 0.9;
    letter-spacing: -0.01em;
}

/* =========================================
   СТИЛІ СОЦМЕРЕЖ У ПІДВАЛІ (FOOTER)
   ========================================= */

/* Контейнер для іконок */
.footer-socials {
    display: flex;
    gap: 15px;
    /* Відступ між іконками */
    justify-content: left;
    /* Вирівнювання по центру підвалу (можна змінити на flex-start) */
    align-items: center;
}

/* Базовий стиль для кожної іконки-кнопки */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    /* Розмір квадрата */
    height: 44px;
    /* Розмір квадрата */

    background: transparent;
    /* Спочатку прозорий фон */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Легка біла рамка (можна прибрати) */
    border-radius: 12px;
    /* Округлі радіуси (adjust as needed) */

    color: #fff;
    /* Сама іконка біла */
    font-size: 20px;
    /* Розмір іконки всередині */
    text-decoration: none;

    /* ПЛАВНІСТЬ для всіх змін */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Для преміального вигляду: легка тінь */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* =========================================
   ЕФЕКТ ПРИ НАВЕДЕННІ (HOVER)
   ========================================= */

.social-btn:hover {
    /* 1. ЗМІНА КОЛЬОРУ (Ваш акцентний колір) */
    border-color: #f5500a;
    color: #fff;
    /* Іконка залишається білою */

    /* 2. ЗБІЛЬШЕННЯ (Scale) */
    transform: scale(1.12) translateY(-3px);
    /* Трохи збільшуємо і піднімаємо */
}

/* Специфічне вирівнювання іконки Facebook (вона часто трохи з'їжджає) */
.social-btn.facebook i {
    transform: translateX(-1px);
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .social-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .footer-socials {
        justify-content: center;
    }
}

/* =========================================
   КНОПКИ ЗАМОВЛЕННЯ В КАРТКАХ АВТО
   ========================================= */
.btn-car-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f5500a;
    /* Ваш акцентний колір */
    color: #ffffff !important;
    /* Білий текст завжди */
    font-family: 'Google Sans', sans-serif;
    font-weight: 500;
    text-decoration: none;
    /* Прибираємо підкреслення посилання */

    /* Заокруглення */
    transition: all 0.1s ease;
    /* Якщо btn-small не задає паддінги, розкоментуйте рядок нижче: */
    padding: 10px;
}

.btn-car-book:hover {
    transform: scale(1.05);
}

/* Прибираємо виділення (блимання) при тапі на мобільних пристроях */
a,
button,
input,
textarea,
select,
.open-booking-btn,
.radio-custom .tab-img-transparent img-car,
.nav-link,
.hamburger {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Додатково для деяких версій Android */
.open-booking-btn,
.tab-img-transparent img-car {
    outline: none !important;
}

/* =========================================
   ТЕКСТ УГОДИ В ФОРМІ
   ========================================= */
.policy-text {
    font-family: 'Google Sans', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #777;
    /* Спокійний сірий колір */
    margin: 15px 0;
    text-align: center;
}

.policy-text a {
    color: #f5500a;
    /* Ваш акцентний колір */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.policy-text a:hover {
    color: #e04808;
    /* Трохи темніший при наведенні */
    text-decoration: none;
}

/* Для мобільних пристроїв зменшуємо відступи */
@media (max-width: 768px) {
    .policy-text {
        font-size: 11px;
        margin: 10px 0;
    }
}

.text-other-cars {
    margin-top: 40px;
}

.latest-news-section {
    padding-bottom: 0;
}

.simple-text-section {
    padding-top: 0;
    padding-bottom: 40px;
}

.car-class-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.car-card-label {
    cursor: pointer;
    display: block;
}

.car-card-input {
    display: none;
    /* Ховаємо стандартний радіо-кружечок */
}

.car-card-content {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: 'Google Sans', sans-serif;
}

.car-card-img-wed {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

/* Стан при виборі */
.car-card-input:checked+.car-card-content {
    border-color: #f5500a;
    background: rgba(245, 80, 10, 0.1);
    box-shadow: 0 4px 15px rgba(245, 80, 10, 0.2);
}

@media (max-width: 768px) {
    .car-card-img-wed {
        height: 70px;
        /* Ще менша висота на вузьких екранах */
    }
}

/* Застосовуємо правильний шрифт для всього тексту в модальному вікні */
.modal-info,
.modal-desc,
.modal-car-title,
.modal-specs li {
    font-family: 'Google Sans', sans-serif;
}

.hero-content-about {
    text-align: center;
}

@media (max-width: 468px) {
    .car-actions-wrapper {
        flex-direction: column;
    }

    /* Додатково розтягуємо кнопки на всю ширину для красивого вигляду на мобільному */
    .car-actions-wrapper button {
        width: 100%;
    }
}

/* ==========================================================================
   СЕКЦІЯ INSTAGRAM STORIES
   ========================================================================== */
.stories-section {
    padding: 60px 0;
    overflow: hidden;
}

.stories-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Трек карток */
.stories-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Магнітний скрол на мобільних */
    scrollbar-width: none;
    /* Ховаємо скролбар Firefox */
    -ms-overflow-style: none;
    /* Ховаємо скролбар IE */
    padding: 10px 0;
    scroll-behavior: smooth;
    width: 100%;
    padding: 15px;
}

.stories-track::-webkit-scrollbar {
    display: none;
    /* Ховаємо скролбар Chrome/Safari */
}

/* Сама картка Story */
.story-card {
    flex: 0 0 auto;
    width: calc(25% - 15px);
    /* На ПК по 4 картки */
    min-width: 160px;
    /* Мінімальна ширина на мобільному */
    aspect-ratio: 9 / 16;
    /* Формат Instagram Story */
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    box-shadow: 1px 2px 5px 0 var(--black);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Ефект при наведенні (світіння рамки) */
.story-card:hover {
    transform: translateY(-5px);
    border-color: var(--main-accent);
    /* Ваш помаранчевий колір */
}

/* Зображення на фоні */
.story-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 3s ease;
}

.story-card:hover .story-bg {
    transform: scale(1.05);
    /* Легкий зум фотографії при наведенні */
}

/* Затемнення знизу (щоб текст читався) */
.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 15px;
}

/* Іконка Instagram */
.story-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.story-icon-wrapper i {
    color: white;
    font-size: 18px;
}

/* Текст (назва міста) */
.story-title {
    color: white;
    font-family: 'Google Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Кнопки Назад/Вперед */
.story-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--black);
    color: var(--main-accent);
    border: 2px solid var(--main-accent);
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.story-slider-btn:hover {
    background-color: var(--main-accent);
    color: white;
}

#stories-prev {
    left: 5px;
}

#stories-next {
    right: 5px;
}

/* Адаптив для планшетів та мобільних */
@media (max-width: 992px) {
    .story-card {
        width: calc(33.333% - 15px);
    }
}

@media (max-width: 768px) {

    /* На мобільних ховаємо кнопки, залишаємо тільки зручний свайп пальцем */
    .story-slider-btn {
        display: none;
    }

    .stories-track {
        padding: 15px 20px;
    }

    /* Додаємо відступи з боків екрану */
}

.stories-carousel-wrapper {
    padding: 0;
    /* 🔥 Прибираємо відступ для стрілок, бо їх тут нема */
}

/* Робимо картку клікабельною */
.story-card {
    cursor: pointer;
}

/* Іконка Play замість Інстаграму */
.story-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--main-accent);
    /* Ваш помаранчевий */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.story-icon-wrapper i {
    color: white;
    font-size: 14px;
    margin-left: 2px;
    /* Трохи зміщуємо трикутник Play по центру */
}

/* --- СТИЛІ МОДАЛКИ ПЛЕЄРА --- */
.story-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    /* Майже чорний фон */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.story-video-modal.active {
    opacity: 1;
    pointer-events: all;
}

.story-video-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    /* Обмежуємо ширину для вертикальних відео на ПК */
    height: 90vh;
    /* Відео не буде вилазити за межі екрану */
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-video-container video {
    width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    /* Зберігаємо пропорції відео */
    outline: none;
    background: #000;
}

.close-story-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    z-index: 100000;
    transition: transform 0.2s;
}

.close-story-btn:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   СЕКЦІЯ: ТОРГОВА МАРКА
   ========================================================================== */
.trademark-section {
    padding: 60px 20px;
    background-color: var(--header-bg);
    border-radius: 12px;
    box-shadow: 1px 2px 5px 0 var(--black);
}

.trademark-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.trademark-content {
    flex: 1;
    /* Текст займає половину ширини */
}

.trademark-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.trademark-text {
    font-size: 1rem;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 15px;
}

.trademark-certificates {
    flex: 1;
    /* Документи займають іншу половину */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Два аркуші поруч */
    gap: 20px;
}

.certificate-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    /* Підказує, що можна натиснути */
}

.certificate-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.certificate-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Адаптивність для планшетів та мобільних --- */
@media (max-width: 992px) {
    .trademark-container {
        flex-direction: column;
        /* Ставимо текст над документами */
        text-align: center;
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .trademark-certificates {
        grid-template-columns: 1fr;
        /* На дуже вузьких екранах аркуші йдуть один під одним */
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   ЛАЙТБОКС (МОДАЛЬНЕ ВІКНО)
   ========================================================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Темне напівпрозоре тло */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Щоб вікно було поверх усіх елементів сайту */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Клас, який додаватиметься через JS для показу вікна */
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    /* Зображення не буде вилазити за межі екрана по висоті */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lightbox-close:hover {
    color: #cccccc;
}

/* Ховаємо курсор на самій картинці в сітці, щоб показати, що на неї можна натиснути */
.certificate-img {
    cursor: zoom-in;
}