.video-container {
  position: relative;
  width: 100%; /* На всю ширину блока */
  height: 97%; /* Высота экрана */
  overflow: hidden;
  z-index: 1;
  background-color: #000; /* Фон для загрузки */
}

.video-background {
  position: absolute;
  top: 50%; /* Центрирование по вертикали */
  left: 50%; /* Центрирование по горизонтали */
  width: 100%;
  height: auto; /* Сохраняет пропорции */
  transform: translate(-50%, -50%) scaleY(1.1);
  z-index: -1; /* Уход на задний план */
  object-fit: cover; /* Заполняет контейнер */
  object-position: center;
  opacity: 1; /* Убедитесь, что видео полностью отображается */
  transition: opacity 0.5s ease; /* Плавный переход */
}

.text-overlay {
  position: absolute;
  top: 50%; /* Центрирование текста */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  font-family: 'Overpass', sans-serif; /* Шрифт Overpass */
}

.text-background {
  background-color: rgba(255, 255, 255, 0.7); /* Полупрозрачный фон */
  padding: 20px;
  border-radius: 10px; /* Скруглённые углы */
}

.text-background h1 {
  font-size: 2rem; /* Размер текста */
  margin-bottom: 1rem;
  color: black; /* Основной текст чёрный */
}

.small-text {
  font-size: 1.2rem; /* Размер текста меньше, чем основной */
  color: #000; /* Черный цвет текста */
  font-family: 'Overpass', sans-serif; /* Убедитесь, что шрифт совпадает с общим стилем */
}

.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: red; /* Фон кнопки */
  color: white !important; /* Белый текст */
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  font-family: 'Overpass', sans-serif; /* Шрифт Overpass */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
  background-color: darkred; /* Темно-красный фон при наведении */
  color: white !important; /* Чёрный текст при наведении */
}

