/* Глобальные CSS-переменные для цветовой схемы и эффектов */
:root {
  --primary: #e74c3c; /* Основной цвет (красный) */
  --secondary: #40E0D0; /* Вторичный цвет (бирюзовый) */
  --accent: #FBCEB1; /* Акцентный цвет (абрикосовый) */
  --light: #FFF9F5; /* Светлый фон (светло-абрикосовый) */
  --dark: #343a40; /* Темный текст */
  --shadow: 0 4px 12px rgba(0,0,0,0.1); /* Тень по умолчанию */
  --transition: all 0.3s ease; /* Анимация перехода по умолчанию */
}

/* Стили для иконок в кнопках */
button i {
  margin-right: 0.5em; /* Отступ справа для иконки в кнопках */
}

/* Глобальный сброс стилей */
* {
  box-sizing: border-box; /* Размеры включают padding и border */
  margin: 0; /* Сброс margin */
  padding: 0; /* Сброс padding */
}

/* Стиль плавающей кнопки бронирования */
.floating-booking-btn {
  position: fixed; /* Фиксированное позиционирование */
  bottom: 20px; /* Отступ снизу */
  right: 20px; /* Отступ справа */
  z-index: 999; /* Высокий z-index для поверх других элементов */
  animation: pulse 2s infinite; /* Анимация пульсации */
}

/* Анимация пульсации для кнопки */
@keyframes pulse {
  0% { transform: scale(1); } /* Начальный размер */
  50% { transform: scale(1.05); } /* Увеличение на 5% */
  100% { transform: scale(1); } /* Возврат к исходному размеру */
}



/* Стили для админ-панели бронирований */
.admin-bookings {
  margin: 40px auto; /* Внешние отступы */
  max-width: 900px; /* Максимальная ширина */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Шрифт */
  color: #222; /* Цвет текста */
}

/* Заголовок админ-панели */
.admin-bookings h2 {
  text-align: center; /* Выравнивание по центру */
  font-size: 2rem; /* Размер шрифта */
  font-weight: 700; /* Жирный шрифт */
  margin-bottom: 25px; /* Отступ снизу */
  color: #ffae42; /* Абрикосовый цвет */
}

/* Таблица бронирований */
.booking-table {
  width: 100%; /* Ширина 100% */
  border-collapse: separate; /* Раздельные границы */
  border-spacing: 0 10px; /* Расстояние между строками */
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.1); /* Тень */
  background: #fff; /* Белый фон */
  border-radius: 8px; /* Скругленные углы */
  overflow: hidden; /* Скрытие выходящего за границы */
}

/* Ячейки таблицы */
.booking-table th,
.booking-table td {
  padding: 14px 20px; /* Внутренние отступы */
  text-align: center; /* Выравнивание по центру */
}

/* Заголовки столбцов таблицы */
.booking-table thead th {
  background-color: #ffae42; /* Абрикосовый фон */
  color: white; /* Белый текст */
  font-weight: 600; /* Полужирный шрифт */
  font-size: 1rem; /* Размер шрифта */
}

/* Строки таблицы */
.booking-table tbody tr {
  background-color: #fef6e4; /* Очень светлый абрикосовый фон */
  transition: background-color 0.3s ease; /* Плавное изменение фона */
  border-radius: 6px; /* Скругленные углы */
}

/* Эффект при наведении на строку */
.booking-table tbody tr:hover {
  background-color: #ffd98a; /* Светлый абрикосовый фон */
}

/* Границы ячеек */
.booking-table tbody tr td {
  border-bottom: 1px solid #ffd98a; /* Граница снизу */
}

/* Удаление границы у последней строки */
.booking-table tbody tr:last-child td {
  border-bottom: none; /* Нет границы */
}

/* Текст в админ-панели */
.admin-bookings p {
  text-align: center; /* Выравнивание по центру */
  font-style: italic; /* Курсив */
  color: #666; /* Серый цвет */
  font-size: 1.1rem; /* Размер шрифта */
}

/* Основные стили body */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Шрифт */
  background-color: #f5f7fa; /* Цвет фона */
  color: var(--primary); /* Цвет текста из переменной */
  line-height: 1.6; /* Межстрочный интервал */
}

/* Основной контейнер */
.container {
  max-width: 1200px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
  padding: 0 15px; /* Внутренние отступы */
}

/* Шапка сайта */
.main-header {
  position: relative; /* Относительное позиционирование */
  background-image: ("{% static 'images/green.png' %}"); /* Фоновое изображение */
  background-size: cover; /* Масштабирование фона */
  background-position: center center; /* Позиция фона */
  background-repeat: no-repeat; /* Без повторения */
  min-height: 10px; /* Минимальная высота */
  color: white; /* Белый текст */
  z-index: 0; /* z-index */
}

