/* ===========================
   GBF MASTER STYLESHEET v2.3
   GivitBack Foundation
   Automation Ready Edition

   PART 1
   RESET + DESIGN SYSTEM
   =========================== */

/* ===========================
   RESET
=========================== */

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

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

body{
    min-height:100%;
    display:flex;
    flex-direction:column;
    font-family:'Poppins',sans-serif;
    background:var(--gbf-bg);
    color:var(--gbf-text);
    line-height:1.7;
    font-size:16px;
    overflow-x:hidden;
}

main{
    flex:1;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    text-decoration:none;
    color:var(--gbf-green);
    font-weight:600;
    transition:var(--gbf-transition);
}

a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}


/* ===========================
   DESIGN SYSTEM
=========================== */

:root{

    --gbf-bg:#0F1F33;

    --gbf-primary:#0F4C81;
    
    --gbf-hero-green:#006D5B;

    --gbf-green:#7AC143;

    --gbf-accent:#F4B400;

    --gbf-white:#FFFFFF;

    --gbf-light:#F8F9FA;

    --gbf-text:#E5E7EB;

    --gbf-muted:#CBD5E1;

    --gbf-card:rgba(15,76,129,.45);

    --gbf-border:rgba(122,193,67,.45);

    --gbf-shadow:0 15px 35px rgba(0,0,0,.25);

    --gbf-radius:18px;

    --gbf-transition:.35s ease;

}


/* ===========================
   GLOBAL LAYOUT
=========================== */

.container{
    width:min(92%,1200px);
    margin-inline:auto;
}

.section{
    padding:32px 0;
}

.section-tight{
    padding:24px 0;
}

.section-small{
    padding:16px 0;
}

main>.section{
    border-top:3px solid var(--gbf-green);
    border-bottom:3px solid var(--gbf-green);
    border-radius:20px;
    margin:14px 0;
    padding:26px 0;
}

main>.section .container{
    padding:8px 0;
}

/* ===========================
   PART 2
   HEADER + NAVIGATION
   =========================== */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--gbf-white);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.site-header .container{
    position:relative;
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}


/* ===========================
   LOGO
=========================== */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    position: relative;
    z-index: 1;

    color: #1A365D;
    font-weight: 700;

    /* Logo only takes the space it needs */
    flex: 0 0 auto;
    min-width: 0;
}

.logo img {
    width: auto;
    height: 55px;
    flex-shrink: 0;
}

