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

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

html{
    scroll-behavior:smooth;
}

:root{

    --dark:#24314D;

    --white:#ffffff;

}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:var(--white);

    color:var(--dark);

    overflow-x:hidden;

    font-size:1.05rem;

}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

.navbar{
    width:100%;
    height:75px;
    background:#f5f5f5;

    display:flex;
    align-items:center;

    padding:0 35px;
}

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

    min-width:260px;
}

.logo img{
    width:55px;
    height:auto;
}

.logo-text h2{
    font-size:1rem;
    font-weight:700;
    color:#27344A;
    line-height:1.1;
}

.logo-text p{
     font-size:.75rem;
    letter-spacing:1px;
    color:#4F6CF5;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:34px;

    margin-left:20px;
}

.nav-menu a{
    color:#4b5563;
     font-size:1rem;
    font-weight:500;
}

.nav-menu a:hover{
    color:#3f5efb;
}

.nav-menu .active{
    color:#3f5efb;
    position:relative;
}

.nav-menu .active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:3px;
    background:#3f5efb;
}

.donate-btn{
    margin-left:auto;

    background:#E1A21B;
    color:white;

    padding:14px 26px;
    border-radius:35px;

    font-size:1rem;
    font-weight:600;
}

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

@media(max-width:1100px){

    .navbar{
        flex-direction:column;
        height:auto;
        padding:15px;
        gap:20px;
    }

    .nav-menu{
        flex-wrap:wrap;
        justify-content:center;
        margin-left:0;
        gap:20px;
    }

    .donate-btn{
        margin-left:0;
    }
}

@media(max-width:768px){

    .logo{
        flex-direction:column;
        text-align:center;
    }

    .nav-menu a{
        font-size:14px;
    }
} 

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

.hero{

    background:#1437B7;

    height:calc(100vh - 75px);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:20px 50px;
}

.hero-content{

    max-width:650px;
} 
.hero-text{

    position:relative;

    top:-50px;

}

.hero-badge{

    display:inline-block;

    padding:12px 20px;

    background:rgba(255,255,255,0.15);

    border-radius:30px;

    color:#ffffff;

    font-size:.9rem;

    margin-bottom:25px;
}

.hero-content h1{

    color:#ffffff;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(1.7rem,3vw,2.5rem);

    font-weight:700;

    line-height:1.05;

    margin-bottom:20px;
}

.hero-content h1 span{

    color:#E6A61B;
}

.hero-content p{

    color:#d7defc;
     max-width:600px;

    font-size:1.05rem;

    line-height:1.7;

    margin-bottom:30px;
}

.hero-buttons{

    display:flex;

    gap:18px;
}

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

.btn-primary{

    display:inline-block;

    background:#E6A61B;

    color:#111;

    padding:16px 28px;

    border-radius:35px;

    font-weight:600;

    text-decoration:none;

    transition:all 0.3s ease;
}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(230,166,27,0.35);

    cursor:pointer;
}

.btn-secondary{

    display:inline-block;

    border:2px solid #ffffff;

    color:#ffffff;

    padding:16px 28px;

    border-radius:35px;

    font-weight:600;

    text-decoration:none;

    transition:all 0.3s ease;
}

.btn-secondary:hover{

    background:#ffffff;

    color:#1437B7;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(255,255,255,0.25);

    cursor:pointer;
}

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

.hero-slider{

    width:760px;

    height:500px;

    position:relative;

    overflow:hidden;

    flex-shrink:0;
}

.slides{

    display:none;

    width:100%;

    height:100%;
}

.slides img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;
}

.fade{

    animation:fadeEffect 1s;
}

@keyframes fadeEffect{

    from{
        opacity:0.4;
    }

    to{
        opacity:1;
    }
}

.slider-dots{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:10;
}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,0.5);

    transition:0.3s ease;
}

.dot.active{

    background:#E6A61B;
}

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

