@media screen and (min-width: 992px) {

    /* Center the entire About section content group by narrowing containers */
    #about-us .container>.row {
        justify-content: center;
        flex-wrap: nowrap;
    }

    /* Left column (image container) - Tightened to fit portrait image aspect ratio */
    .about-img {
        flex: 0 0 28% !important;
        /* Narrowed from 40% to remove left-side void */
        max-width: 28% !important;
        position: relative;
        overflow: visible;
        padding-right: 0 !important;
        padding-left: 0 !important;
        display: flex;
        justify-content: flex-end;
    }

    .half-img {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 520px;
        /* Ensures vertical presence matches text block */
    }

    /* Image styling - Absolute position anchored to right for overlap */
    .half-img img {
        position: absolute;
        width: auto;
        height: 100%;
        max-width: none;
        right: -30px;
        /* Overlap distance into the text column */
        top: 0;
        object-fit: cover;
    }

    /* Gradient fade - Smoothes transition from image to white background */
    .half-img::after {
        content: "";
        position: absolute;
        top: 0;
        right: -30px;
        /* Match image offset */
        width: 200px;
        height: 100%;
        background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
    }

    /* Right column (content) - Sized to balance the visual weight */
    .about-content {
        flex: 0 0 52% !important;
        /* Balanced with the 28% image column */
        max-width: 52% !important;
        position: relative;
        z-index: 2;
        padding-left: 40px;
        /* Creates a clean gap from the image's overlap */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Styling for headings and text */
    .about-content .title,
    .about-content .about-para {
        color: #18212e;
        /* Matches main theme */
        position: relative;
        margin-left: 0;
    }

    /* Clean up broken pseudo-elements from previous iterations */
    .about-content .title::after,
    .about-content .about-para::after {
        content: none;
        display: none;
    }
}