/**
 * Hero Full Width Styles
 * Makes the hero background image span the full viewport width
 */

/* Hero section should span full width */
.hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Hero background image should be full width and positioned absolutely */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure the container stays centered for content */
.hero .container {
    position: relative;
    z-index: 1;
}