@media (min-width: 992px) {
    /* 1. Prepare ALL valid dropdowns to be ready for transitions */
    .navbar-nav .dropdown-menu:has(li),
    .navbar-nav .dropdown-menu:has(a) {
        /* Keep it generated in the DOM, but completely invisible */
        display: block !important; 
        opacity: 0 !important;
        visibility: hidden !important;
        
        /* Smoothly animate opacity and visibility over 0.3 seconds */
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        
        /* Layout fixes */
        margin-top: 0 !important;
        transform: none !important;
        position: absolute !important;
    }

    /* 2. Position adjustment for button triggers */
    .navbar-nav button + .dropdown-menu:has(li),
    .navbar-nav button + .dropdown-menu:has(a) {
        top: 100% !important;
    }

    /* 3. When hovered, smoothly fade the menu IN */
    .navbar-nav .nav-item:hover .dropdown-menu:has(li),
    .navbar-nav .nav-item:hover .dropdown-menu:has(a),
    .navbar-nav .dropdown:hover .dropdown-menu:has(li),
    .navbar-nav .btn-group:hover .dropdown-menu:has(a) {
        opacity: 1 !important;
        visibility: visible !important;
    }
}