.logo span {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

/* ===========================
   MOBILE MENU (SENSITIVITY FIX)
=========================== */

.menu-toggle {
    position: relative;
    z-index: 1002;

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

    width: 54px;
    height: 54px;
    padding: 12px;

    border: none;
    background: transparent;

    color: #1A365D;
    font-size: 28px;

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle i {
    pointer-events: none;
}

.menu-toggle * {
    user-select: none;
}

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

.navbar {
    flex: 1 1 auto;

    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    background: var(--gbf-white);
    border-top: 1px solid #EEEEEE;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.navbar.active {
    display: block;
}

.navbar ul {
    display: flex;
    flex-direction: column;
}

.navbar li {
    width: 100%;
}

.navbar a {
    display: block;
    padding: 16px 24px;
    color: #1A365D;
    font-weight: 500;
    border-bottom: 1px solid #F2F2F2;
    transition: var(--gbf-transition);
    background: transparent;
}

.navbar a:hover,
.navbar a.active {
    background: transparent;
    color: var(--gbf-green);
    border-color: initial;
    transform: none;
    box-shadow: none;
}

.navbar a.active {
    font-weight: 700;
}


/* ===========================
   DESKTOP NAVIGATION
=========================== */

@media (min-width:900px){

    .menu-toggle{
        display:none;
    }

    .navbar{
        display:block;
        position:static;
        width:auto;
        background:transparent;
        border:none;
        box-shadow:none;
    }

    .navbar ul{
        flex-direction:row;
        align-items:center;
        gap:24px;
    }

    .navbar li{
        width:auto;
    }

    .navbar a{
        padding:8px 0;
        border:none;
        position:relative;
    }

    .navbar a::after{
        content:"";
        position:absolute;
        left:0;
        bottom:-6px;
        width:0;
        height:3px;
        background:var(--gbf-green);
        transition:var(--gbf-transition);
    }

    .navbar a:hover::after,
    .navbar a.active::after{
        width:100%;
    }

}

/* ===========================
   PART 3
   HERO + BUTTONS + SECTION HEADINGS
   =========================== */

/* ===========================
   HERO
=========================== */

.hero{
    position:relative;
    min-height:min(86svh,760px);
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            rgba(15,31,51,.82),
            rgba(15,31,51,.82)
        ),
        url('/assets/images/hero.webp');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:var(--gbf-bg);
    color:var(--gbf-white);
}

.hero-overlay{
    width:100%;
    padding:60px 0;
}

.hero-content{
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.hero h1{
    font-size:clamp(2rem,7vw,4.8rem);
    line-height:1.12;
    font-weight:800;
    margin-bottom:20px;
}

.hero h1 span{
    color:#006D5B;
}

.hero p{
    max-width:700px;
    margin:0 auto 35px;
    color:var(--gbf-text);
    font-size:1rem;
}


/* ===========================
   BUTTONS & INTERACTIVE STATES
=========================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    width:100%;
    max-width:320px;
    padding:14px 28px;
    border:none;
    border-radius:30px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    transition:var(--gbf-transition);
}

.btn-primary{
    background:var(--gbf-green);
    color:var(--gbf-white);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:var(--gbf-shadow);
}

.btn-outline{
    background:transparent;
    border:2px solid var(--gbf-green);
    color:var(--gbf-green);
}

.btn-outline:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    transform:translateY(-3px);
}

/* Automation & Submit Locked States */
.btn:disabled,
.btn[disabled],
.btn.is-loading{
    opacity:0.6;
    cursor:not-allowed !important;
    pointer-events:none;
    transform:none !important;
    box-shadow:none !important;
}


/* ===========================
   SECTION HEADINGS
=========================== */

.section-heading{
    max-width:760px;
    margin:0 auto 30px;
    text-align:center;
}

.section-heading h2{
    color:var(--gbf-green);
    font-size:clamp(1.7rem,4vw,2.4rem);
    line-height:1.3;
    margin-bottom:16px;
    font-weight:700;
}

.section-heading p{
    color:var(--gbf-text);
    font-size:1rem;
}


/* ===========================
   PAGE BACKGROUNDS
=========================== */

.what-we-do,
.pillars-section,
.about-section,
.core-values,
.vision-mission,
.roadmap-section,
.sports-section,
.impact-section,
.moments-section,
.get-involved-section{
    background:var(--gbf-bg);
}


/* ===========================
   DESKTOP
=========================== */

@media (min-width:900px){

    .hero{
        min-height:min(90svh,760px);
    }

    .hero-overlay{
        padding:80px 0;
    }

    .hero p{
        font-size:1.1rem;
    }

    .btn{
        width:auto;
        max-width:none;
    }

}

/* ===========================
   PART 4
   GRIDS + CARDS
   =========================== */

/* ===========================
   GRID LAYOUTS
=========================== */

.what-we-do-grid,
.pillars-grid,
.values-grid,
.vision-mission-grid,
.roadmap-grid,
.sports-grid,
.impact-grid,
.moments-gallery,
.involvement-grid,
.footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}


/* ===========================
   CARDS
=========================== */

.service-card,
.pillar-card,
.value-card,
.vm-card,
.roadmap-card,
.sport-card,
.impact-card,
.involvement-card,
.gallery-item,
.about-content{
    background:var(--gbf-card);
    border:2px solid rgba(122,193,67,.45);
    border-radius:var(--gbf-radius);
    padding:28px 22px;
    transition:var(--gbf-transition);
}

.service-card:hover,
.pillar-card:hover,
.value-card:hover,
.vm-card:hover,
.roadmap-card:hover,
.sport-card:hover,
.impact-card:hover,
.involvement-card:hover,
.gallery-item:hover,
.about-content:hover{
    transform:translateY(-6px);
    border:2px solid var(--gbf-green);
    box-shadow:var(--gbf-shadow);
}


/* ===========================
   CARD ICONS
=========================== */

.service-card i,
.pillar-icon,
.value-card i,
.vm-icon,
.impact-card i,
.involvement-icon{
    display:block;
    font-size:2rem;
    color:var(--gbf-green);
    margin-bottom:16px;
}


/* ===========================
   CARD HEADINGS
=========================== */

.service-card h3,
.pillar-card h3,
.value-card h3,
.vm-card h3,
.roadmap-card h3,
.sport-content h3,
.impact-card h3,
.involvement-card h3{
    color:var(--gbf-green);
    margin-bottom:12px;
    font-weight:700;
}


/* ===========================
   CARD TEXT
=========================== */

.service-card p,
.pillar-card p,
.value-card p,
.vm-card p,
.roadmap-card p,
.sport-content p,
.impact-card p,
.involvement-card p,
.about-content p{
    color:var(--gbf-text);
}


/* ===========================
   ABOUT CONTENT
=========================== */

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

.about-content p{
    margin-bottom:16px;
    text-align:justify;
}

.about-content p:last-child{
    margin-bottom:0;
}


/* ===========================
   RESPONSIVE GRIDS
=========================== */

@media (min-width:700px){

    .what-we-do-grid,
    .pillars-grid,
    .values-grid,
    .sports-grid,
    .impact-grid,
    .involvement-grid,
    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .roadmap-grid,
    .vision-mission-grid,
    .moments-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .service-card,
    .pillar-card,
    .value-card,
    .vm-card,
    .roadmap-card,
    .sport-card,
    .impact-card,
    .involvement-card{
        padding:30px 24px;
    }

}

@media (min-width:1024px){

    .what-we-do-grid,
    .pillars-grid,
    .values-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

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

    .sports-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .impact-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }

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

    .footer-grid{
        grid-template-columns:1.2fr 1fr 1fr;
    }

}

/* ===========================
   OUR PARTNERS
=========================== */

.partners-section{
    background:var(--gbf-bg);
}


/* ===========================
   PARTNERS GRID
=========================== */

.partners-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:24px;

    margin-top:2rem;

}


/* ===========================
   PARTNER CARDS
=========================== */

.partner-card{

    background:var(--gbf-card);

    border:2px solid rgba(122,193,67,.45);

    border-radius:var(--gbf-radius);

    padding:28px 22px;

    text-align:center;

    transition:var(--gbf-transition);

}


.partner-card:hover{

    transform:translateY(-6px);

    border-color:var(--gbf-green);

    box-shadow:var(--gbf-shadow);

}


/* ===========================
   PARTNER NAME
=========================== */

.partner-card h4{

    color:var(--gbf-green);

    font-size:1.15rem;

    margin-bottom:.75rem;

    font-weight:700;

}


/* ===========================
   LOCATION LINK
=========================== */

.partner-location{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.45rem;

    padding:8px 14px;

    background:var(--gbf-card);

    border:2px solid rgba(122,193,67,.35);

    border-radius:50px;

    color:var(--gbf-green);

    font-weight:600;

    font-size:.95rem;

    transition:var(--gbf-transition);

}


.partner-location i{

    color:var(--gbf-green);

}


.partner-location:hover{

    background:var(--gbf-green);

    color:var(--gbf-white);

    border-color:var(--gbf-green);

    transform:translateY(-4px);

    box-shadow:var(--gbf-shadow);

}

.partner-location:hover i{

    color:var(--gbf-white);

}


/* ===========================
   PARTNER CATEGORIES
=========================== */

.partners-category{

    margin-top:3rem;

}


