#parksTitle {
    color: #4c7b3c; /* A deep, earthy green color */
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.1); /* Soft shadow for a natural look */
    padding-top: 40px;
    font-family: "Bruno Ace SC";
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    background: linear-gradient(45deg, #6f9e3a, #8dcd5b, #f1e1b3); /* Green gradient with a hint of earth tones */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    width: 90%;
}


.greenAreas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* Space out items evenly */
    gap: 20px; /* Space between the items */
    padding: 50px;
    border-radius: 15px; /* Soft rounded edges for a luxurious feel */
    margin: 0 auto;
}


.parks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* Space out items evenly */
    gap: 20px; /* Space between the items */
    padding: 50px;
    border-radius: 15px; /* Soft rounded edges for a luxurious feel */
    margin: 0 auto;

}

/* Sub-divs (child elements) */
.park {
    background: linear-gradient(45deg, #6d8c4d, #c7d0a6); /* Green gradient for a natural feel */
    padding: 15px;
    margin: 10px;
    width: 280px;
    height: 280px;
    border-radius: 12px; /* Rounded corners to evoke nature */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow to mimic sunlight filtering through trees */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease; /* Smooth hover effect */
    color: #5b3a29;
}

/* Hover effect: simulating natural movement */
.park:hover {
    background: linear-gradient(45deg, #a8b35d, #b7c97a); /* Slightly lighter green for interaction */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for depth */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Example of adding a leaf texture as background image */
.park::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/leafy.png'); /* Leaf texture background */
    opacity: 0.1;
    border-radius: 12px; /* Matching the border radius */
    z-index: -1; /* Place the texture behind the content */
}

/* Add small images or icons for a more specific nature look */
.park img {
    max-width: 40px;
    margin-bottom: 10px;
}


/* Set the background color of the entire HTML page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #d8c8b2; /* Soft sandy beige */
    background: linear-gradient(45deg, #d8c8b2, #bfae6b, #a89f91); /* Soft beige, warm taupe, and muted brown */
    background-size: 400% 400%; /* Make the gradient larger to create movement */
    animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation */
    cursor: black;
}

/* Keyframes for the background gradient animation */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Optional: Add a subtle leaf texture or wood texture as a background */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/leafy.png'); /* Leaf texture */
    opacity: 0.05; /* Very subtle texture */
    z-index: -1; /* Place texture behind the content */
}


#parks-subTitle{
    width: 90%;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    font-family: "Bruno Ace SC", sans-serif;
    color: #5b3a29;
}


.overlay {
            position: fixed; /* Stays in place even when scrolling */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9); /* White with 90% opacity */
            display: flex; /* Use flexbox for easy centering */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            z-index: 999; /* Ensure it's on top of everything else */
            text-align: center;
        }

        .overlay-content {
            font-size: 4em; /* Large text size */
            color: #333; /* Dark gray text */
            font-weight: bold;
            padding: 20px;
            background-color: #f0f0f0; /* Light background for the text box */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }