/* Hero Section - 1500x512px with Aspect Ratio 375:128 */
#slide1 {
    width: 100%;
    height: auto !important;
    float: left;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#flexslide {
    height: auto !important;
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.mucflexslide {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    position: relative;
    /* Aspect ratio 375:128 = 2.9296875:1 */
    aspect-ratio: 375 / 128;
}

.mucflexslide img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    margin: 0;
}

/* Remove any fixed heights from slide containers */
#slide2, #slide3 {
    height: auto !important;
}

/* Ensure owl-carousel items don't have extra spacing */
.owl-carousel .owl-item {
    height: auto !important;
}

.owl-carousel .owl-stage {
    height: auto !important;
}

/* Responsive Design - Maintain 375:128 aspect ratio */
@media (max-width: 1500px) {
    .mucflexslide {
        /* Fallback for browsers that don't support aspect-ratio */
        height: calc(100vw * 128 / 375);
        max-height: 512px;
    }
}

@media (max-width: 768px) {
    .mucflexslide {
        height: calc(100vw * 128 / 375);
        max-height: 262px; /* 768 * 128/375 ≈ 262px */
    }
}

@media (max-width: 480px) {
    .mucflexslide {
        height: calc(100vw * 128 / 375);
        max-height: 164px; /* 480 * 128/375 ≈ 164px */
    }
}

@media (max-width: 320px) {
    .mucflexslide {
        height: calc(100vw * 128 / 375);
        max-height: 109px; /* 320 * 128/375 ≈ 109px */
    }
}

/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 375 / 128) {
    .mucflexslide {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: calc(128 / 375 * 100%); /* 34.133% */
    }
    
    .mucflexslide img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}