.partners-category h3{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    margin-bottom:1.5rem;

    color:var(--gbf-green);

    font-size:1.4rem;

    font-weight:700;

}


.partners-category h3 i{

    color:var(--gbf-green);

}


/* ===========================
   COMING SOON CARD
=========================== */

.coming-soon{

    max-width:320px;

    margin:0 auto;

}


.coming-soon h4{

    margin:0;

    color:var(--gbf-green);

}

/* ===========================
   EMPTY PARTNERS ROW
=========================== */

.empty-partners-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2rem;

    flex-wrap:wrap;

    margin-top:2rem;

}


.empty-partners-row .partners-category{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin:0;

}


.empty-partners-row h3{

    margin:0;

    font-size:1rem;

    white-space:nowrap;

}


.empty-partners-row .partner-card{

    padding:12px 18px;

}


.empty-partners-row .partner-card h4{

    margin:0;

    font-size:.95rem;

}


/* ===========================
   RESPONSIVE PARTNERS GRID
=========================== */

@media(min-width:700px){

    .partners-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}


@media(min-width:1024px){

    .partners-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}

/* ===========================
   PART 5
   ROADMAP + SPORTS + SOCIAL
   =========================== */

/* ===========================
   ROADMAP
=========================== */

.current-phase{
    border:3px solid var(--gbf-green);
}

.roadmap-number{
    width:60px;
    height:60px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gbf-green);
    color:var(--gbf-white);
    font-size:1.25rem;
    font-weight:700;
}

.roadmap-period{
    display:inline-block;
    margin-bottom:16px;
    color:var(--gbf-green);
    font-weight:600;
    font-size:.95rem;
}

.roadmap-card h4{
    color:var(--gbf-green);
    margin:18px 0 10px;
    font-size:1rem;
}

.roadmap-card ul{
    margin-bottom:12px;
    padding-left:1.25rem;
    list-style:disc;
}

.roadmap-card li{
    margin-bottom:6px;
    color:var(--gbf-text);
}

.roadmap-action{
    margin-top:36px;
    text-align:center;
}


/* ===========================
   SPORTS
=========================== */

.sports-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}


.sport-card{
    overflow:hidden;
    padding:0;
}


/* SPORT IMAGES */

.sport-card img{

    width:100%;
    height:280px;
    object-fit:cover;
    display:block;

}


/* SPORT CONTENT */

.sport-content{

    padding:22px;
    text-align:center;

}


.sport-content h3{

    color:var(--gbf-green);
    margin-bottom:12px;

}


.sport-content p{

    color:var(--gbf-text);

}


/* OTHER SPORTS CARD */

.other-sports{

    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;

}


/* ===========================
   TABLETS
=========================== */

@media(min-width:700px){

    .sports-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }


    .sport-card img{

        height:300px;

    }

}


/* ===========================
   DESKTOP SPORTS LAYOUT
   3 TOP + 2 BOTTOM
=========================== */

@media(min-width:1024px){

    .sports-grid{

        grid-template-columns:repeat(6,minmax(0,1fr));

        gap:28px;

    }


    .sport-card{

        grid-column:span 2;

    }


    /* Bottom row centered */

    .sport-card:nth-child(4){

        grid-column:2 / span 2;

    }


    .sport-card:nth-child(5){

        grid-column:4 / span 2;

    }


    .sport-card img{

        height:320px;

    }

}


/* ===========================
   GALLERY
=========================== */

.gallery-item{
    overflow:hidden;
}

.gallery-item img{
    transition:var(--gbf-transition);
}

.gallery-item:hover img{
    transform:scale(1.05);
}

/* ==========================================================
   GALLERY ACTION
========================================================== */

.gallery-action {
    text-align: center;
    margin: 2rem 0 3rem;
}

.gallery-action .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* ===========================
   SOCIAL SECTION
=========================== */

.social-section{
    max-width:700px;
    margin:0 auto;
    text-align:center;
}

.social-section h3{
    color:var(--gbf-green);
    font-size:1.7rem;
    margin-bottom:12px;
}

