/* =========================================
   CHRIST FAITH FOOD BANK - HEADER
========================================== */

:root{
    --cff-green:#07552f;
    --cff-green-dark:#043d23;
    --cff-green-light:#11834c;

    --cff-gold:#e5a312;
    --cff-orange:#d98709;

    --cff-cream:#fffaf0;
    --cff-white:#ffffff;
    --cff-text:#17241d;
    --cff-muted:#637069;

    --cff-shadow:0 14px 45px rgba(0,45,25,.10);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'DM Sans',sans-serif;
    color:var(--cff-text);
    background:#fff;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}


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

.cff-topbar{
    background:
        linear-gradient(90deg,
            var(--cff-green-dark),
            var(--cff-green)
        );

    color:#fff;
    position:relative;
    overflow:hidden;
}

.cff-topbar::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    right:10%;
    top:-220px;
}

.cff-topbar-container{
    max-width:1400px;
    margin:auto;
    min-height:45px;

    padding:0 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.cff-top-left{
    display:flex;
    align-items:center;
    gap:25px;

    font-size:14px;
    font-weight:500;
}

.cff-top-left a,
.cff-top-left span{
    color:rgba(255,255,255,.88);
    display:flex;
    align-items:center;
    gap:8px;
}

.cff-top-left i{
    color:#f6bc31;
}


.cff-top-message{
    font-size:13px;
    font-weight:600;
    letter-spacing:.2px;
    color:#fff;
}

.cff-top-message i{
    margin-right:7px;
    color:#f7bd32;
}


/* =========================================
   MAIN HEADER
========================================== */

.cff-header{
    background:rgba(255,255,255,.98);
    position:sticky;
    top:0;
    width:100%;
    z-index:9999;
    box-shadow:var(--cff-shadow);
}

.cff-header-container{
    max-width:1400px;
    margin:auto;

    min-height:92px;
    padding:8px 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}


/* LOGO */

.cff-logo{
    flex-shrink:0;
    display:flex;
    align-items:center;
}

.cff-logo img{
    height:76px;
    object-fit:contain;
    display:block;
}


/* =========================================
   DESKTOP NAVIGATION
========================================== */

.cff-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    margin-left:auto;
}

.cff-nav-item{
    position:relative;
}

.cff-nav-link{
    height:48px;
    padding:0 13px;

    display:flex;
    align-items:center;
    gap:6px;

    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:700;

    color:#24342b;
    border-radius:9px;

    transition:.3s ease;
    position:relative;
    white-space:nowrap;
}

.cff-nav-link::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:4px;

    width:0;
    height:2px;

    background:var(--cff-gold);
    border-radius:10px;

    transform:translateX(-50%);
    transition:.3s;
}

.cff-nav-link:hover{
    color:var(--cff-green);
    background:#f5faf7;
}

.cff-nav-link:hover::after,
.cff-nav-link.active::after{
    width:25px;
}

.cff-nav-link.active{
    color:var(--cff-green);
}

.cff-nav-link .arrow{
    font-size:10px;
    margin-left:2px;
}


/* =========================================
   DROPDOWN
========================================== */

.cff-dropdown{
    position:absolute;

    top:calc(100% + 12px);
    left:0;

    width:235px;

    background:#fff;
    border-radius:14px;

    padding:9px;

    box-shadow:
        0 22px 60px rgba(0,50,27,.16);

    border:1px solid #edf2ef;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;
}

.cff-dropdown::before{
    content:"";

    position:absolute;
    top:-7px;
    left:30px;

    width:14px;
    height:14px;

    background:#fff;

    transform:rotate(45deg);

    border-left:1px solid #edf2ef;
    border-top:1px solid #edf2ef;
}

.cff-nav-item:hover .cff-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.cff-dropdown a{
    display:flex;
    align-items:center;
    gap:11px;

    padding:12px 13px;

    color:#33463c;

    font-size:14px;
    font-weight:600;

    border-radius:9px;

    transition:.25s;
}

.cff-dropdown a i{
    width:22px;
    color:var(--cff-green);
}

.cff-dropdown a:hover{
    color:var(--cff-green);
    background:#f3faf6;
    padding-left:17px;
}


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

.cff-donate-btn{
    min-height:52px;

    padding:0 22px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:10px;

    background:
        linear-gradient(135deg,
            #f3bd35,
            var(--cff-gold),
            var(--cff-orange)
        );

    color:#173221;

    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;

    box-shadow:
        0 9px 24px rgba(217,135,9,.25);

    transition:.3s ease;

    white-space:nowrap;
}

.cff-donate-btn i{
    font-size:16px;
}

.cff-donate-btn:hover{
    color:#fff;
    background:
        linear-gradient(135deg,
            var(--cff-green-light),
            var(--cff-green-dark)
        );

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(7,85,47,.25);
}


/* =========================================
   MOBILE MENU BUTTON
========================================== */

.cff-menu-btn{
    width:48px;
    height:48px;

    border:0;
    outline:0;

    border-radius:10px;

    background:var(--cff-green);

    color:#fff;

    display:none;
    align-items:center;
    justify-content:center;

    font-size:20px;

    cursor:pointer;
}


/* =========================================
   MOBILE NAV
========================================== */

.cff-mobile-menu{
    display:none;

    position:fixed;

    top:0;
    right:-100%;

    width:min(380px,90%);
    height:100vh;

    background:#fff;

    z-index:10001;

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

    transition:.4s cubic-bezier(.77,0,.18,1);

    overflow-y:auto;
}

.cff-mobile-menu.active{
    right:0;
}

.cff-mobile-head{
    min-height:100px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:15px 22px;

    border-bottom:1px solid #edf1ee;
}

.cff-mobile-head img{
    width:190px;
    height:70px;
    object-fit:contain;
}

.cff-close-menu{
    width:42px;
    height:42px;

    border:0;
    border-radius:50%;

    background:#eef6f1;

    color:var(--cff-green);

    font-size:18px;

    cursor:pointer;
}


.cff-mobile-links{
    padding:18px;
}

.cff-mobile-links > a,
.cff-mobile-dropdown-btn{
    width:100%;

    min-height:53px;

    padding:0 14px;

    display:flex;
    align-items:center;

    border:0;
    border-bottom:1px solid #eef1ef;

    background:#fff;

    color:#24362c;

    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:700;

    cursor:pointer;
    text-align:left;
}

.cff-mobile-links > a i{
    width:28px;
    color:var(--cff-green);
}

.cff-mobile-dropdown-btn{
    justify-content:space-between;
}

.cff-mobile-dropdown-btn span{
    display:flex;
    align-items:center;
}

.cff-mobile-dropdown-btn span i{
    width:28px;
    color:var(--cff-green);
}


/* Mobile dropdown */

.cff-mobile-submenu{
    display:none;
    background:#f6faf7;
    border-radius:0 0 10px 10px;
    padding:6px 10px;
}

.cff-mobile-submenu.active{
    display:block;
}

.cff-mobile-submenu a{
    display:block;
    padding:12px 16px 12px 34px;

    color:#4c5e54;

    font-size:14px;
    font-weight:600;

    border-bottom:1px solid #e9f0eb;
}


/* Mobile donate */

.cff-mobile-donate{
    margin-top:18px !important;

    border:0 !important;

    border-radius:10px !important;

    background:
        linear-gradient(135deg,#f4bf3b,#db910e) !important;

    color:#183522 !important;

    justify-content:center;

    font-weight:800 !important;
}


/* MOBILE CONTACT AREA */

.cff-mobile-contact{
    margin:10px 18px 30px;

    padding:20px;

    background:
        linear-gradient(135deg,
            var(--cff-green-dark),
            var(--cff-green)
        );

    border-radius:15px;

    color:#fff;
}

.cff-mobile-contact small{
    display:block;

    color:#f5c457;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:5px;
}

.cff-mobile-contact h4{
    font-family:'Manrope',sans-serif;
    font-size:19px;
    margin-bottom:7px;
}

.cff-mobile-contact p{
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.6;
}


/* OVERLAY */

.cff-menu-overlay{
    position:fixed;

    inset:0;

    background:rgba(0,30,17,.62);

    backdrop-filter:blur(3px);

    z-index:10000;

    opacity:0;
    visibility:hidden;

    transition:.3s;
}

.cff-menu-overlay.active{
    opacity:1;
    visibility:visible;
}


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

@media(max-width:1200px){

    .cff-header-container{
        padding-left:20px;
        padding-right:20px;
    }

    .cff-logo img{
        width:205px;
    }

    .cff-nav-link{
        padding:0 9px;
        font-size:13px;
    }

    .cff-donate-btn{
        padding:0 17px;
    }
}


@media(max-width:1050px){

    .cff-nav,
    .cff-header .cff-donate-btn{
        display:none;
    }

    .cff-menu-btn{
        display:flex;
    }

    .cff-mobile-menu{
        display:block;
    }

    .cff-header-container{
        min-height:82px;
    }

    .cff-logo img{
        width:210px;
        height:67px;
    }
}


@media(max-width:767px){

    .cff-topbar-container{
        min-height:39px;
        padding:0 15px;
        justify-content:center;
    }

    .cff-top-left{
        display:none;
    }

    .cff-top-message{
        font-size:11px;
        text-align:center;
    }

    .cff-header-container{
        min-height:76px;
        padding:5px 15px;
    }

    .cff-logo img{
        width:180px;
        height:62px;
    }

    .cff-menu-btn{
        width:44px;
        height:44px;
    }
}


@media(max-width:400px){

    .cff-logo img{
        width:165px;
    }

    .cff-header-container{
        padding-left:12px;
        padding-right:12px;
    }
}

 


/* =========================================================
   CHRIST FAITH FOOD BANK - PREMIUM FOOTER
========================================================= */

.cff-footer{
    --cff-green:#07552f;
    --cff-green-dark:#032f1c;
    --cff-green-deep:#022718;
    --cff-gold:#e5a312;
    --cff-gold-light:#f5c34d;
    --cff-white:#ffffff;

    position:relative;
    margin-top:0;
    background:
        linear-gradient(
            135deg,
            #022718 0%,
            #043c24 52%,
            #07552f 100%
        );

    color:#fff;
    overflow:hidden;
}


/* DECORATIVE BACKGROUND */

.cff-footer::before{
    content:"";
    position:absolute;

    width:500px;
    height:500px;

    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;

    right:-250px;
    top:100px;
}

.cff-footer::after{
    content:"";
    position:absolute;

    width:350px;
    height:350px;

    border:1px solid rgba(229,163,18,.08);
    border-radius:50%;

    left:-180px;
    bottom:-180px;
}


.cff-footer-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(10px);
    pointer-events:none;
}

.cff-footer-glow-one{
    width:300px;
    height:300px;

    right:5%;
    top:30%;

    background:rgba(229,163,18,.05);
}

.cff-footer-glow-two{
    width:250px;
    height:250px;

    left:10%;
    bottom:0;

    background:rgba(31,144,83,.09);
}



/* =========================================================
   TOP CTA
========================================================= */

.cff-footer-cta-wrap{
    position:relative;
    z-index:5;

    max-width:1400px;
    margin:auto;

    padding:55px 30px 0;
}


.cff-footer-cta{
    position:relative;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:30px;

    padding:38px 42px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.055)
        );

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.17);

    backdrop-filter:blur(15px);

    overflow:hidden;
}


.cff-footer-cta::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:20%;
    top:-120px;

    border-radius:50%;

    background:rgba(229,163,18,.13);
}


.cff-footer-cta-icon{
    width:82px;
    height:82px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--cff-gold-light),
            var(--cff-gold)
        );

    color:#153d27;

    font-size:31px;

    box-shadow:
        0 12px 30px rgba(229,163,18,.20);
}


.cff-footer-small-title{
    display:block;

    color:var(--cff-gold-light);

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

    font-size:13px;
    font-weight:800;

    letter-spacing:2px;

    margin-bottom:8px;
}


.cff-footer-cta-content h2{
    max-width:660px;

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

    font-size:30px;
    line-height:1.2;

    font-weight:800;

    color:#fff;

    margin:0 0 10px;
}


.cff-footer-cta-content h2 span{
    color:var(--cff-gold-light);
}


.cff-footer-cta-content p{
    max-width:700px;

    margin:0;

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

    font-size:16px;
    line-height:1.7;
}


.cff-footer-cta-buttons{
    display:flex;
    align-items:center;
    gap:12px;

    position:relative;
    z-index:3;
}


.cff-footer-contact-btn,
.cff-footer-donate-btn{

    min-height:54px;

    padding:0 22px;

    border-radius:10px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

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

    font-size:15px;
    font-weight:800;

    white-space:nowrap;

    transition:.3s ease;
}


.cff-footer-contact-btn{
    color:#fff;

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

    background:rgba(255,255,255,.06);
}


.cff-footer-contact-btn:hover{
    background:#fff;
    color:var(--cff-green-dark);

    transform:translateY(-2px);
}


.cff-footer-donate-btn{
    color:#193b27;

    background:
        linear-gradient(
            135deg,
            #f5c653,
            #e3a112
        );

    box-shadow:
        0 10px 28px rgba(229,163,18,.20);
}


.cff-footer-donate-btn:hover{
    transform:translateY(-2px);

    background:#fff;

    color:var(--cff-green);
}



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

.cff-footer-main{
    position:relative;
    z-index:2;

    padding:70px 0 55px;
}


.cff-footer-container{
    width:100%;
    max-width:1400px;

    margin:auto;

    padding:0 30px;
}


.cff-footer-grid{
    display:grid;

    grid-template-columns:
        1.5fr
        .75fr
        .85fr
        1.2fr;

    gap:55px;
}



/* =========================================================
   ABOUT
========================================================= */

.cff-footer-eyebrow{
    display:inline-block;

    margin-bottom:8px;

    color:var(--cff-gold-light);

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

    font-size:13px;
    font-weight:800;

    letter-spacing:2px;
}


.cff-footer-about h3{
    margin:0 0 16px;

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

    font-size:32px;
    line-height:1.2;

    color:#fff;

    font-weight:800;
}


.cff-footer-about p{
    max-width:420px;

    margin:0;

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

    font-size:16px;
    line-height:1.85;
}



/* SOCIAL */

.cff-footer-social{
    display:flex;
    gap:10px;

    margin-top:25px;
}


.cff-footer-social a{
    width:45px;
    height:45px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:16px;

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

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

    transition:.3s ease;
}


.cff-footer-social a:hover{
    color:#183b27;

    background:var(--cff-gold-light);

    border-color:var(--cff-gold-light);

    transform:translateY(-4px);
}



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

.cff-footer-column h4{

    position:relative;

    margin:0 0 25px;

    padding-bottom:13px;

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

    font-size:19px;

    color:#fff;

    font-weight:800;
}


.cff-footer-column h4::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:36px;
    height:3px;

    border-radius:20px;

    background:var(--cff-gold);
}


.cff-footer-column ul{
    margin:0;
    padding:0;

    list-style:none;
}


.cff-footer-column ul li{
    margin-bottom:14px;
}


.cff-footer-column ul li a{

    display:inline-flex;

    align-items:center;

    gap:9px;

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

    font-size:15.5px;
    font-weight:500;

    transition:.25s ease;
}


.cff-footer-column ul li a i{

    color:var(--cff-gold);

    font-size:9px;

    transition:.25s;
}


.cff-footer-column ul li a:hover{
    color:#fff;

    transform:translateX(4px);
}



/* =========================================================
   CONTACT
========================================================= */

.cff-contact-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:20px;
}


.cff-contact-icon{

    width:43px;
    height:43px;

    min-width:43px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    color:var(--cff-gold-light);

    font-size:15px;

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

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


.cff-contact-item span{

    display:block;

    margin-bottom:4px;

    color:var(--cff-gold-light);

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;
}


.cff-contact-item p,
.cff-contact-item a{

    margin:0;

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

    font-size:15px;

    line-height:1.65;

    transition:.25s;
}


.cff-contact-item a:hover{
    color:#fff;
}



/* =========================================================
   BOTTOM BAR
========================================================= */

.cff-footer-bottom{

    position:relative;

    z-index:3;

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

    background:rgba(0,0,0,.12);
}


.cff-footer-bottom-container{

    max-width:1400px;

    min-height:75px;

    margin:auto;

    padding:15px 30px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;
}


.cff-footer-bottom p{

    margin:0;

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

    font-size:14px;

    line-height:1.6;
}


.cff-footer-bottom p strong{
    color:#fff;
    font-weight:600;
}


.cff-footer-bottom-links{

    display:flex;

    align-items:center;

    gap:14px;
}


.cff-footer-bottom-links a{

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

    font-size:14px;

    transition:.25s;
}


.cff-footer-bottom-links a:hover{
    color:var(--cff-gold-light);
}


.cff-footer-bottom-links span{

    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--cff-gold);
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .cff-footer-cta{
        grid-template-columns:auto 1fr;
    }

    .cff-footer-cta-buttons{
        grid-column:1 / -1;

        padding-left:112px;
    }


    .cff-footer-grid{
        grid-template-columns:1.3fr 1fr 1fr;
        gap:45px;
    }

    .cff-footer-contact{
        grid-column:1 / -1;
    }

}



/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:767px){

    .cff-footer-cta-wrap{
        padding:35px 15px 0;
    }


    .cff-footer-cta{

        display:block;

        padding:28px 22px;

        border-radius:18px;
    }


    .cff-footer-cta-icon{

        width:64px;
        height:64px;

        border-radius:15px;

        font-size:25px;

        margin-bottom:20px;
    }


    .cff-footer-small-title{

        font-size:11px;

        letter-spacing:1.5px;
    }


    .cff-footer-cta-content h2{

        font-size:25px;

        line-height:1.3;

        margin-bottom:12px;
    }


    .cff-footer-cta-content p{

        font-size:15px;

        line-height:1.75;
    }


    .cff-footer-cta-buttons{

        display:grid;

        grid-template-columns:1fr 1fr;

        padding-left:0;

        margin-top:22px;
    }


    .cff-footer-contact-btn,
    .cff-footer-donate-btn{

        min-height:52px;

        padding:0 12px;

        font-size:14px;
    }



    /* FOOTER */

    .cff-footer-main{

        padding:50px 0 40px;
    }


    .cff-footer-container{

        padding:0 20px;
    }


    .cff-footer-grid{

        grid-template-columns:1fr 1fr;

        gap:40px 25px;
    }


    .cff-footer-about{

        grid-column:1 / -1;
    }


    .cff-footer-contact{

        grid-column:1 / -1;
    }


    .cff-footer-about h3{

        font-size:28px;
    }


    .cff-footer-about p{

        max-width:100%;

        font-size:15.5px;

        line-height:1.8;
    }


    .cff-footer-column h4{

        font-size:18px;

        margin-bottom:21px;
    }


    .cff-footer-column ul li a{

        font-size:15px;
    }


    /* BOTTOM */

    .cff-footer-bottom-container{

        min-height:auto;

        padding:22px 20px;

        flex-direction:column;

        text-align:center;

        gap:13px;
    }


    .cff-footer-bottom p{

        font-size:13.5px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .cff-footer-cta-wrap{
        padding-left:12px;
        padding-right:12px;
    }


    .cff-footer-cta{

        padding:25px 18px;
    }


    .cff-footer-cta-content h2{

        font-size:23px;
    }


    .cff-footer-cta-buttons{

        grid-template-columns:1fr;
    }


    .cff-footer-grid{

        grid-template-columns:1fr;

        gap:38px;
    }


    .cff-footer-about,
    .cff-footer-contact{

        grid-column:auto;
    }


    .cff-footer-about h3{

        font-size:27px;
    }


    .cff-footer-column h4{

        font-size:19px;
    }


    .cff-footer-column ul li{

        margin-bottom:13px;
    }


    .cff-footer-column ul li a{

        font-size:15.5px;
    }


    .cff-contact-item p,
    .cff-contact-item a{

        font-size:15px;
    }


    .cff-footer-social a{

        width:44px;
        height:44px;
    }

}




/* ========================================================
   CHRIST FAITH HOME PAGE
======================================================== */

.cff-home{
    --green:#07552f;
    --green-dark:#033b22;
    --green-deep:#022c1a;
    --gold:#e5a312;
    --gold-light:#f4be37;
    --cream:#fffaf1;
    --light:#f5f9f6;
    --text:#17241d;
    --muted:#627068;

    font-family:'DM Sans',sans-serif;
}

.cff-home-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 30px;
}


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

