/*=========================================
    RESPONSIVE SYSTEM
    Centro Cultural Luz
=========================================*/


/* =========================================
   LARGE DESKTOP
   1400px+
========================================= */

@media (min-width:1400px){

}

/* Keep the hero start aligned across all languages on wide, short screens.
   Latin copy uses a tighter type scale below so every action remains visible. */
@media (min-width:1201px) and (max-height:900px){

    .hero{
        align-items:flex-start;
        padding-top:170px;
    }

    html[lang="en"] .hero-badge,
    html[lang="es"] .hero-badge{
        margin-bottom:20px;
        padding-block:12px;
    }

    html[lang="en"] .hero-left h1,
    html[lang="es"] .hero-left h1{
        font-size:clamp(3.1rem,3.8vw,3.6rem);
        line-height:1.02;
        margin-bottom:18px;
    }

    html[lang="en"] .hero-left p,
    html[lang="es"] .hero-left p{
        font-size:1rem;
        line-height:1.65;
        margin-bottom:24px;
    }

}


/* =========================================
   LAPTOP
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Navbar
    ====================== */

    .navbar-nav{

        gap:26px;

    }

    .btn-donate{

        min-width:120px;

        padding:0 22px;

    }

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

    .hero{

        padding-block:160px 80px;

    }

    .hero-container{

        width:94%;

        gap:50px;

        align-items:center;

    }

    .hero-left{

        max-width:580px;

    }

    .hero-left h1{

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

        line-height:1.08;

    }

    .hero-left p{

        max-width:560px;

    }

    .hero-right{

        max-width:520px;

        margin-left:auto;

    }

    .hero-video-card{

        border-radius:24px;

    }

}


/* =========================================
   SMALL LAPTOP
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Navbar
    ====================== */

    .logo{
        height:54px;
    }

    .navbar{
        min-height:82px;
    }

    .navbar-brand{
        margin-right:28px;
    }

    .navbar-nav{
        gap:18px;
        margin-right:16px;
    }

    .nav-link{
        font-size:.90rem;
        white-space:nowrap;
    }

    .nav-right{
        gap:14px;
    }

    .language-switch{
        gap:6px;
    }

    .language-switch a{
        font-size:.80rem;
    }

    .btn-donate{
        min-width:108px;
        height:48px;
        padding:0 18px;
        font-size:.85rem;
    }

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

    .hero{
        padding-top:145px;
        padding-bottom:70px;
    }

    .hero-container{

        width:90%;

        display:grid;

        grid-template-columns:1fr;

        justify-items:center;

        align-items:center;

        text-align:center;

        gap:55px;

    }

    .hero-left{

        width:100%;

        max-width:720px;

        text-align:center;

    }

    .hero-badge{

        margin-inline:auto;
        margin-bottom:28px;

    }

    .hero-left h1{

        font-size:clamp(3rem,4vw,3.8rem);

        line-height:1.1;

        letter-spacing:-1px;

        margin-bottom:24px;

    }

    .hero-left p{

        max-width:650px;

        margin:0 auto 38px;

        font-size:1.05rem;

        line-height:1.8;

    }

    .hero-buttons{

        justify-content:center;

        gap:18px;

    }

    .hero-buttons a{

        min-width:185px;

    }

    .hero-right{

        width:100%;

        max-width:620px;

        margin:0 auto;

    }

    .hero-video-card{

        border-radius:24px;

    }

}

/* =========================================
   TABLET
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Header
    ====================== */

    #header{

        position:fixed;

        top:0;

        left:0;

        width:100%;

        background:#131B29;

        padding:14px 0;

        box-shadow:0 8px 25px rgba(0,0,0,.15);

    }

    .navbar{

        min-height:72px;
        position:relative;

    }

    .logo{

        height:56px;

    }

    .navbar.navbar-expand-lg .navbar-toggler{

        display:block;

        border:none;

        font-size:30px;

        color:#fff;

    }

    .navbar.navbar-expand-lg .navbar-toggler:focus{

        box-shadow:none;

    }

    /* ======================
       Mobile Menu
    ====================== */

    .navbar-collapse{

        position:absolute;
        top:calc(100% + 14px);
        left:calc(clamp(16px, 3vw, 24px) * -1);
        right:auto;
        width:calc(100% + (2 * clamp(16px, 3vw, 24px)));
        margin-top:0;

        padding:25px;

        background:linear-gradient(
            180deg,
            #131B29 0%,
            #101A2A 100%
        );

        border-radius:0 0 24px 24px;

        border-top:1px solid rgba(150,106,48,.42);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 20px 45px rgba(4,12,23,.34);

        transform-origin:top center;

        will-change:height, opacity, transform;

    }

    .navbar-collapse.collapsing{

        display:block !important;

        overflow:hidden;

        opacity:.72;

        transform:translateY(-8px) scaleY(.98);

        transition:
            height .34s cubic-bezier(.22,1,.36,1),
            opacity .22s ease,
            transform .34s cubic-bezier(.22,1,.36,1);

    }

    .navbar-collapse.collapse.show{

        animation:eabicMenuOpen .34s cubic-bezier(.22,1,.36,1) both;

    }

    @keyframes eabicMenuOpen{

        from{
            opacity:0;
            transform:translateY(-10px) scaleY(.97);
        }

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

    }

    @media (prefers-reduced-motion:reduce){

        .navbar-collapse.collapsing,
        .navbar-collapse.collapse.show{
            animation:none;
            transition:none;
        }

    }

    .navbar-nav{

        gap:18px;

        align-items:flex-start;
        margin-right:0;

    }

    .navbar-collapse.collapse:not(.show){

        display:none !important;

    }

    .navbar-collapse.collapse.show{

        display:block !important;

    }

    .nav-link{

        font-size:18px;

        padding:4px 0 !important;

    }

    .nav-right{

        margin-top:24px;

        padding-top:22px;

        border-top:1px solid rgba(255,255,255,.12);

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .language-switch{

        width:100%;
        justify-content:flex-start;

    }

    .btn-donate{

        width:100%;

        height:54px;

        justify-content:center;

    }

    body.is-rtl .navbar{

        direction:ltr;

    }

    body.is-rtl .navbar-brand{

        margin-right:0;

    }

    body.is-rtl .hero-left{

        text-align:center;

    }

    body.is-rtl .hero-badge{

        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        margin-left:auto;
        margin-right:auto;

    }

    body.is-rtl .hero-buttons{

        justify-content:center;

    }

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

    .hero{

        height:auto;

        min-height:auto;

        padding-block:155px 80px;

    }

    .hero-container{

        width:94%;

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .hero-left{

        order:1;

        max-width:700px;

        margin:auto;

    }

    .hero-right{

        order:2;

        width:100%;

        max-width:560px;

        margin:auto;

    }

    .hero-badge{

        margin-bottom:24px;

    }

    .hero-left h1{

        font-size:clamp(2.6rem,6vw,3.3rem);

        line-height:1.12;

    }

    .hero-left p{

        max-width:620px;

        margin:0 auto 35px;

        font-size:18px;

    }

    .hero-buttons{

        justify-content:center;

        gap:18px;

    }

    .hero-buttons a{

        min-width:190px;

    }

    .scroll-down{

        bottom:30px;

    }

}


/* =========================================
   LARGE MOBILE
   حتى 768px
========================================= */

@media (max-width:768px){

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

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:105px;

    }

    .hero-container{

        width:94%;

        gap:35px;

    }

    .hero-left{

        width:100%;

        max-width:100%;

        margin:auto;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:500px;

        margin:auto;

    }

    .hero-badge{

        margin-bottom:22px;

        padding:12px 22px;

        font-size:11px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:clamp(2.2rem,6vw,2.8rem);

        line-height:1.15;

        margin-bottom:22px;

        letter-spacing:-1px;

        text-wrap:balance;

    }

    .hero-left p{

        max-width:560px;

        margin:0 auto 35px;

        font-size:17px;

        line-height:1.75;

    }

    .hero-buttons{

        justify-content:center;

        gap:16px;

        flex-wrap:wrap;

    }

    .hero-buttons a{

        min-width:180px;

    }

    .hero-video-card{

        border-radius:22px;

    }

    .scroll-down{

        bottom:40px;

    }

}


/* =========================================
   COLLAPSED MENU
   Phones and portrait tablets
========================================= */

