.header-menu {
    background-color: #377eff;
    color: #ffffff;
    /* padding: 10px 1.5%; */
    text-align: center;
    font-size: 2vh;
    width: 100%; /* Добавлено для растяжения по ширине экрана */
    box-sizing: border-box;
    /* overflow-x: hidden; */
}

.header-menu a {
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
}


/* Основные стили для меню */
.nav-menu {
    list-style: none; /* Убираем точки */
    padding: 0 1.5em;
    margin: 0;
    display: flex;
    justify-content: space-between; /* Растягивание пунктов меню по ширине */
    /* background-color: #333; */
    position: relative;
}

.nav-menu li {
    position: relative;
}

 

.nav-menu a {
    color: #ffffff; /* Цвет ссылок */
    padding: 10px 15px;
    display: block;
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #d6f7f8; /* Цвет ссылок при наведении */
}

/* Стили для выпадающего меню */
.nav-menu li ul {
    display: none; /* Скрываем выпадающее меню по умолчанию */
    position: absolute;
    z-index: 4000;
    top: 100%;
    left: 400%; /* Центрирование по горизонтали */
    transform: translateX(-50%);
    background-color: #1981c7;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 110vh; /* Ширина выпадающего меню */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    text-align: left;
}

.nav-menu li:hover > ul {
    display: grid;
    opacity: 1;
    visibility: visible;
    justify-content: center; /* Центрирование подменю */
}

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

.nav-menu li ul li a {
    padding: 5px 10px;
    color: #ffffff;
    display: block;
}

.nav-menu li ul li a:hover {
    color: #d3f8ff;
}

.nav-menu .has-submenu::after {
    content: "▼"; /* Добавляем треугольник */
    color: #ffffff;
    margin-left: 5px;
}