.burger-menu {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px; /* Высота бургер-меню */
    margin-left: auto; /* Отодвигает бургер-меню вправо */
}

.line {
    width: 30px; /* Ширина линии */
    height: 3px; /* Высота линии */
    background-color: #fff; /* Цвет линий */
    transition: all 0.3s; /* Плавный переход */
}

.nav-menu {
    display: none; /* Скрываем меню по умолчанию */
    position: absolute;
    top: 50px; /* Расположение меню */
    left: 0;
    width: 100%; /* Ширина 100% от родительского элемента */
    background-color: #444; /* Цвет фона меню */
    z-index: 100; /* Устанавливаем слой для видимости */
}

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

.nav-menu li {
    padding: 10px;
}

.nav-menu li a {
    color: #fff; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
}

.nav-menu.active {
    display: block; /* Показываем меню при активации */
}

/* Стиль активного бургер-меню для анимации */
.burger-menu.active .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active .line:nth-child(2) {
    opacity: 0; /* Скрываем среднюю линию */
}

.burger-menu.active .line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Добавление медиа-запросов для мобильного отображения */
@media (max-width: 768px) {
    .nav-menu {
        max-height: 300px; /* Высота меню на мобильниках */
    }
}