body { text-align: center; margin: 0; background: #e6d6b8; color: black; font-family: 'Arial', sans-serif; line-height: 1.6; }
a, a:link, a:visited {
    color: #0090ab;
}
a:active {
    color:#000;
}
        .header-container { background: #3b4e9d; padding: 0; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* subtle drop shadow */ }

        .header-container > .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        



/* NAV */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0; /* slightly reduced vertical padding for tighter band */
    background: #3b4e9d;
    margin: 0;
}

/* LOGO */
.nav-logo img {
    height: 100px; /* full size on desktop */
    padding: 0;
    transition: height 0.3s ease; /* smooth transition */
}

/* NAV LINKS */
.nav-links {
    display: flex;
    gap: 1.5rem;
}




/* NAV LINK STYLING */
.nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

/* MOBILE RESPONSIVE TWEAKS */
/* @media (max-width: 768px) {
    .nav-logo img {
        height: 60px;
    }
    .nav-links {
        gap: 1rem;
    }
} */

@media (max-width: 768px) {
    .nav {
        align-items: center;
    }
    .menu-toggle {
        align-self: center; /* make sure button stays vertically centered */
    }
    .nav-logo img {
        height: 60px;
    }

    
    


}

        



        /* Responsive Navigation */
        /* .nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #3b4e9d; margin: 0; } */
        .nav-logo { display: flex; align-items: center; }
        /* .nav-logo img { height: 100px; padding: 5px; } */
        /* .nav-links { display: flex; gap: 1rem; } */
        /* .nav a { color: white; text-decoration: none; font-weight: bold; font-size: 1.1rem; } */
        .menu-toggle { display: none; font-size: 1.5rem; background: none; border: none; color: white; cursor: pointer; }
        
        @media (max-width: 768px) {
            .nav-links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; width: 100%; background: #3b4e9d; padding: 1rem; }
            .nav-links a { display: block; padding: 0.5rem 0; }
            .menu-toggle { align-self: center; display: block; margin-left: 0.5rem; }
            .nav {
                align-items: center;
            }
            .nav-logo img {
                height: 60px;
            }
        }
        
        /* Hero Section */
        .hero { padding: 6rem 1rem; background: #3b4e9d; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .hero h1 { margin-bottom: 1.5rem; font-size: 2.5rem; font-weight: bold; }
        .hero p { max-width: 600px; margin-bottom: 2rem; font-size: 1.2rem; }
        .cta { margin-top: 1rem; background: #c03431; color: white; border: none; padding: 12px 24px; font-size: 1.2rem; text-decoration: none; display: inline-block; border-radius: 10px; }
        .cta:hover { opacity: 0.9; }
        a.cta, a:link.cta, a:visited.cta { color: #fff; }
        a:active.cta { color: #000; }
        
        /* General Sections */
        .section { padding: 4rem 1.5rem; background: #e6d6b8; color: black; }
        .section h2 { color: black; font-size: 2rem; font-weight: bold; margin-bottom: 1rem; } 
        .section p, .section div { color: black; font-size: 1.1rem; }
        
        /* Three Column Grid */
        .grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; max-width: 1200px; margin: auto; }
        .grid div { flex: 1; min-width: 320px; max-width: 500px; padding: 2rem; text-align: center; }
        .grid p { max-width: 100%; margin: auto; }
        .grid p { max-width: 90%; margin: auto; }
        
        @media (max-width: 768px) { .grid { flex-wrap: wrap; justify-content: center; } .grid div { max-width: 90%; } }
        
        /* Button Styling */
        .button { margin-top: 2rem; border-radius: 10px; }
        
        /* Sponsors Section */
        .sponsors img { max-width: 100%; height: auto; max-height: 50px; margin: 0.5rem; }
        
        footer { padding: 1rem; background: #3b4e9d; color: white; text-align: center; }



        main {
            margin:0px 20px 50px 20px;
        }






/* Scope styles specifically to the association page */
main {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    text-align: left;
}

/* Styling for each section container */
main .container {
    padding: 20px;
    margin-bottom: 40px;
}

/* Headings inside the Association page */
main .container h1, 
main .container h2 {
    text-align: left;
    color: #3b4e9d;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Paragraph styling */
main .container p {
    font-size: 1.1rem;
    line-height: 1.6;
}




















/* Tables styling specific to association page */
#association-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#association-page th, 
#association-page td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px;
    text-align: left;
}

#association-page th {
    background-color: #3b4e9d;
    color: white;
    font-weight: bold;
}

#association-page tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}

#association-page tr:nth-child(odd) {
    background: rgba(255, 255, 255, .1);
}

/* Responsive Design */
@media (max-width: 768px) {
    #association-page {
        width: 95%;
        padding: 10px;
    }
    
    #association-page th, 
    #association-page td {
        padding: 8px;
        font-size: 14px;
    }
}








        


/* footer {
    background: #3b4e9d;
    color: white;
    padding: 40px 20px;
    text-align: left;
    border-top: 20px solid #c03431;
} */

/* Newsletter Section */
section.signup-section {
    margin:0;
}
.signup-section {
    background-color: #c03431;
    padding: 40px 20px;
    text-align: center;
    color: #fff;
}
.signup-container {
    max-width: 600px;
    margin: 0 auto;
}
.signup-container h2 {
    color: #fff;
    margin-bottom: 20px;
}
.signup-container p {
    color: #fff;
    margin-bottom: 30px;
}
.signup-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.signup-container input[type="email"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    background-color: white;
}
.signup-container button[type="submit"] {
    background-color: #0090ab;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}



/* membership table */
.membership-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.membership-table th, .membership-table td {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Matching border to the header */
    text-align: left;
}

.membership-table th {
    background-color: #3b4e9d;
    color: white;
}

.membership-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03); /* Light but distinct alternate row color */
}

.membership-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, .1); /* Site background color for odd rows */
}