body {
    font-family: sans-serif;
    margin: 0;
    /* Убираем сплошной цвет фона, чтобы видеть Vanta */
    background-color: transparent;
    /* Используем Flexbox для "прижатия" футера к низу */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Минимальная высота тела - вся высота экрана */
}

/* Стили для фона Vanta */
#vanta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: #eeeeee;
    z-index: -2; /* Помещаем на самый задний план */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* Необходимо для правильного позиционирования над фонами */
    z-index: 1; /* Убедимся, что контент выше фонов */
    padding: 20px; /* Переносим padding из body сюда */
    /* Позволяем контейнеру расти, чтобы занять все доступное пространство */
    flex-grow: 1;
}

.gallery {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Адаптивное количество колонок */
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    /* Добавляем более выразительную и глубокую тень для каждого элемента */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.733);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Добавляем соотношение сторон. Это заставит все ячейки сетки
       иметь одинаковые пропорции (например, 4:3).
       Высота будет вычисляться автоматически на основе ширины,
       гарантируя одинаковую высоту для всех рядов. */
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* При наведении на карточку, мы немного приподнимаем ее и усиливаем тень для интерактивности */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.781);
}

.gallery-item:hover img { transform: scale(1.05); } /* Зум изображения при наведении оставляем */

    .gallery-title {
      font-size: clamp(2.5rem, 5vw + 1rem, 5rem); /* Адаптивный размер шрифта */
      font-weight: bold;
      text-align: center; /* Выравниваем текст по центру */
      margin-top: 120px; /* Отступ от хедера */
      margin-bottom: 40px; /* Добавляем отступ снизу вместо <br> */
      /* Цвет текста делаем немного темнее фона, чтобы усилить эффект "вдавленности" */
      color: #2c2c2c;
      /* text-shadow:
        /* Темная тень сверху-слева, создает внутреннюю тень */
        /* -1px -1px 1px rgba(49, 24, 0, 0.63), */
        /* Светлый блик снизу-справа, создает эффект освещенного края */
        /* 1px 1px 1px rgba(255, 255, 255, 0.075); */
    }

/* =================================
   Стили для статических страниц
   ================================= */

   .title {
      font-size: clamp(2.5rem, 5vw + 1rem, 5rem); /* Адаптивный размер шрифта */
      font-weight: bold;
      text-align: center; /* Выравниваем текст по центру */
      margin-top: 40px; /* Отступ от хедера */
      margin-bottom: 40px; /* Добавляем отступ снизу вместо <br> */
      /* Цвет текста делаем немного темнее фона, чтобы усилить эффект "вдавленности" */
      color: #2c2c2c;
      /* text-shadow:
        /* Темная тень сверху-слева, создает внутреннюю тень */
        /* -1px -1px 1px rgba(49, 24, 0, 0.63), */
        /* Светлый блик снизу-справа, создает эффект освещенного края */
        /* 1px 1px 1px rgba(255, 255, 255, 0.075); */
    }

/* Контейнер для текстового контента.
   Делаем его уже, чем основной контейнер страницы, для лучшей читаемости. */
.text-content {
    max-width: 900px; /* Оптимальная ширина для чтения текста */
    margin: 40px auto;   /* Центрируем и добавляем вертикальные отступы */
    padding: 20px 40px;
    background-color: #ffffff; /* Легкий фон, чтобы отделить от Vanta */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
    /* text-shadow: 0 1px 0 #68402280 !important; */
    color: #2c2c2c; /* Базовый цвет текста для этого блока */
}

/* Стили для основного текста (параграфов) */
.text-content p {
    font-size: 1.1rem;      /* Немного увеличим базовый размер шрифта */
    line-height: 1.7;       /* Увеличиваем межстрочный интервал для комфортного чтения */
    margin-bottom: 1.25em;  /* Отступ между параграфами */
}

/* Стили для подзаголовков внутри текста */
.text-content h2,
.text-content h3 {
    color: #93b458;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #93b458; /* Линия-разделитель в фирменном цвете */
}

.text-content h2 {
    font-size: 1.8rem;
}

.text-content h3 {
    font-size: 1.4rem;
}

/* Стили для ссылок в тексте */
.text-content a {
    color: #DEB887; /* Фирменный цвет для ссылок */
    text-decoration: none;
    font-weight: bold;
}

.text-content a:hover {
    color: #ffffff;
    text-decoration: underline;
    background-color: transparent; /* Убираем фон при наведении, который есть глобально */
}

.kontakt-formular {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: #93b458; /* Легкий фон, чтобы отделить от Vanta */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #68402280 !important;
  color: #fff; /* Базовый цвет текста для этого блока */
}

