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

body {
    font-family: 'Inter', sans-serif;

}

/* ===== Top Bar ===== */
.topbar {
    background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
    padding: 12px 0;
    color: #fff;
    font-size: 14px;
}

.container {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Left Section ===== */
.topbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.top-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    transition: 0.3s ease;
    white-space: nowrap;
}

.top-link i {
    color: #ffd700;
    font-size: 13px;
}

.top-link:hover {
    color: #ffd700;
}

/* ===== Right Section ===== */
.topbar-right {
    display: flex;
    gap: 10px;
}

/* ===== Social Buttons ===== */
.social-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.facebook:hover { background: #1877f2; }
.instagram:hover { background: #e1306c; }
.twitter:hover { background: #1da1f2; }
.youtube:hover { background: #ff0000; }

@media (max-width: 768px) {

    .container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .topbar-left {
        justify-content: center;
        gap: 15px;
    }

    .topbar-right {
        justify-content: center;
    }
} 

/* Extra small mobile */

@media (max-width: 480px) {

    .topbar-left {
        flex-direction: column;
        gap: 8px;
    }

    .top-link {
        font-size: 13px;
    } 

    /* Optional: Hide location on very small screens */
     .topbar-left a:last-child {
        display: none;
    }
} 


/* Hide Top Bar On Mobile */
/* 
@media (max-width: 768px) {
    .topbar {
        display: none;
    }
} */
/* ============================= */
/* CENTER LOGO SECTION */
/* ============================= */

.logo-section {
    width: 100%;
    padding: 15px 0;
    background: #ffffff;
}

/* Make container full width for this section only */
.logo-section .container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/* TRUE CENTER ALIGN */
.logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
}

/* Desktop size */
.logo-wrapper img {
    height: 100px;             /* adjust if needed */
    width: auto;
    display: block;
}

/* Mobile size */
@media (max-width: 768px) {
    .logo-wrapper img {
        height: 70px;
    }
}
/* ============================= */
/* LOGO DIVIDER LINE */
/* ============================= */
.logo-divider {
    width: 100%;
    height: 2px;
    background: #f0f0f0;
}

/* Hide divider on mobile devices */
@media (max-width: 768px) {
    .logo-divider {
        display: none;   /* Divider will not appear on mobile */
    }
}
/* =================================================== */
/* ================= MAIN NAVBAR ===================== */
/* =================================================== */

.main-navbar {
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    position: relative;
}

/* Center container */
.nav-container {
    width: 100%;
    display: flex;
    justify-content: center;   /* Center menu */
    align-items: center;
    position: relative;
}

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

.nav-links {
    display: flex;
    list-style: none;
    gap: 65px;                 /* Space between menu items */
    align-items: center;
}

.nav-links li {
    position: relative;        /* Needed for dropdown positioning */
}

/* Base link style */
.nav-links li a {
    position: relative;        /* Needed for underline */
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: #4c9843;            /* NGO primary green */
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* Color change on hover */
.nav-links li a:hover {
    color: #ff6b00;            /* NGO orange */
}

/* ================= NAVBAR ACTIVE LINK ================= */

.nav-links a.active{
     color:#ffffff;
     background:#4c9843;
     padding:10px 19px;
     border-radius:5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     -ms-border-radius:5px;
     -o-border-radius:5px;
}
/* =================================================== */
/* ============ UNDERLINE HOVER EFFECT =============== */
/* =================================================== */

.nav-links li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;                      /* Space below text */
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #4c9843, #ff6b00);
    transition: width 0.3s ease;
}

/* Show underline on hover */
.nav-links li a:hover::after {
    width: 100%;
}

/* Remove underline from special buttons */
.btn-donate::after,
.btn-cart::after {
    display: none;
}

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

.dropdown-menu {
    position: absolute;
    top: 140%;                  /* Gap between navbar and dropdown */
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 240px;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
    z-index: 999;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 22px;
    font-size: 14px;
    color: #444;
    transition: 0.3s;
}

.dropdown-menu li a:hover {
    background: #f7f7f7;
    color: #ff6b00;
}

/* Show dropdown smoothly */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

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

.btn-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #333;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Cart Hover Effect */
.btn-cart:hover {
    background: #4c9843;   /* NGO green */
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 18px rgba(76,152,67,0.3);
}

/* Cart Count Badge */
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #b6806f;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 50%;
}
/* =================================================== */
/* ================= DONATE BUTTON =================== */
/* =================================================== */

.btn-donate {

    display: inline-flex;          /* Keep icon + text aligned in one row */
    align-items: center;           /* Vertical center alignment */
    justify-content: center;       /* Horizontal center alignment */
    gap: 8px;                      /* Space between heart icon and text */

    height: 42px;                  /* Same height as cart button */
    min-width: 120px;              /* Ensures button doesn’t look compressed */
    padding: 0 20px;               /* Left-right spacing for better width balance */

    border-radius: 10px;           /* Rounded corners (corporate style) */
    background: #f5f5f5;           /* Default background color */
    color: #ffffff;                /* Text color */

    font-size: 14px;               /* Font size */
    font-weight: 600;              /* Slightly bold for emphasis */

    transition: all 0.3s ease;     /* Smooth animation for hover effect */
    text-decoration: none;         /* Remove underline */
}

/* Remove default navbar underline animation */
.btn-donate::after {
    display: none;
}

/* ================= HOVER EFFECT ================= */

.btn-donate:hover {

    background: #4c9843;           /* Change background on hover (NGO green) */
    transform: translateY(-2px);   /* Slight lift effect */
}

/* ================= CLICK / ACTIVE EFFECT ================= */

.btn-donate:active {
    transform: translateY(0);      /* Press-down feel when clicked */
}
/* =================================================== */
/* ================= HAMBURGER ======================= */
/* =================================================== */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    right: 20px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 3px;
}

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

@media (max-width: 992px) {

   .nav-container {
    justify-content: space-between;
    padding: 0 20px;
}

    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: #fff;
        padding: 30px 0;
        display: none;
        gap: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }

    .nav-links.active {
        display: flex;
    }

    /* Make dropdown stacked in mobile */
    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding-top: 10px;
        display: none;
        width: 100%;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .hamburger {
        display: flex;
    }
}
/* ================================= */
/* ABOUT SANSTHA SECTION */
/* ================================= */

