/* Hamburger Menu Styles */
#hamburger-menu {
    text-align: center; /* Center the menu toggle button */
    margin-bottom: 2rem; /* Add spacing below the button to avoid overlap */
}

#menu-toggle {
    display: block; /* Ensure the button is visible */
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

#menu-links {
    display: flex;
    justify-content: center; /* Center the menu items */
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 auto; /* Center the menu within the container */
    max-width: 700px; /* Match the width of the main section */
    background: #003366;
    color: #fff;
    position: static; /* Remove absolute positioning */
    margin: 0 auto; /* Center the menu within the container */
}

#menu-links li {
    border-bottom: 1px solid #fff;
}

#menu-links li:last-child {
    border-bottom: none;
}

#menu-links a {
    display: block;
    padding: 0.75rem 1rem;
    color: #fff;
    text-decoration: none;
}

#menu-links a:hover {
    background: #e31837;
}

/* Show menu when active */
#menu-links.active {
    display: block;
}

@media (max-width: 768px) {
    #menu-links {
        display: none; /* Hide the menu links by default */
        flex-direction: column;
        position: static; /* Remove absolute positioning */
        width: 100%; /* Use full width */
        background: transparent; /* Remove background for consistency */
        box-shadow: none; /* Remove shadow */
    }
    #menu-links.active {
        display: flex; /* Show the menu links when active */
    }
}