/* Mobile Responsive Hero Background Images */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {
    .hero-wrap {
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important;
        min-height: 50vh !important;
    }
    
    .hero-wrap-2 {
        background-position: center center !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }
    
    /* Fix for shifted images on mobile */
    .hero-wrap .container,
    .hero-wrap-2 .container {
        position: relative;
        z-index: 2;
    }
    
    .hero-wrap .overlay,
    .hero-wrap-2 .overlay {
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .hero-wrap,
    .hero-wrap-2 {
        background-position: center center !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        min-height: 45vh !important;
    }
    
    .hero-wrap .breadcrumbs,
    .hero-wrap-2 .breadcrumbs {
        font-size: 14px;
    }
    
    .hero-wrap h1.bread,
    .hero-wrap-2 h1.bread {
        font-size: 1.8rem !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-wrap,
    .hero-wrap-2 {
        background-position: center center !important;
        background-size: cover !important;
        min-height: 55vh !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .hero-wrap,
    .hero-wrap-2 {
        background-position: center center !important;
        background-size: cover !important;
        min-height: 60vh !important;
    }
}