/* Hero background images with explicit dimensions to prevent layout shifts */

.hero-home {
    background-image: url('../househeaderhero2.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-about {
    background-image: url('../fbcompanylogo2.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-portfolio {
    background-image: url('../househeaderhero.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-contact {
    background-image: url('../footerhero.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-services, .hero-interior, .hero-exterior, .hero-custom {
    background-image: url('../househeaderhero2.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-thankyou {
    background-image: url('../fbcompanylogo2.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

.hero-privacy {
    background-image: url('../fbcompanylogo2.webp');
    aspect-ratio: 16/9;
    contain: layout paint;
}

/* Set explicit width and height to hero section */
.hero-section {
    width: 100%;
    min-height: 500px;
    height: 75vh;
    max-height: 800px;
    content-visibility: auto;
}

/* Hero image preloading to prevent layout shift */
@media (max-width: 768px) {
    .hero-section {
        min-height: 400px;
        height: 60vh;
    }
}