/* mobile-nav-fix.css */

@media (max-width: 1199px) {
    /* Set background of the mobile menu panel itself to white */
    body.mobile-nav-active #navmenu ul {
        background-color: #FFFFFF !important; /* White background for the open menu */
        border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Subtle border for definition */
        /* Add padding here if it's collapsing: */
        padding: 10px !important; /* Example: adjust as needed */
    }

        /* Set the color of the mobile navigation links to dark green */
        body.mobile-nav-active #navmenu ul li a {
            color: #053125 !important; /* Dark green text for menu items */
            font-weight: 600 !important; /* Ensure they are bold and visible */
        }

            /* Set the color of the mobile navigation icons within links to dark green */
            body.mobile-nav-active #navmenu ul li a i {
                color: #053125 !important; /* Dark green icons */
                background-color: transparent !important; /* Ensure no conflicting background */
            }

            /* Style for active/hover state of mobile nav links */
            body.mobile-nav-active #navmenu ul li a.active,
            body.mobile-nav-active #navmenu ul li a:hover {
                color: #A8DADC !important; /* Lighter green on hover/active */
            }

    /* The hamburger icon color when the menu is open */
    .mobile-nav-toggle.bi-x {
        color: #053125 !important; /* Dark green for the 'X' icon */
    }

    /* Background overlay when mobile menu is open (if present) */
    body.mobile-nav-active {
        overflow: hidden; /* Prevent scrolling body when menu is open */
    }
        /* This next rule applies to a common full-screen overlay when the mobile nav is open.
       It's often handled by JavaScript adding a class to 'body' or another element.
       Adjust this selector if your theme uses a different approach for the overlay.
    */
        body.mobile-nav-active::before { /* Common pattern for full-screen overlay */
            background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent black overlay */
        }
}