/*==============================
    GLOBAL & RESET
    ==============================*/
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    body{
        font-family: "Plus Jakarta Sans", sans-serif;
        overflow-x: hidden;
    }

    /*==============================
    HEADER & NAVIGATION
    ==============================*/
    .header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:999;
        transition:.4s;
        background: #00000045;
    }

    .header.scrolled {
        background:#fff;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }

    .header .container{
        width:min(1320px,92%);
        margin:auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .container{
        width:min(1320px,92%);
        margin:auto;
    }

    .logo{
        display:flex;
        align-items:center;
        text-decoration:none;
    }

    .logo img{
        height:130px;
        transition:.4s;
    }

    .header.scrolled .logo img{
        height:130px;
    }

    .nav ul{
        display:flex;
        list-style:none;
        gap:40px;
    }

    .nav a{
        position:relative;
        text-decoration:none;
        color:#fff;
        font-size:16px;
        font-weight:500;
        transition:.35s;
    }

    .header.scrolled .nav a{
        color:#222;
    }

    .nav a::after{
        content:"";
        position:absolute;
        left:0;
        bottom:-8px;
        width:0;
        height:2px;
        background:#5A9A22;
        transition:.35s;
    }

    .nav a:hover{
        color:#5A9A22;
    }

    .nav a:hover::after{
        width:100%;
    }

    /*==============================
    BUTTONS
    ==============================*/
    .header-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:14px 30px;
        border-radius:50px;
        text-decoration:none;
        background:#5A9A22;
        color:#fff;
        font-weight:600;
        transition:.35s;
    }

    .header-btn:hover{
        background:#E3A91A;
    }

    .menu-btn{
        width:30px;
        height:24px;
        display:none;
        flex-direction:column;
        justify-content:space-between;
        border:none;
        background:none;
        cursor:pointer;
        z-index: 1001;
    }

    .menu-btn span{
        width: 100%;
        height:3px;
        background:#fff;
        transition:.3s;
        border-radius: 2px;
    }

    .header.scrolled .menu-btn span{
        background:#222;
    }

    /* Mobile active state for menu burger */
    .menu-btn.open span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
        background: #222;
    }
    .menu-btn.open span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
        background: #222;
    }

    /*==========================================
    Hero Section & Slider Layout
    ==========================================*/
    .hero-slider{
        position:relative;
        width:100%;
        height:100vh;
        min-height:900px;
        overflow:hidden;
        background:#07160d;
    }

    .hero-progress{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:4px;
        z-index:100;
        background:rgba(255,255,255,.08);
    }

    .hero-progress span{
        display:block;
        width:0;
        height:100%;
        background:linear-gradient(90deg,#84c441,#d9ab32);
    }

    .hero-track{
        position:relative;
        width:100%;
        height:100%;
    }

    .hero-slide{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        opacity:0;
        visibility:hidden;
        transition:opacity .8s ease;
        overflow:hidden;
    }

    .hero-slide.active{
        opacity:1;
        visibility:visible;
        z-index:2;
    }

    .hero-bg{
        position:absolute;
        inset:0;
        overflow:hidden;
        z-index:1;
    }

    .hero-bg img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .hero-overlay{
        position:absolute;
        inset:0;
        z-index:2;
        background: linear-gradient(90deg, rgba(4,18,9,.92) 0%, rgba(5,25,12,.82) 22%, rgba(7,28,14,.55) 45%, rgba(0,0,0,.20) 75%, rgba(0,0,0,.08) 100%);
    }

    .hero-slider .container{
        position:relative;
        z-index:5;
        width:min(1320px,92%);
        margin:auto;
        height:100%;
    }

    .hero-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:100%;
        position:relative;
    }

    .hero-content{
        width:58%;
        max-width:700px;
        position:relative;
        z-index:10;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        color:#fff;
    }

    .hero-inner::after{
        content:"";
        width:340px;
        flex-shrink:0;
    }

    /*=========================================================
      HERO TYPOGRAPHY & CONTROLS
    =========================================================*/
    .hero-tag{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:14px 28px;
        border-radius:50px;
        border:1px solid rgba(255,255,255,.18);
        background:rgba(255,255,255,.08);
        backdrop-filter:blur(18px);
        color:#fff;
        font-size:13px;
        font-weight:600;
        letter-spacing:2px;
        text-transform:uppercase;
        margin-bottom:40px;
    }

    .hero-content h1{
        font-size:60px;
        font-weight:700;
        line-height:1.02;
        color:#fff;
        margin:0;
        letter-spacing:-2px;
    }

    .hero-content h1 span{
        display:block;
        color:#8BC53F;
        margin-top:10px;
    }

    .hero-line{
        width:85px;
        height:3px;
        border-radius:20px;
        background:#8BC53F;
        margin:45px 0;
    }

    .hero-content p{
        max-width:640px;
        font-size:21px;
        line-height:1.9;
        color:rgba(255,255,255,.88);
        margin-bottom:55px;
    }

    .hero-buttons{
        display:flex;
        align-items:center;
        gap:22px;
    }

    .hero-arrow{
        position:absolute;
        width:68px;
        height:68px;
        border:none;
        outline:none;
        border-radius:50%;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:20px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.12);
        backdrop-filter:blur(25px);
        -webkit-backdrop-filter:blur(25px);
        transition:.35s;
        z-index:50;
        top:50%;
        transform:translateY(-50%);
    }

    .hero-arrow:hover{
        background:#84c441;
        box-shadow: 0 15px 35px rgba(132,196,65,.35);
    }

    .hero-prev{ left:35px; }
    .hero-next{ right:35px; }

    .hero-pagination{
        position:absolute;
        left:50%;
        bottom:65px;
        transform:translateX(-50%);
        z-index:50;
        display:flex;
        align-items:center;
        gap:14px;
    }

    .hero-pagination .dot{
        width:12px;
        height:12px;
        border-radius:50px;
        background:rgba(255,255,255,.35);
        cursor:pointer;
        transition:.4s;
    }

    .hero-pagination .dot.active{
        width:42px;
        background:#84c441;
    }

    .hero-counter{
        position:absolute;
        left:50%;
        bottom:120px;
        transform:translateX(-50%);
        z-index:50;
        display:flex;
        gap:8px;
        align-items:center;
        color:#fff;
    }

    .hero-counter .current{ font-size:26px; font-weight:700; color:#84c441; }
    .hero-counter .slash{ opacity:.4; }
    .hero-counter .total{ opacity:.75; }

    .scroll-indicator{
        position:absolute;
        left:50%;
        bottom:18px;
        transform:translateX(-50%);
        z-index:50;
        display:flex;
        flex-direction:column;
        align-items:center;
        color:#fff;
    }

    .mouse{
        width:28px;
        height:48px;
        border-radius:30px;
        border:2px solid rgba(255,255,255,.55);
        display:flex;
        justify-content:center;
        padding-top:8px;
    }

    .mouse span{
        width:4px;
        height:8px;
        border-radius:20px;
        background:#84c441;
        animation:scrollWheel 1.8s infinite;
    }

    .scroll-indicator small{
        margin-top:12px;
        letter-spacing:3px;
        font-size:11px;
        opacity:.75;
    }

    @keyframes scrollWheel{
        0%{ opacity:0; transform:translateY(0); }
        30%{ opacity:1; }
        100%{ opacity:0; transform:translateY(14px); }
    }

    /*=========================================================
      RIGHT STATISTICS PANEL
    =========================================================*/
    .hero-stats{
        position:absolute;
        top:50%;
        right:3%;
        transform:translateY(-50%);
        width:280px;
        padding:20px;
        border-radius:28px;
        background:rgba(255,255,255,.08);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
        border:1px solid rgba(255,255,255,.12);
        box-shadow: 0 30px 80px rgba(0,0,0,.35);
        z-index:30;
        animation: floatStats 5s ease-in-out infinite;
    }

    @keyframes floatStats {
        0%, 100% { transform: translateY(-50%); }
        50% { transform: translateY(-47%); }
    }

    .stat-item{
        display:flex;
        align-items:center;
        gap:18px;
        padding:22px 10px;
        transition:.35s;
        cursor:pointer;
        position:relative;
    }

    .stat-item:hover{ transform:translateX(8px); }
    .divider{ width:100%; height:1px; background:rgba(255,255,255,.10); }

    .stat-icon{
        width:62px;
        height:62px;
        border-radius:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.10);
        flex-shrink:0;
        transition:.4s;
    }

    .stat-icon i{ font-size:22px; color:#8BC53F; }
    .stat-item:hover .stat-icon{ background:#8BC53F; transform:rotate(-8deg); }
    .stat-item:hover .stat-icon i { color:#fff; }
    .stat-item h2{ margin:0; font-size:38px; font-weight:700; line-height:1; color:#fff; }
    .stat-item span{ display:block; margin-top:6px; font-size:14px; color:rgba(255,255,255,.75); letter-spacing:.5px; }
    .stat-item div:last-child{ flex:1; }
    .stat-item::before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:#8BC53F; opacity:0; transition:.35s; }
    .stat-item:hover::before{ opacity:1; }
.hero-stats-logo{
    padding:30px 25px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-stats-logo img{
    max-width:170px;
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius: 20px;
    /* filter:brightness(0) invert(1);  */
  border: 3px solid #5a9a22;
  border-left: 3px solid #7e3303;
  border-top: 3px solid #7e3303;


}
    /*=========================================================
      COMMON BUTTONS
    =========================================================*/
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:15px;
        text-decoration:none;
        font-size:17px;
        font-weight:600;
        border-radius:60px;
        transition:.35s ease;
        position:relative;
        overflow:hidden;
        white-space:nowrap;
    }

    .btn-primary{
        min-width:220px;
        height:72px;
        background:#79A93A;
        color:#fff;
        box-shadow: 0 20px 40px rgba(121,169,58,.25);
    }

    .btn-primary:hover{
        background:#8BC53F;
        transform:translateY(-5px);
        box-shadow: 0 25px 45 rgba(121,169,58,.35);
    }

    .btn-outline{
        min-width:250px;
        height:72px;
        padding:0 30px;
        border:1px solid rgba(255,255,255,.35);
        color:#fff;
        background:rgba(255,255,255,.05);
        backdrop-filter:blur(15px);
    }

    .btn-outline:hover{ background:#70a133; color:#fff; transform:translateY(-5px); }

    .play-btn{
        width:42px;
        height:42px;
        border-radius:50%;
        border:2px solid rgba(255,255,255,.55);
        display:flex;
        align-items:center;
        justify-content:center;
        transition:.35s;
        flex-shrink:0;
    }

    .play-btn i{ font-size:12px; margin-left:2px; }
    .btn-outline:hover .play-btn{ border-color:#17341E; }

    .btn::before{
        content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-25deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:1s;
    }

    .btn:hover::before{ left:150%; }

    /* Animations */
    .hero-slide .hero-tag, .hero-slide h1, .hero-slide .hero-line, .hero-slide p, .hero-slide .hero-buttons{
        opacity:0; transform:translateY(45px);
    }
    .hero-slide.active .hero-tag{ animation:fadeUp .7s .2s forwards; }
    .hero-slide.active h1{ animation:fadeUp .8s .45s forwards; }
    .hero-slide.active .hero-line{ animation:fadeUp .8s .65s forwards; }
    .hero-slide.active p{ animation:fadeUp .8s .85s forwards; }
    .hero-slide.active .hero-buttons{ animation:fadeUp .8s 1.05s forwards; }

    @keyframes fadeUp {
        to { opacity:1; transform:translateY(0); }
    }

    /*==========================================
    SECTION HEADING & TAG COMMON
    ==========================================*/
    .section-heading{
        text-align:center;
        max-width:800px;
        margin:0 auto 70px;
    }

    .section-heading h2{
        font-size:44px;
        color:#173A24;
        line-height:1.25;
        margin-bottom:20px;
    }

    .section-heading p{
        font-size:17px;
        color:#666;
        line-height:1.7;
    }

    .section-tag{
        display:inline-block;
        padding:10px 20px;
        border-radius:30px;
        background:#EDF6E6;
        color:#5B8E23;
        font-size:14px;
        font-weight:600;
        letter-spacing:1px;
        margin-bottom:25px;
        text-transform:uppercase;
    }

    /*==========================================
    WHO WE ARE (ABOUT)
    ==========================================*/
    .about-section{
        padding:120px 0;
        background:#fff;
    }

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

    .about-images{ position:relative; }
    .image-large{ border-radius:28px; overflow:hidden; }
    .image-large img{ width:100%; display:block; }

    .image-small{
        position:absolute; right:-40px; bottom:-40px; width:260px; border-radius:24px;
        overflow:hidden; border:8px solid #fff; box-shadow:0 25px 60px rgba(0,0,0,.15);
    }
    .image-small img{ width:100%; display:block; }

    .experience-box{
        position:absolute; left:-30px; top:60px; background:#5B8E23; color:#fff;
        padding:28px; border-radius:24px; width:180px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.2);
    }

    .experience-box h2{ font-size:52px; margin-bottom:8px; }
    .experience-box span{ font-size:15px; line-height:1.6; }

    .about-content h2{ font-size:44px; line-height:1.2; color:#173A24; margin-bottom:25px; }
    .about-content p{ font-size:17px; color:#666; line-height:1.8; margin-bottom:40px; }
    .about-features{ display:flex; flex-direction:column; gap:25px; margin-bottom:45px; }
    .feature{ display:flex; gap:20px; align-items:flex-start; }

    .feature-icon{
        width:60px; height:60px; border-radius:50%; background:#EDF6E6;
        display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0;
    }

    .feature h4{ font-size:22px; margin-bottom:8px; color:#173A24; }
    .feature p{ margin:0; font-size:16px; line-height:1.8; }
    .about-btn{ display:inline-block; padding:16px 34px; border-radius:50px; background:#5B8E23; color:#fff; text-decoration:none; font-weight:600; transition:.3s; }
    .about-btn:hover{ background:#E3A91A; }

    /*==========================================
    THE PROJECT (TIMELINE)
    ==========================================*/
    .project-section{ padding:120px 0; background:#f9fbF7; }
    .project-timeline{ display:flex; align-items:flex-start; gap:30px; margin-top:60px; position:relative; }
    
    .timeline-card{
        flex:1; background:#fff; padding:45px 35px; border-radius:28px;
        box-shadow:0 15px 40px rgba(0,0,0,.04); border:1px solid #eee; transition:.4s;
    }

    .timeline-card:hover{ transform:translateY(-10px); box-shadow:0 25px 50px rgba(91,142,35,.1); border-color:#BFD8B4; }
    .timeline-number{ font-size:18px; font-weight:700; color:#5B8E23; margin-bottom:20px; background:#EDF6E6; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .timeline-icon{ font-size:44px; margin-bottom:25px; }
    .timeline-card h3{ font-size:24px; color:#173A24; margin-bottom:15px; }
    .timeline-card p{ color:#666; line-height:1.7; font-size:15px; }
    .timeline-line{ width:60px; height:2px; background:#BFD8B4; margin-top:80px; flex-shrink:0; position:relative; }

    /*==========================================
    WHY THIS PROJECT
    ==========================================*/
    .why-project{ display:grid; grid-template-columns:1fr 1fr; background:#112B1B; color:#fff; }
    .why-left{ position:relative; min-height:600px; }
    .why-left img{ width:100%; height:100%; object-fit:cover; display:block; }
    
    .image-badge{
        position:absolute; right:40px; bottom:40px; background:#5B8E23; color:#fff;
        padding:35px; border-radius:28px; max-width:280px; box-shadow:0 20px 50px rgba(0,0,0,.3);
    }
    .image-badge h3{ font-size:44px; margin-bottom:8px; }
    .image-badge span{ font-size:15px; opacity:0.9; line-height:1.4; display:block; }
    
    .why-right{ padding:120px 80px; display:flex; flex-direction:column; justify-content:center; }
    .why-right .section-tag{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); }
    .why-right h2{ font-size:44px; line-height:1.25; margin-bottom:25px; }
    .why-right p{ color:rgba(255,255,255,.75); line-height:1.8; font-size:16px; margin-bottom:45px; }
    .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
    
    .why-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:35px; border-radius:24px; transition:.3s; }
    .why-card:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); transform:translateY(-5px); }
    .why-icon{ font-size:36px; margin-bottom:20px; }
    .why-card h4{ margin-bottom:10px; color:#fff; font-size:20px; }
    .why-card p{ color:rgba(255,255,255,.7); line-height:1.7; font-size:15px; margin:0; }

    /*==========================================
    WHAT WE DO
    ==========================================*/
    .services-section{ padding:120px 0; background:#fff; }
    .services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:35px; margin-top:50px; }
    
    .service-card{ position:relative; overflow:hidden; border-radius:30px; min-height:380px; cursor:pointer; transition:.4s; }
    .service-card.large{ grid-column: span 1; min-height:520px; }
    .service-card img{ width:100%; height:100%; object-fit:cover; transition:.6s; display:block; }
    .service-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,35,18,.95), rgba(12,35,18,.2)); }
    .service-content{ position:absolute; left:40px; right:40px; bottom:40px; color:#fff; z-index:2; }
    
    .service-number{
        width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.15);
        backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center;
        font-size:24px; font-weight:700; margin-bottom:25px;
    }
    .service-card h3{ font-size:28px; margin-bottom:15px; }
    .service-card p{ line-height:1.7; color:rgba(255,255,255,.85); font-size:16px; }
    .service-card:hover img{ transform:scale(1.12); }
    .service-card:hover{ transform:translateY(-12px); }

    /*==========================================
    DIL FRAMEWORK
    ==========================================*/
    .dil-section{ padding:120px 0; background:linear-gradient(135deg,#14361F,#20522D); color:#fff; position:relative; overflow:hidden; }
    .dil-section .section-heading h2, .dil-section .section-heading p{ color:#fff; }
   .dil-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin-bottom:40px;
}
    
   .dil-card{
    width:420px;          /* Same width for all cards */
    min-height:320px;     /* Same height */
    background:#335d3d;
    border-radius:28px;
    padding:40px;
    box-sizing:border-box;
}
    .dil-card:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); transform:translateY(-5px); }
    .dil-icon{ width:64px; height:64px; background:#5B8E23; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:25px; color:#fff; }
    .dil-card h3{ font-size:24px; margin-bottom:15px; line-height:1.3; }
    .dil-card p{ color:rgba(255,255,255,.8); line-height:1.7; font-size:15px; }
    
    .dil-center{ display:flex; justify-content:center; align-items:center; position:relative; }
    .dil-bottom{
    display:flex;
    justify-content:center;
    margin-top:10px;
}

.dil-bottom .dil-card{
    width:420px;          /* Same as top cards */
}
.dil-summary{
    max-width:900px;
    margin:60px auto 0;
    text-align:center;
}

.dil-summary p{
    font-size:1.15rem;
    line-height:2;
    color:rgba(255,255,255,0.85);
    margin:0;
}

.dil-summary strong{
    color:#9ED33A;
    font-weight:600;
}
    .circle{
        width:240px; height:240px; border-radius:50%; background:#5B8E23; border:8px solid rgba(255,255,255,.1);
        display:flex; flex-direction:column; justify-content:center; align-items:center;
        box-shadow:0 30px 60px rgba(0,0,0,.2);
    }
    .circle span{ font-size:48px; font-weight:800; letter-spacing:1px; line-height:1; }
    .circle small{ font-size:14px; opacity:0.8; text-transform:uppercase; margin-top:5px; letter-spacing:1px; }
    
    .leadership-card{
        background:rgba(255,255,255,.08); backdrop-filter:blur(15px); border:1px solid rgba(255,255,255,.1);
        padding:40px; border-radius:28px; max-width:800px; margin:0 auto; display:flex; align-items:center; gap:35px;
    }
    .leadership-card .dil-icon { flex-shrink:0; margin-bottom:0; background:#E3A91A; }
    .leadership-content h3{ font-size:24px; margin-bottom:10px; }
    .leadership-content p{ color:rgba(255,255,255,.8); line-height:1.7; font-size:15px; margin:0; }

    /*==========================================
    PHILOSOPHY
    ==========================================*/
    .philosophy-section{ padding:120px 0; background:#fff; }
    .philosophy-wrapper{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; }
    .philosophy-content h2{ font-size:44px; color:#173A24; margin-bottom:25px; line-height:1.2; }
    .playfair{ font-family:'Playfair Display', serif; font-size:26px; font-style:italic; color:#5B8E23; line-height:1.5; margin-bottom:35px; position:relative; }
    .philosophy-values{ display:flex; flex-direction:column; gap:18px; }
    .value-item{ display:flex; gap:15px; align-items:center; }
    .value-item span{ width:24px; height:24px; background:#EDF6E6; color:#5B8E23; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; flex-shrink:0; }
    .value-item p{ font-size:16px; color:#333; font-weight:500; margin:0; }
    
    .philosophy-image{ position:relative; }
    .philosophy-image img{ width:100%; border-radius:28px; display:block; }
    .quote-box{
        position:absolute; left:-50px; bottom:40px; background:#173A24; color:#fff;
        padding:40px; border-radius:24px; max-width:380px; box-shadow:0 25px 60px rgba(0,0,0,.2);
    }
    .quote-box h3{ font-size:22px; margin-bottom:12px; line-height:1.4; }
    .quote-box p{ color:rgba(255,255,255,.75); font-size:15px; line-height:1.6; margin:0; }
    .philosophy-accordion{
    margin-top:40px;
}

.accordion-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    margin-bottom:16px;
    overflow:hidden;
    transition:.35s;
}

.accordion-item.active{
    border-color:#8cc63f;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.accordion-header{
    width:100%;
    background:none;
    border:none;
    color:#173a24;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 28px;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
}

.accordion-header span{
    text-align:left;
}

.accordion-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border:1px solid #8cc63f;
    border-radius:50px;
    color:#8cc63f;
    font-size:14px;
    font-weight:600;
    transition:.3s;
    white-space:nowrap;
}

.accordion-item.active .accordion-btn{
    background:#8cc63f;
    color:#fff;
}

.accordion-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease;
}

.accordion-body p{
    padding:0 28px 24px;
    margin:0;
    color:#000;
    line-height:1.8;
}

.accordion-item.active .accordion-body{
    max-height:350px;
}

.accordion-item.active .accordion-header i{
    transform:rotate(45deg);
}

    /*==========================================
    THE 5As Framework
    ==========================================*/
    .fiveas-section{ padding:120px 0; background:#f9fbF7; overflow:hidden; }
    .fiveas-wrapper{ position:relative; height:850px; max-width:850px; margin:60px auto 0; }
    
    .center-circle{
        width:220px; height:220px; border-radius:50%; background:#5B8E23;
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        display:flex; flex-direction:column; justify-content:center; align-items:center;
        color:#fff; box-shadow:0 25px 70px rgba(91,142,35,.35); z-index:2;
    }
    .center-circle h2{ font-size:64px; margin-bottom:10px; }
    .center-circle p{ text-align:center; line-height:1.5; font-weight:600; }
    
    .orbit{ position:absolute; width:250px; background:#fff; border-radius:25px; padding:35px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.08); transition:.4s; z-index:3; }
    .orbit:hover{ transform:translateY(-10px); }
    .circle-icon{ width:70px; height:70px; margin:auto; margin-bottom:20px; border-radius:50%; background:#EDF6E6; display:flex; justify-content:center; align-items:center; color:#5B8E23; font-size:28px; }
    .orbit h3{ font-size:20px; margin-bottom:10px; color:#173A24; }
    .orbit p{ font-size:14px; color:#666; line-height:1.6; margin:0; }
    
    /* Layout coordinates for desktop stability */
    .orbit-1{ top:0; left:50%; transform:translateX(-50%); }
    .orbit-2{ right:0; top:25%; }
    .orbit-3{ right:10%; bottom:5%; }
    .orbit-4{ left:10%; bottom:5%; }
    .orbit-5{ left:0; top:25%; }
    
    .fiveas-wrapper::before{ content:""; position:absolute; inset:140px; border:2px dashed #BFD8B4; border-radius:50%; z-index:1; }

    /*==========================================
    INNOVATIVE INTERVENTIONS
    ==========================================*/
    .interventions-section{ padding:120px 0; background:#ffffff; }
    .interventions-section .section-heading p{font-size: 44px !important;
  color: #173A24 !important;
  line-height: 1.25 !important;
  margin-bottom: 20px !important;}
    .intervention-item{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:100px; }
    .intervention-item.reverse{ direction:rtl; }
    .intervention-item.reverse .intervention-content{ direction:ltr; }
    .intervention-image{ border-radius:28px; overflow:hidden; }
    .intervention-image img{ width:100%; display:block; }
    
    .intervention-content span{ font-size:20px; font-weight:700; color:#5B8E23; background:#EDF6E6; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:25px; }
    .intervention-content h3{ font-size:36px; color:#173A24; margin-bottom:20px; line-height:1.25; }
    .intervention-content p{ font-size:16px; color:#666; line-height:1.8; margin-bottom:30px; }
    
    .intervention-content ul{ list-style:none; padding:0; margin-bottom:35px; display:flex; flex-direction:column; gap:14px; }
    .intervention-content li{ font-size:16px; color:#444; display:flex; gap:12px; align-items:center; }
    .intervention-content li::before{ content:"✓"; color:#5B8E23; font-weight:bold; }
    
    .intervention-btn{ display:inline-block; padding:15px 32px; border-radius:50px; border:2px solid #5B8E23; color:#5B8E23; text-decoration:none; font-weight:600; transition:.3s; }
    .intervention-btn:hover{ background:#5B8E23; color:#fff; }

.project-detail{margin: 10%;}   
.project-detail h1{font-size: 44px;
  color: #173A24;
  line-height: 1.25;
  margin-bottom: 20px;} 

.project-detail p{font-size: 17px;
  color: #666;
  line-height: 1.7;}  
.project-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:start;

}

.project-image img{

width:100%;

border-radius:20px;

}

@media(max-width:991px){

.project-grid{

grid-template-columns:1fr;

}

.project-image{

order:-1;

}

}

.about-detail{
    padding:120px 0;
}

.about-detail-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:start;
}

.about-detail-content h1{
    margin:20px 0 25px;
}

.about-detail-content p{
    margin-bottom:20px;
    line-height:1.8;
}

.about-detail-image img{
    width:100%;
    border-radius:20px;
    display:block;
}

.about-counter{
    margin-top:40px;
    padding:30px;
    background:#f8f8f8;
    border-radius:16px;
    text-align:center;
}

.about-counter h2{
    font-size:48px;
    margin:0;
}

.about-counter span{
    display:block;
    margin-top:10px;
}

@media(max-width:991px){

    .about-detail-grid{
        grid-template-columns:1fr;
    }

    .about-detail-image{
        order:-1;
    }

}
.why-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.why-modal{
    display:none;
}

.why-modal.active{
    display:flex;
}

.why-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.why-modal-content{
    position:relative;
    background:#fff;
    width:90%;
    max-width:800px;
    max-height:85vh;
    overflow:auto;
    padding:50px;
    border-radius:20px;
    z-index:2;
}

.why-close{
    position:absolute;
    top:15px;
    right:20px;
    border:none;
    background:none;
    font-size:34px;
    cursor:pointer;
}

.why-modal-content h2{
    margin:15px 0 25px;
}

.why-modal-content p{
    margin-bottom:20px;
    line-height:1.8;
}

body.modal-open{
    overflow:hidden;
}

@media(max-width:768px){

    .why-modal-content{
        padding:30px 20px;
    }

}

.content-page{
    padding:120px 0;
}

.content-page h1{
    margin:20px 0 30px;
}

.page-content{
    max-width:100%;
}

.page-content p{
    margin-bottom:20px;
    line-height:1.9;
}

.page-content ul{
    margin:20px 0;
    padding-left:20px;
}

.page-content li{
    margin-bottom:10px;
}
    /*==========================================
    CONFERENCE OF PANCHAYATS
    ==========================================*/
    /* .conference-section{ padding:120px 0; background:#f9fbF7; }
    .conference-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:50px; }
    
    .conference-card{ position:relative; border-radius:24px; overflow:hidden; min-height:280px; display:block; }
    .conference-card.large{ grid-column:span 2; grid-row:span 2; min-height:590px; }
    .conference-card img{ width:100%; height:100%; object-fit:cover; transition:.5s; display:block; }
    
    .conference-card .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(23,58,36,.95), rgba(23,58,36,.3)); padding:40px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
    .conference-card h3{ font-size:24px; margin-bottom:10px; line-height:1.3; }
    .conference-card p{ color:rgba(255,255,255,.8); line-height:1.6; margin:0; font-size:15px; }
    .conference-card:hover img{ transform:scale(1.08); } */
/*==================================================
    CONFERENCE SECTION
==================================================*/

.conference-section{
    padding:120px 0;
    background:#F8F5ED;
    position:relative;
    overflow:hidden;
}

.conference-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:60px;

}

.conference-card{

    position:relative;
    overflow:hidden;
    border-radius:24px;
    min-height:320px;
    cursor:pointer;

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

    transition:.45s;

}

.conference-card.large{

    grid-column:span 2;
    grid-row:span 2;
    min-height:670px;

}

.conference-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;

}

.conference-card:hover img{

    transform:scale(1.08);

}

.conference-card::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.18),
        transparent
    );

}

.overlay{

    position:absolute;
    left:35px;
    right:35px;
    bottom:35px;

    z-index:2;

    color:#fff;

}

.overlay h3{

    font-family:"Playfair Display",serif;
    font-size:30px;
    line-height:1.3;
    margin-bottom:12px;

}

.conference-card:not(.large) .overlay h3{

    font-size:24px;

}

.overlay p{

    opacity:.95;
    line-height:1.8;
    margin-bottom:20px;

}

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

.conference-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    border:none;
    outline:none;

    padding:13px 26px;

    border-radius:40px;

    background:#7FB343;
    color:#fff;

    font-weight:600;
    cursor:pointer;

    transition:.35s;

}

.conference-btn::after{

    content:"→";
    transition:.35s;

}

.conference-btn:hover{

    background:#23452D;

}

.conference-btn:hover::after{

    transform:translateX(5px);

}

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

.conference-modal{

    position:fixed;
    inset:0;

    background:rgba(17,24,16,.72);

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

    padding:40px;

    opacity:0;
    visibility:hidden;

    transition:.4s;

    z-index:99999;

}

.conference-modal.active{

    opacity:1;
    visibility:visible;

}

/*==================================================
    MODAL BOX
==================================================*/

.conference-modal-wrapper{

    width:100%;
    max-width:1100px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    display:grid;
    grid-template-columns:42% 58%;

    position:relative;

    transform:translateY(60px);

    transition:.45s;

    max-height:90vh;

}

.conference-modal.active .conference-modal-wrapper{

    transform:translateY(0);

}

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

.conference-modal-image{

    height:100%;

}

.conference-modal-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

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

.conference-modal-content{

    padding:60px;
    overflow-y:auto;
    max-height:90vh;

}

.modal-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(127,179,67,.12);

    color:#5D8B3A;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.conference-modal-content h2{

    font-family:"Playfair Display",serif;

    color:#23452D;

    font-size:42px;

    line-height:1.2;

    margin-bottom:25px;

}

.conference-modal-content p{

    color:#666;

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

}

.conference-modal-content ul{

    margin:20px 0;
    padding-left:20px;

}

.conference-modal-content li{

    color:#555;
    line-height:1.8;
    margin-bottom:10px;

}

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

.conference-close{

    position:absolute;

    top:22px;
    right:22px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#23452D;

    font-size:28px;

    cursor:pointer;

    z-index:10;

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

    transition:.3s;

}

.conference-close:hover{

    background:#7FB343;

    color:#fff;

    transform:rotate(90deg);

}

/*==================================================
    SCROLLBAR
==================================================*/

.conference-modal-content::-webkit-scrollbar{

    width:8px;

}

.conference-modal-content::-webkit-scrollbar-thumb{

    background:#7FB343;
    border-radius:10px;

}

/*==================================================
    ANIMATION
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.conference-modal.active .conference-modal-content>*{

    animation:fadeUp .6s ease both;

}

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

@media(max-width:992px){

    .conference-grid{

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

    }

    .conference-card.large{

        grid-column:span 2;

    }

    .conference-modal-wrapper{

        grid-template-columns:1fr;

        max-height:95vh;

    }

    .conference-modal-image{

        height:320px;

    }

}

@media(max-width:768px){

    .conference-section{

        padding:80px 0;

    }

    .conference-grid{

        grid-template-columns:1fr;

    }

    .conference-card.large{

        grid-column:auto;
        grid-row:auto;
        min-height:360px;

    }

    .conference-card{

        min-height:300px;

    }

    .overlay{

        left:25px;
        right:25px;
        bottom:25px;

    }

    .overlay h3{

        font-size:24px;

    }

    .conference-modal{

        padding:15px;

    }

    .conference-modal-content{

        padding:35px 25px;

    }

    .conference-modal-content h2{

        font-size:30px;

    }

}
    /*==========================================
    FOOTER
    ==========================================*/
    .footer{ background:#112B1B; color:#fff; position:relative; margin-top:100px; }
    .footer-cta-wrapper{ position:absolute; left:0; right:0; top:-100px; z-index:5; }
    
    .footer-cta{
        background:linear-gradient(90deg,#5B8E23,#79A93A); padding:50px 70px; border-radius:30px;
        display:flex; justify-content:between; align-items:center; gap:40px; box-shadow:0 30px 60px rgba(0,0,0,.2);
    }

    .cta-buttons a{padding:20px;background-color:#8A4C1D;border-radius:20px;color: #fff !important; }
    .cta-content{ flex:1; }
    .footer-cta span{ font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:rgba(255,255,255,.15); padding:8px 16px; border-radius:20px; display:inline-block; margin-bottom:15px; }
    .footer-cta h2{ font-size:36px; margin-bottom:10px; font-weight:700; }
    .footer-cta p{ margin:0; opacity:0.9; font-size:16px; }
    
    .footer-btn{ display:inline-block; padding:18px 38px; background:#fff; color:#173A24; text-decoration:none; font-weight:700; border-radius:50px; box-shadow:0 15px 30px rgba(0,0,0,.1); transition:.3s; flex-shrink:0; }
    .footer-btn:hover{ background:#E3A91A; color:#fff; transform:translateY(-3px); }
    
    .footer-main{ padding:180px 0 70px; }
    .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:60px; }
    .footer-about img{ height:130px; }
    .footer-about p{ color:rgba(255,255,255,.75); line-height:1.9; margin-bottom:30px; }
    
    .footer h3{ margin-bottom:25px; font-size:22px; position:relative; }
    .footer ul{ list-style:none; padding:0; }
    .footer li{ margin-bottom:16px; }
    .footer a{ color:rgba(255,255,255,.75); text-decoration:none; transition:.3s; }
    .footer a:hover{ color:#D89A1D; padding-left:6px; }
    
    .contact-info li{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.75); }
    .contact-info i{ color:#D89A1D; margin-top:4px; }
    
    .footer-social{ display:flex; gap:14px; }
    .footer-social a{ width:46px; height:46px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,.08); color:#fff; transition:.35s; }
    .footer-social a:hover{ background:#D89A1D; transform:translateY(-6px); }
    
    .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; }
    .footer-bottom-wrapper{ display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.6); font-size:15px; }
    .footer-bottom a{ margin-left:25px; color:rgba(255,255,255,.6); text-decoration:none; }
    .footer-bottom a:hover{ color:#fff; }
/*==================================================
                ROOTS SECTION
==================================================*/

.roots-section{
    padding:120px 0;
    background:#194225;
    position:relative;
    overflow:hidden;
}

.roots-section .section-heading{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.roots-section .section-tag{
    display:inline-block;
    padding:8px 20px;
    background:#fff;
    color:#5D8B3A;
    border-radius:40px;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.roots-section h2{
    font-size:56px;
    font-weight:700;
    color:#fff;
    margin-bottom:18px;
}

.roots-subtitle{
  
    font-size:28px;
    color:#fff !important;
    margin-bottom:25px;
}

.roots-description{
    max-width:720px;
    margin:auto;
    color:#fff !important;
    font-size:17px;
    line-height:1.9;
}

/*==================================================
                    SVG
==================================================*/

.tree{
    display:block;
    width:100%;
    max-width:1000px;
    margin:70px auto 0;
    overflow:visible;
}

/*==================================================
                GROUND LINE
==================================================*/

.ground{
    stroke:#CFC3AE;
    stroke-width:2;
    stroke-dasharray:8 8;
}

/*==================================================
                TRUNK
==================================================*/

.trunk{
    fill:none;
    stroke:#6C4B2A;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/*==================================================
                BRANCHES
==================================================*/

.branch{
    fill:none;
    stroke:#78A942;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/*==================================================
                ROOTS
==================================================*/

.root{
    fill:none;
    stroke:#6C4B2A;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/*==================================================
                END NODES
==================================================*/

.node{
    fill:#D4A84F;
    stroke:#fff;
    stroke-width:4;
    transition:.35s;
}

.tree g:hover .node{
    fill:#5C8A3D;
    transform:scale(1.15);
    transform-origin:center;
}

/*==================================================
                LABELS
==================================================*/

.mlabel{
    font-size:22px;
    font-weight:700;
    fill:#fff;
    transition:.3s;
}

.tree g:hover .mlabel{
    fill:#5C8A3D;
}

/*==================================================
                SVG ANIMATION
==================================================*/

.grow{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:drawTree 2s ease forwards;
}

.branch{ animation-delay:.2s; }
.trunk{ animation-delay:.5s; }
.root{ animation-delay:.9s; }

.node,
.mlabel{
    opacity:0;
    animation:fadeIn .8s ease forwards;
    animation-delay:1.8s;
}

@keyframes drawTree{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media(max-width:992px){

    .roots-section{
        padding:90px 20px;
    }

    .roots-section h2{
        font-size:44px;
    }

    .roots-subtitle{
        font-size:22px;
    }

    .mlabel{
        font-size:18px;
    }
}

@media(max-width:768px){

    .roots-section{
        padding:70px 15px;
    }

    .roots-section h2{
        font-size:34px;
    }

    .roots-subtitle{
        font-size:18px;
    }

    .roots-description{
        font-size:15px;
    }

    .mlabel{
        font-size:15px;
    }

    .node{
        r:6;
    }
}
    /*===================================================================
      COMPREHENSIVE RESPONSIVE DESIGN MEDIA QUERIES (NO SECTIONS SKIPPED)
    ===================================================================*/

    /* Large Desktop Styles Custom Override for Hero Content */
    @media(max-width:1400px){
        .hero-content{ max-width:620px; }
        .hero-stats{ right:25px; }
        .hero-content h1{ font-size:72px; }
        .hero-content p{ font-size:19px; }
    }

    /* Laptop Responsive Overrides */
    @media(max-width:1200px){
        .hero-slider{ min-height:850px; }
        .hero-content{ width:55%; }
        .hero-stats{ width:250px; }
        .hero-inner::after{ width:280px; }
        .hero-content h1{ font-size:64px; }
        .hero-tag{ margin-bottom:30px; }
        .hero-line{ margin:35px 0; }
        .about-wrapper{ gap:40px; }
        .philosophy-wrapper{ gap:40px; }
    }

    /* Tablet Devices Breakpoint (max-width: 991px) */
    @media(max-width:991px){
        /* Header Navigation Mobile Menu Architecture Layout */
        .menu-btn{ display:flex; }
        .header-btn{ display:none; }
        .nav{
            position:fixed; top:0; right:-100%; width:320px; height:100vh;
            background:#ffffff; z-index:1000; padding:120px 40px 40px;
            box-shadow:-10px 0 30px rgba(0,0,0,.1); transition:.4s cubic-bezier(0.1, 0.9, 0.2, 1);
        }
        .nav.open{ right:0; }
        .nav ul{ flex-direction:column; gap:25px; }
        .nav a{ color:#222; font-size:18px; font-weight:600; width:100%; display:block; }
        .header.scrolled .nav a{ color:#222; }

        /* Hero Slider Area Mobile Reset Layout */
        .hero-slider{ height:auto; min-height:900px; }
        .hero-inner{ display:block; padding-top:170px; }
        .hero-content{ width:100%; max-width:100%; text-align:center; align-items:center; }
        .hero-content p{ margin-left:auto; margin-right:auto; }
        .hero-buttons{ justify-content:center; }
        .hero-content h1{ font-size:56px; }
        .hero-inner::after{ display:none; }
        .hero-stats{ position:relative; top:auto; right:auto; transform:none; margin:70px auto 0; width:100%; max-width:420px; animation:none; }
        .hero-prev{ left:15px; }
        .hero-next{ right:15px; }
        .hero-arrow{ width:58px; height:58px; font-size:18px; }
        .scroll-indicator{ display:none; }

        /* Who We Are Section Layout Switch */
        .about-wrapper{ grid-template-columns:1fr; gap:60px; }
        .about-images{ max-width:550px; margin:0 auto; width:100%; }

        /* The Project Timeline Layout Switch */
        .project-timeline{ flex-direction:column; align-items:center; }
        .timeline-line{ width:2px; height:50px; margin-top:0; margin-bottom:0; }

        /* Why This Project Section Layout Switch */
        .why-project{ grid-template-columns:1fr; }
        .why-left{ min-height:450px; }
        .why-right{ padding:80px 40px; }

        /* What We Do Grid Layout Reset */
        .services-grid{ grid-template-columns:1fr; gap:30px; }
        .service-card.large{ min-height:380px; }

        /* DIL Framework Section Reset */
        .dil-wrapper{ grid-template-columns:1fr; gap:30px; }
        .dil-center{ order:-1; margin-bottom:10px; }

        /* Philosophy Section Layout Switch */
        .philosophy-wrapper{ grid-template-columns:1fr; gap:60px; }
        .quote-box{ position:relative; inset:auto; margin-top:30px; width:100%; max-width:100%; }

        /* The 5As Circular Orbit Framework Transformation into Flat Stacked Layout */
        .fiveas-wrapper{ height:auto; max-width:100%; display:flex; flex-direction:column; gap:25px; margin-top:40px; }
        .fiveas-wrapper::before{ display:none; }
        .center-circle{ position:relative; top:auto; left:auto; transform:none; margin:0 auto 20px; width:180px; height:180px; }
        .orbit{ position:relative; top:auto; left:auto; right:auto; bottom:auto; transform:none !important; width:100%; max-width:500px; margin:0 auto; }

        /* Innovative Interventions Section Grid Reset */
        .intervention-item{ grid-template-columns:1fr; gap:40px; margin-top:70px; }
        .intervention-item.reverse{ direction:ltr; }
        .intervention-item.reverse .intervention-content{ direction:ltr; }

        /* Conference of Panchayats Gallery Layout Switch */
        .conference-grid{ grid-template-columns:1fr 1fr; gap:20px; }
        .conference-card.large{ grid-column:span 2; grid-row:span 1; min-height:350px; }

        /* Footer Widgets Columns Responsive Reset */
        .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
        .footer-cta{ flex-direction:column; text-align:center; padding:40px; }
        .footer-btn{ width:100%; max-width:280px; }
    }

    /* Small Mobile Devices Breakpoint (max-width: 767px) */
    @media(max-width:767px) {
        .section-heading h2, .about-content h2, .why-right h2, .philosophy-content h2, .intervention-content h3{ font-size:32px; }
        
      /* Small Mobile Devices Breakpoint (max-width: 767px) */
    
        .section-heading h2, .about-content h2, .why-right h2, .philosophy-content h2, .intervention-content h3{ font-size:32px; }
        
        .hero-slider{ height: auto; min-height: 1000px; } /* Changed to let long content scroll naturally if needed */
        .hero-track { position: absolute; inset: 0; height: 100%; } /* Forces the track to fill the min-height container */
        .hero-slider .container{ width:92%; height: 100%; }
        .hero-pagination{ bottom:30px; }
        .hero-counter{ bottom:75px; }
        .hero-content h1{ font-size:40px; }
        .hero-content p{ font-size:16px; line-height:1.7; margin-bottom: 35px; }
        .hero-buttons{ flex-direction:column; width:100%; align-items:stretch; gap: 15px; }
        .btn{ width:100%; max-width:100%; }
        .hero-stats{display: none !important;}

        .image-small{ width:180px; right:-15px; bottom:-20px; border-width:4px; }
        .experience-box{ left:-15px; top:30px; padding:20px; width:140px; }
        .experience-box h2{ font-size:38px; }

        .why-grid{ grid-template-columns:1fr; }
        .leadership-card{ flex-direction:column; text-align:center; gap:20px; }

        .conference-grid{ grid-template-columns:1fr; }
        .conference-card.large{ grid-column:span 1; min-height:280px; }

        .footer-grid{ grid-template-columns:1fr; gap:45px; }
        .footer-about img{ height:140px; }
        .footer-bottom-wrapper{ flex-direction:column; gap:15px; text-align:center; }
        .footer-bottom a{ margin:0 12px; }
    }

    /* Extra Small Smart Phones Breakpoint (max-width: 576px) */
  /* Extra Small Smart Phones Breakpoint (max-width: 576px) */
    @media(max-width:576px){
        .hero-tag{ font-size:11px; padding:12px 22px; letter-spacing:1px; }
        .hero-content h1{ font-size:38px; }
        .hero-content p{ font-size:16px; margin-bottom:40px; }
        .hero-pagination{ bottom:25px; }
        .hero-counter{ bottom:65px; }
        .hero-arrow{ width:52px; height:52px; }
        .service-content, .conference-card .overlay{ padding:25px; left:20px; right:20px; bottom:20px; }
        .footer-cta h2{ font-size:26px; }
    }
    /* ==========================================
   Responsive Footer CTA
========================================== */

@media (max-width: 991px) {

    .footer-cta-wrapper{
        position:relative;
        top:0;
        margin-bottom:0;
        padding:20px;
    }

    .footer-main{
        padding:70px 0 50px;
    }

    .footer-cta{
        flex-direction:column;
        text-align:center;
        padding:40px 30px;
        gap:30px;
        border-radius:24px;
    }

    .cta-content{
        width:100%;
    }

    .cta-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

    .cta-buttons a,
    .footer-btn{
        width:100%;
        max-width:300px;
        text-align:center;
    }

}

@media (max-width: 767px){

    .footer-cta{
        padding:30px 20px;
    }

    .footer-cta h2{
        font-size:28px;
        line-height:1.3;
    }

    .footer-cta p{
        font-size:15px;
        line-height:1.7;
    }

    .footer-cta span{
        font-size:12px;
    }

}

@media (max-width: 480px){

    .footer-cta-wrapper{
        padding:15px;
    }

    .footer-cta{
        padding:25px 18px;
        border-radius:20px;
    }

    .footer-cta h2{
        font-size:24px;
    }

    .footer-cta p{
        font-size:14px;
    }

    .cta-buttons a,
    .footer-btn{
        max-width:100%;

        font-size:15px;
    }

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

    .dil-wrapper{
        flex-direction:column;
    }

    .dil-card,
    .dil-bottom .dil-card{
        width:100%;
        max-width:500px;
    }

    .dil-center{
        order:-1;
        margin-bottom:20px;
    }
}
/*==================================================
    COMMUNITY DRIVEN CLIMATE ACTION PLAN
==================================================*/

.action-plan-section{
    position:relative;
    padding:120px 0;
    background:#F8F5ED;
    overflow:hidden;
}

.action-plan-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(127,179,67,.12) 0%,transparent 70%);
    top:-180px;
    right:-150px;
    pointer-events:none;
}

.action-plan-section::after{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    background:radial-gradient(circle,rgba(92,138,61,.08) 0%,transparent 70%);
    bottom:-180px;
    left:-150px;
    pointer-events:none;
}

/*=========================================
            GRID
=========================================*/

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

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

.action-card{

    position:relative;
    background:#fff;
    border-radius:24px;
    padding:35px 30px;
    overflow:hidden;

    border:1px solid rgba(92,138,61,.12);

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

    transition:.45s;
}

.action-card:hover{

    transform:translateY(-10px);

    border-color:#7FB343;

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

}

/* top border animation */

.action-card::before{

    content:'';

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:5px;

    background:#7FB343;

    transition:.5s;

}

.action-card:hover::before{

    width:100%;

}

/*=========================================
            BADGE
=========================================*/

.action-badge{

    width:62px;
    height:62px;

    border-radius:50%;

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

    background:linear-gradient(135deg,#7FB343,#5C8A3D);

    color:#fff;

    font-family:"Playfair Display",serif;
    font-size:28px;
    font-weight:700;

    margin-bottom:28px;

    box-shadow:0 12px 25px rgba(92,138,61,.25);

}

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

.action-card h3{

    font-family:"Playfair Display",serif;

    font-size:28px;

    color:#23452D;

    line-height:1.35;

    margin-bottom:18px;

    min-height:95px;

}

/*=========================================
        SHORT DESCRIPTION
=========================================*/

.action-short{

    font-size:16px;

    color:#666;

    line-height:1.9;

    margin-bottom:28px;

}

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

.read-more-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border:none;

    border-radius:40px;

    background:#23452D;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.read-more-btn::after{

    content:"→";

    transition:.35s;

}

.read-more-btn:hover{

    background:#7FB343;

}

.read-more-btn:hover::after{

    transform:translateX(5px);

}

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

.action-details{

    display:none;

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(0,0,0,.08);

}

.action-card.active .action-details{

    display:block;

    animation:fadeIn .4s ease;

}

.action-details p{

    color:#666;

    line-height:1.9;

    margin-bottom:18px;

}

.action-details ul{

    padding-left:18px;

    margin-bottom:18px;

}

.action-details li{

    margin-bottom:12px;

    color:#555;

    line-height:1.8;

}

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

.action-card:hover .action-badge{

    transform:rotate(12deg) scale(1.08);

    transition:.4s;

}

/*=========================================
            ANIMATION
=========================================*/

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

@media(max-width:1200px){

    .action-grid{

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

    }

}

@media(max-width:768px){

    .action-plan-section{

        padding:80px 0;

    }

    .action-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .action-card{

        padding:28px;

    }

    .action-card h3{

        min-height:auto;

        font-size:24px;

    }

    .action-short{

        font-size:15px;

    }

    .action-badge{

        width:55px;
        height:55px;
        font-size:24px;

    }

}