/* Strong mobile override: use multiple selectors + !important */
@media only screen and (max-width: 767px) {
    /* ensure hero container positioned correctly */
    #hero, section#hero, .hero-area

{
    -webkit-text-size-adjust: 100%;
}

/* strongest possible selector to force white overlay */
        #hero .hero-slide .overlay,
        section#hero .hero-slide .overlay,
        .hero-area #heroCarousel .hero-slide .overlay,
        .hero-area .hero-slide .overlay {
            background: #ffffff45;
            background-image: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: none !important;
            /* remove any background-blend-mode or filter if present */
            filter: none !important;
            mix-blend-mode: normal !important;
        }

/* make sure overlay covers slide (if overlay not positioned) */
#hero .hero-slide {
    position: relative !important;
}

    /* if overlay element had inline styles added by JS, remove them via forcing computed props */
    #hero .hero-slide .overlay[style] {
        background: #ffffff !important;
    }


}

.hero-area {
    margin-top: 90px !important; /* adjust according to navbar height */
}

/* Gallery image */
.gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    cursor: pointer;
}

/* Modal image full size */
#galleryModal .carousel-item img {
    max-height: 80vh;
    object-fit: contain;
}