/*=====================================================
PROGRAMS.CSS
Part 1
Hero Section
Programs Intro
Program Layout
Green • Sea Blue • Yellow Theme
======================================================*/

/*==============================
CSS VARIABLES
==============================*/

:root{

    --primary:#138a36;
    --primary-light:#1fb35a;

    --secondary:#20b2aa;
    --secondary-dark:#0e8d87;

    --accent:#f4c430;

    --dark:#17222d;

    --text:#5f6772;

    --white:#ffffff;

    --light:#f8fbf9;

    --shadow:0 20px 50px rgba(0,0,0,.08);

    --radius:25px;

}

/*==============================
GENERAL
==============================*/

.programs-page{

    overflow-x:hidden;

    background:#fff;

}

section{

    position:relative;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title h2{

    font-size:46px;

    color:var(--dark);

    margin-bottom:20px;

    line-height:1.25;

    font-weight:800;

}

.section-title p{

    color:var(--text);

    line-height:1.9;

    font-size:18px;

}

/*=====================================================
PROGRAM HERO
======================================================*/

.program-hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:760px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

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

.hero-slider{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0;

    visibility:hidden;

    transition:opacity 1.5s ease;

}

.slide.active{

    opacity:1;

    visibility:visible;

    animation:kenBurns 10s linear forwards;

}

.slide::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.72),

        rgba(0,0,0,.45),

        rgba(0,0,0,.25)

    );

}

/*==============================
DECORATION
==============================*/

.program-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(32,178,170,.12);

    filter:blur(35px);

    top:-180px;

    right:-150px;

    z-index:2;

    animation:floatOne 8s ease-in-out infinite;

}

.program-hero::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(244,196,48,.12);

    filter:blur(25px);

    left:-120px;

    bottom:-120px;

    z-index:2;

    animation:floatTwo 10s ease-in-out infinite;

}

/*==============================
OVERLAY
==============================*/

.overlay{

    position:absolute;

    inset:0;

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

    z-index:3;

}

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

.program-hero .container{

    position:relative;

    z-index:10;

}

.hero-content{

    max-width:760px;

    color:#fff;

}

.hero-content .subtitle{

    display:inline-block;

    padding:12px 26px;

    border-radius:40px;

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

    backdrop-filter:blur(12px);

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:28px;

  /*  animation:fadeDown 1s ease;    */

}

.hero-content h1{

    font-size:68px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

    text-shadow:0 10px 30px rgba(0,0,0,.35);

  /*  animation:fadeLeft 1.2s ease;    */

}

.hero-content p{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:40px;

    max-width:680px;

  /*  animation:fadeRight 1.3s ease;   */

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    animation:fadeUp 1.5s ease;

}

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

.slider-navigation{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:30;

}

.slider-navigation .dot{

    width:14px;

    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.4s;

}

.slider-navigation .dot.active{

    background:#fff;

    transform:scale(1.35);

}

/*==============================
SCROLL
==============================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:90px;

    transform:translateX(-50%);

    color:#fff;

    font-size:30px;

    z-index:30;

    animation:bounce 2s infinite;

}


/*=====================================================
PROGRAM ICON STYLING
======================================================*/


.program-content .icon,
.intro-card .icon{

    width:70px;
    height:70px;

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

    border-radius:50%;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;

}



.program-content .icon i,
.intro-card .icon i{

    font-size:30px;

    z-index:2;

}





/* GREEN ICON */

.icon.green{

    background:rgba(34,197,94,0.15);

    color:#16a34a;

}




.icon.green::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    background:#16a34a;

    opacity:.12;

    border-radius:50%;

}






/* BLUE ICON */

.icon.blue{

    background:rgba(37,99,235,.15);

    color:#2563eb;

}




.icon.blue::before{

    content:"";

    position:absolute;

    inset:0;

    background:#2563eb;

    opacity:.12;

    border-radius:50%;

}






/* YELLOW ICON */

