/* Menu bar styling */
.menu-bar {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff; /* Same background color as header */
    color: #034d8c;            /* Same font color as header */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Light gray shadow */
    padding: 5px 0;
    margin-top: 3px;
    position: sticky;          /* Make the menu sticky */
    top: 0;                    /* Stick to the top of the viewport */
    z-index: 1000;             /* Ensure it stays above other elements */
}

/* Equal width for each menu item */
.menu-item {
    flex: 1;                   /* Makes each menu item equal width */
    text-align: center;        /* Center-align text in each menu */
    padding: 5px 0;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;     /* Remove underline from links */
    color: #034d8c;            /* Text color */
}

/* Hover effect for menu items */
.menu-item:hover {
    background-color: #f0f0f0; /* Light hover background for better UX */
}

/* Responsive styling */
@media (max-width: 768px) {
    .menu-bar {
        /* flex-direction: column; /* Stack menus vertically on smaller screens */
    }

    .menu-item {
        width: 100%;            /* Each item spans full width on mobile */
    }
}