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

    /* Left column (image container) */
    .about-img {
        position: relative;
        overflow: visible; /* Let image spill out */
    }

    .half-img {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Image styling */
    .half-img img {
        position: absolute;
        width: auto;
        height: 100%;
        max-width: none;
        right: -100px; /* Overlap distance (e.g., 150px) */
        object-fit: cover;
    }

    /* Gradient fade - NOW ANCHORED TO THE IMAGE'S EDGE */
    .half-img::after {
        content: "";
        position: absolute;
        top: 0;
        right: -100px; /* Match image's right: -150px */
        width: 300px; /* Gradient width (adjust for smoothness) */
        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) */
    .about-content {
        position: relative;
        z-index: 2;
    }

    /* Target ONLY the text in the right column */
    .about-content .title,
    .about-content .about-para {
        /* 1. Set a fallback color (visible outside overlap) */
        color: #000; /* Default text color (adjust as needed) */

        /* 2. Apply gradient ONLY to the overlapping 150px */
        position: relative;
    }

    /* Gradient overlay for the overlapping part */
    .about-content .title::after,
    .about-content .about-para::after {
        content: attr(data-text); /* Dynamic text (optional) */
        position: absolute;
        top: 0;
        left: 0;
        width: 100px; /* Match overlap distance */
        height: 100%;
        background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        z-index: 4; /* Above original text */
        pointer-events: none;
    }
}