@media (max-width: 768px) {

    /* =================================
       Form Container & Padding (Makes fields "big")
    ================================= */
    .registration {
        padding: 20px 0 0 0 !important; /* Remove all padding */
    }

    .wizard-container {
        width: 100% !important;
        max-width: 100% !important; /* Override desktop max-width */
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important; /* Remove rounded corners for edge-to-edge */
    }

    .wizard-header {
        padding: 25px 15px !important;
        border-radius: 0 !important; /* Remove rounded corners */
    }
    
    .wizard-header h1 {
        font-size: 1.8rem !important;
    }

    .form-container {
        padding: 25px 15px !important; /* Reduce internal padding to make fields wider */
    }

    /* =================================
       Progress Bar (Forces Horizontal)
    ================================= */
    .progress-bar {
        flex-direction: row !important ; /* FORCE horizontal */
        justify-content: space-between !important;
        gap: 5px !important; /* Add a small gap */
        align-items: flex-start !important ; /* Override center alignment */
        padding: 20px 15px !important; /* Reduce padding */
    }

    .progress-step {
        flex: 1 !important ; /* Make all steps share space equally */
        text-align: center !important;
        max-width: none !important ; 
        width: auto !important ; /* Let flexbox handle it */
    }

    /* HIDE the text labels, keep only the numbers */
    .step-label {
        display: none !important; 
    }

    .step-number {
        margin: 0 auto !important ; /* Center the number circle */
    }

    /* Hide the connector lines */
    .progress-step:not(:last-child):after {
        display: none !important ;
    }

    /* =================================
       Other Form Fixes
    ================================= */

    .section-title {
        font-size: 1.3rem !important; /* Reduce title size */
    }

    /* Stack form-row elements vertically */
    .form-row {
        flex-direction: column !important ;
        gap: 0 !important ;
        margin-bottom: 0 !important ;
    }

    .form-row .form-group {
        margin-bottom: 20px !important ;
    }

    /* File Upload */
    .file-upload p {
        font-size: 0.9rem !important;
    }

    .file-types {
        font-size: 0.8rem !important ;
    }

    /* Terms & Conditions Checkbox */
    #section4 .form-group div {
        align-items: flex-start !important ;
    }

    #section4 .form-group div input[type="checkbox"] {
        margin-top: 2px !important ;
    }

    #section4 .form-group div label {
        flex: 1 !important; /* Allow label to wrap */
    }

    /* Navigation Buttons */
    .navigation-buttons {
        flex-direction: column-reverse !important; /* Puts "Next/Submit" on top */
        gap: 15px !important;
    }

    .navigation-buttons .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Fix for the first step's "Next" button */
    #section1 .navigation-buttons {
        flex-direction: column !important;
    }
}