/* Base Styles */

.header-image {

    align-self: center;

    border-bottom: 1px solid #7e839a;

    max-width: 1000px;

    width: 100%; /* Responsive width */

    height: auto; /* Maintain aspect ratio */

}



.navigation {

    position: sticky; /* Makes the navigation stick to the top when scrolling */

    top: 0; /* Aligns the navigation to the top of the viewport */

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%; /* Full width */

    background-color: #0e2d6d; /* Background color */

    font-family: Verdana, Arial, Helvetica, sans-serif;

    z-index: 1000; /* Ensures the navigation stays above other content */

    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);

}



body {

    padding-top: 0px; /* Adjust this value based on the actual height of your fixed navigation header */

}



/* Desktop Navigation Styles */

.desktop-nav-headers {

    display: flex;

    justify-content: center; /* Align items in the center */

    max-width: 1000px; /* Maximum width */

    width: 100%; /* Full width on smaller screens */

    background-color: transparent;

    padding: 5px 0;

    margin: 0 auto; /* Center the nav-headers within the navigation */

}



.desktop-nav-header-group {

    flex: 1;

    text-align: center;

}



.desktop-nav-header {

    flex-grow: 1; /* Allows each header to grow evenly to fill the space */

    text-align: left; /* Centers the text within each header */

    color: #BED9E6; /* The color of the header text */

    padding: 3px 0px; /* Adds some padding to the left and right */

    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */

}



.desktop-nav-menu-items {

    list-style: none;

    padding: 0;

    margin: 0;

    display: block;

}



.desktop-nav-item {

    width: 100%;

    display: block;

    text-align: left;

    margin: 0; /* Remove vertical margin */

    padding: 1px 3px; /* Remove padding, or set to a small value if some space is needed */

}



.desktop-nav-link {

    text-decoration: none;

    color: white;

    display: block;

    padding: 1px 3px; /* Reduce padding for less space, adjust as needed */

    width: 100%;

}



    .desktop-nav-link.active-item {

        color: #44b4ec; /* Active item text color */

        pointer-events: none; /* Makes it non-clickable */

        cursor: default; /* Changes cursor style */

    }



/* Mobile Navigation Styles */

.mobile-menu {

    display: none; /* Initially hidden */

    cursor: pointer;

    /* Add further styling as needed */

}



    .mobile-menu span {

        display: block;

        width: 30px;

        height: 3px;

        margin: 5px;

        background-color: #ffffff; /* Set the color to white */

    }



.mobile-nav-items {

}



.mobile-nav-header-group {

    /* Styles to ensure vertical layout */

}



.mobile-nav-header {

    color: #BED9E6; /* You can keep the color same or change it for mobile */

    text-align: center; /* Or center, depending on how you want it on mobile */

    padding: 10px 15px; /* Increased padding for better touch interaction */

    font-size: 18px; /* Larger font size for mobile readability */

    border-top: 1px solid #ccc; /* Light grey top border */

}



.mobile-nav-menu-items {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mobile-nav-menu-items li {

    /* Styles for list items, if necessary */

}



.mobile-nav-link {

    display: block;

    color: #FFFFFF;

    text-decoration: none;

    padding: 12px 15px;

    font-size: 16px;

    border-bottom: none; /* Remove the line */

}



.mobile-nav-link.active-item {

    color: #44b4ec; /* Active item text color, can be same or different from desktop */

    pointer-events: none;

    cursor: default;

    font-size: 16px; /* Larger font size for easier readability on mobile */

    padding: 10px 15px; /* Larger padding for easier touch */

}



.mobile-nav-container {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    max-height: 100vh;

    overflow-y: auto;

    z-index: 1001; /* Adjust as needed to ensure it's above other content */

    -webkit-overflow-scrolling: touch;

    display: none; /* Initially hidden */

    background-color: #0e2d6d; /* Set the background color */

    display: none; /* Hide by default */

}



.close-btn {

    position: absolute;

    top: 10px; /* Adjust as per your design */

    right: 10px; /* Adjust as per your design */

    cursor: pointer;

    font-size: 20px; /* Adjust as per your design */

    color: #ccc; /* Grey color, adjust to match dividing lines */

    z-index: 1002; /* Ensure it is above other content inside the container */

}



/* Media Queries for Responsive Design */

@media screen and (max-width: 768px) {

    .desktop-nav-headers {

        display: none; /* Hide the full navigation menu on mobile */

    }



    .mobile-menu {

        display: block; /* Show mobile menu button on mobile screens */

    }

}