/* --- Global Resets & Body Styles --- */
body, h1, p, ul {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* This is the key CSS line for smooth anchor scrolling */
    scroll-behavior: smooth; 
}

main {
    flex: 1;
}

/* Add padding to the sections so the content is visible when scrolled to */
section {
    padding: 80px 20px 20px; /* Add extra padding to the top so the fixed navbar doesn't hide the H2 */
    margin-bottom: 20px;
}

/* --- BANNER AND NAVIGATION STYLES (Same as before) --- */
.banner {
    background-color: #75c9f0;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(24, 207, 17, 0.1);
}

.navbar {
    background-color: #f4f4f4;
    padding: 10px 0;
    /* Optional: Make the menu stick to the top as you scroll */
    position: sticky; 
    top: 0;
    z-index: 10; /* Ensures the menu is above other content */
}

.nav-list {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

.nav-list li {
    margin: 0 5px;
}

.nav-button {
    display: block;
    color: white;
    background-color: #007bff91;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-button:hover {
    background-color: #92cc26;
}

/* --- FOOTER STYLES --- */
footer {
    background-color: #428072;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin-top: auto;
}

.footer-link {
    color: #007bff;
    text-decoration: none;
}