.mast-background {
    position: relative;
    height: 550px;
    z-index: 1;
    overflow: hidden;
}

.mast-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/Healthcare-Background-image-2.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Gradient overlay */
.mast-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-image: url("../images/Healthcare-Background-image.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1; /* initial dim */
    transition: opacity 1.5s ease-in-out;
}

    .mast-background:hover::after {
        opacity: 0; /* removes dim overlay on hover */
    }
 
@media (min-width: 600px) and (max-width: 1024px) {
    .mast-background {
        height: 300px;
    }
}
/* Move blocks further left and shrink more on extra small screens */
@media (max-width: 600px) {
    .mast-background {
        height: 200px;
    }
}