/* Background Fix for Responsive Design */

/* Hero section background fixes */
.hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    width: 100% !important;
}

/* Ensure background covers full viewport on all devices */
@media screen and (max-width: 1920px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media screen and (max-width: 1440px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media screen and (max-width: 1200px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media screen and (max-width: 992px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important; /* Better performance on mobile */
    }
}

@media screen and (max-width: 768px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
    }
}

/* Additional fixes for very large screens */
@media screen and (min-width: 1921px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Fix for ultra-wide screens */
@media screen and (min-width: 2560px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Ensure the background doesnt get cut off on any screen size */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* Override any conflicting background properties */
.hero {
    background-image: radial-gradient(circle farthest-corner at 50% 50%, transparent, var(--black)), 
                      url(../images/671faa50759666b100791a65_sqaure-p.svg), 
                      url(../images/671faa50759666b100791a69_affluent-academy_hero-wave-bg.jpg) !important;
}