/* ===== BANNER TEXT OVERLAY - DESKTOP & MOBILE ===== */

/* Ensure carousel-item is positioned for overlay */
#carouselExampleAutoplaying .carousel-item {
    position: relative;
}

    /* Always-on subtle dark gradient overlay (Desktop) */
    #carouselExampleAutoplaying .carousel-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.65) 100% );
        pointer-events: none;
        z-index: 1;
        transition: background 0.4s ease;
    }

    /* On hover — deepen the overlay so text pops even more */
    #carouselExampleAutoplaying .carousel-item:hover::after {
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.60) 60%, rgba(0, 0, 0, 0.80) 100% );
    }

/* Caption always above overlay */
#carouselExampleAutoplaying .carousel-caption {
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.92;
}

/* On hover — caption lifts up slightly and becomes fully opaque */
#carouselExampleAutoplaying .carousel-item:hover .carousel-caption {
    transform: translateY(-6px);
    opacity: 1;
}

/* Strong text shadow on heading and description for extra clarity */
#carouselExampleAutoplaying .carousel-caption h1,
#carouselExampleAutoplaying .carousel-caption .carousel-heading {
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
}

#carouselExampleAutoplaying .carousel-caption h4,
#carouselExampleAutoplaying .carousel-caption p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}


/* ===== MOBILE RESPONSIVE - BANNER ===== */

@media (max-width: 767px) {
    #carouselExampleAutoplaying {
        height: 260px !important;
    }

        #carouselExampleAutoplaying .carousel-inner {
            height: 260px !important;
        }

        #carouselExampleAutoplaying .carousel-item img,
        #carouselExampleAutoplaying .carousel-item video {
            height: 260px !important;
            object-fit: cover;
        }

        /* Stronger overlay on mobile (no hover on touch devices) */
        #carouselExampleAutoplaying .carousel-item::after {
            background: linear-gradient( to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.75) 100% ) !important;
        }

        #carouselExampleAutoplaying .carousel-caption {
            display: block !important;
            z-index: 2;
            bottom: 8%;
            left: 5%;
            right: 5%;
            text-align: center;
            padding: 0;
            opacity: 1 !important;
            transform: none !important;
        }

            #carouselExampleAutoplaying .carousel-caption .carousel-heading {
                font-size: 16px !important;
                font-weight: 700 !important;
                margin-bottom: 4px !important;
                line-height: 1.3;
            }

            #carouselExampleAutoplaying .carousel-caption p,
            #carouselExampleAutoplaying .carousel-caption h4 {
                font-size: 12px !important;
                font-weight: 400 !important;
                margin-bottom: 0 !important;
            }
}

/* ===== TABLET ===== */

@media (min-width: 768px) and (max-width: 992px) {
    #carouselExampleAutoplaying {
        height: 380px !important;
    }

        #carouselExampleAutoplaying .carousel-inner {
            height: 380px !important;
        }

        #carouselExampleAutoplaying .carousel-item img,
        #carouselExampleAutoplaying .carousel-item video {
            height: 380px !important;
            object-fit: cover;
        }

        #carouselExampleAutoplaying .carousel-caption .carousel-heading {
            font-size: 26px !important;
        }

        #carouselExampleAutoplaying .carousel-caption p,
        #carouselExampleAutoplaying .carousel-caption h4 {
            font-size: 15px !important;
        }
}