.kontakt-formular label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.kontakt-formular input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.2); /* Возвращаем полупрозрачный фон */
  backdrop-filter: blur(5px); /* Добавляем эффект размытия для "стекла" */
  -webkit-backdrop-filter: blur(5px); /* Для совместимости с Safari */
  color: #f0f0f0;
  box-sizing: border-box;
}

.kontakt-formular textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.2); /* Возвращаем полупрозрачный фон */
  backdrop-filter: blur(5px); /* Добавляем эффект размытия для "стекла" */
  -webkit-backdrop-filter: blur(5px); /* Для совместимости с Safari */
  color: #f0f0f0;
  resize: none;
  min-height: 150px;
  box-sizing: border-box;
}

/* --- Исправление для стилей автозаполнения в Chrome/Safari --- */
/* Браузеры часто добавляют свой фон (белый/синий) к полям с автозаполнением.
   Этот блок переопределяет эти стили, чтобы сохранить ваш дизайн. */
.kontakt-formular input:-webkit-autofill,
.kontakt-formular input:-webkit-autofill:hover,
.kontakt-formular input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f0f0f0 !important; /* Сохраняем цвет текста */
  /* Современный трюк для отмены фона автозаполнения.
     Мы задаем очень долгий переход для background-color, чтобы браузер
     не успел применить свой стиль. Это позволяет нашему `backdrop-filter` работать. */
  transition: background-color 5000s ease-in-out 0s;
}

.kontakt-formular button {
  background-color: #6d3b36; /* Легкий фон, чтобы отделить от Vanta */
  color: #fff; /* Базовый цвет текста для этого блока */
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #68402280 !important;
  opacity: 0.85;
  transition: background-color 0.3s, opacity 0.3s, top 0.1s linear;
}

.kontakt-formular button:hover {
  background-color: rgba(0, 0, 0, 0.37);
  opacity: 1;
}

/* Alert */
.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #68402280 !important;
  color: white;
  padding: 2rem 2rem 3.5rem 2rem;
  border-radius: 8px;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.8);
  z-index: 999;
  box-sizing: border-box;
}

.alert.success {
  background-color: #28a746da;
}

.alert.error {
  background-color: #dc3545;
}

.alert.hidden {
  display: none;
}

.alert .close-btn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 1px solid white;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.alert .close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* =================================
   Стили для стартовой страницы
   ================================= */

   .start-gallery-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 0;
}

.start-gallery-preview {
  position: relative;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  background-color: #fff;
  /* Добавляем общую тень для всего контейнера, чтобы он выделялся на странице */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.start-preview-images {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  /* Убираем центрирование, flexbox сам расставит элементы от левого края */
}

.start-preview-images img {
  flex-shrink: 0; /* Запрещаем flex-контейнеру сжимать изображения */
  /* --- Магия для заполнения контейнера --- */
  /* Ширина каждого изображения. Рассчитано для 6 картинок с 50% перекрытием. */
  width: 28.57%;
  height: 100%;
  object-fit: cover;
  /* Отрицательный отступ, равный половине ширины, для 50% перекрытия. */
  margin-left: -14.28%;
  box-shadow: 0 0 30px rgb(0, 0, 0);
  border-radius: 8px;
  transition: transform 0.3s;
}

.start-preview-images img:first-child {
  margin-left: 0;
}

.start-gallery-preview:hover {
  /* При наведении приподнимаем весь блок и усиливаем тень для интерактивности */
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.start-gallery-preview:hover img {
  transform: scale(1.05);
}

.start-gallery-title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  /* --- Здесь можно менять стили заголовка --- */
  /*font-family: 'Georgia', serif; /* Пример: меняем шрифт на более декоративный */
  font-weight: bold; /* Делаем текст жирным */
  color: #ffffff;
  	background-color: #93b458;
	padding-left: 0.5em;
	padding-right: 0.5em;
  white-space: nowrap; /* Запрещаем перенос текста на новую строку */
  pointer-events: none;
  transition: color 0.3s, text-shadow 0.3s; /* Плавный переход для эффекта наведения */
}

/* Меняем стиль заголовка, когда курсор находится на родительском контейнере */
.start-gallery-preview:hover .start-gallery-title {
    color: #ffffff;

    }

/* =================================
   Адаптивность для стартовой страницы
   ================================= */

@media (max-width: 768px) {
  .start-gallery-title {
    white-space: normal; /* Возвращаем перенос текста на узких экранах */
    font-size: 1.8rem;   /* Уменьшаем шрифт, чтобы он лучше помещался */
    width: 90%;          /* Ограничиваем ширину, чтобы текст не прилипал к краям */
    text-align: center;  /* Гарантируем центрирование для многострочного текста */
  }
}