/* Подключаем красивый шрифт с наклоном */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
/* ==========================================================================
   КАСТОМНЫЕ СТИЛИ ДЛЯ МЕНЮ (ЗЕЛЕНЫЙ ГРАДИЕНТ)
   ========================================================================== */

/* 1. Основной фон верхнего меню делаем зеленым градиентом (сверху вниз) */
.container-top-navigation {
    background: linear-gradient(to bottom, #16683f 0%, #409990 100%) !important;
}

/* 2. Текст ссылок меню делаем белым, чтобы он хорошо читался на темном фоне */
.top-nav-block li a {
    color: #ffffff !important;
}

/* 3. При наведении делаем легкую полупрозрачную подсветку вместо сплошного цвета */
.top-nav-block li a:hover,
.top-nav-block li:hover > a,
.top-nav-block li.parent.active > a,
.top-nav-block li.current a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 4px; /* Небольшое скругление для аккуратности */
}

/* 4. Выпадающее меню (второй уровень) тоже приводим к зеленой гамме */
.second-level {
    background: linear-gradient(to right, #16683f, #409990) !important;
}

/* 5. Мобильное меню (выезжающая шторка), чтобы было в едином стиле */
.mobile-nav-wrapper {
    background: linear-gradient(to bottom, #16683f, #409990) !important;
}

/* ============================================
   УЛУЧШЕННОЕ ВЫРАВНИВАНИЕ ЛОГОТИПА И ТЕКСТА
   ============================================ */

@media (max-width: 767px) {
    /* Превращаем блок логотипа в flex-контейнер для выравнивания */
    .logo-block {
        display: flex !important;
        align-items: center !important; /* Центрируем по вертикали */
        justify-content: flex-start !important;
        padding: 15px 10px !important; /* Отступы сверху и снизу */
        gap: 15px !important; /* Расстояние между логотипом и текстом */
    }
    
    /* Увеличиваем логотип ещё больше */
    .logo-block a.logo {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 130px !important;
        flex-shrink: 0 !important; /* Запрещаем сжиматься */
        padding: 0 !important;
    }
    
    /* Увеличиваем картинку логотипа */
    .logo-block a.logo img {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important;
        display: block !important;
    }
    
    /* Центрируем текст относительно логотипа */
    .logo-block a:not(.logo) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Название колледжа */
    .logo-block a .h1,
    .logo-block a h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    
    /* Подпись под названием (если есть) */
    .logo-block a small {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-top: 5px !important;
    }
}
/* ============================================
   КРАСИВЫЙ ШРИФТ ДЛЯ НАЗВАНИЯ
   ============================================ */

/* Применяем к названию в шапке */
.logo-block a .h1,
.logo-block a h1 {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-style: italic; /* Наклон */
    font-weight: 600; /* Полужирный */
    line-height: 1.2 !important;
}

/* Для мобильной версии - чуть меньше размер */
@media (max-width: 767px) {
    .logo-block a .h1,
    .logo-block a h1 {
        font-size: 18px !important;
    }
}