/* Основний стиль сторінки з градієнтом */
body {
  
  margin: 0; /* Забираємо відступи */
  padding: 0; /* Забираємо відступи */
  font-family: Arial, sans-serif; /* Базовий шрифт */
  color: #333; /* Темний текст */
}


/* Загальний стиль шапки */
.header-custom {
    width: 100%; /* Повна ширина */
    font-family: Arial, sans-serif; /* Базовий шрифт */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Тінь для блоку */
    overflow: hidden; /* Приховати зайве */
    position: relative; /* Для точного позиціонування елементів */
}

/* Верхній блок із заголовком */
.header-top {
    background: #333333; /* Темно-сірий фон */
    color: white; /* Білий текст */
    padding: 40px 0; /* Внутрішні відступи */
    text-align: center; /* Центрування тексту */
    font-size: 1.1em; /* Розмір шрифту */
    font-weight: bold; /* Жирний текст */
    text-transform: uppercase; /* Великі літери */
    letter-spacing: 2px; /* Інтервал між літерами */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Легка тінь */
    z-index: 10; /* Вище інших елементів */
    position: relative; /* Відносне позиціонування */
    display: flex; /* Використовуємо flexbox для управління текстом */
    flex-direction: column; /* Вертикальне розташування */
    justify-content: flex-start; /* Текст розташовується ближче до початку */
}

/* Заголовок */
.header-top h1 {
    margin: 50px 0 0; /* Відступ зверху */
    color: #ffffff; /* Білий текст */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Тінь для об'єму */
    font-size: clamp(1.8em, 4vw, 2.5em); /* Адаптивний розмір тексту */
    position: relative;
    top: 10px; /* Відступ зверху для заголовка */
    transition: top 0.3s ease-in-out; /* Плавна зміна позиції */
    line-height: 1.2; /* Відстань між рядками */
    text-align: center;
}

/* Другий рядок заголовка */
.header-top h1 span {
    color: #FFD700; /* Золотистий текст для другого рядка */
    text-transform: uppercase; /* Великі літери */
}

