@media (min-width: 992px) {
    /* 1. Force the dropdown menu to show when hovering over the nav-item */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 2. Eliminate the gap so the menu doesn't disappear when moving the mouse down */
    .navbar-nav .nav-item .dropdown-menu {
        margin-top: 0 !important;
        transform: none !important; /* Disables Bootstrap's dynamic JS positioning */
    }

    /* 3. Optional: Ensures the parent arrow/indicator looks active on hover */
    .navbar-nav .nav-item.dropdown:hover > .nav-link {
        color: var(--bs-navbar-active-color, #000) !important;
    }
}