.contact-header {
    background-image: url('/drupal/sites/default/files/2025-03/contactus-Hero-Section.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 476px; /* Changed fixed height to min-height */
    height: 50vh; /* Added viewport-relative height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: 'Roboto', sans-serif;
    padding: 1rem; /* Added padding for smaller screens */
    box-sizing: border-box;
}

.contact-heading {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: calc(2.5rem + 2vw); /* Responsive font size base + viewport scaling */
    color: #fff;
    margin-top: 4%;
    max-width: 90%; /* Prevent text from overflowing on small screens */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive breakpoints */
@media screen and (max-width: 1024px) {
    .contact-header {
        height: 45vh; /* Slightly smaller on medium screens */
    }
}

@media screen and (max-width: 768px) {
    .contact-header {
        height: 40vh; /* Smaller on tablets */
        min-height: 350px;
    }
}

@media screen and (max-width: 480px) {
    .contact-header {
        height: 35vh; /* Smaller on mobile */
        min-height: 250px;
    }
    
    .contact-heading {
        font-size: calc(1.8rem + 2vw); /* Smaller base size on mobile */
        margin-top: 0; /* Remove extra top margin on mobile */
    }
}