@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

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

:root{
    /* Forest Green */
    --g:#16A34A;
    --gd:#166534;
    --gl:#22C55E;
    --gll:#F0FDF4;
    --gll2:#DCFCE7;

    /* Navy */
    --acc:#0F172A;
    --accl:#1E293B;

    /* Base */
    --bg:#F8FAFC;
    --white:#FFFFFF;

    --text:#0F172A;
    --muted:#64748B;

    --card:#FFFFFF;
    --border:#E2E8F0;

    --r:14px;
    --rs:8px;

    --sh:0 8px 24px rgba(15,23,42,.10);
}
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 600px;
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
.stat-num,
.metric-val,
.vol-hours {
    font-family: 'Sora', sans-serif
}
/* ─── NAVBAR ─── */
nav{
    background:linear-gradient(
        90deg,
        #0F172A 0%,
        #1E293B 40%,
        #166534 100%
    );

    border-bottom:none;
    position:sticky;
    top:0;
    z-index:100;
    padding:0 1.5rem;

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

.nav-inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
    gap: 8px
}

.logo {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.5px;
    white-space: nowrap;
    margin-right: 1.5rem;
    flex-shrink: 0
}

.logo span {
    color: rgba(255, 255, 255, 0.75);
}

.nav-links {
    display: flex;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none
}

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

.nav-btn {
    background: none;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 6px 11px;
    border-radius: var(--rs);
    white-space: nowrap;
    transition: all .15s
}

.nav-btn:hover{
    background:rgba(255,255,255,.10);
    color:#22C55E;
}
.nav-btn.active{
    background:rgba(255,255,255,.12);
    color:#22C55E;
    font-weight:600;
}

.nav-cta{
    margin-left:auto;
    background:#16A34A;
    color:#fff;
    border:none;
    border-radius:var(--rs);
    padding:7px 18px;
    font-family:'DM Sans',sans-serif;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    transition:.3s;
}

.nav-cta:hover{
    background:#166534;
    transform:translateY(-2px);
}


.page {
    display: none;
    animation: fadeIn .3s ease
}

.page.active {
    display: block
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* HERO */
.hero{
    background:
    linear-gradient(
        135deg,
        #0F172A 0%,
        #166534 50%,
        #16A34A 100%
    );

    background-size:200% 200%;
    animation:gradientMove 12s ease infinite;

    color:#fff;
    padding:4.5rem 2rem 5rem;
    position:relative;
    overflow:hidden;
}

.hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none
}

.hero::after{
    content:'';

    position:absolute;
    right:-100px;
    bottom:-100px;

    width:400px;
    height:400px;

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

    border-radius:50%;

    animation:floatGlow 8s ease-in-out infinite;

    pointer-events:none;
}

.hero-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    margin-bottom: 1.3rem;
    color: #E8F5E9;
    text-transform: uppercase
}

.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 1rem;
    letter-spacing: -1.5px
}

.hero h1 em {
    color: var(--acc);
    font-style: normal
}

.hero p {
    font-size: 1rem;
    opacity: 0.88;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75
}

.hero-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.btn-acc{
    background:#16A34A;
    color:#fff;
    border:none;
    border-radius:var(--rs);
    padding:12px 28px;
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:.9rem;
    cursor:pointer;
    transition:.3s;
}

.btn-acc:hover{
    background:#166534;
    transform:translateY(-2px);
}


.btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--rs);
    padding: 12px 28px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all .15s
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22)
}

/* STATS */
.stats-row {
    max-width: 1100px;
    margin: -2.2rem auto 0;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
    position: relative;
    z-index: 2
}

.stat-card {
    background: #fff;
    border-radius: var(--r);
    box-shadow: 0 4px 20px rgba(46, 125, 50, 0.12);
    padding: 1.2rem 0.8rem;
    text-align: center;
    border: 1px solid var(--border)
}

.stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--g);
    line-height: 1
}

.stat-label {
    font-size: 0.68rem;
    color: var(--muted);
    margin-top: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px
}

.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem
}

.sec-hd{
    font-size:1.5rem;
    font-weight:700;
    color:#0F172A;
    margin-bottom:.3rem;
}

.sec-sub {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 2rem
}

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

/* ACTIVITY CARDS */
.act-card {
    background: #fff;
    border-radius: var(--r);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    cursor: pointer
}

.act-card:hover {
    box-shadow: 0 8px 30px rgba(46, 125, 50, 0.18);
    transform: translateY(-3px)
}

