/* Загальні стилі та скидання */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #3a3a3a; /* Основний колір тексту */
}

/* --- Стилі для основного заголовка (header) --- */
.main-header-wrap {
    background-color: #ffffff; /* Білий фон */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Легка тінь, як на прикладі */
}

.primary-header-bar {
    padding: 15px 0; /* Відступи зверху та знизу */
}

.site-primary-header-wrap {
    max-width: 1200px; /* Обмеження ширини контейнера */
    margin: 0 auto; /* Центрування контейнера */
    padding: 0 20px; /* Внутрішні відступи по боках */
}

.ast-builder-grid-row {
    display: flex; /* Flexbox для вирівнювання лівої та правої частини заголовка */
    justify-content: space-between; /* Розміщення елементів по краях */
    align-items: center; /* Вирівнювання по вертикалі */
}

/* Стилі для основного меню */
.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox для основних пунктів меню */
    flex-wrap: wrap; /* Дозволяє пунктам переноситися на новий рядок на менших екранах */
}

.main-header-menu .menu-item {
    position: relative; /* Важливо для позиціонування підменю */
    margin-right: 25px; /* Відступ між пунктами меню */
}

.main-header-menu .menu-item:last-child {
    margin-right: 0; /* Прибираємо відступ у останнього пункту */
}

.main-header-menu .menu-item a {
    display: block; /* Робимо посилання блочним */
    padding: 10px 0; /* Відступи для посилань */
    color: #3a3a3a; /* Колір тексту */
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-header-menu .menu-item a:hover {
    color: #0073e6; /* Зміна кольору при наведенні */
}

/* Стилі для випадаючого підменю */
.main-header-menu .sub-menu {
    display: none; /* Ховаємо підменю за замовчуванням */
    position: absolute; /* Абсолютне позиціонування відносно батьківського li */
    top: 100%; /* Розміщуємо підменю відразу під батьківським пунктом */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тінь для підменю */
    min-width: 220px; /* Мінімальна ширина підменю */
    z-index: 100; /* Перекриття інших елементів */
    border-top: 2px solid #0073e6; /* Кольорова лінія зверху, як на прикладі */
}

.main-header-menu .menu-item.has-submenu:hover > .sub-menu {
    display: block; /* Показуємо підменю при наведенні на батьківський пункт */
}

.main-header-menu .sub-menu li {
    margin-right: 0; /* Прибираємо горизонтальний відступ */
}

.main-header-menu .sub-menu a {
    padding: 10px 20px; /* Відступи для пунктів підменю */
    white-space: nowrap; /* Запобігає переносу тексту в підменю */
    font-size: 15px;
    border-bottom: 1px solid #eee; /* Роздільник між пунктами підменю */
}

.main-header-menu .sub-menu li:last-child a {
    border-bottom: none; /* Прибираємо роздільник у останнього пункту */
}

.main-header-menu .sub-menu a:hover {
    background-color: #f9f9f9; /* Зміна фону при наведенні на пункт підменю */
    color: #0073e6;
}

/* Стилі для кнопки "Записатись" у хедері */
.header-button-wrap .custom-button {
    background-color: #0073e6; /* Синій колір кнопки */
    color: white;
    padding: 10px 20px;
    border-radius: 5px; /* Закруглені кути */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.header-button-wrap .custom-button:hover {
    background-color: #005bb5; /* Темніший синій при наведенні */
}

/* --- Стилі для секції "Про мене" та зображення (Hero Section) --- */
.about-section {
    display: flex;
    flex-direction: row; /* Розташовуємо елементи в ряд */
    align-items: center; /* Вирівнюємо елементи по центру по вертикалі */
    justify-content: center; /* Центруємо вміст горизонтально */
    gap: 40px; /* Простір між елементами flex-контейнера */
    padding: 60px 20px; /* Додаємо відступи зверху/знизу та з боків */
    background-color: #f9f9f9; /* Світлий фоновий колір секції */
    flex-wrap: wrap; /* Дозволяє елементам переноситися на новий рядок */
}

.about-text {
    max-width: 500px; /* Обмежуємо ширину тексту для кращої читабельності */
    text-align: left; /* Вирівнювання тексту за лівим краєм */
}

.about-text h1 {
    font-size: 3em; /* Більший розмір заголовка */
    color: #333;
    margin-bottom: 10px;
}

.about-text h2 {
    font-size: 1.5em;
    color: #555;
    margin-bottom: 5px;
}

.about-text p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 10px;
}

.about-image {
    border-radius: 8px; /* Заокруглюємо кути зображення */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Додаємо легку тінь */
    max-width: 400px; /* Обмежуємо максимальну ширину зображення */
    height: auto; /* Автоматичне визначення висоти для збереження пропорцій */
    object-fit: cover; /* Обрізає зображення, щоб воно заповнило контейнер */
}

.button-container {
    margin-top: 20px; /* Відступ кнопки від тексту */
}

.consultation-button {
    background-color: #0073e6; /* Синій колір кнопки, як у верхнього меню */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-block; /* Щоб можна було застосувати padding */
}

.consultation-button:hover {
    background-color: #005bb5; /* Трохи темніший синій при наведенні */
}

/* Стилі для логотипів в about-section */
.npa-logo, .isp-logo {
    max-width: 150px; /* Приклад розміру */
    height: auto;
    margin: 10px; /* Відступи між логотипами */
    display: inline-block;
}

/* --- Загальні контейнери для наступних секцій --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Секція "Обо мне" з відео та текстом --- */
.about-me-section {
    padding: 60px 0;
    background-color: #fff; /* Білий фон */
}

.about-me-section .container {
    display: flex;
    flex-wrap: wrap; /* Дозволяє перенос на менших екранах */
    gap: 40px; /* Проміжок між колонками */
    align-items: center;
    justify-content: center;
}

.about-me-section .video-column {
    flex: 1; /* Займає доступний простір */
    min-width: 300px; /* Мінімальна ширина для мобільних */
    max-width: 500px; /* Максимальна ширина для відео */
    text-align: center;
}

.about-me-section .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.about-me-section .about-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.about-me-section .text-column {
    flex: 1; /* Займає доступний простір */
    min-width: 300px; /* Мінімальна ширина для мобільних */
    max-width: 600px; /* Максимальна ширина для тексту */
}

.about-me-section h4 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
}

