/* ===========================================
GLOBAL
=========================================== */

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

html{
scroll-behavior:smooth;
}

body{

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

color:#333;

background:#ffffff;

overflow-x:hidden;

}

/* ===========================================
LOADER
=========================================== */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

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

.custom-navbar{
    background:#fff;
    padding:18px 0;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    transition:.3s;
}

/* Logo */

.logo-img{
    height:65px;
}

.brand-text{
    font-size:18px;
    font-weight:700;
    color:#28a745;
    letter-spacing:.4px;
    white-space:nowrap;
}

/* Menu */

.navbar-nav .nav-link{

    color:#222 !important;

    font-size:15px;

    font-weight:600;

    margin:0 12px;

    transition:.3s;
}

.navbar-nav .nav-link:hover{

    color:#28a745 !important;

}

/* Divider */

.divider{

    color:#999;

    font-size:20px;

}

/* Login Button */
/*=========================================================
LOGIN BUTTON
=========================================================*/
/*=========================================================
LOGIN BUTTON
=========================================================*/

.navbar .btn.login-btn{

    background:#2E7D32;
    color:#fff !important;

    display:inline-block;

    padding:8px 18px !important;

    border:none;

    border-radius:4px !important;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    line-height:1.2;

    text-transform:uppercase;

    text-decoration:none;

    transition:all .3s ease;

}

.navbar .btn.login-btn:hover{

    background:#256628;

    color:#fff !important;

    transform:translateY(-2px);

}
/* Responsive */
@media (max-width:991px){

    .navbar .btn.login-btn{

        width:100%;

        margin-top:15px;

        padding:10px 18px !important;

        border-radius:4px !important;

        font-size:12px;

    }

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

section{

padding:100px 0;

}

.section-title{

font-size:42px;

font-weight:700;

color:#198754;

margin-bottom:20px;

}

.section-subtitle{

color:#777;

font-size:18px;

max-width:750px;

margin:auto;

}

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

.btn{

border-radius:50px;

padding:14px 35px;

font-weight:600;

transition:.3s;

}

.btn-success{

background:#198754;

border:none;

}

.btn-success:hover{

transform:translateY(-3px);

}

/* ===========================================
CARDS
=========================================== */

.card{

border:none;

border-radius:18px;

overflow:hidden;

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

transition:.3s;

}

.card:hover{

transform:translateY(-10px);

}

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

.footer{

background:#0f5132;

color:white;

padding:70px 0 30px;

}

.footer h4,
.footer h5{

margin-bottom:20px;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

margin-bottom:10px;

}

.footer-links a{

color:#ffffff;

text-decoration:none;

}

.footer-links a:hover{

color:#ffd54f;

}

.footer hr{

border-color:rgba(255,255,255,.2);

margin:40px 0 20px;

}

/* ===========================================
BACK TO TOP
=========================================== */

#backToTop{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#198754;

color:white;

display:none;

cursor:pointer;

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

z-index:999;

}

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

@media(max-width:991px){

.navbar{

padding:10px;

}

section{

padding:70px 0;

}

.section-title{

font-size:32px;

}

}