.icon.yellow{

    background:rgba(234,179,8,.18);

    color:#ca8a04;

}



.icon.yellow::before{

    content:"";

    position:absolute;

    inset:0;

    background:#eab308;

    opacity:.12;

    border-radius:50%;

}








/* HOVER EFFECT */

.program-content .icon:hover,
.intro-card .icon:hover{


transform:translateY(-8px) rotate(5deg);


}



.program-content .icon,
.intro-card .icon{


transition:.4s ease;


}








/* INTRO CARD ICON SIZE */

.intro-card .icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;


}



.intro-card .icon i{

font-size:35px;

}






/* PROGRAM FEATURE CHECK ICONS */

.feature-item i{

color:#16a34a;

font-size:18px;

margin-right:10px;

}




/* PROCESS SECTION ICONS */

.process-card > i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

margin:25px auto;

border-radius:50%;


background:#f0fdf4;

color:#16a34a;


font-size:30px;


transition:.4s ease;

}




.process-card:hover > i{


transform:scale(1.15) rotate(10deg);


background:#16a34a;

color:white;


}


/*=====================================================
    PROGRAM IMPACT STATISTICS
======================================================*/


.program-impact{

    padding:100px 0;

    background:#f8fafc;

    position:relative;

    overflow:hidden;

}



/* Background decoration */

.program-impact::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(34,197,94,.08);

    border-radius:50%;

    top:-120px;

    left:-120px;

}



.program-impact::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(37,99,235,.08);

    border-radius:50%;

    bottom:-100px;

    right:-100px;

}






/* SECTION TITLE */

.program-impact .section-title{

    position:relative;

    z-index:2;

}





.impact-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;


margin-top:60px;


position:relative;


z-index:2;


}






/* IMPACT CARD */


.impact-card{


background:white;


padding:40px 30px;


border-radius:25px;


text-align:center;


position:relative;


overflow:hidden;


box-shadow:

0 15px 40px rgba(0,0,0,.08);



transition:.4s ease;


}




.impact-card::before{


content:"";


position:absolute;


height:5px;


width:0;


background:

linear-gradient(
90deg,
#16a34a,
#22c55e
);



top:0;


left:0;


transition:.5s ease;


}





.impact-card:hover::before{

width:100%;

}



.impact-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(0,0,0,.12);


}







/* ICON */


.impact-card i{


width:80px;


height:80px;


display:flex;


align-items:center;


justify-content:center;


margin:0 auto 25px;


border-radius:50%;


font-size:35px;



background:

linear-gradient(
135deg,
#16a34a,
#22c55e
);


color:white;



box-shadow:

0 15px 30px rgba(22,163,74,.25);


transition:.4s ease;


}




.impact-card:hover i{


transform:

rotateY(180deg)
scale(1.1);


}









/* NUMBER */


.impact-card h2{


font-size:45px;


font-weight:800;


margin:15px 0;


color:#14532d;



}




.counter{


display:inline-block;


background:

linear-gradient(
135deg,
#166534,
#22c55e
);



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}







/* TITLE */


.impact-card h4{


font-size:20px;


font-weight:700;


color:#1f2937;


margin-bottom:15px;


}






/* DESCRIPTION */


.impact-card p{


font-size:15px;


line-height:1.8;


color:#64748b;


}







/*=====================================================
    MINI PROGRAM STATISTICS
======================================================*/


.mini-stats{


display:flex;


gap:25px;


margin:35px 0;


}


.mini-stat{


padding:20px;


background:#f8fafc;


border-radius:15px;


text-align:center;


flex:1;


border:1px solid #e5e7eb;


transition:.3s;


}



.mini-stat:hover{


transform:translateY(-5px);


background:white;


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


}



.mini-stat h3{


font-size:28px;


color:#15803d;


margin-bottom:8px;


}



.mini-stat span{


font-size:13px;


color:#64748b;


}









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