@media(max-width:1300px){

    .hero{

        gap:30px;

        padding:20px 40px;
    }

    .hero-content h1{

        font-size:54px;
    }

    .hero-slider{

        width:600px;

        height:430px;
    }
}

@media(max-width:1100px){

    .hero{

        height:auto;

        flex-direction:column;

        text-align:center;

        padding:60px 30px;
    }

    .hero-content{

        max-width:100%;
    }

    .hero-content h1{

        font-size:50px;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-slider{

        width:100%;

        max-width:800px;

        height:450px;

        margin-top:20px;
    }
}

@media(max-width:768px){

    .hero{

        padding:50px 20px;
    }

    .hero-content h1{

        font-size:42px;

        line-height:1.1;
    }

    .hero-content p{

        font-size:16px;

        line-height:1.7;
    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;
    }

    .hero-slider{

        width:100%;

        height:320px;
    }
}

@media(max-width:480px){

    .hero-content h1{

        font-size:34px;
    }

    .hero-content p{

        font-size:15px;
    }

    .hero-slider{

        height:250px;
    }

    .hero-badge{

        font-size:12px;

        padding:10px 16px;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:260px;

        text-align:center;
    }
}
/* =========================
   FOCUS AREAS
========================= */

.focus-areas{
    background:#ffffff;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    padding:55px 80px;
}

.focus-card{
    text-align:center;
}

.focus-icon{
    width:62px;
    height:62px;

    margin:0 auto 18px;

    border-radius:16px;
    background:#F8F1E5;

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

.focus-icon i{
    font-size:24px;
    color:#E2A11A;
}

.focus-card h3{
    font-size:clamp(1.4rem,2vw,1.7rem);
    margin-bottom:10px;
    color:#24314d;
    font-weight:600;
}

.focus-card p{
    color:#6b7280;
    line-height:1.6;
    font-size:1.05rem;
}

@media(max-width:900px){

    .focus-areas{
        grid-template-columns:repeat(2,1fr);
        padding:50px 40px;
    }
}

@media(max-width:600px){

    .focus-areas{
        grid-template-columns:1fr;
        padding:40px 20px;
    }
} 
/* =========================
   ABOUT SECTION
========================= */

.about-section{

    background:#EEF3FA;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding:70px 80px;
}

/* Left Side */

.about-image-container{

    position:relative;
}

.about-image{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:20px;

    display:block;
}

/* 13+ Badge */

.impact-card{

    position:absolute;

    right:-25px;

    bottom:-25px;

    width:150px;

    height:120px;

    background:#E3A51B;

    color:white;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

.impact-card h3{

    font-size:42px;

    margin-bottom:4px;

    line-height:1;
}

.impact-card p{

    font-size:14px;
}

/* Right Side */

.section-tag{

    color:#E3A51B;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;
}

.about-content h2{

    font-size:clamp(1.7rem,3vw,2.5rem);

    font-family:'Plus Jakarta Sans',sans-serif;
    line-height:1.08;

    color:#24314D;

    margin:20px 0 30px;
}

.about-content p{

    color:#5F6B7A;

    line-height:1.8;

    font-size:1.05rem;

    margin-bottom:22px;
}

/* Mission Vision */

.mission-vision{

    display:flex;

    gap:20px;

    margin-top:25px;
}

.info-card{

    background:white;

    border:1px solid #D8E0F0;

    border-radius:15px;

    padding:24px;

    flex:1;

    min-height:190px;
}

.info-card h4{

    color:#E3A51B;

    margin-bottom:12px;

     font-size:1.35rem;
}

.info-card p{

    margin:0;

    font-size:1.05rem;

    line-height:1.7;
}

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

.about-btn{

    display:inline-block;

    margin-top:30px;

    background:#E3A51B;

    color:white;

    padding:15px 30px;

    border-radius:30px;

    font-weight:600;

    text-decoration:none;

    transition:all 0.3s ease;
}

.about-btn:hover{

    transform:translateY(-4px);

    background:#d99810;

    box-shadow:0 12px 25px rgba(227,165,27,0.35);

    cursor:pointer;
}

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

@media(max-width:1100px){

    .about-section{

        grid-template-columns:1fr;

        gap:60px;

        padding:60px 30px;
    }

    .about-content h2{

        font-size:48px;
    }

    .mission-vision{

        flex-direction:column;
    }

    .impact-card{

        right:20px;

        bottom:20px;
    }
}

@media(max-width:768px){

    .about-image{

        height:350px;
    }

    .about-content h2{

        font-size:38px;
    }
}

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

.impact-stats{
    background:#EEF3FA;

    text-align:center;

    padding:100px 80px;
}

.center-tag{
    display:block;
    text-align:center;
}

.section-title{
    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(1.7rem,3vw,2.5rem);

    color:#24314D;

    margin-top:15px;
    margin-bottom:15px;
}

.section-subtitle{
    max-width:700px;
    font-size:1.05rem;

    margin:0 auto 60px;

    color:#6B7280;

    line-height:1.8;
}

.stats-grid{
    display:grid;

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

    gap:25px;
}

.stat-card{
    background:white;

    border:1px solid #D9E2F3;

    border-radius:20px;

    padding:40px 25px;

    transition:0.3s;
}

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

.stat-icon{
    font-size:34px;

    color:#E3A51B;

    margin-bottom:20px;
}

.stat-card h3{
    color:#E3A51B;

    font-size:2.4rem;

    margin-bottom:12px;
}

.stat-card p{
    color:#24314D;

    font-weight:600;
}

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

@media(max-width:1000px){

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

    .section-title{
        font-size:40px;
    }
}

@media(max-width:600px){

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

    .impact-stats{
        padding:70px 20px;
    }
}

/* =========================
   CAUSES SECTION
========================= */

.causes-section{
    background:#EEF3FA;
    padding:100px 80px;
    text-align:center;
}

.causes-grid{
    margin-top:60px;

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

    gap:30px;
}

.cause-card{
    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    text-align:left;

    border:1px solid #E2E8F0;

    transition:all 0.35s ease;
}

.cause-card:hover{
    transform:translateY(-8px);

    box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

/* =========================
   IMAGE
========================= */

.cause-card img{
    width:100%;

    height:300px;

    object-fit:cover;

    transition:transform 0.5s ease;
}

.cause-card:hover img{
    transform:scale(1.05);
}

/* =========================
   CONTENT
========================= */

.cause-content{
    padding:35px 25px 25px;

    position:relative;
}

/* =========================
   ICON
========================= */

.cause-icon{
    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:20px;

    position:absolute;

    top:-27px;

    left:25px;

    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.yellow{
    background:#E3A51B;
}

.blue{
    background:#3B82F6;
}

.green{
    background:#10B981;
}

.purple{
    background:#8B5CF6;
}

.red{
    background:#EF4444;
}

/* =========================
   TEXT
========================= */

.cause-content h3{
    color:#24314D;

    margin-bottom:12px;

    font-size:clamp(1.5rem,2vw,1.8rem);

    font-weight:700;
}

.cause-content p{
    color:#6B7280;

    line-height:1.8;

    margin-bottom:20px;

    font-size:1.05rem;
}

.cause-content a{
    color:#E3A51B;

    font-weight:600;

    transition:0.3s ease;
}

.cause-content a:hover{
    color:#c98f12;
}

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

@media(max-width:1100px){

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

    .cause-card img{
        height:260px;
    }
}

@media(max-width:700px){

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

    .causes-section{
        padding:70px 20px;
    }

    .cause-card img{
        height:240px;
    }

    .cause-content h3{
        font-size:24px;
    }
}
/* =========================
   EVENTS SECTION
========================= */

.events-section{
    background:#EEF3FA;
    padding:100px 80px;
}

.events-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:50px;
}

.left-title{
    margin-top:15px;
}

.view-all-link{
    color:#E3A51B;
    font-weight:600;
    transition:0.3s ease;
}

.view-all-link:hover{
    color:#c98d12;
}

.events-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.event-card{
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #E2E8F0;

    transition:all 0.3s ease;
    cursor:pointer;
}

.event-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.event-image{
    position:relative;
    overflow:hidden;
}

.event-image img{
    width:100%;
    height:220px;
    object-fit:cover;

    transition:transform 0.4s ease;
}

.event-card:hover .event-image img{
    transform:scale(1.05);
}

.event-badge{
    position:absolute;
    top:15px;
    left:15px;

    padding:6px 12px;
    border-radius:20px;

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

.upcoming{
    background:#E3A51B;
}

.completed{
    background:#64748B;
}

.event-content{
    padding:24px;
}

.event-content h3{
    color:#24314D;
    margin-bottom:18px;
    line-height:1.4;
    font-size:clamp(1.4rem,2vw,1.7rem);
}

.event-content p{
    color:#6B7280;
    margin-bottom:10px;
    font-size:1rem;
    display:flex;
    align-items:center;
}

.event-content i{
    color:#E3A51B;
    margin-right:8px;
    width:18px;
}

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

@media(max-width:1100px){

    .events-section{
        padding:80px 40px;
    }

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

@media(max-width:768px){

    .events-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

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

    .event-content h3{
        font-size:20px;
    }
}

@media(max-width:600px){

    .events-section{
        padding:60px 20px;
    }

    .event-image img{
        height:200px;
    }

    .event-content{
        padding:20px;
    }

    .event-content h3{
        font-size:18px;
    }

    .event-content p{
        font-size:13px;
    }
} 

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

.stories-section{
    background:#EEF3FA;
    padding:100px 80px;
}

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

.stories-header{

    text-align: center;

    margin-bottom: 50px;

}

.stories-header .section-tag{

    display: inline-block;

    margin-bottom: 15px;

}

.stories-header .section-title{

    margin-bottom: 20px;

}

.left-subtitle{

    max-width: 700px;

    margin: 0 auto;

    color: #6B7280;

    line-height: 1.8;

    font-size: 1.05rem;

}

/* =========================
   STORY CONTAINER
========================= */

.story-container{

    width:900px;

    max-width:100%;

    margin:40px auto 0;

    position:relative;

}

/* =========================
   STORY CARD
========================= */

.story-card{

    position:relative;

    width:100%;

    border-radius:20px;

    overflow:hidden;

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

}

.story-card img{

    width:100%;

    height:450px;

    object-fit:cover;

    display:block;

}

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

.play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:75px;

    height:75px;

    border:none;

    border-radius:50%;

    background:#E3A51B;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.3s;

}

.play-btn:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

/* =========================
   ARROWS
========================= */

.story-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#1437B7;

    font-size:18px;

    cursor:pointer;

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

    z-index:100;

    transition:.3s;

}

.story-arrow:hover{

    background:#E3A51B;

    color:#fff;

}

.left-arrow{

    left:-80px;

}

.right-arrow{

    right:-80px;

}

/* =========================
   VIDEO MODAL
========================= */

.video-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.video-modal.active{

    display:flex;

}

.video-container{

    width:90vw;

    max-width:1200px;

    position:relative;

}

.video-container video{

    width:100%;

    max-height:85vh;

    border-radius:15px;

}

.close-video{

    position:absolute;

    top:-45px;

    right:0;

    color:#fff;

    font-size:42px;

    cursor:pointer;

}

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

@media(max-width:992px){

    .stories-section{

        padding:80px 40px;

    }

    .story-card img{

        height:380px;

    }

    .left-arrow{

        left:-30px;

    }

    .right-arrow{

        right:-30px;

    }

}

@media(max-width:768px){

    .stories-section{

        padding:70px 20px;

    }

    .story-card img{

        height:250px;

    }

    .story-arrow{

        width:45px;

        height:45px;

    }

    .left-arrow{

        left:10px;

    }

    .right-arrow{

        right:10px;

    }

}



/* =====================================================
   TRUSTED PARTNERSHIPS
===================================================== */

/* ==========================================================
                TRUSTED PARTNERSHIPS SECTION
========================================================== */

/* ==========================================================
                TRUSTED PARTNERSHIPS
========================================================== */

.partners-section{

    background:#FFFFFF;

    padding:100px 0;

    overflow:hidden;

    text-align:center;

    border-top:1px solid #E6ECF7;

}

.partners-section .section-tag{

    display:inline-block;

    margin-bottom:15px;

}

.partners-section .section-title{

    margin-bottom:15px;

}

.partners-section .section-subtitle{

    max-width:700px;

    margin:0 auto;

    color:#6B7280;

    line-height:1.8;

    font-size:17px;

}


/* ==========================================================
                    ROWS
========================================================== */

.lion-slider{

    width:100%;

    overflow:hidden;

    margin-top:55px;

}

.wolf-slider{

    margin-top:30px;

}


/* ==========================================================
                    TRACK
========================================================== */

.tiger-track{

    display:flex;

    align-items:center;

    gap:30px;

    width:max-content;

    animation:lionMove 35s linear infinite;

}

.wolf-slider .tiger-track{

    animation:wolfMove 35s linear infinite;

}

.lion-slider:hover .tiger-track{

    animation-play-state:paused;

}


/* ==========================================================
                    CARD
========================================================== */

.elephant-card{

    width:220px;

    height:110px;

    background:#F8FAFF;

    border:1px solid #D9E6FF;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    transition:0.35s ease;

    box-shadow:0 8px 18px rgba(20,55,183,.08);

}

.elephant-card:hover{

    transform:translateY(-8px);

    background:#FFFFFF;

    border-color:#1437B7;

    box-shadow:0 18px 35px rgba(20,55,183,.18);

}


/* ==========================================================
                    LOGOS
========================================================== */

.eagle-logo{

    max-width:170px;

    max-height:70px;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:.35s ease;

}
.elephant-card:hover .eagle-logo{

    transform:scale(1.08);

}


/* ==========================================================
                INDIVIDUAL LOGO SIZES
========================================================== */

.tata-logo{

    max-width:190px;

}

.din-logo{
    width:260px;
    height:auto;
}

.danieli-logo{

    max-width:180px;

}

.gateway-logo{

    max-width:230px;

}

.rapipay-logo{

    max-width:150px;

}

.barco-logo{

    max-width:190px;

}

.gobolt-logo{

    max-width:165px;

}

.unicharm-logo{

    max-width:170px;

}

.swaniti-logo{

    max-width:210px;

}

.samhita-logo{

    max-width:170px;

}

.maticarbon-logo{

    max-width:170px;

}


/* ==========================================================
                    ANIMATIONS
========================================================== */

@keyframes lionMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes wolfMove{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}


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

@media(max-width:992px){

    .partners-section{

        padding:80px 0;

    }

    .elephant-card{

        width:190px;

        height:95px;

    }

}

@media(max-width:768px){

    .partners-section{

        padding:70px 0;

    }

    .lion-slider{

        margin-top:35px;

    }

    .wolf-slider{

        margin-top:20px;

    }

    .tiger-track{

        gap:18px;

    }

    .elephant-card{

        width:170px;

        height:85px;

    }

    .eagle-logo{

        max-width:130px;

        max-height:50px;

    }

    .partners-section .section-title{

        font-size:42px;

    }

    .partners-section .section-subtitle{

        padding:0 20px;

        font-size:15px;

    }

}

/* =========================
   CTA SECTION
========================= */

.cta-section{

    background:linear-gradient(
        135deg,
        #1437B7,
        #5A94FF
    );

    text-align:center;

    padding:100px 20px;

    color:white;
}

.cta-section h2{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(1.7rem,3vw,2.5rem);
    margin-bottom:20px;
}

.cta-section p{

    max-width:750px;
    margin:auto;
    font-size:1.05rem;

    line-height:1.8;

    opacity:0.9;
}

.cta-buttons{

    margin-top:40px;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;
}

.cta-donate{

    background:white;
    color:#111827;

    padding:16px 30px;

    border-radius:35px;

    font-weight:600;

    transition:0.3s ease;
}

.cta-donate:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.cta-volunteer{

    border:1px solid rgba(255,255,255,0.5);

    color:white;

    padding:16px 30px;

    border-radius:35px;

    transition:0.3s ease;
}

.cta-volunteer:hover{

    background:white;
    color:#1437B7;
}

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

.footer{

    background:#111C31;

    color:#ffffff;

    padding:80px 60px 0;

}

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

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:55px;

    flex-wrap:nowrap;

}

/* Column widths */

.footer-about{

    width:28%;

}

.footer-links{

    width:13%;

}

.footer-programmes{

    width:24%;

}

.footer-contact{

    width:18%;

}

/* =========================
   LOGO
========================= */

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.footer-logo img{

    width:75px;

    height:75px;

    object-fit:contain;

    background:#ffffff;

    padding:5px;

    border-radius:4px;

}

.footer-logo-text h2{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:6px;

}

.footer-logo-text span{

    color:#4F78FF;

    font-size:13px;

    letter-spacing:.5px;

}

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

.footer-about p{

    color:#D5D9E5;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:35px;

}

.footer-about h4{

    color:#E3A51B;

    font-size:18px;

    margin-bottom:20px;

    letter-spacing:.5px;

}

/* =========================
   SOCIAL
========================= */

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.footer-social a:hover{

    background:#E3A51B;

    color:#111C31;

    transform:translateY(-4px);

}

/* =========================
   HEADINGS
========================= */

.footer-links h3,
.footer-programmes h3,
.footer-contact h3{

    color:#E3A51B;

    font-size:18px;

    margin-bottom:30px;

}

/* =========================
   LINKS
========================= */

.footer-links ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:20px;

}

.footer-links a{

    text-decoration:none;

    color:#F3F4F7;

   font-size:1.05rem;

    transition:.3s;

}

.footer-links a:hover{

    color:#E3A51B;

}

/* =========================
   PROGRAMMES
========================= */

.programme-item{

    display:flex;

    gap:18px;

    text-decoration:none;

    color:white;

}

.programme-item img{

    width:82px;

    height:82px;

    object-fit:contain;

    flex-shrink:0;

}

.programme-item h4{

    font-size:18px;

    margin-bottom:10px;

    color:#ffffff;

}

.programme-item p{

    color:#D5D9E5;

    line-height:1.8;

    font-size:1.05rem;

}

.programme-item:hover h4{

    color:#E3A51B;

}

.programme-line{

    height:1px;

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

    margin:28px 0;

}

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

.contact-box{

    display:flex;

    gap:16px;

    margin-bottom:28px;

}

.contact-box i{

    color:#E3A51B;

    font-size:22px;

    margin-top:4px;

    flex-shrink:0;

}

.contact-box p{

    color:#F3F4F7;

    line-height:1.9;

    font-size:1.05rem;

}

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

.footer-bottom{

    margin-top:65px;

    padding:28px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:#BFC7D9;

    font-size:16px;

}

.footer-bottom-links{

    display:flex;

    gap:35px;

}

.footer-bottom-links a{

    color:#BFC7D9;

    text-decoration:none;

    font-size:16px;

}

.footer-bottom-links a:hover{

    color:#E3A51B;

}

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

@media(max-width:1200px){

    .footer-top{

        flex-wrap:wrap;

    }

    .footer-about,
    .footer-links,
    .footer-programmes,
    .footer-contact{

        width:45%;

    }

}

@media(max-width:768px){

    .footer{

        padding:60px 20px 0;

    }

    .footer-top{

        flex-direction:column;

        gap:40px;

    }

    .footer-about,
    .footer-links,
    .footer-programmes,
    .footer-contact{

        width:100%;

    }

    .footer-bottom{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

        gap:20px;

    }

}