.nav-panel {
    display: none;
    position: absolute; /* change fixed to absolute */
    top: 100%; /* position exactly under the parent (<li>) */
    left: 0;
    min-width: 250px; /* dropdown menu width */
    z-index: 999;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 5px 0;
    box-sizing: border-box;
    border-radius: 4px;
}

.nav-panel.active {
    display: block;
}

/* Add position: relative to the parent so the menu stays contained */
.menu.topmenu li {
    position: relative; 
}

span.solutions-toggle {
    cursor: pointer;
}

.solutions-toggle.active .solutions-icon {
    transform: rotate(180deg);
}

.nav-panel a {
    padding: 6px 15px; /* Add side padding */
    background: transparent !important; /* Remove Foundation's blue background */
    color: #333 !important; /* Force dark text color */
    text-decoration: none;
    width: 100%;
    display: block;
    line-height: 1.5; /* Fix line height */
}

.nav-panel a:hover {
    background: #eceaf0 !important;
    color: #000 !important;
}

@media (max-width: 1023px) { /* Trigger for tablet/mobile */
    .solutions-icon {
        margin-left: 8px;
    }

    .top-bar {
        position: relative; /* Anchor for absolute menu */
    }

    .menu.topmenu {
        display: none; /* Hide normally on mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 0;
        margin: 0;
    }

    .menu.topmenu.mobile-active {
        display: flex;
    }

    .menu.topmenu li {
        width: 100%;
        text-align: left; /* Изменили на left */
        border-bottom: 1px solid #eee;
        display: block;
    }

    .menu.topmenu li a, 
    .menu.topmenu li span.solutions-toggle {
        display: block !important;
        padding: 15px 20px !important; /* Добавили левый отступ, чтобы не прилипало к краю */
        font-size: 18px;
        width: 100%;
        text-align: left; /* Изменили на left */
    }

    .nav-panel {
        position: static !important;
        box-shadow: none !important;
        background: #f9f9f9 !important;
        margin: 0 !important;
        /*padding: 20px 0 !important;*/
        width: 100% !important;
        border-radius: 0;
        display: none !important; /* Hide normally */
    }

    .nav-panel.mobile-active {
        display: block !important;
    }

    /* Override the desktop hover active state for mobile so no double triggers */
    .nav-panel.active {
        display: none !important; 
    }

    .nav-panel a {
        padding: 10px 20px 20px 40px !important; /* Делаем подменю с отступом чуть правее для иерархии */
        font-size: 16px;
        text-align: left;
        line-height: 1.0;
    }
}