@media(max-width:768px){

.navbar-brand{

font-size:20px;

}

.section-title{

font-size:28px;

}

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

.hero{

    background:#fff;

    min-height:calc(100vh - 85px);

    display:flex;

    align-items:center;

    padding:120px 0 60px;

    overflow:hidden;

}

/* LEFT CONTENT */

.hero-title{

    font-size:4rem;

    font-weight:800;

    color:#222;

    line-height:1.1;

    margin-bottom:15px;

}

.hero-subtitle{

    font-size:2.5rem;

    font-weight:600;

    color:#28a745;

    margin-bottom:20px;

}

.hero-description{

    font-size:1.15rem;

    line-height:1.8;

    color:#555;

    margin-bottom:35px;

    max-width:600px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:14px 36px;

    border-radius:40px;

}

/* RIGHT IMAGE */

.hero-image{

    width:100%;

    max-width:850px;

    height:auto;

    display:block;

    margin-left:auto;

}


/* ==========================================================
   LARGE LAPTOP (1400px BELOW)
========================================================== */

@media (max-width:1400px){

.hero-title{

    font-size:3.5rem;

}

.hero-subtitle{

    font-size:2.2rem;

}

.hero-image{

    max-width:760px;

}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

.hero{

    padding-top:110px;

}

.hero-title{

    font-size:3rem;

}

.hero-subtitle{

    font-size:2rem;

}

.hero-description{

    font-size:1.05rem;

}

.hero-image{

    max-width:650px;

}

}


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

@media (max-width:992px){

.hero{

    text-align:center;

    padding-top:100px;

    padding-bottom:50px;

}

.hero .row{

    flex-direction:column-reverse;

}

.hero-image{

    max-width:520px;

    margin:0 auto 40px;

}

.hero-title{

    font-size:2.6rem;

}

.hero-subtitle{

    font-size:1.8rem;

}

.hero-description{

    margin:auto auto 30px;

    max-width:700px;

}

.hero-buttons{

    justify-content:center;

}

}


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

@media (max-width:768px){

.hero{

    min-height:auto;

    padding-top:90px;

    padding-bottom:40px;

}

.hero-title{

    font-size:2.2rem;

}

.hero-subtitle{

    font-size:1.5rem;

}

.hero-description{

    font-size:1rem;

    line-height:1.7;

}

.hero-image{

    max-width:100%;

}

.hero-buttons{
    flex-direction:column;

    align-items:center;
}
.hero-buttons .btn{

    width:100%;

    max-width:280px;
}

}

/* ==========================================================
   SMALL MOBILE
========================================================== */
@media (max-width:480px){
.hero{
    padding-top:80px;
}
.hero-title{

    font-size:1.9rem;
}
.hero-subtitle{

    font-size:1.3rem;
}
.hero-description{

    font-size:.95rem;
}
.hero-image{

    max-width:95%;
}
}
/* ===========================================================
ORGANIZATION
=========================================================== */

.organization-section{

padding:100px 0;

background:#ffffff;

}

.section-badge{

display:inline-block;

padding:8px 18px;

background:#198754;

color:#fff;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:15px;

}

.organization-card{

background:#fff;

padding:40px;

border-radius:20px;

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

height:100%;

transition:.3s;

}

.organization-card:hover{

transform:translateY(-8px);

}

.organization-icon{

width:70px;

height:70px;

background:#198754;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

margin-bottom:20px;

}

.organization-card h3{

font-weight:700;

margin-bottom:15px;

}

.organization-card p{

line-height:1.8;

color:#666;

}

.value-card{

background:#f8f9fa;

padding:35px;

text-align:center;

border-radius:20px;

height:100%;

transition:.3s;

}

.value-card:hover{

background:#198754;

color:white;

transform:translateY(-10px);

}

.value-card:hover p{

color:white;

}

.value-card i{

font-size:50px;

margin-bottom:20px;

color:#198754;

}

.value-card:hover i{

color:#FFD54F;

}

.value-card h4{

margin-bottom:15px;

font-weight:700;

}

.value-card p{

color:#666;

}

/* ===========================================================
PROGRAMS
=========================================================== */
.programs-section{
padding:100px 0;
background:#f8f9fa;
}
.program-card{
background:white;
border-radius:20px;
padding:40px 30px;
text-align:center;
height:100%;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.program-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.program-icon{
width:90px;
height:90px;
background:#198754;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-bottom:25px;
font-size:38px;
color:white;
transition:.35s;
}
.program-card:hover .program-icon{
background:#FFD54F;
color:#198754;
transform:rotate(10deg);
}
.program-card h3{
font-size:24px;
font-weight:700;
margin-bottom:20px;
}
.program-card p{
color:#666;
line-height:1.8;
margin-bottom:25px;
}
.program-card .btn{
padding:10px 28px;
border-radius:30px;
}

/* ===========================================================
IMPACT
=========================================================== */
.impact-section{
padding:100px 0;
background:#ffffff;
}
.impact-card{
background:#198754;
color:white;
padding:40px 30px;
text-align:center;
border-radius:20px;
height:100%;
transition:.35s;
}
.impact-card:hover{
transform:translateY(-10px);
background:#146c43;
}
.impact-card i{
font-size:50px;
margin-bottom:20px;
color:#FFD54F;
}
.impact-card h2{
font-size:52px;
font-weight:700;
margin-bottom:10px;
}
.impact-card h5{
font-weight:600;
margin-bottom:15px;
}
.impact-card p{
font-size:15px;
line-height:1.8;
}
.counter{
font-size:56px;
font-weight:700;
}

/* ===========================================================
GALLERY
=========================================================== */

.gallery-section{

padding:100px 0;

background:#f8f9fa;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.1);
}
.gallery-item img{
width:100%;
height:300px;
object-fit:cover;
transition:.4s;
}
.gallery-item:hover img{
transform:scale(1.1);
}
.gallery-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(25,135,84,.75);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:.4s;
}
.gallery-item:hover .gallery-overlay{
opacity:1;
}
.gallery-overlay i{
font-size:45px;
color:white;
}
/* ===========================================================
PARTNERS
=========================================================== */
.partners-section{
padding:100px 0;
background:#ffffff;
}
.partner-card{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.35s;
height:140px;
display:flex;
align-items:center;
justify-content:center;
}
.partner-card:hover{
transform:translateY(-8px);
}
.partner-card img{
max-width:100%;
max-height:70px;
filter:grayscale(100%);
transition:.35s;
}
.partner-card:hover img{
filter:none;
transform:scale(1.08);
}