/* Hero image overlay for home page */
.home .hero-overlay {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    height: auto;
    z-index: 20; /* Above carousel images, captions, and controls */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .home .hero-overlay {
        max-width: 70%;
    }
}

@media (max-width: 576px) {
    .home .hero-overlay {
        max-width: 80%;
    }
}


/* Hero image overlay for home page */
.hero-overlay {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    height: auto;
    z-index: 20; /* Above carousel images, captions, and controls */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hero-overlay {
        max-width: 70%;
    }
}

@media (max-width: 576px) {
    .hero-overlay {
        max-width: 80%;
    }
}/* Add your CSS code here.


/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */