.contact-hero-section {
    position: relative;
    height: 40vh;
    /* smaller height as requested */
    background: url('/assets/images/hero.jpg') center/cover no-repeat;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* black overlay with opacity */
}

.contact-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    letter-spacing: 1px;
}

.icon-circle {
    background-color: #d4ecff;
    /* your correct background color */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
    /* ✅ prevents circle from shrinking */
}