.cff-hero{
    position:relative;
    min-height:680px;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.cff-hero-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
}

.cff-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,38,22,.95) 0%,
            rgba(3,58,32,.88) 42%,
            rgba(3,58,32,.56) 68%,
            rgba(2,30,17,.35) 100%
        );
}

.cff-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent
        );
}

.cff-hero-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.cff-hero-shape-one{
    width:420px;
    height:420px;

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

    left:-180px;
    top:-170px;
}

.cff-hero-shape-two{
    width:380px;
    height:380px;

    border:1px solid rgba(244,190,55,.15);

    right:-130px;
    bottom:-180px;
}

.cff-hero-container{
    position:relative;
    z-index:3;

    width:100%;
    max-width:1400px;
    margin:auto;

    padding:90px 30px;

    display:grid;
    grid-template-columns:minmax(0,1.35fr) 390px;
    align-items:end;
    gap:70px;
}

.cff-hero-content{
    max-width:820px;
}

.cff-hero-label{
    display:inline-flex;

    margin-bottom:16px;

    color:#f6c347;

    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    letter-spacing:2.5px;
}

.cff-hero-services{
    margin-bottom:21px;

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

    font-size:14px;
    font-weight:700;
    letter-spacing:1.1px;

    line-height:1.7;
}

.cff-hero-services span{
    margin:0 8px;
    color:var(--gold);
}

.cff-hero-content h1{
    max-width:820px;

    margin:0;

    color:#fff;

    font-family:'Manrope',sans-serif;
    font-size:64px;
    line-height:1.08;
    font-weight:800;

    letter-spacing:-2px;
}

.cff-hero-content h1 span{
    color:var(--gold-light);
}

.cff-hero-lead{
    max-width:720px;

    margin:24px 0 12px;

    color:#fff;

    font-size:21px;
    line-height:1.55;
    font-weight:600;
}

.cff-hero-description{
    max-width:760px;

    margin:0;

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

    font-size:17px;
    line-height:1.8;
}

.cff-hero-actions{
    display:flex;
    align-items:center;
    gap:15px;

    margin-top:32px;
}

.cff-hero-donate,
.cff-hero-learn{
    min-height:56px;

    padding:0 25px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:10px;

    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;

    transition:.3s ease;
}

.cff-hero-donate{
    color:#183821;

    background:
        linear-gradient(
            135deg,
            #f6c951,
            #e3a012
        );

    box-shadow:
        0 15px 35px rgba(229,163,18,.28);
}

.cff-hero-donate:hover{
    transform:translateY(-3px);
    background:#fff;
    color:var(--green);
}

.cff-hero-learn{
    color:#fff;

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

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

    backdrop-filter:blur(7px);
}

.cff-hero-learn:hover{
    background:#fff;
    color:var(--green-dark);
}


/* HERO SIDE CARD */

.cff-hero-impact-card{
    padding:30px;

    border-radius:24px;

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

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

    backdrop-filter:blur(14px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.19);
}

.cff-impact-icon{
    width:62px;
    height:62px;

    margin-bottom:23px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #f6c74d,
            var(--gold)
        );

    color:#19432b;

    font-size:25px;
}

.cff-hero-impact-card > span{
    display:block;

    margin-bottom:8px;

    color:#f4c34c;

    font-family:'Manrope',sans-serif;
    font-size:12px;
    font-weight:800;

    letter-spacing:1.7px;
}

.cff-hero-impact-card h3{
    margin:0 0 11px;

    color:#fff;

    font-family:'Manrope',sans-serif;
    font-size:25px;
    line-height:1.3;
}

.cff-hero-impact-card p{
    margin:0 0 18px;

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

    font-size:15px;
    line-height:1.7;
}

.cff-hero-impact-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#fff;

    font-size:14px;
    font-weight:700;
}

.cff-hero-impact-card a i{
    color:var(--gold);
}


/* ========================================================
   SHARED HEADING
======================================================== */

.cff-section-label{
    display:inline-block;

    margin-bottom:10px;

    color:var(--green);

    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.cff-section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;

    gap:50px;

    margin-bottom:40px;
}

.cff-section-heading h2,
.cff-intro-content h2,
.cff-involved-content h2{
    margin:0;

    color:var(--text);

    font-family:'Manrope',sans-serif;
    font-size:42px;
    line-height:1.2;
    font-weight:800;

    letter-spacing:-1px;
}

.cff-section-heading h2 span,
.cff-intro-content h2 span,
.cff-involved-content h2 span{
    color:var(--green);
}

.cff-section-heading > p{
    max-width:520px;

    margin:0;

    color:var(--muted);

    font-size:16px;
    line-height:1.75;
}


/* ========================================================
   INTRO SECTION
======================================================== */

.cff-intro-section{
    padding:90px 0;
    background:#fff;
}

.cff-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:80px;
    align-items:center;
}

.cff-intro-images{
    min-height:520px;
    position:relative;
}

.cff-intro-main-img{
    width:78%;
    height:460px;

    overflow:hidden;

    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(4,58,33,.12);
}

.cff-intro-main-img img,
.cff-intro-small-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cff-intro-small-img{
    position:absolute;

    width:45%;
    height:250px;

    right:0;
    bottom:0;

    padding:7px;

    border-radius:21px;

    background:#fff;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);

    overflow:hidden;
}

.cff-intro-small-img img{
    border-radius:15px;
}

.cff-intro-badge{
    position:absolute;

    left:35px;
    bottom:12px;

    display:flex;
    align-items:center;
    gap:13px;

    padding:15px 20px;

    border-radius:14px;

    background:var(--green-dark);

    color:#fff;

    box-shadow:
        0 15px 35px rgba(4,58,33,.25);
}

.cff-intro-badge i{
    color:var(--gold-light);
    font-size:24px;
}

.cff-intro-badge strong,
.cff-intro-badge span{
    display:block;
}

.cff-intro-badge strong{
    font-size:15px;
}

.cff-intro-badge span{
    margin-top:2px;

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

    font-size:12px;
}

.cff-intro-content p{
    margin:18px 0 0;

    color:var(--muted);

    font-size:17px;
    line-height:1.85;
}

.cff-intro-points{
    margin:25px 0 29px;

    display:grid;
    gap:13px;
}

.cff-intro-point{
    display:flex;
    align-items:center;
    gap:12px;

    color:#34483d;

    font-size:16px;
    font-weight:600;
}

.cff-intro-point i{
    width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#edf8f1;

    color:var(--green);

    font-size:12px;
}

.cff-primary-btn{
    min-height:53px;

    padding:0 22px;

    display:inline-flex;
    align-items:center;
    gap:9px;

    border-radius:10px;

    background:var(--green);

    color:#fff;

    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:700;

    transition:.3s;
}

.cff-primary-btn:hover{
    background:var(--green-dark);
    transform:translateY(-2px);
}


/* ========================================================
   SERVICES
======================================================== */

.cff-services-section{
    padding:85px 0 95px;

    background:
        linear-gradient(
            180deg,
            #f7faf8,
            #fffaf2
        );
}

.cff-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:22px;
}

.cff-service-card{
    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #e9efeb;

    box-shadow:
        0 14px 40px rgba(4,60,33,.07);

    transition:.35s ease;
}

.cff-service-card:hover{
    transform:translateY(-9px);

    box-shadow:
        0 23px 55px rgba(4,60,33,.13);
}

.cff-service-image{
    height:245px;

    position:relative;

    overflow:hidden;
}

.cff-service-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s ease;
}

.cff-service-card:hover .cff-service-image img{
    transform:scale(1.07);
}

.cff-service-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(2,45,26,.6),
            transparent 70%
        );
}

.cff-service-icon{
    position:absolute;

    left:20px;
    bottom:18px;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:#184028;

    font-size:21px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.16);
}

.cff-service-content{
    padding:25px 23px 27px;
}

.cff-service-content > span{
    color:var(--green);

    font-family:'Manrope',sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}

.cff-service-content h3{
    margin:7px 0 10px;

    color:var(--text);

    font-family:'Manrope',sans-serif;
    font-size:23px;
    font-weight:800;
}

.cff-service-content p{
    min-height:91px;

    margin:0 0 18px;

    color:var(--muted);

    font-size:15px;
    line-height:1.7;
}

.cff-service-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:var(--green);

    font-size:14px;
    font-weight:800;
}

.cff-service-content a i{
    color:var(--gold);
}


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

.cff-impact-section{
    min-height:520px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.cff-impact-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
}

.cff-impact-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,40,23,.94),
            rgba(4,71,40,.83),
            rgba(4,71,40,.28)
        );
}

.cff-impact-content{
    position:relative;
    z-index:3;

    max-width:750px;

    padding:80px 0;
}

.cff-light-label{
    color:var(--gold-light);
}

.cff-impact-content h2{
    margin:0;

    color:#fff;

    font-family:'Manrope',sans-serif;
    font-size:49px;
    line-height:1.16;
    font-weight:800;

    letter-spacing:-1.5px;
}

.cff-impact-content h2 span{
    color:var(--gold-light);
}

.cff-impact-content p{
    max-width:650px;

    margin:20px 0 0;

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

    font-size:19px;
    line-height:1.7;
}

.cff-impact-actions{
    display:flex;
    gap:14px;

    margin-top:30px;
}

.cff-gold-btn,
.cff-outline-btn{
    min-height:55px;

    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:10px;

    font-size:15px;
    font-weight:800;

    transition:.3s;
}

.cff-gold-btn{
    color:#183b26;

    background:
        linear-gradient(
            135deg,
            #f4c64f,
            var(--gold)
        );
}

.cff-gold-btn:hover{
    background:#fff;
}

.cff-outline-btn{
    color:#fff;

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

    background:rgba(255,255,255,.05);
}

.cff-outline-btn:hover{
    background:#fff;
    color:var(--green);
}


/* ========================================================
   GET INVOLVED
======================================================== */

.cff-involved-section{
    padding:90px 0;

    background:#fff;
}

.cff-involved-box{
    padding:55px;

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    align-items:center;

    gap:60px;

    border-radius:25px;

    background:
        linear-gradient(
            135deg,
            #f7fbf8,
            #fff9ec
        );

    border:1px solid #e8eee9;
}

.cff-involved-content p{
    margin:17px 0 0;

    color:var(--muted);

    font-size:16px;
    line-height:1.8;
}

.cff-involved-options{
    display:grid;
    gap:13px;
}

.cff-involved-item{
    min-height:90px;

    padding:15px 18px;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:16px;

    border-radius:15px;

    background:#fff;

    border:1px solid #e7eee9;

    box-shadow:
        0 8px 25px rgba(4,58,33,.05);

    transition:.3s;
}

.cff-involved-item:hover{
    transform:translateX(6px);

    border-color:rgba(7,85,47,.25);
}

.cff-involved-icon{
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    background:#edf7f1;

    color:var(--green);

    font-size:20px;
}

.cff-involved-item span{
    display:block;

    margin-bottom:3px;

    color:#7a887f;

    font-size:12px;
    font-weight:600;
}

.cff-involved-item h4{
    margin:0;

    color:var(--text);

    font-family:'Manrope',sans-serif;
    font-size:17px;
}

.cff-item-arrow{
    color:var(--gold);
}


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

@media(max-width:1200px){

    .cff-hero-container{
        grid-template-columns:1fr 340px;
        gap:40px;
    }

    .cff-hero-content h1{
        font-size:54px;
    }

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

    .cff-service-content p{
        min-height:auto;
    }

}


@media(max-width:991px){

    .cff-hero{
        min-height:auto;
    }

    .cff-hero-container{
        grid-template-columns:1fr;

        padding-top:75px;
        padding-bottom:75px;
    }

    .cff-hero-impact-card{
        max-width:600px;
    }

    .cff-intro-grid{
        grid-template-columns:1fr;

        gap:50px;
    }

    .cff-intro-images{
        max-width:720px;
    }

    .cff-section-heading{
        align-items:start;
        flex-direction:column;

        gap:15px;
    }

    .cff-involved-box{
        grid-template-columns:1fr;
    }

}


@media(max-width:767px){

    .cff-home-container{
        padding:0 18px;
    }

    /* HERO */

    .cff-hero-container{
        padding:60px 18px;
    }

    .cff-hero-label{
        font-size:11px;
        letter-spacing:1.7px;
    }

    .cff-hero-services{
        font-size:11.5px;
        line-height:1.8;
    }

    .cff-hero-services span{
        margin:0 4px;
    }

    .cff-hero-content h1{
        font-size:39px;
        line-height:1.13;
        letter-spacing:-1px;
    }

    .cff-hero-lead{
        font-size:18px;
    }

    .cff-hero-description{
        font-size:15.5px;
        line-height:1.75;
    }

    .cff-hero-actions{
        flex-wrap:wrap;
    }

    .cff-hero-impact-card{
        padding:24px;
    }


    /* INTRO */

    .cff-intro-section{
        padding:65px 0;
    }

    .cff-intro-images{
        min-height:410px;
    }

    .cff-intro-main-img{
        width:85%;
        height:355px;
    }

    .cff-intro-small-img{
        width:47%;
        height:180px;
    }

    .cff-intro-badge{
        left:15px;
        bottom:0;

        padding:12px 15px;
    }

    .cff-section-heading h2,
    .cff-intro-content h2,
    .cff-involved-content h2{
        font-size:32px;
    }

    .cff-intro-content p{
        font-size:15.5px;
    }


    /* SERVICES */

    .cff-services-section{
        padding:65px 0 70px;
    }

    .cff-service-grid{
        grid-template-columns:1fr;
    }

    .cff-service-image{
        height:265px;
    }


    /* IMPACT */

    .cff-impact-section{
        min-height:470px;
    }

    .cff-impact-content{
        padding:65px 0;
    }

    .cff-impact-content h2{
        font-size:38px;
    }

    .cff-impact-content p{
        font-size:17px;
    }


    /* INVOLVED */

    .cff-involved-section{
        padding:65px 0;
    }

    .cff-involved-box{
        padding:30px 22px;

        gap:35px;
    }

}


@media(max-width:480px){

    .cff-hero-content h1{
        font-size:34px;
    }

    .cff-hero-actions,
    .cff-impact-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .cff-hero-donate,
    .cff-hero-learn,
    .cff-gold-btn,
    .cff-outline-btn{
        width:100%;
    }

    .cff-hero-impact-card h3{
        font-size:22px;
    }

    .cff-intro-images{
        min-height:350px;
    }

    .cff-intro-main-img{
        width:88%;
        height:310px;
    }

    .cff-intro-small-img{
        height:145px;
    }

    .cff-intro-badge{
        display:none;
    }

    .cff-service-image{
        height:230px;
    }

    .cff-impact-content h2{
        font-size:33px;
    }

    .cff-involved-item{
        grid-template-columns:auto 1fr;
    }

    .cff-item-arrow{
        display:none;
    }

}




/* =========================================
   CHRIST FAITH FOOD BANK - ABOUT PAGE
========================================= */

.cf-about-page{
    --cf-green:#064c32;
    --cf-green-dark:#033824;
    --cf-green-light:#64a91f;
    --cf-lime:#81b827;
    --cf-gold:#e8a514;
    --cf-orange:#d88608;
    --cf-cream:#fffaf0;
    --cf-text:#233129;
    --cf-muted:#65716a;
    --cf-white:#ffffff;

    font-family:"Poppins", sans-serif;
    color:var(--cf-text);
    overflow:hidden;
}

.cf-about-page *,
.cf-about-page *::before,
.cf-about-page *::after{
    box-sizing:border-box;
}

.cf-container{
    width:min(1180px, calc(100% - 40px));
    margin:auto;
}


/* BANNER */

.cf-about-banner{
    position:relative;
    min-height:390px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(110deg,
        rgba(2,48,31,.96),
        rgba(5,83,50,.90)),
        url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85")
        center/cover no-repeat;
    isolation:isolate;
}

.cf-about-banner::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:7px;
    background:linear-gradient(
        90deg,
        var(--cf-gold),
        var(--cf-lime),
        var(--cf-gold)
    );
}

.cf-about-banner-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 30%,
        rgba(232,165,20,.20),
        transparent 28%);
    z-index:-1;
}

.cf-about-banner-shape{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
}

.cf-shape-one{
    width:320px;
    height:320px;
    right:7%;
    top:-80px;
}

.cf-shape-two{
    width:190px;
    height:190px;
    right:22%;
    bottom:-90px;
}

.cf-about-banner-content{
    max-width:790px;
    padding:85px 0;
    color:#fff;
}

.cf-eyebrow,
.cf-section-tag{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    line-height:1;
    font-weight:700;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:var(--cf-orange);
    margin-bottom:17px;
}

.cf-eyebrow{
    color:#ffd76c;
}

.cf-eyebrow::before,
.cf-section-tag::before{
    content:"";
    width:30px;
    height:3px;
    border-radius:50px;
    background:currentColor;
}

.cf-about-banner h1{
    margin:0 0 16px;
    font-size:clamp(46px, 6vw, 75px);
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
}

.cf-about-banner-content > p{
    max-width:650px;
    margin:0 0 26px;
    color:rgba(255,255,255,.87);
    font-size:18px;
    line-height:1.8;
}

.cf-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:11px;
    font-size:14px;
}

.cf-breadcrumb a{
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}

.cf-breadcrumb span{
    color:rgba(255,255,255,.5);
    font-size:10px;
}

.cf-breadcrumb strong{
    color:#ffd76c;
}


/* INTRO */

.cf-about-intro{
    padding:105px 0;
    background:#fff;
}

