body{
    font-family:'Poppins',sans-serif;
    background:#00a650;
}

/*-------------------------
TOP HEADER
--------------------------*/

.top-header{
    background:#00a650;
    color:#fff;
    font-size:14px;
    padding:10px 0;
}

.top-header a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.top-header a:hover{
    color:#ffc107;
}

.social-icons a{
    width:35px;
    height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;
    margin-left:8px;
}

.social-icons a:hover{
    background:#ffc107;
    color:#000;
}

/*-------------------------
NAVBAR
--------------------------*/

.navbar{
    background:#fff;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.navbar-brand img{
    height:55px;
}

.navbar-brand span{
    color:#00a650;
    font-size:24px;
    font-weight:700;
}

.navbar-nav .nav-link{
    color:#222;
    font-weight:500;
    margin:0 8px;
    position:relative;
}

.navbar-nav .nav-link:hover{
    color:#00a650;
}

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:3px;
    background:#00a650;
    transition:.4s;
}

.navbar-nav .nav-link:hover::after{
    width:100%;
}

.btn-donate{

    background:#ff7a00;

    color:#fff;

    border-radius:40px;

    padding:10px 28px;

    font-weight:600;

    transition:.4s;
}

.btn-donate:hover{

    background:#00a650;

    color:#fff;

}

.sticky-top{
    z-index:999;
}

<!-- ******* banner *************-->
/*==============================
Hero Slider
==============================*/

.hero-slider{

margin-top:0;

}

.hero-img{

height:100vh;

object-fit:cover;

}

.carousel-item{

position:relative;

}

.carousel-item::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

z-index:1;

}

.carousel-caption{

z-index:2;

top:50%;

transform:translateY(-50%);

bottom:auto;

text-align:left;

}

.carousel-caption h1{

font-size:65px;

font-weight:700;

line-height:1.2;

margin-bottom:25px;

}

.carousel-caption p{

font-size:22px;

max-width:650px;

margin-bottom:35px;

}

.carousel-caption .btn{

padding:14px 35px;

font-weight:600;

}

.carousel-indicators [data-bs-target]{

width:14px;

height:14px;

border-radius:50%;

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

background-color:#000;

padding:25px;

border-radius:50%;

}

@media(max-width:768px){

.hero-img{

height:85vh;

}

.carousel-caption{

text-align:center;

padding:20px;

}

.carousel-caption h1{

font-size:38px;

}

.carousel-caption p{

font-size:18px;

}

}
/*=========================
OUR PHILOSOPHY
==========================*/

#about{

padding:90px 0;

}

#about img{

transition:.5s;

}

#about img:hover{

transform:scale(1.03);

}

.philosophy-card{

width:240px;

border-radius:20px;

}

.icon-circle{

width:60px;

height:60px;

background:#00a650;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

flex-shrink:0;

}

#about h2{

color:#222;

}

#about p{

line-height:1.8;

}

.btn-success{

background:#00a650;

border:none;

}

.btn-success:hover{

background:#084637;

}

/*=========================
OUR PURPOSE
=========================*/

.purpose-section{

padding:90px 0;

background:#f8fbf8;

}

.section-subtitle{

color:#ff9800;

font-weight:600;

text-transform:uppercase;

letter-spacing:2px;

}

.section-title{

font-size:42px;

font-weight:700;

margin-top:10px;

color:#00a650;

}

.section-desc{

font-size:18px;

color:#666;

max-width:700px;

margin:auto;

}

.purpose-card{

background:#fff;

padding:35px;

border-radius:20px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.purpose-card:hover{

transform:translateY(-8px);

}

.icon-box{

width:75px;

height:75px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

margin-bottom:25px;

}

.purpose-card h3{

font-weight:700;

margin-bottom:20px;

color:#222;

}

.purpose-card p{

color:#666;

line-height:1.8;

}

.purpose-card ul{

padding-left:20px;

}

.purpose-card li{

margin-bottom:12px;

line-height:1.7;

}

blockquote{

font-size:22px;

font-style:italic;

border-left:5px solid #ff9800;

padding-left:20px;

margin-top:20px;

color:#00a650;

font-weight:600;

}

.value-item{

margin-bottom:20px;

}

.value-item strong{

display:block;

margin-bottom:5px;

color:#222;

}

.value-item p{

margin-left:28px;

margin-bottom:0;

}

@media(max-width:768px){

.section-title{

font-size:32px;

}

.purpose-card{

padding:25px;

}

}

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

.impact-section{

    background:linear-gradient(135deg,#00a650,#1F7A5C);

    color:#fff;

    position:relative;

    overflow:hidden;

}

.impact-subtitle{

    color:#FFC107;

    font-weight:600;

    letter-spacing:2px;

}

.impact-title{

    font-size:42px;

    font-weight:700;

}

.impact-text{

    color:#e7e7e7;

    max-width:700px;

    margin:auto;

}

.impact-card{

    background:#fff;

    color:#333;

    border-radius:18px;

    padding:35px 20px;

    text-align:center;

    transition:.4s;

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

    height:100%;

}

.impact-card:hover{

    transform:translateY(-12px);

}

.impact-icon{

    width:80px;

    height:80px;

    background:#00a650;

    color:#fff;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:20px;

}

.counter{

    font-size:44px;

    font-weight:700;

    color:#00a650;

    margin-bottom:10px;

}

.impact-card p{

    font-size:17px;

    font-weight:600;

    margin:0;

}
.story-card,
.programme-card{
    overflow:hidden;
    border-radius:18px;
    transition:.4s;
}

.story-card img,
.programme-card img{
    transition:.5s;
    object-fit:cover;
}

.story-card:hover,
.programme-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15)!important;
}

