/* Змінні для основних кольорів */
:root {
  --background-color: #f5f5f5; /* Фоновий колір */
  --font-color: #333; /* Колір шрифту */
  --menu-color: #1f3182; /* Основний колір меню */
  --menu-color-2nd: #dab747; /* Другорядний колір меню */
  --secondary-color: #555; /* Другорядний колір */
}

/* Прелоадер */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Повна ширина */
  height: 100%; /* Повна висота */
  background-color: rgba(0, 0, 0, 0.9); /* Темний напівпрозорий фон */
  display: flex;
  align-items: center; /* Центрування по вертикалі */
  justify-content: center; /* Центрування по горизонталі */
  z-index: 9999; /* Пріоритетний шар */
  transition: opacity 0.5s ease; /* Плавна зміна прозорості */
}

.spinner {
  width: 100px; /* Розмір спінера */
  height: 100px;
  border: 8px solid rgba(255, 255, 255, 0.2); /* Напівпрозоре коло */
  border-top: 8px solid white; /* Верхня частина спінера */
  border-radius: 50%; /* Закруглені краї */
  animation: spin 1s linear infinite; /* Анімація обертання */
}

/* Відображення відсотків */
.percentage {
  position: absolute;
  color: white; /* Білий колір тексту */
  font-size: 1.5em;
  pointer-events: none; /* Відключення взаємодії з мишею */
  text-align: center;
  top: 50%; /* Центрування по вертикалі */
  left: 50%; /* Центрування по горизонталі */
  transform: translate(-50%, -50%);
  z-index: 10; /* Пріоритет над іншими елементами */
}

/* Анімація обертання круга */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); /* Повний оберт */
  }
}

/* Відступ для заголовків секцій */
section {
  scroll-margin-top: 100px; /* Відступ для видимості заголовків */
}

/* Підключення шрифтів */
@font-face {
  font-family: 'Istok Web';
  src: url('fonts/Istok_Web/IstokWeb-Regular.ttf') format('truetype'); /* Основний шрифт */
}

@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat/Caveat-Regular.ttf') format('truetype'); /* Декоративний шрифт */
}

/* Загальні стилі */
body, html {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Основний шрифт */
  height: 100%; /* Повна висота документа */
  width: 100%; /* Повна ширина документа */
  scroll-behavior: smooth; /* Плавне прокручування */
  overflow-x: hidden; /* Відключення горизонтальної прокрутки */
  line-height: 1.8; /* Міжрядковий інтервал */
  box-sizing: border-box; /* Встановлення моделі "коробки" */
}

/* Фіксований блок меню */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Повна ширина */
  background-color: rgba(255, 255, 255, 0.8); /* Напівпрозоре меню */
  backdrop-filter: blur(10px); /* Розмиття фону */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легка тінь */
  z-index: 10; /* Пріоритет */
  display: flex; /* Використання Flexbox */
  align-items: center; /* Вирівнювання по вертикалі */
  justify-content: space-between; /* Розташування елементів з боків */
  height: 70px; /* Висота меню */
  padding: 0 20px; /* Відступи */
  box-sizing: border-box;
}

/* Стилі для інших елементів */
.logo img {
  max-height: 60px; /* Максимальна висота */
  height: auto; /* Пропорційне масштабування */
  display: block;
}

/* Блок кнопок навігації */
.menu ul {
  display: flex;
  gap: 30px; /* Проміжок між пунктами */
  padding: 0;
  list-style: none; /* Відключення спискових маркерів */
  transition: opacity 0.5s ease, top 0.5s ease, background-color 0.3s ease; /* Плавний перехід */
  animation: fadeIn 0.75s ease-in-out forwards; /* Анімація появи */
}

/* Пункт меню */
.menu ul li a {
  font-size: 20px;
  font-weight: bold; /* Жирний текст */
  color: var(--menu-color); /* Основний колір */
  text-decoration: none; /* Без підкреслення */
  text-transform: uppercase; /* Всі літери великими */
  padding: 10px 15px;
  transition: opacity 0.5s ease, top 0.5s ease, background-color 0.3s ease;
}

/* Ефект при наведенні */
.menu ul li a:hover {
  color: var(--menu-color-2nd); /* Другорядний колір */
}

