/*===================================================
        PROJECT ARCHIVE
===================================================*/

.projects-banner{

position:relative;
padding:120px 0;
background:linear-gradient(135deg,#0d1b2a,#1b263b);
text-align:center;
color:#fff;

}

.projects-banner h1{

font-size:58px;
font-family:'Cormorant Garamond',serif;
margin-bottom:15px;

}

.projects-banner p{

max-width:700px;
margin:auto;
font-size:20px;
opacity:.9;

}

/*============================================*/

.projects-listing{

padding:90px 0;
background:#f8f8f8;

}

.projects-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:35px;

}

.project-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-image{

display:block;
overflow:hidden;

}

.project-image img{

width:100%;
height:250px;
object-fit:cover;
transition:.5s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-content{

padding:30px;

}

.project-developer{

display:inline-block;
font-size:13px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
color:#b68d40;
margin-bottom:12px;

}

.project-content h2{

margin-bottom:18px;
font-size:30px;
font-family:'Cormorant Garamond',serif;

}

.project-content h2 a{

color:#1d1d1d;
text-decoration:none;

}

.project-content p{

margin-bottom:12px;
color:#555;

}

.project-content i{

width:22px;
color:#b68d40;

}

.project-price{

margin:25px 0;

font-size:16px;

}

.project-price strong{

display:block;
margin-top:6px;
font-size:30px;
color:#b68d40;

}

.project-content .primary-btn{

width:100%;
justify-content:center;

}

/*===================================================
                PAGINATION
===================================================*/

.pagination{

margin-top:70px;
display:flex;
justify-content:center;

}

.pagination .nav-links{

display:flex;
gap:12px;
flex-wrap:wrap;

}

.pagination .page-numbers{

width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
background:#fff;
color:#1d1d1d;
border-radius:50%;
box-shadow:0 10px 30px rgba(0,0,0,.08);
font-weight:600;
transition:.3s;

}

.pagination .page-numbers:hover,

.pagination .current{

background:#b68d40;
color:#fff;

}


/*===================================================
                NO PROJECTS
===================================================*/

.no-projects{

background:#fff;
padding:80px 40px;
text-align:center;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.no-projects h2{

font-size:40px;
font-family:'Cormorant Garamond',serif;
margin-bottom:15px;
color:#1d1d1d;

}

.no-projects p{

font-size:18px;
color:#555;

}


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

.project-card{

opacity:0;
transform:translateY(40px);
animation:fadeProject .8s forwards;

}

.project-card:nth-child(2){

animation-delay:.1s;

}

.project-card:nth-child(3){

animation-delay:.2s;

}

.project-card:nth-child(4){

animation-delay:.3s;

}

.project-card:nth-child(5){

animation-delay:.4s;

}

.project-card:nth-child(6){

animation-delay:.5s;

}

@keyframes fadeProject{

to{

opacity:1;
transform:translateY(0);

}

}

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

@media(max-width:992px){

.projects-banner{

padding:90px 0;

}

.projects-banner h1{

font-size:48px;

}

.projects-grid{

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

}

}

@media(max-width:768px){

.projects-banner{

padding:70px 0;

}

.projects-banner h1{

font-size:38px;

}

.projects-banner p{

font-size:17px;

}

.projects-listing{

padding:70px 0;

}

.projects-grid{

grid-template-columns:1fr;

gap:25px;

}

.project-content{

padding:25px;

}

.project-content h2{

font-size:26px;

}

.project-price strong{

font-size:26px;

}

.pagination .page-numbers{

width:44px;
height:44px;

}

}

@media(max-width:480px){

.projects-banner h1{

font-size:32px;

}

.projects-banner p{

font-size:16px;

}

.project-image img{

height:220px;

}

.project-content{

padding:20px;

}

.project-content .primary-btn{

width:100%;

}

}