.about-hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;

    /* Background image with fade overlay */
    background: 
        linear-gradient(
            to right, 
            rgba(0,0,0,0.4) 100%,   /* dark overlay left */
            rgba(0,0,0,0.3) 100%,  /* softer overlay center */
            rgba(0,0,0,0) 100%    /* transparent right */
        ),
        url('../img/w1.jpg') center/cover no-repeat;
    background-blend-mode: overlay; /* optional, makes gradient blend better */
}

/* ===== FOOTER ===== */
.footer {
    background: #111;
    color: #ccc;
    text-align: center;
    padding: clamp(10px, 2vw, 20px) 0; /* responsive padding */
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}