.cf-about-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:75px;
    align-items:center;
}

.cf-about-content h2,
.cf-section-heading h2,
.cf-lagos-top h2,
.cf-vision-content h2,
.cf-donate-content h2,
.cf-water-impact-content h2{
    margin:0;
    color:var(--cf-green-dark);
    font-size:clamp(36px, 4vw, 54px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1.7px;
}

.cf-about-content h2 span,
.cf-section-heading h2 span,
.cf-lagos-top h2 span,
.cf-vision-content h2 span,
.cf-donate-content h2 span,
.cf-water-impact-content h2 span{
    color:var(--cf-orange);
}

.cf-lead{
    font-size:18px !important;
    line-height:1.85 !important;
    color:#35463d !important;
    margin-top:28px !important;
}

.cf-about-content > p{
    margin:17px 0 0;
    font-size:16px;
    line-height:1.9;
    color:var(--cf-muted);
}

.cf-about-values{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:32px;
}

.cf-value-item{
    display:flex;
    gap:14px;
    padding:20px;
    background:#f7faf5;
    border:1px solid #e8eee5;
    border-radius:18px;
}

.cf-value-icon{
    min-width:47px;
    width:47px;
    height:47px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:var(--cf-green);
    color:white;
    font-size:19px;
}

.cf-value-item h3{
    margin:1px 0 5px;
    color:var(--cf-green-dark);
    font-size:17px;
}

.cf-value-item p{
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:var(--cf-muted);
}


/* INTRO IMAGE */

.cf-about-visual{
    position:relative;
    padding:0 0 35px 35px;
}

.cf-visual-main{
    height:560px;
    border-radius:36px 36px 100px 36px;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(2,55,36,.17);
}

.cf-visual-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.cf-about-visual::before{
    content:"";
    position:absolute;
    width:72%;
    height:72%;
    left:0;
    bottom:0;
    background:linear-gradient(
        145deg,
        var(--cf-gold),
        #f3c751
    );
    border-radius:42px;
    z-index:-1;
}

.cf-floating-card{
    position:absolute;
    left:-10px;
    bottom:70px;
    max-width:295px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.14);
}

.cf-floating-icon{
    min-width:50px;
    width:50px;
    height:50px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:white;
    background:linear-gradient(
        135deg,
        var(--cf-green),
        var(--cf-lime)
    );
}

.cf-floating-card strong,
.cf-floating-card span{
    display:block;
}

.cf-floating-card strong{
    color:var(--cf-green-dark);
    margin-bottom:4px;
    font-size:15px;
}

.cf-floating-card span{
    color:var(--cf-muted);
    font-size:12px;
    line-height:1.45;
}


/* AFRICA */

.cf-africa-section{
    padding:100px 0;
    background:#f7faf5;
}

.cf-center-heading{
    max-width:800px;
    margin:0 auto 50px;
    text-align:center;
}

.cf-center-heading .cf-section-tag::before{
    display:none;
}

.cf-section-heading > p{
    margin:20px auto 0;
    max-width:700px;
    color:var(--cf-muted);
    line-height:1.85;
    font-size:16px;
}

.cf-work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.cf-work-card{
    position:relative;
    padding:36px 30px;
    background:#fff;
    border-radius:24px;
    border:1px solid #e7eee3;
    overflow:hidden;
    transition:.35s ease;
}

.cf-work-card::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--cf-green),
        var(--cf-lime),
        var(--cf-gold)
    );
}

.cf-work-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 55px rgba(5,77,49,.11);
}

.cf-work-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:#eff7e9;
    color:var(--cf-green);
    font-size:25px;
    margin-bottom:23px;
}

.cf-work-card h3{
    margin:0 0 12px;
    color:var(--cf-green-dark);
    font-size:22px;
}

.cf-work-card p{
    margin:0;
    color:var(--cf-muted);
    font-size:15px;
    line-height:1.8;
}


/* WATER IMPACT */

.cf-water-impact{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:590px;
    background:var(--cf-green-dark);
}

.cf-water-impact-image{
    min-height:590px;
}

.cf-water-impact-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.cf-water-impact-content{
    padding:85px clamp(40px, 7vw, 105px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
}

.cf-tag-light{
    color:#ffd269;
}

.cf-water-impact-content h2{
    color:white;
}

.cf-water-impact-content > p{
    margin:24px 0 0;
    max-width:620px;
    color:rgba(255,255,255,.75);
    font-size:16px;
    line-height:1.9;
}

.cf-impact-number{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:32px;
    padding:23px 0;
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(255,255,255,.15);
}

.cf-impact-number strong{
    color:#ffd260;
    font-size:clamp(40px, 5vw, 66px);
    line-height:1;
}

.cf-impact-number span{
    max-width:260px;
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,.82);
}

.cf-impact-note{
    font-size:14px !important;
}


/* LAGOS */

.cf-lagos-section{
    padding:105px 0;
    background:#fff;
}

.cf-lagos-wrapper{
    padding:50px;
    background:linear-gradient(
        145deg,
        #fbfdf9,
        #f3f8ef
    );
    border:1px solid #e4ece0;
    border-radius:32px;
}

.cf-lagos-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:end;
    padding-bottom:36px;
    border-bottom:1px solid #dfe9da;
}

.cf-registration-box{
    min-width:190px;
    text-align:center;
    padding:22px;
    border-radius:22px;
    background:var(--cf-green);
    color:#fff;
    box-shadow:0 15px 30px rgba(4,72,45,.18);
}

.cf-registration-box span,
.cf-registration-box strong,
.cf-registration-box small{
    display:block;
}

.cf-registration-box span{
    opacity:.75;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.cf-registration-box strong{
    margin:5px 0;
    color:#ffd264;
    font-size:36px;
}

.cf-registration-box small{
    font-size:11px;
    opacity:.82;
}

.cf-lagos-content-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:55px;
    padding-top:40px;
}

.cf-lagos-description > p{
    margin:0 0 18px;
    color:var(--cf-muted);
    font-size:16px;
    line-height:1.9;
}

.cf-quote-box{
    position:relative;
    margin-top:28px;
    padding:26px 27px 26px 65px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 13px 35px rgba(6,68,45,.07);
}

.cf-quote-box i{
    position:absolute;
    left:25px;
    top:27px;
    color:var(--cf-gold);
    font-size:24px;
}

.cf-quote-box p{
    margin:0;
    color:var(--cf-green-dark);
    font-weight:600;
    line-height:1.75;
}

.cf-support-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:13px;
}

.cf-support-item{
    display:flex;
    align-items:center;
    gap:13px;
    min-height:76px;
    padding:15px;
    background:#fff;
    border:1px solid #e1e9de;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
    color:var(--cf-green-dark);
    transition:.3s ease;
}

.cf-support-item:hover{
    border-color:#c7dcb8;
    transform:translateY(-3px);
}

.cf-support-item i{
    min-width:43px;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#edf6e8;
    color:var(--cf-green);
    font-size:17px;
}


/* VISION */

.cf-vision-section{
    padding:90px 0;
    background:#fffaf0;
}

.cf-vision-card{
    max-width:1000px;
    margin:auto;
    display:grid;
    grid-template-columns:150px 1fr;
    gap:40px;
    align-items:center;
    padding:45px;
    background:#fff;
    border-radius:30px;
    box-shadow:0 22px 55px rgba(89,74,29,.08);
}

.cf-vision-icon{
    width:135px;
    height:135px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        linear-gradient(
            145deg,
            var(--cf-green),
            var(--cf-lime)
        );
    color:#fff;
    font-size:50px;
    box-shadow:
        inset 0 0 0 12px rgba(255,255,255,.12),
        0 18px 35px rgba(5,76,48,.17);
}

.cf-vision-content p{
    margin:17px 0 0;
    color:var(--cf-muted);
    font-size:15px;
    line-height:1.85;
}


/* DONATION */

.cf-donate-cta{
    position:relative;
    padding:75px 0;
    background:
        radial-gradient(circle at 90% 10%,
        rgba(233,169,24,.25),
        transparent 30%),
        linear-gradient(
            125deg,
            #043c28,
            #07583a
        );
}

.cf-donate-inner{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:center;
}

.cf-donate-label{
    display:block;
    margin-bottom:12px;
    color:#ffd36b;
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.6px;
}

.cf-donate-content h2{
    color:#fff;
}

.cf-donate-content p{
    max-width:720px;
    margin:18px 0 0;
    color:rgba(255,255,255,.78);
    font-size:15px;
    line-height:1.85;
}

.cf-donate-action{
    min-width:220px;
    text-align:center;
}

.cf-donate-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:17px 28px;
    background:linear-gradient(
        135deg,
        #f0b01d,
        #dc8708
    );
    border-radius:50px;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.6px;
    font-weight:800;
    font-size:14px;
    box-shadow:0 15px 30px rgba(0,0,0,.17);
    transition:.3s ease;
}

.cf-donate-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 38px rgba(0,0,0,.23);
}

.cf-donate-action > span{
    display:block;
    margin-top:12px;
    color:rgba(255,255,255,.63);
    font-size:11px;
}


/* RESPONSIVE */

@media(max-width:991px){

    .cf-about-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .cf-about-visual{
        max-width:650px;
        width:100%;
        margin:auto;
    }

    .cf-work-grid{
        grid-template-columns:1fr 1fr;
    }

    .cf-water-impact{
        grid-template-columns:1fr;
    }

    .cf-water-impact-image{
        min-height:420px;
        height:420px;
    }

    .cf-lagos-top{
        grid-template-columns:1fr;
        align-items:start;
    }

    .cf-registration-box{
        width:220px;
    }

    .cf-lagos-content-grid{
        grid-template-columns:1fr;
    }

    .cf-donate-inner{
        grid-template-columns:1fr;
    }

    .cf-donate-action{
        text-align:left;
    }

}


@media(max-width:767px){

    .cf-container{
        width:min(100% - 28px, 1180px);
    }

    .cf-about-banner{
        min-height:330px;
    }

    .cf-about-banner-content{
        padding:65px 0;
    }

    .cf-about-banner h1{
        font-size:48px;
    }

    .cf-about-banner-content > p{
        font-size:15px;
        line-height:1.7;
    }

    .cf-about-intro,
    .cf-africa-section,
    .cf-lagos-section{
        padding:75px 0;
    }

    .cf-about-content h2,
    .cf-section-heading h2,
    .cf-lagos-top h2,
    .cf-vision-content h2,
    .cf-donate-content h2,
    .cf-water-impact-content h2{
        font-size:36px;
    }

    .cf-about-values{
        grid-template-columns:1fr;
    }

    .cf-visual-main{
        height:440px;
        border-radius:28px 28px 70px 28px;
    }

    .cf-about-visual{
        padding-left:18px;
    }

    .cf-floating-card{
        left:0;
        bottom:55px;
    }

    .cf-work-grid{
        grid-template-columns:1fr;
    }

    .cf-water-impact-content{
        padding:60px 25px;
    }

    .cf-impact-number{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .cf-lagos-wrapper{
        padding:30px 20px;
        border-radius:24px;
    }

    .cf-support-list{
        grid-template-columns:1fr;
    }

    .cf-vision-section{
        padding:70px 0;
    }

    .cf-vision-card{
        grid-template-columns:1fr;
        padding:30px 22px;
    }

    .cf-vision-icon{
        width:105px;
        height:105px;
        font-size:38px;
    }

    .cf-donate-cta{
        padding:65px 0;
    }

}


@media(max-width:480px){

    .cf-about-banner h1{
        font-size:42px;
    }

    .cf-about-content h2,
    .cf-section-heading h2,
    .cf-lagos-top h2,
    .cf-vision-content h2,
    .cf-donate-content h2,
    .cf-water-impact-content h2{
        font-size:31px;
    }

    .cf-visual-main{
        height:380px;
    }

    .cf-floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin:-35px 16px 0;
    }

    .cf-about-visual{
        padding:0;
    }

    .cf-about-visual::before{
        display:none;
    }

}





/* =========================================
   CHRIST FAITH FOOD BANK PAGE
========================================= */

.cf-foodbank-page{
    --fb-green:#064c32;
    --fb-dark:#033824;
    --fb-light-green:#66a922;
    --fb-lime:#83b62b;
    --fb-gold:#e8a615;
    --fb-orange:#d98908;
    --fb-soft:#f5f9f3;
    --fb-cream:#fff9ed;
    --fb-text:#26342c;
    --fb-muted:#68736d;
    --fb-white:#ffffff;

    font-family:"Poppins",sans-serif;
    color:var(--fb-text);
    overflow:hidden;
}

.cf-foodbank-page *,
.cf-foodbank-page *::before,
.cf-foodbank-page *::after{
    box-sizing:border-box;
}

.cf-foodbank-container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


/* =========================================
   BANNER
========================================= */

.cf-foodbank-banner{
    position:relative;
    min-height:390px;
    display:flex;
    align-items:center;

    background:
    linear-gradient(
        105deg,
        rgba(2,53,34,.97),
        rgba(6,91,55,.88)
    ),
    url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85")
    center/cover no-repeat;

    isolation:isolate;
}

.cf-foodbank-banner::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        var(--fb-gold),
        var(--fb-lime),
        var(--fb-gold)
    );
}

.cf-foodbank-banner-overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at 84% 35%,
        rgba(232,166,21,.20),
        transparent 28%
    );

    z-index:-1;
}

.cf-foodbank-banner-circle{
    position:absolute;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
}

.cf-fb-circle-1{
    width:320px;
    height:320px;
    right:6%;
    top:-90px;
}

.cf-fb-circle-2{
    width:170px;
    height:170px;
    right:25%;
    bottom:-85px;
}

.cf-foodbank-banner-content{
    max-width:760px;
    padding:80px 0;
    color:white;
}

.cf-foodbank-eyebrow,
.cf-foodbank-tag{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-bottom:16px;

    color:var(--fb-orange);

    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    line-height:1;
    text-transform:uppercase;
}

.cf-foodbank-eyebrow{
    color:#ffd46a;
}

.cf-foodbank-eyebrow::before,
.cf-foodbank-tag::before{
    content:"";

    width:30px;
    height:3px;

    border-radius:20px;

    background:currentColor;
}

.cf-foodbank-banner h1{
    margin:0 0 17px;

    font-size:clamp(48px,6vw,75px);
    line-height:1;
    letter-spacing:-2px;
    font-weight:800;
}

.cf-foodbank-banner-content > p{
    max-width:650px;

    margin:0 0 26px;

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

    font-size:18px;
    line-height:1.8;
}

.cf-foodbank-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:11px;

    font-size:14px;
}

.cf-foodbank-breadcrumb a{
    display:flex;
    align-items:center;
    gap:8px;

    color:white;
    text-decoration:none;
}

.cf-foodbank-breadcrumb > span{
    color:rgba(255,255,255,.5);
    font-size:10px;
}

.cf-foodbank-breadcrumb strong{
    color:#ffd46a;
}


/* =========================================
   WHY WE HELP
========================================= */

.cf-help-section{
    padding:105px 0;
    background:#fff;
}

.cf-help-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:75px;
    align-items:center;
}


/* IMAGE */

.cf-help-image-wrap{
    position:relative;

    padding:0 34px 40px 0;
}

.cf-help-image-wrap::before{
    content:"";

    position:absolute;

    right:0;
    bottom:0;

    width:75%;
    height:75%;

    border-radius:40px;

    background:linear-gradient(
        145deg,
        var(--fb-gold),
        #f1c85e
    );

    z-index:0;
}

.cf-help-image-main{
    position:relative;

    height:570px;

    overflow:hidden;

    border-radius:
        35px
        100px
        35px
        35px;

    box-shadow:
        0 25px 65px
        rgba(4,65,42,.15);

    z-index:1;
}

.cf-help-image-main img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

.cf-help-small-card{
    position:absolute;

    right:-15px;
    bottom:75px;

    z-index:2;

    max-width:290px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:18px;

    background:#fff;

    border-radius:18px;

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

.cf-help-small-icon{
    flex:0 0 52px;

    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        var(--fb-green),
        var(--fb-light-green)
    );

    color:white;

    font-size:20px;
}

.cf-help-small-card strong,
.cf-help-small-card span{
    display:block;
}

.cf-help-small-card strong{
    margin-bottom:4px;

    color:var(--fb-dark);

    font-size:15px;
}

.cf-help-small-card span{
    color:var(--fb-muted);

    font-size:12px;
    line-height:1.5;
}


/* CONTENT */

.cf-help-content h2,
.cf-project-heading h2,
.cf-impact-heading h2,
.cf-food-donate-content h2{
    margin:0;

    color:var(--fb-dark);

    font-size:clamp(37px,4vw,54px);
    line-height:1.12;
    letter-spacing:-1.6px;
    font-weight:800;
}

.cf-help-content h2 span,
.cf-project-heading h2 span,
.cf-impact-heading h2 span,
.cf-food-donate-content h2 span{
    color:var(--fb-orange);
}

.cf-help-content > p{
    margin:17px 0 0;

    color:var(--fb-muted);

    font-size:16px;
    line-height:1.9;
}

.cf-help-content .cf-help-lead{
    margin-top:28px;

    color:#35483e;

    font-size:18px;
    line-height:1.85;
}

.cf-highlight-message{
    position:relative;

    display:flex;
    gap:16px;
    align-items:flex-start;

    margin:27px 0;
    padding:23px 25px;

    border-left:5px solid var(--fb-gold);
    border-radius:0 18px 18px 0;

    background:var(--fb-cream);
}

.cf-highlight-message i{
    margin-top:3px;

    color:var(--fb-orange);

    font-size:22px;
}

.cf-highlight-message p{
    margin:0;

    color:var(--fb-dark);

    font-size:16px;
    font-weight:600;
    line-height:1.75;
}


/* SMALL FEATURES */

.cf-help-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:30px;
}

.cf-help-feature{
    padding:17px 14px;

    border:1px solid #e3ebe0;
    border-radius:17px;

    background:#f8fbf6;
}

.cf-help-feature i{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin-bottom:10px;

    border-radius:11px;

    background:var(--fb-green);

    color:white;

    font-size:15px;
}

.cf-help-feature strong,
.cf-help-feature span{
    display:block;
}

.cf-help-feature strong{
    margin-bottom:4px;

    color:var(--fb-dark);

    font-size:14px;
}

.cf-help-feature span{
    color:var(--fb-muted);

    font-size:11px;
    line-height:1.5;
}


/* =========================================
   STATEMENT STRIP
========================================= */

.cf-food-statement{
    padding:45px 0;

    background:
    linear-gradient(
        120deg,
        var(--fb-dark),
        var(--fb-green)
    );
}

.cf-food-statement-inner{
    display:flex;
    align-items:center;
    gap:25px;
}

.cf-statement-icon{
    flex:0 0 78px;

    width:78px;
    height:78px;

    display:grid;
    place-items:center;

    border-radius:22px;

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

    color:#ffd268;

    font-size:30px;
}