/* Триггер меню */
.menu-trigger {
  cursor: pointer;
  font-family: 'Overpass', sans-serif;
  color: #fff;
  padding: 10px 20px;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.menu-trigger:hover {
  background-color: #0056b3;
}

/* Основное меню */
.custom-menu {
  position: fixed;
  height: 500px;
  top: 150px; /* Настройте позицию под ваш блок */
  left: 0;
  width: 50%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 0; /* Растягиваем меню */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: none; /* Меню скрыто по умолчанию */
  z-index: 10000;
}

.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-level-1 > .menu-item {
  margin-bottom: 10px;
  cursor: pointer;
}

/* Внешний стиль пункта меню */
.menu-item {
  position: relative; /* Родительский элемент для позиционирования подменю */
  padding: 10px;
  display: flex;
  align-items: center;
}

.menu-item a {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Контейнер для иконки и текста */
.menu-item-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* Стили текста */
.menu-text {
  display: block; /* Переводим текст в блочный формат */
  word-wrap: break-word; /* Перенос длинных слов на новую строку */
  max-width: 5px; /* Ограничиваем ширину текста */
  line-height: 1.5; /* Увеличиваем межстрочный интервал для читаемости */
  font-size: 25px; /* Настраиваем размер шрифта */
}

.menu-item span {
  font-weight: bold;
  font-family: 'Overpass', sans-serif;
  display: block;
  margin-bottom: 5px;
}

/* Красная точка для субменю */
.submenu li {
  position: relative;
  padding-left: 20px;
}

.submenu-dot {
  position: absolute;
  top: 50%;
  left: 0;
  margin-right: 20px;
  width: 6px;
  height: 6px;
  background-color: #e60012;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Пункт меню `submenu-main` */
.submenu-main {
  font-weight: bold; /* Жирный шрифт */
  font-size: 1.5rem; /* Увеличенный размер шрифта */
  padding-left: 0; /* Убираем отступ для красной точки */
  margin-left: 0; /* Убираем отступ для выравнивания */
  list-style: none; /* Убираем маркер списка */
}

/* Убираем красную точку у submenu-main */
.submenu-main .submenu-dot {
  display: none; /* Полностью скрываем точку */
}

/* Стили текста */
.submenu-main a {
  text-decoration: none; /* Убираем подчеркивание */
  color: #ffffff; /* Черный цвет текста */
  font-family: 'Overpass', sans-serif; /* Применяем шрифт */
}

.submenu-main a:hover {
  color: #e60012; /* Красный цвет при наведении */
  transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Убираем точку только для submenu-main, не затрагивая другие элементы */
.submenu-main li .submenu-dot {
  display: none !important; /* Удаляем красную точку */
}

/* Стили подменю */
.submenu {
  display: block; /* Показываем подменю при наведении */
  position: fixed;
  top: 150px; /* Настройте позицию под ваш блок */
  height: 540px;
  left: 51%;
  width: 50%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 0; /* Растягиваем меню */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: none; /* Меню скрыто по умолчанию */
  z-index: 10000;
}

.submenu li {
  padding: 10px;
}

.submenu li a {
  text-decoration: none;
  color: #000000 !important; /* Черный цвет текста по умолчанию */
  font-family: 'Overpass', sans-serif;
  transition: color 0.3s ease; /* Плавный переход цвета */
}

.submenu li a:hover,
.submenu li a:focus,
.submenu li a:active {
  color: #e60012 !important; /* Красный цвет при наведении */
}

/* Для выделенного пункта меню */
.menu-item-selected > span {
  color: #e60012 !important; /* Красный цвет текста для выбранного пункта */
  font-weight: bold; /* Можно добавить жирность для выделения */
  transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Переопределение стандартных стилей ссылок */
a {
  text-decoration: none !important; /* Убираем подчеркивание */
  color: inherit !important; /* Наследуем цвет от родителя */
}

a:visited,
a:hover,
a:active,
a:focus {
  color: inherit !important; /* Убедитесь, что ссылки наследуют нужный цвет */
}

.hidden {
  display: none;
}

/* Стили для иконок */
.menu-icon {
  width: 32px; /* Увеличиваем размер иконки */
  height: 32px;
  margin-right: 10px; /* Расстояние между иконкой и текстом */
  transition: filter 0.3s ease;
}

/* Стили для активного состояния пункта меню */
.menu-item-selected .menu-icon {
  filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(1968%) hue-rotate(349deg) brightness(93%) contrast(110%);
}

.menu-item.menu-item-selected .submenu-icon {
  transform: rotate(180deg); /* Поворот стрелки для выделенного пункта */
  color: #e60012; /* Цвет стрелки при выборе */
}

/* Стрелка справа */
.submenu-icon {
  font-size: 20px; /* Размер стрелки */
  color: #333; /* Цвет стрелки */
  margin-left: auto; /* Устанавливает стрелку справа */
  transition: transform 0.3s ease; /* Анимация переворота */
}

.menu-item:hover {
  color: #e60012; /* Красный текст при наведении */
  background-color: rgba(230, 0, 18, 0.1); /* Легкий красный фон при наведении */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .video-container {
    height: 100%; /* Увеличиваем высоту для мобильных */
  }

  .video-background {
    transform: translate(-50%, -50%) scaleY(1); /* Убираем растяжение для мобильных */
    object-fit: cover; /* Заполняем полностью */
  }

  .text-overlay {
    width: 90%; /* Сужаем ширину текста для мобильных */
    top: 60%; /* Смещаем немного ниже */
    transform: translate(-50%, -60%);
  }

  .text-background h1 {
    font-size: 1.5rem; /* Уменьшаем размер текста */
  }

  .small-text {
    font-size: 1rem; /* Уменьшаем текст под заголовком */
  }

  .cta-button {
    padding: 0.5rem 1rem; /* Уменьшаем размер кнопки */
    font-size: 1rem; /* Уменьшаем размер текста кнопки */
  }

  /* Меню */
  .custom-menu {
    width: 80%; /* Сужаем меню для мобильных */
    top: 100px; /* Корректируем положение */
    left: 10%; /* Центрируем */
  }

  .submenu {
    top: 100px;
    left: 10%;
    width: 80%;
  }

  .menu-item {
    padding: 5px; /* Уменьшаем отступы в меню */
  }

  .menu-text {
    font-size: 18px; /* Уменьшаем размер текста меню */
  }
}

html {
  scroll-behavior: smooth;
}

/* Цвет самой радио кнопки */
.t-product__option-input_radio {
    accent-color: #FFFFFF !important; /* Укажите нужный цвет */
}

/* Цвет для выбранной радио кнопки */
.t-product__option-input_radio:checked {
    accent-color: #FFFFFF !important; /* Цвет при выборе */
}

/* Для закраски внутренней части выбранной радио кнопки */
.t-product__option-input_radio:checked + .t-product__option-checkmark_radio::before {
    background-color: #004aad; /* Укажите нужный цвет */
    border: 2px solid #004aad; /* Дополнительно — граница, если требуется */
    border-radius: 100%; /* Для круговой формы */
}

/* Для изменения обводки вокруг радио кнопки */
.t-product__option-checkmark_radio::before {
    border: 2px solid #004aad !important; /* Обводка */
    background-color: transparent;
    border-radius: 50%;
}

/* При наведении */
.t-product__option-checkmark_radio:hover::before {
    background-color: #004aad !important; /* Цвет при наведении */
}