/* ----------------------- */
/* changePassword.css      */
/* ----------------------- */

/* 1) Hero image full-bleed */
.hero-banner {
    position: relative; /* so we can absolutely position the form against it */
    width: 100%;
    overflow: hidden;
}

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

/* 2) Slide the form up over the hero */
.page-content {
    position: absolute;
    top: 50%; /* tweak this to move the form up/down */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* above the image */

    width: 100%;
    max-width: 446px; /* your form container width */
    margin: 0;
}

/* 3) White “outer box” fills its wrapper */
.umbraco-forms-form .custom-form-container {
    width: 100% !important;
    max-width: none !important;
}

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

/* 5) Button the same width, left-aligned under the inputs */
.umbraco-forms-form .custom-navigation input[type="submit"] {
    width: 378px !important; /* match your input width */
    align-self: flex-start !important; /* hug the left edge */
    margin-top: 16px !important; /* vertical gap */
    box-sizing: border-box !important;
}