.cf-statement-content > span{
    display:block;

    margin-bottom:7px;

    color:#ffd268;

    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.cf-statement-content h2{
    margin:0;

    color:white;

    font-size:clamp(24px,3vw,36px);
    line-height:1.4;
    font-weight:600;
}

.cf-statement-content h2 strong{
    color:#ffd268;
}


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

.cf-community-projects{
    padding:105px 0;

    background:var(--fb-soft);
}

.cf-project-heading{
    max-width:780px;

    margin:0 auto 50px;

    text-align:center;
}

.cf-project-heading .cf-foodbank-tag::before{
    display:none;
}

.cf-project-heading > p{
    max-width:680px;

    margin:20px auto 0;

    color:var(--fb-muted);

    font-size:16px;
    line-height:1.85;
}


/* PROJECT CARD */

.cf-food-project-card{
    display:grid;
    grid-template-columns:1fr 1fr;

    max-width:1080px;

    margin:auto;

    overflow:hidden;

    border:1px solid #e2e9df;
    border-radius:30px;

    background:#fff;

    box-shadow:
        0 25px 60px
        rgba(3,58,37,.09);
}

.cf-food-project-image{
    position:relative;

    min-height:540px;

    overflow:hidden;
}

.cf-food-project-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .5s ease;
}

.cf-food-project-card:hover
.cf-food-project-image img{
    transform:scale(1.04);
}

.cf-project-label{
    position:absolute;

    left:25px;
    top:25px;

    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:11px 15px;

    border-radius:50px;

    background:rgba(4,68,43,.93);

    color:white;

    font-size:12px;
    font-weight:700;
}

.cf-food-project-content{
    padding:55px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cf-food-project-small{
    display:block;

    margin-bottom:8px;

    color:var(--fb-orange);

    font-size:12px;
    font-weight:700;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.cf-food-project-content h3{
    margin:0 0 19px;

    color:var(--fb-dark);

    font-size:46px;
    line-height:1.1;
    font-weight:800;
}

.cf-food-project-content > p{
    margin:0 0 17px;

    color:var(--fb-muted);

    font-size:16px;
    line-height:1.85;
}


/* PACKAGE */

.cf-package-box{
    display:flex;
    gap:16px;
    align-items:center;

    margin:13px 0 27px;
    padding:20px;

    border-radius:18px;

    background:#f4f9f1;
}

.cf-package-icon{
    flex:0 0 52px;

    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:var(--fb-green);

    color:white;

    font-size:20px;
}

.cf-package-box strong,
.cf-package-box span{
    display:block;
}

.cf-package-box strong{
    margin-bottom:4px;

    color:var(--fb-dark);

    font-size:15px;
}

.cf-package-box span{
    color:var(--fb-muted);

    font-size:12px;
    line-height:1.55;
}


/* BUTTON */

.cf-project-donate-btn{
    width:max-content;

    display:inline-flex;
    align-items:center;
    gap:13px;

    padding:15px 24px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--fb-gold),
        var(--fb-orange)
    );

    color:white;

    text-decoration:none;

    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;

    box-shadow:
        0 12px 25px
        rgba(209,132,12,.25);

    transition:.3s ease;
}

.cf-project-donate-btn:hover{
    transform:translateY(-3px);
}

.cf-project-donate-btn i{
    transition:transform .3s ease;
}

.cf-project-donate-btn:hover i{
    transform:translateX(4px);
}


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

.cf-food-impact-section{
    padding:100px 0;

    background:var(--fb-dark);
}

.cf-impact-heading{
    max-width:750px;

    margin:0 auto 48px;

    text-align:center;
}

.cf-foodbank-tag-light{
    color:#ffd166;
}

.cf-impact-heading
.cf-foodbank-tag-light::before{
    display:none;
}

.cf-impact-heading h2{
    color:white;
}

.cf-food-impact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:18px;
}

.cf-impact-card{
    padding:30px 23px;

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

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

    transition:.35s ease;
}

.cf-impact-card:hover{
    transform:translateY(-7px);

    background:rgba(255,255,255,.1);
}

.cf-impact-icon{
    width:57px;
    height:57px;

    display:grid;
    place-items:center;

    margin-bottom:21px;

    border-radius:17px;

    background:#ffd166;

    color:var(--fb-dark);

    font-size:22px;
}

.cf-impact-card h3{
    margin:0 0 11px;

    color:white;

    font-size:19px;
}

.cf-impact-card p{
    margin:0;

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

    font-size:13px;
    line-height:1.75;
}


/* =========================================
   DONATE CTA
========================================= */

.cf-food-donate{
    position:relative;

    padding:85px 0;

    background:
    url("https://images.unsplash.com/photo-1593113598332-cd288d649433?auto=format&fit=crop&w=1800&q=85")
    center/cover no-repeat;

    isolation:isolate;
}

.cf-food-donate-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        100deg,
        rgba(3,53,35,.97),
        rgba(6,82,50,.91)
    );

    z-index:-1;
}

.cf-food-donate-content{
    display:grid;
    grid-template-columns:1fr auto;

    gap:60px;

    align-items:center;
}

.cf-food-donate-label{
    display:block;

    margin-bottom:10px;

    color:#ffd166;

    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.cf-food-donate-content h2{
    color:white;
}

.cf-food-donate-content > div:first-child p{
    max-width:700px;

    margin:18px 0 0;

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

    font-size:15px;
    line-height:1.85;
}

.cf-food-donate-action{
    min-width:230px;

    text-align:center;
}

.cf-food-donate-action a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:17px 29px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #f2b323,
        #dc8909
    );

    color:white;

    text-decoration:none;

    font-size:14px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.18);

    transition:.3s ease;
}

.cf-food-donate-action a:hover{
    transform:translateY(-4px);
}

.cf-food-donate-action span{
    display:block;

    margin-top:12px;

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

    font-size:11px;
}


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

@media(max-width:991px){

    .cf-help-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .cf-help-image-wrap{
        max-width:650px;
        width:100%;
        margin:auto;
    }

    .cf-food-project-card{
        grid-template-columns:1fr;
    }

    .cf-food-project-image{
        min-height:450px;
    }

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

    .cf-food-donate-content{
        grid-template-columns:1fr;
    }

    .cf-food-donate-action{
        text-align:left;
    }

}


@media(max-width:767px){

    .cf-foodbank-container{
        width:min(100% - 28px,1180px);
    }

    .cf-foodbank-banner{
        min-height:330px;
    }

    .cf-foodbank-banner-content{
        padding:65px 0;
    }

    .cf-foodbank-banner h1{
        font-size:48px;
    }

    .cf-foodbank-banner-content > p{
        font-size:15px;
        line-height:1.7;
    }

    .cf-help-section,
    .cf-community-projects,
    .cf-food-impact-section{
        padding:75px 0;
    }

    .cf-help-content h2,
    .cf-project-heading h2,
    .cf-impact-heading h2,
    .cf-food-donate-content h2{
        font-size:36px;
    }

    .cf-help-image-main{
        height:450px;

        border-radius:
            28px
            70px
            28px
            28px;
    }

    .cf-help-small-card{
        right:0;
        bottom:55px;
    }

    .cf-help-features{
        grid-template-columns:1fr;
    }

    .cf-food-statement-inner{
        align-items:flex-start;
    }

    .cf-statement-icon{
        flex:0 0 60px;
        width:60px;
        height:60px;
        border-radius:16px;
        font-size:23px;
    }

    .cf-food-project-content{
        padding:35px 25px;
    }

    .cf-food-project-content h3{
        font-size:38px;
    }

    .cf-food-impact-grid{
        grid-template-columns:1fr;
    }

    .cf-food-donate{
        padding:70px 0;
    }

}


@media(max-width:480px){

    .cf-foodbank-banner h1{
        font-size:42px;
    }

    .cf-help-content h2,
    .cf-project-heading h2,
    .cf-impact-heading h2,
    .cf-food-donate-content h2{
        font-size:31px;
    }

    .cf-help-image-wrap{
        padding:0;
    }

    .cf-help-image-wrap::before{
        display:none;
    }

    .cf-help-image-main{
        height:390px;
    }

    .cf-help-small-card{
        position:relative;

        right:auto;
        bottom:auto;

        margin:-35px 14px 0;
    }

    .cf-food-statement-inner{
        flex-direction:column;
    }

    .cf-food-project-image{
        min-height:330px;
    }

    .cf-package-box{
        align-items:flex-start;
    }

}




/* =========================================
   GLOBAL PAGE BANNER - CENTER ALL CONTENT
========================================= */

/* About Us Banner */
.cf-about-banner-content,

/* Food Bank Banner */
.cf-foodbank-banner-content{
    width:100%;
    max-width:900px;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}


/* Center banner small labels */
.cf-about-banner .cf-eyebrow,
.cf-foodbank-banner .cf-foodbank-eyebrow{
    justify-content:center !important;
}


/* Center banner paragraphs */
.cf-about-banner-content > p,
.cf-foodbank-banner-content > p{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}


/* Center breadcrumbs */
.cf-about-banner .cf-breadcrumb,
.cf-foodbank-banner .cf-foodbank-breadcrumb{
    justify-content:center !important;
}


/* Center heading */
.cf-about-banner h1,
.cf-foodbank-banner h1{
    text-align:center !important;
}


/* Optional - remove line before top label */
.cf-about-banner .cf-eyebrow::before,
.cf-foodbank-banner .cf-foodbank-eyebrow::before{
    display:none;
}




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

.cf-contact-form{
    width:100%;
    padding:32px;
    background:#ffffff;
    border:1px solid #e4eee8;
    border-radius:22px;
    box-shadow:0 15px 45px rgba(20,70,45,.08);
}


/* FORM GROUP */

.cf-contact-form .cf-form-group{
    margin-bottom:22px;
}


/* LABEL */

.cf-contact-form label{
    display:block;
    margin-bottom:8px;

    color:#174b31;

    font-size:14px;
    font-weight:700;
    line-height:1.4;
}


/* INPUT / SELECT / TEXTAREA */

.cf-contact-form input,
.cf-contact-form select,
.cf-contact-form textarea{
    width:100%;

    padding:14px 16px;

    border:1px solid #dce7e0;
    border-radius:11px;

    background:#f9fcfa;

    color:#263b30;

    font-family:inherit;
    font-size:15px;
    font-weight:400;

    outline:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* INPUT HEIGHT */

.cf-contact-form input,
.cf-contact-form select{
    height:52px;
}


/* TEXTAREA */

.cf-contact-form textarea{
    min-height:145px;
    resize:vertical;
    line-height:1.6;
}


/* PLACEHOLDER */

.cf-contact-form input::placeholder,
.cf-contact-form textarea::placeholder{
    color:#98a69f;
}


/* SELECT */

.cf-contact-form select{
    cursor:pointer;
    color:#66786e;
}


/* FOCUS */

.cf-contact-form input:focus,
.cf-contact-form select:focus,
.cf-contact-form textarea:focus{
    border-color:#177348;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(23,115,72,.08);
}


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

.cf-contact-form .cf-donate-btn{
    width:auto;
    min-width:190px;

    min-height:52px;

    padding:0 24px;

    border:0;
    border-radius:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:
        linear-gradient(
            135deg,
            #075c38,
            #158052
        );

    color:#ffffff;

    font-family:inherit;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 28px rgba(7,92,56,.20);

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


.cf-contact-form .cf-donate-btn i{
    font-size:13px;
}


.cf-contact-form .cf-donate-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 17px 35px rgba(7,92,56,.27);
}


/* =========================================================
   OPTIONAL TWO-COLUMN FIELDS

   If later you put two .cf-form-group elements inside:
   <div class="cf-form-row"> ... </div>
========================================================= */

.cf-contact-form .cf-form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .cf-contact-form{
        padding:24px 20px;
        border-radius:18px;
    }

    .cf-contact-form .cf-form-group{
        margin-bottom:18px;
    }

    .cf-contact-form label{
        font-size:13px;
    }

    .cf-contact-form input,
    .cf-contact-form select{
        height:50px;
    }

    .cf-contact-form input,
    .cf-contact-form select,
    .cf-contact-form textarea{
        padding:13px 14px;
        font-size:14px;
    }

    .cf-contact-form textarea{
        min-height:130px;
    }

    .cf-contact-form .cf-form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .cf-contact-form .cf-donate-btn{
        width:100%;
        min-height:50px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .cf-contact-form{
        padding:20px 16px;
    }

}





/* =========================================================
   DONATION PAGE BEAUTIFICATION
   Scoped only to .cf-donation-page
========================================================= */


/* MAIN PAGE */
.cf-donation-page{
    background:#f8fbf9;
}


/* =========================================================
   BANNER
========================================================= */

.cf-donation-page .cf-about-banner{
    min-height:390px;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(4,62,38,.80),
            rgba(3,52,32,.90)
        ),
        url('https://images.unsplash.com/photo-1593113598332-cd288d649433?auto=format&fit=crop&w=1800&q=85')
        center/cover no-repeat;
}

.cf-donation-page .cf-about-banner-content{
    max-width:850px;
    margin:auto;
    text-align:center;
    padding:65px 20px;
}

.cf-donation-page .cf-about-banner-content h1{
    font-size:clamp(44px,5vw,68px);
    line-height:1.05;
    margin-bottom:16px;
}

.cf-donation-page .cf-about-banner-content p{
    max-width:700px;
    margin:0 auto 22px;
    font-size:17px;
    line-height:1.7;
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.cf-donation-page .cf-about-intro{
    padding:90px 0;
    background:#ffffff;
}

.cf-donation-page .cf-about-grid{
    gap:70px;
}

.cf-donation-page .cf-about-content h2{
    font-size:clamp(34px,4vw,52px);
    line-height:1.15;
    margin-bottom:22px;
}

.cf-donation-page .cf-about-content p{
    font-size:16px;
    line-height:1.8;
    margin-bottom:17px;
}

.cf-donation-page .cf-about-content .cf-lead{
    font-size:19px;
    line-height:1.75;
    color:#3f5b4b;
}

.cf-donation-page .cf-about-values{
    gap:18px;
    margin-top:30px;
}

.cf-donation-page .cf-value-item{
    padding:18px 20px;
    border-radius:16px;
    background:#f6fbf8;
    border:1px solid #e1eee7;
}

.cf-donation-page .cf-value-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    flex:0 0 50px;
    background:#e8f6ee;
    color:#0b6b40;
}


/* IMAGE */

.cf-donation-page .cf-visual-main{
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(22,72,48,.14);
}

.cf-donation-page .cf-visual-main img{
    transition:transform .6s ease;
}

.cf-donation-page .cf-visual-main:hover img{
    transform:scale(1.04);
}

.cf-donation-page .cf-floating-card{
    border-radius:18px;
    box-shadow:0 16px 40px rgba(20,60,40,.13);
}


/* =========================================================
   DONATION AMOUNT CARDS
========================================================= */

.cf-donation-page .cf-africa-section{
    padding:90px 0;
}

.cf-donation-page .cf-section-heading{
    max-width:800px;
    margin:0 auto 45px;
}

.cf-donation-page .cf-section-heading h2{
    font-size:clamp(34px,4vw,50px);
    line-height:1.15;
    margin-bottom:17px;
}

.cf-donation-page .cf-section-heading p{
    font-size:16px;
    line-height:1.75;
}

.cf-donation-page .cf-work-grid{
    gap:22px;
    margin-bottom:22px;
}

.cf-donation-page .cf-work-card{
    position:relative;
    overflow:hidden;

    padding:30px 26px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #e3eee8;

    box-shadow:0 12px 35px rgba(21,70,46,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.cf-donation-page .cf-work-card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 48px rgba(21,70,46,.12);
    border-color:#cfe3d8;
}

.cf-donation-page .cf-work-icon{
    width:58px;
    height:58px;

    margin-bottom:18px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #0a6840,
            #14905b
        );

    color:#ffffff;

    font-size:22px;
}

.cf-donation-page .cf-work-card h3{
    font-size:23px;
    margin-bottom:12px;
}

.cf-donation-page .cf-work-card p{
    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   VISION / MAKE A DONATION BLOCK
========================================================= */

.cf-donation-page .cf-vision-section{
    padding:80px 0;
}

.cf-donation-page .cf-vision-card{
    padding:42px 48px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #f0faf5,
            #ffffff
        );

    border:1px solid #dcece3;

    box-shadow:0 16px 45px rgba(22,70,48,.07);
}

.cf-donation-page .cf-vision-icon{
    width:78px;
    height:78px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #0a6840,
            #158e5a
        );

    color:#ffffff;

    box-shadow:0 12px 28px rgba(10,104,64,.18);
}

.cf-donation-page .cf-vision-content h2{
    font-size:clamp(30px,3.5vw,44px);
    margin-bottom:16px;
}


/* =========================================================
   DONATION METHODS
========================================================= */

.cf-donation-page .cf-lagos-section{
    padding:90px 0;
}

.cf-donation-page .cf-lagos-wrapper{
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(20,70,45,.08);
}

.cf-donation-page .cf-lagos-top{
    padding:35px 38px;
}

.cf-donation-page .cf-lagos-content-grid{
    gap:35px;
}

.cf-donation-page .cf-lagos-description{
    padding:10px;
}

.cf-donation-page .cf-lagos-description h3{
    font-size:24px;
    margin:15px 0;
}

.cf-donation-page .cf-support-list{
    gap:13px;
}

.cf-donation-page .cf-support-item{
    padding:15px 17px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e4eee8;
}

.cf-donation-page .cf-support-item i{
    color:#0a6c41;
    font-size:18px;
}

.cf-donation-page .cf-quote-box{
    margin:20px 0;
    padding:20px 22px;
    border-radius:16px;
    border-left:4px solid #d9a51b;
}


/* =========================================================
   DONATE BUTTONS
========================================================= */

.cf-donation-page .cf-donate-btn{
    min-height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 24px;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #075b38,
            #148a57
        );

    color:#ffffff;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    box-shadow:0 12px 28px rgba(7,91,56,.18);

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

.cf-donation-page .cf-donate-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(7,91,56,.26);
}


/* =========================================================
   WATER IMPACT / GIFT SECTION
========================================================= */

.cf-donation-page .cf-water-impact{
    margin:0;
}

.cf-donation-page .cf-water-impact-content{
    padding:55px 60px;
}

.cf-donation-page .cf-water-impact-content h2{
    font-size:clamp(32px,4vw,48px);
    margin-bottom:18px;
}

.cf-donation-page .cf-water-impact-content p{
    font-size:16px;
    line-height:1.75;
}

.cf-donation-page .cf-impact-number{
    margin:25px 0;
}

.cf-donation-page .cf-impact-number strong{
    font-size:42px;
}


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

.cf-donation-page .cf-donate-cta{
    padding:75px 0;
}

.cf-donation-page .cf-donate-inner{
    padding:42px 48px;
    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #075b38,
            #0c7046
        );

    box-shadow:0 24px 60px rgba(7,85,52,.20);
}

.cf-donation-page .cf-donate-content h2{
    font-size:clamp(30px,3.5vw,46px);
    line-height:1.15;
}

