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

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

body{
font-family:'Poppins',sans-serif;
background:#f5f7fa;
color:#333;
line-height:1.6;
}


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

section{
padding:80px 0;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}


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

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    z-index: 999;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

/* Container Fix */

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Flex Layout */

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* Logo */

.logo h2 {
    color: #0A8A7A;
    font-weight: 700;
    margin: 0;
}

/* Menu */

nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu Items */

nav ul li {
    margin-left: 25px;
}

/* Links */

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: .3s;
}

nav ul li a:hover {
    color: #0A8A7A;
}

/* Donate Button */

.btn-primary {
    background: #FFC107;
    padding: 10px 25px;
    border-radius: 30px;
    color: white;
    font-weight: 600;
}

/* Hamburger (Hidden Desktop) */

.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    margin-left: 275px;
}

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

@media (max-width: 992px) {

    .menu-toggle {
        display: block;
    }

    nav ul {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;

        flex-direction: column;
        align-items: center;

        display: none;

        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        margin: 15px 0;
    }

    .btn-primary {
        margin-top: 10px;
    }
}


/* ========================= HERO SECTION ========================= */
.hero {
    position: relative;
    height: 90vh;
    overflow: hidden;
}

/* Slides */

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;

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

    opacity: 0;
    transform: scale(1);

    animation: smoothZoom 15s infinite;
}

/* Individual Slides */

.slide1 {
   
    background-image: url('../images/education-bg.jpg');
    animation-delay: 0s;
}

.slide2 {
    background-image: url('../images/food-bg.jpg');
    animation-delay: 5s;
}

.slide3 {
    background-image: url('../images/care.jpg');
    animation-delay: 10s;
}

/* Overlay */

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.2)
    );

    z-index: 2;
}

/* Content */