@media(max-width:1100px){


.impact-grid{


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


}


}





@media(max-width:600px){


.impact-grid{


grid-template-columns:1fr;


}



.impact-card{


padding:35px 20px;


}



.impact-card h2{


font-size:38px;


}


.mini-stats{


flex-direction:column;


}



}

/*=====================================================
    PROGRAM IMPLEMENTATION PROCESS
======================================================*/


.program-process{

    padding:100px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}




.program-process .section-title{

    margin-bottom:60px;

}





/* PROCESS GRID */

.process-grid{


display:grid;


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


gap:30px;


position:relative;


}





/* CONNECTING LINE */

.process-grid::before{


content:"";


position:absolute;


top:75px;


left:10%;


right:10%;


height:3px;


background:

linear-gradient(
90deg,
#16a34a,
#22c55e,
#3b82f6
);



z-index:0;


}







/* PROCESS CARD */


.process-card{


background:white;


padding:45px 30px 35px;


border-radius:25px;


text-align:center;


position:relative;


z-index:1;



border:1px solid #e5e7eb;



box-shadow:

0 15px 40px rgba(0,0,0,.06);



transition:.4s ease;


}





.process-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(0,0,0,.12);


}






/* NUMBER BADGE */


.step-number{


position:absolute;


top:-28px;


left:50%;


transform:translateX(-50%);



width:65px;


height:65px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



background:

linear-gradient(
135deg,
#15803d,
#22c55e
);



color:white;


font-size:22px;


font-weight:800;



box-shadow:

0 15px 35px rgba(22,163,74,.35);


}





/* ICON */


.process-card > i{


width:85px;


height:85px;


display:flex;


align-items:center;


justify-content:center;



margin:25px auto;



border-radius:50%;



background:#f0fdf4;


color:#16a34a;



font-size:35px;



transition:.4s ease;


}





.process-card:hover > i{


background:#16a34a;


color:white;


transform:

rotateY(180deg);


}







/* TITLE */


.process-card h3{


font-size:21px;


font-weight:700;


margin:20px 0 15px;


color:#1f2937;


}






/* DESCRIPTION */


.process-card p{


font-size:15px;


line-height:1.8;


color:#64748b;


}





/* STEP COLORS */


.process-card:nth-child(2) 
.step-number{


background:

linear-gradient(
135deg,
#2563eb,
#60a5fa
);


}



.process-card:nth-child(3)
.step-number{


background:

linear-gradient(
135deg,
#ca8a04,
#facc15
);


}




.process-card:nth-child(4)
.step-number{


background:

linear-gradient(
135deg,
#7c3aed,
#a78bfa
);


}







/* HOVER BORDER */


.process-card::after{


content:"";


position:absolute;


inset:0;



border-radius:25px;


border:2px solid transparent;



background:

linear-gradient(
135deg,
#22c55e,
transparent
)

border-box;



-webkit-mask:

linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);



-webkit-mask-composite: xor;



opacity:0;



transition:.4s;


}



.process-card:hover::after{


opacity:1;


}









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


@media(max-width:1100px){


.process-grid{


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


}



.process-grid::before{


display:none;


}



}





@media(max-width:600px){


.process-grid{


grid-template-columns:1fr;


}



.process-card{


padding:40px 25px;


}


}

/*=====================================================
INTRO
======================================================*/

.program-intro{

    padding:120px 0;

    background:#fff;

}

.program-intro .intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.intro-image{

    position:relative;

}

.intro-image img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.intro-image::before{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:30px;

    border:8px solid rgba(19,138,54,.12);

    top:-30px;

    left:-30px;

    z-index:-1;

}

.intro-image::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:rgba(32,178,170,.12);

    right:-30px;

    bottom:-30px;

    z-index:-1;

}