.story-card:hover img,
.programme-card:hover img{
    transform:scale(1.08);
}

.card-body{
    padding:30px;
}

.btn-outline-success{
    border-radius:30px;
    padding:10px 22px;
}

.gallery-section{

background:#f8f9fa;

}

.gallery-card{

position:relative;

overflow:hidden;

border-radius:20px;

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

cursor:pointer;

}

.gallery-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

}

.gallery-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.75));

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

color:#fff;

opacity:0;

transition:.5s;

}

.gallery-card:hover img{

transform:scale(1.15);

}

.gallery-card:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h5{

font-weight:700;

margin-bottom:5px;

}

.gallery-overlay p{

font-size:15px;

margin-bottom:15px;

}

.icon-circle{
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:30px;
}

.involvement-card{
transition:.4s;
}

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

/* ==========================
SECTION TITLE
========================== */

.section-title h6{
    color:#198754;
    font-weight:700;
    letter-spacing:2px;
}

.section-title h2{
    font-weight:700;
    margin-bottom:15px;
}

/* ==========================
PARTNERS
========================== */

.partner-section{
    background:#f8f9fa;
    padding:80px 0;
}

.partner-card{
    background:#fff;
    border-radius:15px;
    padding:25px;
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.4s;
}

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

.partner-card img{
    width:150px;
    max-height:70px;
    object-fit:contain;
}

/* ==========================
TESTIMONIAL
========================== */

.testimonial-section{
    padding:90px 0;
    background:#ffffff;
}

.testimonial-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

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

    text-align:center;

    transition:.4s;
}

.testimonial-card:hover{

    transform:translateY(-8px);
}

.testimonial-card img{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

    border:5px solid #198754;
}

.testimonial-card i{

    color:#ffc107;

}

.quote{

    font-style:italic;

    color:#666;

    margin:20px 0;

}

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

.contact-section{

padding:90px 0;

background:#f8f9fa;

}

.contact-box{

background:#fff;

padding:35px;

border-radius:20px;

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

height:100%;

}

.contact-box h4{

font-weight:700;

margin-bottom:25px;

color:#0E5E4B;

}

.contact-info{

display:flex;

margin-bottom:20px;

}

.contact-icon{

width:55px;

height:55px;

background:#198754;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

margin-right:15px;

}

.form-control{

border-radius:10px;

padding:12px;

}

.btn-send{

background:#198754;

color:#fff;

padding:12px 35px;

border-radius:30px;

font-weight:600;

}

.btn-send:hover{

background:#0E5E4B;

color:#fff;

}

/*=================================
GOOGLE MAP
==================================*/

.map-section iframe{

width:100%;

height:450px;

border:0;

}

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

.footer{

background:#0E5E4B;

color:#fff;

padding-top:70px;

}

.footer h5{

font-weight:700;

margin-bottom:25px;

}

.footer a{

color:#d9d9d9;

text-decoration:none;

display:block;

margin-bottom:10px;

transition:.3s;

}

.footer a:hover{

color:#ffc107;

padding-left:5px;

}

.footer-logo{

font-size:30px;

font-weight:700;

}

.social-icons a{

width:42px;

height:42px;

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

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:50%;

margin-right:10px;

transition:.4s;

}

.social-icons a:hover{

background:#ffc107;

color:#000;

}

.newsletter input{

border-radius:30px 0 0 30px;

}

.newsletter button{

border-radius:0 30px 30px 0;

background:#ff7a00;

color:#fff;

}

.footer-bottom{

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

margin-top:40px;

padding:20px 0;

font-size:15px;

}

.back-top{

position:fixed;

bottom:30px;

right:30px;

width:50px;

height:50px;

background:#ff7a00;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

text-decoration:none;

font-size:22px;

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

}