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

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

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8faf7;
    color:#222;
    line-height:1.6;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

/* ===========================
TOP BAR
=========================== */

.top-bar{
    background:#0f5132;
    color:#fff;
    font-size:14px;
    padding:10px 0;
}

.top-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.left-info,
.right-info{
    display:flex;
    align-items:center;
    gap:18px;
}

.right-info a{
    color:#fff;
    transition:.3s;
}

.right-info a:hover{
    color:#ffd54f;
}

.arabic{
    font-size:18px;
    font-weight:600;
}

/* ===========================
NAVBAR
=========================== */

.navbar{
    background:#fff;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.nav-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:90px;
}

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

.logo-circle{
    width:65px;
    height:65px;
    border-radius:50%;
    overflow:hidden;
}

.logo-text h2{
    color:#0f5132;
    font-size:24px;
}

.logo-text p{
    color:#777;
}

.menu{
    display:flex;
    gap:35px;
}

.menu a{
    color:#333;
    font-weight:500;
    transition:.3s;
}

.menu a:hover{
    color:#0f5132;
}

.menu a.active{
    color:#fff;
    background:#198754;
    padding:7px 18px;
    border-radius:30px;
    font-weight:600;
}

.donate-btn{
    background: linear-gradient(135deg, #198754, #0f5132);
    color:#fff;
    padding:13px 26px;
    border-radius:30px;
    transition:.35s;
    font-weight:700;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 6px 20px rgba(25,135,84,.35);
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.donate-btn::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    animation:shine 2.5s linear infinite;
}

.donate-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(25,135,84,.45);
}

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

.hero{
    padding:90px 0;
    background:
    linear-gradient(
    rgba(255,255,255,.96),
    rgba(255,255,255,.96));
    position: relative;
    overflow: hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
    /* Lets the photo column bleed past the container's right edge,
       right to the browser edge, without affecting the text column. */
    --hero-outer-gap: calc((100vw - min(90vw, 1280px)) / 2);
}

.tag{
    display:inline-block;
    background:#e7f7ed;
    color:#198754;
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:25px;
}

.hero h1{
    font-size:58px;
    line-height:1.1;
    margin-bottom:25px;
}

.hero h1 span{
    color:#198754;
}

.description{
    font-size:18px;
    color:#666;
    margin-bottom:40px;
    max-width:550px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{

    padding:15px 30px;
    border-radius:35px;
    font-weight:600;
    transition:.35s;
}

.primary-btn{
    background:#198754;
    color:#fff;
}

.primary-btn:hover{
    background:#146c43;
    transform:translateY(-3px);
}

.secondary-btn{
    border:2px solid #198754;
    color:#198754;
}

.secondary-btn:hover{
    background:#198754;
    color:#fff;
}
.hero-content{position:relative;z-index: 9;}

.hero-image{
    display:flex;
    justify-content:center;
position: absolute;
    left: 0;
    width: 100%;
}
/*=========================================
    PREMIUM HERO DECORATIONS
=========================================*/

.hero{
    position:relative;
    overflow:hidden;
}

/*==============================
  Glow Behind Mosque
==============================*/

.hero-glow{
    position:absolute;
    right:-120px;
    top:50%;
    transform:translateY(-50%);
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle,
            rgba(25,135,84,.18),
            rgba(25,135,84,.08),
            transparent 70%);
    filter:blur(50px);
    animation:pulseGlow 8s ease-in-out infinite;
    z-index:0;
}

@keyframes pulseGlow{

    0%,100%{
        transform:translateY(-50%) scale(1);
        opacity:.9;
    }

    50%{
        transform:translateY(-50%) scale(1.08);
        opacity:1;
    }

}

/*==============================
 Hero Image
==============================*/

.hero-image{position: absolute;display:flex;justify-content:center;align-items:center;z-index:2;left: 0;width: 100%;}

/* Circle Behind Image */

.hero-circle{
            position:absolute;
            width:600px;
            height:600px;
            border-radius:50%;
            background:radial-gradient(circle,
            rgba(25,135,84,.12),
            transparent 72%);
            filter:blur(30px);
            animation:circleFloat 10s ease-in-out infinite;
            z-index: 99;
            }