.intro-content span{

    color:var(--secondary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.intro-content h2{

    font-size:46px;

    margin:20px 0;

    color:var(--dark);

    line-height:1.25;

}

.intro-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:25px;

}

/*=====================================================
PROGRAM BLOCK
======================================================*/

.program-section{

    padding:120px 0;

}

.program-block{

    margin-bottom:120px;

}

.program-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.program-block:nth-child(even) .program-grid{

    direction:rtl;

}

.program-block:nth-child(even) .program-grid>*{

    direction:ltr;

}

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

.program-image{

    position:relative;

}

.program-image img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.6s;

}

.program-image:hover img{

    transform:scale(1.05);

}

.program-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:30px;

    border:8px solid rgba(32,178,170,.12);

    top:-35px;

    left:-35px;

    z-index:-1;

}

.program-image::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:rgba(244,196,48,.15);

    right:-40px;

    bottom:-40px;

    z-index:-1;

}

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

.program-content{

    position:relative;

}

.program-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(32,178,170,.12);

    color:var(--secondary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.program-content h2{

    font-size:44px;

    color:var(--dark);

    margin-bottom:22px;

    line-height:1.25;

}

.program-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:25px;

    font-size:17px;

}

/*==============================
PROGRAM ICON
==============================*/

.program-content .icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:36px;

    margin-bottom:30px;

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

}

.icon.green{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

}

.icon.blue{

    background:linear-gradient(

        135deg,

        var(--secondary),

        #37d4cc

    );

}

.icon.yellow{

    background:linear-gradient(

        135deg,

        #efb300,

        #ffd64f

    );

}

/*=====================================================
PROGRAMS.CSS
PART 2
Program Features
Feature Cards
Impact Areas
Benefits
======================================================*/

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

.program-features{

    display:grid;

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

    gap:25px;

    margin:40px 0;

}

.program-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#fff;

    padding:25px;

    border-radius:18px;

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

    transition:.45s;

}

.program-feature:hover{

    transform:translateY(-8px);

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

}

.program-feature i{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

.program-feature.green i{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

}

.program-feature.blue i{

    background:linear-gradient(
        135deg,
        var(--secondary),
        #36d7cf
    );

}

.program-feature.yellow i{

    background:linear-gradient(
        135deg,
        #efb300,
        #ffd34f
    );

}

.program-feature h4{

    font-size:20px;

    color:var(--dark);

    margin-bottom:8px;

}

.program-feature p{

    margin:0;

    color:var(--text);

    line-height:1.8;

    font-size:15px;

}

/*=====================================================
PROGRAM CHECK LIST
======================================================*/

.program-list{

    margin:35px 0;

}

.program-list li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#444;

    font-size:16px;

}

.program-list li i{

    width:32px;

    height:32px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(19,138,54,.10);

    color:var(--primary);

    font-size:14px;

}

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

.program-content .btn-primary{

    margin-top:15px;

}

.program-content .btn-primary:hover{

    transform:translateY(-5px);

}

/*=====================================================
IMPACT AREA
======================================================*/

.program-impact{

    padding:120px 0;

    background:var(--light);

    position:relative;

    overflow:hidden;

}

.program-impact::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(19,138,54,.05);

    top:-180px;

    left:-150px;

}

.program-impact::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(32,178,170,.05);

    right:-140px;

    bottom:-140px;

}

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

.impact-grid{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;

}

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

.impact-card{

    background:#fff;

    border-radius:25px;

    padding:45px 30px;

    text-align:center;

    transition:.45s;

    box-shadow:var(--shadow);

}

.impact-card:hover{

    transform:translateY(-10px);

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

}