.about-sanstha{
    padding:100px 0;
    background:#ffffff;
}

/* Layout */

.about-wrapper{

    display:flex;

    align-items:center;

    gap:60px;

}

/* Description */

.about-description{

    flex:1;

}

.about-description h2{

    font-size:38px;

    color:#f26522;

    margin-bottom:25px;

}

.about-description p{

    font-size:17px;

    line-height:1.9;

    color:#555;

    margin-bottom:18px;

}

/* Image */

.about-image{

    flex:1;

    text-align:center;

}

.about-image img{

    width:100%;

    max-width:420px;

    height:320px;

    object-fit:cover;

    border-radius:12px;

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

    transition:all 0.4s ease;

}

/* Hover Effect */

.about-image img:hover{

    transform:scale(1.05);

    box-shadow:0 20px 40px rgba(0,0,0,0.25);

}

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

@media(max-width:768px){

.about-wrapper{

    flex-direction:column;

    text-align:center;

}

.about-description h2{

    font-size:30px;

}

.about-image img{

    height:260px;

}

}
/* ================================= */
/* FOUNDER SECTION PREMIUM */
/* ================================= */

.founder-section{
    padding:100px 0;
    background:linear-gradient(135deg,#fafafa,#f3f7f2);
}

/* Layout */

.founder-container{
    display:flex;
    align-items:center;
    gap:70px;

    background:#ffffff;

    padding:50px;

    border-radius:18px;

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

    transition:all 0.4s ease;
}

/* Floating card hover */

.founder-container:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 80px rgba(0,0,0,0.12);

}


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

.founder-image{
    flex:1;
    max-width:360px;

    perspective:1200px;
}

.founder-image img{

    width:100%;
    height:540px;

    object-fit:cover;

    border-radius:18px;

    transform:rotateY(-6deg) rotateX(3deg);

    box-shadow:
        0 30px 60px rgba(0,0,0,0.25),
        0 15px 25px rgba(0,0,0,0.15);

    transition:all 0.5s ease;

}

/* Hover 3D */

.founder-image img:hover{

    transform:rotateY(0deg) rotateX(0deg) scale(1.05);

    box-shadow:
        0 40px 80px rgba(0,0,0,0.35),
        0 20px 40px rgba(0,0,0,0.2);

}


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

.founder-content{
    flex:1.2;
}

.founder-content h2{

    font-size:34px;

    color:#f26522;

    margin-bottom:10px;

    font-weight:700;
}

.founder-content h4{

    font-size:16px;

    color:#4c9843;

    margin-bottom:20px;

    font-weight:600;
}

.founder-content p{

    font-size:16px;

    line-height:1.8;

    color:#555;

    margin-bottom:15px;
}

/* Hidden content */

.more-text{
    display:none;
}


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

.read-btn{

    padding:10px 22px;

    background:#4c9843;

    color:#fff;

    border:none;

    border-radius:25px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all 0.3s ease;
}

.read-btn:hover{

    background:#f26522;

    transform:translateY(-2px);

}


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

@media(max-width:768px){

.founder-container{

    flex-direction:column;

    text-align:center;

    padding:35px;

}

/* Description first */

.founder-content{
    order:1;
}

/* Image below */

.founder-image{
    order:2;
    margin-top:25px;
}

.founder-image img{
    height:380px;
}

}
/* ================================= */
/* SDG SECTION - MODERN DESIGN */
/* ================================= */

