.menu-container {
    position: relative;
}

/* #header.scrolled ul li a {
    color: black
} */

.menu-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Default for larger screens */
    background-color: transparent;
}
#header.scrolled .menu-container ul li a {
    color: black;/* Shrunk logo size */
}

#header.scrolled .menu-toggle {
    color: black;/* Shrunk logo size */
}

.menu-container ul li {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.menu-container ul li a {
    color: white;
    display: block;
    text-decoration: none;
    padding: 10px 15px; /* Adjusted padding */
    font-size: 14px; /* Adjusted font size */
}

.menu-container ul li a:hover {
    color: #f39c12;
}

.menu-toggle {
    display: none; /* Hidden on larger screens */
    background-color: transparent;
    /* color: white; */
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    text-align: left;
}

/* .menu-container li:active, .menu-container li a:active {

} */

@media (max-width: 768px) {
    .menu-container ul {
        display: none; /* Hide menu initially */
        flex-direction: column; /* Stack items vertically */
        width: 100%;
        position: absolute; /* Position it relative to menu container */
        top: 100%; /* Below the button */
        left: 0; /* Align to left */
    }

   .menu-container .menu-toggle {
      display: block;
      width: 100%;
      color: white;
      background-color: transparent !important;
    }

    .menu-container.active ul {
      display: flex; /* Show menu when active */
      background-color: white;
    }

    .menu-container.active ul {
        display: flex; /* Show menu when active */
        color: black;
    }

    .menu-container.active ul li a {
        color: black;
    }
}

@media (max-width: 480px) {
    .menu-container .menu-toggle {
        /*flex-direction: column;  Stack items vertically 
        width: 100%;
         background-color: #333; Ensuring it has a background 
        position: absolute; Position it relative to menu container 
        top: 100%;  Below the button  */
        left: 0;  /*Align to left*/ 
        background-color: transparent !important; 
        color: white;
    }

    .menu-container ul li a {
        padding: 8px 10px; /* Further reduced padding */
        font-size: 12px; /* Smaller font size */
    }

    .menu-container.active ul {
        background-color: white;
        display: flex; /* Show menu when active */
        color: black;
    }

    .menu-container .menu-toggle {
        font-size: 16px; /* Slightly smaller toggle button text */
        padding: 10px 15px; /* Adjusted padding for toggle */
    }
    .menu-container.active ul li a {
        color: black;
    }
}