.impact-card i{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.impact-card h3{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:800;

}

.impact-card h5{

    font-size:20px;

    color:var(--dark);

    margin-bottom:15px;

}

.impact-card p{

    color:var(--text);

    line-height:1.8;

}

/*=====================================================
EDUCATION SECTION
======================================================*/

.education-program{

    position:relative;

}

.education-program .program-tag{

    background:rgba(19,138,54,.10);

    color:var(--primary);

}

.education-program .icon{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

}

/*=====================================================
HEALTH SECTION
======================================================*/

.health-program{

    position:relative;

}

.health-program .program-tag{

    background:rgba(32,178,170,.12);

    color:var(--secondary);

}

.health-program .icon{

    background:linear-gradient(
        135deg,
        var(--secondary),
        #39d8d0
    );

}

/*=====================================================
ENVIRONMENT SECTION
======================================================*/

.environment-program{

    position:relative;

}

.environment-program .program-tag{

    background:rgba(244,196,48,.18);

    color:#b78800;

}

.environment-program .icon{

    background:linear-gradient(
        135deg,
        var(--accent),
        #ffd95a
    );

}

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

.program-image{

    overflow:hidden;

}

.program-image img{

    transition:
        transform .8s ease,
        filter .5s ease;

}

.program-image:hover img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

/*=====================================================
FLOATING SHAPES
======================================================*/

.float-shape{

    position:absolute;

    border-radius:50%;

    opacity:.08;

    animation:floatShape 8s ease-in-out infinite;

}

.float-green{

    width:140px;

    height:140px;

    background:var(--primary);

}

.float-blue{

    width:180px;

    height:180px;

    background:var(--secondary);

}

.float-yellow{

    width:120px;

    height:120px;

    background:var(--accent);

}

@keyframes floatShape{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}


/*=====================================================
PROGRAMS.CSS
PART 3
Timeline
Success Stories
Statistics
Testimonials
Gallery
======================================================*/

/*=====================================================
PROGRAM TIMELINE
======================================================*/

.program-timeline{

    padding:120px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}

.program-timeline::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(19,138,54,.05);

    left:-180px;

    top:-150px;

}

.program-timeline::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(32,178,170,.06);

    right:-120px;

    bottom:-120px;

}

.timeline{

    position:relative;

    max-width:1100px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(

        to bottom,

        var(--primary),

        var(--secondary),

        var(--accent)

    );

}

.timeline-item{

    position:relative;

    width:50%;

    padding:20px 60px;

    margin-bottom:50px;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

.timeline-content{

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.4s;

}

.timeline-content:hover{

    transform:translateY(-8px);

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

}

.timeline-content h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:24px;

}

.timeline-content p{

    color:var(--text);

    line-height:1.8;

}

.timeline-dot{

    position:absolute;

    top:40px;

    right:-16px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    border:6px solid #fff;

    box-shadow:0 0 0 6px rgba(19,138,54,.10);

}

.timeline-item:nth-child(even) .timeline-dot{

    left:-18px;

}

/*=====================================================
SUCCESS STORIES
======================================================*/

.success-stories{

    padding:120px 0;

    background:var(--light);

}

.story-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.story-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.45s;

}

.story-card:hover{

    transform:translateY(-12px);

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

}

.story-image{

    overflow:hidden;

}

.story-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.7s;

}

.story-card:hover img{

    transform:scale(1.08);

}

.story-content{

    padding:35px;

}

.story-content span{

    display:inline-block;

    color:var(--secondary);

    font-weight:600;

    margin-bottom:15px;

}

.story-content h3{

    font-size:24px;

    color:var(--dark);

    margin-bottom:15px;

}

.story-content p{

    color:var(--text);

    line-height:1.8;

}

/*=====================================================
STATISTICS
======================================================*/

