.about-section {
    position: relative;
    margin-top: 150px;
    margin-bottom: 150px;
    /* No flex needed when you have a single block */
    padding: 0 20%;
    /* keep your site-wide padding */
    background-color: #ffffff;
    z-index: 0;
}

.about-left {
    width: 100%;
    /* fill the section’s inner width */
    background: linear-gradient(rgba(20,20,20,0.62), rgba(20,20,20,0.62)), url("/images/hero-client-services.jpg") center/cover no-repeat;
    padding: 72px 72px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* readable text width inside the card */
.about-left .about-text {
    max-width: 1250px;
    /* adjust 820–960 to taste */
    margin: 0 auto;
    /* center the text column */
}

.about-left h3 {
    font-size: var(--font-scale-sm);
    color: #4FC3F7;
    letter-spacing: 1px;
    margin-top: 24px;
    margin-bottom: 48px;
}

.about-left h2 {
    font-size: calc(var(--font-scale-lg) * 0.9);
    margin-bottom: 24px;
}

.about-left p {
    font-size: var(--font-scale-base);
    line-height: 1.65;
    margin-bottom: 24px;
    /* no extra padding-right that narrows the column */
}


/* =============== MOBILE / TABLET =============== */
@media (max-width: 992px) {
    .about-section {
        padding: 0;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    .about-left {
        padding: 48px 24px;
        border-radius: 0px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        background-position: center center;
        background-size: cover;
    }

    .about-left .about-text {
        max-width: 100%;
    }

    .about-left h3 {
        margin-top: 48px;
    }