@keyframes circleFloat{

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

    50%{
        transform:translateY(-18px);
    }

}

/* Mosque */

.hero-image img{position:relative;z-index:5;width:100%;/* max-width:720px; */filter:drop-shadow(0 35px 35px rgba(0,0,0,.18));animation:mosqueFloat 6s ease-in-out infinite;}

/* Real photo override — sized as a card instead of a full-bleed illustration */
.hero-image img.hero-real-photo{
    width:100%;
    max-width:520px;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:20px;
    filter:drop-shadow(0 25px 35px rgba(0,0,0,.25));
    animation:mosqueFloat 6s ease-in-out infinite;
}

@media(max-width:768px){
    .hero-image img.hero-real-photo{ max-width:380px; }
}

/* Real photo mode — sit in the grid's own right column instead of
   floating absolutely across the whole hero width */
.hero-image.hero-photo-mode{
    position: relative;
    left: auto;
    width: auto;
    align-self: stretch;
    justify-content: center;
    /* Bleed the photo column to the browser's right edge on wide screens */
    margin-right: calc(-1 * var(--hero-outer-gap, 0px));
}

/* Two-photo slideshow — auto crossfades between side view and front view.
   Stretches to fill the full height of the hero row (matching the text
   column) instead of sitting as a small letterboxed card. */
.hero-slideshow{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 360px;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 35px rgba(0,0,0,.25);
}

/* Keep the ambient glow behind the photo card, not on top of it */
.hero-photo-mode .hero-circle{
    z-index: 1;
}

.hero-slideshow img.hero-real-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    filter: none;
}

.hero-slideshow .hero-real-photo.slide-a{ animation: heroFadeA 8s ease-in-out infinite; object-position: center; }
.hero-slideshow .hero-real-photo.slide-b{ animation: heroFadeB 8s ease-in-out infinite; object-position: 38% center; }

@keyframes heroFadeA{
    0%,45%{ opacity:1; }
    55%,100%{ opacity:0; }
}

@keyframes heroFadeB{
    0%,45%{ opacity:0; }
    55%,100%{ opacity:1; }
}

@media(max-width:768px){
    .hero-image.hero-photo-mode{ align-self: auto; margin-right: 0; }
    .hero-slideshow{ height: auto; min-height: 0; aspect-ratio: 16/9; }
}

@keyframes mosqueFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

}

/*==============================
 Floating Lanterns
==============================*/

.lantern{

    position:absolute;

    width:46px;

    z-index:10;

    transform-origin:top center;

    animation:lanternFloat 7s ease-in-out infinite;

}

.l1{

    top:30px;

    right:390px;

}

.l2{

    top:90px;

    right:250px;

    animation-delay:2s;

}

.l3{

    top:40px;

    right:90px;

    animation-delay:4s;

}

@keyframes lanternFloat{

    0%,100%{

        transform:
        translateY(0)
        rotate(-3deg);

    }

    50%{

        transform:
        translateY(-20px)
        rotate(3deg);

    }

}

/*==============================
 Birds
==============================*/

.birds{position:absolute;width:140px;opacity:.18;z-index: 99;animation:birdsMove 15s ease-in-out infinite;}

.birds1{

    top:130px;

    right:420px;

}

.birds2{

    top:190px;

    right:170px;

    animation-delay:6s;

}

@keyframes birdsMove{

    0%{

        transform:
        translateX(0);

    }

    50%{

        transform:
        translateX(25px)
        translateY(-8px);

    }

    100%{

        transform:
        translateX(0);

    }

}

/*==============================
 Floating Particles
==============================*/

.particle{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#D4AF37;

    box-shadow:
    0 0 12px rgba(212,175,55,.6);

    animation:particleFloat 9s ease-in-out infinite;

}

.p1{

    top:18%;

    left:58%;

}

.p2{

    top:42%;

    left:77%;

    animation-delay:2s;

}

.p3{

    top:63%;

    left:70%;

    animation-delay:4s;

}

.p4{

    top:25%;

    left:92%;

    animation-delay:6s;

}

