/*=========================================================
                    VOLUNTEER PAGE
=========================================================*/

.volunteer-page{
    width:100%;
}



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

.volunteer-hero{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:
        130px
        0
        90px;

    background:

        radial-gradient(
            circle at 82% 45%,
            rgba(59,130,246,.25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #0B2F68 0%,
            #104A91 48%,
            #0B326E 100%
        );

}


.volunteer-hero-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(7,27,61,.22),
            transparent 65%
        );

}


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

.volunteer-hero-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:60px;

    align-items:center;

}


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

.volunteer-hero-content{

    max-width:680px;

    color:#ffffff;

}


.volunteer-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:
        9px
        17px;

    margin-bottom:24px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:50px;

    background:
        rgba(255,255,255,.08);

    color:#E0F2FE;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.7px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

}


.volunteer-eyebrow i{

    color:#BAE6FD;

}


.volunteer-hero h1{

    margin:0 0 24px;

    font-family:'Lora', serif !important;

    font-size:45px;

    line-height:1.08;

    font-weight:500;

    letter-spacing:-1.8px;

}


.volunteer-hero h1 span{

    display:block;

    color:#BAE6FD;
    
    font-family:'Lora', serif !important;

}


.volunteer-hero p{

    max-width:620px;

    margin:0 0 32px;

    color:
        rgba(255,255,255,.80);

    font-size:17px;

    line-height:1.8;

}


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

.volunteer-hero-actions{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


.volunteer-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:
        15px
        27px;

    border-radius:12px;

    background:#ffffff;

    color:#00483d;

    text-decoration:none;

    font-weight:800;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.volunteer-hero-btn:hover{

    color:#00483d;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 42px
        rgba(0,0,0,.27);

}


.volunteer-hero-note{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:
        rgba(255,255,255,.68);

    font-size:13px;

    font-weight:600;

}


.volunteer-hero-note i{

    color:#BAE6FD;

}


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

.volunteer-hero-visual{

    position:relative;

    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.volunteer-hero-circle{

    position:relative;

    z-index:3;

    width:260px;

    height:260px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.05)
        );

    color:#BAE6FD;

    font-size:72px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.22);

    backdrop-filter:blur(18px);

}


.volunteer-hero-circle::before{

    content:"";

    position:absolute;

    inset:-35px;

    border:
        1px solid
        rgba(191,219,254,.16);

    border-radius:50%;

}


.volunteer-hero-circle::after{

    content:"";

    position:absolute;

    inset:-75px;

    border:
        1px dashed
        rgba(191,219,254,.12);

    border-radius:50%;

}


.volunteer-hero-circle i{

    animation:
        volunteerPulse
        3s
        ease-in-out
        infinite;

}


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

.volunteer-floating-card{

    position:absolute;

    z-index:6;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        12px
        15px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:14px;

    background:
        rgba(255,255,255,.10);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.16);

    backdrop-filter:blur(12px);

    color:#ffffff;

}


.volunteer-floating-card i{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:
        rgba(186,230,253,.13);

    color:#BAE6FD;

}


.volunteer-floating-card span{

    font-size:12px;

    font-weight:700;

}


.volunteer-card-one{

    top:55px;

    right:5px;

    animation:
        volunteerFloatOne
        4s
        ease-in-out
        infinite;

}


.volunteer-card-two{

    bottom:55px;

    right:0;

    animation:
        volunteerFloatTwo
        4.5s
        ease-in-out
        infinite;

}


.volunteer-card-three{

    bottom:5px;

    left:5px;

    animation:
        volunteerFloatOne
        5s
        ease-in-out
        infinite;

}


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

@keyframes volunteerPulse{

    0%,
    100%{

        transform:
            scale(1);

    }

    50%{

        transform:
            scale(1.07);

    }

}


@keyframes volunteerFloatOne{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-9px);

    }

}


@keyframes volunteerFloatTwo{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(8px);

    }

}


/*=========================================================
                    SECTION HEADING
=========================================================*/

.volunteer-section-heading{

    max-width:720px;

    margin:
        0
        auto
        55px;

    text-align:center;

}


.volunteer-section-heading > span,
.volunteer-label{

    display:inline-block;

    margin-bottom:13px;

    color:#006050;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.volunteer-section-heading h2{

    margin:
        0
        0
        16px;

    color:#25312e;

    font-family:'Manrope',sans-serif;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

}


