/* =========================================================
   1. GLOBAL / RESET
========================================================= */

:root{
    --blue:#1a4388;
    --dark-blue:#1b365d;
    --purple:#434f98;
    --light-blue:#0c9fda;
    --gold:#d4af37;
    --text:#222;
    --muted:#555;
    --white:#fff;
    --card-shadow:0 10px 30px rgba(0,0,0,.08);
    --card-shadow-hover:0 20px 40px rgba(0,0,0,.12);
    --radius:18px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    height:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    margin:0;

    display:flex;
    flex-direction:column;

    font-family:"Source Sans 3", sans-serif;
    line-height:1.5;
    color:var(--text);
    background:#fff;
}

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:url("images/background.webp") center center / cover no-repeat;
    opacity:.2;

    z-index:-1;
    pointer-events:none;
}

button{
    font:inherit;
}

main,
.main{
    flex:1 0 auto;
}

/* =========================================================
   2. SHARED LAYOUT
========================================================= */

.container{
    width:100%;
    max-width:1600px;
    height:100%;
    margin:0 auto;

    display:flex;
    align-items:center;
}

.content-container{
    width:100%;
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
}

.content-container h2{
    color:var(--dark-blue);
}

.page-section{
    padding:0;
}

.section-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:70px;
    align-items:center;
}

