/* HERO SECTION STYLES */
.hero {
    background-image: url('/media/TownhallAndShedLandscape4.jpg'); /* Background image */
    background-size: cover; /* Ensure the image covers the full width and height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    position: relative; /* Allows layering for the overlay */
    height: auto; /* Dynamic height based on content */
    min-height: 40vh; /* Ensure a reasonable minimum height */
    width: 100%; /* Full-width section */
    color: white; /* Use the global variable for text color */
    display: flex; /* Enable flexbox */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

.hero::before {
    content: ''; /* Create an overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay for better readability */
    z-index: 1; /* Ensure the overlay is behind the text */
}

.hero-content {
    position: relative; /* Ensure content is above the overlay */
    z-index: 2; /* Bring the text above the blurred background */
    text-align: left; /* Align the text to the left */
    max-width: 600px; /* Optional: Limit text content width */
    margin: 0; /* Remove any margin offsets */
    width: 100%; /* Ensure the content spans enough space for centering */
}

.hero-content h1 {
    font-family: 'Lora', serif;
    font-size: 3rem; /* Larger heading */
}

.hero-content p {
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.25rem;
    line-height: 1.6;
}

/* MEDIA QUERY FOR SCREENS 768px AND BELOW */
@media (max-width: 768px) {
    .hero {
        background-image: url('/media/TownhallAndShedLandscapeMobile.jpg'); /* Mobile Background Image */
        background-size: cover; /* Keep it covering the full container */
        background-position: center; /* Center the new mobile image */
    }
}