/* Підменю */
.menu ul li.has-sub ul {
  display: none; /* Приховування за замовчуванням */
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8); /* Напівпрозоре підменю */
  backdrop-filter: blur(10px); /* Розмиття фону */
  box-shadow: 0 4px 8px rgba(117, 117, 117, 0.1); /* Тінь */
  list-style: none;
  padding: 5px;
  top: 100%; /* Розташування під основним меню */
  margin-top: 0.1px;
}

/* Показ підменю при наведенні */
.menu ul li:hover ul {
  display: block;
}
 
  .menu ul li.has-sub ul li a {
    font-size: 20px;
    font-weight: bold;    
    color: var(--menu-color);
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    white-space: nowrap;
  }
  
  .menu ul li.has-sub ul li a:hover {
    color: var(--menu-color-2nd);
}
/* Burger */
.burger-menu {
  display: none; /* По умолчанию скрыто */
  position: absolute;
  top: 65px;
  right: 0;
  background-color: var(--background-color);
  z-index: 10;
  padding: 10px; /* Чтобы было немного пространства вокруг текста */
  border-radius: 5px; /* Дополнительно для красивого внешнего вида */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для меню */
  width: auto; /* Ширина подстраивается под содержимое */
}

.burger-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.burger-menu ul li a {
  font-size: 18px;
  text-decoration: none;
  color: var(--menu-color);
  font-weight: bold;
  padding: 5px 10px; /* Немного внутреннего отступа для удобства */
  border-radius: 3px; /* Скругление для кнопок */
  background-color: var(--background-color); /* Добавьте фон кнопкам */
  text-align: center;
}

/* Стили для открытого меню */
.burger-menu.show {
    display: block; /* Показываем меню */
}

/* Кнопка-бургер */
.burger-button {
  display: none; /* По умолчанию скрыто */
  cursor: pointer;
  position: absolute;
  top: 60px;
  right: 12px;
  z-index: 20;
}

.burger-button div {
  width: 25px;
  height: 3px;
  background-color: var(--menu-color); /* Используем переменную цвета */
  margin: 5px 0;
  transition: 0.3s ease;
}


  /* Вибір мови */
/* Вибір мови */
.languages {
  display: flex;
  justify-content: flex-end; /* Сместить вправо */
  gap: 10px; /* Увеличить расстояние между элементами */
  font-size: 20px;
  color: var(--menu-color);
  font-weight: bold;
  padding: 10px 20px; /* Добавить равномерные отступы */
  white-space: nowrap; /* Запретить перенос текста */
}

.languages span {
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.languages span:hover {
  color: var(--menu-color-2nd);
}
  
  /* Стиль секції banner */
#banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('images/bg.jpg') no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.banner-content {
  max-width: 600px;
  text-align: center;
  transition: margin-top 0.3s ease, margin-left 0.3s ease; /* Плавные изменения */
}

/* Заголовок */
.banner-content h1 {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  margin-bottom: 20px;
  color: white;
}

/* Описание */
.banner-content p {
  font-family: 'Istok Web', sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: white;
}