/* Нижній блок із текстом і кнопкою */
.header-bottom {
    background: linear-gradient(90deg, #f76720, #ff9823); /* Градієнт жовтого до помаранчевого */
    color: white; /* Білий текст */
    padding: 20px 10px 40px; /* Внутрішні відступи */
    text-align: center; /* Центрування тексту */
    font-size: 1.3em; /* Розмір шрифту */
    font-weight: bold; /* Жирний текст */
    position: relative; /* Для "зебри" */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Легка тінь тексту */
    z-index: 5; /* Нижче верхнього блоку */
    line-height: 1.6; /* Краща читабельність */
}

/* Дизайн "зебра" для нижнього блоку */
.header-bottom:before {
    content: "";
    position: absolute;
    bottom: 0; /* Розташування внизу */
    left: 0; /* Початок зліва */
    width: 100%; /* На всю ширину */
    height: 15px; /* Висота смужки */
    background: repeating-linear-gradient(
        45deg,
        black 0,
        black 10px,
        #FFD700 10px,
        #FFD700 20px
    ); /* Чорно-жовті смужки */
}


/* Адаптація для телефонів */
@media (max-width: 768px) {
    .header-top h1 {
        font-size: 1.2em; /* Зменшення тексту заголовка */
        margin: 20px 0; /* Менші відступи для тексту */
        top: 20px; /* Переміщення заголовка вниз */
        position: relative; /* Для точного позиціонування */
        line-height: 1.4; /* Поліпшення читабельності */
    }

    .header-top h1 span {
        font-size: 1.1em; /* Менший розмір другого рядка */
    }

    .header-bottom {
        font-size: 1em; /* Менший текст у нижньому блоці */
padding: 15px 10px 30px; /* Зменшені відступи */
        line-height: 1.4; /* Менший міжрядковий інтервал */
    }

    .cta-button {
        padding: 12px 25px; /* Зменшення розміру кнопки */
        font-size: 0.9em; /* Зменшення розміру тексту кнопки */
        margin: 25px auto; /* Центрування кнопки */
        border-radius: 20px; /* Трохи більше округлення для естетики */
    }
}


/* Інформаційна смужка */
.info-bar {
    background: #333; /* Темно-сірий фон для кращого контрасту */
    color: #ffffff; /* Білий текст для покращення видимості */
    padding: 10px 20px; /* Внутрішні відступи */
    text-align: center; /* Центрування тексту */
    font-size: 1.1em; /* Трохи більший розмір тексту */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тінь для глибини */
    border-bottom: 2px solid #FF8C00; /* Контрастна помаранчева лінія внизу */
    font-weight: bold; /* Жирний текст для читабельності */
}

/* Посилання у смужці */
.info-bar a {
    color: #FF8C00; /* Помаранчевий текст для виділення посилань */
    text-decoration: none; /* Без підкреслення */
    font-weight: bold; /* Жирний текст */
}

.info-bar a:hover {
    text-decoration: underline; /* Підкреслення при наведенні */
    color: #FFD700; /* Світліший помаранчевий при наведенні */
}

/* Для мобільних пристроїв (менше 768px ширини) */
@media (max-width: 768px) {
    .info-bar {
        font-size: 0.9em; /* Зменшений, але все ще чіткий розмір тексту */
    }
}

/* Для комп'ютерів (768px і більше) */
@media (min-width: 768px) {
    .info-bar {
        font-size: 1.2em; /* Трохи більший стандартний розмір тексту */
    }
}
/* Кнопка для відкриття меню */
.menu-toggle {
    background: #FF8C00; /* Помаранчевий фон */
    color: white; /* Білий текст */
    border: none; /* Без рамки */
    border-radius: 5px; /* Закруглені кути */
    padding: 10px 15px; /* Відступи всередині кнопки */
    font-size: 1.1em; /* Розмір тексту */
    font-weight: bold; /* Жирний текст */
    cursor: pointer; /* Вказівник курсора */
    position: absolute; /* Абсолютне позиціонування */
    top: 10px; /* Відступ від верху */
    left: 15px; /* Відступ від лівого краю */
    z-index: 1000; /* Попереду інших елементів */
    display: block; /* Показати кнопку за замовчуванням */
}

/* Приховати кнопку меню на комп'ютерах */
@media (min-width: 769px) {
    .menu-toggle {
        display: none; /* Приховати кнопку */
    }
}

/* Меню */
.menu {
    background: #333; /* Темний фон меню */
    color: white; /* Білий текст */
    padding: 10px 15px; /* Відступи всередині меню */
    border-radius: 0; /* Забрати закруглені кути */
    flex-direction: column; /* Вертикальне розташування елементів */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Тінь для меню */
    display: none; /* Приховати меню за замовчуванням */
    position: absolute; /* Абсолютне позиціонування для мобільних */
    top: 60px; /* Відступ від кнопки меню */
    left: 20px; /* Вирівнювання з кнопкою меню */
    width: calc(90% - 40px); /* Ширина меню з урахуванням відступів */
    z-index: 999; /* Попереду інших елементів */
}

/* Відкрите меню на мобільних */
.menu.open {
    display: flex; /* Показати меню */
}

/* Пункти меню */
.menu ul {
    list-style: none; /* Видалення маркерів списку */
    margin: 0; /* Забрати зовнішні відступи */
    padding: 0; /* Забрати внутрішні відступи */
    display: flex; /* Відображення списку */
    flex-direction: column; /* Вертикальне розташування для мобільних */
    gap: 10px; /* Відстань між пунктами меню */
    width: 100%; /* Ширина на весь екран */
}

.menu li {
    text-align: left; /* Вирівнювання тексту по лівому краю */
}

/* Розділювач між пунктами */
.menu li:not(:last-child) {
    border-bottom: 1px solid #FF8C00; /* Тонка помаранчева лінія */
}

/* Посилання в меню */
.menu a {
    text-decoration: none; /* Прибрати підкреслення */
    color: white; /* Білий текст */
    font-weight: bold; /* Жирний текст */
    padding: 10px 15px; /* Відступи всередині пунктів меню */
    transition: background 0.3s, color 0.3s; /* Анімація при наведенні */
    display: block; /* Блокове відображення для зручності */
}

.menu a:hover {
    background: #FF8C00; /* Помаранчевий фон при наведенні */
    color: white; /* Білий текст при наведенні */
}

/* Постійно відкрите меню на великих екранах */
@media (min-width: 769px) {
    .menu {
        display: flex; /* Показати меню */
        position: fixed; /* Закріпити меню */
        top: 0; /* Почати з верхнього краю */
        left: 0; /* Почати з лівого краю */
        width: 100%; /* Займати всю ширину екрану */
        flex-direction: row; /* Горизонтальне розташування */
        justify-content: center; /* Центрувати елементи */
        background: #333; /* Темний фон */
        padding: 10px 0; /* Відступи */
        z-index: 1000; /* Вгорі інших елементів */
    }

    .menu ul {
        flex-direction: row; /* Горизонтальне розташування пунктів */
        gap: 20px; /* Відстань між пунктами */
        justify-content: center; /* Центрувати елементи */
    }

    /* Видалення розділювачів на комп'ютерах */
    .menu li:not(:last-child) {
        border-bottom: none; /* Видалити лінії між пунктами меню */
    }
}

/* Загальний стиль для контейнера */
#blog {
  padding: 50px 0;
  font-family: 'Arial', sans-serif;
  color: #333;
}