.program-stats{

    padding:120px 0;

    background:

    linear-gradient(

        rgba(19,138,54,.95),

        rgba(19,138,54,.95)

    ),

    url("images/programs/stats-bg.jpg")

    center/cover no-repeat;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-box{

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

    backdrop-filter:blur(15px);

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:.4s;

}

.stat-box:hover{

    transform:translateY(-10px);

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

}

.stat-box i{

    font-size:42px;

    color:#fff;

    margin-bottom:20px;

}

.stat-box h2{

    color:#fff;

    font-size:50px;

    margin-bottom:10px;

    font-weight:800;

}

.stat-box h4{

    color:#fff;

    margin-bottom:15px;

}

.stat-box p{

    color:rgba(255,255,255,.90);

    line-height:1.8;

}

/*=====================================================
TESTIMONIALS
======================================================*/

.program-testimonials{

    padding:120px 0;

    background:#fff;

}

.testimonial-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.testimonial-card{

    background:var(--light);

    padding:40px;

    border-radius:25px;

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

.testimonial-card i{

    font-size:42px;

    color:var(--accent);

    margin-bottom:20px;

}

.testimonial-card p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:25px;

}

.author{

    display:flex;

    align-items:center;

    gap:18px;

}

.author img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.author h5{

    margin:0;

    color:var(--dark);

}

.author span{

    color:var(--secondary);

    font-size:14px;

}

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

.program-gallery{

    padding:120px 0;

    background:var(--light);

}

.gallery-grid{

    display:grid;

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

    gap:20px;

    margin-top:70px;

}

.gallery-grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:20px;

    transition:.6s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.06);

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

}

/*=====================================================
SCROLL ANIMATIONS
======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:1s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:1s ease;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:1s ease;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}


/*=====================================================
PROGRAMS.CSS
PART 4
Call To Action
Partners
FAQ
Newsletter
Premium Effects
======================================================*/

/*=====================================================
PROGRAM CTA
======================================================*/

.program-cta{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.program-cta::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    left:-180px;

    top:-180px;

}

.program-cta::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

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

    right:-150px;

    bottom:-150px;

}

.program-cta .container{

    position:relative;

    z-index:2;

    max-width:900px;

}

.program-cta h2{

    color:#fff;

    font-size:50px;

    margin-bottom:25px;

    font-weight:800;

    line-height:1.3;

}

.program-cta p{

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:1.9;

    margin-bottom:45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons .btn-primary{

    background:#fff;

    color:var(--primary);

}

.cta-buttons .btn-primary:hover{

    background:var(--accent);

    color:#222;

}

.cta-buttons .btn-outline{

    padding:16px 36px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.45);

    color:#fff;

    transition:.4s;

}

.cta-buttons .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

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

.partners{

    padding:110px 0;

    background:#fff;

}

.partner-grid{

    display:grid;

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

    gap:30px;

    align-items:center;

    margin-top:60px;

}

.partner-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    border:1px solid #eef3ef;

    transition:.4s;

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

}

.partner-card:hover{

    transform:translateY(-8px);

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

}

.partner-card img{

    max-width:120px;

    width:100%;

    opacity:.75;

    transition:.4s;

}

.partner-card:hover img{

    opacity:1;

    transform:scale(1.08);

}

/*=====================================================
FAQ
======================================================*/

.program-faq{

    padding:120px 0;

    background:var(--light);

}

.faq-wrapper{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

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

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:24px 30px;

    font-weight:600;

    font-size:18px;

    color:var(--dark);

    transition:.4s;

}

.faq-question:hover{

    background:rgba(19,138,54,.05);

}

.faq-question i{

    color:var(--primary);

    transition:.4s;

}

