/* ==========================================
PORTFOLIO HERO
========================================== */

.page-hero{

padding:100px 0 35px;

background:#F8FAFC;

}

.page-title{

max-width:720px;

margin:auto;

text-align:center;

}

.page-title h1{

font-size:34px;

font-weight:800;

color:#0F172A;

margin-bottom:20px;

}

.page-title p{

font-size:15px;

color:#64748B;

line-height:1.8;

}

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


.portfolio-section{

padding:25px 0 80px;

}

.portfolio-grid{

display:grid;

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

gap:28px;

}

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

.portfolio-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 10px 30px rgba(15,23,42,.07);

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}

.portfolio-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(15,23,42,.12);

}

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

.portfolio-image{

position:relative;

overflow:hidden;

display:block;

aspect-ratio:4/3;

background:#EEF2F7;

}

.portfolio-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-category{

position:absolute;

left:18px;

top:18px;

background:#1E3A8A;

color:#fff;

padding:8px 14px;

border-radius:40px;

font-size:12px;

font-weight:700;

letter-spacing:.5px;

}

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

.portfolio-content{

padding:24px;

display:flex;

flex-direction:column;

flex:1;

}

.portfolio-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    color:#64748B;
    margin-bottom:16px;
    gap:10px;
    flex-wrap:wrap;
}

.portfolio-meta span{

display:flex;

align-items:center;

gap:6px;

}



.portfolio-content h3{
    font-size:14px;
    font-weight:700;
    line-height:1.5;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.portfolio-content h3 a{

color:#0F172A;

text-decoration:none;

transition:.3s;

}

.portfolio-content h3 a:hover{

color:#2563EB;

}

.portfolio-content p{

font-size:15px;

line-height:1.8;

color:#64748B;

margin-bottom:24px;

flex:1;

}

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

.portfolio-footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

padding-top:18px;

border-top:1px solid #EEF2F7;

font-size:14px;

}

.portfolio-footer span{

display:flex;

align-items:center;

gap:6px;

color:#64748B;

}

.portfolio-link{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

text-decoration:none;

color:#1E3A8A;

transition:.3s;

}

.portfolio-link:hover{

gap:12px;

color:#2563EB;

}

/* ==========================================
EMPTY
========================================== */

.portfolio-empty{

grid-column:1/-1;

text-align:center;

padding:100px 20px;

background:#F8FAFC;

border-radius:20px;

}

.portfolio-empty h2{

font-size:28px;

color:#0F172A;

margin-bottom:12px;

}

.portfolio-empty p{

color:#64748B;

}

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

.pagination{

display:flex;

justify-content:center;

gap:12px;

margin-top:60px;

}

.pagination a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:#F1F5F9;

color:#0F172A;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.pagination a:hover{

background:#1E3A8A;

color:#fff;

}

.pagination a.active{

background:#1E3A8A;

color:#fff;

}

/* ==========================================
RESPONSIVE
========================================== */
@media (max-width:768px){

.page-hero{

padding:120px 0 25px;

}

.page-title{

padding:0 20px;

}

.page-title h1{

font-size:32px;

margin-bottom:12px;

}

.page-title p{

font-size:14px;

line-height:1.8;

}

.portfolio-section{

padding:20px 0 60px;

}

.portfolio-grid{

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

gap:18px;

}

}