/* Custom CSS for dropdown hover */
@media (min-width: 992px) {

    /* Dropdown hover effect */
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .navbar .dropdown-menu {
        margin-top: 0;
        border-top: 3px solid var(--bs-primary);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .navbar .dropdown-toggle::after {
        transition: transform 0.3s ease;
    }

    .navbar .dropdown:hover .dropdown-toggle::after {
        transform: rotate(-180deg);
    }

    /* Smooth transition for dropdown */
    .navbar .dropdown-menu {
        animation: fadeInDown 0.3s ease-in-out;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}