.faq-item.active i{

    transform:rotate(180deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

}

.faq-answer p{

    padding:0 30px 30px;

    line-height:1.9;

    color:var(--text);

}

/*=====================================================
NEWSLETTER
======================================================*/

.newsletter{

    padding:110px 0;

    background:#fff;

}

.newsletter-box{

    max-width:900px;

    margin:auto;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:30px;

    padding:60px;

    text-align:center;

    color:#fff;

}

.newsletter-box h2{

    font-size:42px;

    margin-bottom:20px;

}

.newsletter-box p{

    color:rgba(255,255,255,.92);

    margin-bottom:35px;

    line-height:1.8;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter-form input{

    width:420px;

    max-width:100%;

    padding:18px 24px;

    border:none;

    border-radius:50px;

    font-size:16px;

    outline:none;

}

.newsletter-form button{

    padding:18px 36px;

    border:none;

    border-radius:50px;

    background:var(--accent);

    color:#222;

    font-weight:700;

    cursor:pointer;

    transition:.4s;

}

.newsletter-form button:hover{

    background:#ffd84a;

    transform:translateY(-3px);

}

/*=====================================================
FLOATING DECORATIONS
======================================================*/

.floating-leaf{

    position:absolute;

    color:rgba(255,255,255,.10);

    animation:leafFloat 8s ease-in-out infinite;

}

.leaf-1{

    left:8%;

    top:20%;

    font-size:60px;

}

.leaf-2{

    right:10%;

    bottom:18%;

    font-size:80px;

    animation-duration:10s;

}

.leaf-3{

    left:45%;

    bottom:8%;

    font-size:45px;

    animation-duration:12s;

}

@keyframes leafFloat{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-20px) rotate(12deg);

    }

    100%{

        transform:translateY(0) rotate(0deg);

    }

}

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

