.section-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.column {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-column {
    background-color: rgb(0, 50, 125);
    color: rgb(248, 247, 242);
}

.right-column {
    background-color: rgb(248, 247, 242);
    color: rgb(0, 50, 125);
}

.column-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    position: absolute;
    top: 25%;
    text-align: center;
    width: 60%;
}

.row-container {
    margin-top: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 60%;
    text-align: center;
}

.row {
    border-radius: 40px;
    padding: 1.5rem;
    font-family: 'Glacial', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    text-align: center;
    justify-content: center;
}

.row:hover {
    transform: scale(1.03);
    text-decoration: underline;
}

/* Row colors */
.left-column .row {
    background-color: rgb(248, 247, 242);
    color: rgb(0, 50, 125);
}

.right-column .row {
    background-color: rgb(0, 50, 125);
    color: rgb(248, 247, 242);
}

/* Responsive */
@media (max-width: 1200px) {

    .column-heading {
    font-size: 2rem;
    }

    .row-container {
        margin-top: 2rem;
        width: 70%;
        margin-top: 50%;
    }
}


/* ======================= SECTION 2: TESTS ======================= */
.test-section {
    padding: 6rem 2rem;
    text-align: center;
    background-color: rgb(248, 247, 242);
    height: 100vh;
    text-align: center;

    display: flex;                  /* make it flex container */
    flex-direction: column;         /* stack heading and text vertically */
    justify-content: center;        /* vertical centering */
    align-items: center;            /* horizontal centering */
    padding: 0 2rem;                /* horizontal padding only */
    
}

.sec-1-2, .sec-2-2{
    background-color: rgb(232, 239, 203);
}

.sec-1-3, .sec-2-3{
    background-color: rgb(231, 207, 207);
}

.test-section .impact-heading {
    font-size: 3.5rem;
    color: rgb(0,50,125);
    margin: 3rem auto 3rem auto;
    width: 60%;
    align-items: center;
    text-align: center;
}

.test-text-box {
    width: 60%;
    margin: 0 auto;
    color: #222;
    text-align: justify;
    font-family: 'Aileron', sans-serif;
    font-size: 1.2rem;
    line-height: 1.7;
}


.button-row {
    width: 100%;
    display: flex;
    justify-content: center; /* centers the button horizontally */
}

/* REGISTER BUTTON */
.register-btn {
    font-family: 'Aileron', sans-serif;
    font-size: 1.1rem;
    padding: 1.2rem 5rem;
    border: none;
    border-radius: 40px;
    background-color: rgb(0, 53, 122);
    color: white;
    cursor: pointer;
    align-self: center;
    font-weight: bold;
    transition: transform 0.25s ease, box-shadow 0.25s ease, text-decoration 0.25s ease;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.register-btn:hover {
    transform: scale(1.07);
    text-decoration: underline;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 1200px) {

    .test-text-box {
    width: 80%;
    font-size: 0.8rem;
    }

    
.test-section .impact-heading {
    font-size: 2.5rem;
    }
}

/* ======================= MOBILE STACKING ======================= */
@media (max-width: 1000px) {
    /* Stack the main columns vertically */
    .section-container {
        flex-direction: column;
        height: auto; /* let content define height instead of 100vh */
        margin-top: 6rem;
    }

    /* Headings positioning */
    .column-heading {
        position: relative;
        top: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 90%;        /* wider on mobile */
        font-size: 2.2rem; /* smaller heading */
    }

    /* Row container adjustments */
    .row-container {
        margin: 0 auto;
        width: 100%;         /* nearly full width on mobile */
        flex-direction: column;
        gap: 1rem;
        display: flex;
        
        margin-bottom: 10%;
        align-items: center;
    }

    /* Make rows full width and properly centered */
    .row {
        text-align: center;
        width: clamp(200px, 90vw, 400px);
    }

    /* Test section adjustments */
    .test-section {
        height: auto;       /* let content expand naturally */
        padding: 4rem 1.5rem;
    }

    .test-section .impact-heading {
        width: 95%;          /* nearly full width */
        font-size: 2.2rem;   /* smaller for mobile */
        margin: 2rem auto;   
    }

    .test-text-box {
        width: 95%;          /* full width for text */
        font-size: 1rem;     /* slightly smaller text */
    }

    .button-row {
        flex-direction: column;
        justify-content: center;    /* center along main axis */
        align-items: center;
    }

    .register-btn {
        width: 100%;          /* full width button on mobile */
        padding: 1rem 2rem;
        margin-top: 3rem;
    }
}