/* Default styling for the menu (desktop) */
#cssmenu {
    display: flex; /* Show menu inline for desktop */
    flex-direction: column;
    gap: 10px;
}

#menu-toggle {
    display: none; /* Hide the toggle button on desktop */
}

/* Small screens (mobile/tablets) */
@media (max-width: 1024px) {
    #cssmenu {
        display: none; /* Hide the menu by default */
        flex-direction: column; /* Stack items vertically when shown */
        gap: 10px;
        background: #f9f9f9; /* Optional: Add a background for the dropdown */
        padding: 10px;
        border: 1px solid #ddd;
    }

    #menu-toggle {
        display: block; /* Show the toggle button */
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* Show the menu when active class is added */
    #cssmenu.active {
        display: flex;
    }
}