.cf-donation-page .cf-donate-content p{
    font-size:16px;
    line-height:1.7;
}

.cf-donation-page .cf-donate-action{
    gap:14px;
}


/* =========================================================
   THANK YOU SECTION
========================================================= */

.cf-donation-page .cf-vision-section:last-of-type .cf-vision-card{
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    border-color:#efe2bf;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:991px){

    .cf-donation-page .cf-about-intro,
    .cf-donation-page .cf-africa-section,
    .cf-donation-page .cf-lagos-section,
    .cf-donation-page .cf-vision-section{
        padding:70px 0;
    }

    .cf-donation-page .cf-about-grid{
        gap:45px;
    }

    .cf-donation-page .cf-work-grid{
        gap:18px;
    }

    .cf-donation-page .cf-vision-card{
        padding:34px;
    }

    .cf-donation-page .cf-water-impact-content{
        padding:40px 35px;
    }

    .cf-donation-page .cf-donate-inner{
        padding:35px;
    }

}


@media(max-width:767px){

    .cf-donation-page .cf-about-banner{
        min-height:340px;
    }

    .cf-donation-page .cf-about-banner-content{
        padding:50px 10px;
    }

    .cf-donation-page .cf-about-banner-content h1{
        font-size:40px;
    }

    .cf-donation-page .cf-about-banner-content p{
        font-size:14px;
    }

    .cf-donation-page .cf-about-intro,
    .cf-donation-page .cf-africa-section,
    .cf-donation-page .cf-lagos-section,
    .cf-donation-page .cf-vision-section,
    .cf-donation-page .cf-donate-cta{
        padding:55px 0;
    }

    .cf-donation-page .cf-about-content h2,
    .cf-donation-page .cf-section-heading h2{
        font-size:31px;
    }

    .cf-donation-page .cf-work-card{
        padding:24px 20px;
    }

    .cf-donation-page .cf-work-card h3{
        font-size:20px;
    }

    .cf-donation-page .cf-vision-card{
        padding:27px 22px;
    }

    .cf-donation-page .cf-lagos-top{
        padding:27px 22px;
    }

    .cf-donation-page .cf-water-impact-content{
        padding:35px 22px;
    }

    .cf-donation-page .cf-donate-inner{
        padding:30px 22px;
    }

    .cf-donation-page .cf-donate-btn{
        width:100%;
    }

}




/* =========================================================
   UNIQUE WAYS TO DONATE SECTION
========================================================= */

.cf-donation-methods{
    position:relative;
    padding:100px 0;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(15,124,76,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(214,165,31,.08),
            transparent 28%
        ),
        #f8fbf9;
}


/* HEADING */

.cf-donation-methods-heading{
    max-width:790px;
    margin:0 auto 50px;
    text-align:center;
}

.cf-donation-methods-heading h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(36px,4vw,52px);
    line-height:1.15;
    color:#0a4d31;
    margin-bottom:16px;
}

.cf-donation-methods-heading h2 span{
    color:#d4a01b;
}

.cf-donation-methods-heading p{
    max-width:680px;
    margin:auto;
    color:#6c7c74;
    font-size:16px;
    line-height:1.75;
}


/* GRID */

.cf-donation-methods-grid{
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:38px;

    max-width:1040px;
    margin:auto;
}


/* CARD */

.cf-donation-method-card{
    position:relative;

    min-height:520px;

    padding:38px 36px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid #e2ece6;

    box-shadow:
        0 20px 55px rgba(20,70,45,.09);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cf-donation-method-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 30px 70px rgba(20,70,45,.14);
}


/* TOP ACCENT */

.cf-bank-method::before,
.cf-card-method::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;
}

.cf-bank-method::before{
    background:
        linear-gradient(
            90deg,
            #075d39,
            #1c9b61
        );
}

.cf-card-method::before{
    background:
        linear-gradient(
            90deg,
            #c58c0c,
            #e2b43f
        );
}


/* ICON */

.cf-donation-method-icon{
    width:66px;
    height:66px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:19px;

    margin-bottom:23px;

    font-size:25px;
}

.cf-bank-method .cf-donation-method-icon{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #075d39,
            #1a8d59
        );

    box-shadow:
        0 12px 28px rgba(7,93,57,.20);
}

.cf-card-method .cf-donation-method-icon{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #bd870c,
            #dfb23a
        );

    box-shadow:
        0 12px 28px rgba(190,140,20,.20);
}


/* LABEL */

.cf-donation-method-label{
    display:block;

    color:#75827b;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.8px;
    text-transform:uppercase;

    margin-bottom:10px;
}


/* TITLE */

.cf-donation-method-card h3{
    font-family:'Playfair Display',serif;

    color:#153c2a;

    font-size:28px;
    line-height:1.25;

    margin-bottom:15px;
}


/* PARAGRAPH */

.cf-donation-method-card > p{
    color:#6f7e76;

    font-size:15px;
    line-height:1.75;

    margin-bottom:24px;
}


/* =========================================================
   BANK DETAILS
========================================================= */

.cf-bank-details{
    border-radius:18px;
    overflow:hidden;

    border:1px solid #e4ece7;

    background:#fbfdfc;

    margin-top:25px;
}


.cf-bank-detail-row{
    padding:15px 17px;

    display:grid;
    grid-template-columns:125px 1fr;

    gap:15px;

    align-items:start;

    border-bottom:1px solid #e8efeb;
}

.cf-bank-detail-row:last-child{
    border-bottom:0;
}

.cf-bank-detail-row span{
    color:#819087;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.6px;
}

.cf-bank-detail-row strong{
    color:#194630;

    font-size:14px;
    line-height:1.45;

    word-break:break-word;
}


/* BANK NOTE */

.cf-donation-method-note{
    margin-top:20px;

    padding:14px 15px;

    display:flex;
    gap:10px;
    align-items:flex-start;

    border-radius:13px;

    background:#eef8f2;

    color:#536c60;

    font-size:13px;
    line-height:1.55;
}

.cf-donation-method-note i{
    color:#0c7849;
    margin-top:3px;
}


/* =========================================================
   CARD PAYMENT
========================================================= */

.cf-card-payment-box{
    display:flex;
    align-items:center;

    gap:15px;

    padding:18px;

    margin:28px 0;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

    border:1px solid #eee0b7;
}


.cf-card-payment-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #bf890e,
            #dda928
        );

    font-size:19px;
}


.cf-card-payment-box strong{
    display:block;

    color:#4e421e;

    font-size:15px;

    margin-bottom:4px;
}


.cf-card-payment-box span{
    color:#8a8063;

    font-size:12px;
}


/* BUTTON */

.cf-card-donate-btn{
    width:100%;
    min-height:55px;

    padding:0 23px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    border-radius:50px;

    text-decoration:none;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #075d39,
            #138655
        );

    font-size:14px;
    font-weight:800;

    box-shadow:
        0 12px 28px rgba(7,93,57,.20);

    transition:.3s ease;
}

.cf-card-donate-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 18px 38px rgba(7,93,57,.27);
}

.cf-card-donate-btn .fa-arrow-right{
    transition:.3s ease;
}

.cf-card-donate-btn:hover .fa-arrow-right{
    transform:translateX(4px);
}


/* SUPPORT TEXT */

.cf-card-support-text{
    margin-top:20px !important;
    margin-bottom:0 !important;

    text-align:center;

    font-size:13px !important;

    color:#7c8982 !important;
}


/* =========================================================
   CENTER OR BADGE
========================================================= */

.cf-donation-method-or{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:10;

    width:60px;
    height:60px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffffff;

    border:7px solid #f8fbf9;

    box-shadow:
        0 10px 30px rgba(20,60,40,.13);
}

.cf-donation-method-or span{
    color:#637269;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:850px){

    .cf-donation-methods{
        padding:75px 0;
    }

    .cf-donation-methods-grid{
        grid-template-columns:1fr;

        gap:25px;

        max-width:650px;
    }

    .cf-donation-method-card{
        min-height:auto;
    }

    .cf-donation-method-or{
        position:relative;

        left:auto;
        top:auto;

        transform:none;

        margin:-6px auto;
    }

}


@media(max-width:576px){

    .cf-donation-methods{
        padding:60px 0;
    }

    .cf-donation-methods-heading{
        margin-bottom:35px;
    }

    .cf-donation-methods-heading h2{
        font-size:31px;
    }

    .cf-donation-methods-heading p{
        font-size:14px;
    }

    .cf-donation-method-card{
        padding:29px 22px;

        border-radius:22px;
    }

    .cf-donation-method-card h3{
        font-size:24px;
    }

    .cf-bank-detail-row{
        grid-template-columns:1fr;

        gap:5px;

        padding:14px;
    }

}




/* =========================================================
   DONATION REFERENCE - PREMIUM DESIGN
========================================================= */

.cf-reference-section{
    position:relative;
    padding:95px 0;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(12,112,68,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(214,166,35,.08),
            transparent 30%
        ),
        #ffffff;
}


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

.cf-reference-heading{
    max-width:800px;
    margin:0 auto 48px;
    text-align:center;
}

.cf-reference-heading h2{
    margin:0 0 17px;

    font-family:'Playfair Display',serif;

    font-size:clamp(36px,4vw,52px);
    line-height:1.15;

    color:#0a4d31;
}

.cf-reference-heading h2 span{
    color:#d3a01c;
}

.cf-reference-heading p{
    max-width:690px;
    margin:0 auto;

    color:#6d7e75;

    font-size:16px;
    line-height:1.75;
}


/* =========================================================
   REFERENCE WRAPPER
========================================================= */

.cf-reference-wrapper{
    max-width:1050px;
    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:16px;
}


/* =========================================================
   EACH REFERENCE
========================================================= */

.cf-reference-item{
    position:relative;

    display:grid;

    grid-template-columns:
        68px
        minmax(0,1fr)
        210px;

    gap:22px;

    align-items:center;

    padding:22px 24px;

    background:#ffffff;

    border:1px solid #e1ece6;

    border-radius:20px;

    box-shadow:
        0 10px 35px rgba(19,66,43,.055);

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


.cf-reference-item:hover{
    transform:translateX(7px);

    border-color:#c9dfd3;

    box-shadow:
        0 18px 45px rgba(19,66,43,.10);
}


/* LEFT LINE */

.cf-reference-item::before{
    content:"";

    position:absolute;

    left:0;
    top:18px;
    bottom:18px;

    width:4px;

    border-radius:0 10px 10px 0;

    background:
        linear-gradient(
            #087044,
            #21a46a
        );
}


/* =========================================================
   ICON
========================================================= */

.cf-reference-icon{
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#eaf7f0;

    color:#087044;

    font-size:23px;

    transition:.3s ease;
}


.cf-reference-item:hover .cf-reference-icon{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #07643d,
            #14905a
        );

    transform:rotate(-5deg);
}


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

.cf-reference-small{
    display:block;

    margin-bottom:4px;

    color:#9a7a24;

    font-size:10px;
    font-weight:800;

    letter-spacing:1.4px;
    text-transform:uppercase;
}


.cf-reference-content h3{
    margin:0 0 7px;

    color:#173f2b;

    font-family:'Playfair Display',serif;

    font-size:23px;
}


.cf-reference-content p{
    max-width:580px;

    margin:0;

    color:#728078;

    font-size:14px;
    line-height:1.65;
}


/* =========================================================
   REFERENCE CODE
========================================================= */

.cf-reference-code{
    min-height:75px;

    padding:13px 16px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #f0f9f4,
            #f8fcfa
        );

    border:1px dashed #b8d8c6;
}


.cf-reference-code span{
    display:block;

    margin-bottom:5px;

    color:#849188;

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:1.3px;
}


.cf-reference-code strong{
    display:block;

    color:#07643d;

    font-size:14px;
    font-weight:800;

    letter-spacing:.5px;
}


/* DIFFERENT ACCENT FOR GENERAL SUPPORT */

.cf-reference-item:last-child::before{
    background:
        linear-gradient(
            #c18a10,
            #e0b23a
        );
}

.cf-reference-item:last-child .cf-reference-icon{
    background:#fff7e5;
    color:#b57f08;
}

.cf-reference-item:last-child .cf-reference-code{
    background:#fffbf1;
    border-color:#e5ce8e;
}

.cf-reference-item:last-child .cf-reference-code strong{
    color:#9c700d;
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.cf-reference-note{
    max-width:850px;

    margin:30px auto 0;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    border-radius:17px;

    background:#f2f8f5;

    border:1px solid #dcebe3;
}


.cf-reference-note-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    background:#0b7045;

    color:#ffffff;

    font-size:17px;
}


.cf-reference-note strong{
    display:block;

    margin-bottom:3px;

    color:#17432e;

    font-size:14px;
}


.cf-reference-note p{
    margin:0;

    color:#6c7c73;

    font-size:13px;
    line-height:1.55;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px){

    .cf-reference-section{
        padding:75px 0;
    }

    .cf-reference-item{
        grid-template-columns:60px 1fr;

        gap:17px;
    }

    .cf-reference-code{
        grid-column:1 / -1;

        min-height:auto;

        flex-direction:row;

        justify-content:flex-start;

        gap:12px;

        padding:13px 17px;

        text-align:left;
    }

    .cf-reference-code span{
        margin:0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:576px){

    .cf-reference-section{
        padding:60px 0;
    }

    .cf-reference-heading{
        margin-bottom:34px;
    }

    .cf-reference-heading h2{
        font-size:31px;
    }

    .cf-reference-heading p{
        font-size:14px;
    }

    .cf-reference-item{
        grid-template-columns:1fr;

        padding:23px 20px;

        gap:15px;
    }

    .cf-reference-item:hover{
        transform:translateY(-4px);
    }

    .cf-reference-icon{
        width:55px;
        height:55px;

        font-size:20px;
    }

    .cf-reference-content h3{
        font-size:21px;
    }

    .cf-reference-code{
        grid-column:auto;

        flex-direction:column;

        align-items:flex-start;

        gap:3px;

        padding:13px 15px;
    }

    .cf-reference-note{
        align-items:flex-start;

        padding:17px;
    }

}




/* =========================================================
   CHRIST FAITH CITY CENTRE FOOD BANK
   LOGO COLOR THEME

   Deep Green : #07552f
   Green      : #238238
   Gold       : #e3a400
   Orange     : #d98200
   Soft Cream : #fffaf0
========================================================= */

.cf-foodbank-qr-section {
    padding: 85px 20px;
    background:
        radial-gradient(circle at 8% 15%,
            rgba(227, 164, 0, 0.10),
            transparent 28%),
        radial-gradient(circle at 92% 85%,
            rgba(7, 85, 47, 0.08),
            transparent 30%),
        #f8faf7;
}

.cf-foodbank-qr-section .cf-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ===============================
   MAIN CARD
================================ */

.cf-foodbank-qr-card {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(7, 85, 47, 0.08);
    box-shadow: 0 25px 65px rgba(7, 85, 47, 0.12);
}


/* ===============================
   LEFT CONTENT
================================ */

.cf-foodbank-qr-content {
    padding: 58px;
    position: relative;
}


/* SMALL TITLE */

.cf-foodbank-small-title {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-bottom: 13px;

    background: rgba(227, 164, 0, 0.11);
    border: 1px solid rgba(227, 164, 0, 0.22);

    color: #b87900;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}


/* MAIN TITLE */

.cf-foodbank-qr-content h2 {
    margin: 0;

    color: #07552f;

    font-size: 48px;
    line-height: 1.08;
    font-weight: 800;
}


/* SUB TITLE */

.cf-foodbank-qr-content h3 {
    margin: 13px 0 18px;

    color: #1c3327;

    font-size: 25px;
    line-height: 1.4;
    font-weight: 700;
}


/* DESCRIPTION */

.cf-foodbank-intro {
    max-width: 650px;

    margin: 0 0 32px;

    color: #66736b;

    font-size: 16px;
    line-height: 1.8;
}


/* ===============================
   SUPPORT ITEMS
================================ */

.cf-foodbank-support-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.cf-foodbank-support-item {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 17px 20px;

    background: #f8fbf8;

    border: 1px solid #e3eee6;

    border-radius: 15px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.cf-foodbank-support-item:hover {
    transform: translateX(6px);

    background: #ffffff;

    border-color: rgba(7, 85, 47, 0.25);

    box-shadow: 0 12px 30px rgba(7, 85, 47, 0.09);
}


/* ICON */

.cf-foodbank-support-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #07552f,
        #238238
    );

    color: #ffffff;

    font-size: 21px;

    box-shadow: 0 8px 20px rgba(7, 85, 47, 0.20);
}


/* Alternate icon color */

.cf-foodbank-support-item:nth-child(2)
.cf-foodbank-support-icon {
    background: linear-gradient(
        135deg,
        #d98200,
        #e3a400
    );
}


.cf-foodbank-support-item strong {
    display: block;

    margin-bottom: 4px;

    color: #173626;

    font-size: 17px;
    font-weight: 750;
}


.cf-foodbank-support-item span {
    display: block;

    color: #6d786f;

    font-size: 14px;
    line-height: 1.6;
}


/* ===============================
   TOGETHER DIFFERENCE BOX
================================ */

.cf-foodbank-difference {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 25px;

    padding: 17px 20px;

    background: linear-gradient(
        90deg,
        #fff9e9,
        #fffdf6
    );

    border-left: 4px solid #e3a400;

    border-radius: 0 13px 13px 0;
}


.cf-foodbank-difference i {
    color: #d98200;
    font-size: 27px;
}


.cf-foodbank-difference span {
    display: block;

    color: #7c765f;

    font-size: 13px;
}


.cf-foodbank-difference strong {
    display: block;

    margin-top: 2px;

    color: #07552f;

    font-size: 18px;
    font-weight: 800;
}


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

.cf-foodbank-donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin-top: 28px;

    padding: 15px 27px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #07552f,
        #19703f
    );

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    box-shadow: 0 10px 25px rgba(7, 85, 47, 0.23);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.cf-foodbank-donate-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);

    background: linear-gradient(
        135deg,
        #d98200,
        #e8ad16
    );

    box-shadow: 0 15px 32px rgba(217, 130, 0, 0.25);
}


.cf-foodbank-donate-btn .fa-arrow-right {
    transition: transform 0.3s ease;
}


.cf-foodbank-donate-btn:hover .fa-arrow-right {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT SIDE - QR PANEL
========================================================= */

.cf-foodbank-qr-side {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 50px 40px;

    text-align: center;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255, 201, 49, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(255,255,255,0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #043d22 0%,
            #07552f 50%,
            #16723d 100%
        );
}


/* Decorative gold top line */

.cf-foodbank-qr-side::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #c97a00,
        #f0b715,
        #d98200
    );
}


/* LARGE TOP ICON */

.cf-foodbank-qr-top-icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 50%;

    background: rgba(255,255,255,0.10);

    border: 1px solid rgba(255,255,255,0.17);

    color: #f1b51b;

    font-size: 28px;
}