.act-img {
    height: 160px;
    object-fit: cover;
    width: 100%;
    display: block
}

.act-img-placeholder {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem
}

.act-body {
    padding: 1rem 1.1rem 1.2rem
}

.act-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase
}

.b-plant {
    background: #E8F5E9;
    color: #1B5E20
}

.b-blood {
    background: #FFEBEE;
    color: #B71C1C
}

.b-clean {
    background: #E3F2FD;
    color: #0D47A1
}

.b-health {
    background: #FFF3E0;
    color: #BF360C
}

.b-rural {
    background: #F3E5F5;
    color: #4A148C
}

.b-aware {
    background: #E0F2F1;
    color: #004D40
}

.act-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--text)
}

.act-meta {
    font-size: 0.76rem;
    color: var(--muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.act-desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.65
}

.act-impact {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap
}

.ip {
    background: var(--gll);
    color: #1B5E20;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px
}

/* STORIES */
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px
}

.story-card {
    background: var(--g);
    color: #fff;
    border-radius: var(--r);
    padding: 1.5rem;
    position: relative;
    overflow: hidden
}

.story-card.alt {
    background: var(--gd)
}

.story-q {
    position: absolute;
    right: 14px;
    top: -2px;
    font-size: 5rem;
    opacity: 0.12;
    font-family: 'Sora', sans-serif;
    line-height: 1;
    pointer-events: none
}

.story-card p {
    font-size: 0.84rem;
    line-height: 1.75;
    opacity: 0.93;
    margin-bottom: 1rem;
    position: relative
}

.story-author {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative
}

.s-ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0
}

.s-name {
    font-weight: 600;
    font-size: 0.84rem
}

.s-role {
    font-size: 0.7rem;
    opacity: 0.72
}

/* CTA */
/* .cta-strip{
    background:linear-gradient(
        135deg,
        #0F172A 0%,
        #1E293B 45%,
        #166534 100%
    );

    padding:2.8rem 2rem;
    text-align:center;
}*/

.cta-strip h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem
}

.cta-strip p {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    opacity: 0.85
} 
.cta-strip{
    background:#0F172A;

    position:relative;
    overflow:hidden;

    padding:2.8rem 2rem;
    text-align:center;
}

.cta-strip::before{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-100px;
    top:-100px;

    background:rgba(22,163,74,.12);

    border-radius:50%;
}

.cta-strip::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    left:-80px;
    bottom:-80px;

    background:rgba(34,197,94,.10);

    border-radius:50%;
}
.btn-dk {
    background: #1B5E20;
    color: #fff;
    border: none;
    border-radius: var(--rs);
    padding: 12px 30px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s
}
.btn-dk:hover {
    background: #0A3D10
}

/* ACTIVITIES PAGE */
.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

.chip {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s
}

.chip:hover,
.chip.on {
    background: var(--g);
    color: #fff;
    border-color: var(--g)
}

.srch {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 10px 16px;
    margin-bottom: 1.5rem
}

.srch input {
    border: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    flex: 1;
    background: none;
    color: var(--text)
}

.srch input::placeholder {
    color: #9aad9b
}

/* IMPACT */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 14px;
    margin-bottom: 2.5rem
}

.metric-card {
    background: #fff;
    border-radius: var(--r);
    border: 1px solid var(--border);
    padding: 1.3rem 1rem;
    text-align: center
}

.metric-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    display: block
}

.metric-val {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--g)
}

.metric-lbl {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px
}

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

.chart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.4rem
}

.chart-title {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--text)
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem
}

.bar-label {
    width: 72px;
    color: var(--muted);
    text-align: right;
    flex-shrink: 0;
    font-size: 0.72rem
}

.bar-track {
    flex: 1;
    background: var(--gll);
    border-radius: 4px;
    height: 22px;
    overflow: hidden;
    min-width: 0
}

.bar-fill {
    height: 100%;
    background: var(--g);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    margin-bottom: 6px
}

.ldot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.lname {
    flex: 1;
    color: var(--text)
}

.lval {
    font-weight: 700;
    color: var(--muted)
}

.stacked-bar {
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    margin-top: 1rem
}

.stacked-bar div {
    height: 100%
}

/* VOLUNTEERS */
.vol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 2.5rem
}

.vol-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: box-shadow .2s
}

.vol-card:hover {
    box-shadow: var(--sh)
}

.vol-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto 12px
}

.vol-ava {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    margin: 0 auto
}

.vol-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
    border: 2px solid #fff
}

.vol-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 2px
}

.vol-college {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 10px
}