.volunteer-section-heading p{

    margin:0;

    color:#68736f;

    font-size:16px;

    line-height:1.8;

}


/*=========================================================
                    WHY VOLUNTEER
=========================================================*/

.volunteer-why{

    padding:
        100px
        0;

    background:#fffdf8;

}


.volunteer-benefit-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:22px;

}


.volunteer-benefit-card{

    padding:
        30px
        25px;

    background:#ffffff;

    border:
        1px solid
        #e6ddd0;

    border-radius:20px;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.05);

    transition:.35s ease;

}


.volunteer-benefit-card:hover{

    transform:
        translateY(-7px);

    border-color:#b8d9cf;

    box-shadow:
        0 22px 45px
        rgba(37,99,235,.12);

}


.volunteer-benefit-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:15px;

    background:#dcefe8;

    color:#006050;

    font-size:21px;

}


.volunteer-benefit-card h3{

    margin:
        0
        0
        11px;

    color:#25312e;

    font-size:19px;

    font-weight:750;

}


.volunteer-benefit-card p{

    margin:0;

    color:#68736f;

    font-size:14px;

    line-height:1.75;

}


/*=========================================================
                    WAYS TO HELP
=========================================================*/

.volunteer-ways{

    padding:
        110px
        0;

    background:#ffffff;

}


.volunteer-ways-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:70px;

    align-items:center;

}


.volunteer-ways-content h2{

    max-width:600px;

    margin:
        0
        0
        20px;

    color:#25312e;

    font-family:'Manrope',sans-serif;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

}


.volunteer-ways-content > p{

    max-width:620px;

    margin:
        0
        0
        28px;

    color:#68736f;

    font-size:16px;

    line-height:1.8;

}


.volunteer-check-list{

    list-style:none;

    margin:0;

    padding:0;

}


.volunteer-check-list li{

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:15px;

    color:#40504b;

    font-size:15px;

    font-weight:600;

}


.volunteer-check-list i{

    color:#006050;

}


.volunteer-ways-visual{

    min-height:390px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            #dcefe8,
            #edf5ee
        );

}


.volunteer-ways-card{

    width:250px;

    height:250px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:50%;

    background:#ffffff;

    color:#006050;

    box-shadow:
        0 25px 55px
        rgba(37,99,235,.15);

    text-align:center;

}


.volunteer-ways-card i{

    font-size:45px;

}


.volunteer-ways-card strong{

    color:#25312e;

    font-size:20px;

}


.volunteer-ways-card span{

    color:#68736f;

    font-size:13px;

}


/*=========================================================
                VOLUNTEER FORM
=========================================================*/

.volunteer-form-section{

    padding:
        110px
        0;

    background:#fffdf8;

}


.volunteer-form-box{

    max-width:950px;

    margin:0 auto;

    padding:55px;

    background:#ffffff;

    border:
        1px solid
        #e6ddd0;

    border-radius:26px;

    box-shadow:
        0 20px 55px
        rgba(15,23,42,.07);

}


.volunteer-form-heading{

    margin-bottom:42px;

    text-align:center;

}


.volunteer-form-heading > span{

    color:#006050;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.8px;

}


.volunteer-form-heading h2{

    margin:
        12px
        0;

    color:#25312e;

    font-family:'Manrope',sans-serif;

    font-size:40px;

    font-weight:800;

}


.volunteer-form-heading p{

    margin:0;

    color:#68736f;

}


.volunteer-form-grid{

    display:grid;

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

    gap:20px;

}


.volunteer-form-group label{

    display:block;

    margin-bottom:8px;

    color:#40504b;

    font-size:14px;

    font-weight:650;

}


.volunteer-form-group input,
.volunteer-form-group select,
.volunteer-form-group textarea{

    width:100%;

    padding:
        13px
        15px;

    border:
        1px solid
        #d9ddd8;

    border-radius:10px;

    outline:none;

    background:#ffffff;

    color:#25312e;

    font-family:inherit;

    transition:.25s ease;

}


.volunteer-form-group textarea{

    resize:vertical;

}


.volunteer-form-group input:focus,
.volunteer-form-group select:focus,
.volunteer-form-group textarea:focus{

    border-color:#006050;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10);

}


.full-width{

    grid-column:
        1 / -1;

}


.volunteer-form-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:30px;

    padding-top:25px;

    border-top:
        1px solid
        #e6ddd0;

}


.volunteer-form-footer p{

    margin:0;

    color:#68736f;

    font-size:13px;

    line-height:1.6;

}