/* Кнопка */
.banner-button {
  display: inline-block;
  background: linear-gradient(135deg, #1f3182, #dab747);
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.banner-button:active {
  transform: scale(0.95);
}
  
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Масштабирование по ширине и высоте с сохранением пропорций */
    object-position: center; /* Центровка изображения */
  }
  
  .text-overlay {
    position: absolute;
    top: 50%; /* Розташування тексту по центру вертикально */
    left: 20%; /* Розташування тексту з відступом від лівого краю */
    transform: translate(-50%, -50%); /* Центрування тексту */
    text-align: center; /* Вирівнювання тексту по центру (змінити на "left", щоб вирівняти ліворуч) */
    background-color: rgba(63, 63, 63, 0.7); /* Напівпрозорий фон */
    backdrop-filter: blur(10px); /* Додаткове розмиття для фону */
    padding: 12px; /* Відступи всередині блоку */
    border-radius: 10px; /* Закруглені кути */
    color: var(--background-color); /* Основний колір тексту */
    display: flex; /* Використання гнучкого макета для вирівнювання елементів */
    flex-direction: column; /* Розташування елементів вертикально */
    gap: 12px; /* Відстань між рядками тексту */
    z-index: 1; /* Пріоритет для відображення поверх інших елементів */
}

.text-overlay .row {
    display: flex; /* Гнучкий контейнер для рядка */
    align-items: center; /* Вирівнювання елементів по вертикалі */
    justify-content: center; /* Вирівнювання елементів вліво (змінити на "center", якщо потрібно центрувати) */
    gap: 5px; /* Відстань між словами "I am" і "Olga Zheman" */
}

.text-overlay .part0 {
    /* font-family: 'Istok Web', sans-serif;
    font-size: 27px; 
    line-height: 38px;  */
    font-family: 'Caveat', cursive; /* Шрифт для імені */
    font-size: 38px; /* Розмір тексту */
    line-height: 38px; /* Висота рядка */
}

.text-overlay .part1 {
    font-family: 'Caveat', cursive; /* Шрифт для імені */
    font-size: 38px; /* Розмір тексту */
    line-height: 38px; /* Висота рядка */
}

.text-overlay .part2 {
    font-family: 'Istok Web', sans-serif; /* Шрифт для основного опису */
    font-size: 25px; /* Розмір тексту */
    line-height: 33px; /* Висота рядка */
}

.text-overlay .part3 {
    font-family: 'Istok Web', sans-serif; /* Шрифт для додаткового опису */
    font-size: 23px; /* Розмір тексту */
    line-height: 31px; /* Висота рядка */
}

.text-overlay .part4 {
    font-family: 'Istok Web', sans-serif; /* Шрифт для примітки */
    font-size: 18px; /* Розмір тексту */
    color: #ccc; /* Колір тексту (змінити за потреби) */
    /* text-align: left; */ /* Прибрати коментар, щоб вирівняти текст ліворуч */
}

.overlay-button {
    margin: 0 auto; /* Сдвигает элемент в центр, если родитель не использует flex */
    width: 100%; /* Кнопка займає всю ширину контейнера */
    max-width: 250px; /* Максимальна ширина кнопки */
    background: linear-gradient(135deg, #1f3182, #dab747); /* Градієнтний фон кнопки */
    color: white; /* Колір тексту на кнопці */
    padding: 15px 30px; /* Відступи всередині кнопки */
    border-radius: 30px; /* Закруглені краї кнопки */
    border: none; /* Відсутність рамки */
    font-family: 'Caveat', cursive; /* Шрифт для кнопки */
    font-size: 28px; /* Розмір тексту */
    font-weight: bold; /* Жирний текст */
    text-transform: uppercase; /* Всі літери у верхньому регістрі */
    letter-spacing: 2px; /* Міжлітерний інтервал */
    text-align: center; /* Вирівнювання тексту в кнопці */
    cursor: pointer; /* Змінює курсор на "руку" при наведенні */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Тінь для кнопки */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease; /* Анімація при наведенні */
}

.overlay-button:hover {
    background: linear-gradient(135deg, #dab747, #1f3182); /* Інший градієнт при наведенні */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Сильніша тінь при наведенні */
    transform: scale(1.05); /* Легке збільшення при наведенні */
}

.overlay-button:active {
    transform: scale(0.95); /* Ефект натискання (зменшення) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Менша тінь при натисканні */
}


.section-title-service, 
.section-title-about, 
.section-title-form, 
.section-title-call,
.section-title-end {
    text-align: center;
    font-size: 28px;
    color: var(--menu-color);
    margin-bottom: 20px;
    transition: color 0.3s ease-in-out; /* Плавный переход цвета */
}

.section-title-service:hover, 
.section-title-about:hover, 
.section-title-form:hover, 
.section-title-call:hover,
.section-title-end:hover {
    color: var(--menu-color-2nd); /* Цвет при наведении */
}  

  /* Послуги, про мене*/
  #service .container-service, #about .container-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }
  
  .column {
    color: var(--font-color); /* Тепер текст темно-сірий #333 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color); /* Додайте фон для кращого контрасту */
    text-align: justify;
    min-height: 300px; /* Встановіть однакову мінімальну висоту для блоків */
  }

  /* Миниатюры */
  .thumbnail {
    width: 340px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .thumbnail:hover {
    transform: scale(1.1);
  }

.thumbnail-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Расстояние между блоками */
}

.photo-with-diplomas {
  text-align: center; /* Центрирование */
}



.diploma-list {
  display: flex;
  overflow-x: auto; /* Горизонтальная прокрутка для дипломов */
  scroll-behavior: smooth; /* Плавная прокрутка */
}

.diploma-list img {
  width: 120px;
  height: auto;
  margin: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.diploma-list img:hover {
  transform: scale(1.1); /* Увеличение при наведении */
}

/* Контейнер для слайдера */
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 340px; /* Размер контейнера - место, где было фото */
  height: 240px; /* Фиксированная высота для отображения дипломов */
  overflow: hidden; /* Скрываем все за пределами видимой области */
  margin: 0 auto; /* Центрируем слайдер */
}

/* Слайдер для дипломов */
.slider {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Запрещаем перенос элементов на новую строку */
  transition: transform 0.3s ease-in-out; /* Плавный скролл */
  gap: 10px;
  overflow-x: hidden; /* Прокрутка только внутри контейнера */
  scroll-behavior: smooth; /* Плавная прокрутка */
}

/* Дипломы */
.slider img {
  width: 100%; /* Масштабируем под размер контейнера */
  height: auto;
  max-width: 120px; /* Миниатюра диплома */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.slider img:hover {
  transform: scale(1.1); /* Легкое увеличение */
}

/* Стрелки */
.slider-arrow {
  background-color: transparent;
  color: #1f3182; /* Синий цвет текста */
  border: none;
  cursor: pointer;
  font-size: 48px; /* Увеличенный размер стрелок */
  font-weight: bold;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 15px; /* Удобная зона для клика */
  opacity: 0.9; /* Легкая прозрачность */
}

.slider-arrow:hover {
  opacity: 1; /* Полностью видимая стрелка при наведении */
}

.slider-arrow.left-arrow {
  left: 0; /* Ближе к левому краю слайдера */
}

.slider-arrow.right-arrow {
  right: 0; /* Ближе к правому краю слайдера */
}


.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
  


#contact-section {
  padding: 50px 0;
  background-color: white;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.form-container, .contact-info {
  flex: 1;
  background-color: var(--background-color);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-container {
  flex: 0 0 300px;
  text-align: center;
}

.image-container img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form input, form select, form textarea {
  width: 100%; /* Задает одинаковую ширину для всех полей */
  box-sizing: border-box; /* Учитывает внутренние отступы и границы в ширину */
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

form button {
  width: 100%;
  padding: 15px;
  background-color: var(--menu-color);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: var(--menu-color-2nd);
}

.contact-info p {
  margin-bottom: 10px;
  color: var(--menu-color); /* Цвет значков */
  font-size: 18px;
  transition: transform 0.2s ease, color 0.3s ease;
}

.contact-info p:hover {
  color: var(--menu-color-2nd); /* Изменение цвета при наведении */
  transform: scale(1.05);
}

.social-icons a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--menu-color);
  margin: 5px 0;
}

.social-icons a:hover {
  color: var(--menu-color-2nd);
}

.social-icons i {
  font-size: 24px;
}

footer {
  background-color: var(--background-color);
  padding: 1px 0;
  text-align: center;
  font-size: 16px;
  color: #333;
  border-top: 1px solid #e0e0e0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-icons {
  display: flex;
  gap: 20px;
}

.footer-icons a {
  color: var(--menu-color); /* Цвет значков */
  font-size: 24px;
  transition: transform 0.2s ease, color 0.3s ease;
}

.footer-icons a:hover {
  color: var(--menu-color-2nd); /* Изменение цвета при наведении */
  transform: scale(1.1);
}

.footer-button {
  text-align: right;
}

.blog-button {
  background-color: var(--menu-color);
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.blog-button:hover {
  background-color: var(--menu-color-2nd);
  transform: scale(1.05);
}

footer p {
  margin: 1px 0 0;
  font-size: 18px;
  color: var(--font-color);
}

.footer-logo a {
  cursor: pointer;
}

/* Адаптивность для десктопа */
@media (min-width: 769px) {
  .banner-content {
    margin-top: 20vh; /* Опускаем текст ниже */
  }
}

/* Mobile adoptation */
@media (max-width: 768px) {
    /* Фиксированное меню */
    .header {
      height: 60px; /* Уменьшаем высоту */
      padding: 0 10px; /* Уменьшаем внутренние отступы */
  }

  #banner {
    align-items: flex-start; /* Перемещаем содержимое вверх */
  }

  .banner-content {
    margin-top: 30vh; /* Смещаем текст вниз на 30% от высоты экрана */
    margin-left: -10%; /* Сдвигаем текст и кнопку левее */
    max-width: 90%; /* Ограничиваем ширину текста на мобильных устройствах */
    word-wrap: break-word; /* Перенос длинных слов */
  }

  .banner-content h1 {
    font-size: 2.5rem; /* Уменьшаем заголовок */
  }

  .banner-content p {
    font-size: 1rem; /* Уменьшаем текст описания */
    line-height: 1.4; /* Уменьшаем межстрочный интервал */
    margin-bottom: 10px; /* Уменьшаем отступ между текстом и кнопкой */
  }

  .banner-button {
    font-size: 1.2rem; /* Уменьшаем шрифт кнопки */
    padding: 10px 20px; /* Уменьшаем внутренние отступы кнопки */
  }

  .logo img {
      max-height: 50px; /* Уменьшаем высоту лого */
  }

  .languages {
    justify-content: center; /* В мобильной версии центрируем */
    padding: 10px 0; /* Уменьшаем боковые отступы */
  }

  /* Меню */
   .menu ul {
      display: none; /* Скрываем меню по умолчанию */
      flex-direction: column; /* Делаем вертикальным */
      position: absolute;
      top: 65px;
      left: 0;
      width: 100%;
      background-color: var(--background-color);
      z-index: 999; /* Поверх другого контента */
  }

  .menu ul.show {
      display: flex; /* Показываем меню при активации */
  }


    .burger-button {
        display: block; /* Показываем кнопку */
    }


  /* Заголовки */
  .section-title-service,
  .section-title-about,
  .section-title-form,
  .section-title-call,
  .section-title-end {
      font-size: 22px; /* Уменьшаем заголовки */
  }

  /* Сетки */
  #service .container-service,
  #about .container-about {
      grid-template-columns: 1fr; /* Одна колонка на мобильных */
      gap: 15px;
      padding: 20px 10px; /* Меньше отступов */
  }

  .column {
      min-height: auto; /* Убираем фиксированную высоту */
      padding: 15px;
  }

  .form-container input,
  .form-container textarea {
      width: 100%;
      max-width: 400px; /* Ограничиваем ширину */
  }

  /* Контактная форма */
  .contact-container {
      flex-direction: column; /* Элементы в колонку */
      align-items: center;
  }

  .form-container button {
    width: auto;
    padding: 10px 20px;
}
.contact-image {
  max-width: 250px; /* Уменьшаем картинку */
}

  .form-container,
  .contact-info {
      width: 90%; /* Растягиваем на всю ширину */
      margin-bottom: 20px; /* Добавляем отступ между блоками */
  }

  /* Изображения */
  .thumbnail {
      width: 100%; /* Масштабируем на 100% */
      max-width: 300px; /* Ограничиваем максимальную ширину */
  }

  .image-container img {
      max-width: 100%; /* Растягиваем изображение */
  }

  /* Кнопка */
  .overlay-button {
      font-size: 16px; /* Уменьшаем текст */
      max-width: 200px; /* Ограничиваем ширину */
      padding: 10px 20px;
      cursor: pointer;
  }

  /* Текстовые блоки */
  .text-overlay {
      width: 90%; /* Уменьшаем ширину */
      padding: 20px; /* Меньше отступов */
      top: 50%; /* Смещаем ниже */
      transform: translateY(-30%); /* Центруем */
  }

  .text-overlay .part0,
  .text-overlay .part1 {
      font-size: 20px; /* Уменьшаем размер шрифта */
  }

  .text-overlay .part2,
  .text-overlay .part3 {
      font-size: 18px;
  }

  /* Footer */
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-logo img {
    max-width: 150px;
}

.footer-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer-button {
    margin-top: 15px;
}

.blog-button {
    font-size: 14px;
    padding: 8px 12px;
}

}