/* HEADER STYLES (Basic and Desktop) */
.header {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;

    width: 100%;
    z-index: 100;
    box-shadow: none;
    left: 50%; /* Центруємо хедер по горизонталі */
    transform: translateX(-50%); /* Зміщуємо на половину його ширини назад */
    top: 0; /* Прикріплюємо до верху */
    padding: 20px 0; /* Додаємо верхній/нижній padding, якщо хедер не має фіксованої висоти */
}


.header__container {
    max-width: 1400px; /* Це повинно відповідати ширині вашого основного body */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}



.header__logo img {
    max-height: 100px; /* Розмір логотипу */
}

.header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 80px;
}

.header__nav-item {
    /* Можна додати додаткові стилі для елементів списку, якщо потрібно */
}

.header__nav-link {
    color: #FFF;
    text-decoration: none;
    font-size: 24px;
    padding: 5px 0;
    transition: color 0.3s ease;
    font-family: Inter, sans-serif;
}

.header__nav-link:hover {
    color: #e6f7ff;
}

/* HAMBURGER MENU (Desktop - Hidden by default) */
.header__hamburger {
    display: none; /* Приховуємо кнопку гамбургера на десктопі за замовчуванням */
}
.header__contact a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: color 0.3s ease;
    display: block;
}

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

/* ================================================================= */
/* Адаптивність для хедера (Mobile & Tablet) */
@media (max-width: 768px) {
    .header {
        padding: 10px 0; /* Зменшуємо padding хедера на мобільних */
        position: absolute; /* Робимо хедер фіксованим, щоб він завжди був видимим */
        /* top: 0; left: 0; transform: none; width: 100%; - ці властивості вже є або будуть встановлені */
        z-index: 1000; /* Збільшуємо z-index для хедера */
    }
    .header__container {
        justify-content: space-between; /* Логотип зліва, гамбургер справа */
        padding: 0 15px; /* Зменшуємо горизонтальні відступи */
    }

    .header__logo {
        font-size: 28px; /* Зменшуємо розмір логотипу */
    }

    .header__nav-list {
        display: none; /* Приховуємо навігацію за замовчуванням на мобільних */
        flex-direction: column; /* Пункти меню один під одним */
        position: absolute; /* Абсолютне позиціонування для випадаючого меню */
        top: 90%; /* Розміщуємо під хедером (100% від висоти батька, тобто хедера) */

        /* ЗМІНИ ТУТ: Центрування за допомогою left/right/margin:auto */
        left: 0;     /* Розтягуємо ліворуч до 0 */
        right: 0;    /* Розтягуємо праворуч до 0 */
        margin: 0 auto; /* Центруємо горизонтально */
        /* transform: translateX(-50%); - ЦЕЙ РЯДОК БІЛЬШЕ НЕ ПОТРІБЕН І ЙОГО ВИДАЛЕНО/ЗАКОМЕНТОВАНО */

        width: 80%; /* Задаємо бажану ширину */
        padding: 20px 0; /* Внутрішні відступи для випадаючого меню */
        gap: 5px; /* Відстань між пунктами меню */


        z-index: 999; /* Z-index трохи менший за хедер, але вищий за інший контент */
    }
    .header__nav-list.open {
        display: flex; /* ПОКАЗУЄМО МЕНЮ, КОЛИ КЛАС 'OPEN' Є */
        /* transform: translateY(0); */ /* Цей рядок також може бути прибраний, якщо transform не використовується */
        opacity: 1; /* Робимо видимим */
        pointer-events: auto; /* Дозволяємо клікати */
    }

    .header__nav-item {
        text-align: center; /* Центруємо текст пунктів меню */
    }

    .header__nav-link {
        font-size: 20px; /* Зменшуємо розмір шрифту пунктів меню */
        display: block; /* Займає всю доступну ширину для зручності кліку */
        padding: 10px 20px; /* Збільшуємо зону кліку */
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* HAMBURGER MENU (Mobile - Visible) */
    .header__hamburger {
        display: flex; /* Робимо кнопку видимою на мобільних */
        flex-direction: column;
        justify-content: space-around;
        width: 30px; /* Ширина кнопки */
        height: 25px; /* Висота кнопки */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 101; /* Переконатися, що кнопка знаходиться над навігацією */
    }

    .hamburger-line {
        width: 100%;
        height: 3px; /* Висота лінії */
        background-color: #fff; /* Колір ліній */
        transition: all 0.3s ease-in-out; /* Плавний перехід для анімації */
    }

    /* Стилі для відкритого стану (додаються/видаляються через JS) */
    .header__hamburger.open .hamburger-line:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .header__hamburger.open .hamburger-line:nth-child(2) {
        opacity: 0; /* Приховуємо середню лінію */
    }

    .header__hamburger.open .hamburger-line:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* Відображаємо навігацію, коли меню відкрито */
    .header__nav.open .header__nav-list {
        display: flex; /* Показуємо меню */
    }
}