.section-image img{
    display:block;
    width:100%;
    border-radius:var(--radius);
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.section-text h2{
    margin-bottom:25px;
    color:var(--dark-blue);
    font-size:2rem;
}

.section-text p,
.section-text ul,
.section-text ol{
    margin-bottom:18px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.8;
}

.intro-text{
    margin-bottom:40px;
    color:var(--muted);
    font-size:1.05rem;
    line-height:1.6;
    text-align:center;
}

.centered-image{
    margin-top:60px;
    text-align:center;
}

.centered-image img{
    display:inline-block;
    width:900px;
    max-width:100%;
}

.partners-image{
    display:block;
    width:auto;
    max-width:100%;
    height:500px;
    margin:0 auto;
}

/* =========================================================
   3. HEADER / NAVIGATION
========================================================= */

.header{
    height:90px;
    background:var(--blue);
}

.logo{
    flex-shrink:0;
    margin-left:20px;
    margin-right:35px;
}

.logo img{
    display:block;
    height:72px;
}

.nav{
    flex:1;
    min-width:0;

    display:flex;
    justify-content:center;
    align-items:center;
}

.nav > a,
.nav-item > button{
    height:90px;
    padding:0 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    background:none;
    color:var(--white);

    font-family:inherit;
    font-size:17px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;

    cursor:pointer;
    transition:background .2s ease;
}

.nav > a,
.nav-item{
    flex-shrink:0;
}

.nav-item{
    position:relative;
}

.nav-item span{
    margin-left:4px;
    font-size:10px;
    font-weight:400;
    opacity:.8;

    transition:transform .2s ease;
}

.nav > a:hover,
.nav-item > button:hover,
.mega-menu a:hover{
    background:var(--light-blue);
}


/* =========================================================
   DROPDOWN
========================================================= */

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    z-index:1000;

    min-width:290px;

    overflow:hidden;

    background:var(--blue);
    box-shadow:0 10px 25px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;
    transform:translateX(-50%);

    transition:.2s ease;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu{
    opacity:1;
    visibility:visible;
}

.mega-menu a{
    display:block;
    padding:10px 20px;

    color:var(--white);
    font-size:16px;
    font-weight:600;
    text-align:center;
    text-decoration:none;

    border-bottom:1px solid rgba(255,255,255,.15);

    transition:background .2s ease;
}

.mega-menu a:last-child{
    border-bottom:none;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle{
    display:none;

    border:0;
    background:transparent;

    color:var(--white);

    cursor:pointer;

    z-index:1100;
}

.hamburger-icon{
    display:block;

    color:var(--white);

    font-size:28px;
    line-height:1;
}

.overflow-panel{
    display:none;
}

@media (min-width:769px){
    .header .container{
        position:relative;
    }

    .header.has-overflow .menu-toggle{
        position:absolute;
        top:50%;
        right:15px;
        transform:translateY(-50%);
        display:flex;
        align-items:center;
        justify-content:center;
        width:45px;
        height:45px;
        padding:0;
        flex-shrink:0;
    }

    .header.has-overflow .nav{
        margin-right:60px;
    }

    .nav.has-overflow{
        min-width:0;
        justify-content:flex-start;
        overflow:hidden;
    }

    .nav.has-overflow > .is-overflowed{
        display:none;
    }

    .nav.has-overflow ~ .overflow-panel{
        position:absolute;
        top:100%;
        right:0;
        z-index:1000;
        display:none;
        min-width:290px;
        background:var(--blue);
        box-shadow:0 10px 25px rgba(0,0,0,.18);
    }

    .nav.has-overflow ~ .overflow-panel.active{
        display:block;
    }

    .overflow-nav .nav-item > button,
    .overflow-nav > a{
        width:100%;
        min-height:52px;
        padding:14px 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border:0;
        background:none;
        color:var(--white);
        font-family:inherit;
        font-size:16px;
        font-weight:600;
        line-height:1.5;
        text-decoration:none;
        text-align:left;
        cursor:pointer;
    }

    .overflow-nav .mega-menu{
        position:static;
        display:block;
        min-width:0;
        transform:none;
        background:rgba(0,0,0,.12);
        box-shadow:none;
        opacity:1;
        visibility:visible;
    }

    .overflow-nav .mega-menu a{
        padding:12px 20px 12px 42px;
        text-align:left;
    }
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width:768px){

    .header{
        height:75px;
    }

    .header .container{
        position:relative;

        width:100%;
        height:75px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 15px;
    }


    /* -------------------------
       CENTERED LOGO
    ------------------------- */

    .logo{
        position:absolute;

        left:50%;
        top:50%;

        transform:translate(-50%, -50%);

        margin:0;

        display:flex;
        align-items:center;
        justify-content:center;

        z-index:1;
    }

    .logo img{
        display:block;

        width:min(240px, calc(100vw - 90px));
        height:auto;

        max-width:none;
        max-height:60px;
    }


    /* -------------------------
       HAMBURGER
    ------------------------- */

    .menu-toggle{
        position:absolute;

        right:15px;
        top:50%;

        transform:translateY(-50%);

        display:flex;
        align-items:center;
        justify-content:center;

        width:45px;
        height:45px;

        padding:0;

        z-index:10;
    }


    /* -------------------------
       MOBILE NAV
    ------------------------- */

    .nav{
        display:none;

        position:absolute;

        top:75px;
        left:0;

        width:100%;

        flex-direction:column;
        align-items:stretch;

        padding:8px 0;

        background:var(--blue);

        box-shadow:0 10px 25px rgba(0,0,0,.18);

        z-index:1000;
    }

    .nav.active{
        display:flex;
    }


    /* -------------------------
       MAIN LINKS
    ------------------------- */

    .nav > a,
    .nav-item > button{
        width:100%;
        height:auto;

        min-height:52px;

        padding:14px 22px;

        display:flex;
        align-items:center;

        font-size:17px;
        text-align:left;
    }

    .nav > a{
        justify-content:flex-start;
    }

    .nav-item > button{
        justify-content:space-between;
    }


    .nav-item{
        width:100%;
    }


    /* -------------------------
       DROPDOWN ARROW
    ------------------------- */

    .nav-item span{
        margin-left:auto;

        font-size:11px;

        transition:transform .2s ease;
    }

    .nav-item.active > button span{
        transform:rotate(180deg);
    }


    /* -------------------------
       MOBILE DROPDOWN
    ------------------------- */

    .mega-menu{
        position:static;

        width:100%;
        min-width:0;

        display:none;

        transform:none;

        background:rgba(0,0,0,.12);

        box-shadow:none;

        opacity:1;
        visibility:visible;
    }

    .nav-item.active .mega-menu{
        display:block;
    }

    .mega-menu a{
        padding:13px 22px 13px 42px;

        font-size:15px;
        font-weight:400;

        text-align:left;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:480px){

    .header{
        height:70px;
    }

    .header .container{
        height:70px;
    }

    .menu-toggle{
        right:10px;

        width:42px;
        height:42px;
    }

    .hamburger-icon{
        font-size:27px;
    }

    .nav{
        top:70px;
    }

}

/* =========================================================
   4. FOOTER
========================================================= */

.footer{
    flex-shrink:0;
    margin-top:15px;
    padding:20px;
    background:var(--blue);
}

.footer-container{
    max-width:1200px;
    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.socials{
    display:flex;
    gap:18px;
}

.socials a{
    color:var(--white);
    font-size:26px;
    text-decoration:none;
    transition:.2s ease;
}

.socials a:hover{
    opacity:.75;
    transform:translateY(-2px);
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:22px;
}

.footer-links a{
    color:var(--white);
    font-size:16px;
    font-weight:600;
    text-decoration:none;
}

.footer-links a:hover{
    opacity:.8;
}

/* =========================================================
   5. SHARED BUTTONS
========================================================= */

.button-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:25px 0 50px;
}

.pill-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 32px;

    border-radius:999px;
    background:var(--blue);
    color:var(--white);

    font-weight:700;
    text-decoration:none;

    transition:all .3s ease;
}

.pill-btn:hover{
    background:var(--light-blue);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transform:translateY(-2px);
}

.pill-btn i{
    transition:transform .3s ease;
}

.pill-btn:hover i{
    transform:translateX(4px);
}

/* =========================================================
   6. CONTACT PAGE
========================================================= */

.contact-section{
    max-width:1400px;
    margin:80px auto;
    padding:0 40px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:60px;
    align-items:center;
}

.contact-image{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.contact-image img{
    display:block;
    width:100%;
    height:700px;
    object-fit:cover;
}

.contact-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.35);
}

.contact-overlay h1{
    color:var(--white);
    font-size:56px;
    font-weight:700;
    text-align:center;
}

.contact-content{
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.contact-text h2{
    margin-bottom:20px;
    color:var(--purple);
    font-size:42px;
}

.contact-text p{
    margin-bottom:50px;
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
}

.contact-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:50px;
}

.contact-gallery img{
    width:100%;
    aspect-ratio:993 / 463;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:.25s ease;
}

.contact-gallery img:hover{
    transform:scale(1.6);
}

.contact-socials{
    display:flex;
    gap:20px;
}

.contact-socials a{
    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:#1A4388;
    color:var(--white);

    font-size:24px;
    text-decoration:none;

    transition:.25s;
}

.contact-socials a:hover{
    background:var(--light-blue);
}

.copy-message{
    position:fixed;
    right:30px;
    bottom:30px;
    z-index:9999;

    padding:12px 20px;

    border-radius:8px;
    background:var(--purple);
    color:var(--white);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* =========================================================
   7. PAGE BANNER
========================================================= */

.banner{
    width:100%;
    padding:40px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.banner h1{
    padding:12px 30px;

    color:#1B365D;
    font-size:2rem;
    font-weight:700;
    text-align:center;
}

/* =========================================================
   8. EXECUTIVE BOARD
========================================================= */

.member-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:35px 25px;
}

.member-card{
    min-height:220px;
    display:flex;
    align-items:stretch;
}

.member-card.full-width-center{
    grid-column:1 / -1;
    justify-self:center;
    width:100%;
    max-width:535px;
}

.image-side{
    position:relative;
    z-index:2;
    width:200px;
    flex-shrink:0;
}

.rotated-bg{
    position:absolute;
    inset:0;
    z-index:1;

    border-radius:25px;
    background:var(--light-blue);
    transform:rotate(-4deg);
}

.image-box{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:2px solid var(--light-blue);
    border-radius:22px;
    background:#e2e8f0;
}

.image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.image-placeholder{
    padding:10px;
    color:#64748b;
    font-size:.95rem;
    font-weight:700;
    text-align:center;
}

.text-side{
    position:relative;
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    margin-left:-15px;
    padding:20px 20px 20px 30px;

    border-radius:0 20px 20px 0;
    background:#dbeafe;
}

.text-side::after{
    content:"";
    position:absolute;
    top:15px;
    right:15px;

    width:0;
    height:0;

    border-style:solid;
    border-width:0 20px 20px 0;
    border-color:transparent var(--light-blue) transparent transparent;
    opacity:.8;
}

.member-name{
    margin-bottom:8px;
    color:#1e3a8a;
    font-size:1.25rem;
    font-weight:700;
}

.member-role{
    margin-bottom:15px;
    color:#334155;
    font-size:.95rem;
    line-height:1.5;
}

.member-contact{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.email-copy{
    width:fit-content;

    color:var(--light-blue);
    font-size:.9rem;
    font-weight:600;

    cursor:pointer;
    transition:.2s;
}

.email-copy:hover{
    color:#0879a7;
    text-decoration:underline;
}

/* =========================================================
   9. HOMEPAGE HERO
========================================================= */

.hero{
    position:relative;
    width:100%;
    height:40vh;
    min-height:500px;
    overflow:hidden;
}

.hero img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:cover;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.hero-overlay{
    position:relative;
    z-index:1;

    width:100%;
    height:100%;
    padding:2rem;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    color:var(--white);
    text-align:center;
}

.hero-overlay h1{
    margin-bottom:1rem;
    font-size:clamp(2.5rem,6vw,5rem);
}

.hero-overlay p{
    max-width:700px;
    margin-bottom:2rem;
    font-size:1.6rem;
    line-height:1.6;
}

/* Homepage EYP video section */

.eyp-intro .content-container{
    max-width:1600px;
}

.eyp-intro .section-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:80px;
    align-items:center;
}

.eyp-section{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.eyp-video{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.eyp-video iframe{
    width:100%;
    max-width:700px;
    aspect-ratio:16 / 9;

    border:0;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}

/* =========================================================
   10. EVENTS
========================================================= */

.events{
    padding:25px 0;
    background:#448DD4;
}

.section-header{
    margin-bottom:60px;
    text-align:center;
}

.section-header h2{
    margin-bottom:15px;
    color:var(--white);
    font-size:2.3rem;
}

.section-header p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.7;
}

.event-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}

.event-card{
    overflow:hidden;
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--card-shadow);
    transition:.3s;
}

.event-card:hover{
    box-shadow:var(--card-shadow-hover);
    transform:translateY(-8px);
}

.event-card img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
}