.volunteer-form-footer p i{

    color:#006050;

    margin-right:5px;

}


.volunteer-submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:
        14px
        23px;

    border:none;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #006050,
            #00483d
        );

    color:#ffffff;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 28px
        rgba(37,99,235,.22);

    transition:.3s ease;

}


.volunteer-submit:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(37,99,235,.30);

}


.volunteer-form-message{

    display:none;

    margin-top:20px;

    padding:14px 16px;

    border-radius:10px;

    background:#f0f7f2;

    color:#006050;

    font-size:14px;

}


.volunteer-form-message.show{

    display:block;

}


/*=========================================================
                    FINAL CTA
=========================================================*/

.volunteer-final-cta{

    padding:
        90px
        0;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #00483d,
            #00483d
        );

    color:#ffffff;

}


.volunteer-final-cta h2{

    margin:
        0
        0
        15px;

    font-family:'Manrope',sans-serif;

    font-size:40px;

    font-weight:800;

}


.volunteer-final-cta p{

    margin:
        0
        0
        28px;

    color:
        rgba(255,255,255,.78);

}


.volunteer-final-btn{

    display:inline-flex;

    padding:
        14px
        28px;

    border-radius:11px;

    background:#ffffff;

    color:#00483d;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;

}


.volunteer-final-btn:hover{

    color:#00483d;

    transform:
        translateY(-3px);

}


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

@media(max-width:1100px){

    .volunteer-benefit-grid{

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

    }

}


@media(max-width:991px){

    .volunteer-hero{

        min-height:auto;

        padding:
            125px
            0
            80px;

    }


    .volunteer-hero-grid{

        grid-template-columns:1fr;

        gap:30px;

    }


    .volunteer-hero-content{

        max-width:700px;

        margin:auto;

        text-align:center;

    }


    .volunteer-hero-content p{

        margin-left:auto;

        margin-right:auto;

    }


    .volunteer-hero-actions{

        justify-content:center;

    }


    .volunteer-hero-visual{

        min-height:380px;

    }


    .volunteer-ways-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}


@media(max-width:768px){

    .volunteer-hero{

        padding:
            120px
            0
            65px;

    }


    .volunteer-hero h1{

        font-size:40px;

        letter-spacing:-.7px;

    }


    .volunteer-hero p{

        font-size:16px;

    }


    .volunteer-hero-visual{

        min-height:330px;

    }


    .volunteer-hero-circle{

        width:210px;

        height:210px;

        font-size:58px;

    }


    .volunteer-floating-card{

        padding:
            9px
            11px;

    }


    .volunteer-card-one{

        top:20px;

        right:0;

    }


    .volunteer-card-two{

        bottom:30px;

        right:0;

    }


    .volunteer-card-three{

        bottom:0;

        left:0;

    }


    .volunteer-why,
    .volunteer-ways,
    .volunteer-form-section{

        padding:
            75px
            0;

    }


    .volunteer-section-heading h2,
    .volunteer-ways-content h2{

        font-size:32px;

    }


    .volunteer-benefit-grid{

        grid-template-columns:1fr;

    }


    .volunteer-form-box{

        padding:
            28px
            20px;

        border-radius:20px;

    }


    .volunteer-form-heading h2{

        font-size:32px;

    }


    .volunteer-form-grid{

        grid-template-columns:1fr;

    }


    .full-width{

        grid-column:auto;

    }


    .volunteer-form-footer{

        flex-direction:column;

        align-items:stretch;

    }


    .volunteer-submit{

        width:100%;

    }


    .volunteer-final-cta{

        padding:
            75px
            20px;

    }


    .volunteer-final-cta h2{

        font-size:32px;

    }

}


@media(max-width:390px){

    .volunteer-hero h1{

        font-size:34px;

    }


    .volunteer-hero-circle{

        width:185px;

        height:185px;

        font-size:50px;

    }


    .volunteer-floating-card{

        transform:scale(.88);

    }


    .volunteer-card-one{

        right:-8px;

    }


    .volunteer-card-three{

        left:-8px;

    }
    
 

}
   /* =========================================================
   VOLUNTEER FORM - ANTI BOT HONEYPOT
========================================================= */

.volunteer-honeypot {

    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0, 0, 0, 0) !important;

    white-space:nowrap !important;

    border:0 !important;

}