/* QUICK DONATION LABEL */

.cf-foodbank-qr-label {
    display: inline-block;

    padding: 7px 14px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #d98200,
        #e8ad16
    );

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* QR TITLE */

.cf-foodbank-qr-side h3 {
    margin: 16px 0 12px;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;
}


.cf-foodbank-qr-side > p {
    max-width: 330px;

    margin: 0 auto 23px;

    color: rgba(255,255,255,0.78);

    font-size: 14px;
    line-height: 1.7;
}


/* ===============================
   QR BOX
================================ */

.cf-foodbank-qr-box {
    position: relative;

    width: 215px;
    height: 215px;

    padding: 13px;

    background: #ffffff;

    border: 5px solid #e5aa11;

    border-radius: 20px;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.24),
        0 0 0 7px rgba(255,255,255,0.08);
}


.cf-foodbank-qr-box img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    border-radius: 8px;
}


/* ===============================
   SCAN TEXT
================================ */

.cf-foodbank-scan-text {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 23px;

    text-align: left;
}


.cf-foodbank-scan-text i {
    color: #f1b51b;

    font-size: 27px;
}


.cf-foodbank-scan-text span {
    color: rgba(255,255,255,0.70);

    font-size: 12px;
    line-height: 1.55;
}


.cf-foodbank-scan-text strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}


/* ===============================
   BOTTOM SUPPORT MESSAGE
================================ */

.cf-foodbank-secure {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 25px;
    padding-top: 20px;

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

    color: rgba(255,255,255,0.72);

    font-size: 12px;
}


.cf-foodbank-secure i {
    color: #f1b51b;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .cf-foodbank-qr-card {
        grid-template-columns: 1fr;
    }

    .cf-foodbank-qr-content {
        padding: 45px;
    }

    .cf-foodbank-qr-side {
        padding: 50px 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .cf-foodbank-qr-section {
        padding: 55px 14px;
    }

    .cf-foodbank-qr-card {
        border-radius: 20px;
    }

    .cf-foodbank-qr-content {
        padding: 32px 20px;
    }

    .cf-foodbank-small-title {
        font-size: 11px;
    }

    .cf-foodbank-qr-content h2 {
        font-size: 35px;
    }

    .cf-foodbank-qr-content h3 {
        font-size: 21px;
    }

    .cf-foodbank-intro {
        font-size: 15px;
        line-height: 1.7;
    }


    /* SUPPORT */

    .cf-foodbank-support-item {
        align-items: flex-start;

        gap: 13px;

        padding: 15px;
    }

    .cf-foodbank-support-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;

        border-radius: 12px;

        font-size: 18px;
    }

    .cf-foodbank-support-item strong {
        font-size: 15px;
    }

    .cf-foodbank-support-item span {
        font-size: 13px;
    }


    /* DIFFERENCE */

    .cf-foodbank-difference {
        padding: 15px;
    }


    /* BUTTON */

    .cf-foodbank-donate-btn {
        width: 100%;

        padding: 15px 20px;
    }


    /* QR PANEL */

    .cf-foodbank-qr-side {
        padding: 42px 20px;
    }

    .cf-foodbank-qr-side h3 {
        font-size: 24px;
    }

    .cf-foodbank-qr-box {
        width: 195px;
        height: 195px;
    }

}




/* =========================================================
   CHRIST FAITH CITY CENTRE FOOD BANK
   MEDIA PAGE
   ========================================================= */


/* =========================================================
   MEDIA INTRO
   ========================================================= */

.cf-media-intro {
    position: relative;
    padding: 85px 0 55px;
    background: #ffffff;
    overflow: hidden;
}

.cf-media-intro::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(14, 92, 53, 0.05);
    top: -180px;
    left: -100px;
}

.cf-media-intro .cf-section-heading {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.cf-media-intro .cf-section-heading h2 {
    margin: 12px 0 18px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    color: #123d29;
}

.cf-media-intro .cf-section-heading h2 span {
    color: #d99b19;
}

.cf-media-intro .cf-section-heading p {
    margin: 0 auto;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.8;
    color: #66736c;
}


/* =========================================================
   FEATURED VIDEO SECTION
   ========================================================= */

.cf-media-featured {
    position: relative;
    padding: 40px 0 95px;
    background: #ffffff;
}

.cf-media-featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 65px;
}


/* VIDEO */

.cf-media-featured-video {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #0a281b;
    box-shadow: 0 25px 65px rgba(12, 55, 36, 0.16);
}

.cf-media-featured-video::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.cf-media-featured-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #081e15;
}


/* FEATURED CONTENT */

.cf-media-featured-content {
    position: relative;
}

.cf-media-featured-content h2 {
    margin: 14px 0 22px;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    font-weight: 800;
    color: #123d29;
}

.cf-media-featured-content h2 span {
    display: block;
    color: #d99b19;
}

.cf-media-featured-content > p {
    margin: 0 0 17px;
    color: #65736c;
    font-size: 16px;
    line-height: 1.8;
}


/* FEATURED POINTS */

.cf-media-featured-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    margin-top: 28px;
}

.cf-media-featured-points > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 15px;
    border: 1px solid #e4ece7;
    border-radius: 14px;
    background: #ffffff;
    transition: transform .3s ease,
                box-shadow .3s ease,
                border-color .3s ease;
}

.cf-media-featured-points > div:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 155, 25, 0.35);
    box-shadow: 0 12px 30px rgba(20, 64, 43, 0.08);
}

.cf-media-featured-points i {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf6f0;
    color: #14643c;
    font-size: 17px;
}

.cf-media-featured-points span {
    color: #244b38;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}


/* =========================================================
   VIDEO GALLERY
   ========================================================= */

.cf-media-gallery {
    position: relative;
    padding: 95px 0 105px;
    background: #f5f9f6;
    overflow: hidden;
}

.cf-media-gallery::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    right: -250px;
    top: -220px;
    background: rgba(217, 155, 25, 0.07);
}

.cf-media-gallery::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    left: -190px;
    bottom: -180px;
    background: rgba(18, 91, 53, 0.06);
}

.cf-media-gallery .cf-container {
    position: relative;
    z-index: 2;
}

.cf-media-gallery .cf-section-heading {
    max-width: 750px;
    margin: 0 auto 48px;
    text-align: center;
}

.cf-media-gallery .cf-section-heading h2 {
    margin: 12px 0 16px;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    font-weight: 800;
    color: #123d29;
}

.cf-media-gallery .cf-section-heading h2 span {
    color: #d99b19;
}

.cf-media-gallery .cf-section-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #68766e;
    line-height: 1.8;
    font-size: 16px;
}


/* =========================================================
   VIDEO GRID
   ========================================================= */

.cf-media-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}


/* VIDEO CARD */

.cf-media-video-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2ebe5;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(18, 65, 42, 0.06);
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.cf-media-video-card:hover {
    transform: translateY(-7px);
    border-color: rgba(217, 155, 25, 0.35);
    box-shadow: 0 22px 50px rgba(18, 65, 42, 0.12);
}


/* LOCAL VIDEO */

.cf-media-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0b2d1d;
}

.cf-media-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #0b2d1d;
}


/* VIDEO CONTENT */

.cf-media-video-content {
    position: relative;
    padding: 23px 23px 27px;
}

.cf-media-video-content > span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 6px 12px;
    margin-bottom: 13px;
    border-radius: 50px;
    background: #edf7f0;
    color: #17643d;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.cf-media-video-content h3 {
    margin: 0 0 11px;
    color: #153f2b;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.cf-media-video-content p {
    margin: 0;
    color: #6a766f;
    font-size: 14px;
    line-height: 1.75;
}


/* GOLD LINE */

.cf-media-video-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: #d99b19;
    transition: width .4s ease;
}

.cf-media-video-card:hover::after {
    width: 100%;
}


/* =========================================================
   VIDEO FOCUS / CONTROLS
   ========================================================= */

.cf-media-page video {
    outline: none;
}

.cf-media-page video:focus-visible {
    outline: 3px solid rgba(217, 155, 25, 0.55);
    outline-offset: 3px;
}


/* =========================================================
   SCROLL REVEAL
   Only works when optional JS below is added
   ========================================================= */

.cf-media-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.cf-media-reveal.cf-media-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .cf-media-featured-grid {
        gap: 40px;
    }

    .cf-media-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 850px) {

    .cf-media-intro {
        padding: 65px 0 35px;
    }

    .cf-media-featured {
        padding: 30px 0 70px;
    }

    .cf-media-featured-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .cf-media-featured-content {
        text-align: left;
    }

    .cf-media-gallery {
        padding: 75px 0;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .cf-media-intro {
        padding: 55px 0 30px;
    }

    .cf-media-intro .cf-section-heading h2,
    .cf-media-featured-content h2,
    .cf-media-gallery .cf-section-heading h2 {
        font-size: 32px;
    }

    .cf-media-intro .cf-section-heading p,
    .cf-media-gallery .cf-section-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .cf-media-featured {
        padding: 25px 0 60px;
    }

    .cf-media-featured-video {
        border-radius: 17px;
    }

    .cf-media-featured-video video {
        aspect-ratio: 16 / 11;
    }

    .cf-media-featured-points {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cf-media-gallery {
        padding: 65px 0;
    }

    .cf-media-gallery .cf-section-heading {
        margin-bottom: 35px;
    }

    .cf-media-video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cf-media-video-card {
        border-radius: 16px;
    }

    .cf-media-video-content {
        padding: 20px;
    }

    .cf-media-video-content h3 {
        font-size: 19px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .cf-media-intro .cf-section-heading h2,
    .cf-media-featured-content h2,
    .cf-media-gallery .cf-section-heading h2 {
        font-size: 28px;
    }

    .cf-media-featured-points > div {
        padding: 10px 12px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

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

    .cf-media-video-card,
    .cf-media-featured-points > div,
    .cf-media-reveal {
        transition: none;
    }

    .cf-media-reveal {
        opacity: 1;
        transform: none;
    }

}





/* =====================================================
   MIXED PHOTO + VIDEO MEDIA GALLERY
===================================================== */

.cf-media-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 40px;
}

.cf-media-filter {
    border: 1px solid #dce8df;
    background: #fff;
    color: #174a31;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.cf-media-filter:hover,
.cf-media-filter.active {
    background: #155c38;
    border-color: #155c38;
    color: #fff;
}


.cf-mixed-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}


.cf-mixed-media-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1ebe4;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(18, 65, 42, .07);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cf-mixed-media-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(18, 65, 42, .13);
}


.cf-mixed-media-visual {
    position: relative;
    width: 100%;
    height: 255px;
    overflow: hidden;
    background: #0d3523;
}

.cf-mixed-media-visual img,
.cf-mixed-media-visual video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-mixed-media-visual img {
    transition: transform .6s ease;
}

.cf-mixed-media-card:hover
.cf-mixed-media-visual img {
    transform: scale(1.06);
}


/* IMAGE / VIDEO INDICATOR */

.cf-media-type-icon {
    position: absolute;
    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.94);
    color: #155c38;

    font-size: 14px;

    box-shadow: 0 5px 20px rgba(0,0,0,.12);

    pointer-events: none;
}

.cf-media-type-icon.cf-video-icon {
    color: #c68a0a;
}


/* CONTENT */

.cf-mixed-media-content {
    padding: 22px 22px 26px;
}

.cf-mixed-media-content > span {
    display: inline-block;
    margin-bottom: 10px;

    color: #b97c08;

    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cf-mixed-media-content h3 {
    margin: 0 0 10px;

    color: #143e2a;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.cf-mixed-media-content p {
    margin: 0;

    color: #69766f;

    font-size: 14px;
    line-height: 1.7;
}


/* FILTER ANIMATION */

.cf-mixed-media-card.cf-media-hide {
    display: none;
}


/* TABLET */

@media (max-width: 1000px) {

    .cf-mixed-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .cf-media-filters {
        margin-bottom: 28px;
    }

    .cf-media-filter {
        padding: 10px 17px;
        font-size: 13px;
    }

    .cf-mixed-media-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cf-mixed-media-visual {
        height: 230px;
    }

    .cf-mixed-media-content {
        padding: 19px 19px 23px;
    }

}





/* ==============================
   MEDIA GRID
============================== */

.cf-mixed-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* IMAGE */

.cf-media-item {
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(12, 70, 42, 0.10);
}

.cf-media-item img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cf-media-item:hover img {
    transform: scale(1.05);
}


/* ==============================
   VIDEO - SMALLER HEIGHT
============================== */

.cf-media-video-item {
    height: 220px;
    background: #111;
}

.cf-media-video-item video {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #111;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 991px) {

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

    .cf-media-item img {
        height: 240px;
    }

    .cf-media-video-item,
    .cf-media-video-item video {
        height: 210px;
    }

}


/* ==============================
   MOBILE
============================== */

@media (max-width: 575px) {

    .cf-mixed-media-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cf-media-item img {
        height: 230px;
    }

    .cf-media-video-item,
    .cf-media-video-item video {
        height: 200px;
    }

}




/* =====================================================
   DONATION POPUP - FIXED
===================================================== */

.cff-donate-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;

    width: 100%;
    height: 100%;

    background: rgba(3, 40, 23, 0.82);
    backdrop-filter: blur(5px);

    padding: 20px;

    /* IMPORTANT - HIDDEN BY DEFAULT */
    display: none;

    align-items: center;
    justify-content: center;

    overflow-y: auto;
}


/* SHOW ONLY AFTER CLICK */

.cff-donate-popup.cff-show {
    display: flex !important;
}


/* =====================================================
   POPUP BOX
===================================================== */

.cff-donate-box {
    position: relative;

    width: 100%;
    max-width: 820px;

    max-height: 92vh;
    overflow-y: auto;

    background: #ffffff;

    border-radius: 22px;

    padding: 28px;

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

    animation: cffPopupIn .35s ease;
}


@keyframes cffPopupIn {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.96);
    }

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

}


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

.cff-popup-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #075c36;
    color: #ffffff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition: .3s ease;
}


.cff-popup-close:hover {
    background: #e9a515;
    transform: rotate(90deg);
}


/* =====================================================
   LOGO
===================================================== */

.cff-popup-logo {
    text-align: center;
    margin-bottom: 8px;
}


.cff-popup-logo img {
    display: block;

    width: 165px;
    max-width: 100%;

    height: auto;

    margin: 0 auto;
}


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

.cff-popup-tag {
    display: block;

    text-align: center;

    color: #e59d10;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-top: 7px;
}


.cff-donate-box > h2 {
    margin: 5px 0 7px;

    text-align: center;

    color: #075c36;

    font-size: 29px;
    font-weight: 800;
}


.cff-popup-intro {
    max-width: 580px;

    margin: 0 auto 22px;

    text-align: center;

    color: #69766e;

    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   POPUP GRID
===================================================== */

.cff-popup-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, .75fr);

    gap: 18px;
}


/* =====================================================
   BANK DETAILS
===================================================== */

.cff-popup-bank {
    background: #f6faf7;

    border: 1px solid #e0ebe4;

    border-radius: 16px;

    padding: 20px;
}


.cff-popup-bank-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.cff-popup-bank-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #075c36,
        #348c27
    );

    color: #ffffff;

    font-size: 18px;
}


.cff-popup-bank-heading span {
    display: block;

    color: #df9913;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


.cff-popup-bank-heading h3 {
    margin: 2px 0 0;

    color: #123f2b;

    font-size: 20px;
}


/* =====================================================
   BANK ITEMS
===================================================== */

.cff-bank-item {
    padding: 11px 13px;

    margin-bottom: 8px;

    background: #ffffff;

    border: 1px solid #e3ebe6;

    border-radius: 10px;
}


.cff-bank-item:last-child {
    margin-bottom: 0;
}


.cff-bank-item > span {
    display: block;

    margin-bottom: 3px;

    color: #89918c;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;
}


.cff-bank-item strong {
    display: block;

    color: #173e2c;

    font-size: 13px;
    line-height: 1.5;

    word-break: break-word;
}


/* =====================================================
   COPY
===================================================== */

.cff-copy-line {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.cff-copy-line button {
    flex-shrink: 0;

    border: 0;

    padding: 6px 11px;

    border-radius: 6px;

    background: #075c36;
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


/* =====================================================
   QR SECTION
===================================================== */

.cff-popup-qr {
    padding: 20px;

    text-align: center;

    border-radius: 16px;

    background: linear-gradient(
        145deg,
        #075c36,
        #168347
    );

    color: #ffffff;
}


.cff-popup-qr > span {
    display: block;

    color: #ffc24c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.cff-popup-qr h3 {
    margin: 4px 0 5px;

    color: #ffffff;

    font-size: 20px;
}


.cff-popup-qr p {
    margin: 0 0 12px;

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

    font-size: 11px;
    line-height: 1.5;
}


/* QR IMAGE */

.cff-qr-image {
    width: 155px;
    height: 155px;

    max-width: 100%;

    margin: 0 auto;

    padding: 8px;

    background: #ffffff;

    border-radius: 12px;
}


.cff-qr-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.cff-qr-secure {
    margin-top: 11px;

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

    font-size: 10px;
}


/* =====================================================
   BOTTOM MESSAGE
===================================================== */

.cff-popup-bottom {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 17px;

    padding: 11px 15px;

    text-align: center;

    background: #fff7e6;

    border-radius: 9px;

    color: #56625b;

    font-size: 12px;
    font-weight: 600;
}


.cff-popup-bottom i {
    color: #e5a21b;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .cff-donate-popup {
        padding: 10px;

        align-items: flex-start;
    }


    .cff-donate-box {
        margin: 15px auto;

        padding: 22px 14px;

        max-height: none;

        border-radius: 16px;
    }


    .cff-popup-grid {
        grid-template-columns: 1fr;
    }


    .cff-popup-logo img {
        width: 125px;
    }


    .cff-donate-box > h2 {
        font-size: 23px;
    }


    .cff-popup-intro {
        font-size: 12px;

        margin-bottom: 15px;
    }


    .cff-popup-bank {
        padding: 14px;
    }


    .cff-popup-qr {
        padding: 17px 14px;
    }


    .cff-qr-image {
        width: 145px;
        height: 145px;
    }


    .cff-popup-close {
        width: 36px;
        height: 36px;

        top: 10px;
        right: 10px;

        font-size: 24px;
    }

}





/* =========================================================
   CHRIST FAITH CITY CENTRE
   MEDIA PAGE
========================================================= */


/* =========================================================
   MEDIA INTRO
========================================================= */

.cf-media-intro {
    position: relative;
    padding: 80px 0 55px;
    background: #ffffff;
}

.cf-center-heading {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.cf-section-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #d89b16;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.cf-center-heading h2 {
    margin: 0 0 18px;
    color: #0b4d32;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
}

.cf-center-heading h2 span {
    color: #d89b16;
}

.cf-center-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #68756e;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   MEDIA GALLERY
========================================================= */

.cf-media-gallery {
    position: relative;
    padding: 65px 0 90px;
    background: #f7faf8;
}


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

.cf-media-gallery-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.cf-media-gallery-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #d89b16;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.cf-media-gallery-heading > span i {
    color: #0b5b38;
    font-size: 15px;
}

.cf-media-gallery-heading h2 {
    margin: 0 0 12px;

    color: #0b4d32;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 800;
}

.cf-media-gallery-heading p {
    max-width: 620px;
    margin: 0 auto;

    color: #6b7770;
    font-size: 16px;
    line-height: 1.7;
}


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

.cf-mixed-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}