.social-section p{
    color:var(--gbf-text);
}

.social-links{
    display:grid;
    gap:14px;
    margin-top:22px;
}

.social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 18px;
    background:var(--gbf-card);
    border:2px solid rgba(122,193,67,.35);
    border-radius:50px;
    color:var(--gbf-green);
    font-weight:600;
    transition:var(--gbf-transition);
}

.social-links a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}


/* ===========================
   GET INVOLVED PAGE
=========================== */

.page-get-involved .what-we-do-grid{
    max-width:1080px;
    margin:0 auto;
    justify-content:center;
    justify-items:center;
}

@media (min-width:700px){

    .page-get-involved .what-we-do-grid{
        grid-template-columns:repeat(2,minmax(0,320px));
    }

    .social-links{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }

}

@media (min-width:900px){

    .page-get-involved .what-we-do-grid{
        grid-template-columns:repeat(3,minmax(0,320px));
        justify-content:center;
        justify-items:center;
        align-items:stretch;
    }

    .page-get-involved .service-card{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        width:100%;
        max-width:320px;
        height:100%;
    }

    .page-get-involved .service-card .btn{
        width:100%;
        margin-top:1.25rem;
        align-self:center;
    }

    .page-get-involved .service-card p+p{
        margin-top:12px;
    }

}

/* ===========================
   PART 6
   FOOTER
   =========================== */

.site-footer{
    margin-top:auto;
    margin-bottom:0;
    padding:48px 0 24px;
    background:#0B1727;
    border-top:3px solid var(--gbf-green);
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    margin-bottom:32px;
}

.footer-column{
    text-align:center;
}

.footer-column h3,
.footer-column h4{
    color:var(--gbf-green);
    margin-bottom:16px;
    font-weight:700;
}

.footer-column p{
    color:var(--gbf-text);
}


/* ===========================
   SOCIAL ICONS
=========================== */

.footer-social{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}

.footer-social a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gbf-card);
    border:2px solid rgba(122,193,67,.35);
    color:var(--gbf-green);
    transition:var(--gbf-transition);
}

.footer-social a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}


/* ===========================
   CONTACT LIST
=========================== */

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
}

.footer-contact i{
    width:20px;
    margin-top:3px;
    color:var(--gbf-green);
}

.footer-contact a,
.footer-contact li{
    color:var(--gbf-text);
}

.footer-contact a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--gbf-green);
    font-weight:600;
    transition:var(--gbf-transition);
}

.footer-contact a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}


/* ===========================
   FOOTER BOTTOM
=========================== */

.footer-bottom{
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    text-align:center;
}

.footer-bottom p{
    margin:0;
    color:var(--gbf-green);
    font-weight:500;
}

.footer-legal{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.footer-legal a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--gbf-green);
    font-weight:600;
    transition:var(--gbf-transition);
}

.footer-legal a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}

.footer-legal span{
    color:rgba(255,255,255,.35);
}


/* ===========================
   DESKTOP FOOTER
=========================== */

@media (min-width:700px){

    .footer-column{
        text-align:left;
    }

    .footer-social{
        justify-content:flex-start;
    }

    .footer-contact li{
        justify-content:flex-start;
    }

    .footer-bottom{
        justify-content:center;
        text-align:center;
    }

}

@media (min-width:1024px){

    .footer-grid{
        grid-template-columns:1.2fr 1fr 1fr;
        gap:36px;
    }

}

/* ===========================
   PART 7
   PAGE-SPECIFIC STYLES
   ABOUT • CONTACT • PRIVACY • TERMS
   =========================== */


/* ===========================
   ABOUT PAGE
=========================== */

.page-about .about-content{
    max-width:900px;
    margin:0 auto;
}

.page-about .about-content p{
    margin-bottom:1rem;
    text-align:justify;
}

.page-about .about-content strong{
    color:var(--gbf-white);
}


/* ===========================
   CONTACT PAGE
=========================== */

.page-contact .contact-grid{
    display:grid;
    gap:24px;
    grid-template-columns:1fr;
}