#blog .container {
  max-width: 1100px; /* Оптимальна ширина для читання */
  margin: 0 auto; /* Центрування блоку */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 30px; /* Відступ між блоками */
}

/* Загальний стиль для блоків */
.blog-post, .blog-post1, .blog-post2 {
  background: #ffffff;
  border: 1px solid #f57e20;
  border-radius: 8px;
  padding: 20px 30px; /* Збільшені відступи для комфорту читання */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Запобігання виходу тексту за межі блоку */
}

/* Загальний стиль для заголовків */
.blog-post h1, .blog-post1 h2, .blog-post2 h2 {
  color: #000000; /* Оранжевий колір заголовків */
  font-weight: bold;
  font-size: 24px; /* Оптимальний розмір заголовків */
  line-height: 1.4;
  margin-bottom: 15px;
}

/* Загальний стиль для тексту */
.blog-post p, .blog-post1 p, .blog-post2 p {
  font-size: 18px; /* Збільшений розмір тексту */
  line-height: 1.8; /* Комфортна міжрядкова відстань */
  margin-bottom: 20px; /* Чіткі відступи між абзацами */
  text-align: justify; /* Вирівнювання по ширині */
}

/* Вирівнювання списків */
.blog-post ul, .blog-post1 ul, .blog-post2 ul {
  padding-left: 20px;
}

.blog-post ul li::before, .blog-post1 ul li::before, .blog-post2 ul li::before {
  color: #ff9e0d;
  margin-right: 10px;
}


/* Основний банер cookie */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* Фон на всю ширину */
    background: rgba(0, 0, 0, 0.9); /* Темний фон */
    color: #fff; /* Білий текст */
    display: flex;
    justify-content: flex-start; /* Вирівнювання тексту та кнопок по лівій стороні */
    align-items: center; /* Вертикальне центрування */
    padding: 15px 20px;
    box-sizing: border-box;
    z-index: 1000;
}

/* Текст у банері */
#cookie-banner span {
    font-size: 16px;
    margin-right: 20px; /* Відступ між текстом і кнопками */
}

/* Кнопки у банері */
#cookie-banner button {
    background-color: #ffcc00; /* Жовтий фон */
    color: #000; /* Чорний текст */
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px; /* Відступ між кнопками */
    transition: background-color 0.3s ease;
}

/* Кнопка "Відхилити" */
#decline-cookie {
    background-color: #666; /* Сірий фон */
    color: #fff; /* Білий текст */
}

/* Ефект при наведенні */
#cookie-banner button:hover {
    background-color: #ffb700; /* Темніший жовтий */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
    #cookie-banner {
        flex-direction: column; /* Вертикальне розташування на мобільних */
        text-align: center; /* Текст і кнопки по центру */
        padding: 15px;
    }

    #cookie-banner span {
        margin-bottom: 10px; /* Відступ між текстом і кнопками */
        font-size: 14px;
    }

    #cookie-banner button {
        margin: 5px 0; /* Відступ між кнопками */
        width: 100%; /* Кнопки на всю ширину */
    }
}