@media (max-width:991.98px){

    .navbar-collapse{

        padding:18px clamp(32px, 5vw, 48px) 22px;
        max-height:calc(100dvh - 100px);
        overflow-y:auto;

    }

    .navbar-nav{

        gap:6px;

    }

    .nav-link{

        padding:7px 0 !important;

    }

    .nav-right{

        margin-top:12px;
        padding-top:14px;
        gap:12px;

    }

}

/* =========================================
   MOBILE
   حتى 576px
========================================= */

@media (max-width:576px){

    /* ======================
       Header
    ====================== */

    .navbar{

        min-height:66px;

    }

    .logo{

        height:52px;

    }

    .navbar-collapse{

        left:calc(clamp(16px, 3vw, 24px) * -1);
        right:auto;
        width:calc(100% + (2 * clamp(16px, 3vw, 24px)));
        padding:16px 30px 20px;
        border-radius:0 0 20px 20px;
        max-height:calc(100dvh - 94px);
        overflow-y:auto;

    }

    .navbar-nav{

        gap:6px;

    }

    .nav-link{

        font-size:17px;

        padding:7px 0 !important;

    }

    .nav-right{

        margin-top:12px;
        padding-top:14px;
        gap:12px;

    }

    body.is-rtl .navbar-collapse{

        direction:rtl;
        text-align:right;

    }

    body.is-rtl .navbar-nav,
    body.is-rtl .nav-right{

        align-items:stretch;

    }

    .btn-donate{

        height:52px;

        font-size:15px;

    }

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

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:92px;

    }

    .hero-container{

        width:94%;

        gap:30px;

    }

    .hero-left{

        width:100%;

        max-width:100%;

        margin:auto;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:420px;

        margin:auto;

    }

    .hero-badge{

        padding:10px 18px;

        margin-bottom:20px;

        font-size:10px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:clamp(1.9rem,8vw,2.4rem);

        line-height:1.15;

        letter-spacing:-1px;

        margin-bottom:20px;

        text-wrap:balance;

    }

    .hero-left p{

        max-width:100%;

        margin:0 auto 30px;

        font-size:16px;

        line-height:1.7;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:14px;

        width:100%;

    }

    .hero-buttons a{

        width:100%;

        min-width:unset;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        min-height:54px;

        display:flex;

        justify-content:center;

        align-items:center;

        text-align:center;

    }

    .hero-video-card{

        border-radius:20px;

    }

    .scroll-down{

        bottom:38px;

    }

}
/* =========================================
   Surface Duo
   540 × 720
========================================= */

@media screen and (width:540px) and (height:720px){

    .hero-left{
        margin-top:0;
    }

}

/* =========================================
   LARGE PHONES
   حتى 430px
========================================= */

