/* SECTION SPACING */

.portfolio-section{
padding:100px 0;
}



/* GRID */

.portfolio-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:50px;

}



/* CARD */

.project-card{

display:block;

text-decoration:none;

color:#111;

border-radius:16px;

overflow:hidden;

background:#fff;

box-shadow:0 12px 35px rgba(0,0,0,0.07);

transition:all .35s ease;

}



.project-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(0,0,0,0.15);

}



/* IMAGE */

.project-image{

position:relative;

height:280px;

overflow:hidden;

}

.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .6s ease;

}



.project-card:hover img{

transform:scale(1.08);

}



/* GRADIENT OVERLAY */

.project-overlay{

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,0.45),
rgba(0,0,0,0.05)
);

opacity:0;

transition:opacity .35s ease;

}



.project-card:hover .project-overlay{

opacity:1;

}



/* CONTENT */

.project-info{
padding:32px;
text-align:left;
}

.project-info h3{
font-size:24px;
font-weight:600;
margin-bottom:6px;
}

.project-info p{
font-size:15px;
color:#6f6f6f;
margin-bottom:18px;
text-align:left;
}



/* ARROW */

.project-arrow{

font-size:14px;

font-weight:600;

color:#25c6c4;

display:inline-block;

transition:transform .25s ease;

}



.project-card:hover .project-arrow{

transform:translateX(6px);

}



/* HERO SECTION */

.portfolio-hero{

padding:140px 0 90px;

text-align:center;

background:#fafafa;

border-bottom:1px solid #eee;

}



.hero-content{

max-width:760px;

margin:auto;

}



.portfolio-hero h1{

font-size:44px;

font-weight:700;

margin-bottom:18px;

letter-spacing:-0.5px;

}



.portfolio-desc{

font-size:18px;

line-height:1.7;

color:#666;

}


/* RESPONSIVE */

@media(max-width:1000px){

.portfolio-grid{

grid-template-columns:1fr;

gap:40px;

}

}



@media(max-width:600px){

.project-image{

height:220px;

}

.portfolio-hero h1{

font-size:32px;

}

}