/* Custom styles to fix mobile menu issues */

/* Fix mobile menu button (hamburger) color and background */
.mean-container a.meanmenu-reveal {
    background-color: rgba(46, 49, 57, 0.8); /* Dark background with opacity */
    color: #ffffff !important; /* Ensure text is white */
    border-radius: 3px; /* Rounded corners */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    padding: 8px 10px !important; /* Padding inside button */
    top: 20px; /* Position from top */
    right: 15px !important; /* Position from right */
}

/* Fix hamburger lines */
.mean-container a.meanmenu-reveal span {
    background-color: #ffffff !important; /* White lines */
    height: 3px; /* Line height */
    margin-top: 4px; /* Space between lines */
    width: 100%; /* Full width */
    display: block;
    border-radius: 1px;
}

/* Fix mobile menu container */
.mean-container .mean-bar {
    background-color: rgba(255, 255, 255, 0.95) !important; /* Light background with opacity */
    height: 70px;
    padding: 0;
}

/* Fix mobile menu dropdown */
.mean-container .mean-nav {
    margin-top: 70px;
    background-color: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Fix mobile menu items */
.mean-container .mean-nav ul li a {
    padding: 12px 5%;
    border-top: 1px solid #f1f1f1;
}

/* Fix mobile menu active state */
.mean-container .mean-nav ul li a.active {
    color: #3498db !important;
    font-weight: bold;
}

/* Fix mobile menu expand button */
.mean-container .mean-nav ul li a.mean-expand {
    height: 24px !important;
    padding: 12px !important;
    background-color: transparent !important;
    color: #333 !important;
}