/* Custom Styles not covered by Tailwind utilities */

/* Slider Crossfade Animations */
.slide {
    transition: opacity 1s ease-in-out;
}

/* Ensure smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar for cleaner look if needed, though mostly standard */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Adjustments for screens smaller than 768px (common breakpoint for tablets/mobiles) */
@media (max-width: 767px) {
    #hero-slider {
        /* Reduce the height for smaller screens */
        height: 50vh; /* Example: 50% of viewport height */
        min-height: 300px; /* Ensure a minimum height */
    }

    /* Adjust button sizes and positions */
    #hero-slider button {
        width: 40px;
        height: 40px;
        left: 1rem; /* Adjust left position */
        right: 1rem; /* Adjust right position */
    }

    /* Hide the scroll indicator on very small screens if it clutters the design */
    #hero-slider .absolute.bottom-10.left-8 {
        display: none;
    }

    /* You might want to use different images for mobile if they are optimized for smaller screens */
    /* .mobile-img {
        content: url('assets/images/arjun-karki-banner-mobile.png');
        /* For images loaded via CSS, but your HTML uses <img> tags.
        Consider using the <picture> element or JS for image switching. */
    /* } */
}

/* Adjustments for screens smaller than 640px (common breakpoint for phones) */
@media (max-width: 639px) {
    #hero-slider {
        height: 40vh; /* Even smaller height for phones */
        min-height: 250px;
    }

    #hero-slider button {
        width: 36px;
        height: 36px;
        left: 0.5rem;
        right: 0.5rem;
    }
}
/* Custom CSS file or <style> block */
@media (max-width: 767px) { /* Adjust breakpoint as needed for your definition of "mobile" */
    .slider-nav-btn {
        display: none !important; /* Hide buttons on mobile */
    }
}