body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.hero {
    background-color: #5a8d48; /* Dark Green */
    color: white;
    padding: 50px 0;
    text-align: center;
}

.intro, .maps {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.map-group {
    margin-bottom: 20px;
}

.maps a {
    display: block;
    margin: 10px 0;
    padding: 10px 15px;
    background-color: #5a8d48; /* Dark Green */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.maps a:hover {
    background-color: #48703f; /* Slightly Darker Green */
}


.data-sources {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #f9f9f9; /* Light gray background for contrast */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.data-sources h2 {
    border-bottom: 2px solid #5a8d48; /* Dark Green line */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.data-sources h3 {
    margin-top: 20px;
    color: #5a8d48; /* Dark Green for emphasis */
}

.data-sources p {
    line-height: 1.6; /* Increased line height for readability */
    margin-bottom: 20px;
}

.data-sources h3 a {
    color: inherit; /* Use the color of the parent element (h3) */
    text-decoration: none; /* Remove the underline */
    display: inline-block; /* Make the link an inline-block to occupy full width of its content */
}

.data-sources h3 a:hover {
    text-decoration: underline; /* Optional: underline on hover for better UX */
}

footer {
    background-color: #5a8d48; /* Dark Green */
    color: white;
    padding: 20px 0;
    text-align: center;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

footer a {
    color: #fff;
    text-decoration: underline;
}

footer a:hover {
    color: #e5e5e5;
}