/* 1) Hero banner full-bleed */
.hero-banner {
    position: relative; /* so the form can position itself against this */
    width: 100%;
    overflow: hidden; /* hide any overflow if you tweak height */
}

    .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* 2) Form sits on top of the banner */
.page-content {
    position: absolute; /* position relative to the page (body) */
    /* if you’d rather have it relative to the .hero-banner, nest .page-content inside it */
    top: 40%; /* slide it up/down over the image—tweak to taste */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* above the image */

    width: 100%;
    max-width: 446px; /* match your other forms */
    margin: 0; /* no extra side-gutters */
}

/* 3) Give the white box full-width inside its wrapper */
.umbraco-forms-form .custom-form-container {
    width: 100% !important;
    max-width: 446px !important;
}

/* 4) Stretch the inputs edge-to-edge */
.umbraco-forms-form .custom-input-wrapper,
.umbraco-forms-form .custom-field-content input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 5) Stretch the submit button edge-to-edge too */
.umbraco-forms-form .custom-navigation input[type="submit"] {
    width: 394px !important;
    box-sizing: border-box !important;
}