/* responsive-mobile.css */
/* Для портретної орієнтації */
@media (orientation: portrait) {
    body {
        background-attachment: fixed; /* Вимикає фіксацію фону в портретному режимі */
    }
}

/* Для ландшафтної орієнтації */
@media (orientation: landscape) {
    body {
        background-attachment: fixed; /* Фіксує фон у ландшафтному режимі */
    }
}

/* Для екранів з максимальною шириною 768px */
@media (max-width: 768px) {
   body {
         background-attachment: fixed; /* Вмикає фіксацію фону на мобільних  працює на андроїд*/ 
    }

   .background-container {
        background-attachment: scroll; /* Забезпечує прокручування для мобільних пристроїв */
    }
    }
    /* Навігаційне меню */
    .navbar {
        display: flex; /* Активує flexbox */
        color: #f2f2f2;
        flex-direction: row; /* Горизонтальне розташування */
        justify-content: space-between; /* Простір між елементами */
        align-items: center; /* Вирівнювання по вертикалі */
        width: 100%; /* Займає всю ширину */
        padding: 10px; /* Внутрішні відступи */
        box-sizing: border-box; /* Врахування padding у ширині */
    }

    .navbar a {
        flex: 1; /* Кожен елемент займає однакову частину */
        text-align: center; /* Центрування тексту всередині */
        padding: 10px; /* Відступи для клікабельності */
        box-sizing: border-box; /* Коректний розрахунок ширини */
    }

    /* Заголовки */
    h1 {
        font-size: 1.4rem; /* Менші заголовки */
        margin: 20px 10px;
        word-wrap: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    h2 {
        font-size: 1.2rem;
        margin: 15px 10px;
        word-wrap: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    h3 {
        font-size: 0.8rem;
        margin: 15px 10px;
        word-wrap: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    h4 {
        font-size: 0.6rem;
        margin: 15px 10px;
        word-wrap: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    .highlight, .highlight1 {
        margin-left: 5px; /* Зменшення відступу зліва */
        margin-right: 5px; /* Зменшення відступу справа */
        padding-left: 5px; /* Якщо використовується padding */
        padding-right: 5px; /* Якщо використовується padding */
    }

    /* Текст */
    p {
        font-size: 16px; /* Менший текст */
        line-height: 1.5; /* Оптимальний міжрядковий інтервал */
        margin: 10px;
        padding: 0 10px;
    }

    .p-indent {
        text-indent:40px; /* Менший відступ для мобільних */
    }

    /* Соціальні іконки */
    .social-links {
        display: flex;
        justify-content: center; /* Центрування іконок */
        gap: 15px; /* Проміжок між іконками */
        margin-top: 20px;
    }

    .social-link img {
        width: 28px; /* Зменшення розміру іконок */
        height: 28px;
    }

    /* Контейнер */
    .container {
        width: 95%; /* Зменшена ширина контейнера */
        margin: 0 auto; /* Центрування */
        word-wrap: break-word; /* Перенос слів, якщо вони не вміщуються */
        overflow-wrap: break-word; /* Альтернативне правило для переносу слів */
        hyphens: auto; /* Автоматичне розділення слів для переносу */
    }

    /* Кнопка меню (бургер-меню) */
    .menu-button {
        display: flex; /* Відображення тільки на мобільних */
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: #333;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px;
    }

    .menu-button:hover {
        background-color: #444;
    }

    /* Сховування додаткових блоків */
    .hidden {
        display: none;
    }
     /* Зменшення розміру іконок для мобільних пристроїв */
     .fixed-window .link img {
        width: 40px;
        height: 40px;
    }

    /* Зменшення відступів між іконками на малих екранах */
    .fixed-window {
        gap: 15px !important;
    }

    /* Збільшення відступу знизу для мобільних пристроїв */
    .fixed-window {
        bottom: 20px; /* Більший відступ знизу на мобільних */
    }