/* ==================================== */
/* 1. ВНЕШНЯЯ ОБОЛОЧКА (100% ширины) */
/* ==================================== */
.main-hader {
    width: 100%;
    /* Если вам нужен цвет фона на всю ширину экрана, добавьте его здесь: */
    /* background-color: #1a1a1a; */ 
    
    display: flex;
    justify-content: center; /* Центрируем внутренний контейнер */
}

/* ==================================== */
/* 2. ВНУТРЕННИЙ КОНТЕЙНЕР (макс. 1440px) */
/* ==================================== */
.header-container {
    width: 100%;            /* Занимает всё место внутри родителя... */
    max-width: 1440px;      /* ...но останавливается на 1440px */
    
    margin: 0 auto;         /* Центрирование блока (на всякий случай) */
    padding: 50px 55px;    /* Внутренние отступы, чтобы лого не прилипало к краям на планшетах */
    box-sizing: border-box; /* Чтобы padding не ломал ширину */
    
    /* Flexbox для выравнивания логотипа */
    display: flex;
    align-items: center;    /* Вертикально по центру */
    justify-content: flex-start; /* Горизонтально: прижать влево */
    
    min-height: 100px;      /* Минимальная высота шапки */
}

/* ==================================== */
/* 3. ЛОГОТИП */
/* ==================================== */
.header-logo a {
    display: block;         /* Убираем лишние отступы строчных элементов */
    text-decoration: none;
    line-height: 0;         /* Убирает отступ снизу под картинкой */
}

.header-logo img {
    /* Размеры для больших экранов */
    max-width: 750px;       /* Максимальная ширина лого (подберите под свой вкус) */
    height: auto;           /* Высота подстроится пропорционально */
    display: block;
    
    /* Плавность при изменении экрана */
    transition: max-width 0.3s ease;
}

/* ==================================== */
/* 4. АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ */
/* ==================================== */

/* Планшеты и маленькие ноутбуки */
@media (max-width: 1024px) {
    .header-logo img {
        max-width: 250px;   /* Уменьшаем логотип */
    }
}

/* Телефоны */
@media (max-width: 768px) {
    .header-container {
        padding: 10px 15px; /* Чуть меньше боковые отступы */
        min-height: 70px;
    }

    .header-logo img {
        max-width: 180px;   /* Логотип еще меньше для телефонов */
    }
}

/* ==================================== */
/* 1. ОБЩЕЕ ВЫРАВНИВАНИЕ КОНТЕЙНЕРА */
/* ==================================== */
.custom-menu-wrapper {
    /* Выравнивание всего меню по центру страницы (столбиком) */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует заголовок и кнопки по горизонтали */
    width: 100%; /* Занимает всю доступную ширину */
}

/* ==================================== */
/* 2. ТЕКСТ МЕНЮ (Заголовок) */
/* ==================================== */
.menu-title-block {
    /* Обеспечиваем центрирование блока заголовка (375x90) */
    width: 100%; 
    height: 90px;
    
    /* Стили как для блока меню */
    box-sizing: border-box;
    border-bottom: 5px solid #FFFFFF;
    border-radius: 12px;
    
    /* Используем Flexbox для вертикального центрирования текста внутри блока */
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    
    margin-bottom: 20px; /* Отступ от списка кнопок */
}

.menu-title-text {
    /* Ваши стили для текста заголовка */
    font-family: 'JejuMyeongjo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    color: #FFFFFF;
    
    /* Так как родительский блок центрирует flex-элементы, достаточно этих стилей */
}

/* ==================================== */
/* 3. КОНТЕЙНЕР КНОПОК */
/* ==================================== */
.menu-buttons-container {
    /* Контейнер кнопок, чтобы они шли столбиком */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует все кнопки по горизонтали */
    gap: 15px; /* Промежуток между кнопками */
}

/* ==================================== */
/* 4. БЛОК КНОПКИ (Шаблон) */
/* ==================================== */
.menu-button-block {
    /* Ваши стили для блока кнопки (общая ширина и высота) */
    width: 303px;
    height: 60px;
    /* Flexbox для расположения иконки и текста в одну строку */
    display: flex;
    align-items: center; /* Вертикальное выравнивание по центру */
    
    /* Важно: Внутренности кнопки идут от левого края! */
    justify-content: flex-start; 
    /* Сброс стилей ссылки */
    text-decoration: none !important; !important    
}

/* ==================================== */
/* 5. ИЗОБРАЖЕНИЕ КНОПКИ (Внешний блок) */
/* ==================================== */
.button-icon-wrapper {
    /* Ваши стили для блока с рамкой */
    width: 60px;
    height: 60px;
    border: 3px solid #FFFFFF;
    border-radius: 21px;
    
    /* Используем Flexbox для центрирования самой иконки внутри этой рамки */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==================================== */
/* 6. ИЗОБРАЖЕНИЕ (Иконка) */
/* ==================================== */
.button-icon {
    /* Ваши стили для самого изображения (иконки) */
    width: 40px;
    height: 40px;
    background-size: cover; /* Для корректного отображения иконки */
    background-repeat: no-repeat;
    
    /* Так как родительский .button-icon-wrapper уже центрирует, отступы не нужны */
}

/* ==================================== */
/* 7. ТЕКСТ КНОПКИ */
/* ==================================== */
.button-text {
    font-family: 'JejuMyeongjo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    color: #FFFFFF;
    
    /* Отступ от блока с изображением */
    margin-left: 20px; 
    
    /* Обеспечиваем вертикальное выравнивание, хотя align-items: center в родителе уже это делает */
    display: flex;
    align-items: center;
}

/* ==================================== */
/* АДАПТАЦИЯ: Планшеты (до 1024px)     */
/* ==================================== */
@media (max-width: 1024px) {
    .menu-button-block {
        width: 260px;
        height: 54px;
    }

    .button-text {
        font-size: 20px;
        line-height: 20px;
        margin-left: 16px;
    }

    .menu-title-text {
        font-size: 34px;
        line-height: 34px;
    }
}

/* ==================================== */
/* АДАПТАЦИЯ: Телефоны (до 768px)      */
/* ==================================== */
@media (max-width: 768px) {
    .menu-title-block {
        height: 70px;
        margin-bottom: 15px;
    }

    .menu-title-text {
        font-size: 28px;
        line-height: 28px;
    }

    .menu-buttons-container {
        gap: 12px;
    }

    .menu-button-block {
        width: 220px;
        height: 50px;
    }

    .button-icon-wrapper {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 16px;
    }

    .button-icon {
        width: 32px;
        height: 32px;
    }

    .button-text {
        font-size: 18px;
        line-height: 18px;
        margin-left: 14px;
    }
}

/* ==================================== */
/* АДАПТАЦИЯ: Маленькие телефоны       */
/* (до 480px, например iPhone SE)      */
/* ==================================== */
@media (max-width: 480px) {
    .menu-title-block {
        height: 60px;
    }

    .menu-title-text {
        font-size: 22px;
        line-height: 22px;
    }

    .menu-button-block {
        width: 190px;
        height: 44px;
    }

    .button-icon-wrapper {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 13px;
        border-width: 2px;
    }

    .button-icon {
        width: 28px;
        height: 28px;
    }

    .button-text {
        font-size: 15px;
        line-height: 15px;
        margin-left: 10px;
    }
}