.page-contact .contact-card{
    background:var(--gbf-card);
    border:2px solid rgba(122,193,67,.45);
    border-radius:var(--gbf-radius);
    padding:30px 24px;
    transition:var(--gbf-transition);
}

.page-contact .contact-card:hover{
    border-color:var(--gbf-green);
    transform:translateY(-5px);
    box-shadow:var(--gbf-shadow);
}

.page-contact .contact-card h3{
    color:var(--gbf-green);
    margin-bottom:16px;
}

.page-contact .contact-card p{
    color:var(--gbf-text);
}

.page-contact .contact-details{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:20px;
}

.page-contact .contact-details li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--gbf-text);
}

.page-contact .contact-details i{
    width:22px;
    color:var(--gbf-green);
    margin-top:3px;
}

.page-contact .contact-details a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--gbf-green);
    font-weight:600;
    transition:var(--gbf-transition);
}

.page-contact .contact-details a:hover{
    background:var(--gbf-green);
    color:var(--gbf-white);
    border-color:var(--gbf-green);
    transform:translateY(-4px);
    box-shadow:var(--gbf-shadow);
}


/* ===========================
   PRIVACY POLICY
=========================== */

.page-privacy .about-content{
    max-width:900px;
    margin:0 auto;
}

.page-privacy .about-content h1,
.page-privacy .about-content h2,
.page-privacy .about-content h3,
.page-privacy .about-content h4,
.page-privacy .about-content h5,
.page-privacy .about-content h6{
    color:var(--gbf-green);
    margin:2rem 0 1rem;
    font-weight:700;
}

.page-privacy .about-content h1:first-child,
.page-privacy .about-content h2:first-child,
.page-privacy .about-content h3:first-child,
.page-privacy .about-content h4:first-child,
.page-privacy .about-content h5:first-child,
.page-privacy .about-content h6:first-child{
    margin-top:0;
}

.page-privacy .about-content p{
    margin-bottom:1rem;
    text-align:justify;
}

.page-privacy .about-content ul{
    margin:1rem 0 1.5rem 1.5rem;
    list-style:disc;
}

.page-privacy .about-content li{
    margin-bottom:.7rem;
    color:var(--gbf-text);
}

.page-privacy .about-content strong{
    color:var(--gbf-white);
}


/* ===========================
   TERMS & CONDITIONS
=========================== */

.page-terms .about-content{
    max-width:900px;
    margin:0 auto;
}

.page-terms .about-content h1,
.page-terms .about-content h2,
.page-terms .about-content h3,
.page-terms .about-content h4,
.page-terms .about-content h5,
.page-terms .about-content h6{
    color:var(--gbf-green);
    margin:2rem 0 1rem;
    font-weight:700;
}

.page-terms .about-content h1:first-child,
.page-terms .about-content h2:first-child,
.page-terms .about-content h3:first-child,
.page-terms .about-content h4:first-child,
.page-terms .about-content h5:first-child,
.page-terms .about-content h6:first-child{
    margin-top:0;
}

.page-terms .about-content p{
    margin-bottom:1rem;
    text-align:justify;
}

.page-terms .about-content ul{
    margin:1rem 0 1.5rem 1.5rem;
    list-style:disc;
}

.page-terms .about-content li{
    margin-bottom:.7rem;
    color:var(--gbf-text);
}

.page-terms .about-content strong{
    color:var(--gbf-white);
}


/* ==========================================================
   SAFEGUARDING & POLICIES (FITTED HIGHLIGHT)
========================================================== */

.policy-list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps inline items left-aligned */
    gap: 1rem;
}

.policy-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto; /* Ensures list item doesn't force full width */
}

.policy-list li::marker {
    display: none;
    content: "";
}

.policy-list a {
    /* Changed from display: flex to inline-flex so it wraps content */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 16px; /* Gives nice breathing room around the fitted highlight */
    border-radius: 50px; /* Optional: smooth pill shape for fitted links */

    text-decoration: none;
    color: var(--gbf-green);
    font-weight: 600;

    transition: var(--gbf-transition);
}

