/* Mobile Navigation Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Hide mobile navigation by default */
.mobile-nav-container {
    display: none; /* Hidden on all screen sizes initially */
}

/* Mobile Menu Button Styles */
.mobile-menu-btn {
    display: none; /* Hidden on all screen sizes initially */
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1001; /* Ensure it’s above other content */
    padding: 10px; /* Add padding to create space around the icon */
}

/* Bar icon styles */
.bar-icon {
    display: block;
    width: 30px; /* Width of the icon box */
    height: 30px; /* Height of the icon box */
    border: 2px solid #87CEEB; /* Sky blue border */
    background: none;
    position: relative;
}

.bar-icon::before,
.bar-icon::after {
    content: "";
    display: block;
    width: 20px; /* Width of the bar */
    height: 3px; /* Height of the bar */
    background: #87CEEB; /* Sky blue color for bars */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bar-icon::before {
    top: 8px; /* Position the first bar */
}

.bar-icon::after {
    top: 15px; /* Position the second bar */
}

/* Hide the button when the menu is active */
.mobile-menu-btn.hidden {
    display: none; /* Hide button when the menu is open */
}

/* Mobile Navigation Menu Styles */
.mobile-nav-menu {
    position: fixed;
    top: 0; /* Keep the menu at the top of the viewport */
    left: -40vw; /* Hidden off-screen initially, 40% of the viewport width */
    width: 40vw; /* Width is 40% of viewport width */
    height: 100%;
    background: #e4f8f7; /* Light color background */
    transition: left 0.3s ease;
    z-index: 1000; /* Ensure it’s above other content */
    overflow-y: auto; /* Add scroll if content overflows */
    box-shadow: 2px 0 5px rgba(0,0,0,0.3); /* Optional shadow for visual separation */
    padding-top: 60px; /* Adjust padding to move content down */
}

.mobile-nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Reduce space between headings (list items) */
.mobile-nav-menu ul li {
    padding: 15px 15px; /* Reduce padding */
    margin: 0; /* Remove margin between list items */
}

.mobile-nav-menu ul li a {
    text-decoration: none;
    color: #333; /* Dark color for links */
    display: block;
}

/* Adjust the close button inside the menu */
.mobile-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #333; /* Dark color for visibility */
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 15px; /* Positioned on the left within the menu */
}

/* Show mobile navigation container and menu button only on mobile devices */
@media (max-width: 767px) {
    .mobile-nav-container {
        display: block; /* Show mobile navigation container */
    }
    
    .mobile-menu-btn {
        display: block; /* Show mobile menu button */
    }
}

/* Show mobile navigation menu when active */
.mobile-nav-menu.active {
    left: 0; /* Slide in from the left */
}
/* Show mobile navigation container and menu button on smaller screens */
@media (max-width: 1024px) { /* Adjusted from 767px to 1024px */
    .mobile-nav-container {
        display: block; /* Show mobile navigation container */
    }
    
    .mobile-menu-btn {
        display: block; /* Show mobile menu button */
    }
    .desktop-nav{
        display: none;
    }
}