/* =====================================
   PROJECTS PAGE
===================================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:"Segoe UI",Arial,sans-serif;

background:#fafafa;

color:#222;

}



/* HEADER */


.projects-page{

padding:90px 8%;

}



.projects-header{

text-align:center;

max-width:800px;

margin:auto;

margin-bottom:60px;

animation:fadeDown 1s ease;

}



.projects-header h1{

font-size:52px;

color:#67032F;

margin-bottom:20px;

}



.projects-header p{

font-size:18px;

color:#666;

line-height:1.8;

}





/* GRID */


.all-projects-grid{

display:grid;

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

gap:35px;

}





/* CARD */


.all-project-card{

background:white;

border-radius:20px;

overflow:hidden;

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

opacity:0;

animation:projectShow .8s ease forwards;

transition:.4s;

}



.all-project-card:hover{

transform:translateY(-12px);

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

}




/* IMAGE */


.project-image{

position:relative;

height:250px;

overflow:hidden;

}



.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.all-project-card:hover img{

transform:scale(1.1);

}





/* STATUS */


/* STATUS LABEL */

.project-status{

    position:absolute;

    top:20px;

    right:20px;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    color:white;

    text-transform:uppercase;

    letter-spacing:.5px;

}



/* ONGOING */

.project-status.ongoing{

    background:#198754;

}



/* PLANNED */

.project-status.planned{

    background:#0d6efd;

}



/* COMPLETED */

.project-status.completed{

    background:#6c757d;

}




/* CONTENT */


.project-info{

padding:30px;

}



.project-info h2{

color:#67032F;

margin-bottom:15px;

font-size:24px;

}



.project-info p{

color:#666;

line-height:1.7;

margin-bottom:20px;

}



.project-location{

font-weight:600;

color:#555;

}





/* PAGINATION */


.pagination{

display:flex;

justify-content:center;

gap:10px;

margin-top:60px;

}



.pagination a{

padding:12px 18px;

background:white;

border-radius:8px;

color:#67032F;

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

}



.pagination a:hover,
.pagination .active{

background:#67032F;

color:white;

}





/* ANIMATION */


@keyframes projectShow{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}



@keyframes fadeDown{


from{

opacity:0;

transform:translateY(-30px);

}


to{

opacity:1;

transform:translateY(0);

}


}





/* RESPONSIVE */


@media(max-width:1000px){


.all-projects-grid{

grid-template-columns:1fr 1fr;

}


}



@media(max-width:700px){


.all-projects-grid{

grid-template-columns:1fr;

}


.projects-header h1{

font-size:38px;

}


}