.policy-list a:visited {
    color: var(--gbf-green);
}

.policy-list a:hover {
    transform: translateY(-4px);

    background: var(--gbf-green);
    border-color: var(--gbf-green);

    color: #ffffff;

    box-shadow: var(--gbf-shadow);
}

.policy-list i {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--secondary-color);

    transition: color 0.3s ease;
}

.policy-list a:hover i {
    color: #ffffff;
}

.policy-list a::after {
    content: "↗";
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-5px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.policy-list a:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

@media (max-width: 768px) {

    .policy-list a {
        font-size: .95rem;
    }

    .policy-list i {
        font-size: 1.4rem;
    }

    .policy-list a::after {
        display: none;
    }

}

/* ===========================
   RESPONSIVE
=========================== */

@media (min-width:768px){

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

}

@media (min-width:1024px){

    .page-contact .contact-grid{
        grid-template-columns:1.1fr .9fr;
    }

}


/* ===========================
   SHARED FORM STYLES (AUTOMATION ENHANCED)
   SUPPORT • VOLUNTEER • PARTNERSHIP • NEWSLETTER
=========================== */

.gbf-form{
    display:flex;
    flex-direction:column;
    gap:2rem;
    margin-top:2rem;
}

.form-card{
    background:var(--gbf-card);
    border:2px solid rgba(122,193,67,.35);
    border-radius:var(--gbf-radius);
    padding:2rem;
}

.form-card h3{
    color:var(--gbf-green);
    margin-bottom:1.5rem;
    font-size:1.35rem;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    margin-bottom:1.5rem;
}

.form-group:last-child{
    margin-bottom:0;
}

.form-group label{
    color:#40E0D0;
    font-weight:600;
}

.form-group label span{
    color:#FF6B6B;
}

/* Field Instructions */
.field-instruction{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin:.4rem 0 1rem;
    color:#38B2AC;
    font-size:.92rem;
    font-style:italic;
}

.field-instruction i{
    color:var(--gbf-green);
}

/* Form Inputs & Focus States */
.gbf-form input,
.gbf-form select,
.gbf-form textarea{
    width:100%;
    padding:14px 16px;
    border:2px solid rgba(122,193,67,.35);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    color:var(--gbf-white);
    transition:var(--gbf-transition);
}

.gbf-form input::placeholder,
.gbf-form textarea::placeholder{
    color:var(--gbf-muted);
}

.gbf-form input:focus,
.gbf-form select:focus,
.gbf-form textarea:focus{
    outline:none;
    border-color:var(--gbf-green);
}

/* Dynamic Validation Feedback States */
.gbf-form input.is-invalid,
.gbf-form select.is-invalid,
.gbf-form textarea.is-invalid,
.gbf-form input[aria-invalid="true"],
.gbf-form select[aria-invalid="true"],
.gbf-form textarea[aria-invalid="true"]{
    border-color:#FF6B6B !important;
    background:rgba(255,107,107,0.08);
}

.field-error-message{
    color:#FF6B6B;
    font-size:0.85rem;
    margin-top:0.25rem;
    display:flex;
    align-items:center;
    gap:0.35rem;
}

.gbf-form select option{
    background:var(--gbf-bg);
    color:var(--gbf-white);
}

.gbf-form textarea{
    resize:vertical;
    min-height:150px;
}

/* Checkbox & Radio Alignment */
.checkbox-group,
.radio-group{
    display:grid;
    gap:.85rem;
}

.checkbox-group{
    margin-top:.5rem;
}

.checkbox-group label,
.radio-group label,
.checkbox-single{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    color:var(--gbf-text);
    font-weight:400;
    cursor:pointer;
}

.checkbox-group input,
.radio-group input,
.checkbox-single input{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:var(--gbf-green);
    flex-shrink:0;
}

/* Checkbox Cards */
.checkbox-group label,
.radio-group label{
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:10px;
    transition:var(--gbf-transition);
}

.checkbox-group label:hover,
.radio-group label:hover{
    background:rgba(122,193,67,.08);
    border-color:rgba(122,193,67,.25);
}

.checkbox-group input,
.radio-group input{
    cursor:pointer;
}

.checkbox-group label:has(input:checked),
.radio-group label:has(input:checked){
    background:rgba(122,193,67,.12);
    border-color:var(--gbf-green);
    color:var(--gbf-green);
    font-weight:600;
}

/* Form Status Messages */
.form-status{
    display:none;
    padding:1rem;
    border-radius:12px;
    text-align:center;
    font-weight:600;
}

.form-status.status-loading,
.form-status.loading{
    display:block;
    background:rgba(15,76,129,.25);
    border:1px solid var(--gbf-primary);
    color:var(--gbf-white);
}

.form-status.status-success,
.form-status.success{
    display:block;
    background:rgba(122,193,67,.15);
    border:1px solid var(--gbf-green);
    color:var(--gbf-green);
}

.form-status.status-error,
.form-status.error{
    display:block;
    background:rgba(220,53,69,.15);
    border:1px solid #dc3545;
    color:#ffb3b3;
}

.gbf-form .btn{
    align-self:center;
}


/* ===========================
   PART 8
   FINAL RESPONSIVE UTILITIES
   =========================== */


/* ===========================
   TABLETS
=========================== */

@media (min-width:700px){

    .container{
        width:min(92%,1200px);
    }

    .section{
        padding:38px 0;
    }

    .hero-content{
        max-width:760px;
    }

}


/* ===========================
   DESKTOP
=========================== */

@media (min-width:900px){

    .container{
        width:min(90%,1200px);
    }

    .section{
        padding:42px 0;
    }

    .hero{
        min-height:min(90svh,760px);
    }

    .hero-overlay{
        padding:80px 0;
    }

    .hero p{
        font-size:1.1rem;
    }

    .btn{
        width:auto;
        max-width:none;
    }

}


/* ===========================
   LARGE DESKTOPS
=========================== */

@media (min-width:1200px){

    .container{
        width:min(88%,1200px);
    }

}


/* ===========================
   ACCESSIBILITY & SELECTION
=========================== */

:focus-visible{
    outline:3px solid var(--gbf-green);
    outline-offset:3px;
}

::selection{
    background:var(--gbf-green);
    color:var(--gbf-white);
}


/* ===========================
   SMOOTH ANIMATIONS
=========================== */

.service-card,
.pillar-card,
.value-card,
.vm-card,
.roadmap-card,
.sport-card,
.impact-card,
.involvement-card,
.gallery-item,
.contact-card,
.about-content,
.footer-social a,
.social-links a,
.btn,
.navbar a{
    transition:all .35s ease;
}


/* ===========================
   IMAGE QUALITY
=========================== */

img{
    image-rendering:auto;
}


/* ===========================
   UTILITIES
=========================== */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;}

.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}

.pt-1{padding-top:.5rem;}
.pt-2{padding-top:1rem;}
.pt-3{padding-top:1.5rem;}
.pt-4{padding-top:2rem;}

.pb-1{padding-bottom:.5rem;}
.pb-2{padding-bottom:1rem;}
.pb-3{padding-bottom:1.5rem;}
.pb-4{padding-bottom:2rem;}

@media (min-width:768px){

    .checkbox-group{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (min-width:1024px){

    .checkbox-group{
        grid-template-columns:repeat(3,1fr);
    }

}


/* ===========================
   CONDITIONAL FIELDS & ARIA TOGGLES
=========================== */

.support-section,
.volunteer-other,
.volunteer-experience,
.partnership-other,
.partnership-experience,
[aria-hidden="true"],
.is-hidden{
    display:none;
}

[aria-hidden="false"],
.is-visible{
    display:block;
}

/* ===========================
   END OF GBF MASTER STYLESHEET v2.3
=========================== */