.event-content{
    padding:30px;
}

.event-date{
    display:inline-block;
    margin-bottom:15px;
    padding:6px 14px;

    border-radius:20px;
    background:var(--dark-blue);
    color:var(--white);

    font-size:.9rem;
}

.event-content h3{
    margin:0 0 12px;
    color:var(--dark-blue);
}

.event-location{
    margin-bottom:15px;
    color:#888;
    font-weight:600;
}

/* =========================================================
   11. PARTICIPATION / JOIN SECTION
========================================================= */

.join-section{
    padding:25px 0;
}

.join-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
}

.join-card{
    flex:0 1 320px;
    max-width:320px;
    min-height:300px;

    display:flex;
    flex-direction:column;

    padding:35px 30px;

    border-radius:var(--radius);
    background:var(--white);
    color:inherit;
    text-align:center;
    text-decoration:none;

    box-shadow:var(--card-shadow);
    transition:.3s;
}

.join-card:hover{
    box-shadow:var(--card-shadow-hover);
    transform:translateY(-8px);
}

.join-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:var(--dark-blue);
    color:var(--white);
    font-size:2rem;

    transition:.3s;
}

.join-card:hover .join-icon{
    background:var(--gold);
    color:var(--dark-blue);
}

.join-card h3{
    margin-bottom:15px;
    color:var(--dark-blue);
}