.sdg-section{
    padding:90px 20px;
    background:linear-gradient(135deg,#f7f9fb,#eef2f7);
}

.sdg-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:60px;
}

/* LEFT TITLE */

.sdg-left{
    flex:1;
}

.sdg-left h2{
    font-size:42px;
    font-weight:700;
    line-height:1.2;
    color:#222;
}

/* SLIDER */

.sdg-slider{
    flex:2;
    position:relative;
    overflow:hidden;
}

/* TRACK */

.sdg-track{
    display:flex;
    gap:25px;
    transition:transform 0.5s ease;
}

/* CARD */

.sdg-card{
    min-width:200px;
    height:200px;
    position:relative;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
    transition:all 0.4s ease;
}

/* IMAGE */

.sdg-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
}

/* OVERLAY */

.sdg-overlay{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color:#fff;
}

.sdg-overlay h3{
    font-size:16px;
    font-weight:600;
}

/* HOVER EFFECT */

.sdg-card:hover{
    transform:translateY(-8px) scale(1.05);
}

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

/* BUTTONS */

.sdg-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#000;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    z-index:2;
    opacity:0.7;
    transition:0.3s;
}

.sdg-btn:hover{
    opacity:1;
    background:#f26522;
}

.prev{
    left:-15px;
}

.next{
    right:-15px;
}


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

@media(max-width:992px){

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

    .sdg-left h2{
        font-size:34px;
    }

    .sdg-slider{
        width:100%;
    }
}


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

@media(max-width:600px){

    .sdg-section{
        padding:60px 15px;
    }

    .sdg-left h2{
        font-size:26px;
    }

    .sdg-track{
        gap:15px;
    }

    .sdg-card{
        min-width:140px;
        height:140px;
    }

    .sdg-overlay h3{
        font-size:13px;
    }

    .sdg-btn{
        display:none;
    }

    .sdg-slider{
        overflow-x:auto;
        scroll-behavior:smooth;
    }

    .sdg-slider::-webkit-scrollbar{
        display:none;
    }
}
/* ================================= */
/* PROGRAMS SECTION */
/* ================================= */

.programs-section{

padding:100px 0;

background:#ffffff;

}

/* Container */

.programs-container{

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

align-items:center;

}

/* TITLE CARD */

.program-title-card{

background:#f7f7f7;

padding:50px;

border-radius:12px;

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

}

.program-title-card h2{

font-size:34px;

margin-bottom:25px;

color:#333;

}