@keyframes particleFloat{

    0%,100%{

        transform:
        translateY(0)
        scale(1);

        opacity:.6;

    }

    50%{

        transform:
        translateY(-20px)
        scale(1.4);

        opacity:1;

    }

}

/*==============================
 Button Shine
==============================*/

.primary-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.5),
        transparent);

    animation:shine 3s linear infinite;

}

@keyframes shine{

    100%{

        left:180%;

    }

}

/*==============================
 Fade Animation
==============================*/

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1.2s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==============================
 Responsive
==============================*/

@media(max-width:991px){

.hero-glow,
.hero-circle,
.lantern,
.birds,
.particle{

display:none;

}

.hero-image img{

max-width:500px;

}

}

@media(max-width:768px){

.hero-image{

margin-top:40px;

}

.hero-image img{

max-width:100%;

}

}
/* ===========================
STATISTICS
=========================== */

.stats{
    padding:60px 0;
}

.stats-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{

    background:#fff;
    text-align:center;
    padding:40px 20px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-10px);
}

.stat-card i{

    font-size:42px;
    color:#198754;
    margin-bottom:18px;
}

.stat-card h3{

    font-size:34px;
    color:#198754;
}

.stat-card p{

    color:#777;
}

/* ===========================
COMMUNITY
=========================== */

.community{

    padding:90px 0;
}

.community-grid{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
}

.small-heading{

    color:#198754;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:12px;
}

.community h2{

    font-size:42px;
    margin-bottom:25px;
}

.community h2 span{

    color:#198754;
}