@media (max-width:430px){

    /* ======================
       Header
    ====================== */

    .logo{

        height:50px;

    }

    .navbar{

        min-height:64px;

    }

    .navbar-collapse{

        padding:16px 30px 20px;

    }

    .nav-link{

        font-size:16px;

    }

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

    .hero{

        padding-top:130px;

        padding-bottom:86px;

    }

    .hero-container{

        width:94%;

        gap:26px;

    }

    .hero-right{

        max-width:360px;

    }

    .hero-badge{

        font-size:10px;

        padding:10px 18px;

        margin-bottom:14px;

    }

    .hero-left h1{

        font-size:2rem;

        line-height:1.12;

        letter-spacing:-1px;

        margin-bottom:18px;

    }

    .hero-left p{

        font-size:15px;

        line-height:1.7;

        margin-bottom:28px;

    }

    .hero-buttons{

        gap:12px;

    }

    .btn-primary,
    .btn-secondary{

        min-height:52px;

        font-size:15px;

    }

    .scroll-down{

        bottom:36px;

    }

    body.is-rtl .hero-left h1{

        font-size:1.85rem;
        line-height:1.18;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        font-size:14px;
        line-height:1.75;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left{

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-inline:auto;
        inset-inline:auto;
        justify-self:center !important;
        text-align:center !important;

    }

    body.is-rtl .hero-buttons{

        align-items:center;

    }

    body.is-rtl .hero-badge{

        display:flex;
        justify-content:center;
        margin-inline:auto;
        text-align:center !important;
        align-self:center;

    }

}


/* =========================================
   EXTRA SMALL
   حتى 390px
========================================= */

@media (max-width:390px){

    /* ======================
       Header
    ====================== */

    .logo{

        height:46px;

    }

    .navbar{

        min-height:60px;

    }

    .navbar-collapse{

        padding:14px 28px 18px;

    }

    .nav-link{

        font-size:15px;

    }

    .btn-donate{

        height:50px;

        font-size:14px;

    }

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

    .hero{

        padding-top:125px;

        padding-bottom:82px;

    }

    .hero-container{

        gap:22px;

    }

    .hero-badge{

        font-size:9px;

        padding:9px 16px;

        margin-bottom:16px;

        letter-spacing:.8px;

    }

    .hero-left h1{

        font-size:1.8rem;

        line-height:1.1;

        margin-bottom:16px;

    }

    .hero-left p{

        font-size:14px;

        line-height:1.65;

        margin-bottom:24px;

    }

    .hero-right{

        max-width:320px;

    }

    .btn-primary,
    .btn-secondary{

        min-height:50px;

        font-size:14px;

    }

    .scroll-down{

        bottom:34px;

        font-size:24px;

    }

    body.is-rtl .hero-left h1{

        font-size:1.65rem;
        line-height:1.2;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        font-size:13px;
        line-height:1.7;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left{

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-inline:auto;
        inset-inline:auto;
        justify-self:center !important;
        text-align:center !important;

    }

    body.is-rtl .hero-buttons{

        align-items:center;

    }

    body.is-rtl .hero-badge{

        display:flex;
        justify-content:center;
        margin-inline:auto;
        text-align:center !important;
        align-self:center;

    }

}
/* =========================================
   iPad Pro Portrait
   1024 × 1366
========================================= */

@media (width:1024px) and (min-height:1200px){

    .hero{

        padding-top:140px;
        padding-bottom:70px;

    }

    .hero-container{

        width:90%;

        gap:60px;

        align-items:center;

    }

    .hero-left{

        max-width:560px;

    }

    .hero-left h1{

        font-size:3.5rem;

    }

    .hero-left p{

        font-size:1.15rem;

    }

}
/* =========================================
   Nest Hub فقط
========================================= */

@media (width:1024px) and (height:600px){

    .hero{

        padding-top:90px;
        padding-bottom:25px;

    }

    .hero-container{

        width:92%;

        grid-template-columns:1.1fr .9fr;

        gap:40px;

        align-items:center;

    }

    .hero-left{

        max-width:500px;

    }

    .hero-badge{

        margin-bottom:12px;

        padding:10px 20px;

        font-size:.70rem;

    }

    .hero-left h1{

        font-size:2.6rem;

        line-height:1;

        margin-bottom:12px;

    }

    .hero-left p{

        font-size:.90rem;

        line-height:1.6;

        margin-bottom:18px;

    }

    .hero-buttons{

        gap:12px;

    }

    .hero-buttons a{

        min-width:150px;

        height:46px;

    }

    .hero-right{

        max-width:360px;

    }

}
/* =========================================
   Full HD Laptop
========================================= */

@media (min-width:1366px){

    .hero-badge{
        margin-top:18px;
    }

}

/* =========================================
   IMPACT
========================================= */

@media (max-width:991px){

    .impact-grid{

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

        gap:20px;

    }

}

@media (max-width:576px){

    .impact{

        padding:80px 0;

    }

    .impact-title{

        margin-bottom:45px;

    }

    .impact-title h2{

        font-size:2rem;

    }

    .impact-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .impact-card{

        padding:40px 28px;

    }

}
/* =========================================
   Surface Duo
   540 × 720
========================================= */

@media (min-width:540px) and (max-width:550px)
and (min-height:700px) and (max-height:730px){

    /* Hero */

    .hero{

        height:auto;

        min-height:auto;

        padding-top:140px;

        padding-bottom:55px;

    }

    .hero-container{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

    }

    .hero-left{

        margin-top:0;

        text-align:center;

    }

    .hero-left h1{

        font-size:3rem;

        line-height:1.15;

        margin-bottom:20px;

    }

    .hero-left p{

        font-size:1.2rem;

        margin-bottom:30px;

    }

    .hero-buttons{

        justify-content:center;

        width:100%;

    }

    .hero-right{

        width:100%;

        max-width:420px;

        margin:0 auto;

    }

    .hero-video-card{

        border-radius:22px;

        overflow:hidden;

    }

    .hero-video-card video{

        width:100%;

        display:block;

    }

    .scroll-down{

        display:none;

    }

}
/* =========================================
   iPhone SE
   375 × 667
========================================= */

@media (max-width:380px){

    .hero{

        height:auto;

        min-height:100vh;

        padding-top:110px;

        padding-bottom:70px;

    }

    .hero-container{

        gap:25px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-badge{

        font-size:11px;

        padding:10px 18px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:2.5rem;

        line-height:1.15;

        margin-bottom:18px;

    }

    .hero-left p{

        font-size:1rem;

        line-height:1.7;

        margin-bottom:25px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:320px;

        margin:auto;

    }

    .hero-video-card{

        border-radius:20px;

    }

    .scroll-down{

        display:none;

    }

}
/*=========================================
            ABOUT SECTION
=========================================*/

/* ---------- Tablet ---------- */

@media (max-width:991px){

    .about-home{

        padding:90px 0;

    }

    .about-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        max-width:100%;

        text-align:center;

    }

    .about-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .about-features{

        max-width:650px;

        margin:0 auto 40px;

    }

    .about-image{

        max-width:700px;

        margin:auto;

    }

    .about-badge{

        left:20px;

        bottom:20px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:767px){

    .about-home{

        padding:70px 0;

    }

    .about-wrapper{

        gap:45px;

    }

    .about-content h2{

        font-size:2.2rem;

    }

    .about-content p{

        font-size:1rem;

    }

    .about-features{

        grid-template-columns:1fr;

        gap:15px;

    }

    .feature-item{

        justify-content:flex-start;

    }

    .about-badge{

        position:relative;

        left:0;

        bottom:0;

        width:100%;

        margin-top:20px;

        justify-content:center;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .about-home{

        padding:60px 0;

    }

    .about-content h2{

        font-size:1.9rem;

    }

    .about-image img{

        border-radius:22px;

    }

    .about-badge{

        padding:18px 22px;

    }

    .about-badge strong{

        font-size:1.8rem;

    }

}
/*=========================================
        MINISTRIES SECTION
=========================================*/

/* =========================
   Tablet
========================= */

@media (max-width:1024px){

    .programs-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .program-card.large{

        grid-column:auto;

    }

}

/* =========================
   iPad & Small Tablets
========================= */

@media (max-width:768px){

    .programs{

        padding:90px 0;

    }

    .programs-title{

        margin-bottom:55px;

    }

    .program-card{

        min-height:420px;

        border-radius:24px;

    }

    .program-overlay{

        padding:32px;

    }

}

/* =========================
   Mobile
========================= */

@media (max-width:576px){

    .programs{

        padding:80px 0;

    }

    .programs-title h2{

        font-size:2.2rem;

    }

    .programs-title p{

        font-size:.95rem;

    }

    .program-card{

        min-height:360px;

        border-radius:22px;

    }

    .program-overlay{

        padding:25px;

    }

    .program-icon{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .program-icon i{

        font-size:24px;

    }

    .program-overlay h3{

        font-size:2rem;

        margin-bottom:12px;

    }

    .program-overlay p{

        font-size:.95rem;

        line-height:1.7;

        margin-bottom:22px;

    }

    .program-overlay a{

        padding:12px 22px;

        font-size:.95rem;

    }

}

/* =========================
   iPhone SE
========================= */

@media (max-width:390px){

    .program-card{

        min-height:320px;

    }

    .program-overlay{

        padding:22px;

    }

    .program-icon{

        width:54px;

        height:54px;

    }

    .program-icon i{

        font-size:22px;

    }

    .program-overlay h3{

        font-size:1.7rem;

    }

    .program-overlay p{

        font-size:.88rem;

    }

    .program-overlay a{

        padding:10px 18px;

        font-size:.88rem;

    }

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

/* ---------- Tablet ---------- */

@media (max-width:991px){

    .statistics{

        padding:90px 0;

    }

    .statistics-grid{

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

        gap:25px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:767px){

    .statistics{

        padding:80px 0;

    }

    .statistics-title{

        margin-bottom:55px;

    }

    .statistics-title h2{

        font-size:2.3rem;

    }

    .statistics-title p{

        font-size:1rem;

    }

    .statistics-grid{

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

        gap:16px;

    }

    .stat-card{

        padding:30px 15px;

        border-radius:22px;

    }

    .stat-icon{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .stat-icon i{

        font-size:24px;

    }

    .stat-card h3{

        font-size:2.4rem;

    }

    .stat-card span{

        font-size:.92rem;

        line-height:1.5;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .statistics{

        padding:70px 0;

    }

    .statistics-title h2{

        font-size:2rem;

    }

    .statistics-title p{

        font-size:.95rem;

    }

    .statistics-grid{

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

        gap:12px;

    }

    .stat-card{

        padding:25px 12px;

        border-radius:20px;

    }

    .stat-icon{

        width:50px;

        height:50px;

        margin-bottom:15px;

    }

    .stat-icon i{

        font-size:20px;

    }

    .stat-card h3{

        font-size:2rem;

    }

    .stat-card span{

        font-size:.85rem;

        line-height:1.4;

    }

}
/*=========================================
        GALLERY RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .gallery-grid{

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

        grid-auto-rows:240px;

    }

    .gallery-item:first-child{

        grid-column:span 2;

        grid-row:span 2;

    }

    .gallery-item:nth-child(4){

        grid-column:span 1;

        grid-row:span 2;

    }

    .gallery-item:nth-child(5){

        grid-column:span 1;

        grid-row:span 1;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .gallery{

        padding:90px 0;

    }

    .gallery-title{

        margin-bottom:45px;

    }

    .gallery-grid{

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

        grid-auto-rows:220px;

        gap:18px;

    }

    .gallery-item:first-child{

        grid-column:span 2;

        grid-row:span 2;

    }

    .gallery-item:nth-child(4){

        grid-column:span 2;

        grid-row:span 1;

    }

    .gallery-item:nth-child(5),

    .gallery-item:nth-child(6){

        grid-column:span 1;

        grid-row:span 1;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:767px){

    .gallery{

        padding:80px 0;

    }

    .gallery-title h2{

        font-size:2.3rem;

    }

    .gallery-title p{

        font-size:1rem;

    }

    .gallery-filter{

        gap:10px;

        margin-bottom:35px;

    }

    .gallery-filter button{

        padding:12px 22px;

        font-size:14px;

    }

    /* الصفحة الرئيسية */

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:250px;

        gap:18px;

    }

    .gallery-item,

    .gallery-item:first-child,

    .gallery-item:nth-child(2),

    .gallery-item:nth-child(3),

    .gallery-item:nth-child(4),

    .gallery-item:nth-child(5),

    .gallery-item:nth-child(6),

    .gallery-item:nth-child(7){

        grid-column:span 1;

        grid-row:span 1;

    }

    /* Fotos */

    .gallery-grid.simple-grid{

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

        grid-auto-rows:180px;

        gap:16px;

    }

    .gallery-grid.simple-grid .gallery-item{

        grid-column:auto !important;

        grid-row:auto !important;

    }

    /* Vídeos */

    .gallery-grid.simple-grid.show-videos{

        grid-template-columns:1fr;

        grid-auto-rows:240px;

    }

    .gallery-overlay{

        padding:22px;

    }

    .gallery-overlay h3{

        font-size:1.7rem;

    }

    .gallery-overlay p{

        font-size:.95rem;

    }

    .play-btn,

    .gallery-overlay .fa-expand{

        width:58px;

        height:58px;

    }

    /* CTA */

    .gallery-cta{

        padding:45px 30px;

    }

    .gallery-cta h3{

        font-size:2rem;

    }

    .gallery-cta p{

        font-size:1rem;

    }

    /* =====================================
       FIX MAGAZINE LAYOUT ON MOBILE
    ===================================== */

    .gallery-grid:not(.simple-grid) .gallery-item{

        grid-column:auto !important;

        grid-row:auto !important;

    }

    .gallery-grid:not(.simple-grid){

        grid-template-columns:1fr !important;

        grid-auto-rows:250px !important;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .gallery{

        padding:70px 0;

    }

    .gallery-title h2{

        font-size:2rem;

    }

    .gallery-title p{

        font-size:.95rem;

    }

    .gallery-grid{

        grid-auto-rows:220px;

    }

    /* Fotos */

    .gallery-grid.simple-grid{

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

    grid-auto-rows:220px;

    gap:16px;

	}

    /* Vídeos */

    .gallery-grid.simple-grid.show-videos{

        grid-auto-rows:220px;

    }

    .gallery-overlay{

        padding:18px;

    }

    .gallery-overlay h3{

        font-size:1.5rem;

    }

    .gallery-overlay p{

        font-size:.90rem;

        line-height:1.6;

    }

    .play-btn,

    .gallery-overlay .fa-expand{

        width:52px;

        height:52px;

    }

    .play-btn i,

    .gallery-overlay i{

        font-size:18px;

    }

    /* CTA */

    .gallery-cta{

        padding:35px 22px;

    }

    .gallery-cta h3{

        font-size:1.7rem;

    }

    .gallery-cta p{

        font-size:.95rem;

    }

}
/*=========================================
        NEWS RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .news-grid{

        gap:24px;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .news{

        padding:90px 0;

    }

    .news-title{

        margin-bottom:45px;

    }

    .news-grid{

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

        gap:22px;

    }

    .news-card:last-child{

        grid-column:span 2;

        max-width:650px;

        margin-inline:auto;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:767px){

    .news{

        padding:80px 0;

    }

    .news-title{

        margin-bottom:40px;

    }

    .news-title h2{

        font-size:2.3rem;

    }

    .news-title p{

        font-size:1rem;

    }

    .news-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .news-card,

    .news-card:last-child{

        grid-column:auto;

        max-width:100%;

    }

    .news-image{

        height:240px;

    }

    .news-content{

        padding:24px;

    }

    .news-content h3{

        font-size:1.4rem;

    }

    .news-content p{

        font-size:.96rem;

    }

    .news-category{

        top:16px;

        left:16px;

        padding:8px 16px;

        font-size:12px;

    }

    .news-date{

        font-size:12px;

        padding:7px 14px;

    }

    .news-btn{

        margin-top:45px;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .news{

        padding:70px 0;

    }

    .news-title h2{

        font-size:2rem;

    }

    .news-title p{

        font-size:.95rem;

    }

    .news-image{

        height:220px;

    }

    .news-content{

        padding:22px;

    }

    .news-content h3{

        font-size:1.28rem;

    }

    .news-content p{

        font-size:.92rem;

        line-height:1.7;

    }

    .news-category{

        top:14px;

        left:14px;

        padding:7px 14px;

        font-size:11px;

    }

    .news-date{

        font-size:11px;

        padding:6px 12px;

    }

}
/*=========================================
        FOOTER RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .footer-grid{

        gap:45px;

    }

}



/* ---------- Mobile ---------- */

@media (max-width:991px){

    .footer{

        padding:60px 0 25px;

    }

    /* Brand */

    .footer-brand{

        max-width:100%;

        text-align:center;

    }

    .footer-logo img{

        width:min(250px, 72vw);

    }

    .footer-brand p{

        max-width:520px;

        margin:22px auto 28px;

        font-size:.95rem;

        line-height:1.8;

    }

    /* Social */

    .footer-social{

        gap:14px;

    }

    .footer-social a{

        width:46px;

        height:46px;

    }

    /* Hide Desktop Columns */

    .footer .footer-links,
    .footer .footer-ministries{

        display:none;

    }

    /* Footer Grid */

    .footer-grid{

        display:block;

    }

    /* Contact */

    .footer-contact-column{

        display:block;

        max-width:340px;

        margin:0 auto;

        text-align:center;

    }

    .footer-contact-column{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;

    }

    .footer-contact-column h3{

        display:block;
        margin-bottom:22px;

    }

    .footer-contact li{

        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:16px;

    }

    .footer-contact li i{

        width:18px;

        min-width:18px;

        color:#966A30;

        text-align:center;

    }

    .footer-contact li a{

        display:flex;

        align-items:center;

        gap:12px;

        text-decoration:none;

        color:inherit;

    }

    /* Divider */

    .footer-divider{

        margin:30px 0;

    }

    /* Bottom */

    .footer-bottom{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;

        gap:18px;

    }

    .footer-bottom p{

        max-width:500px;

        font-size:.90rem;

        line-height:1.7;

    }

    .back-to-top{

        justify-content:center;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .footer{

        padding:55px 0 20px;

    }

    .footer-logo img{

        width:min(220px, 72vw);

    }

    .footer-brand p{

        max-width:270px;

        font-size:.90rem;

    }

    .footer-social{

        gap:12px;

    }

    .footer-social a{

        width:44px;

        height:44px;

    }

    .footer-social i{

        font-size:18px;

    }

    .footer-contact{

        font-size:.94rem;

    }

    .footer-bottom p{

        font-size:.84rem;

    }

}

/* =========================================
   FOOTER LAYOUT REFINEMENT
========================================= */

@media (max-width:991px){

    .footer{
        padding:48px 0 24px;
    }

    .footer .container{
        padding-inline:clamp(20px, 4vw, 32px);
    }

    .footer-brand,
    body.is-rtl .footer-brand{
        max-width:680px;
        text-align:center;
    }

    .footer-logo img{
        width:clamp(180px, 28vw, 220px);
    }

    .footer-brand p{
        max-width:620px;
        margin:18px auto 24px;
        font-size:.95rem;
        line-height:1.75;
    }

    .footer-social,
    body.is-rtl .footer-social{
        justify-content:center;
        gap:12px;
    }

    .footer-social a{
        width:44px;
        height:44px;
    }

    .footer-divider{
        margin:28px 0;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:32px;
    }

    .footer .footer-links,
    .footer .footer-ministries{
        display:block;
    }

    .footer-contact-column{
        grid-column:1 / -1;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        max-width:620px;
        margin:0 auto;
        text-align:start;
    }

    .footer-contact-column h3{
        margin-bottom:18px;
    }

    .footer-contact li,
    .footer-contact li a{
        align-items:flex-start;
        gap:12px;
    }

    .footer-contact li{
        width:100%;
        margin-bottom:14px;
        line-height:1.7;
    }

    .footer-bottom{
        gap:14px;
    }

}

@media (max-width:767px){

    .footer .footer-links,
    .footer .footer-ministries{
        display:none;
    }

    .footer-grid{
        display:block;
    }

    .footer-contact-column h3{
        text-align:start;
    }

}

@media (max-width:480px){

    .footer{
        padding:40px 0 20px;
    }

    .footer .container{
        padding-inline:20px;
    }

    .footer-logo img{
        width:min(180px, 58vw);
    }

    .footer-brand p{
        max-width:330px;
        margin:16px auto 22px;
        font-size:.88rem;
        line-height:1.7;
    }

    .footer-social a{
        width:42px;
        height:42px;
    }

    .footer-contact{
        font-size:.88rem;
    }

    .footer-contact-column h3{
        font-size:1.2rem;
        margin-bottom:16px;
    }

    .footer-divider{
        margin:24px 0;
    }

    .footer-bottom{
        gap:12px;
    }

}

/* =========================================
   HOME PAGE RHYTHM
   One spacing system across all sections
========================================= */

:root{
    --home-section-space:72px;
    --home-content-gap:52px;
}

.impact,
.about-home,
.programs,
.statistics,
.gallery,
.news,
.testimonials{
    padding-block:var(--home-section-space);
}

.impact > .container > .footer-column,
.programs-title,
.statistics-title,
.news-title,
.testimonials-title{
    margin-bottom:var(--home-content-gap);
}

.gallery-title{
    margin-bottom:36px;
}

.gallery-filter{
    margin-bottom:var(--home-content-gap);
}

.news-btn{
    margin-top:var(--home-content-gap);
}

.gallery-cta{
    margin-top:68px;
}

@media (max-width:1200px){
    :root{
        --home-section-space:68px;
        --home-content-gap:48px;
    }
}

@media (max-width:991px){
    :root{
        --home-section-space:64px;
        --home-content-gap:44px;
    }

    .gallery-title{
        margin-bottom:32px;
    }

    .gallery-cta{
        margin-top:58px;
    }
}

@media (max-width:767px){
    :root{
        --home-section-space:56px;
        --home-content-gap:38px;
    }

    .gallery-title{
        margin-bottom:28px;
    }

    .gallery-cta{
        margin-top:50px;
    }
}

@media (max-width:480px){
    :root{
        --home-section-space:48px;
        --home-content-gap:32px;
    }

    .gallery-title{
        margin-bottom:24px;
    }

    .gallery-cta{
        margin-top:42px;
    }
}

/*=========================================
    RESPONSIVE SYSTEM
    Centro Cultural Luz
=========================================*/


/* =========================================
   LARGE DESKTOP
   1400px+
========================================= */

@media (min-width:1400px){

}

/* Keep the longer Latin hero copy clear of the desktop navigation on
   wide, short screens. Arabic has its own balanced two-line composition. */
@media (min-width:1201px) and (max-height:900px){

    html[lang="en"] .hero,
    html[lang="es"] .hero{
        align-items:flex-start;
        padding-top:170px;
    }

    html[lang="en"] .hero-badge,
    html[lang="es"] .hero-badge{
        margin-bottom:20px;
        padding-block:12px;
    }

    html[lang="en"] .hero-left h1,
    html[lang="es"] .hero-left h1{
        font-size:clamp(3.1rem,3.8vw,3.6rem);
        line-height:1.02;
        margin-bottom:18px;
    }

    html[lang="en"] .hero-left p,
    html[lang="es"] .hero-left p{
        font-size:1rem;
        line-height:1.65;
        margin-bottom:24px;
    }

}


/* =========================================
   LAPTOP
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Navbar
    ====================== */

    .navbar-nav{

        gap:26px;

    }

    .btn-donate{

        min-width:120px;

        padding:0 22px;

    }

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

    .hero{

        padding-block:160px 80px;

    }

    .hero-container{

        width:94%;

        gap:50px;

        align-items:center;

    }

    .hero-left{

        max-width:580px;

    }

    .hero-left h1{

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

        line-height:1.08;

    }

    .hero-left p{

        max-width:560px;

    }

    .hero-right{

        max-width:520px;

        margin-left:auto;

    }

    .hero-video-card{

        border-radius:24px;

    }

}


/* =========================================
   SMALL LAPTOP
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Navbar
    ====================== */

    .logo{
        height:54px;
    }

    .navbar{
        min-height:82px;
    }

    .navbar-brand{
        margin-right:28px;
    }

    .navbar-nav{
        gap:18px;
        margin-right:16px;
    }

    .nav-link{
        font-size:.90rem;
        white-space:nowrap;
    }

    .nav-right{
        gap:14px;
    }

    .language-switch{
        gap:6px;
    }

    .language-switch a{
        font-size:.80rem;
    }

    .btn-donate{
        min-width:108px;
        height:48px;
        padding:0 18px;
        font-size:.85rem;
    }

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

    .hero{
        padding-top:145px;
        padding-bottom:70px;
    }

    .hero-container{

        width:90%;

        display:grid;

        grid-template-columns:1fr;

        justify-items:center;

        align-items:center;

        text-align:center;

        gap:55px;

    }

    .hero-left{

        width:100%;

        max-width:720px;

        text-align:center;

    }

    .hero-badge{

        margin-inline:auto;
        margin-bottom:28px;

    }

    .hero-left h1{

        font-size:clamp(3rem,4vw,3.8rem);

        line-height:1.1;

        letter-spacing:-1px;

        margin-bottom:24px;

    }

    .hero-left p{

        max-width:650px;

        margin:0 auto 38px;

        font-size:1.05rem;

        line-height:1.8;

    }

    .hero-buttons{

        justify-content:center;

        gap:18px;

    }

    .hero-buttons a{

        min-width:185px;

    }

    .hero-right{

        width:100%;

        max-width:620px;

        margin:0 auto;

    }

    .hero-video-card{

        border-radius:24px;

    }

}

/* =========================================
   TABLET
   حتى 1200px
========================================= */

@media (max-width:1200px){

    /* ======================
       Header
    ====================== */

    #header{

        position:fixed;

        top:0;

        left:0;

        width:100%;

        background:#131B29;

        padding:14px 0;

        box-shadow:0 8px 25px rgba(0,0,0,.15);

    }

    .navbar{

        min-height:72px;
        position:relative;

    }

    .logo{

        height:56px;

    }

    .navbar.navbar-expand-lg .navbar-toggler{

        display:block;

        border:none;

        font-size:30px;

        color:#fff;

    }

    .navbar.navbar-expand-lg .navbar-toggler:focus{

        box-shadow:none;

    }

    /* ======================
       Mobile Menu
    ====================== */

    .navbar-collapse{

        position:absolute;
        top:calc(100% + 14px);
        left:calc(clamp(16px, 3vw, 24px) * -1);
        right:auto;
        width:calc(100% + (2 * clamp(16px, 3vw, 24px)));
        margin-top:0;

        padding:25px;

        background:linear-gradient(
            180deg,
            #131B29 0%,
            #101A2A 100%
        );

        border-radius:0 0 24px 24px;

        border-top:1px solid rgba(150,106,48,.42);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 20px 45px rgba(4,12,23,.34);

        transform-origin:top center;

        will-change:height, opacity, transform;

    }

    .navbar-collapse.collapsing{

        display:block !important;

        overflow:hidden;

        opacity:.72;

        transform:translateY(-8px) scaleY(.98);

        transition:
            height .34s cubic-bezier(.22,1,.36,1),
            opacity .22s ease,
            transform .34s cubic-bezier(.22,1,.36,1);

    }

    .navbar-collapse.collapse.show{

        animation:eabicMenuOpen .34s cubic-bezier(.22,1,.36,1) both;

    }

    @keyframes eabicMenuOpen{

        from{
            opacity:0;
            transform:translateY(-10px) scaleY(.97);
        }

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

    }

    @media (prefers-reduced-motion:reduce){

        .navbar-collapse.collapsing,
        .navbar-collapse.collapse.show{
            animation:none;
            transition:none;
        }

    }

    .navbar-nav{

        gap:18px;

        align-items:flex-start;
        margin-right:0;

    }

    .navbar-collapse.collapse:not(.show){

        display:none !important;

    }

    .navbar-collapse.collapse.show{

        display:block !important;

    }

    .nav-link{

        font-size:18px;

        padding:4px 0 !important;

    }

    .nav-right{

        margin-top:24px;

        padding-top:22px;

        border-top:1px solid rgba(255,255,255,.12);

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .language-switch{

        width:100%;
        justify-content:flex-start;

    }

    .btn-donate{

        width:100%;

        height:54px;

        justify-content:center;

    }

    body.is-rtl .navbar{

        direction:ltr;

    }

    body.is-rtl .navbar-brand{

        margin-right:0;

    }

    body.is-rtl .hero-left{

        text-align:center;

    }

    body.is-rtl .hero-badge{

        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        margin-left:auto;
        margin-right:auto;

    }

    body.is-rtl .hero-buttons{

        justify-content:center;

    }

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

    .hero{

        height:auto;

        min-height:auto;

        padding-block:155px 80px;

    }

    .hero-container{

        width:94%;

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .hero-left{

        order:1;

        max-width:700px;

        margin:auto;

    }

    .hero-right{

        order:2;

        width:100%;

        max-width:560px;

        margin:auto;

    }

    .hero-badge{

        margin-bottom:24px;

    }

    .hero-left h1{

        font-size:clamp(2.6rem,6vw,3.3rem);

        line-height:1.12;

    }

    .hero-left p{

        max-width:620px;

        margin:0 auto 35px;

        font-size:18px;

    }

    .hero-buttons{

        justify-content:center;

        gap:18px;

    }

    .hero-buttons a{

        min-width:190px;

    }

    .scroll-down{

        bottom:30px;

    }

}


/* =========================================
   LARGE MOBILE
   حتى 768px
========================================= */

@media (max-width:768px){

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

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:105px;

    }

    .hero-container{

        width:94%;

        gap:35px;

    }

    .hero-left{

        width:100%;

        max-width:100%;

        margin:auto;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:500px;

        margin:auto;

    }

    .hero-badge{

        margin-bottom:22px;

        padding:12px 22px;

        font-size:11px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:clamp(2.2rem,6vw,2.8rem);

        line-height:1.15;

        margin-bottom:22px;

        letter-spacing:-1px;

        text-wrap:balance;

    }

    .hero-left p{

        max-width:560px;

        margin:0 auto 35px;

        font-size:17px;

        line-height:1.75;

    }

    .hero-buttons{

        justify-content:center;

        gap:16px;

        flex-wrap:wrap;

    }

    .hero-buttons a{

        min-width:180px;

    }

    .hero-video-card{

        border-radius:22px;

    }

    .scroll-down{

        bottom:40px;

    }

}


/* =========================================
   COLLAPSED MENU
   Phones and portrait tablets
========================================= */

@media (max-width:991.98px){

    .navbar-collapse{

        padding:18px clamp(32px, 5vw, 48px) 22px;
        max-height:calc(100dvh - 100px);
        overflow-y:auto;

    }

    .navbar-nav{

        gap:6px;

    }

    .nav-link{

        padding:7px 0 !important;

    }

    .nav-right{

        margin-top:12px;
        padding-top:14px;
        gap:12px;

    }

}

/* =========================================
   MOBILE
   حتى 576px
========================================= */

@media (max-width:576px){

    /* ======================
       Header
    ====================== */

    .navbar{

        min-height:66px;

    }

    .logo{

        height:52px;

    }

    .navbar-collapse{

        left:calc(clamp(16px, 3vw, 24px) * -1);
        right:auto;
        width:calc(100% + (2 * clamp(16px, 3vw, 24px)));
        padding:16px 30px 20px;
        border-radius:0 0 20px 20px;
        max-height:calc(100dvh - 94px);
        overflow-y:auto;

    }

    .navbar-nav{

        gap:6px;

    }

    .nav-link{

        font-size:17px;

        padding:7px 0 !important;

    }

    .nav-right{

        margin-top:12px;
        padding-top:14px;
        gap:12px;

    }

    body.is-rtl .navbar-collapse{

        direction:rtl;
        text-align:right;

    }

    body.is-rtl .navbar-nav,
    body.is-rtl .nav-right{

        align-items:stretch;

    }

    .btn-donate{

        height:52px;

        font-size:15px;

    }

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

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:92px;

    }

    .hero-container{

        width:94%;

        gap:30px;

    }

    .hero-left{

        width:100%;

        max-width:100%;

        margin:auto;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:420px;

        margin:auto;

    }

    .hero-badge{

        padding:10px 18px;

        margin-bottom:20px;

        font-size:10px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:clamp(1.9rem,8vw,2.4rem);

        line-height:1.15;

        letter-spacing:-1px;

        margin-bottom:20px;

        text-wrap:balance;

    }

    .hero-left p{

        max-width:100%;

        margin:0 auto 30px;

        font-size:16px;

        line-height:1.7;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:14px;

        width:100%;

    }

    .hero-buttons a{

        width:100%;

        min-width:unset;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        min-height:54px;

        display:flex;

        justify-content:center;

        align-items:center;

        text-align:center;

    }

    .hero-video-card{

        border-radius:20px;

    }

    .scroll-down{

        bottom:38px;

    }

}
/* =========================================
   Surface Duo
   540 × 720
========================================= */

@media screen and (width:540px) and (height:720px){

    .hero-left{
        margin-top:0;
    }

}

/* =========================================
   LARGE PHONES
   حتى 430px
========================================= */

@media (max-width:430px){

    /* ======================
       Header
    ====================== */

    .logo{

        height:50px;

    }

    .navbar{

        min-height:64px;

    }

    .navbar-collapse{

        padding:16px 30px 20px;

    }

    .nav-link{

        font-size:16px;

    }

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

    .hero{

        padding-top:130px;

        padding-bottom:86px;

    }

    .hero-container{

        width:94%;

        gap:26px;

    }

    .hero-right{

        max-width:360px;

    }

    .hero-badge{

        font-size:10px;

        padding:10px 18px;

        margin-bottom:14px;

    }

    .hero-left h1{

        font-size:2rem;

        line-height:1.12;

        letter-spacing:-1px;

        margin-bottom:18px;

    }

    .hero-left p{

        font-size:15px;

        line-height:1.7;

        margin-bottom:28px;

    }

    .hero-buttons{

        gap:12px;

    }

    .btn-primary,
    .btn-secondary{

        min-height:52px;

        font-size:15px;

    }

    .scroll-down{

        bottom:36px;

    }

    body.is-rtl .hero-left h1{

        font-size:1.85rem;
        line-height:1.18;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        font-size:14px;
        line-height:1.75;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left{

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-inline:auto;
        inset-inline:auto;
        justify-self:center !important;
        text-align:center !important;

    }

    body.is-rtl .hero-buttons{

        align-items:center;

    }

    body.is-rtl .hero-badge{

        display:flex;
        justify-content:center;
        margin-inline:auto;
        text-align:center !important;
        align-self:center;

    }

}


/* =========================================
   EXTRA SMALL
   حتى 390px
========================================= */

@media (max-width:390px){

    /* ======================
       Header
    ====================== */

    .logo{

        height:46px;

    }

    .navbar{

        min-height:60px;

    }

    .navbar-collapse{

        padding:14px 28px 18px;

    }

    .nav-link{

        font-size:15px;

    }

    .btn-donate{

        height:50px;

        font-size:14px;

    }

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

    .hero{

        padding-top:125px;

        padding-bottom:82px;

    }

    .hero-container{

        gap:22px;

    }

    .hero-badge{

        font-size:9px;

        padding:9px 16px;

        margin-bottom:16px;

        letter-spacing:.8px;

    }

    .hero-left h1{

        font-size:1.8rem;

        line-height:1.1;

        margin-bottom:16px;

    }

    .hero-left p{

        font-size:14px;

        line-height:1.65;

        margin-bottom:24px;

    }

    .hero-right{

        max-width:320px;

    }

    .btn-primary,
    .btn-secondary{

        min-height:50px;

        font-size:14px;

    }

    .scroll-down{

        bottom:34px;

        font-size:24px;

    }

    body.is-rtl .hero-left h1{

        font-size:1.65rem;
        line-height:1.2;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left p{

        font-size:13px;
        line-height:1.7;
        text-align:center !important;
        width:100%;
        margin-inline:auto;

    }

    body.is-rtl .hero-left{

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-inline:auto;
        inset-inline:auto;
        justify-self:center !important;
        text-align:center !important;

    }

    body.is-rtl .hero-buttons{

        align-items:center;

    }

    body.is-rtl .hero-badge{

        display:flex;
        justify-content:center;
        margin-inline:auto;
        text-align:center !important;
        align-self:center;

    }

}
/* =========================================
   iPad Pro Portrait
   1024 × 1366
========================================= */

@media (width:1024px) and (min-height:1200px){

    .hero{

        padding-top:140px;
        padding-bottom:70px;

    }

    .hero-container{

        width:90%;

        gap:60px;

        align-items:center;

    }

    .hero-left{

        max-width:560px;

    }

    .hero-left h1{

        font-size:3.5rem;

    }

    .hero-left p{

        font-size:1.15rem;

    }

}
/* =========================================
   Nest Hub فقط
========================================= */

@media (width:1024px) and (height:600px){

    .hero{

        padding-top:90px;
        padding-bottom:25px;

    }

    .hero-container{

        width:92%;

        grid-template-columns:1.1fr .9fr;

        gap:40px;

        align-items:center;

    }

    .hero-left{

        max-width:500px;

    }

    .hero-badge{

        margin-bottom:12px;

        padding:10px 20px;

        font-size:.70rem;

    }

    .hero-left h1{

        font-size:2.6rem;

        line-height:1;

        margin-bottom:12px;

    }

    .hero-left p{

        font-size:.90rem;

        line-height:1.6;

        margin-bottom:18px;

    }

    .hero-buttons{

        gap:12px;

    }

    .hero-buttons a{

        min-width:150px;

        height:46px;

    }

    .hero-right{

        max-width:360px;

    }

}
/* =========================================
   Full HD Laptop
========================================= */

@media (min-width:1366px){

    .hero-badge{
        margin-top:18px;
    }

}

/* =========================================
   IMPACT
========================================= */

@media (max-width:991px){

    .impact-grid{

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

        gap:20px;

    }

}

@media (max-width:576px){

    .impact{

        padding:80px 0;

    }

    .impact-title{

        margin-bottom:45px;

    }

    .impact-title h2{

        font-size:2rem;

    }

    .impact-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .impact-card{

        padding:40px 28px;

    }

}
/* =========================================
   Surface Duo
   540 × 720
========================================= */

@media (min-width:540px) and (max-width:550px)
and (min-height:700px) and (max-height:730px){

    /* Hero */

    .hero{

        height:auto;

        min-height:auto;

        padding-top:140px;

        padding-bottom:55px;

    }

    .hero-container{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

    }

    .hero-left{

        margin-top:0;

        text-align:center;

    }

    .hero-left h1{

        font-size:3rem;

        line-height:1.15;

        margin-bottom:20px;

    }

    .hero-left p{

        font-size:1.2rem;

        margin-bottom:30px;

    }

    .hero-buttons{

        justify-content:center;

        width:100%;

    }

    .hero-right{

        width:100%;

        max-width:420px;

        margin:0 auto;

    }

    .hero-video-card{

        border-radius:22px;

        overflow:hidden;

    }

    .hero-video-card video{

        width:100%;

        display:block;

    }

    .scroll-down{

        display:none;

    }

}
/* =========================================
   iPhone SE
   375 × 667
========================================= */

@media (max-width:380px){

    .hero{

        height:auto;

        min-height:100vh;

        padding-top:110px;

        padding-bottom:70px;

    }

    .hero-container{

        gap:25px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-badge{

        font-size:11px;

        padding:10px 18px;

        letter-spacing:1px;

    }

    .hero-left h1{

        font-size:2.5rem;

        line-height:1.15;

        margin-bottom:18px;

    }

    .hero-left p{

        font-size:1rem;

        line-height:1.7;

        margin-bottom:25px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

        text-align:center;

    }

    .hero-right{

        width:100%;

        max-width:320px;

        margin:auto;

    }

    .hero-video-card{

        border-radius:20px;

    }

    .scroll-down{

        display:none;

    }

}
/*=========================================
            ABOUT SECTION
=========================================*/

/* ---------- Tablet ---------- */

@media (max-width:991px){

    .about-home{

        padding:90px 0;

    }

    .about-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        max-width:100%;

        text-align:center;

    }

    .about-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .about-features{

        max-width:650px;

        margin:0 auto 40px;

    }

    .about-image{

        max-width:700px;

        margin:auto;

    }

    .about-badge{

        left:20px;

        bottom:20px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:767px){

    .about-home{

        padding:70px 0;

    }

    .about-wrapper{

        gap:45px;

    }

    .about-content h2{

        font-size:2.2rem;

    }

    .about-content p{

        font-size:1rem;

    }

    .about-features{

        grid-template-columns:1fr;

        gap:15px;

    }

    .feature-item{

        justify-content:flex-start;

    }

    .about-badge{

        position:relative;

        left:0;

        bottom:0;

        width:100%;

        margin-top:20px;

        justify-content:center;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .about-home{

        padding:60px 0;

    }

    .about-content h2{

        font-size:1.9rem;

    }

    .about-image img{

        border-radius:22px;

    }

    .about-badge{

        padding:18px 22px;

    }

    .about-badge strong{

        font-size:1.8rem;

    }

}
/*=========================================
        MINISTRIES SECTION
=========================================*/

/* =========================
   Tablet
========================= */

@media (max-width:1024px){

    .programs-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .program-card.large{

        grid-column:auto;

    }

}

/* =========================
   iPad & Small Tablets
========================= */

@media (max-width:768px){

    .programs{

        padding:90px 0;

    }

    .programs-title{

        margin-bottom:55px;

    }

    .program-card{

        min-height:420px;

        border-radius:24px;

    }

    .program-overlay{

        padding:32px;

    }

}

/* =========================
   Mobile
========================= */

@media (max-width:576px){

    .programs{

        padding:80px 0;

    }

    .programs-title h2{

        font-size:2.2rem;

    }

    .programs-title p{

        font-size:.95rem;

    }

    .program-card{

        min-height:360px;

        border-radius:22px;

    }

    .program-overlay{

        padding:25px;

    }

    .program-icon{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .program-icon i{

        font-size:24px;

    }

    .program-overlay h3{

        font-size:2rem;

        margin-bottom:12px;

    }

    .program-overlay p{

        font-size:.95rem;

        line-height:1.7;

        margin-bottom:22px;

    }

    .program-overlay a{

        padding:12px 22px;

        font-size:.95rem;

    }

}

/* =========================
   iPhone SE
========================= */

@media (max-width:390px){

    .program-card{

        min-height:320px;

    }

    .program-overlay{

        padding:22px;

    }

    .program-icon{

        width:54px;

        height:54px;

    }

    .program-icon i{

        font-size:22px;

    }

    .program-overlay h3{

        font-size:1.7rem;

    }

    .program-overlay p{

        font-size:.88rem;

    }

    .program-overlay a{

        padding:10px 18px;

        font-size:.88rem;

    }

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

/* ---------- Tablet ---------- */

@media (max-width:991px){

    .statistics{

        padding:90px 0;

    }

    .statistics-grid{

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

        gap:25px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:767px){

    .statistics{

        padding:80px 0;

    }

    .statistics-title{

        margin-bottom:55px;

    }

    .statistics-title h2{

        font-size:2.3rem;

    }

    .statistics-title p{

        font-size:1rem;

    }

    .statistics-grid{

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

        gap:16px;

    }

    .stat-card{

        padding:30px 15px;

        border-radius:22px;

    }

    .stat-icon{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .stat-icon i{

        font-size:24px;

    }

    .stat-card h3{

        font-size:2.4rem;

    }

    .stat-card span{

        font-size:.92rem;

        line-height:1.5;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .statistics{

        padding:70px 0;

    }

    .statistics-title h2{

        font-size:2rem;

    }

    .statistics-title p{

        font-size:.95rem;

    }

    .statistics-grid{

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

        gap:12px;

    }

    .stat-card{

        padding:25px 12px;

        border-radius:20px;

    }

    .stat-icon{

        width:50px;

        height:50px;

        margin-bottom:15px;

    }

    .stat-icon i{

        font-size:20px;

    }

    .stat-card h3{

        font-size:2rem;

    }

    .stat-card span{

        font-size:.85rem;

        line-height:1.4;

    }

}
/*=========================================
        GALLERY RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .gallery-grid{

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

        grid-auto-rows:240px;

    }

    .gallery-item:first-child{

        grid-column:span 2;

        grid-row:span 2;

    }

    .gallery-item:nth-child(4){

        grid-column:span 1;

        grid-row:span 2;

    }

    .gallery-item:nth-child(5){

        grid-column:span 1;

        grid-row:span 1;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .gallery{

        padding:90px 0;

    }

    .gallery-title{

        margin-bottom:45px;

    }

    .gallery-grid{

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

        grid-auto-rows:220px;

        gap:18px;

    }

    .gallery-item:first-child{

        grid-column:span 2;

        grid-row:span 2;

    }

    .gallery-item:nth-child(4){

        grid-column:span 2;

        grid-row:span 1;

    }

    .gallery-item:nth-child(5),

    .gallery-item:nth-child(6){

        grid-column:span 1;

        grid-row:span 1;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:767px){

    .gallery{

        padding:80px 0;

    }

    .gallery-title h2{

        font-size:2.3rem;

    }

    .gallery-title p{

        font-size:1rem;

    }

    .gallery-filter{

        gap:10px;

        margin-bottom:35px;

    }

    .gallery-filter button{

        padding:12px 22px;

        font-size:14px;

    }

    /* الصفحة الرئيسية */

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:250px;

        gap:18px;

    }

    .gallery-item,

    .gallery-item:first-child,

    .gallery-item:nth-child(2),

    .gallery-item:nth-child(3),

    .gallery-item:nth-child(4),

    .gallery-item:nth-child(5),

    .gallery-item:nth-child(6),

    .gallery-item:nth-child(7){

        grid-column:span 1;

        grid-row:span 1;

    }

    /* Fotos */

    .gallery-grid.simple-grid{

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

        grid-auto-rows:180px;

        gap:16px;

    }

    .gallery-grid.simple-grid .gallery-item{

        grid-column:auto !important;

        grid-row:auto !important;

    }

    /* Vídeos */

    .gallery-grid.simple-grid.show-videos{

        grid-template-columns:1fr;

        grid-auto-rows:240px;

    }

    .gallery-overlay{

        padding:22px;

    }

    .gallery-overlay h3{

        font-size:1.7rem;

    }

    .gallery-overlay p{

        font-size:.95rem;

    }

    .play-btn,

    .gallery-overlay .fa-expand{

        width:58px;

        height:58px;

    }

    /* CTA */

    .gallery-cta{

        padding:45px 30px;

    }

    .gallery-cta h3{

        font-size:2rem;

    }

    .gallery-cta p{

        font-size:1rem;

    }

    /* =====================================
       FIX MAGAZINE LAYOUT ON MOBILE
    ===================================== */

    .gallery-grid:not(.simple-grid) .gallery-item{

        grid-column:auto !important;

        grid-row:auto !important;

    }

    .gallery-grid:not(.simple-grid){

        grid-template-columns:1fr !important;

        grid-auto-rows:250px !important;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .gallery{

        padding:70px 0;

    }

    .gallery-title h2{

        font-size:2rem;

    }

    .gallery-title p{

        font-size:.95rem;

    }

    .gallery-grid{

        grid-auto-rows:220px;

    }

    /* Fotos */

    .gallery-grid.simple-grid{

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

    grid-auto-rows:220px;

    gap:16px;

	}

    /* Vídeos */

    .gallery-grid.simple-grid.show-videos{

        grid-auto-rows:220px;

    }

    .gallery-overlay{

        padding:18px;

    }

    .gallery-overlay h3{

        font-size:1.5rem;

    }

    .gallery-overlay p{

        font-size:.90rem;

        line-height:1.6;

    }

    .play-btn,

    .gallery-overlay .fa-expand{

        width:52px;

        height:52px;

    }

    .play-btn i,

    .gallery-overlay i{

        font-size:18px;

    }

    /* CTA */

    .gallery-cta{

        padding:35px 22px;

    }

    .gallery-cta h3{

        font-size:1.7rem;

    }

    .gallery-cta p{

        font-size:.95rem;

    }

}
/*=========================================
        NEWS RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .news-grid{

        gap:24px;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .news{

        padding:90px 0;

    }

    .news-title{

        margin-bottom:45px;

    }

    .news-grid{

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

        gap:22px;

    }

    .news-card:last-child{

        grid-column:span 2;

        max-width:650px;

        margin-inline:auto;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:767px){

    .news{

        padding:80px 0;

    }

    .news-title{

        margin-bottom:40px;

    }

    .news-title h2{

        font-size:2.3rem;

    }

    .news-title p{

        font-size:1rem;

    }

    .news-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .news-card,

    .news-card:last-child{

        grid-column:auto;

        max-width:100%;

    }

    .news-image{

        height:240px;

    }

    .news-content{

        padding:24px;

    }

    .news-content h3{

        font-size:1.4rem;

    }

    .news-content p{

        font-size:.96rem;

    }

    .news-category{

        top:16px;

        left:16px;

        padding:8px 16px;

        font-size:12px;

    }

    .news-date{

        font-size:12px;

        padding:7px 14px;

    }

    .news-btn{

        margin-top:45px;

    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .news{

        padding:70px 0;

    }

    .news-title h2{

        font-size:2rem;

    }

    .news-title p{

        font-size:.95rem;

    }

    .news-image{

        height:220px;

    }

    .news-content{

        padding:22px;

    }

    .news-content h3{

        font-size:1.28rem;

    }

    .news-content p{

        font-size:.92rem;

        line-height:1.7;

    }

    .news-category{

        top:14px;

        left:14px;

        padding:7px 14px;

        font-size:11px;

    }

    .news-date{

        font-size:11px;

        padding:6px 12px;

    }

}
/*=========================================
        FOOTER RESPONSIVE
=========================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .footer-grid{

        gap:45px;

    }

}



/* ---------- Mobile ---------- */

@media (max-width:991px){

    .footer{

        padding:60px 0 25px;

    }

    /* Brand */

    .footer-brand{

        max-width:100%;

        text-align:center;

    }

    .footer-logo img{

        width:min(250px, 72vw);

    }

    .footer-brand p{

        max-width:520px;

        margin:22px auto 28px;

        font-size:.95rem;

        line-height:1.8;

    }

    /* Social */

    .footer-social{

        gap:14px;

    }

    .footer-social a{

        width:46px;

        height:46px;

    }

    /* Hide Desktop Columns */

    .footer .footer-links,
    .footer .footer-ministries{

        display:none;

    }

    /* Footer Grid */

    .footer-grid{

        display:block;

    }

    /* Contact */

    .footer-contact-column{

        display:block;

        max-width:340px;

        margin:0 auto;

        text-align:center;

    }

    .footer-contact-column{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;

    }

    .footer-contact-column h3{

        display:block;
        margin-bottom:22px;

    }

    .footer-contact li{

        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:16px;

    }

    .footer-contact li i{

        width:18px;

        min-width:18px;

        color:#966A30;

        text-align:center;

    }

    .footer-contact li a{

        display:flex;

        align-items:center;

        gap:12px;

        text-decoration:none;

        color:inherit;

    }

    /* Divider */

    .footer-divider{

        margin:30px 0;

    }

    /* Bottom */

    .footer-bottom{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;

        gap:18px;

    }

    .footer-bottom p{

        max-width:500px;

        font-size:.90rem;

        line-height:1.7;

    }

    .back-to-top{

        justify-content:center;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .footer{

        padding:55px 0 20px;

    }

    .footer-logo img{

        width:min(220px, 72vw);

    }

    .footer-brand p{

        max-width:270px;

        font-size:.90rem;

    }

    .footer-social{

        gap:12px;

    }

    .footer-social a{

        width:44px;

        height:44px;

    }

    .footer-social i{

        font-size:18px;

    }

    .footer-contact{

        font-size:.94rem;

    }

    .footer-bottom p{

        font-size:.84rem;

    }

}

/* =========================================
   FOOTER LAYOUT REFINEMENT
========================================= */

@media (max-width:991px){

    .footer{
        padding:48px 0 24px;
    }

    .footer .container{
        padding-inline:clamp(20px, 4vw, 32px);
    }

    .footer-brand,
    body.is-rtl .footer-brand{
        max-width:680px;
        text-align:center;
    }

    .footer-logo img{
        width:clamp(180px, 28vw, 220px);
    }

    .footer-brand p{
        max-width:620px;
        margin:18px auto 24px;
        font-size:.95rem;
        line-height:1.75;
    }

    .footer-social,
    body.is-rtl .footer-social{
        justify-content:center;
        gap:12px;
    }

    .footer-social a{
        width:44px;
        height:44px;
    }

    .footer-divider{
        margin:28px 0;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:32px;
    }

    .footer .footer-links,
    .footer .footer-ministries{
        display:block;
    }

    .footer-contact-column{
        grid-column:1 / -1;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        max-width:620px;
        margin:0 auto;
        text-align:start;
    }

    .footer-contact-column h3{
        margin-bottom:18px;
    }

    .footer-contact li,
    .footer-contact li a{
        align-items:flex-start;
        gap:12px;
    }

    .footer-contact li{
        width:100%;
        margin-bottom:14px;
        line-height:1.7;
    }

    .footer-bottom{
        gap:14px;
    }

}

@media (max-width:767px){

    .footer .footer-links,
    .footer .footer-ministries{
        display:none;
    }

    .footer-grid{
        display:block;
    }

    .footer-contact-column h3{
        text-align:start;
    }

}

@media (max-width:480px){

    .footer{
        padding:40px 0 20px;
    }

    .footer .container{
        padding-inline:20px;
    }

    .footer-logo img{
        width:min(180px, 58vw);
    }

    .footer-brand p{
        max-width:330px;
        margin:16px auto 22px;
        font-size:.88rem;
        line-height:1.7;
    }

    .footer-social a{
        width:42px;
        height:42px;
    }

    .footer-contact{
        font-size:.88rem;
    }

    .footer-contact-column h3{
        font-size:1.2rem;
        margin-bottom:16px;
    }

    .footer-divider{
        margin:24px 0;
    }

    .footer-bottom{
        gap:12px;
    }

}

/* =========================================
   HOME PAGE RHYTHM
   One spacing system across all sections
========================================= */

:root{
    --home-section-space:72px;
    --home-content-gap:52px;
}

.impact,
.about-home,
.programs,
.statistics,
.gallery,
.news,
.testimonials{
    padding-block:var(--home-section-space);
}

.impact > .container > .footer-column,
.programs-title,
.statistics-title,
.news-title,
.testimonials-title{
    margin-bottom:var(--home-content-gap);
}

.gallery-title{
    margin-bottom:36px;
}

.gallery-filter{
    margin-bottom:var(--home-content-gap);
}

.news-btn{
    margin-top:var(--home-content-gap);
}

.gallery-cta{
    margin-top:68px;
}

@media (max-width:1200px){
    :root{
        --home-section-space:68px;
        --home-content-gap:48px;
    }
}

@media (max-width:991px){
    :root{
        --home-section-space:64px;
        --home-content-gap:44px;
    }

    .gallery-title{
        margin-bottom:32px;
    }

    .gallery-cta{
        margin-top:58px;
    }
}

@media (max-width:767px){
    :root{
        --home-section-space:56px;
        --home-content-gap:38px;
    }

    .gallery-title{
        margin-bottom:28px;
    }

    .gallery-cta{
        margin-top:50px;
    }
}

@media (max-width:480px){
    :root{
        --home-section-space:48px;
        --home-content-gap:32px;
    }

    .gallery-title{
        margin-bottom:24px;
    }

    .gallery-cta{
        margin-top:42px;
    }
}