/*=====================================================
    TIMOSA FOUNDATION
    PROJECTS.CSS

    Hero
    Introduction
    Project Categories
    Project Cards
    Impact
    CTA
    Responsive
======================================================*/



/*=====================================================
PROJECT HERO
======================================================*/


.project-hero{

height:90vh;

min-height:650px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

color:white;

}



.project-hero .hero-slider{

position:absolute;

inset:0;

}



.project-hero .slide{

position:absolute;

inset:0;

background-size:cover;

background-position:center;

opacity:0;

transition:opacity 1s ease;

}



.project-hero .slide.active{

opacity:1;

}




.project-hero .overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(0,0,0,.35)
);

}




.project-hero .container{

position:relative;

z-index:2;

}



.project-hero .hero-content{

max-width:750px;

}




.project-hero .subtitle{

display:inline-block;

padding:8px 20px;

background:

rgba(34,197,94,.2);

border:1px solid rgba(255,255,255,.3);

border-radius:30px;

font-size:15px;

margin-bottom:20px;

}



.project-hero h1{

font-size:70px;

font-weight:800;

margin-bottom:20px;

}



.project-hero p{

font-size:18px;

line-height:1.8;

color:#e5e7eb;

}





/* SLIDER DOTS */


.project-hero .slider-navigation{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

z-index:3;

}



.project-hero .dot{

width:12px;

height:12px;

background:white;

opacity:.5;

border-radius:50%;

cursor:pointer;

transition:.3s;

}



.project-hero .dot.active{

width:35px;

border-radius:20px;

opacity:1;

background:#22c55e;

}









/*=====================================================
PROJECT INTRODUCTION
======================================================*/


.project-intro{

padding:100px 0;

background:#f8fafc;

}



.section-title.center{

text-align:center;

max-width:850px;

margin:auto;

}



.section-title span{

color:#16a34a;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

}



.section-title h2{

font-size:42px;

font-weight:800;

color:#1f2937;

margin:15px 0;

}



.section-title p{

color:#64748b;

font-size:16px;

line-height:1.8;

}









/*=====================================================
PROJECT CATEGORY CARDS
======================================================*/


.project-category{


display:grid;


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


gap:30px;


margin-top:60px;


}




.category-card{


background:white;


padding:40px 30px;


border-radius:25px;


text-align:center;


box-shadow:

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



transition:.4s;


}




.category-card:hover{


transform:translateY(-12px);


}




.category-card i{


width:80px;


height:80px;


display:flex;


align-items:center;


justify-content:center;


margin:auto;


border-radius:50%;



font-size:35px;


color:white;



background:

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


}



.category-card h3{


margin:25px 0 15px;


font-size:22px;


color:#1f2937;


}



.category-card p{


color:#64748b;


line-height:1.8;


}









/*=====================================================
FEATURED PROJECTS
======================================================*/


.featured-projects{


padding:100px 0;


background:white;


}





.project-grid{


display:grid;


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


gap:35px;


margin-top:50px;


}




.project-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:

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



transition:.4s;


}





.project-card:hover{


transform:translateY(-15px);


box-shadow:

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


}




.project-image{


height:260px;


overflow:hidden;


}



.project-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}



.project-card:hover img{


transform:scale(1.1);


}






.project-content{


padding:30px;


}



.project-content span{


color:#16a34a;


font-size:14px;


font-weight:700;


}



.project-content h3{


font-size:24px;


margin:15px 0;


color:#1f2937;


}



.project-content p{


color:#64748b;


line-height:1.8;


}




.project-content a{


display:inline-flex;


align-items:center;


gap:10px;


margin-top:20px;


color:#16a34a;


font-weight:600;


}









/*=====================================================
PROJECT IMPACT
======================================================*/


.project-impact{


padding:90px 0;


background:
#3665b9
;
/*linear-gradient(
135deg,
#14532d,
#166534
) */


}



.project-impact .impact-grid{


display:grid;


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


gap:30px;


}




.impact-box{


text-align:center;


color:white;


padding:40px 20px;


background:

rgba(255,255,255,.1);



border-radius:25px;


backdrop-filter:blur(10px);


transition:.4s;


}




.impact-box:hover{


transform:translateY(-10px);


background:

rgba(255,255,255,.18);


}



.impact-box i{


font-size:40px;


margin-bottom:20px;


color:#fde047;


}



.impact-box h2{


font-size:45px;


font-weight:800;


}



.impact-box p{


font-size:17px;


color:#dcfce7;


}










/*=====================================================
PROJECT CTA
======================================================*/


.project-cta{


padding:100px 0;


text-align:center;


background:#f0fdf4;


}



.project-cta h2{


font-size:45px;


font-weight:800;


color:#14532d;


}



.project-cta p{


max-width:750px;


margin:20px auto 40px;


color:#64748b;


font-size:17px;


line-height:1.8;


}



.project-cta a{


margin:10px;


}









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


@media(max-width:1100px){


.project-category,

.project-grid{


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


}



.project-impact .impact-grid{


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


}




.project-hero h1{


font-size:55px;


}


}