.program-btn{

display:inline-block;

padding:12px 25px;

background:#4c9843;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

.program-btn:hover{

background:#f26522;

}

/* PROGRAM CARD */

.program-card{

text-align:center;

}

.program-card a{

text-decoration:none;

color:inherit;

}

/* IMAGE */

.program-img{

width:180px;

height:180px;

margin:auto;

border:1px solid #ddd;

display:flex;

align-items:center;

justify-content:center;

border-radius:8px;

background:#fff;

transition:0.4s;

}

.program-img img{

width:70%;

}

/* Hover */

.program-card:hover .program-img{

transform:translateY(-8px);

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

}

/* Title */

.program-card h3{

font-size:16px;

margin-top:15px;

color:#2d6a4f;

}

/* Text */

.program-card p{

font-size:14px;

color:#666;

margin-top:5px;

}

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

@media(max-width:992px){

.programs-container{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.programs-container{

grid-template-columns:1fr;

}

.program-title-card{

text-align:center;

}

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

.featured-section{

padding:80px 20px;

background:#ffffff;

text-align:center;

}

/* Title */

.featured-title{

font-size:36px;

margin-bottom:50px;

color:#f26522;

font-weight:700;

}

/* Slider container */

.logo-slider{

overflow:hidden;

position:relative;

width:100%;

}

/* Logo track */

.logo-track{

display:flex;

align-items:center;

gap:80px;

animation:scrollLogos 25s linear infinite;

}

/* Each logo */

.logo-item{

min-width:150px;

display:flex;

align-items:center;

justify-content:center;

}

/* Logo image */

.logo-item img{

max-width:120px;

height:auto;

opacity:0.85;

transition:0.3s ease;

}

/* Hover effect (desktop) */

.logo-item img:hover{

opacity:1;

transform:scale(1.1);

}

/* Scrolling animation */

@keyframes scrollLogos{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* Pause slider on hover */

.logo-slider:hover .logo-track{

animation-play-state:paused;

}


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

@media(max-width:992px){

.featured-title{

font-size:30px;

}

.logo-track{

gap:55px;

}

.logo-item{

min-width:120px;

}

.logo-item img{

max-width:95px;

}

}


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

@media(max-width:600px){

.featured-section{

padding:60px 15px;

}

/* Title smaller */

.featured-title{

font-size:24px;

margin-bottom:35px;

}

/* Reduce gap */

.logo-track{

gap:35px;

animation-duration:18s; /* smoother on mobile */

}

/* Smaller logos */

.logo-item{

min-width:85px;

}

.logo-item img{

max-width:65px;

opacity:0.9;

}

/* Disable hover zoom on mobile */

.logo-item img:hover{

transform:none;

}

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

.activities-section{

padding:90px 20px;

background:linear-gradient(90deg,#2b2b2b,#3f3f3f);

color:#fff;

}

/* Layout */

.activities-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:60px;

}

/* LEFT SIDE */

.activities-left{

flex:1;

text-align:center;

}

.media-title{

font-size:36px;

color:#ddd;

margin-bottom:30px;

}

/* Button */

.view-more-btn{

display:inline-block;

padding:12px 28px;

background:#4c9843;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

.view-more-btn:hover{

background:#f26522;

}

/* RIGHT SIDE */

.activities-right{

flex:2;

}

.activities-title{

font-size:34px;

margin-bottom:30px;

color:#f26522;

}

/* Activity Card */

.activity-card{

display:flex;

align-items:center;

background:#fff;

color:#333;

margin-bottom:20px;

text-decoration:none;

border-radius:6px;

overflow:hidden;

transition:0.3s;

}

/* Image */

.activity-image{

width:200px;

height:140px;

flex-shrink:0;

}

.activity-image img{

width:100%;

height:100%;

object-fit:cover;

}

/* Text */

.activity-text{

padding:20px;

font-size:16px;

font-weight:600;

line-height:1.4;

}

/* Hover */

.activity-card:hover{

transform:translateY(-6px);

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

}

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

@media(max-width:992px){

.activities-container{

flex-direction:column;

text-align:center;

}

.activities-right{

width:100%;

}

}

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

@media(max-width:600px){

.activities-title{

font-size:26px;

}

.media-title{

font-size:26px;

}

/* Stack card */

.activity-card{

flex-direction:column;

text-align:center;

}

.activity-image{

width:100%;

height:200px;

}

.activity-text{

padding:15px;

font-size:15px;

}

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

.media-section{

padding:90px 20px;

background:#f9f9f9;

}

.media-container{

max-width:1200px;

margin:auto;

text-align:center;

}

/* Title */

.media-title{

font-size:36px;

color:#444;

margin-bottom:50px;

font-weight:700;

}

/* Grid */

.media-grid{

display:grid;

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

gap:30px;

}

/* Card */

.media-card{

background:#fff;

border-radius:8px;

overflow:hidden;

text-decoration:none;

color:#333;

transition:0.3s;

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

}

/* Image */

.media-img{

width:100%;

height:220px;

overflow:hidden;

}

.media-img img{

width:100%;

height:100%;

object-fit:cover;

transition:0.4s;

}

/* Hover */

.media-card:hover img{

transform:scale(1.08);

}

.media-card:hover{

transform:translateY(-5px);

box-shadow:0 18px 40px rgba(0,0,0,0.15);

}

/* Text */

.media-text{

padding:20px;

font-size:15px;

font-weight:500;

line-height:1.5;

}

/* Button */

.media-btn-wrap{

margin-top:40px;

}

.media-btn{

display:inline-block;

padding:12px 30px;

background:#4c9843;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

.media-btn:hover{

background:#f26522;

}


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

@media(max-width:992px){

.media-grid{

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

}

}


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

@media(max-width:600px){

.media-title{

font-size:26px;

}

.media-grid{

grid-template-columns:1fr;

gap:25px;

}

.media-img{

height:200px;

}

.media-text{

font-size:14px;

padding:15px;

}

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

.footer{

background:#1e1e1e;

color:#ccc;

padding-top:70px;

}

/* Container */

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

padding:0 20px 50px;

}

/* Logo */

.footer-logo{

width:150px;

margin-bottom:20px;

}

/* Text */

.footer-col p{

font-size:14px;

line-height:1.6;

}

/* Headings */

.footer-col h3{

color:#fff;

margin-bottom:20px;

font-size:18px;

}

/* Links */

.footer-col ul{

list-style:none;

padding:0;

}

.footer-col ul li{

margin-bottom:10px;

}

.footer-col ul li a{

text-decoration:none;

color:#ccc;

transition:0.3s;

}

.footer-col ul li a:hover{

color:#f26522;

}

/* Social Icons */

.footer-social{

margin-top:15px;

}

.footer-social a{

display:inline-flex;

align-items:center;

justify-content:center;

width:35px;

height:35px;

background:#333;

color:#fff;

margin-right:10px;

border-radius:50%;

transition:0.3s;

}

.footer-social a:hover{

background:#f26522;

}

/* Contact layout fix */

.footer-contact{

display:flex;

align-items:flex-start;

gap:10px;

font-size:14px;

margin-bottom:12px;

}

.footer-contact i{

color:#f26522;

min-width:18px;

margin-top:4px;

}

.footer-contact span{

word-break:break-word;

}

.footer-contact a{

color:#ccc;

text-decoration:none;

}

.footer-contact a:hover{

color:#f26522;

}

/* Bottom footer */

.footer-bottom{

background:#111;

text-align:center;

padding:15px;

font-size:14px;

border-top:1px solid #333;

}
/* ================================= */
/* FOOTER BOTTOM */
/* ================================= */

.footer-bottom{

background:#050d12;

color:#fff;

text-align:center;

padding:18px 10px;

font-size:14px;

}

/* Developer Text */

.dev-text{

margin-left:18px;

color:#fff;

font-weight:500;

}

/* Link */

.dev-text a{

color:#e4ee27;

text-decoration:none;

font-weight:700;

transition:0.3s;

}

/* Hover Effect */

.dev-text a:hover{

color:#f4e14f;

text-decoration:underline;

}

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

@media(max-width:992px){

.footer-container{

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

}

}


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

@media(max-width:600px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-contact{

justify-content:center;

}

.footer-social{

display:flex;

justify-content:center;

}

}

/* ===================================================== */
/* ================= ABOUT.HTML PAGE CSS ================ */
/* File : about.html                                     */
/* ===================================================== */


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

.about-section{

padding:90px 20px;

background:#f9f9f9;

}

.about-container{

max-width:1200px;

margin:auto;

text-align:center;

}


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

.about-heading{

font-size:42px;

font-weight:700;

color:#333;

margin-bottom:50px;

line-height:1.3;

}


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

.about-image{

width:100%;

margin-bottom:40px;

}

.about-image img{

width:100%;

height:500px;

object-fit:cover;

border-radius:10px;

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

transition:0.4s;

}

/* Image Hover Effect */

.about-image img:hover{

transform:scale(1.03);

}


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

.about-description{

max-width:850px;

margin:auto;

}

.about-description p{

font-size:17px;

line-height:1.8;

color:#555;

margin-bottom:20px;

}


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

.about-btn{

display:inline-block;

margin-top:10px;

padding:14px 30px;

background:#4c9843;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

/* Button Hover */

.about-btn:hover{

background:#f26522;

transform:translateY(-2px);

}


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

@media(max-width:768px){

.about-heading{

font-size:28px;

}

.about-image img{

height:300px;

}

.about-description p{

font-size:15px;

}

}

/* ===================================================== */
/* ============ ABOUT PAGE VISION / MISSION CARDS ======= */
/* ===================================================== */

.vision-section{

padding:100px 20px;

background:#ffffff;

}

.vision-container{

max-width:1200px;

margin:auto;

text-align:center;

}

/* Heading */

.vision-heading{

font-size:36px;

margin-bottom:60px;

color:#333;

font-weight:700;

}

/* Grid */

.vision-grid{

display:grid;

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

gap:30px;

}


/* Card */

.vision-card{

background:#fff;

padding:40px 25px;

border-radius:10px;

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

transition:0.4s;

position:relative;

overflow:hidden;

}

/* Hover effect */

.vision-card:hover{

transform:translateY(-10px);

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

}


/* Icon */

.vision-icon{

font-size:45px;

color:#4c9843;

margin-bottom:20px;

transition:0.3s;

}

/* Icon hover */

.vision-card:hover .vision-icon{

transform:scale(1.2);

color:#f26522;

}

/* Title */

.vision-card h3{

font-size:20px;

margin-bottom:15px;

color:#333;

}

/* Text */

.vision-card p{

font-size:15px;

line-height:1.7;

color:#666;

}

/* Decorative line */

.vision-card::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:0;

height:4px;

background:#4c9843;

transition:0.4s;

}

.vision-card:hover::after{

width:100%;

}


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

@media(max-width:992px){

.vision-grid{

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

}

}

@media(max-width:600px){

.vision-grid{

grid-template-columns:1fr;

}

.vision-heading{

font-size:28px;

}

}
/* ===================================================== */
/* =============== ABOUT PAGE FOUNDER SECTION =========== */
/* ===================================================== */

.founder-section{

padding:100px 20px;

background:#ffffff;

}

.founder-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:70px;

}

/* LEFT CONTENT */

.founder-content{

flex:1;

}

.founder-content h2{

font-size:42px;

margin-bottom:25px;

color:#333;

}

.founder-content h2 span{

color:#f26522;

}

.founder-content p{

font-size:16px;

line-height:1.8;

color:#555;

margin-bottom:20px;

}

/* BUTTON */

.founder-btn{

display:inline-block;

margin-top:10px;

padding:12px 28px;

background:#4c9843;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

.founder-btn:hover{

background:#f26522;

transform:translateY(-2px);

}


/* RIGHT IMAGE */

.founder-image{

flex:1;

}

.founder-image img{

width:100%;

height:420px;

object-fit:cover;

border-radius:12px;

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

transition:0.4s;

}

/* IMAGE HOVER */

.founder-image img:hover{

transform:scale(1.05);

}


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

@media(max-width:768px){

.founder-container{

flex-direction:column;

text-align:center;

}

.founder-image img{

height:300px;

margin-top:30px;

}

.founder-content h2{

font-size:30px;

}

}
/* ===================================================== */
/* ================= TEAM SECTION CSS =================== */
/* ===================================================== */

.team-section{
padding:100px 20px;
background:#f9f9f9;
}

.team-container{
max-width:1200px;
margin:auto;
text-align:center;
}

/* Title */

.team-title{
font-size:36px;
margin-bottom:60px;
color:#333;
}

/* Grid */

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

/* Card */

.team-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;
position:relative;
}

.team-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

/* Image */

.team-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
}

/* Name */

.team-card h3{
font-size:20px;
margin-bottom:5px;
}

/* Post */

.team-card h4{
font-size:14px;
color:#4c9843;
margin-bottom:10px;
}

/* Profile icon */

.profile-link{
display:inline-block;
margin-bottom:15px;
color:#0077b5;
font-size:18px;
}

/* Text */

.team-card p{
font-size:14px;
line-height:1.7;
color:#555;
}

/* Hidden text */

.more-text{
display:none;
}

/* Button */

.read-btn{
margin-top:10px;
padding:8px 18px;
border:none;
background:#4c9843;
color:#fff;
border-radius:5px;
cursor:pointer;
}

.read-btn:hover{
background:#f26522;
}

/* Mobile */

@media(max-width:900px){
.team-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.team-grid{
grid-template-columns:1fr;
}
}
/* ===================================================== */
/* ============ GOALS & LEGAL STATUS SECTION =========== */
/* ===================================================== */

.legal-goals-section{

padding:100px 20px;

background:#f7f7f7;

}

.legal-goals-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:flex-start;

}


/* LEFT SIDE */

.goals-box{

background:#fff;

padding:40px;

border-radius:10px;

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

}

.goals-box h2{

margin-bottom:25px;

color:#333;

}

.goals-box ul{

list-style:none;

padding:0;

}

.goals-box li{

margin-bottom:15px;

padding-left:25px;

position:relative;

font-size:15px;

}

/* custom bullet */

.goals-box li::before{

content:"";

width:8px;

height:8px;

background:#f26522;

border-radius:50%;

position:absolute;

left:0;

top:8px;

}


/* RIGHT SIDE */

.documents-box{

background:#fff;

padding:40px;

border-radius:10px;

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

}

.documents-box h2{

margin-bottom:25px;

}


/* document card */

.doc-card{

display:flex;

gap:15px;

margin-bottom:20px;

align-items:center;

padding:12px;

border-radius:8px;

transition:0.3s;

}

.doc-card:hover{

background:#f5f5f5;

}


/* preview */

.doc-preview img{

width:70px;

height:90px;

object-fit:cover;

border-radius:4px;

}


/* info */

.doc-info h4{

margin-bottom:5px;

font-size:16px;

}

.doc-info p{

font-size:13px;

color:#666;

margin-bottom:8px;

}


/* button */

.doc-btn{

display:inline-block;

padding:6px 12px;

background:#4c9843;

color:#fff;

text-decoration:none;

font-size:12px;

border-radius:4px;

}

.doc-btn:hover{

background:#f26522;

}


/* MOBILE */

@media(max-width:768px){

.legal-goals-container{

grid-template-columns:1fr;

}

.doc-card{

flex-direction:row;

}

}

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

.impact-section{

padding:100px 20px;

background:#f9f9f9;

}

.impact-container{

max-width:1200px;

margin:auto;

}

.impact-title{

text-align:center;

font-size:40px;

margin-bottom:60px;

color:#333;

}

/* ROW */

.impact-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-bottom:80px;

}

.impact-row.reverse{

direction:rtl;

}

.impact-row.reverse .impact-content{

direction:ltr;

}

/* IMAGE */

.impact-image{

position:relative;

}

.impact-slider{

position:relative;

width:100%;

height:420px;

overflow:hidden;

border-radius:10px;

}

.impact-slider img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

opacity:0;

transition:opacity 0.6s;

}

.impact-slider img.active{

opacity:1;

}

/* CONTENT */

.impact-category{

color:#f26522;

margin-bottom:25px;

font-size:22px;

letter-spacing:1px;

}

/* STATS */

.impact-stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.impact-box{

background:#fff;

padding:20px;

border-radius:8px;

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

transition:0.3s;

}

.impact-box:hover{

transform:translateY(-6px);

}

.impact-box h4{

font-size:28px;

color:#4c9843;

margin-bottom:5px;

}

.impact-box p{

font-size:14px;

color:#666;

}


/* MOBILE */

@media(max-width:768px){

.impact-row{

grid-template-columns:1fr;

gap:30px;

}

.impact-slider{

height:300px;

}

.impact-stats{

grid-template-columns:1fr;

}

}

/* ===================================================== */
/* GALLERY PAGE STYLES */
/* File : gallery.html */
/* ===================================================== */

.gallery-section{
padding:100px 20px;
background:#f7f7f7;
}

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

/* Title */

.gallery-title{
text-align:center;
font-size:40px;
color:#333;
margin-bottom:15px;
}

.gallery-subtitle{
text-align:center;
color:#777;
margin-bottom:60px;
font-size:16px;
}

/* Grid Layout */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* Image Card */

.gallery-card{
width:100%;
height:240px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:0.4s ease;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* Hover Animation */

.gallery-card:hover{
transform:scale(1.08);
box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

/* Bottom Button */

.gallery-btn-wrapper{
text-align:center;
margin-top:70px;
}

.gallery-btn{
display:inline-block;
padding:14px 30px;
background:#4c9843;
color:#fff;
text-decoration:none;
border-radius:6px;
font-weight:600;
transition:0.3s;
}

.gallery-btn:hover{
background:#f26522;
transform:translateY(-3px);
}

/* Mobile Responsive */

@media(max-width:768px){

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

.gallery-card{
height:200px;
}

.gallery-subtitle{
font-size:14px;
}

.gallery-btn{
padding:12px 22px;
font-size:14px;
}

}

/* ===================================================== */
/* CONTACT PAGE STYLES */
/* File : contact.html */
/* ===================================================== */


/* GLOBAL */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f9f9f9;
color:#333;
}


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

.contact-hero{

background:linear-gradient(135deg,#dfcb2d,#6cc060);

padding:120px 20px;

text-align:center;

color:white;

}

.contact-hero h1{

font-size:48px;

margin-bottom:15px;

}

.contact-hero p{

font-size:18px;

max-width:700px;

margin:auto;

opacity:0.9;

}


/* ===================================================== */
/* CONTACT INFO CARDS */
/* ===================================================== */

.contact-info-section{

padding:80px 20px;

background:#ffffff;

}

.contact-info-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.contact-card{

background:#fff;

padding:40px 30px;

text-align:center;

border-radius:12px;

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

transition:0.3s;

}

.contact-card i{

font-size:40px;

color:#4c9843;

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:10px;

font-size:20px;

}

.contact-card p{

color:#666;

}

.contact-card:hover{

transform:translateY(-8px);

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

}


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

.contact-form-section{

padding:100px 20px;

background:#f5f5f5;

}

.contact-form-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}


/* FORM */

.contact-form h2{

font-size:32px;

margin-bottom:30px;

}

.form-group{

margin-bottom:20px;

}

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

width:100%;

padding:14px;

border-radius:6px;

border:1px solid #ddd;

font-size:15px;

transition:0.3s;

}

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

border-color:#4c9843;

outline:none;

}


/* BUTTON */

.contact-btn{

padding:14px 28px;

border:none;

background:#4c9843;

color:white;

font-size:16px;

border-radius:6px;

cursor:pointer;

transition:0.3s;

}

.contact-btn:hover{

background:#f26522;

transform:translateY(-2px);

}


/* FORM IMAGE */

.contact-image img{

width:100%;

border-radius:10px;

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

}


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

.contact-map{

padding:80px 20px;

background:#ffffff;

text-align:center;

}

.contact-map h2{

font-size:32px;

margin-bottom:40px;

}

.map-container{

max-width:1100px;

margin:auto;

border-radius:10px;

overflow:hidden;

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

}


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

@media(max-width:768px){

.contact-hero h1{

font-size:32px;

}

.contact-hero p{

font-size:15px;

}

.contact-form-container{

grid-template-columns:1fr;

gap:40px;

}

.contact-form h2{

text-align:center;

}

.contact-image{

order:-1;

}

.contact-card{

padding:30px;

}

}
/* ===================================================== */
/* DONATE PAGE HERO SECTION CSS */
/* File : donate.html */
/* ===================================================== */


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

.donate-hero{

position:relative;

height:85vh;

background:url("../images/donation\ image.png") center/cover no-repeat;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:#fff;

}

/* Navbar always above hero section */

.main-navbar{

position:relative;

z-index:9999;

}
/* Dark overlay */

.donate-hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(17, 39, 4, 0.55);

}


/* Hero Content */

.donate-hero-content{

position:relative;

max-width:700px;

padding:20px;

z-index:2;

}


/* Heading */

.donate-hero-content h1{

font-size:52px;

margin-bottom:20px;

font-weight:700;

}


/* Description */

.donate-hero-content p{

font-size:18px;

margin-bottom:30px;

line-height:1.6;

opacity:0.95;

}


/* Donate Button */

.donate-hero-btn{

display:inline-block;

padding:14px 40px;

background:#4c9843;

color:#fff;

font-size:16px;

border-radius:6px;

text-decoration:none;

transition:0.3s;

}


/* Button Hover Effect */

.donate-hero-btn:hover{

background:#f26522;

transform:translateY(-3px);

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

}


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

@media(max-width:768px){

.donate-hero{

height:70vh;

}

.donate-hero-content h1{

font-size:32px;

}

.donate-hero-content p{

font-size:15px;

}

.donate-hero-btn{

padding:12px 28px;

font-size:14px;

}

}
/* ================================================= */
/* DONATE IMPACT SECTION CSS */
/* File : donate.html */
/* ================================================= */

.donate-impact-section{

width:100%;

background:#ffffff;

padding:0;

}

.donate-impact-container{

display:flex;

min-height:520px;

max-width:1400px;

margin:auto;

}


/* LEFT IMAGE */

.donate-impact-image{

flex:1;

}

.donate-impact-image img{

width:100%;

height:100%;

object-fit:cover;

}


/* RIGHT GREEN PANEL */

.donate-impact-content{

flex:1;

background:linear-gradient(135deg,#70c75ac9,#e1ec10);

display:flex;

align-items:center;

justify-content:center;

color:white;

padding:60px;

}


.donate-impact-inner{

max-width:420px;

}


/* SMALL TEXT */

.scan-text{

font-size:14px;

letter-spacing:1px;

opacity:0.9;

}


/* HEADING */

.donate-impact-inner h2{

font-size:40px;

margin:10px 0 15px;

font-weight:700;

}


/* DESCRIPTION */

.donate-impact-inner p{

font-size:16px;

line-height:1.6;

margin-bottom:30px;

opacity:0.9;

}


/* QR CODE */

.qr-wrapper img{

width:360px;

background:white;

padding:12px;

border-radius:6px;

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

}


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

@media(max-width:768px){

.donate-impact-container{

flex-direction:column;

}

.donate-impact-image{

height:300px;

}

.donate-impact-content{

padding:40px 25px;

text-align:center;

}

.donate-impact-inner h2{

font-size:28px;

}

.qr-wrapper img{

width:230px;

}

}
/* ================================================= */
/* DONATE DETAILS SECTION CSS */
/* File : donate.html */
/* ================================================= */

.donate-details{

padding:100px 20px;

background:#f7f7f7;

}


.donate-details-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

}


/* CARD */

.donate-card{ background:#ffffff; padding:35px;
     border-radius:10px;
      box-shadow:0 12px 30px rgba(0,0,0,0.08); 
     transition:0.35s;
      position:relative;
      -webkit-border-radius:10px; 
     -moz-border-radius:10px;
      -ms-border-radius:10px;
      -o-border-radius:10px;
}


/* HOVER */

.donate-card:hover{

transform:translateY(-8px);

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

}


/* ICON */

.donate-icon{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

background:#4c9843;

color:white;

border-radius:50%;

margin-bottom:18px;

}


/* TITLE */

.donate-card h3{

font-size:20px;

margin-bottom:12px;

color:#222;

}


/* TEXT */

.donate-card p{

font-size:14px;

line-height:1.6;

color:#555;

margin-bottom:6px;

}


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

@media(max-width:768px){

.donate-details{

padding:70px 15px;

}

.donate-card{

padding:25px;

}

.donate-card h3{

font-size:18px;

}

}
/* ================================================= */
/* DONATION GUIDELINES TIMELINE */
/* donate.html page */
/* ================================================= */

.donation-guidelines{

padding:110px 20px;

background:#f7f7f7;

}


.guidelines-container{

max-width:1000px;

margin:auto;

}


.guidelines-title{

text-align:center;

font-size:38px;

font-weight:700;

margin-bottom:70px;

color:#333;

}


/* TIMELINE */

.guidelines-timeline{

position:relative;

padding-left:40px;

}


/* CENTER LINE */

.guidelines-timeline:before{

content:"";

position:absolute;

left:20px;

top:0;

width:3px;

height:100%;

background:#4c9843;

}


/* ITEM */

.guideline-item{

position:relative;

margin-bottom:45px;

padding-left:60px;

}


/* ICON */

.guideline-icon{

position:absolute;

left:-6px;

top:0;

width:40px;

height:40px;

background:#4c9843;

color:#fff;

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

}


/* CONTENT CARD */

.guideline-content{

background:white;

padding:25px 30px;

border-radius:10px;

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

transition:0.3s;

}


.guideline-content:hover{

transform:translateX(6px);

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

}


/* TITLE */

.guideline-content h3{

font-size:20px;

margin-bottom:10px;

color:#222;

}


/* TEXT */

.guideline-content p{

font-size:14px;

line-height:1.7;

color:#555;

}


/* MOBILE */

@media(max-width:768px){

.guidelines-title{

font-size:28px;

}

.guideline-content{

padding:20px;

}

}