/* Элементы внутри шапки */
.main-header > * {
  position: relative; /* Относительное позиционирование */
  z-index: 1; /* z-index выше фона */
}

/* Верхняя часть шапки */
.header-top {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  align-items: center; /* Выравнивание по центру */
  flex-wrap: wrap; /* Перенос на новую строку */
  gap: 15px; /* Расстояние между элементами */
  margin-bottom: 10px; /* Отступ снизу */
}

/* Логотип */
.logo {
  max-height: 300px; /* Максимальная высота */
}

/* Навигационные ссылки */
.nav-links {
  display: flex; /* Flex-контейнер */
  gap: 15px; /* Расстояние между элементами */
  font-size: 0.9rem; /* Размер шрифта */
}

/* Стили для ссылок в навигации */
.nav-links a {
  color: #000; /* Черный цвет */
  text-decoration: none !important; /* Без подчеркивания */
  font-weight: 600; /* Полужирный шрифт */
  position: relative; /* Относительное позиционирование */
}

/* Эффект подчеркивания при наведении */
.nav-links a::after {
  content: ""; /* Псевдоэлемент */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; /* Слева */
  bottom: -2px; /* Снизу */
  width: 100%; /* Ширина 100% */
  height: 2px; /* Высота */
  background-color: #F8A07A; /* Цвет */
  transform: scaleX(0); /* Начальное состояние - невидим */
  transform-origin: left; /* Точка трансформации */
  transition: transform 0.2s ease; /* Анимация */
}

/* Показываем подчеркивание при наведении */
.nav-links a:hover::after {
  transform: scaleX(1); /* Полная ширина */
}

/* Контактная информация */
.contact-info {
  display: flex; /* Flex-контейнер */
  flex-wrap: wrap; /* Перенос на новую строку */
  gap: 10px; /* Расстояние между элементами */
  font-size: 0.85rem; /* Размер шрифта */
}

/* Стили для контактных ссылок */
.contact-info a {
  color: white; /* Белый цвет */
  text-decoration: none !important; /* Без подчеркивания */
  display: inline-flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  position: relative; /* Относительное позиционирование */
  transition: color 0.2s ease; /* Анимация цвета */
}

/* Иконки в контактах */
.contact-info a i {
  margin-right: 4px; /* Отступ справа */
  font-size: 1.9rem; /* Размер иконки */
}

/* Эффект подчеркивания для контактов */
.contact-info a::after {
  content: ""; /* Псевдоэлемент */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; /* Слева */
  bottom: -2px; /* Снизу */
  width: 100%; /* Ширина 100% */
  height: 1.5px; /* Высота */
  background-color: #F8A07A; /* Цвет */
  transform: scaleX(0); /* Начальное состояние - невидим */
  transform-origin: left; /* Точка трансформации */
  transition: transform 0.2s ease; /* Анимация */
}

/* Изменение цвета при наведении */
.contact-info a:hover {
  color: #F87F4E; /* Новый цвет */
}

/* Показываем подчеркивание при наведении */
.contact-info a:hover::after {
  transform: scaleX(1); /* Полная ширина */
}

/* Стили для кнопки просмотра туров */
#view-tours-btn {
  font-size: 1.25rem; /* Размер шрифта */
  padding: 0.75rem 1.5rem; /* Внутренние отступы */
  width: auto; /* Автоматическая ширина */
  min-width: 200px; /* Минимальная ширина */
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
  .header-top {
    gap: 8px; /* Меньшее расстояние */
    text-align: center; /* Выравнивание по центру */
  }

  .nav-links,
  .contact-info {
    justify-content: center; /* Выравнивание по центру */
    flex-wrap: wrap; /* Перенос на новую строку */
  }
}