/* =========================================================
   VIDEO CARD

   IMPORTANT:
   This card has AUTO HEIGHT so title is not hidden.
========================================================= */

.cf-media-video-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid rgba(11, 77, 50, 0.10);
    border-radius: 18px;

    overflow: hidden !important;

    box-shadow:
        0 10px 30px rgba(12, 55, 37, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cf-media-video-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(12, 55, 37, 0.14);
}


/* =========================================================
   VIDEO BOX
========================================================= */

.cf-video-box {
    position: relative;

    display: block !important;

    width: 100% !important;
    height: 245px !important;

    flex: 0 0 245px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #071f15;

    overflow: hidden;
}


/* VIDEO */

.cf-video-box video {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none;

    object-fit: cover;
    background: #071f15;
}


/* =========================================================
   VIDEO TITLE AREA
========================================================= */

.cf-video-title {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 92px !important;

    flex: none !important;

    padding: 18px 20px !important;
    margin: 0 !important;

    background: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    overflow: visible !important;

    z-index: 20 !important;

    box-sizing: border-box;
}


/* =========================================================
   PLAY ICON
========================================================= */

.cf-video-title-icon {
    width: 46px;
    height: 46px;

    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e0a51b;

    box-shadow:
        0 7px 18px rgba(224, 165, 27, 0.25);
}

.cf-video-title-icon i {
    color: #ffffff !important;
    font-size: 16px;
    margin-left: 2px;
}


/* =========================================================
   VIDEO TITLE CONTENT
========================================================= */

.cf-video-title-content {
    display: block !important;
    flex: 1;

    min-width: 0;

    opacity: 1 !important;
    visibility: visible !important;
}

.cf-video-title-content span {
    display: block !important;

    margin: 0 0 5px !important;

    color: #d2940e !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;

    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 1 !important;
    visibility: visible !important;
}

.cf-video-title-content h3 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0a4b30 !important;

    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 750 !important;

    opacity: 1 !important;
    visibility: visible !important;

    white-space: normal !important;
    overflow: visible !important;

    transform: none !important;
}


/* =========================================================
   PHOTO SECTION
========================================================= */

.cf-photo-heading {
    margin-top: 85px;
}


/* =========================================================
   PHOTO CARDS
========================================================= */

.cf-media-gallery .cf-media-item {
    position: relative;

    width: 100%;
    height: 280px;

    padding: 0;
    margin: 0;

    background: #ffffff;

    border-radius: 18px;
    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(12, 55, 37, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cf-media-gallery .cf-media-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 42px rgba(12, 55, 37, 0.14);
}

.cf-media-gallery .cf-media-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.cf-media-gallery .cf-media-item:hover img {
    transform: scale(1.05);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .cf-media-intro {
        padding: 65px 0 45px;
    }

    .cf-center-heading h2 {
        font-size: 36px;
    }

    .cf-media-gallery {
        padding: 55px 0 75px;
    }

    .cf-mixed-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .cf-media-gallery-heading h2 {
        font-size: 32px;
    }

    .cf-video-box {
        height: 230px !important;
        flex-basis: 230px !important;
    }

    .cf-photo-heading {
        margin-top: 70px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cf-media-intro {
        padding: 50px 0 35px;
    }

    .cf-center-heading {
        padding: 0 5px;
    }

    .cf-center-heading h2 {
        font-size: 30px;
    }

    .cf-center-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .cf-media-gallery {
        padding: 45px 0 60px;
    }

    .cf-media-gallery-heading {
        margin-bottom: 28px;
    }

    .cf-media-gallery-heading h2 {
        font-size: 28px;
    }

    .cf-media-gallery-heading p {
        font-size: 15px;
    }

    .cf-mixed-media-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .cf-video-box {
        height: 225px !important;
        flex-basis: 225px !important;
    }

    .cf-video-title {
        min-height: 82px !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    .cf-video-title-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .cf-video-title-content h3 {
        font-size: 17px !important;
    }

    .cf-media-gallery .cf-media-item {
        height: 250px;
    }

    .cf-photo-heading {
        margin-top: 60px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cf-center-heading h2 {
        font-size: 27px;
    }

    .cf-media-gallery-heading h2 {
        font-size: 25px;
    }

    .cf-video-box {
        height: 205px !important;
        flex-basis: 205px !important;
    }

    .cf-video-title {
        min-height: 78px !important;
        padding: 14px !important;
    }

    .cf-video-title-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .cf-video-title-icon i {
        font-size: 14px;
    }

    .cf-video-title-content span {
        font-size: 10px !important;
    }

    .cf-video-title-content h3 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .cf-media-gallery .cf-media-item {
        height: 225px;
    }

}






/* =========================================================
   PHOTO GALLERY - COMING SOON
========================================================= */

.cf-gallery-coming-soon {
    position: relative;

    max-width: 850px;

    margin: 85px auto 0;
    padding: 55px 45px;

    text-align: center;

    background: #ffffff;

    border: 1px solid rgba(11, 77, 50, 0.10);
    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(11, 77, 50, 0.08);

    overflow: hidden;
}


/* DECORATIVE TOP LINE */

.cf-gallery-coming-soon::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 110px;
    height: 4px;

    transform: translateX(-50%);

    background: #d99d13;

    border-radius: 0 0 10px 10px;
}


/* ICON */

.cf-gallery-coming-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(217, 157, 19, 0.12);

    border-radius: 50%;

    color: #d99d13;

    font-size: 29px;
}


/* LABEL */

.cf-gallery-coming-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #d99d13;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* HEADING */

.cf-gallery-coming-soon h2 {
    margin: 0 0 16px;

    color: #0b4d32;

    font-size: 36px;
    line-height: 1.25;

    font-weight: 800;
}

.cf-gallery-coming-soon h2 span {
    color: #d99d13;
}


/* DESCRIPTION */

.cf-gallery-coming-soon p {
    max-width: 680px;

    margin: 0 auto;

    color: #68756e;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cf-gallery-coming-soon {
        margin-top: 55px;

        padding: 40px 22px;

        border-radius: 18px;
    }

    .cf-gallery-coming-icon {
        width: 64px;
        height: 64px;

        font-size: 24px;
    }

    .cf-gallery-coming-soon h2 {
        font-size: 28px;
    }

    .cf-gallery-coming-soon p {
        font-size: 15px;
        line-height: 1.7;
    }

}





/* =========================================================
   MEDIA DROPDOWN - DESKTOP
========================================================= */

.cff-has-dropdown {
    position: relative;
}

.cff-media-main-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.cff-dropdown-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.cff-has-dropdown:hover .cff-dropdown-arrow {
    transform: rotate(180deg);
}


/* DROPDOWN BOX */

.cff-desktop-dropdown {
    position: absolute;

    top: calc(100% + 18px);
    left: 50%;

    width: 300px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid rgba(11, 77, 50, 0.08);
    border-radius: 15px;

    box-shadow:
        0 18px 45px rgba(8, 48, 31, 0.15);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 9999;
}


/* INVISIBLE HOVER BRIDGE */

.cff-desktop-dropdown::before {
    content: "";

    position: absolute;

    top: -20px;
    left: 0;

    width: 100%;
    height: 20px;
}


.cff-has-dropdown:hover .cff-desktop-dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* DROPDOWN LINKS */

.cff-desktop-dropdown > a {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 12px;

    color: #0b4d32;

    text-decoration: none;

    border-radius: 10px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.cff-desktop-dropdown > a:hover {
    background: #f4f8f5;

    transform: translateX(3px);
}


/* DROPDOWN ICON */

.cff-dropdown-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(217, 157, 19, 0.12);

    color: #d99d13;

    border-radius: 9px;

    font-size: 16px;
}


.cff-desktop-dropdown strong {
    display: block;

    margin-bottom: 2px;

    color: #0b4d32;

    font-size: 14px;
    font-weight: 800;
}


.cff-desktop-dropdown small {
    display: block;

    color: #718078;

    font-size: 11px;
    line-height: 1.4;

    white-space: nowrap;
}



/* =========================================================
   MEDIA DROPDOWN - MOBILE
========================================================= */

.cff-mobile-dropdown {
    display: block;

    width: 100%;
}


/* MOBILE MEDIA BUTTON */

.cff-mobile-dropdown-btn {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    background: transparent;

    border: 0;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    text-align: left;

    cursor: pointer;
}


.cff-mobile-dropdown-left {
    display: flex;

    align-items: center;

    gap: 12px;
}


.cff-mobile-dropdown-left > i {
    width: 20px;

    text-align: center;
}


.cff-mobile-dropdown-arrow {
    font-size: 12px;

    transition: transform 0.3s ease;
}


/* OPEN ARROW */

.cff-mobile-dropdown.active
.cff-mobile-dropdown-arrow {
    transform: rotate(180deg);
}



/* MOBILE SUBMENU */

.cff-mobile-submenu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    margin: 0;

    padding: 0 0 0 20px;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* SUBMENU OPEN */

.cff-mobile-dropdown.active
.cff-mobile-submenu {
    max-height: 240px;

    opacity: 1;

    visibility: visible;

    padding-bottom: 8px;
}


/* SUBMENU LINKS */

.cff-mobile-submenu a {
    display: flex !important;

    align-items: center;

    gap: 11px;

    margin: 4px 0;

    padding: 11px 14px !important;

    background: rgba(11, 77, 50, 0.05);

    border-radius: 9px;

    text-decoration: none;
}


.cff-mobile-submenu a i {
    width: 20px;

    color: #d99d13;

    text-align: center;

    font-size: 14px;
}


.cff-mobile-submenu a span {
    font-size: 14px;
}



/* =========================================================
   DESKTOP / MOBILE CONTROL
========================================================= */

@media (min-width: 992px) {

    .cff-mobile-dropdown {
        display: none;
    }

}


@media (max-width: 991px) {

    .cff-desktop-dropdown {
        display: none;
    }

}





/* =========================================================
   CHRIST FAITH CITY CENTRE
   PHOTO GALLERY - COMING SOON PAGE
========================================================= */


/* =========================================================
   PHOTO PAGE SECTION
========================================================= */

.cf-photo-coming-section {
    position: relative;
    width: 100%;
    padding: 90px 20px 100px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(215, 155, 16, 0.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(11, 77, 50, 0.06),
            transparent 30%
        ),
        #f7faf8;

    overflow: hidden;
}


/* =========================================================
   MAIN COMING SOON CARD
========================================================= */

.cf-photo-coming-card {
    position: relative;

    max-width: 920px;

    margin: 0 auto;
    padding: 65px 60px 60px;

    text-align: center;

    background: #ffffff;

    border: 1px solid rgba(11, 77, 50, 0.09);
    border-radius: 28px;

    box-shadow:
        0 20px 60px rgba(8, 55, 36, 0.09);

    overflow: hidden;
}


/* GOLD TOP LINE */

.cf-photo-coming-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 130px;
    height: 5px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        #c98c0a,
        #e6b63c
    );

    border-radius: 0 0 20px 20px;
}


/* =========================================================
   DECORATIVE BACKGROUND SHAPES
========================================================= */

.cf-photo-coming-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.cf-photo-shape-one {
    width: 190px;
    height: 190px;

    top: -100px;
    left: -85px;

    background: rgba(11, 77, 50, 0.04);
}


.cf-photo-shape-two {
    width: 240px;
    height: 240px;

    right: -120px;
    bottom: -135px;

    background: rgba(215, 155, 16, 0.07);
}


/* =========================================================
   PHOTO ICON
========================================================= */

.cf-photo-coming-icon {
    position: relative;
    z-index: 2;

    width: 88px;
    height: 88px;

    margin: 0 auto 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        rgba(215, 155, 16, 0.18),
        rgba(215, 155, 16, 0.07)
    );

    border: 1px solid rgba(215, 155, 16, 0.20);

    border-radius: 24px;

    color: #d79b10;

    font-size: 33px;

    box-shadow:
        0 12px 30px rgba(215, 155, 16, 0.13);

    transform: rotate(-4deg);
}


.cf-photo-coming-icon i {
    transform: rotate(4deg);
}


/* =========================================================
   SMALL LABEL
========================================================= */

.cf-photo-coming-label {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 12px;

    color: #d79b10;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.cf-photo-coming-card h2 {
    position: relative;
    z-index: 2;

    max-width: 680px;

    margin: 0 auto 20px;

    color: #0b4d32;

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

    font-size: 42px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1px;
}


.cf-photo-coming-card h2 span {
    color: #d79b10;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.cf-photo-coming-card > p {
    position: relative;
    z-index: 2;

    max-width: 730px;

    margin: 0 auto 12px;

    color: #68766f;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;
    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   STATUS BOX
========================================================= */

.cf-photo-coming-status {
    position: relative;
    z-index: 2;

    max-width: 520px;

    margin: 32px auto 28px;
    padding: 16px 20px;

    display: flex;
    align-items: center;

    gap: 15px;

    text-align: left;

    background: #f5f9f6;

    border: 1px solid rgba(11, 77, 50, 0.08);

    border-radius: 14px;
}


/* STATUS ICON */

.cf-photo-status-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b5638;

    color: #ffffff;

    border-radius: 12px;

    font-size: 18px;

    box-shadow:
        0 7px 18px rgba(11, 86, 56, 0.16);
}


/* STATUS SMALL TEXT */

