/* Мобильное меню — скрыто по умолчанию на десктопе */
.mobile_menu {
  display: none; /* Скрывает мобильное меню для десктопа */
}

/* Адаптивные стили для мобильных устройств (ширина экрана ≤ 768px) */
@media (max-width: 768px) {
  .mobile_menu {
     display: block; /* Показываем мобильное меню */
     margin: -30px 0 0 0; /* Отступ сверху (-30px), остальные равны 0 */
     position: relative; /* Убедитесь, что меню имеет относительное или абсолютное позиционирование */
     z-index: 10; /* Установите значение выше, чем у кнопок */
  }
}

/* Кнопка мобильного меню */
.slicknav_btn {
  background-color: #0270d1; /* Цвет кнопки */
  border: none;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000; /* Поверх всех элементов */
  width: 40px;
  height: 40px;
  border-radius: 8px; /* Закругленные края кнопки */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Полоски кнопки */
.icon-bar {
  position: absolute;
  width: 24px; /* Ширина полосок */
  height: 3px; /* Толщина полосок */
  background-color: white; /* Цвет полосок */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Верхняя полоска */
.icon-bar:nth-child(1) {
  top: 10px;
}

/* Средняя полоска */
.icon-bar:nth-child(2) {
  top: 18px;
  opacity: 1; /* Полоска видима по умолчанию */
}

/* Нижняя полоска */
.icon-bar:nth-child(3) {
  top: 26px;
}

/* Анимация при активной кнопке */
.slicknav_btn.active .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(0, 0);
  top: 18px;
}

.slicknav_btn.active .icon-bar:nth-child(2) {
  opacity: 0; /* Исчезновение средней полоски */
}

.slicknav_btn.active .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(0, 0);
  top: 18px;
}

/* Скрытое мобильное меню */
.slicknav_nav {
  display: none; /* Скрыто по умолчанию */
  position: absolute;
  top: 60px;
  right: 10px;
  background-color: #0270d1;
  width: 260px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

/* Отображение мобильного меню при активной кнопке */
.slicknav_btn.active + .slicknav_nav {
  display: block; /* Показываем меню */
}

/* Элементы меню */
.slicknav_nav li {
  list-style: none;
  margin: 10px 0;
}

.slicknav_nav li a {
  color: #ffffff; /* Цвет текста */
  text-decoration: none; /* Без подчёркивания */
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* Подменю */
.slicknav_nav .submenu {
  display: none; /* Скрываем подменю по умолчанию */
  padding-left: 15px; /* Отступ для вложенности */
}

.slicknav_nav .submenu li a {
  font-size: 14px; /* Уменьшаем шрифт для подменю */
  color: #e0e0e0; /* Цвет текста подменю */
}

/* Эффекты при наведении */
.slicknav_nav li a:hover {
  background-color: #0056a6;
  border-radius: 5px;
}

/* Показываем подменю при наведении */
.slicknav_nav li:hover > .submenu {
  display: block;
}