/* Модальне вікно */
#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

#modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    max-height: 80vh;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    position: relative;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

#modal-content h2 {
    margin-top: 0;
    font-size: 22px;
    color: #000;
    text-align: center;
}

#modal-content p, #modal-content li {
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0;
    color: #333;
}

#modal-content ul {
    padding-left: 20px;
    margin: 10px 0;
}

/* Фіксований блок для кнопки */
#close-modal-wrapper {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent; /* Прибираємо фон */
    text-align: center;
    padding: 10px 0;
}

/* Жовта кнопка "Закрити" */
#close-modal {
    background-color: #ffcc00; /* Жовтий фон */
    color: #000; /* Чорний текст */
    border: none;
    padding: 15px 20px; /* Широкі відступи */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    width: 100%; /* Кнопка на всю ширину */
    max-width: 600px; /* Максимальна ширина */
    margin: 0 auto; /* Центрування */
    border-radius: 5px;
}

/* При наведенні на кнопку */
#close-modal:hover {
    background-color: #ffb700; /* Темніший жовтий */
    color: #000; /* Чорний текст */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
    #cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    #cookie-banner span {
        margin-bottom: 10px;
        font-size: 14px;
    }

    #cookie-banner button {
        font-size: 14px;
        margin: 5px 0;
        width: 100%;
    }

    #modal-content {
        max-height: 90vh;
        padding: 15px;
    }

    #modal-content h2 {
        font-size: 18px;
    }

    #modal-content p, #modal-content li {
        font-size: 14px;
    }

    #close-modal {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Блокування прокручування основної сторінки */
body.no-scroll {
    overflow: hidden;
}
 #cookie-banner {
        display: none; /* Спочатку приховано */
        opacity: 0; /* Початкова прозорість */
        transition: opacity 1s ease-in-out; /* Анімація плавної появи */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #333;
        color: white;
        padding: 10px;
        text-align: center;
        z-index: 1000;
    }
    #modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1001;
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .no-scroll {
        overflow: hidden;
    }
#cookie-banner a {
    color: #ffcc00; /* Жовтий колір для посилання */
    text-decoration: underline;
    cursor: pointer;
}

#cookie-banner a:visited {
    color: #ffcc00; /* Зберігаємо жовтий колір навіть для відвіданих посилань */
}

#cookie-banner a:hover {
    color: #ffb700; /* Темніший жовтий при наведенні */
}

/* Контейнер меню */
#compact-menu {
  display: flex;
  justify-content: center;
  padding: 20px;
  
}

/* Грід-сітка для кнопок */
.menu-grid {
  display: flex;
  flex-wrap: wrap; /* Кнопки переходять у новий ряд */
  gap: 15px; /* Відстань між кнопками */
  max-width: 1700px; /* Максимальна ширина контейнера для комп'ютерів */
  justify-content: center; /* Центрування кнопок */
}

/* Стиль кнопок */
.menu-item {
  display: inline-block; /* Ширина залежить від тексту */
  text-align: center;
  text-decoration: none;
  font-size: 13px; /* Розмір тексту */
  font-weight: bold;
  color: #333; /* Темний текст */
  background-color: #ffffff; /* Білий фон */
  border: 1px solid #f57e20; /* Оранжева рамка */
  border-radius: 10px; /* Згладжені краї */
  padding: 10px 15px; /* Внутрішні відступи */
  white-space: normal; /* Дозволяє перенос тексту */
  word-wrap: break-word; /* Перенос довгих слів */
  transition: all 0.3s ease; /* Анімація при наведенні */
}

/* Ховер-ефект для кнопок */
.menu-item:hover {
  background-color: #f57e20; /* Оранжевий фон */
  color: #ffffff; /* Білий текст */
  transform: scale(1.05); /* Легке збільшення */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Легка тінь */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Два стовпці */
    gap: 10px; /* Зменшений відступ між кнопками */
  }
  .menu-item {
    font-size: 12px; /* Менший текст */
    padding: 8px 10px; /* Зменшені відступи */
    white-space: normal; /* Текст переноситься на новий рядок */
    word-break: break-word; /* Довгі слова переносяться */
  }
}