.btn-primary,
.btn-outline{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-outline::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.btn-primary:hover::before,
.btn-outline:hover::before{

    left:120%;

}
/*=====================================================
PROGRAMS.CSS
PART 5
Responsive Design
Animations
Utilities
======================================================*/

/*=====================================================
LARGE TABLETS
======================================================*/

@media (max-width:1200px){

.program-grid{
    grid-template-columns:1fr;
    gap:60px;
}

.program-grid.reverse{
    direction:ltr;
}

.program-content{
    order:2;
}

.program-image{
    order:1;
}

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

.partner-grid{
    grid-template-columns:repeat(3,1fr);
}

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

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

}


/*=====================================================
TABLETS
======================================================*/

@media (max-width:991px){

.section-title h2{
    font-size:40px;
}

.program-hero{
    min-height:600px;
    text-align:center;
}

.program-hero h1{
    font-size:54px;
}

.program-hero p{
    font-size:17px;
    margin:auto;
}

.hero-buttons{
    justify-content:center;
}

.program-grid{
    gap:50px;
}

.program-content h2{
    font-size:36px;
}

.program-content{
    text-align:center;
}

.program-content ul{
    text-align:left;
    display:inline-block;
}

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

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

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

.timeline::before{
    display:none;
}

.newsletter-box{
    padding:50px 40px;
}

.newsletter-box h2{
    font-size:34px;
}

.cta-buttons{
    justify-content:center;
}

}


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

@media (max-width:768px){

.container{
    width:92%;
}

.program-hero{
    min-height:520px;
    padding:120px 0 80px;
}

.program-hero h1{
    font-size:42px;
    line-height:1.25;
}

.program-hero p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons a{
    width:100%;
    max-width:300px;
}

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

.section-title p{
    font-size:16px;
}

.program-section{
    padding:80px 0;
}

.program-content h2{
    font-size:30px;
}

.program-content p{
    font-size:16px;
}

.program-image img{
    border-radius:20px;
}

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

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

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

.timeline{
    gap:25px;
}

.timeline-card{
    padding:30px;
}

.timeline-card h3{
    font-size:22px;
}

.timeline-card p{
    font-size:15px;
}

.faq-question{
    font-size:17px;
    padding:20px;
}

.faq-answer p{
    padding:0 20px 20px;
}

.newsletter-box{
    padding:40px 25px;
}

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

.newsletter-form{
    flex-direction:column;
}

.newsletter-form input,
.newsletter-form button{
    width:100%;
}

.program-cta{
    padding:90px 0;
}

.program-cta h2{
    font-size:34px;
}

.program-cta p{
    font-size:16px;
}

.cta-buttons{
    flex-direction:column;
    align-items:center;
}

.cta-buttons a{
    width:100%;
    max-width:280px;
}

}


/*=====================================================
SMALL PHONES
======================================================*/

@media (max-width:480px){

.program-hero{
    min-height:460px;
}

.program-hero h1{
    font-size:34px;
}

.program-hero p{
    font-size:15px;
}

.hero-tag{
    font-size:12px;
    padding:10px 18px;
}

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

.program-content h2{
    font-size:26px;
}

.program-content p{
    font-size:15px;
}

.program-content ul li{
    font-size:15px;
}

.timeline-card{
    padding:25px;
}

.timeline-card h3{
    font-size:20px;
}

.timeline-card p{
    font-size:14px;
}

.newsletter-box h2{
    font-size:26px;
}

.program-cta h2{
    font-size:30px;
}

.program-cta p{
    font-size:15px;
}

}


/*=====================================================
SCROLL ANIMATIONS
======================================================*/

.fade-up{

    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;
    transform:translateY(0);

}

.fade-left{

    opacity:0;
    transform:translateX(-60px);
    transition:all .8s ease;

}

.fade-left.active{

    opacity:1;
    transform:translateX(0);

}

.fade-right{

    opacity:0;
    transform:translateX(60px);
    transition:all .8s ease;

}

.fade-right.active{

    opacity:1;
    transform:translateX(0);

}


/*=====================================================
IMAGE HOVER EFFECTS
======================================================*/

.program-image{

    overflow:hidden;
    border-radius:24px;

}

.program-image img{

    transition:transform .8s ease;

}

.program-image:hover img{

    transform:scale(1.08);

}


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

.program-card,
.timeline-card,
.partner-card,
.gallery-item{

    transition:all .4s ease;

}

.program-card:hover,
.timeline-card:hover,
.partner-card:hover,
.gallery-item:hover{

    transform:translateY(-10px);

}


/*=====================================================
SMOOTH SCROLL
======================================================*/

html{

    scroll-behavior:smooth;

}


/*=====================================================
TEXT HIGHLIGHT
======================================================*/

.highlight{

    color:var(--primary);
    font-weight:700;

}

.highlight-blue{

    color:var(--secondary);
    font-weight:700;

}

.highlight-yellow{

    color:var(--accent);
    font-weight:700;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef7f3;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*=====================================================
TEXT SELECTION
======================================================*/

::selection{

    background:var(--primary);
    color:#fff;

}





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


.project-gallery{

padding:100px 0;
background:#f8faf8;

}



.gallery-filter{

display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
margin:40px 0;

}



.filter-btn{


border:none;
background:white;
padding:12px 28px;
border-radius:50px;
font-size:15px;
font-weight:600;
cursor:pointer;
color:#2c5f2d;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.4s;

}



.filter-btn:hover,
.filter-btn.active{

background:#2d8a46;
color:white;

}




.gallery-grid{


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

gap:30px;


}



.gallery-item{


position:relative;
height:320px;
overflow:hidden;
border-radius:20px;
cursor:pointer;
box-shadow:
0 15px 35px rgba(0,0,0,.12);

transition:.5s;


}



.gallery-item img{


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


}




.gallery-item:hover img{


transform:scale(1.12);


}




.gallery-overlay{


position:absolute;
left:0;
bottom:0;
width:100%;

padding:30px 25px;


background:
linear-gradient(
transparent,
rgba(0,0,0,.85)
);


color:white;


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

transition:.5s;


}



.gallery-item:hover .gallery-overlay{


opacity:1;

transform:translateY(0);


}



.gallery-overlay h3{


font-size:20px;
margin-bottom:5px;


}



.gallery-overlay span{


font-size:14px;
opacity:.9;


}




.gallery-item.hide{


display:none;

}







@media(max-width:992px){


.gallery-grid{

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

}


}



@media(max-width:600px){


.gallery-grid{

grid-template-columns:1fr;

}



.gallery-item{

height:280px;

}


}


/*=====================================================
END OF PROGRAMS.CSS
Professional NGO Programs Page
Green • Sea Blue • Yellow Theme
======================================================*/