body {
    background-image: url('../IMG_4353.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative; /* Ensure the pseudo-element is positioned relative to the body */
    z-index: 0; /* Default stacking context for the background */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 128, 0, 0.25); /* Faint green overlay */
    z-index: -1; /* Place it above the background but below content */
    pointer-events: none; /* Ensure it doesn't interfere with user interactions */
}

div, h1, h2, h4, .slideshow-container {
    position: relative; /* Ensure content is above the overlay */
    z-index: 1; /* Place content above the overlay */
}

@media screen and (max-width: 1000px) {
    body {
        background-image: none;
    }

    body::before {
        background-color: transparent; /* Remove overlay for smaller screens */
    }
}