.cf-photo-coming-status small {
    display: block;

    margin: 0 0 4px;

    color: #d79b10;

    font-size: 10px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* STATUS MAIN TEXT */

.cf-photo-coming-status strong {
    display: block;

    color: #0b4d32;

    font-size: 15px;
    line-height: 1.45;

    font-weight: 750;
}


/* =========================================================
   BACK TO HOME BUTTON
========================================================= */

.cf-photo-home-btn {
    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding: 0 26px;

    background: #0b5638;

    color: #ffffff !important;

    text-decoration: none;

    border: 1px solid #0b5638;

    border-radius: 10px;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 700;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.cf-photo-home-btn i {
    font-size: 13px;

    transition: transform 0.25s ease;
}


.cf-photo-home-btn:hover {
    background: #08462e;

    border-color: #08462e;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(11, 86, 56, 0.20);
}


.cf-photo-home-btn:hover i {
    transform: translateX(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .cf-photo-coming-section {
        padding: 70px 20px 80px;
    }


    .cf-photo-coming-card {
        max-width: 800px;

        padding: 55px 40px;
    }


    .cf-photo-coming-card h2 {
        font-size: 36px;
    }


    .cf-photo-coming-card > p {
        font-size: 15.5px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cf-photo-coming-section {
        padding: 50px 15px 60px;
    }


    .cf-photo-coming-card {
        width: 100%;

        padding: 42px 22px;

        border-radius: 20px;
    }


    .cf-photo-coming-card::before {
        width: 95px;
        height: 4px;
    }


    .cf-photo-coming-icon {
        width: 72px;
        height: 72px;

        margin-bottom: 20px;

        border-radius: 19px;

        font-size: 27px;
    }


    .cf-photo-coming-label {
        margin-bottom: 10px;

        font-size: 11px;

        letter-spacing: 1.3px;
    }


    .cf-photo-coming-card h2 {
        margin-bottom: 17px;

        font-size: 29px;
        line-height: 1.25;

        letter-spacing: -0.5px;
    }


    .cf-photo-coming-card > p {
        font-size: 15px;
        line-height: 1.7;
    }


    .cf-photo-coming-status {
        margin: 25px auto 24px;

        padding: 14px;

        gap: 12px;

        border-radius: 12px;
    }


    .cf-photo-status-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;

        border-radius: 10px;

        font-size: 16px;
    }


    .cf-photo-coming-status small {
        font-size: 9px;
    }


    .cf-photo-coming-status strong {
        font-size: 14px;
    }


    .cf-photo-home-btn {
        width: 100%;

        min-height: 50px;
    }


    .cf-photo-shape-one {
        width: 130px;
        height: 130px;

        top: -70px;
        left: -70px;
    }


    .cf-photo-shape-two {
        width: 160px;
        height: 160px;

        right: -90px;
        bottom: -90px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cf-photo-coming-section {
        padding: 40px 12px 50px;
    }


    .cf-photo-coming-card {
        padding: 38px 17px;

        border-radius: 18px;
    }


    .cf-photo-coming-icon {
        width: 65px;
        height: 65px;

        font-size: 24px;
    }


    .cf-photo-coming-card h2 {
        font-size: 26px;
    }


    .cf-photo-coming-card > p {
        font-size: 14px;
    }


    .cf-photo-coming-status {
        align-items: center;
    }


    .cf-photo-coming-status strong {
        font-size: 13px;
    }

}






/* =========================================================
   FOOD BANK VIDEO PAGE
   CATEGORY TABS + VIDEO GRID
========================================================= */


/* =========================================================
   VIDEO INTRO
========================================================= */

.cf-media-gallery-heading {
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: center;
    padding: 0 15px;
}

.cf-media-gallery-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #168b45;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.cf-media-gallery-heading h2 {
    margin: 0 0 12px;

    color: #173f2a;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.2;

    font-weight: 800;
}

.cf-media-gallery-heading p {
    max-width: 700px;

    margin: 0 auto;

    color: #667085;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   VIDEO CATEGORY TABS
========================================================= */

.cf-video-tabs {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: fit-content;

    margin: 30px auto 45px;

    padding: 7px;

    background: #f1f6f3;

    border: 1px solid #e1e9e4;

    border-radius: 60px;
}


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

.cf-video-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border: 0;
    outline: none;

    padding: 14px 27px;

    border-radius: 50px;

    background: transparent;

    color: #345345;

    font-family: inherit;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   FOOD BANK ACTIVE BUTTON
========================================================= */

.cf-video-tab.active {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #168b45,
        #0a6332
    );

    box-shadow:
        0 8px 22px rgba(22, 139, 69, 0.22);
}


/* =========================================================
   TAB HOVER
========================================================= */

.cf-video-tab:not(.active):hover {
    color: #168b45;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   CLEAN WATER BUTTON WHEN ACTIVE
========================================================= */

/*
   JS adds only "active", so we use the position
   of the second button to give it blue styling.
*/

.cf-video-tab:nth-child(2).active {
    background: linear-gradient(
        135deg,
        #148ac4,
        #075a91
    );

    box-shadow:
        0 8px 22px rgba(20, 138, 196, 0.22);
}


/* =========================================================
   VIDEO TAB CONTENT
========================================================= */

.cf-video-tab-content {
    display: none;

    width: 100%;

    animation: cfVideoCategoryFade 0.4s ease;
}

.cf-video-tab-content.active {
    display: block;
}


/* =========================================================
   TAB ANIMATION
========================================================= */

@keyframes cfVideoCategoryFade {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

}


/* =========================================================
   CATEGORY HEADING
========================================================= */

.cf-video-category-heading {
    max-width: 820px;

    margin: 0 auto 35px;

    padding: 0 15px;

    text-align: center;
}


/* =========================================================
   CATEGORY LABEL
========================================================= */

.cf-video-category-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 8px 17px;

    margin-bottom: 14px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #168b45,
        #0a6332
    );

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    box-shadow:
        0 6px 16px rgba(22, 139, 69, 0.15);
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.cf-video-category-heading h2 {
    margin: 0 0 12px;

    color: #173f2a;

    font-size: clamp(27px, 3.5vw, 38px);

    line-height: 1.25;

    font-weight: 800;
}


/* =========================================================
   CATEGORY DESCRIPTION
========================================================= */

.cf-video-category-heading p {
    max-width: 700px;

    margin: 0 auto;

    color: #667085;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   CLEAN WATER CATEGORY COLORS
========================================================= */

#clean-water .cf-video-category-heading > span {
    background: linear-gradient(
        135deg,
        #148ac4,
        #075a91
    );

    box-shadow:
        0 6px 16px rgba(20, 138, 196, 0.16);
}


#clean-water .cf-video-category-heading h2 {
    color: #124c70;
}


/* =========================================================
   VIDEO GRID
========================================================= */

.cf-video-tab-content .cf-mixed-media-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

    width: 100%;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.cf-video-tab-content .cf-media-video-card {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7ece9;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.cf-video-tab-content .cf-media-video-card:hover {
    transform: translateY(-6px);

    border-color: rgba(22, 139, 69, 0.25);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   VIDEO CONTAINER
========================================================= */

.cf-video-tab-content .cf-video-box {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #101513;
}


/* =========================================================
   VIDEO ELEMENT
========================================================= */

.cf-video-tab-content .cf-video-box video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #101513;
}


/* =========================================================
   VIDEO INFORMATION
========================================================= */

.cf-video-tab-content .cf-video-title {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 19px;
}


/* =========================================================
   PLAY ICON
========================================================= */

.cf-video-tab-content .cf-video-title-icon {
    flex: 0 0 41px;

    width: 41px;
    height: 41px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #168b45,
        #0a6332
    );

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        0 7px 17px rgba(22, 139, 69, 0.20);
}


/* =========================================================
   CLEAN WATER PLAY ICON
========================================================= */

#clean-water .cf-video-title-icon {
    background: linear-gradient(
        135deg,
        #148ac4,
        #075a91
    );

    box-shadow:
        0 7px 17px rgba(20, 138, 196, 0.20);
}


/* =========================================================
   VIDEO TEXT
========================================================= */

.cf-video-tab-content .cf-video-title-content {
    min-width: 0;

    flex: 1;
}


.cf-video-tab-content .cf-video-title-content span {
    display: block;

    margin-bottom: 5px;

    color: #168b45;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* CLEAN WATER LABEL */

#clean-water .cf-video-title-content span {
    color: #148ac4;
}


/* =========================================================
   VIDEO TITLE
========================================================= */

.cf-video-tab-content .cf-video-title-content h3 {
    margin: 0;

    color: #172b20;

    font-size: 17px;

    line-height: 1.45;

    font-weight: 750;
}


/* =========================================================
   DONATE CTA SPACING
========================================================= */

.cf-media-gallery {
    padding-bottom: 80px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .cf-video-tab-content .cf-mixed-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

}


@media (max-width: 991px) {

    .cf-video-gallery-heading h2 {
        font-size: 36px;
    }

    .cf-video-tabs {
        margin-bottom: 38px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cf-media-gallery-heading {
        margin-bottom: 20px;
    }


    .cf-media-gallery-heading h2 {
        font-size: 30px;
    }


    .cf-media-gallery-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* TAB CONTAINER */

    .cf-video-tabs {
        width: calc(100% - 20px);

        margin: 25px auto 35px;

        padding: 5px;

        gap: 5px;

        border-radius: 50px;
    }


    /* TAB BUTTON */

    .cf-video-tab {
        flex: 1;

        min-width: 0;

        padding: 12px 9px;

        gap: 6px;

        font-size: 12px;

        white-space: nowrap;
    }


    .cf-video-tab i {
        font-size: 12px;
    }


    /* CATEGORY */

    .cf-video-category-heading {
        margin-bottom: 27px;
    }


    .cf-video-category-heading h2 {
        font-size: 27px;
    }


    .cf-video-category-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* VIDEO GRID */

    .cf-video-tab-content .cf-mixed-media-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* VIDEO CARD */

    .cf-video-tab-content .cf-media-video-card {
        border-radius: 15px;
    }


    /* VIDEO TITLE */

    .cf-video-tab-content .cf-video-title {
        padding: 16px;

        gap: 11px;
    }


    .cf-video-tab-content .cf-video-title-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }


    .cf-video-tab-content .cf-video-title-content h3 {
        font-size: 15px;

        line-height: 1.45;
    }


    .cf-media-gallery {
        padding-bottom: 60px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cf-media-gallery-heading h2 {
        font-size: 27px;
    }


    .cf-video-tabs {
        width: calc(100% - 10px);
    }


    .cf-video-tab {
        padding: 11px 6px;

        font-size: 11px;
    }


    .cf-video-tab i {
        display: none;
    }


    .cf-video-category-heading > span {
        padding: 7px 14px;

        font-size: 10px;
    }


    .cf-video-category-heading h2 {
        font-size: 24px;
    }


    .cf-video-category-heading p {
        font-size: 13px;
    }


    .cf-video-tab-content .cf-video-title {
        padding: 14px;
    }


    .cf-video-tab-content .cf-video-title-content h3 {
        font-size: 14px;
    }

}







/* =========================================================
   CFF MOBILE MEDIA - FINAL OVERRIDE
========================================================= */

/* Main Media wrapper */
.cff-mobile-links .cff-mobile-media {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5ebe7;
    box-sizing: border-box;
}


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

.cff-mobile-links .cff-mobile-media-btn {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 53px;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;

    background: transparent !important;

    color: #17251e !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
    text-align: left !important;

    cursor: pointer;

    box-shadow: none !important;
}


/* =========================================================
   MEDIA LEFT SIDE
========================================================= */

.cff-mobile-links .cff-mobile-media-main {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 100%;

    gap: 14px;

    margin: 0 !important;
    padding: 0 !important;

    color: #17251e !important;
}


/* Media icon */

.cff-mobile-links .cff-mobile-media-main > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 29px !important;
    min-width: 29px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #08783f !important;

    font-size: 17px !important;

    line-height: 1 !important;
}


/* Media text */

.cff-mobile-links .cff-mobile-media-main > span {
    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17251e !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
}


/* =========================================================
   MEDIA ARROW
========================================================= */

.cff-mobile-links .cff-mobile-media-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 0 3px 0 15px !important;
    padding: 0 !important;

    color: #17251e !important;

    font-size: 11px !important;

    line-height: 1 !important;

    transition: transform .3s ease !important;
}


/* Arrow rotates */

.cff-mobile-links
.cff-mobile-media-btn.active
.cff-mobile-media-arrow {
    transform: rotate(180deg) !important;
}


/* =========================================================
   MEDIA SUBMENU
========================================================= */

.cff-mobile-links .cff-mobile-media-submenu {
    display: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 3px 0 10px 43px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}


/* Open */

.cff-mobile-links .cff-mobile-media-submenu.active {
    display: block !important;
}


/* =========================================================
   SUBMENU LINKS
========================================================= */

.cff-mobile-links .cff-mobile-media-submenu a {
    width: 100% !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: transparent !important;

    color: #59675f !important;

    text-decoration: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
}


/* Submenu icons */

.cff-mobile-links .cff-mobile-media-submenu a > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #168b45 !important;

    font-size: 13px !important;
}


/* Submenu text */

.cff-mobile-links .cff-mobile-media-submenu a > span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    line-height: 1.2 !important;
}


/* Hover */

.cff-mobile-links .cff-mobile-media-submenu a:hover {
    background: #f1f7f3 !important;
    color: #168b45 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cff-mobile-links .cff-mobile-media-btn {
        height: 52px !important;
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-main {
        gap: 13px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > i {
        width: 28px !important;
        min-width: 28px !important;
        font-size: 16px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > span {
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-submenu {
        padding-left: 41px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cff-mobile-links .cff-mobile-media-btn {
        height: 51px !important;
    }

    .cff-mobile-links .cff-mobile-media-main {
        gap: 12px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > i {
        width: 27px !important;
        min-width: 27px !important;
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > span {
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-submenu {
        padding-left: 39px !important;
    }

}





/* =========================================================
   CFF MOBILE MEDIA
   MATCH NORMAL MOBILE MENU ALIGNMENT
========================================================= */

.cff-mobile-links .cff-mobile-media {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5ebe7;
    box-sizing: border-box;
}


/* =========================================================
   MEDIA MAIN ROW
========================================================= */

.cff-mobile-links .cff-mobile-media-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 53px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;

    /* SAME LEFT/RIGHT SPACE AS NORMAL LINKS */
    padding: 15px 18px !important;

    box-sizing: border-box !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;

    background: transparent !important;

    color: #15251c !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: left !important;

    cursor: pointer;

    box-shadow: none !important;
}


/* =========================================================
   MEDIA LEFT SIDE
========================================================= */

.cff-mobile-links .cff-mobile-media-main {
    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 13px !important;
}


/* =========================================================
   MEDIA ICON
========================================================= */

.cff-mobile-links .cff-mobile-media-main > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #08783f !important;

    font-size: 16px !important;

    line-height: 1 !important;
}


/* =========================================================
   MEDIA TEXT
========================================================= */

.cff-mobile-links .cff-mobile-media-main > span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #15251c !important;

    font-family: inherit !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
}


/* =========================================================
   MEDIA ARROW
========================================================= */

.cff-mobile-links .cff-mobile-media-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #15251c !important;

    font-size: 11px !important;

    line-height: 1 !important;

    transition: transform .3s ease !important;
}


/* =========================================================
   ARROW OPEN
========================================================= */

.cff-mobile-links
.cff-mobile-media-btn.active
.cff-mobile-media-arrow {
    transform: rotate(180deg) !important;
}


/* =========================================================
   MEDIA SUBMENU
========================================================= */

.cff-mobile-links .cff-mobile-media-submenu {
    display: none !important;

    width: 100% !important;

    margin: 0 !important;

    /*
       Align submenu underneath Media text,
       not underneath the icon.
    */
    padding: 0 18px 10px 51px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}


/* OPEN */

.cff-mobile-links .cff-mobile-media-submenu.active {
    display: block !important;
}


/* =========================================================
   SUBMENU ITEMS
========================================================= */

.cff-mobile-links .cff-mobile-media-submenu a {
    width: 100% !important;
    min-height: 40px !important;

    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    box-sizing: border-box !important;

    border: none !important;
    border-radius: 6px !important;

    background: transparent !important;

    color: #59675f !important;

    text-decoration: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
}


/* SUBMENU ICON */

.cff-mobile-links .cff-mobile-media-submenu a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    min-width: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #168b45 !important;

    font-size: 13px !important;
}


/* SUBMENU TEXT */

.cff-mobile-links .cff-mobile-media-submenu a span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    line-height: 1.2 !important;
}


/* HOVER */

.cff-mobile-links .cff-mobile-media-submenu a:hover {
    color: #168b45 !important;
    background: #f1f7f3 !important;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 767px) {

    .cff-mobile-links .cff-mobile-media-btn {
        min-height: 52px !important;

        padding: 14px 18px !important;
    }

    .cff-mobile-links .cff-mobile-media-main {
        gap: 13px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > i {
        width: 20px !important;
        min-width: 20px !important;

        font-size: 16px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > span {
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-submenu {
        padding-left: 51px !important;
        padding-right: 18px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cff-mobile-links .cff-mobile-media-btn {
        min-height: 51px !important;

        padding: 13px 18px !important;
    }

    .cff-mobile-links .cff-mobile-media-main {
        gap: 13px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > i {
        width: 20px !important;
        min-width: 20px !important;

        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-main > span {
        font-size: 15px !important;
    }

    .cff-mobile-links .cff-mobile-media-submenu {
        padding-left: 51px !important;
    }

}




/* =========================================================
   FOOTER DEVELOPER CREDIT - COMPACT
========================================================= */

.cff-footer-developer {
    width: 100%;
    margin: 0;
    padding: 8px 15px 12px;
    box-sizing: border-box;
    text-align: center;
}

.cff-footer-developer-line {
    width: 100%;
    max-width: 1180px;
    height: 1px;
    margin: 0 auto 8px;
    background: rgba(255, 255, 255, 0.12);
}

.cff-footer-developer p {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

.cff-footer-developer a {
    display: inline;
    margin-left: 3px;
    color: #d4b15a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.cff-footer-developer a:hover {
    color: #ffffff;
}


/* MOBILE */
@media (max-width: 767px) {

    .cff-footer-developer {
        padding: 7px 12px 10px;
    }

    .cff-footer-developer-line {
        margin-bottom: 7px;
    }

    .cff-footer-developer p,
    .cff-footer-developer a {
        font-size: 11px;
        line-height: 1.3;
    }

}




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

.cff-footer-copyright {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.cff-footer-copyright p {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.cff-footer-copyright p strong {
    color: #ffffff;
    font-weight: 700;
}


/* MOBILE */

@media (max-width: 767px) {

    .cff-footer-copyright p {
        font-size: 12px;
        line-height: 1.5;
    }

}




.cff-footer-copyright-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}




/* =====================================================
   NIGERIA NAIRA DONATION SECTION
===================================================== */

.cff-naira-section {
    width: 100%;
    margin: 28px 0;
    padding: 26px;
    background: linear-gradient(145deg, #f0f8f3 0%, #ffffff 100%);
    border: 1px solid #dcebe1;
    border-radius: 18px;
    box-sizing: border-box;
    text-align: left;
}

/* HEADER */

.cff-naira-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.cff-naira-symbol {
    width: 62px;
    height: 62px;
    min-width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b6844, #198b5c);
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(11, 104, 68, 0.18);
}

.cff-naira-heading {
    flex: 1;
    min-width: 0;
}

.cff-section-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #188252;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.5;
}

.cff-naira-heading h3 {
    margin: 0 0 7px;
    color: #173d2a;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
}

.cff-naira-heading p {
    margin: 0;
    color: #69796e;
    font-size: 13px;
    line-height: 1.8;
}


/* =====================================================
   FOOD BANK CAMPAIGN BANNER
===================================================== */

.cff-naira-campaign {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
    padding: 20px;
    background: linear-gradient(135deg, #103c2a, #175a3c);
    border-radius: 15px;
    box-sizing: border-box;
}

.cff-campaign-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    color: #e7c777;
    font-size: 21px;
}

.cff-naira-campaign span {
    display: block;
    margin-bottom: 6px;
    color: #c3e4cf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

.cff-naira-campaign h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

.cff-naira-campaign p {
    margin: 0;
    color: #e0eee5;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}


/* =====================================================
   BANK ACCOUNT CARDS
===================================================== */

.cff-naira-bank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    width: 100%;
}

.cff-naira-bank-card {
    min-width: 0;
    padding: 21px;
    background: #ffffff;
    border: 1px solid #e0eae3;
    border-radius: 15px;
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(22, 67, 42, 0.045);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cff-naira-bank-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(22, 67, 42, 0.09);
}

.cff-naira-bank-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.cff-naira-bank-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf6ee;
    color: #147448;
    border-radius: 11px;
    font-size: 17px;
}

.cff-naira-bank-label {
    color: #78877d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.5;
}

.cff-naira-bank-card h4 {
    margin: 0 0 19px;
    color: #153d29;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}


/* ACCOUNT NAME */

.cff-naira-account-details {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1ee;
}

.cff-naira-account-details span,
.cff-naira-account-number span {
    display: block;
    color: #77847b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.cff-naira-account-details strong {
    display: block;
    color: #344c3c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.8;
    overflow-wrap: anywhere;
}


/* ACCOUNT NUMBER */

.cff-naira-account-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 17px;
}

.cff-naira-account-number > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cff-naira-account-number strong {
    display: block;
    color: #126d45;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}


/* =====================================================
   COPY ACCOUNT BUTTON
===================================================== */

.cff-naira-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    flex-shrink: 0;
    background: #126d45;
    color: #ffffff;
    border: 1px solid #126d45;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cff-naira-copy:hover {
    background: #0b5033;
    border-color: #0b5033;
    color: #ffffff;
}

.cff-naira-copy:focus-visible {
    outline: 3px solid rgba(18, 109, 69, 0.25);
    outline-offset: 3px;
}

.cff-naira-copy i {
    font-size: 12px;
}


/* =====================================================
   DONATION MESSAGE
===================================================== */

.cff-naira-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 15px;
    background: #fff9e9;
    border: 1px solid #f0e3b9;
    border-radius: 12px;
    box-sizing: border-box;
}

.cff-naira-note > i {
    margin-top: 3px;
    flex-shrink: 0;
    color: #b18a32;
    font-size: 16px;
}

.cff-naira-note p {
    margin: 0;
    color: #6d5c35;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


/* =====================================================
   INTERNATIONAL DONATION DIVIDER
===================================================== */

.cff-popup-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    color: #75847a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-align: center;
    line-height: 1.6;
}

.cff-popup-divider::before,
.cff-popup-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e8e2;
}


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

@media (max-width: 768px) {

    .cff-naira-section {
        padding: 21px;
    }

    .cff-naira-bank-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cff-naira-bank-card {
        padding: 20px;
    }

    .cff-naira-heading h3 {
        font-size: 21px;
    }

    .cff-naira-account-number strong {
        font-size: 23px;
    }

}


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

@media (max-width: 480px) {

    .cff-naira-section {
        margin: 22px 0;
        padding: 16px;
        border-radius: 15px;
    }

    .cff-naira-header {
        align-items: flex-start;
        gap: 12px;
    }

    .cff-naira-symbol {
        width: 49px;
        height: 49px;
        min-width: 49px;
        font-size: 28px;
        border-radius: 12px;
    }

    .cff-section-eyebrow {
        font-size: 9px;
        letter-spacing: 1.1px;
    }

    .cff-naira-heading h3 {
        font-size: 19px;
    }

    .cff-naira-heading p {
        font-size: 12px;
    }

    .cff-naira-campaign {
        align-items: flex-start;
        gap: 11px;
        padding: 15px;
        border-radius: 12px;
    }

    .cff-campaign-icon {
        width: 39px;
        height: 39px;
        min-width: 39px;
        font-size: 17px;
    }

    .cff-naira-campaign h4 {
        font-size: 15px;
    }

    .cff-naira-campaign p {
        font-size: 10px;
    }

    .cff-naira-bank-card {
        padding: 17px;
        border-radius: 12px;
    }