/* Основной заголовок */
header {
  background: linear-gradient(135deg, var(--accent) 0%, #F8A07A 100%), url('https://www.firetouralanya.com/wp-content/uploads/2023/04/header-bg.jpg'); /* Градиент и фоновое изображение */
  background-size: cover; /* Масштабирование фона */
  background-position: center; /* Позиция фона */
  color: #333; /* Цвет текста */
  padding: 80px 0 120px; /* Внутренние отступы */
  text-align: center; /* Выравнивание по центру */
  position: relative; /* Относительное позиционирование */
}

/* Контент в шапке */
.header-content {
  max-width: 800px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
}

/* Логотип в шапке */
.logo {
  max-width: 200px; /* Максимальная ширина */
  margin-bottom: 20px; /* Отступ снизу */
}

/* Заголовок h1 */
h1 {
  font-size: 2.5rem; /* Размер шрифта */
  margin-bottom: 15px; /* Отступ снизу */
  font-weight: 700; /* Жирный шрифт */
}

/* Подзаголовок */
.header-subtitle {
  font-size: 1.2rem; /* Размер шрифта */
  margin-bottom: 30px; /* Отступ снизу */
}

/* Базовые стили кнопок */
.btn {
  padding: 12px 30px; /* Внутренние отступы */
  border-radius: 8px; /* Скругленные углы */
  border: none; /* Без границы */
  font-weight: 600; /* Полужирный шрифт */
  cursor: pointer; /* Курсор-указатель */
  transition: var(--transition); /* Анимация */
  display: inline-flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  justify-content: center; /* Выравнивание по центру */
  font-size: 1rem; /* Размер шрифта */
}

/* Основная кнопка */
.btn-primary {
  background-color: var(--primary); /* Цвет фона */
  color: white; /* Белый текст */
}

/* Эффект при наведении на основную кнопку */
.btn-primary:hover {
  background-color: #38C9B8; /* Новый цвет фона */
  transform: translateY(-2px); /* Сдвиг вверх */
}

/* Секция "О компании" */
.about-section {
  padding: 60px 0; /* Внутренние отступы */
  background-color: white; /* Белый фон */
  background: linear-gradient(to bottom, white 0%, var(--light) 100%); /* Градиент */
}

/* Заголовок секции */
.section-title {
  text-align: center; /* Выравнивание по центру */
  font-size: 2rem; /* Размер шрифта */
  margin-bottom: 40px; /* Отступ снизу */
  color: var(--primary); /* Цвет текста */
  position: relative; /* Относительное позиционирование */
}

/* Декоративная линия под заголовком */
.section-title:after {
  content: ''; /* Псевдоэлемент */
  display: block; /* Блочный элемент */
  width: 80px; /* Ширина */
  height: 4px; /* Высота */
  background: var(--primary); /* Цвет */
  margin: 15px auto 0; /* Внешние отступы */
}

/* Контейнер контента "О компании" */
.about-content {
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  gap: 40px; /* Расстояние между элементами */
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column; /* Колонки вместо строк */
  }
}

/* Изображение в секции "О компании" */
.about-image {
  flex: 1; /* Гибкий размер */
  border-radius: 12px; /* Скругленные углы */
  overflow: hidden; /* Скрытие выходящего за границы */
  box-shadow: var(--shadow); /* Тень */
}

/* Изображение внутри контейнера */
.about-image img {
  width: 100%; /* Ширина 100% */
  height: auto; /* Автоматическая высота */
  display: block; /* Блочный элемент */
}

/* Текст в секции "О компании" */
.about-text {
  flex: 1; /* Гибкий размер */
  padding: 1.5rem 2rem; /* Внутренние отступы */
  background-color: rgba(255, 255, 255, 0.85); /* Полупрозрачный фон */
  border-radius: 12px; /* Скругленные углы */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); /* Тень */
  line-height: 1.65; /* Межстрочный интервал */
  color: #2c2c2c; /* Цвет текста */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Шрифт */
  font-weight: 500; /* Полужирный шрифт */
  text-align: justify; /* Выравнивание по ширине */
  user-select: text; /* Возможность выделения текста */
  transition: background-color 0.3s ease; /* Анимация фона */
  max-width: 720px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
}

/* Эффект при наведении на текст */
.about-text:hover {
  background-color: rgba(255, 255, 255, 1); /* Непрозрачный фон */
}

/* Абзацы в тексте */
.about-text p {
  margin-bottom: 1.25rem; /* Отступ снизу */
  font-size: 1.15rem; /* Размер шрифта */
  color: white; /* Белый текст */
  font-weight: 400; /* Обычный шрифт */
}

/* Секция преимуществ */
.features-section {
  padding: 60px 0; /* Внутренние отступы */
  background-color: #f9f9f9; /* Цвет фона */
}

/* Сетка преимуществ */
.features-grid {
  display: grid; /* Grid-контейнер */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Автоматические колонки */
  gap: 30px; /* Расстояние между элементами */
  margin-top: 40px; /* Отступ сверху */
}

/* Карточка преимущества */
.feature-card {
  background: white; /* Белый фон */
  padding: 30px; /* Внутренние отступы */
  border-top: 3px solid var(--secondary); /* Граница сверху */
  border-radius: 12px; /* Скругленные углы */
  text-align: center; /* Выравнивание по центру */
  box-shadow: var(--shadow); /* Тень */
  transition: var(--transition); /* Анимация */
}

/* Эффект при наведении на карточку */
.feature-card:hover {
  transform: translateY(-10px); /* Сдвиг вверх */
  box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Тень */
}

/* Иконка в карточке */
.feature-icon {
  font-size: 2.5rem; /* Размер иконки */
  color: var(--primary); /* Цвет */
  margin-bottom: 20px; /* Отступ снизу */
}

/* Заголовок карточки */
.feature-title {
  font-size: 1.3rem; /* Размер шрифта */
  margin-bottom: 15px; /* Отступ снизу */
  color: var(--primary); /* Цвет текста */
}