.about-me-section p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #666;
    margin-bottom: 15px;
}

/* Стилі для вторинної кнопки (наприклад, "Мое образование") */
.secondary-button {
    background-color: #f0f0f0; /* Світлий фон кнопки */
    color: #333;
    padding: 10px 25px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
    margin-top: 15px;
}

.secondary-button:hover {
    background-color: #e0e0e0;
    color: #0073e6;
    border-color: #0073e6;
}

/* --- Секція "Темы с которыми я работаю" --- */
.topics-section {
    padding: 60px 0;
    background-color: #0073e6; /* Синій фон */
    color: white;
    text-align: center;
}

.topics-section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: white;
}

.topics-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Проміжок між картками */
}

.topic-card {
    background-color: rgba(255, 255, 255, 0.15); /* Напівпрозорий білий фон для карток */
    border-radius: 8px;
    padding: 30px;
    flex: 1; /* Гнучкий розмір карток */
    min-width: 280px; /* Мінімальна ширина картки */
    max-width: 350px; /* Максимальна ширина картки */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: left; /* Текст в картках вирівнюємо по лівому краю */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topic-card:hover {
    transform: translateY(-5px); /* Ефект підняття при наведенні */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.topic-card h3 {
    font-size: 1.6em;
    margin-bottom: 15px;
    color: white;
    text-align: center; /* Заголовок картки по центру */
}

.topic-card ul {
    list-style: none; /* Прибираємо стандартні маркери списку */
    padding: 0;
    margin: 0;
}

.topic-card ul li {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px; /* Місце для кастомного маркера */
    color: #eee;
}

.topic-card ul li::before {
    content: "•"; /* Кастомний маркер */
    color: #fff; /* Білий колір маркера */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- Секція "Мои услуги" --- */
.services-section {
    padding: 60px 0;
    background-color: #f0f2f5; /* Сірий фон секції */
    text-align: center;
}

.services-section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #333;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.service-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.service-image {
    max-width: 100%;
    height: 200px; /* Фіксована висота для зображень послуг */
    object-fit: cover; /* Заповнення контейнера з обрізанням */
    border-radius: 6px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 1em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1; /* Дозволяє тексту займати доступний простір */
}

.service-button {
    background-color: #0073e6;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.service-button:hover {
    background-color: #005bb5;
}

/* --- Адаптивність (для менших екранів) --- */
@media (max-width: 768px) {
    /* Хедер та меню */
    .ast-builder-grid-row {
        flex-direction: column; /* Елементи стають у стовпчик */
        align-items: flex-start; /* Вирівнювання до початку */
    }

    .site-header-primary-section-left,
    .site-header-primary-section-right {
        width: 100%; /* Займають всю ширину */
    }

    .main-menu ul {
        flex-direction: column; /* Пункти меню стають у стовпчик */
        width: 100%;
    }

    .main-header-menu .menu-item {
        margin-right: 0;
        width: 100%;
        border-bottom: 1px solid #eee; /* Роздільник між основними пунктами */
    }

    .main-header-menu .menu-item:last-child {
        border-bottom: none;
    }

    .main-header-menu .menu-item a {
        padding: 12px 20px;
    }

    .main-header-menu .sub-menu {
        position: static; /* Підменю більше не абсолютно позиціоноване */
        box-shadow: none; /* Без тіні */
        border-top: none;
        background-color: #f5f5f5; /* Світліший фон для підменю на мобільних */
        padding-left: 20px; /* Відступ для підменю */
    }

    .main-header-menu .sub-menu a {
        padding: 8px 20px;
        font-size: 14px;
    }

    .header-button-wrap {
        margin-top: 15px; /* Відступ кнопки від меню */
        text-align: center; /* Центрування кнопки */
        width: 100%;
    }

    /* Секція "Про мене" (Hero Section) */
    .about-section {
        flex-direction: column; /* Розташовуємо елементи в стовпчик */
        text-align: center; /* Центруємо текст */
        padding: 30px 15px; /* Зменшуємо відступи на мобільних */
    }

    .about-image {
        max-width: 90%; /* Збільшуємо ширину зображення на малих екранах */
        margin-bottom: 30px; /* Додаємо відступ між зображенням та текстом */
    }

    .about-text {
        max-width: 100%; /* Займаємо всю ширину на мобільних */
    }

    .about-text h1 {
        font-size: 2.5em; /* Зменшуємо розмір заголовків */
    }

    .about-text h2 {
        font-size: 1.2em;
    }

    /* Секція "Обо мне" */
    .about-me-section .container {
        flex-direction: column;
        align-items: center;
    }
    .about-me-section .video-column,
    .about-me-section .text-column {
        min-width: unset; /* Скидаємо мінімальну ширину */
        max-width: 100%; /* Займаємо всю доступну ширину */
    }
    .about-me-section h4,
    .about-me-section p {
        text-align: center; /* Центруємо текст на мобільних */
    }

    /* Секції з картками (Темы, Услуги) */
    .topics-grid,
    .services-grid {
        flex-direction: column;
        align-items: center;
    }

    .topic-card,
    .service-card {
        max-width: 90%; /* Збільшуємо ширину карток на мобільних */
        margin-bottom: 20px; /* Додаємо відступ між картками */
    }
}