.hero-content {
    position: absolute;

    top: 50%;
    left: 80px;

    transform: translateY(-50%);

    color: white;
    max-width: 550px;

    z-index: 3;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-content p {
    margin-bottom: 20px;
}

/* =========================
   NEW SMOOTH ZOOM ANIMATION
========================= */

@keyframes smoothZoom {

    0% {
        opacity: 0;
        transform: scale(1);
    }

    8% {
        opacity: 1;
    }

    30% {
        opacity: 1;
        transform: scale(1.08);
    }

    38% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* =========================
   FEATURES
========================= */

.features{
margin-top: -235px;
  margin-left: 402px;
  position: relative;
  z-index:3;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.feature-card{
background:#0a8a7a;
padding:30px;
border-radius:20px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:.3s;
color: white;
}

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


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

.about {
    padding: 17px 0;
    background: #f8f9fa;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* LEFT IMAGES */

.about-images {
    position: relative;
}

.img-main {
    width: 75%;
    border-radius: 15px;
}

.img-small {
    position: absolute;
    width: 45%;
    border-radius: 15px;
    border: 6px solid white;
}

.img-top {
    top: -30px;
    right: 0;
}

.img-bottom {
    bottom: -30px;
    right: 30px;
}

/* EXPERIENCE BOX */

.experience-box {
    position: absolute;
    bottom: -20px;
    left: 20px;

    background: #f4b400;
    color: white;

    padding: 18px 22px;
    border-radius: 12px;

    text-align: center;
}

.experience-box h3 {
    font-size: 28px;
    margin: 0;
}

.experience-box p {
    font-size: 13px;
    margin: 0;
}

/* RIGHT CONTENT */

.about-subtitle {
    color: #f4b400;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.about-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.about-text p {
    color: #555;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* FEATURES */

.about-features {
    margin-bottom: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.feature-icon {
    color: #f4b400;
    font-weight: bold;
    margin-right: 10px;
}

/* BUTTON */

.btn-primary {
    background: #f4b400;
    color: white;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
}

/* =========================
   WHY CHOOSE
========================= */

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.why-card{
background:white;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:.3s;
}

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

/* =========================
   COUNTER
========================= */

.counter-section {

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0.7),
            rgba(0,0,0,0.3)
        ),
        url('../images/p1.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 80px 0;

    color: white;
}

/* Grid */

.counter-grid {

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

    gap: 20px;

    text-align: center;
}

/* Counter Box */

.counter-box {

    padding: 20px;
}

/* Numbers */

.counter-box h2 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 10px;
}

/* Labels */

.counter-box p {

    font-size: 16px;

    opacity: 0.9;

    letter-spacing: 0.5px;
}

/* =========================
   PROGRAMS SECTION
========================= */

.programs {
    padding: 80px 0;
    background: #f8f9fa;
}

/* Section Title */

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

.section-title span {
    color: #c7902e;
}

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

.programs-slider {
    overflow: hidden;
}

.programs-track {
    display: flex;
    gap: 25px; /* Perfect spacing between cards */
    transition: transform 0.6s ease;
}

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

.program-card {
    flex: 0 0 calc(33.333% - 17px);

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

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    transition: 0.3s;
}

/* Hover Effect */

.program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}

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

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

    transition: 0.6s;
}

/* Zoom Effect */

.program-card:hover img {
    transform: scale(1.1);
}

/* =========================
   PROGRESS BAR
========================= */

.progress-box {
    background: white;

    margin: -30px 20px 0;

    padding: 15px;

    border-radius: 10px;

    position: relative;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.progress-text {
    display: flex;

    justify-content: space-between;

    font-size: 14px;

    margin-bottom: 8px;

    color: #444;
}

.progress-bar {
    width: 100%;

    height: 6px;

    background: #e5e5e5;

    border-radius: 10px;

    overflow: hidden;
}

.progress-fill {
    height: 100%;

    background: #2e6b57;

    border-radius: 10px;
}

/* Progress Width Classes */

.fill80 { width:80%; }
.fill77 { width:77%; }
.fill70 { width:70%; }
.fill60 { width:60%; }
.fill50 { width:50%; }
.fill45 { width:45%; }

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

.program-content {
    padding: 20px;
}

/* Category Label */

.category {
    background: #eef2f3;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    display: inline-block;

    margin-bottom: 8px;
}

/* Title */

.program-content h4 {
    color: #c7902e;

    margin: 10px 0;

    font-size: 18px;
}

/* Description */

.program-content p {
    font-size: 14px;

    color: #555;

    margin-bottom: 18px;

    line-height: 1.6;
}

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

.donate-btn {
    display: inline-block;

    background: #2e6b57;

    color: white;

    padding: 10px 24px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s;
}

.donate-btn:hover {
    background: #1e4e3e;
}

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

/* Tablet */

@media (max-width: 992px) {

.program-card {
    flex: 0 0 calc(50% - 13px);
}

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

}

/* Mobile */

@media (max-width: 576px) {

.program-card {
    flex: 0 0 100%;
}

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

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

.program-content {
    padding: 18px;
}

}

/* =========================
   COURSES
========================= */

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

.course-card{
position:relative;
border-radius:20px;
overflow:hidden;
}

.course-card img{
width:100%;
transition:.4s;
}

.course-card:hover img{
transform:scale(1.1);
}


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

.testimonial{
background:#f9fbfc;
text-align:center;
}

.testimonial-box{
max-width:600px;
margin:auto;
display:none;
}

.testimonial-box.active{
display:block;
}


/* =========================
   FINAL CTA
========================= */

.final-cta{
background:linear-gradient(
45deg,
#0A8A7A,
#0E6F66
);
color:white;
text-align:center;
}

.cta-btn{
background:#FFC107;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
color:black;
font-weight:600;
}


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

.footer {

    background: #1d5951;

    color: white;

    padding: 70px 0 0;

}

/* Grid */

.footer-grid {

    display: grid;

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

    gap: 50px;

}

/* Headings */

.footer-box h3 {

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 20px;

}

.footer-box h4 {

    font-size: 20px;

    margin-bottom: 20px;

}

/* Paragraph */

.footer-box p {

    color: #cbd5e1;

    font-size: 15px;

    line-height: 1.7;

}

/* Links */

.footer-box ul {

    list-style: none;

}

.footer-box ul li {

    margin-bottom: 12px;

}

/* Link Style */

.footer-box ul li a {

    text-decoration: none;

    color: #cbd5e1;

    font-size: 15px;

    transition: 0.3s;

}

.footer-box ul li a:hover {

    color: #ffc107;

    padding-left: 5px;

}

/* Contact Items */

.footer-contact li {

    color: #cbd5e1;

    font-size: 15px;

}

/* Bottom Bar */

.footer-bottom {

    background:#2b2c2e;

    margin-top: 50px;

    padding: 18px;

    text-align: center;

}

.footer-bottom p {

    margin: 0;

    color: #cbd5e1;

    font-size: 14px;

}



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

@media (max-width: 992px) {

.footer-grid {

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

}

}



@media (max-width: 768px) {

.footer-grid {

grid-template-columns: 1fr;

text-align: center;

}

.footer-box p {

max-width: 500px;

margin: auto;

}

}

/* =========================
   PRELOADER
========================= */

#preloader{
position:fixed;
width:100%;
height:100%;
background:white;
z-index:99999;
display:flex;
justify-content:center;
align-items:center;
}

.loader{
display:flex;
gap:10px;
}

.loader span{
width:15px;
height:15px;
background:#0A8A7A;
border-radius:50%;
animation:loaderAnim 0.8s infinite alternate;
}

.loader span:nth-child(2){
animation-delay:0.2s;
}

.loader span:nth-child(3){
animation-delay:0.4s;
}

@keyframes loaderAnim{
from{
transform:translateY(0);
opacity:0.5;
}
to{
transform:translateY(-15px);
opacity:1;
}
}




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

.contact-hero {

    background:
        linear-gradient(
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        ),
        url('../images/contact-banner.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 120px 20px;

    text-align: center;

    color: white;

}

/* Heading */

.contact-hero h1 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 10px;

}

.contact-hero span {

    color: #c7902e;

}

/* Text */

.contact-hero p {

    font-size: 18px;

    margin-bottom: 15px;

}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb {

    margin-top: 12px;
    margin-left: 570px !important;
    font-size: 16px;

}

.breadcrumb a {

    color: white;

    text-decoration: none;

    transition: 0.3s;

}

.breadcrumb a:hover {

    color: #c7902e;

}

.breadcrumb span {

    margin: 0 6px;

}

.breadcrumb .active {

    color: #c7902e;

    font-weight: 600;

}



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

.contact-section {

    padding: 80px 0;

    background: #f8f9fa;

}

/* Header */

.contact-header {

    text-align: center;

    max-width: 700px;

    margin: auto;

    margin-bottom: 50px;

}

.contact-header h2 {

    font-size: 34px;

    font-weight: 700;

}

.contact-header span {

    color: #c7902e;

}

.contact-header p {

    color: #666;

    margin-top: 15px;

}

/* Grid */

.contact-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 40px;

}

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

.contact-form {

    background: white;

    padding: 35px;

    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

}

.contact-form h3 {

    margin-bottom: 20px;

}

/* Inputs */

.form-group {

    margin-bottom: 18px;

}

.form-group input,
.form-group textarea {

    width: 100%;

    padding: 14px;

    border-radius: 8px;

    border: 1px solid #ddd;

    font-size: 14px;

    outline: none;

}

.form-group input:focus,
.form-group textarea:focus {

    border-color: #2e6b57;

}

/* Button */

.contact-btn {

    background: #2e6b57;

    color: white;

    padding: 14px 30px;

    border-radius: 30px;

    border: none;

    cursor: pointer;

    transition: 0.3s;

}

.contact-btn:hover {

    background: #1e4e3e;

}

/* =========================
   INFO
========================= */

.contact-info {

    background: white;

    padding: 35px;

    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

}

.contact-info h3 {

    margin-bottom: 25px;

}

.info-box {

    margin-bottom: 20px;

}

.info-box h4 {

    color: #c7902e;

    margin-bottom: 5px;

}

.info-box p {

    color: #555;

}



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

.map-section iframe {

    width: 100%;

}



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

@media(max-width:768px){

.contact-grid {

grid-template-columns: 1fr;

}

.contact-hero h1 {

font-size: 32px;

}

.contact-hero p {

font-size: 15px;

}

}
/* =========================================
   FULL RESPONSIVE FIX (ADD LAST)
========================================= */


/* ===============================
   LARGE TABLET (992px)
=============================== */

@media (max-width: 992px) {

/* HERO */

.hero-content {
left: 40px;
max-width: 450px;
}

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

/* FEATURES FIX */

.features {
margin-left: 0 !important;
margin-top: -120px;
}

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

/* ABOUT */

.about-grid {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

.img-main {
width: 80%;
}

.img-small {
display: none;
}

.experience-box {
position: relative;
bottom: 0;
left: 0;
margin-top: 15px;
}

/* WHY */

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

/* COUNTER */

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

/* PROGRAMS */

.program-card {
flex: 0 0 50%;
}

/* COURSES */

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

/* FOOTER */

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

}



/* ===============================
   TABLET & MOBILE (768px)
=============================== */

@media (max-width: 768px) {

/* HERO */

.hero {
height: 85vh;
}

.hero-content {
left: 20px;
max-width: 90%;
}

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

.hero-content p {
font-size: 14px;
}

/* FEATURES */

.features {
margin-top: 30px;
margin-left: 0 !important;
}

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

/* ABOUT */

.about-text h2 {
font-size: 26px;
}

.about-text p {
font-size: 14px;
}

/* WHY */

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

/* COUNTER */

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

.counter-box h2 {
font-size: 36px;
}

/* PROGRAMS */

.program-card {
flex: 0 0 100%;
}

/* COURSES */

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

/* CONTACT */

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

/* FOOTER */

.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}

.footer-newsletter {
flex-direction: column;
gap: 10px;
}

.footer-newsletter input {
border-radius: 5px;
}

.footer-newsletter button {
border-radius: 5px;
}

}



/* ===============================
   SMALL MOBILE (576px)
=============================== */

@media (max-width: 576px) {

/* HERO */
 .hero {
        height: 60vh;
    }
.hero-content h1 {
font-size: 24px;
line-height: 1.3;
}

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

/* TITLES */

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

/* BUTTON */

.btn-primary {
padding: 10px 20px;
font-size: 14px;
}

/* TEXT */

.about-text p,
.program-content p,
.info-box p {
font-size: 13px;
}

/* COUNTER */

.counter-box h2 {
font-size: 30px;
}

}



/* ===============================
   EXTRA SMALL MOBILE (400px)
=============================== */

@media (max-width: 400px) {

/* HERO */
    .hero {
        height: 60vh;
    }

.hero-content {
left: 15px;
}

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

/* FEATURES */

.feature-card {
padding: 20px;
}

/* ABOUT */

.about-text h2 {
font-size: 22px;
}

/* FOOTER */

.footer-bottom {
font-size: 12px;
}

}
@media (max-width:768px){

.hero-content {
    left: 20px !important;
    right: 20px!important;
    max-width: 100%!important;
}

.hero-content h1 {
    font-size: 32px!important;
}

.hero-content p {
    font-size: 15px!important;
}

}