.join-card p{
    margin-bottom:25px;
    color:#666;
    line-height:1.7;
}

.join-card span{
    margin-top:auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    color:var(--dark-blue);
    font-weight:600;
}

.join-card:hover span{
    color:var(--gold);
}

.join-card:hover .fa-arrow-right{
    transform:translateX(4px);
}

.fa-arrow-right{
    transition:.3s;
}

/* =========================================================
   12. INFORMATION CARDS
========================================================= */

.card-section{
    padding:20px 0;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
    max-width:1200px;
    margin:0 auto;
}

.info-card{
    width:100%;
    max-width:360px;
    justify-self:center;

    overflow:hidden;
    background:var(--white);
    border-radius:var(--radius);
    text-align:center;

    box-shadow:var(--card-shadow);
    transition:.3s;
}

.info-card:hover{
    box-shadow:var(--card-shadow-hover);
    transform:translateY(-8px);
}

.info-card img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
}

.info-card h3{
    margin:25px 20px 12px;
    color:var(--dark-blue);
    font-size:1.5rem;
}

.info-card p{
    margin:0 25px 30px;
    color:#666;
    line-height:1.7;
}

/* =========================================================
   13. FAQ
========================================================= */

.faq-section{
    padding:40px 0;
}

.faq{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    margin-bottom:15px;
    overflow:hidden;

    border-radius:14px;
    background:var(--white);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.faq-item summary{
    padding:22px 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    color:var(--dark-blue);
    font-size:1.1rem;
    font-weight:700;

    cursor:pointer;
    list-style:none;
    transition:.2s ease;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    flex-shrink:0;

    margin-left:20px;
    font-size:1.5rem;
    font-weight:400;

    transition:transform .2s ease;
}

.faq-item[open] summary::after{
    transform:rotate(45deg);
}

.faq-item summary:hover{
    background:#f5f7fc;
}

.faq-answer{
    padding:0 25px 25px;
    color:#666;
    line-height:1.7;
}

.faq-answer p{
    margin:0;
}

/* =========================================================
   14. RESPONSIVE — TABLET
========================================================= */

@media (max-width:1000px){

    .contact-section{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-image img{
        height:450px;
    }

    .contact-overlay h1{
        font-size:42px;
    }

    .contact-text h2{
        font-size:34px;
    }

    .contact-gallery{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .section-grid,
    .eyp-intro .section-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .alt .section-image{
        order:-1;
    }

    .eyp-video{
        justify-content:center;
    }
}

@media (max-width:900px){

    .eyp-intro .content-container{
        max-width:1100px;
    }

    .eyp-text{
        padding:3rem 2rem;
    }

    .eyp-video{
        padding:0 2rem 2rem;
    }
}

@media (max-width:850px){

    .member-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   15. RESPONSIVE — MOBILE
========================================================= */

@media (max-width:768px){

    .nav{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        overflow-y:visible;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .nav::-webkit-scrollbar{
        display:none;
    }

    .nav > a,
    .nav-item > button{
        height:60px;
        padding:0 12px;
        font-size:15px;
    }

    .mega-menu{
        left:0;
        transform:none;
        min-width:250px;
    }

    .footer{
        padding:20px 15px;
    }

    .footer-links{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }

    .socials a{
        font-size:28px;
    }

    .content-container{
        margin:30px auto;
        padding:0 20px;
    }

    .banner{
        padding:25px 20px;
    }

    .banner h1{
        padding:10px 20px;
        font-size:1.7rem;
    }

    .section-grid,
    .eyp-intro .section-grid{
        gap:30px;
    }

    .section-text h2{
        font-size:1.7rem;
    }

    .section-text p,
    .section-text ul,
    .section-text ol{
        font-size:1rem;
        line-height:1.7;
    }

    .hero{
        min-height:420px;
    }

    .hero-overlay{
        padding:1.5rem;
    }

    .hero-overlay h1{
        font-size:clamp(2.2rem,10vw,4rem);
    }

    .hero-overlay p{
        font-size:1.2rem;
    }

    .events,
    .join-section{
        padding:20px 0;
    }

    .section-header{
        margin-bottom:35px;
    }

    .section-header h2{
        font-size:2rem;
    }

    .event-grid,
    .card-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .info-card{
        max-width:360px;
        width:100%;
    }

    .join-card{
        width:100%;
        max-width:320px;
    }

    .contact-section{
        margin:50px auto;
        padding:0 20px;
    }

    .contact-image img{
        height:400px;
    }

    .contact-overlay h1{
        font-size:36px;
    }

    .contact-text h2{
        font-size:30px;
    }

    .contact-text p{
        font-size:18px;
        margin-bottom:35px;
    }

    .contact-gallery{
        grid-template-columns:1fr;
        gap:15px;
        margin-bottom:35px;
    }

    .contact-gallery img:hover{
        transform:none;
    }

    .member-card{
        flex-direction:column;
    }

    .image-side{
        width:100%;
        height:220px;
    }

    .text-side{
        margin-top:-15px;
        margin-left:0;
        padding:30px 20px 20px;
        border-radius:0 0 20px 20px;
    }

    .partners-image{
        height:auto;
    }

    .button-group{
        gap:12px;
        margin-bottom:40px;
    }

    .pill-btn{
        padding:12px 24px;
    }

    .faq-section{
        padding:25px 0;
    }

    .faq-item summary{
        padding:18px 20px;
        font-size:1rem;
    }

    .faq-answer{
        padding:0 20px 20px;
    }
}

@media (max-width:600px){

    .copy-message{
        right:15px;
        bottom:15px;
        left:15px;
        text-align:center;
    }

    .centered-image{
        margin-top:40px;
    }

    .event-content{
        padding:25px;
    }

    .join-card{
        min-height:280px;
        padding:30px 25px;
    }

    .join-icon{
        width:70px;
        height:70px;
        margin-bottom:20px;
        font-size:1.7rem;
    }
}

/* =========================================================
   BLOG / NEWS
   ========================================================= */

#post-list,
#post-content{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:50px 20px;
}


/* ---------------------------------------------------------
   POST LIST
   --------------------------------------------------------- */

#post-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:30px;
}


/* ---------------------------------------------------------
   POST CARD
   --------------------------------------------------------- */

.post-card{
    background:var(--white);
    border-radius:18px;
    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    display:flex;
    flex-direction:column;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.post-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}


/* Card image */

.post-card img{
    width:100%;
    height:220px;

    display:block;

    object-fit:cover;
}


/* Card title */

.post-card h2{
    margin:24px 24px 8px;

    color:var(--blue);

    font-size:1.5rem;
    line-height:1.25;
}

.post-card h2 a{
    color:inherit;
    text-decoration:none;
}

.post-card h2 a:hover{
    color:var(--light-blue);
}


/* Date */

.post-date{
    margin:0 24px 14px;

    color:#777;

    font-size:.9rem;
    font-weight:600;
}


/* Summary */

.post-summary{
    margin:0 24px 28px;

    color:#555;

    line-height:1.7;
}


/* ---------------------------------------------------------
   SINGLE POST
   --------------------------------------------------------- */

#post-content{
    max-width:900px;
}


/* Article title */

#post-content > h1{
    margin-bottom:12px;

    color:var(--blue);

    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.15;
}


/* Article metadata */

.post-meta{
    margin-bottom:30px;

    color:#777;

    font-size:.95rem;
    font-weight:600;
}


/* Article hero image */

#post-content > img{
    width:100%;
    max-height:550px;

    display:block;

    object-fit:cover;

    margin-bottom:40px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}