/* =========================================================
   VWS VOLUNTEER REFRESH — WARM, COMMUNITY-LED NGO STYLE
   Keeps the volunteer form structure unchanged.
========================================================= */
:root{
    --vws-green:#006050;
    --vws-green-dark:#00483d;
    --vws-green-soft:#dcefe8;
    --vws-orange:#e8752f;
    --vws-orange-dark:#c95c1f;
    --vws-cream:#fff7ea;
    --vws-ivory:#fffdf8;
    --vws-charcoal:#25312e;
    --vws-muted:#68736f;
    --vws-border:#e6ddd0;
}

/* Hero: replace the corporate blue/glass/orbit treatment with a warmer,
   human and community-led composition. */
.volunteer-hero{
    min-height:560px;
    padding:105px 0 70px;
    background:
        radial-gradient(circle at 88% 18%, rgba(232,117,47,.20), transparent 27%),
        radial-gradient(circle at 6% 88%, rgba(0,96,80,.16), transparent 30%),
        linear-gradient(135deg,#fffdf8 0%,#fff7ea 55%,#edf5ee 100%);
    color:var(--vws-charcoal);
}

.volunteer-hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:radial-gradient(rgba(0,96,80,.16) 1px,transparent 1px);
    background-size:22px 22px;
    pointer-events:none;
}

.volunteer-hero-overlay{display:none!important;}
.volunteer-hero-grid{grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;}
.volunteer-hero-content{max-width:700px;color:var(--vws-charcoal);}

.volunteer-eyebrow{
    margin-bottom:22px;
    padding:9px 16px;
    border:1px solid rgba(0,96,80,.18);
    background:rgba(255,255,255,.78);
    color:var(--vws-green);
    box-shadow:0 8px 25px rgba(0,72,61,.06);
    backdrop-filter:blur(8px);
}
.volunteer-eyebrow i{color:var(--vws-orange);}

.volunteer-hero h1{
    color:var(--vws-green-dark);
    font-family:'Lora',serif;
    font-size:30px;
    line-height:1.00;
    font-weight:400;
    letter-spacing:-1.0px;
}
.volunteer-hero h1 span{color:var(--vws-orange);}
.volunteer-hero p{max-width:650px;color:#52605b;font-size:16px;line-height:1.8;}

.volunteer-hero-btn{
    background:var(--vws-orange);
    color:#fff!important;
    border:2px solid var(--vws-orange);
    box-shadow:0 12px 28px rgba(201,92,31,.20);
}
.volunteer-hero-btn:hover{background:var(--vws-orange-dark);border-color:var(--vws-orange-dark);color:#fff!important;transform:translateY(-2px);}
.volunteer-hero-note{color:var(--vws-green);}
.volunteer-hero-note i{color:var(--vws-orange);}

.volunteer-hero-values{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.volunteer-hero-values span{
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 12px;border-radius:999px;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(0,96,80,.12);
    color:var(--vws-green-dark);
    font-size:12px;font-weight:800;
}
.volunteer-hero-values i{color:var(--vws-orange);}

/* Human, story-led hero visual instead of a fintech/corporate orbit. */
.volunteer-hero-visual{min-height:390px;display:flex;align-items:center;justify-content:center;}
.volunteer-community-card{
    position:relative;
    width:min(100%,430px);
    min-height:360px;
    padding:42px 40px;
    border-radius:30px 30px 30px 70px;
    background:var(--vws-green);
    color:#fff;
    box-shadow:0 25px 60px rgba(0,72,61,.20);
    overflow:hidden;
}
.volunteer-community-card::before{
    content:"";
    position:absolute;
    width:230px;height:230px;
    right:-105px;top:-105px;
    border:38px solid rgba(232,117,47,.25);
    border-radius:50%;
}
.volunteer-community-card::after{
    content:"";
    position:absolute;
    width:150px;height:150px;
    left:-85px;bottom:-90px;
    border:24px solid rgba(255,255,255,.08);
    border-radius:50%;
}
.volunteer-community-icon{
    position:relative;z-index:1;
    width:62px;height:62px;display:grid;place-items:center;
    border-radius:18px;background:rgba(255,255,255,.12);
    color:#ffd8bd;font-size:25px;margin-bottom:24px;
}
.volunteer-community-label{
    position:relative;z-index:1;
    display:block;color:#f7c29f;font-size:11px;font-weight:900;
    letter-spacing:1.8px;margin-bottom:12px;
}
.volunteer-community-card strong{
    position:relative;z-index:1;
    display:block;max-width:320px;
    font-family:'Lora',serif;font-size:31px;line-height:1.25;font-weight:600;
}
.volunteer-community-line{position:relative;z-index:1;width:70px;height:4px;border-radius:99px;background:var(--vws-orange);margin:24px 0 16px;}
.volunteer-community-card small{position:relative;z-index:1;display:block;max-width:300px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.65;}
.volunteer-community-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:24px;}
.volunteer-community-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);font-size:10px;font-weight:800;}