.cards{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.info-card{

    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.info-card:hover{

    transform:translateY(-8px);
}

.info-card i{

    font-size:40px;
    color:#198754;
    margin-bottom:20px;
}

.info-card h3{

    margin-bottom:15px;
}

.info-card p{

    color:#777;
    margin-bottom:20px;
}

.info-card a{

    color:#198754;
    font-weight:600;
}

.mb_30{
    margin-bottom:30px;
}

/* ===========================
   HAMBURGER MENU
=========================== */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background: #0f5132;
    border-radius: 3px;
    transition: .35s;
}

.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

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

/* --- Tablet (≤1100px) --- */
@media (max-width: 1100px) {

    .top-bar { display: none; }

    .hero-grid { grid-template-columns: 1fr; text-align: center; }

    .hero-image {
        position: relative;
        width: 100%;
        left: auto;
        margin-top: 40px;
        animation: none;
    }

    .hero-image img { max-width: 480px; margin: 0 auto; }

    .hero-content { animation: none; }

    .hero-buttons { justify-content: center; }

    .description { margin-left: auto; margin-right: auto; }

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

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

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

    /* Hamburger visible */
    .hamburger { display: flex; }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        box-shadow: 0 20px 40px rgba(0,0,0,.12);
        z-index: 999;
        padding: 10px 0 20px;
        border-top: 2px solid #e7f7ed;
    }

    .menu.open { display: flex; }

    .menu li a {
        display: block;
        padding: 14px 30px;
        font-size: 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .menu li a.active {
        color: #198754;
        font-weight: 700;
        background: #e7f7ed;
    }

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

    .donate-btn {
        display: inline-flex;
        padding: 9px 16px;
        font-size: 13px;
        gap: 6px;
        margin-right: 0;
        flex-shrink: 0;
    }

    /* Donate inside mobile menu */
    .menu-donate-mobile{
        display:block;
        margin:14px 20px 6px;
        background:linear-gradient(135deg,#198754,#0f5132);
        color:#fff;
        text-align:center;
        padding:14px;
        border-radius:14px;
        font-weight:700;
        font-size:15px;
        box-shadow:0 6px 20px rgba(25,135,84,.3);
    }

    .nav-flex {
        position: relative;
        min-height: 70px;
        gap: 12px;
    }

    .logo { flex: 1; min-width: 0; }

    .logo-text h2 { font-size: 18px; }

    .logo-text p { font-size: 12px; }

    .logo-circle { width: 48px; height: 48px; flex-shrink: 0; }

    /* Prayer strip */
    .timing-grid {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 14px;
    }

    .time-box { padding: 20px 10px; }

    .time-box:nth-child(3n) { border-right: none; }

    .time-box:nth-child(4),
    .time-box:nth-child(5) { border-top: 1px solid #ececec; }

    .prayer-header { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {

    .hero { padding: 60px 0 40px; }

    .hero h1 { font-size: 38px; }

    .hero-image img { max-width: 100%; }

    .hero-glow, .hero-circle, .lantern, .birds, .particle { display: none; }

    .cards, .stats-grid { grid-template-columns: 1fr; }

    .community { padding: 60px 0; }

    .community h2 { font-size: 32px; }

    /* Prayer strip — single column horizontal rows */
    .timing-grid {
        grid-template-columns: 1fr !important;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0,0,0,.07);
    }

    .time-box {
        display: grid !important;
        grid-template-columns: 36px 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        border-right: none;
        border-top: none !important;
        border-bottom: 1px solid #ececec;
        text-align: left;
    }

    .time-box:last-child { border-bottom: none; }

    .time-box i { font-size: 20px; margin-bottom: 0; text-align: center; }

    .time-box h4 { margin-bottom: 0; font-size: 15px; }

    .time-box span {
        font-weight: 700;
        color: #0f5132;
        font-size: 14px;
        white-space: normal;
        text-align: right;
        line-height: 1.35;
        max-width: 200px;
    }

    .primary-btn, .secondary-btn { text-align: center; justify-content: center; }

    .hero-buttons { flex-direction: column; align-items: center; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; text-align: center; }

    .social-icons { justify-content: center; }

    .footer-contact p { justify-content: center; display: flex; align-items: center; gap: 8px; }
}

/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {

    .hero h1 { font-size: 30px; }

    .tag { font-size: 11px; padding: 6px 14px; }

    .description { font-size: 15px; }

    .timing-grid { border-radius: 10px; }

    .time-box { padding: 13px 14px; gap: 10px; }

    .stat-card { padding: 28px 16px; }

    .stat-card h3 { font-size: 28px; }

    .donate-btn { padding: 8px 12px; font-size: 12px; }

    .logo-circle { width: 40px; height: 40px; }

    .logo-text h2 { font-size: 16px; }

    /* Home prayer strip — keep notes from overflowing */
    .time-box { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 12px 12px; }

    .time-box span { font-size: 13px; max-width: 150px; }

    .primary-btn, .secondary-btn { width: 100%; }

}

/* --- Very small mobile (≤380px) --- */
@media (max-width: 380px) {

    .nav-flex { gap: 8px; }

    .logo { gap: 8px; }

    .logo-circle { width: 34px; height: 34px; }

    .logo-text h2 { font-size: 14px; }

    .logo-text p { font-size: 10px; }

    .donate-btn { padding: 7px 10px; font-size: 11px; gap: 4px; }

    .hamburger span { width: 22px; height: 3px; }

    .hero { padding: 44px 0 30px; }

    .hero h1 { font-size: 26px; }

    .tag { font-size: 10px; padding: 5px 12px; }

    .description { font-size: 14px; }

    .container { width: 92%; }

    .time-box { grid-template-columns: 24px 1fr auto; gap: 8px; padding: 11px 10px; }

    .time-box i { font-size: 17px; }

    .time-box h4 { font-size: 13px; }

    .time-box span { font-size: 12px; max-width: 120px; }

    .stat-card { padding: 22px 12px; }

    .stat-card h3 { font-size: 24px; }

    .community { padding: 44px 0; }

    .community h2 { font-size: 26px; }

    .info-card { padding: 24px 18px; }

    .footer { padding: 50px 0 0; }

    .footer-grid { gap: 28px; }

    .audio-toggle { width: 52px; height: 52px; right: 16px; bottom: 16px; font-size: 18px; }

}

.prayer-strip{
background:#eef5ef;
padding:35px 0;
}

.prayer-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.weekly-btn{
background:#0c5b3c;
color:#fff;
padding:12px 22px;
border-radius:10px;
}

.timing-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.time-box{
padding:28px;
text-align:center;
border-right:1px solid #ececec;
}

.time-box:last-child{
border:none;
}

.time-box i{
font-size:28px;
color:#c69220;
margin-bottom:12px;
}

.time-box h4{
margin-bottom:8px;
}

.time-box span{
font-weight:700;
}

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

.footer{
    background:#0f5132;
    color:#fff;
    padding:70px 0 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr 1fr;
    gap:40px;
}

.footer h3,
.footer h4{
    margin-bottom:20px;
}

.footer p{
    color:#ddd;
    line-height:1.8;
}

.footer ul{ list-style:none; }

.footer ul li{ margin-bottom:12px; }

.footer ul li a{
    color:#ddd;
    transition:.3s;
}

.footer ul li a:hover{ color:#fff; }

.footer-contact p{ margin-bottom:15px; }

.footer-contact i{
    margin-right:10px;
    color:#FFD54F;
}

.social-icons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.social-icons a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#198754;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    transition:.3s;
}

.social-icons a:hover{
    transform:translateY(-4px);
    background:#146c43;
}

.footer-bottom{
    margin-top:50px;
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
    color:#ddd;
    font-size:14px;
}

/* Responsive footer */
@media(max-width:1100px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media(max-width:768px){
    .footer-grid{ grid-template-columns:1fr; text-align:center; }
    .social-icons{ justify-content:center; }
    .footer-contact p{ justify-content:center; display:flex; align-items:center; gap:8px; }
}


.audio-toggle{
    position:fixed;
    right:24px;
    bottom:24px;
    width:62px;
    height:62px;
    border-radius:50%;
    background:linear-gradient(135deg,#198754,#0f5132);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(25,135,84,.45);
    z-index:9999;
    transition:.3s;
    font-size:22px;
}

/* idle pulse ring */
.audio-toggle::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:2px solid rgba(25,135,84,.4);
    animation:ringPulse 2.5s ease-out infinite;
    pointer-events:none;
}

.audio-toggle::after{
    content:"Azan";
    position:absolute;
    bottom:calc(100% + 10px);
    right:0;
    background:#0f5132;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
    opacity:0;
    transform:translateY(4px);
    transition:.25s;
    pointer-events:none;
    font-family:'Poppins',sans-serif;
}

.audio-toggle:hover::after{ opacity:1; transform:translateY(0); }

.audio-toggle:hover{ transform:scale(1.1); }

.audio-toggle.active{
    background:linear-gradient(135deg,#FFD54F,#f0b800);
    color:#0f5132;
    box-shadow:0 8px 28px rgba(240,184,0,.45);
}

.audio-toggle.active::before{
    border-color:rgba(240,184,0,.5);
    animation:ringPulse 1.2s ease-out infinite;
}

.audio-toggle.active::after{ content:"Playing"; background:#c69220; color:#fff; }

.audio-toggle.active i{ animation:pulseSpeaker 1.4s ease-in-out infinite; }

@keyframes ringPulse{
    0%{ transform:scale(1); opacity:.7; }
    100%{ transform:scale(1.55); opacity:0; }
}

@keyframes pulseSpeaker{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.22); }
}

.nav-audio{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:#fff;
    border:1px solid #198754;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
    color:#198754;
    font-weight:600;
}

.nav-audio:hover{
    background:#198754;
    color:#fff;
}

.nav-audio.active{
    background:#198754;
    color:#fff;
}

/* ==========================================
   LIVELY ANIMATIONS & TRANSITIONS
   — bloom entrance, scroll reveal, stars
========================================== */

/* Only hide elements when JS is active (no-JS fallback stays visible) */
.js-anim .reveal,
.js-anim .bloom {
    opacity: 0;
    will-change: opacity, transform;
}

/* Scroll reveal — gentle rise */
.js-anim .reveal {
    transform: translateY(30px);
    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.js-anim .reveal.reveal-left  { transform: translateY(0) translateX(-36px); }
.js-anim .reveal.reveal-right { transform: translateY(0) translateX(36px); }
.js-anim .reveal.reveal-zoom  { transform: translateY(0) scale(.85); }

.js-anim .reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Bloom — like a flower unfolding */
.js-anim .bloom {
    transform: scale(.5) rotate(-8deg);
    transition:
        opacity .9s cubic-bezier(.34, 1.56, .64, 1),
        transform .9s cubic-bezier(.34, 1.56, .64, 1);
}

.js-anim .bloom.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Stagger helpers */
.d1 { transition-delay: .06s; }
.d2 { transition-delay: .12s; }
.d3 { transition-delay: .18s; }
.d4 { transition-delay: .24s; }
.d5 { transition-delay: .30s; }
.d6 { transition-delay: .36s; }

/* Floating stars (injected on mobile only) */
.star-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.star {
    position: absolute;
    top: -28px;
    color: #FFD54F;
    opacity: 0;
    animation: starFall linear infinite;
    text-shadow: 0 0 10px rgba(255, 213, 79, .9), 0 0 22px rgba(255, 213, 79, .5);
    line-height: 1;
}

.star::before {
    content: "✦";
    display: block;
    line-height: 1;
}

@keyframes starFall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(.4); opacity: 0; }
    12%  { opacity: .95; }
    50%  { transform: translateY(50vh) translateX(18px) rotate(180deg) scale(1); }
    88%  { opacity: .7; }
    100% { transform: translateY(108vh) translateX(-22px) rotate(360deg) scale(.5); opacity: 0; }
}

/* Twinkling sparkle stars scattered on the page (mobile) */
.sparkle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #FFD54F;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0;
    animation: starTwinkle ease-in-out infinite;
    pointer-events: none;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    50%      { opacity: .9; transform: scale(1) rotate(25deg); }
}

/* Mobile menu items slide in when opened */
@media (max-width: 1100px) {
    .menu.open li {
        animation: menuItemIn .45s cubic-bezier(.34, 1.56, .64, 1) backwards;
    }
    .menu.open li:nth-child(1) { animation-delay: .04s; }
    .menu.open li:nth-child(2) { animation-delay: .09s; }
    .menu.open li:nth-child(3) { animation-delay: .14s; }
    .menu.open li:nth-child(4) { animation-delay: .19s; }
    .menu.open li:nth-child(5) { animation-delay: .24s; }
}

@keyframes menuItemIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Gentle attract pulse on donate button (mobile) */
@media (max-width: 768px) {
    .donate-btn {
        animation: attractPulse 2.6s ease-in-out infinite;
    }
}

@keyframes attractPulse {
    0%, 100% { transform: translateY(0);     box-shadow: 0 6px 20px rgba(25, 135, 84, .35); }
    50%      { transform: translateY(-2px);  box-shadow: 0 10px 30px rgba(25, 135, 84, .55); }
}

/* Icon micro-motion on hover (desktop / trackpad) */
@media (hover: hover) {
    .stat-card i,
    .info-card i,
    .cause-icon,
    .ways-card-header i,
    .mission-card .icon-wrap,
    .contact-icon {
        transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
    }

    .stat-card:hover i,
    .info-card:hover i,
    .cause-card:hover .cause-icon,
    .ways-card:hover .ways-card-header i,
    .mission-card:hover .icon-wrap,
    .contact-detail:hover .contact-icon {
        transform: translateY(-6px) scale(1.12) rotate(-6deg);
    }
}

/* Tap feedback on touch devices */
@media (hover: none) {
    .stat-card:active,
    .info-card:active,
    .cause-card:active,
    .ways-card:active,
    .program-card:active,
    .leader-box:active,
    .gallery-item:active {
        transform: scale(.96);
    }
}

/* Animated gradient on page hero */
.page-hero {
    background-size: 300% 300%;
    animation: heroGradient 14s ease infinite;
}

@keyframes heroGradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Soft float for stat numbers & section icons */
.stat-card h3 {
    animation: softFloat 5s ease-in-out infinite;
}

@keyframes softFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Ripple effect on buttons & chips */
.primary-btn,
.secondary-btn,
.donate-btn,
.submit-btn,
.filter-btn,
.copy-btn,
.weekly-btn,
.donate-now-cta,
.about-feature {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transform: translate(-50%, -50%) scale(0);
    animation: rippleAnim .65s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnim {
    to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .js-anim .reveal,
    .js-anim .bloom {
        opacity: 1 !important;
        transform: none !important;
    }
}