/* ---------------------------------------------------------
   ARTICLE BODY
   --------------------------------------------------------- */

.post-body{
    color:#333;

    font-size:1.08rem;
    line-height:1.8;
}


/* Headings */

.post-body h2{
    margin:45px 0 18px;

    color:var(--blue);

    font-size:2rem;
    line-height:1.25;
}

.post-body h3{
    margin:35px 0 14px;

    color:var(--blue);

    font-size:1.5rem;
    line-height:1.3;
}


/* Paragraphs */

.post-body p{
    margin:0 0 22px;
}


/* Links */

.post-body a{
    color:var(--light-blue);

    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

.post-body a:hover{
    color:var(--blue);
}


/* Lists */

.post-body ul,
.post-body ol{
    margin:0 0 24px;
    padding-left:30px;
}

.post-body li{
    margin-bottom:8px;
}


/* Blockquotes */

.post-body blockquote{
    margin:30px 0;
    padding:20px 25px;

    background:rgba(9,106,199,.07);

    border-left:5px solid var(--light-blue);
    border-radius:0 12px 12px 0;

    color:#444;

    font-style:italic;
}


/* Images inside articles */

.post-body img{
    max-width:100%;
    height:auto;

    display:block;

    margin:30px auto;

    border-radius:14px;
}


/* Horizontal rules */

.post-body hr{
    margin:40px 0;

    border:0;
    border-top:1px solid rgba(0,0,0,.12);
}


/* Code */

.post-body code{
    padding:2px 6px;

    background:#f1f1f1;

    border-radius:5px;

    font-size:.9em;
}

.post-body pre{
    margin:30px 0;
    padding:20px;

    overflow-x:auto;

    background:#1f2937;
    color:#fff;

    border-radius:12px;
}

.post-body pre code{
    padding:0;

    background:none;

    color:inherit;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:900px){

    #post-list{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:25px;
    }

}


@media (max-width:600px){

    #post-list,
    #post-content{
        padding:35px 20px;
    }

    #post-list{
        grid-template-columns:1fr;
        gap:22px;
    }

    .post-card img{
        height:210px;
    }

    .post-card h2{
        margin:20px 20px 8px;
        font-size:1.35rem;
    }

    .post-date{
        margin-left:20px;
        margin-right:20px;
    }

    .post-summary{
        margin-left:20px;
        margin-right:20px;
        margin-bottom:24px;
    }

    #post-content > h1{
        font-size:2rem;
    }

    #post-content > img{
        max-height:350px;
        margin-bottom:30px;
        border-radius:14px;
    }

    .post-body{
        font-size:1rem;
        line-height:1.75;
    }

    .post-body h2{
        margin-top:35px;
        font-size:1.65rem;
    }

    .post-body h3{
        margin-top:28px;
        font-size:1.3rem;
    }

}