@media (min-width: 992px) {
    /* When a user hovers over the main dropdown item in the navbar, show its menu */
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        /* A common reset for navbar dropdowns to remove any unwanted top margin */
        margin-top: 0;
    }
}


/* --- Logic for the Nested Dropdown (Submenus) --- */

/* Ensure the container for the submenu is positioned relatively.
   This is the anchor for the absolute positioning of the child menu. */
.dropend {
    position: relative;
}

    /* Style the nested dropdown menu */
    .dropend .dropdown-menu {
        /* Start hidden */
        display: none;
        /* Position it absolutely relative to the .dropend container */
        position: absolute;
        /* Align the top of the submenu with the top of its parent item */
        top: 0;
        /* CRITICAL: Move the submenu to be 100% to the left of its parent,
       which places it directly to the right. */
        left: 100%;
        /* Optional: Small tweaks for perfect alignment */
        margin-top: -6px;
        margin-left: .125rem;
    }

    /* When a user hovers over the dropend container, show its submenu.
   No media query is needed here because it will only be visible if its parent is already hovered on a desktop. */
    .dropend:hover > .dropdown-menu {
        display: block;
    }

    /* Ensure the dropdown toggle arrows point the right way for submenus */
    .dropend > .dropdown-toggle::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }




.nav-highlight {
    /* 
       NEW: Set the background to a vibrant blue. 
       This is a standard Bootstrap blue, but you can replace #007bff 
       with the exact hex code from your logo for perfect brand consistency.
    */
    background-color: #007bff;
    /* NEW: Set the text color to white for high contrast against the blue. */
    color: #fff !important;
    /* NEW: Make the border match the blue background. */
    border: 1px solid #007bff;
    /* These properties remain the same for smooth transitions */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

    /* Style on hover - Inverting the colors for a clean effect */
    .nav-highlight:hover {
        /* On hover, switch to a white background */
        background-color: #fff;
        /* NEW: On hover, the text becomes the blue accent color. */
        color: #007bff !important;
        /* NEW: The border also remains blue on hover for a defined shape. */
        border-color: #007bff;
    }