/* Whole-page VWS palette — no blue/corporate accents. */
.volunteer-section-heading > span,.volunteer-label{color:var(--vws-orange)!important;}
.volunteer-section-heading h2,.volunteer-ways-content h2{color:var(--vws-green-dark);}
.volunteer-section-heading p,.volunteer-ways-content > p{color:var(--vws-muted);}
.volunteer-why{background:var(--vws-ivory);}
.volunteer-benefit-card{border-color:var(--vws-border);box-shadow:0 10px 30px rgba(37,49,46,.06);}
.volunteer-benefit-card:hover{border-color:rgba(0,96,80,.28);box-shadow:0 18px 40px rgba(0,72,61,.10);}
.volunteer-benefit-icon{background:var(--vws-green-soft);color:var(--vws-green);}
.volunteer-benefit-card h3{color:var(--vws-green-dark);}
.volunteer-benefit-card p{color:var(--vws-muted);}
.volunteer-ways{background:#fff;}
.volunteer-check-list li{color:#40504b;}
.volunteer-check-list i{color:var(--vws-green);}
.volunteer-ways-visual{background:linear-gradient(145deg,#f0f7f2,#fff7ea);}
.volunteer-ways-card{color:var(--vws-green);box-shadow:0 25px 55px rgba(0,72,61,.12);}
.volunteer-ways-card strong{color:var(--vws-green-dark);}
.volunteer-ways-card span{color:var(--vws-muted);}
.volunteer-form-section{background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);}
.volunteer-form-box{border-color:var(--vws-border);box-shadow:0 20px 55px rgba(37,49,46,.08);}
.volunteer-form-heading > span{color:var(--vws-orange);}
.volunteer-form-heading h2{color:var(--vws-green-dark);}
.volunteer-form-heading p,.volunteer-form-footer p{color:var(--vws-muted);}
.volunteer-form-group label{color:#40504b;}
.volunteer-form-group input,.volunteer-form-group select,.volunteer-form-group textarea{border-color:#d9ddd8;color:var(--vws-charcoal);}
.volunteer-form-group input:focus,.volunteer-form-group select:focus,.volunteer-form-group textarea:focus{border-color:var(--vws-green);box-shadow:0 0 0 3px rgba(0,96,80,.10);}
.volunteer-form-footer{border-top-color:var(--vws-border);}
.volunteer-form-footer p i{color:var(--vws-green);}
.volunteer-submit{background:var(--vws-orange);box-shadow:0 12px 28px rgba(201,92,31,.18);}
.volunteer-submit:hover{background:var(--vws-orange-dark);box-shadow:0 18px 35px rgba(201,92,31,.24);}
.volunteer-form-message{background:#f0f7f2;color:var(--vws-green-dark);}
.volunteer-final-cta{background:linear-gradient(135deg,var(--vws-green-dark),var(--vws-green));}
.volunteer-final-btn{background:var(--vws-orange);color:#fff;}
.volunteer-final-btn:hover{color:#fff;background:var(--vws-orange-dark);}

@media(max-width:991px){
    .volunteer-hero{padding:115px 0 70px;}
    .volunteer-hero-grid{grid-template-columns:1fr;gap:35px;}
    .volunteer-hero-content{text-align:center;margin:auto;}
    .volunteer-hero-content p{margin-left:auto;margin-right:auto;}
    .volunteer-hero-actions{justify-content:center;}
    .volunteer-hero-values{justify-content:center;}
    .volunteer-hero-visual{min-height:350px;}
}

@media(max-width:600px){
    .volunteer-hero{padding:95px 0 55px;min-height:auto;}
    .volunteer-hero h1{font-size:39px;letter-spacing:-.7px;}
    .volunteer-community-card{min-height:320px;padding:32px 26px;border-radius:24px 24px 24px 52px;}
    .volunteer-community-card strong{font-size:26px;}
    .volunteer-hero-values span{font-size:11px;padding:7px 9px;}
}

/* =========================================================
   VWS VOLUNTEER HERO PHOTO SLIDESHOW
   Matte-white hero surface; existing layout, pills and bubbles retained.
========================================================= */
.volunteer-hero{
    background:#f8f8f5 !important;
    color:var(--vws-charcoal);
}

.volunteer-hero::before{
    opacity:0 !important;
    background:none !important;
}

.volunteer-hero-visual{
    position:relative;
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.volunteer-photo-frame{
    position:relative;
    z-index:2;
    width:min(100%,455px);
    height:405px;
    padding:10px;
    border:2px solid rgba(0,96,80,.24);
    border-radius:32px 32px 32px 72px;
    background:#ffffff;
    box-shadow:0 24px 55px rgba(37,49,46,.12);
    overflow:visible;
}

.volunteer-photo-slideshow{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:23px 23px 23px 62px;
    background:#dcefe8;
}

.volunteer-hero-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    opacity:0;
    animation:volunteerHeroPhotoFade 20s infinite ease-in-out;
}

.volunteer-hero-photo-one{animation-delay:0s;opacity:1;}
.volunteer-hero-photo-two{animation-delay:5s;}
.volunteer-hero-photo-three{animation-delay:10s;}
.volunteer-hero-photo-four{animation-delay:15s;}

@keyframes volunteerHeroPhotoFade{
    0%, 20%{opacity:1;}
    25%, 95%{opacity:0;}
    100%{opacity:1;}
}

.volunteer-photo-frame::before{
    content:"";
    position:absolute;
    width:105px;
    height:105px;
    right:-56px;
    top:-58px;
    border:20px solid rgba(232,117,47,.24);
    border-radius:50%;
    z-index:-1;
}

.volunteer-photo-frame::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-92px;
    bottom:-95px;
    border:24px solid rgba(0,96,80,.10);
    border-radius:50%;
    z-index:-1;
}

.volunteer-photo-bubble{
    position:absolute;
    z-index:4;
    border-radius:50%;
    pointer-events:none;
}

.volunteer-photo-bubble-one{
    width:18px;
    height:18px;
    top:55px;
    right:-77px;
    background:var(--vws-orange);
    box-shadow:0 0 0 8px rgba(232,117,47,.10);
}

.volunteer-photo-bubble-two{
    width:12px;
    height:12px;
    left:-55px;
    top:128px;
    background:var(--vws-green);
    box-shadow:0 0 0 7px rgba(0,96,80,.08);
}

.volunteer-photo-bubble-three{
    width:9px;
    height:9px;
    right:-45px;
    bottom:105px;
    background:var(--vws-orange);
    box-shadow:0 0 0 6px rgba(232,117,47,.08);
}

.volunteer-photo-caption{
    position:absolute;
    z-index:5;
    left:28px;
    right:28px;
    bottom:28px;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 18px;
    border-radius:16px;
    background:rgba(0,72,61,.90);
    color:#fff;
    box-shadow:0 14px 30px rgba(0,72,61,.20);
    backdrop-filter:blur(7px);
}

.volunteer-photo-caption span{
    color:#ffd2b5;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
}

.volunteer-photo-caption span i{
    color:var(--vws-orange);
    margin-right:5px;
}

.volunteer-photo-caption strong{
    font-family:'Lora',serif;
    font-size:19px;
    line-height:1.25;
    font-weight:600;
}

@media(max-width:991px){
    .volunteer-photo-frame{
        width:min(100%,455px);
    }
}

@media(max-width:600px){
    .volunteer-hero-visual{
        min-height:350px;
    }

    .volunteer-photo-frame{
        width:calc(100% - 28px);
        height:340px;
        padding:8px;
        border-radius:25px 25px 25px 52px;
    }

    .volunteer-photo-slideshow{
        border-radius:18px 18px 18px 44px;
    }

    .volunteer-photo-caption{
        left:18px;
        right:18px;
        bottom:18px;
        padding:13px 14px;
    }

    .volunteer-photo-caption strong{
        font-size:17px;
    }

    .volunteer-photo-bubble-one{
        right:-38px;
        top:45px;
    }

    .volunteer-photo-bubble-two{
        left:-30px;
        top:105px;
    }

    .volunteer-photo-bubble-three{
        right:-28px;
        bottom:85px;
    }
}

@media(prefers-reduced-motion:reduce){
    .volunteer-hero-photo{
        animation:none !important;
    }

    .volunteer-hero-photo:not(.volunteer-hero-photo-one){
        display:none;
    }
}