/* Telegram кнопка в шапке */
.header-tg-link {
  display: none; /* По умолчанию скрыта на мобильных */
  align-items: center;
  margin-left: 16px;
  padding: 8px 15px;
  color: #FFFFFF; /* Белый цвет текста и иконки */
  background-color: transparent;
  border: 1px solid #FFFFFF;
  border-radius: 20px; /* Скругленные углы */
  font-weight: 600;
  text-decoration: none; /* Убрать подчеркивание */
  transition: all .2s ease-in-out; /* Плавный переход для всех свойств */
  flex-shrink: 0;
}
.header-tg-link:hover, .header-tg-link:focus {
  color: #229ED9; /* Синий цвет текста при наведении */
  background-color: #FFFFFF; /* Белый фон при наведении */
  border-color: #FFFFFF; /* Граница становится частью фона */
  transform: scale(1.05); /* Немного увеличить кнопку */
}

/* Стили для header-wrapper, чтобы навигация не ломалась */
@media (min-width: 768px) { /* Применяем только для экранов шире 768px */
  .header-wrapper {
    display: flex; /* Включаем Flexbox */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Выравниваем по центру вертикально */
  }

  .header-navbar {
    display: flex; /* Элементы навигации тоже в строку */
    align-items: center;
    margin-left: auto; /* Отодвигаем основные ссылки влево, если нужно*/
    margin-right: 16px; /* Добавляем отступ справа от навигации */
  }

  .header-tg-link {
    display: inline-flex; /* Показываем на десктопе */
  }

  .header-mobile-button {
    display: none; /* Скрываем бургер на десктопе */
  }
}

/* Стили для навигации в мобильном меню */
.mobile-menu-top .header-navbar {
  display: block; /* Чтобы занимало всю ширину и не было flex */
  margin-left: 0; /* Сбросить отступы от десктопной версии */
  margin-right: 0;
  padding-top: 20px; /* Добавить немного отступа сверху */
}

.mobile-menu-top .header-navbar .header-list {
  display: block; /* Элементы списка вертикально */
  margin-bottom: 15px; /* Отступ между ссылками */
}

.mobile-menu-top .header-navbar .header-link {
  display: block; /* Ссылки тоже блочные */
  padding: 10px 0; /* Удобные для нажатия */
}

/* Telegram кнопка в мобильном меню */
.mobile-tg-link {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  color: #FFFFFF;
  font-weight: 600;
  transition: transform .15s, color .15s;
}
.mobile-tg-link:hover, .mobile-tg-link:focus {
  color: #DDDDDD;
  transform: scale(1.1);
}