/* banner css in about us page */
@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll;
        /* Disables parallax for better performance on mobile */
        padding: 50px 0;
        /* Adjust padding for smaller screens */
        margin-top: 12rem;
        /* Adjust margin for smaller devices */
        height: 80vh;
        /* Adjust height for smaller screens */
    }

    .hero-banner-content h1 {
        font-size: 2rem;
        /* Reduces font size for smaller screens */
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 30px 0;
        margin-top: 8rem;
        height: auto;
        /* Ensure proper scaling on small screens */
    }

    .hero-banner-content h1 {
        font-size: 1.5rem;
    }
}



/* Hover behavior for larger screens */
@media (min-width: 992px) { /* For large screens */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .nav-item .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out;
    }
}

/* Mobile view - ensure dropdown still works on click */
@media (max-width: 991px) {
    .nav-item .dropdown-menu {
        display: block;
    }
}