@media(max-width:700px){


.project-category,

.project-grid,

.project-impact .impact-grid{


grid-template-columns:1fr;


}




.project-hero{


height:75vh;


}



.project-hero h1{


font-size:42px;


}



.project-hero p{


font-size:16px;


}




.section-title h2{


font-size:32px;


}



}


/*==================================
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:#3665b9;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.4s;

}



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

background:#3665b9;
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;

}


}

/*================================
ICONS in the success story
=================================*/
/*==================================
SUCCESS STORIES
===================================*/


.success-stories{

padding:100px 0;
background:#ffffff;

}



.story-grid{

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

gap:30px;

margin-top:50px;

}





.story-card{


background:#fff;

padding:40px 30px;

border-radius:25px;

text-align:center;

position:relative;

overflow:hidden;

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

transition:.5s;


}



.story-card::before{


content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#2e8b57,
#8bc34a
);


}





.story-card:hover{


transform:
translateY(-12px);


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


}






/* ICON STYLE */


.story-icon{


width:85px;
height:85px;

margin:0 auto 25px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


position:relative;


background:
linear-gradient(
135deg,
#e8f8ed,
#ffffff
);


box-shadow:

0 10px 25px rgba(45,138,70,.15);


}





.story-icon::before{


content:"";


position:absolute;


inset:-6px;


border-radius:50%;


border:2px dashed #2d8a46;


animation:
rotateIcon 10s linear infinite;


}






.story-icon i{


font-size:38px;


color:#2d8a46;


z-index:2;


transition:.4s;


}





.story-card:hover .story-icon i{


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


color:#1c6b35;


}





@keyframes rotateIcon{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}








.story-card h3{


font-size:21px;

color:#173b23;

margin-bottom:15px;

font-weight:700;


}





.story-card p{


font-size:15px;

line-height:1.8;

color:#666;


}








/* DIFFERENT ICON COLORS */


.story-card:nth-child(1)
.story-icon i{


color:#2e8b57;

}





.story-card:nth-child(2)
.story-icon i{


color:#0277bd;


}





.story-card:nth-child(3)
.story-icon i{


color:#7cb342;


}





.story-card:nth-child(4)
.story-icon i{


color:#f9a825;


}








/* RESPONSIVE */


@media(max-width:1100px){


.story-grid{

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

}


}




@media(max-width:600px){


.story-grid{


grid-template-columns:1fr;


}



.story-card{


padding:35px 25px;


}



}


/*==================================
WHY PROJECTS MATTER
===================================*/


.why-projects{

padding:110px 0;

background:#f8faf8;

}



.why-grid{


display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;


}





/* IMAGE */


.why-image{


display:flex;

justify-content:center;


}



.image-wrapper{


position:relative;

width:420px;

height:420px;

background:white;

border-radius:35px;

display:flex;

align-items:center;

justify-content:center;


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


overflow:hidden;


}



.image-wrapper::before{


content:"";

position:absolute;

width:300px;
height:300px;

background:
rgba(46,139,87,.12);


border-radius:50%;


}




.image-wrapper img{


width:65%;

object-fit:contain;

position:relative;

z-index:2;


transition:.5s;


}



.image-wrapper:hover img{


transform:
scale(1.08);


}





.image-badge{


position:absolute;

bottom:35px;

right:30px;


background:#2d8a46;

color:white;


padding:15px 22px;


border-radius:50px;


display:flex;

align-items:center;

gap:10px;


font-size:14px;

font-weight:600;


box-shadow:
0 10px 30px rgba(45,138,70,.35);


z-index:3;


}



.image-badge i{


font-size:20px;


}








/* CONTENT */


.why-content{


max-width:600px;


}



.section-tag{


display:inline-block;


background:#e7f5eb;


color:#2d8a46;


padding:8px 20px;


border-radius:50px;


font-size:14px;

font-weight:600;


margin-bottom:20px;


}





.why-content h2{


font-size:45px;


line-height:1.2;


color:#173b23;


font-weight:800;


margin-bottom:25px;


letter-spacing:-1px;


}



.why-content p{


font-size:16px;


line-height:1.8;


color:#666;


margin-bottom:30px;


}






/* CHECK LIST */


.why-content ul{


display:flex;

flex-direction:column;

gap:18px;


padding:0;

margin:0;

list-style:none;


}




.why-content li{


display:flex;

align-items:center;

gap:15px;


font-size:16px;


font-weight:500;


color:#333;


}





.check-icon{


width:35px;

height:35px;


border-radius:50%;


background:#2d8a46;


display:flex;


align-items:center;

justify-content:center;


color:white;


flex-shrink:0;


box-shadow:
0 8px 20px rgba(45,138,70,.25);


}



.check-icon i{


font-size:14px;


}







/* HOVER */


.why-content li:hover .check-icon{


transform:
scale(1.15);


}



.why-content li:hover{


color:#2d8a46;


}







/* RESPONSIVE */


@media(max-width:991px){


.why-grid{


grid-template-columns:1fr;


gap:50px;


}



.why-content h2{


font-size:36px;


}



.image-wrapper{


width:350px;

height:350px;


}



}




@media(max-width:600px){


.image-wrapper{


width:280px;

height:280px;


}


.image-badge{


bottom:20px;

right:15px;


font-size:12px;


}



.why-content h2{


font-size:30px;


}


}