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

.hero{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    color:#fff;

    text-align:center;

    background:
        linear-gradient(
            rgba(7,19,33,.75),
            rgba(7,19,33,.70)
        ),
        url("../images/volunteer/hero.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}

/* Optional subtle gold glow */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(209,157,14,.30),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,.05),
            transparent 40%
        );

}

.hero .container{

    position:relative;

    z-index:2;

    max-width:900px;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.75rem 1.5rem;

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

    backdrop-filter:blur(12px);

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

    border-radius:50px;

    font-weight:600;

    letter-spacing:.5px;

}

.hero h1{

    margin:1.8rem 0 1.2rem;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.1;

    text-shadow:0 5px 20px rgba(0,0,0,.45);

}

.hero p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

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

    text-shadow:0 2px 10px rgba(0,0,0,.4);

}

@media(max-width:768px){

    .hero{

        padding:7rem 0;

        background-attachment:scroll;

    }

}

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

.why{

    padding:7rem 0;

    background:#f8fafc;

}

.why h2{

    text-align:center;

    margin-bottom:1rem;

    font-size:2.3rem;

}

.cards{

    margin-top:3rem;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:2rem;

}

.card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    padding:2.5rem;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#d19d0e,#facc15);

}

.card:hover{

    transform:translateY(-10px);

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

}

.card h3{

    margin-bottom:1rem;

    color:#071321;

}

.card p{

    color:#64748b;

    line-height:1.8;

}


/* ==========================================================
   APPLICATION
========================================================== */

.application{

    padding:7rem 0;

    background:
    linear-gradient(180deg,#ffffff,#f8fafc);

}

/* Remove the two-column layout */

.application-grid{

    width:100%;

    max-width:900px;

    margin:0 auto;

}

/* Heading */

.application-grid h2{

    text-align:center;

    font-size:2.8rem;

    color:#071321;

    margin-bottom:1rem;

    font-weight:800;

}

.application-grid>p{

    text-align:center;

    max-width:650px;

    margin:0 auto 3rem;

    color:#64748b;

    font-size:1.05rem;

    line-height:1.8;

}


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

.volunteer-form{

    background:#fff;

    padding:3rem;

    border-radius:28px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:

        0 25px 70px rgba(15,23,42,.08),

        0 8px 25px rgba(15,23,42,.05);

}

.grid{

    display:grid;

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

    gap:1.5rem;

}

.form-group{

    margin-bottom:1.5rem;

}

.form-group label{

    display:block;

    margin-bottom:.6rem;

    font-weight:600;

    color:#334155;

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:1rem 1.2rem;

    border:1px solid #d8dee8;

    border-radius:14px;

    background:#fafafa;

    font-family:inherit;

    font-size:.96rem;

    transition:.3s;

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

.form-group input:focus,

.form-group textarea:focus{

    outline:none;

    background:#fff;

    border-color:#d19d0e;

    box-shadow:0 0 0 4px rgba(209,157,14,.15);

}


/* ==========================================================
   BUTTON
========================================================== */

.btn-submit{

    width:100%;

    border:none;

    padding:1.1rem;

    border-radius:14px;

    background:linear-gradient(135deg,#d19d0e,#f4b400);

    color:#071321;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 18px 40px rgba(209,157,14,.25);

}

.btn-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 22px 50px rgba(209,157,14,.35);

}


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

@media(max-width:768px){

    .application{

        padding:5rem 0;

    }

    .volunteer-form{

        padding:2rem;

    }

    .grid{

        grid-template-columns:1fr;

    }

    .application-grid h2{

        font-size:2.2rem;

    }

}