/* Обертка слайдера туров */
.tours-scroll-wrapper {
  position: relative; /* Относительное позиционирование */
  margin: 40px 0; /* Внешние отступы */
}

/* Кнопки прокрутки */
.scroll-btn {
  position: absolute; /* Абсолютное позиционирование */
  top: 50%; /* Позиция сверху */
  transform: translateY(-50%); /* Сдвиг по вертикали */
  z-index: 5; /* z-index */
  width: 40px; /* Ширина */
  height: 40px; /* Высота */
  border: none; /* Без границы */
  background: rgba(0, 0, 0, 0.3); /* Полупрозрачный фон */
  color: white; /* Белый цвет */
  border-radius: 50%; /* Круглая форма */
  cursor: pointer; /* Курсор-указатель */
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  justify-content: center; /* Выравнивание по центру */
  transition: background 0.3s ease; /* Анимация фона */
}

/* Эффект при наведении на кнопку */
.scroll-btn:hover {
  background: rgba(0, 0, 0, 0.6); /* Более темный фон */
}

/* Кнопка "влево" */
.scroll-btn.left {
  left: 5px; /* Позиция слева */
}

/* Кнопка "вправо" */
.scroll-btn.right {
  right: 5px; /* Позиция справа */
}

/* Обертка контейнера туров */
.tours-container-wrapper {
  position: relative; /* Относительное позиционирование */
  width: 100%; /* Ширина 100% */
}

/* Контейнер туров */
.tours-container {
  display: flex; /* Flex-контейнер */
  overflow-x: auto; /* Горизонтальная прокрутка */
  padding: 20px 0; /* Внутренние отступы */
  scroll-snap-type: x mandatory; /* Привязка прокрутки */
  gap: 25px; /* Расстояние между элементами */
  scrollbar-width: none; /* Скрытие скроллбара (Firefox) */
  -ms-overflow-style: none; /* Скрытие скроллбара (IE) */
  width: 100%; /* Ширина 100% */
}

/* Скрытие скроллбара в WebKit */
.tours-container::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар */
}

/* Карточка тура */
.tour-card {
  flex: 0 0 calc(25% - 20px); /* Фиксированная ширина */
  min-width: 280px; /* Минимальная ширина */
  scroll-snap-align: start; /* Привязка к началу */
  background: white; /* Белый фон */
  border: 1px solid rgba(251, 206, 177, 0.3); /* Граница */
  border-radius: 16px; /* Скругленные углы */
  overflow: hidden; /* Скрытие выходящего за границы */
  box-shadow: var(--shadow); /* Тень */
  transition: var(--transition); /* Анимация */
  position: relative; /* Относительное позиционирование */
  cursor: pointer; /* Курсор-указатель */
}

/* Адаптив для разных экранов */
@media (max-width: 1200px) {
  .tour-card {
    flex: 0 0 calc(33.333% - 20px); /* 3 колонки */
  }
}

@media (max-width: 900px) {
  .tour-card {
    flex: 0 0 calc(50% - 20px); /* 2 колонки */
  }
}

@media (max-width: 600px) {
  .tour-card {
    flex: 0 0 100%; /* 1 колонка */
  }
}

/* Эффект при наведении на карточку */
.tour-card:hover {
  transform: translateY(-8px); /* Сдвиг вверх */
  box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* Тень */
}

/* Изображение в карточке тура */
.tour-image {
  height: 200px; /* Фиксированная высота */
  width: 100%; /* Ширина 100% */
  object-fit: cover; /* Масштабирование с сохранением пропорций */
  transition: transform 0.5s ease; /* Анимация трансформации */
}

/* Эффект увеличения изображения при наведении */
.tour-card:hover .tour-image {
  transform: scale(1.05); /* Увеличение на 5% */
}

/* Бейдж на карточке тура */
.tour-badge {
  position: absolute; /* Абсолютное позиционирование */
  top: 15px; /* Отступ сверху */
  right: 15px; /* Отступ справа */
  background: rgba(255,255,255,0.9); /* Полупрозрачный фон */
  padding: 5px 12px; /* Внутренние отступы */
  border-radius: 20px; /* Скругленные углы */
  font-weight: bold; /* Жирный шрифт */
  color: var(--primary); /* Цвет текста */
  font-size: 0.9rem; /* Размер шрифта */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Тень */
}

/* Информация в карточке тура */
.tour-info {
  padding: 20px; /* Внутренние отступы */
}

/* Заголовок тура */
.tour-title {
  font-size: 1.3rem; /* Размер шрифта */
  margin-bottom: 10px; /* Отступ снизу */
  color: var(--primary); /* Цвет текста */
  font-weight: 600; /* Полужирный шрифт */
  display: -webkit-box; /* Для ограничения строк */
  -webkit-line-clamp: 2; /* Максимум 2 строки */
  -webkit-box-orient: vertical; /* Вертикальная ориентация */
  overflow: hidden; /* Скрытие лишнего */
}