.vol-hours {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--g)
}

.vol-hlbl {
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 600
}

.badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 2rem
}

.bdg-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    flex: 1
}

.bdg-icon {
    font-size: 1.9rem;
    flex-shrink: 0
}

.bdg-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text)
}

.bdg-desc {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 2px
}

/* GALLERY */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px
}

.photo-item {
    border-radius: var(--rs);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform .2s;
    border: 1px solid var(--border);
    background: var(--gll);
    position: relative
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.photo-item .photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: var(--gll)
}

.photo-item:hover {
    transform: scale(1.04)
}

.photo-cat-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 94, 32, 0.8);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    text-align: center
}

/* ABOUT */
.about-hero {
    background: linear-gradient(135deg, var(--gd), var(--g));
    color: #fff;
    padding: 2.5rem 2rem;
    border-radius: var(--r);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden
}

.about-hero::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 50%
}

.about-hero h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative
}

.about-hero p {
    opacity: 0.88;
    max-width: 500px;
    margin: 0 auto;
    font-size: 0.92rem;
    position: relative
}

.about-sec {
    margin-bottom: 2rem
}

.about-sec h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 0.8rem;
    border-left: 3px solid var(--g);
    padding-left: 12px;
    font-family: 'Sora', sans-serif
}

.about-sec p,
.about-sec li {
    font-size: 0.87rem;
    color: var(--muted);
    line-height: 1.8
}

.about-sec ul {
    padding-left: 1.2rem
}

.obj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px
}

.obj-card {
    background: var(--gll);
    border-radius: var(--rs);
    padding: 1rem;
    border-left: 3px solid var(--g)
}

.obj-card h4 {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 4px;
    font-family: 'Sora', sans-serif
}

.obj-card p {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.6
}

/* CONTACT */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

@media(max-width:620px) {
    .contact-grid {
        grid-template-columns: 1fr
    }
}

.form-card,
.info-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.5rem
}

.fg {
    margin-bottom: 1rem
}

.fg label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px
}

.fg input,
.fg textarea,
.fg select {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 9px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    background: #F8FAF8;
    outline: none;
    transition: border .15s
}

.fg input:focus,
.fg textarea:focus,
.fg select:focus {
    border-color: var(--g)
}

.fg textarea {
    resize: vertical;
    min-height: 90px
}

.sub-btn {
    background: var(--g);
    color: #fff;
    border: none;
    border-radius: var(--rs);
    padding: 10px 24px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    width: 100%;
    transition: background .15s
}

.sub-btn:hover {
    background: var(--gd)
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.2rem
}

.info-icon-box {
    width: 36px;
    height: 36px;
    background: var(--gll);
    border-radius: var(--rs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0
}

.info-lbl {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px
}

.info-val {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text)
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding: .9rem 0;
    cursor: pointer
}

.faq-q {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px
}

.faq-toggle {
    color: var(--g);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .2s
}

.faq-a {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.7;
    margin-top: 8px;
    display: none
}

.soc-row {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
    flex-wrap: wrap
}

.soc-btn {
    background: var(--gll);
    color: var(--g);
    border: 1px solid var(--gll2);
    border-radius: var(--rs);
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s
}

.soc-btn:hover {
    background: var(--g);
    color: #fff;
    border-color: var(--g)
}

footer {
    background:#0F172A;
    color:rgba(255,255,255,.82);
    padding: 2.5rem 2rem 1.5rem;
    margin-top: 3rem
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem
}

.f-brand h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem
}

.f-brand p {
    font-size: 0.77rem;
    opacity: 0.75;
    line-height: 1.75
}

.f-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #fff;
    margin-bottom: 0.9rem
}

.f-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.f-col li {
    font-size: 0.77rem;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity .15s
}

.f-col li:hover {
    opacity: 1
}

.footer-bot {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.footer-bot p {
    font-size: 0.73rem;
    opacity: 0.55
}

.nss-emblem {
    font-size: 1.3rem;
    margin-right: 6px
}

@keyframes floatGlow{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }
}
@keyframes gradientMove{
    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

.b-plant,
.b-blood,
.b-clean,
.b-health,
.b-rural,
.b-aware{
    background:#FFF1F2;
    color:#C1121F;
}
.act-card,
.metric-card,
.stat-card,
.vol-card,
.chart-card,
.form-card,
.info-card{
    transition:all .3s ease;
}

.act-card:hover,
.metric-card:hover,
.stat-card:hover,
.vol-card:hover,
.chart-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(15,23,42,.12);
}