/* --- 0. ГЛОБАЛЬНІ ЗМІННІ ТА СКИНУТТЯ СТИЛІВ --- */
:root {
    --main-bg: #ebebeb;
    --content-bg: #f7f7f7;
    --dark-blue: #555555;
    --mid-blue: #777777;
    --light-blue: #999999;
    --light-text: #ffffff;
    --content-width: 1400px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--main-bg);
    font-family: 'Roboto', sans-serif;
    color: #333;
    line-height: 1.4;
}
/* ПРИМУСОВЕ ВІДКРИТТЯ ДЛЯ МОБІЛЬНИХ */
@media (max-width: 1100px) {
    /* Ховаємо підменю за замовчуванням */
    .submenu, .nested-submenu {
        display: none !important;
        position: static !important;
        width: 100% !important;
    }

    /* Показуємо при кліку */
    .submenu.open, .nested-submenu.open {
        display: block !important;
    }

    /* Поворот вашої стрілочки ▶ */
    .arrow-nested.rotated {
        transform: rotate(90deg) !important;
        display: inline-block;
    }
}

/* --- 1. ЗАГАЛЬНИЙ МАКЕТ --- */
.header, .main-content, .footer {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.header-banner {
    width: 100%;
    line-height: 0;
}
.header-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 2. МАРКІЗ (БІГУЧИЙ РЯДОК) --- */
.marquee-section {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #ddd; 
    padding: 5px 0;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.marquee-images {
    display: inline-block;
    animation: marquee-scroll 25s linear infinite; 
}

.marquee-images img {
    height: 110px;
    width: auto;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 5px;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* --- 3. НАВІГАЦІЯ (ГОЛОВНЕ МЕНЮ) --- */
.main-nav {
    background-color: var(--dark-blue); /* ПОВЕРНУТО СІРИЙ КОЛІР ТУТ */
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;       /* Пункти переходять на новий рядок, якщо не влазять */
    justify-content: flex-start;
}

/* ГОЛОВНІ ПУНКТИ (Рівень 1) */
.main-menu > li {
    position: relative;
    white-space: nowrap;   /* ЗАБОРОНЯЄМО перенос слів у назвах пунктів */
    flex: 0 1 auto;
}

.main-menu > li > a, 
.main-menu > li .collapsible-header {
    color: var(--light-text);
    padding: 15px 18px;    /* Комфортні відступи */
    text-decoration: none;
    display: block;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Колір при наведенні на головний пункт */
.main-menu > li:hover > a, 
.main-menu > li:hover .collapsible-header {
    background-color: var(--mid-blue);
}

/* --- ПІДМЕНЮ (Рівень 2 і 3) --- */
.submenu, 
.nested-submenu {
    background-color: var(--mid-blue);
    white-space: normal;   /* ДОЗВОЛЯЄМО перенос слів у підменю */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;      /* Оптимальна ширина підменю */
    max-width: 380px;
    z-index: 1001;
    display: none;         /* Сховано за замовчуванням */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submenu li a, 
.nested-collapsible-header,
.nested-submenu li a {
    padding: 10px 15px;
    color: var(--light-text);
    text-decoration: none;
    display: block;
    line-height: 1.3;
    text-align: left;
}

.submenu li a:hover, 
.nested-collapsible-header:hover {
    background-color: var(--light-blue);
}

/* Відображення підменю при наведенні (для ПК) */
.main-menu > li:hover > .submenu {
    display: block;
}

/* --- 4. СТИЛІ ДЛЯ ДВОРІВНЕВОГО МЕНЮ --- */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; 
    top: 100%;
    left: 0;
    background-color: var(--mid-blue);
    min-width: 250px;
    z-index: 10;
    text-align: left;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1101px) {
    .main-menu > li:hover > .submenu {
        display: block;
    }
}

.submenu.open {
    display: block !important; 
}

.submenu > li > a {
    color: var(--light-text);
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.submenu > li > a:hover {
    background-color: var(--light-blue);
}

/* --- 5. СТИЛІ ДЛЯ ТРИРІВНЕВОГО МЕНЮ --- */
.nested-submenu-item {
    position: relative; 
}

.nested-collapsible-header {
    color: var(--light-text);
    padding: 10px 15px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.9em; 
    cursor: pointer;
    background-color: #666666;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nested-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; 
    background-color: #888888;
    width: 100%; 
}

.nested-submenu.open {
    display: block; 
}

.nested-submenu li a {
    color: var(--light-text);
    padding: 8px 30px; 
    display: block;
    text-decoration: none;
    font-size: 0.85em;
}

/* --- 6. МАКЕТ КОНТЕНТУ --- */
.content-main-layout {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    align-items: flex-start; 
}

.side-left-panel, .side-right-panel {
    flex: 0 0 250px; 
}

.main-text-content {
    flex-grow: 1;
    font-size: 1.1em;
    line-height: 1.5;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.main-text-content p {
    margin-bottom: 12px;
    text-indent: 20px;
    text-align: justify; 
}

/* --- Стилі блоків та СОЦМЕРЕЖ (Виправлено) --- */
.quick-links-box, .contacts-box, .social-links-box, .banners-box, .side-admissions-text-links {
    margin-bottom: 12px;
    padding: 12px;
    background-color: #fff; 
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* МАЛЕНЬКІ КАРТИНКИ СОЦМЕРЕЖ ТУТ */
.social-links {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-start;
}

.social-links img {
    width: 40px; /* Зменшено ширину */
    height: 40px; /* Зменшено висоту */
    object-fit: contain;
    transition: transform 0.2s;
}

.social-links img:hover {
    transform: scale(1.1);
}

.quick-link-icon img {
    height: 22px;
    width: auto;
}
/* --- СТИЛІ ДЛЯ БАНЕРІВ ПАРТНЕРІВ У САЙДБАРІ --- */
.banners {
    display: flex;
    flex-direction: column; /* Розташовуємо один під одним */
    gap: 8px;               /* Відступ між банерами */
    align-items: center;    /* Центруємо горизонтально */
}

.banners a {
    display: block;
    width: 100%;            /* Посилання займає всю ширину блоку */
    text-align: center;
}

.banners img {
    max-width: 180px;       /* Обмежуємо максимальну ширину */
    width: 100%;            /* Робимо гумовими до межі max-width */
    height: auto;           /* Зберігаємо пропорції */
    border-radius: 3px;     /* Легке закруглення кутів */
    filter: grayscale(20%); /* Можна додати легкий ефект, щоб не відволікали */
    transition: filter 0.3s, transform 0.3s;
}

.banners img:hover {
    filter: grayscale(0%);  /* Повертаємо колір при наведенні */
    transform: scale(1.03); /* Легке збільшення */
}
/* --- 7. КАРТА ТА КАЛЕНДАР --- */
#map-and-calendar {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    max-width: var(--content-width);
    margin: 0 auto;
}

.map-container { flex: 1; }
.calendar-container { width: 300px; }

.map-container iframe, .calendar-container iframe {
    width: 100%;
    height: 280px;
    border-radius: 5px;
}

/* --- 8. ФУТЕР --- */
.footer {
    background-color: var(--dark-blue);
    color: var(--light-text);
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
}

/* --- 9. АДАПТИВНІСТЬ --- */
@media (max-width: 1100px) {
    .main-menu { flex-direction: column; flex-wrap: wrap; }
    .main-menu > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .submenu { position: static; width: 100%; box-shadow: none; }
    .content-main-layout { flex-direction: column; padding: 10px; }
    .side-left-panel, .side-right-panel, .main-text-content { width: 100%; flex: none; }
    #map-and-calendar { flex-direction: column; padding: 10px; }
    .calendar-container { width: 100%; }
}
/* --- 5. ВІДЕО ТА МЕДІА (ВИПРАВЛЕНО) --- */
.video-container {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;       /* Відео на всю ширину текстового блоку */
    max-width: 800px;  /* Але не більше 800 пікселів для комфортного перегляду */
    margin-left: auto; /* Центрування ліворуч */
    margin-right: auto;/* Центрування праворуч */
    
    /* 16:9 співвідношення сторін */
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    border-radius: 8px; /* Гарні закруглені кути */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* --- СТИЛІ ДЛЯ ЗАЯВ У ПРАВІЙ КОЛОНЦІ (ОНОВЛЕНО) --- */
.side-admissions-text-links {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f0f0f0; /* Світло-сірий фон для всього блоку */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.side-admissions-text-links p {
    margin-bottom: 15px;
    text-indent: 0 !important; /* Прибираємо абзацний відступ для заголовка */
    text-align: center;
    font-weight: bold;
}

.admission-link {
    display: block;          /* Робимо посилання блоком, щоб вони були як кнопки */
    width: 100%;             /* На всю ширину колонки */
    padding: 12px 10px;      /* Внутрішні відступи */
    margin-bottom: 10px;     /* Відступ між кнопками */
    background-color: #777777; /* Сірий фон кнопки (ваш --mid-blue) */
    color: #ffffff !important; /* Білий текст */
    text-decoration: none;
    border-radius: 4px;
    text-align: center;      /* Текст по центру */
    font-weight: 700;А
    font-size: 0.9em;
    transition: background-color 0.3s, transform 0.2s;
}

.admission-link:last-child {
    margin-bottom: 0;        /* Прибираємо відступ у останньої кнопки */
}

.admission-link:hover {
    background-color: #555555; /* Темніший сірий при наведенні */
    transform: translateY(-2px); /* Легкий ефект підстрибування */
}
/* --- КРИТИЧНО ДЛЯ МОБІЛЬНОГО МЕНЮ --- */

/* 1. Сховати підменю за замовчуванням */
.submenu, .nested-submenu {
    display: none;
}

/* 2. ПОКАЗАТИ, коли додано клас .open через JavaScript */
.submenu.open, .nested-submenu.open {
    display: block !important;
    position: static !important; /* Щоб розсувало контент вниз */
    width: 100% !important;
}

/* 3. Поворот стрілочок */
.arrow, .arrow-nested {
    transition: transform 0.3s ease;
}
.arrow.rotated {
    transform: rotate(180deg) !important;
}
.arrow-nested.rotated {
    transform: rotate(90deg) !important;
}

/* --- Адаптація контейнерів --- */
@media (max-width: 1100px) {
    .main-menu {
        flex-direction: column !important;
        display: flex !important;
    }
    .main-menu > li {
        width: 100% !important;
        white-space: normal !important; /* Дозволяємо перенос тексту на мобільних */
        text-align: left !important;
    }
}
/* Ховаємо підменю на мобільних за замовчуванням */
@media (max-width: 1100px) {
    .submenu, .nested-submenu {
        display: none !important; 
    }

    /* Показуємо, коли JS додає клас .open */
    .submenu.open, .nested-submenu.open {
        display: block !important;
        position: static !important; /* Щоб меню розсувало контент вниз */
    }
}

/* Поворот стрілочок */
.arrow.rotated, .arrow-nested.rotated {
    transform: rotate(180deg);
}
:root {
    --main-bg: #ebebeb;
    --dark-blue: #555555;
    --mid-blue: #777777;
    --light-blue: #999999;
    --light-text: #ffffff;
    --content-width: 1400px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--main-bg); font-family: 'Roboto', sans-serif; line-height: 1.4; }

/* --- НАВІГАЦІЯ --- */
.main-nav { background-color: var(--dark-blue); width: 100%; position: relative; z-index: 1000; }
.main-menu { list-style: none; display: flex; flex-wrap: wrap; }
.main-menu > li { position: relative; white-space: nowrap; }
.main-menu > li > a, .collapsible-header { 
    color: var(--light-text); padding: 15px 18px; display: block; 
    font-weight: 700; text-decoration: none; cursor: pointer; 
}

/* ПК ВЕРСІЯ: РОЗГОРТАННЯ ПО HOVER */
@media (min-width: 1101px) {
    .main-menu > li:hover > .submenu { display: block; }
    .nested-submenu-item:hover > .nested-submenu { display: block; }
}

.submenu, .nested-submenu {
    display: none; position: absolute; background-color: var(--mid-blue);
    min-width: 280px; z-index: 1001; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nested-submenu { left: 100%; top: 0; background-color: #888888; }
.submenu li a, .nested-collapsible-header { 
    padding: 10px 15px; color: var(--light-text); text-decoration: none; display: block; 
}

/* МОБІЛЬНА ВЕРСІЯ */
@media (max-width: 1100px) {
    .main-menu { flex-direction: column; }
    .submenu, .nested-submenu { position: static; width: 100%; display: none !important; }
    .submenu.open, .nested-submenu.open { display: block !important; }
    .side-left-panel, .side-right-panel, .main-text-content { width: 100%; flex: none; }
}

/* КАРТИНКИ ТА КОЛОНКИ */
.content-main-layout { display: flex; gap: 15px; padding: 15px 0; max-width: 1400px; margin: 0 auto; }
.side-left-panel, .side-right-panel { flex: 0 0 250px; }
.main-text-content { flex: 1; min-width: 0; background: #fff; padding: 20px; }
.main-text-content img { max-width: 100% !important; height: auto !important; display: block; margin: 10px auto; }
<style>
/* Контейнер швидкого доступу */
.quick-links-box {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 15px;
    width: 250px; /* Можна підправити під ваш дизайн */
}

.quick-links-box p {
    font-family: Arial, sans-serif;
    color: #235196;
    border-bottom: 2px solid #235196;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* Елемент списку */
.quick-link-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px;
    margin-bottom: 5px;
    background-color: #f9f9f9;
    border-radius: 4px;
    transition: background 0.3s;
}

.quick-link-item:hover {
    background-color: #eef2f7;
}

/* Іконка */
.quick-link-icon {
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.quick-link-img {
    width: 24px;
    height: 24px;
}

/* Текст */
.quick-link-text {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
}

.quick-link-item:hover .quick-link-text {
    color: #235196;
}
</style>