/* Мета-информация тура */
.tour-meta {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  color: #6c757d; /* Цвет текста */
  font-size: 0.9rem; /* Размер шрифта */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Элементы мета-информации */
.tour-meta span {
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
}

/* Иконки в мета-информации */
.tour-meta i {
  margin-right: 5px; /* Отступ справа */
  font-size: 1rem; /* Размер иконки */
}

/* Описание тура */
.tour-description {
  color: #6c757d; /* Цвет текста */
  font-size: 0.95rem; /* Размер шрифта */
  margin-bottom: 20px; /* Отступ снизу */
  display: -webkit-box; /* Для ограничения строк */
  -webkit-line-clamp: 3; /* Максимум 3 строки */
  -webkit-box-orient: vertical; /* Вертикальная ориентация */
  overflow: hidden; /* Скрытие лишнего */
}

/* Действия в карточке тура */
.tour-actions {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  align-items: center; /* Выравнивание по центру */
}

/* Контурная кнопка */
.btn-outline {
  background: transparent; /* Прозрачный фон */
  border: 1px solid var(--primary); /* Граница */
  color: var(--primary); /* Цвет текста */
}

/* Эффект при наведении на контурную кнопку */
.btn-outline:hover {
  background-color: rgba(231, 76, 60, 0.1); /* Полупрозрачный фон */
}

/* Секция отзывов */
.testimonials-section {
  padding: 60px 0; /* Внутренние отступы */
  background-color: #f9f9f9; /* Цвет фона */
}

/* Контейнер отзывов */
.testimonials-container {
  display: flex; /* Flex-контейнер */
  overflow-x: auto; /* Горизонтальная прокрутка */
  gap: 30px; /* Расстояние между элементами */
  padding: 20px 0; /* Внутренние отступы */
  scroll-snap-type: x mandatory; /* Привязка прокрутки */
}

/* Карточка отзыва */
.testimonial-card {
  flex: 0 0 350px; /* Фиксированная ширина */
  background: white; /* Белый фон */
  padding: 30px; /* Внутренние отступы */
  border-radius: 12px; /* Скругленные углы */
  box-shadow: var(--shadow); /* Тень */
  scroll-snap-align: start; /* Привязка к началу */
}

/* Текст отзыва */
.testimonial-text {
  font-style: italic; /* Курсив */
  margin-bottom: 20px; /* Отступ снизу */
  position: relative; /* Относительное позиционирование */
}

/* Декоративные кавычки */
.testimonial-text:before {
  content: '"'; /* Кавычка */
  font-size: 3rem; /* Размер */
  color: rgba(231, 76, 60, 0.2); /* Цвет */
  position: absolute; /* Абсолютное позиционирование */
  top: -15px; /* Позиция сверху */
  left: -10px; /* Позиция слева */
}

/* Автор отзыва */
.testimonial-author {
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
}

/* Аватар автора */
.author-avatar {
  width: 50px; /* Ширина */
  height: 50px; /* Высота */
  border-radius: 50%; /* Круглая форма */
  object-fit: cover; /* Масштабирование с сохранением пропорций */
  margin-right: 15px; /* Отступ справа */
}

/* Имя автора */
.author-name {
  font-weight: bold; /* Жирный шрифт */
  margin-bottom: 5px; /* Отступ снизу */
}

/* Местоположение автора */
.author-location {
  color: #6c757d; /* Цвет текста */
  font-size: 0.9rem; /* Размер шрифта */
}

/* Секция контактов */
.contact-section {
  padding: 60px 0; /* Внутренние отступы */
  background-color: white; /* Белый фон */
}

/* Контейнер контактов */
.contact-container {
  display: grid; /* Grid-контейнер */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Автоматические колонки */
  gap: 40px; /* Расстояние между элементами */
}

/* Контактная информация */
.contact-info {
  display: flex; /* Flex-контейнер */
  flex-direction: column; /* Колонки */
  display: flex; /* Flex-контейнер */
  flex-wrap: nowrap; /* Без переноса */
  gap: 10px; /* Расстояние между элементами */
  font-size: 0.85rem; /* Размер шрифта */
}

/* Элемент контакта */
.contact-item {
  display: flex; /* Flex-контейнер */
  align-items: flex-start; /* Выравнивание по верху */
  gap: 15px; /* Расстояние между элементами */
}

/* Иконка контакта */
.contact-icon {
  font-size: 1.5rem; /* Размер иконки */
  color: var(--primary); /* Цвет */
  margin-top: 3px; /* Отступ сверху */
}

/* Заголовок контакта */
.contact-title {
  font-weight: bold; /* Жирный шрифт */
  margin-bottom: 5px; /* Отступ снизу */
}

/* Текст контакта */
.contact-text {
  color: #6c757d; /* Цвет текста */
}

/* Форма обратной связи */
.contact-form {
  background: #f9f9f9; /* Цвет фона */
  padding: 30px; /* Внутренние отступы */
  border-radius: 12px; /* Скругленные углы */
  box-shadow: var(--shadow); /* Тень */
}

/* Группа формы */
.form-group {
  margin-bottom: 20px; /* Отступ снизу */
}

/* Метка формы */
.form-label {
  display: block; /* Блочный элемент */
  margin-bottom: 8px; /* Отступ снизу */
  font-weight: 500; /* Полужирный шрифт */
}

/* Поле ввода */
.form-control {
  width: 100%; /* Ширина 100% */
  padding: 12px 15px; /* Внутренние отступы */
  border: 1px solid #ddd; /* Граница */
  border-radius: 8px; /* Скругленные углы */
  font-family: inherit; /* Наследование шрифта */
  font-size: 1rem; /* Размер шрифта */
  transition: border 0.3s ease; /* Анимация границы */
}

/* Фокус на поле ввода */
.form-control:focus {
  outline: none; /* Без контура */
  border-color: var(--primary); /* Цвет границы */
}

/* Текстовое поле */
textarea.form-control {
  min-height: 120px; /* Минимальная высота */
  resize: vertical; /* Изменение размера только по вертикали */
}

/* Подвал сайта */
footer {
  background-color: var(--dark); /* Цвет фона */
  background: linear-gradient(135deg, #333 0%, #000 100%); /* Градиент */
  color: white; /* Белый текст */
  padding: 40px 0 20px; /* Внутренние отступы */
  text-align: center; /* Выравнивание по центру */
}

/* Логотип в подвале */
.footer-logo {
  max-width: 200px; /* Максимальная ширина */
  margin-bottom: 20px; /* Отступ снизу */
}

/* Ссылки в подвале */
.footer-links {
  display: flex; /* Flex-контейнер */
  justify-content: center; /* Выравнивание по центру */
  flex-wrap: wrap; /* Перенос на новую строку */
  gap: 20px; /* Расстояние между элементами */
  margin-bottom: 30px; /* Отступ снизу */
}

/* Стиль ссылки в подвале */
.footer-link {
  color: white; /* Белый цвет */
  text-decoration: none; /* Без подчеркивания */
  transition: color 0.3s ease; /* Анимация цвета */
}

/* Эффект при наведении на ссылку */
.footer-link:hover {
  color: var(--secondary); /* Новый цвет */
}

/* Социальные ссылки */
.social-links {
  display: flex; /* Flex-контейнер */
  justify-content: center; /* Выравнивание по центру */
  gap: 15px; /* Расстояние между элементами */
  margin-bottom: 30px; /* Отступ снизу */
}

/* Стиль социальной ссылки */
.social-link {
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  justify-content: center; /* Выравнивание по центру */
  width: 40px; /* Ширина */
  height: 40px; /* Высота */
  background: rgba(255,255,255,0.1); /* Полупрозрачный фон */
  border-radius: 50%; /* Круглая форма */
  color: white; /* Белый цвет */
  font-size: 1.2rem; /* Размер иконки */
  transition: background 0.3s ease; /* Анимация фона */
}

/* Эффект при наведении на социальную ссылку */
.social-link:hover {
  background: var(--primary); /* Новый цвет фона */
}

/* Копирайт */
.copyright {
  color: rgba(255,255,255,0.7); /* Полупрозрачный текст */
  font-size: 0.9rem; /* Размер шрифта */
}

/* Модальное окно */
.modal {
  position: fixed; /* Фиксированное позиционирование */
  top: 0; /* Позиция сверху */
  left: 0; /* Позиция слева */
  width: 100%; /* Ширина 100% */
  height: 100%; /* Высота 100% */
  background-color: rgba(0,0,0,0.8); /* Полупрозрачный фон */
  z-index: 1000; /* Высокий z-index */
  display: none; /* Скрыто по умолчанию */
  opacity: 0; /* Прозрачность 0 */
  transition: opacity 0.3s ease; /* Анимация прозрачности */
  overflow-y: auto; /* Вертикальная прокрутка */
}

/* Активное модальное окно */
.modal.active {
  display: block; /* Показываем */
  opacity: 1; /* Полная видимость */
}

/* Контент модального окна */
.modal-content {
  background: white; /* Белый фон */
  max-width: 900px; /* Максимальная ширина */
  margin: 50px auto; /* Центрирование */
  border-radius: 16px; /* Скругленные углы */
  overflow: hidden; /* Скрытие выходящего за границы */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Тень */
  position: relative; /* Относительное позиционирование */
  transform: translateY(20px); /* Начальное положение */
  transition: transform 0.3s ease; /* Анимация трансформации */
}

/* Анимация появления модального окна */
.modal.active .modal-content {
  transform: translateY(0); /* Конечное положение */
}

/* Кнопка закрытия модального окна */
.close-modal {
  position: absolute; /* Абсолютное позиционирование */
  top: 20px; /* Отступ сверху */
  right: 20px; /* Отступ справа */
  font-size: 28px; /* Размер иконки */
  color: white; /* Белый цвет */
  cursor: pointer; /* Курсор-указатель */
  z-index: 10; /* z-index */
  background: rgba(0,0,0,0.5); /* Полупрозрачный фон */
  width: 40px; /* Ширина */
  height: 40px; /* Высота */
  border-radius: 50%; /* Круглая форма */
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  justify-content: center; /* Выравнивание по центру */
  transition: var(--transition); /* Анимация */
}

/* Эффект при наведении на кнопку закрытия */
.close-modal:hover {
  background: rgba(0,0,0,0.7); /* Более темный фон */
}

/* Слайдер в модальном окне */
.tour-slider {
  position: relative; /* Относительное позиционирование */
  height: 400px; /* Фиксированная высота */
  overflow: hidden; /* Скрытие выходящего за границы */
}

/* Контейнер изображений слайдера */
.slider-images {
  display: flex; /* Flex-контейнер */
  transition: transform 0.5s ease; /* Анимация трансформации */
  height: 100%; /* Высота 100% */
}

/* Изображение в слайдере */
.slider-image {
  min-width: 100%; /* Минимальная ширина */
  height: 100%; /* Высота 100% */
  object-fit: cover; /* Масштабирование с сохранением пропорций */
}

/* Навигация слайдера */
.slider-nav {
  position: absolute; /* Абсолютное позиционирование */
  bottom: 20px; /* Отступ снизу */
  left: 50%; /* Позиция слева */
  transform: translateX(-50%); /* Сдвиг по горизонтали */
  display: flex; /* Flex-контейнер */
  gap: 10px; /* Расстояние между элементами */
  z-index: 2; /* z-index */
}

/* Точка навигации */
.slider-dot {
  width: 12px; /* Ширина */
  height: 12px; /* Высота */
  border-radius: 50%; /* Круглая форма */
  background: rgba(255,255,255,0.5); /* Полупрозрачный фон */
  cursor: pointer; /* Курсор-указатель */
  transition: var(--transition); /* Анимация */
}

/* Активная точка */
.slider-dot.active {
  background: white; /* Белый фон */
  transform: scale(1.2); /* Увеличение */
}

/* Стрелки слайдера */
.slider-arrow {
  position: absolute; /* Абсолютное позиционирование */
  top: 50%; /* Позиция сверху */
  transform: translateY(-50%); /* Сдвиг по вертикали */
  width: 40px; /* Ширина */
  height: 40px; /* Высота */
  background: rgba(0,0,0,0.3); /* Полупрозрачный фон */
  border-radius: 50%; /* Круглая форма */
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  justify-content: center; /* Выравнивание по центру */
  color: white; /* Белый цвет */
  cursor: pointer; /* Курсор-указатель */
  z-index: 2; /* z-index */
  transition: var(--transition); /* Анимация */
}

/* Эффект при наведении на стрелку */
.slider-arrow:hover {
  background: rgba(0,0,0,0.6); /* Более темный фон */
}

/* Стрелка "назад" */
.slider-prev {
  left: 20px; /* Позиция слева */
}

/* Стрелка "вперед" */
.slider-next {
  right: 20px; /* Позиция справа */
}

/* Детали тура в модальном окне */
.tour-details {
  padding: 30px; /* Внутренние отступы */
}

/* Заголовок тура */
.tour-header {
  margin-bottom: 20px; /* Отступ снизу */
}

/* Название тура */
.tour-name {
  font-size: 2rem; /* Размер шрифта */
  color: var(--dark); /* Цвет текста */
  margin-bottom: 5px; /* Отступ снизу */
}

/* Местоположение тура */
.tour-location {
  color: var(--primary); /* Цвет текста */
  font-size: 1.1rem; /* Размер шрифта */
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Особенности тура */
.tour-highlights {
  display: flex; /* Flex-контейнер */
  gap: 15px; /* Расстояние между элементами */
  margin-bottom: 25px; /* Отступ снизу */
  flex-wrap: wrap; /* Перенос на новую строку */
}

/* Элемент особенности */
.highlight {
  background: #f1f5f9; /* Цвет фона */
  padding: 10px 15px; /* Внутренние отступы */
  border-radius: 8px; /* Скругленные углы */
  display: flex; /* Flex-контейнер */
  align-items: center; /* Выравнивание по центру */
  gap: 8px; /* Расстояние между элементами */
}

/* Иконка особенности */
.highlight i {
  color: var(--primary); /* Цвет */
}

/* Заголовок секции */
.section-title {
  font-size: 1.3rem; /* Размер шрифта */
  color: var(--primary); /* Цвет текста */
  margin-bottom: 15px; /* Отступ снизу */
  padding-bottom: 8px; /* Отступ снизу */
  border-bottom: 2px solid #f1f5f9; /* Граница снизу */
}

/* Полное описание тура */
.tour-description-full {
  margin-bottom: 25px; /* Отступ снизу */
  line-height: 1.7; /* Межстрочный интервал */
}

/* Секция цен */
.pricing-section {
  background: #f8f9fa; /* Цвет фона */
  padding: 20px; /* Внутренние отступы */
  border-radius: 12px; /* Скругленные углы */
  margin-bottom: 25px; /* Отступ снизу */
}

/* Элемент цены */
.price-item {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  padding: 10px 0; /* Внутренние отступы */
  border-bottom: 1px solid #e9ecef; /* Граница снизу */
}

/* Удаление границы у последнего элемента */
.price-item:last-child {
  border-bottom: none; /* Без границы */
}

/* Метка цены */
.price-label {
  font-weight: 500; /* Полужирный шрифт */
}

/* Значение цены */
.price-value {
  font-weight: 600; /* Жирный шрифт */
  color: var(--primary); /* Цвет текста */
}

/* Секция включенных услуг */
.included-section {
  margin-bottom: 25px; /* Отступ снизу */
}

/* Список включенных услуг */
.included-list {
  list-style: none; /* Без маркеров */
}

/* Элемент списка */
.included-list li {
  margin-bottom: 10px; /* Отступ снизу */
  position: relative; /* Относительное позиционирование */
  padding-left: 25px; /* Отступ слева */
}

/* Декоративная галочка */
.included-list li:before {
  content: "✓"; /* Галочка */
  color: #28a745; /* Цвет */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; /* Позиция слева */
  font-weight: bold; /* Жирный шрифт */
}

/* Секция сеансов */
.sessions-section {
  margin-bottom: 25px; /* Отступ снизу */
}

/* Элемент сеанса */
.session-item {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  padding: 10px 0; /* Внутренние отступы */
  border-bottom: 1px solid #e9ecef; /* Граница снизу */
}

/* Удаление границы у последнего элемента */
.session-item:last-child {
  border-bottom: none; /* Без границы */
}

/* Время сеанса */
.session-time {
  font-weight: 500; /* Полужирный шрифт */
}

/* Секция призыва к действию */
.cta-section {
  display: flex; /* Flex-контейнер */
  justify-content: space-between; /* Распределение по ширине */
  align-items: center; /* Выравнивание по центру */
  margin-top: 30px; /* Отступ сверху */
  padding-top: 20px; /* Отступ сверху */
  border-top: 1px solid #e9ecef; /* Граница сверху */
}

/* Цена тура */
.tour-price {
  font-size: 1.5rem; /* Размер шрифта */
  color: var(--primary); /* Цвет текста */
  font-weight: 700; /* Жирный шрифт */
}

/* Секция карты */
.map-section {
  margin-bottom: 25px; /* Отступ снизу */
}

/* Обертка карты */
.wpb_map_wraper {
  position: relative; /* Относительное позиционирование */
  margin-top: 15px; /* Отступ сверху */
  border-radius: 12px; /* Скругленные углы */
  overflow: hidden; /* Скрытие выходящего за границы */
  box-shadow: var(--shadow); /* Тень */
}

/* Переключатель языка */
.language-switcher img {
  max-height: 36px; /* Максимальная высота */
  max-width: 48px; /* Максимальная ширина */
  width: auto; /* Автоматическая ширина */
  height: auto; /* Автоматическая высота */
  margin: 0 5px; /* Внешние отступы */
  vertical-align: middle; /* Выравнивание по центру */
  cursor: pointer; /* Курсор-указатель */
  display: inline-block; /* Строчно-блочный элемент */
  object-fit: contain; /* Масштабирование с сохранением пропорций */
}

/* Форма переключателя языка */
.language-switcher form {
  display: inline-block; /* Строчно-блочный элемент */
  margin: 0; /* Сброс отступов */
}

/* Карта */
.wpb_map_wraper iframe {
  width: 100%; /* Ширина 100% */
  height: 400px; /* Высота */
  border: none; /* Без границы */
  display: block; /* Блочный элемент */
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
  .wpb_map_wraper iframe {
    height: 300px; /* Меньшая высота */
  }
  .scroll-btn {
    display: none; /* Скрытие кнопок прокрутки */
  }
  .tour-slider {
    height: 250px; /* Меньшая высота */
  }
}

/* Пустая секция (скрыта) */
.empty-section {
  display: none !important; /* Скрытие */
}