/* Mobile & Tablet Styles (Screens narrower than 992px) */
@media screen and (max-width: 992px) {

    /* Enable normal page scrolling for mobile view */
    html, body {
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f4f6f8;
    }

    /* Convert main wrapper from full-screen overlay to a stacked column */
    .hero-wrapper {
        width: 100%;
        height: auto;
        min-height: unset;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        
        /* Remove desktop background image */
        background: none !important;
    }

    /* Create Section 1: Top Banner Image */
    .hero-wrapper::before {
        content: "";
        display: block;
        width: 100%;
        /* Maintains correct aspect ratio so full graphic is visible */
        aspect-ratio: 16 / 9; 
        background: url('../images/banner-image.png') center top / contain no-repeat;
        background-color: #f4efea; /* Fills empty space with matching image tone */
    }

    /* Create Section 2: Form Container sitting directly below the image */
    .form-overlay {
        width: 100%;
        max-width: 100%;
        padding: 20px 15px 40px 15px;
        background-color: #f4f6f8; /* Clean background for form section */
        margin-top: 0;
    }

    .form-card {
        max-width: 480px;
        margin: 0 auto;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
    }
}

/* Fine-tuning for small mobile screens */
@media screen and (max-width: 480px) {
    .hero-wrapper::before {
        aspect-ratio: 4 / 3; /* Gives slightly more vertical height to the image on small phones */
    }

    .form-card {
        padding: 20px 16px;
    }
}