/**********************************************************************************************
* OntarioTECK VBA Developers
* Developed by Gustavo Miller

* Date created : 2026-04-16 12:50:02.0670925
* Type Document: Cascade Styling Sheet (CSS)
*
* Filename: \css\about.css
**********************************************************************************************/

/********** Amy Jo Image section **********/
.image-box {
    display: flex;
    justify-content: center;
}

    .image-box img {
        width: 85%;
        height: auto;
    }

/********** Contact Me Section  **********/
.contact {
    background-color: #ffffff;
    padding: 60px 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

    .contact .contact-title {
        margin-bottom: 30px;
    }

/* ==============================
   Page Layout
   ============================== */

.about-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    min-height: 550px;
}

/* LEFT COLUMN */
.left-column {
    flex: 2; /* ✅ replaces fixed 40vw */
    min-width: 0; /* ✅ prevents overflow */
    display: flex;
    flex-direction: column;
}

/* LEFT ROWS */
.left-row {
    padding: 16px;
    flex: 0 0 auto;
}

.top-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* RIGHT COLUMN */
.right-column {
    flex: 1; /* ✅ image column */
    display: flex;
}

/* IMAGE */
.image-box {
    flex: 1;
}

    .image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 6px;
    }

/* ==============================
   Mobile Responsiveness
   ============================== */

@media (max-width: 768px) {

    .about-layout {
        flex-direction: column;
    }

    .right-column {
        order: -1; /* ✅ image moves to top */
    }

    .image-box img {
        height: auto; /* ✅ prevents image stretching */
        max-height: 420px;
        object-fit: cover;
    }

    .left-row {
        padding: 12px;
    }
}