/* --- Hero Banner --- */
.hero-banner {
    /* Multi-background: A subtle blue gradient overlay on top, followed by your office image */
    background: 
        linear-gradient(to right, rgba(29, 123, 162, 0.15), rgba(41, 156, 201, 0.15)), 
        url('../images/blue_client_in_office.png');
    
    /* Ensures the image covers the background area beautifully */
    background-size: cover;
    
    /* Controls the vertical offset: 'center' horizontally, '40%' down from the top vertically.
       Adjust the '40%' value up or down to shift your image exactly where you want it. */
    background-position: center 40%;
    
    background-repeat: no-repeat;
    color: #ffffff;
    
    /* Reduced vertical padding (from 40px down to 22px) makes the banner noticeably narrower */
    padding: 22px 0; 
    margin-bottom: 50px;
}

.hero-banner h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}