.portfolio-hero{

padding:100px 8%;

background:
linear-gradient(
135deg,
#0d47a1,
#2b6ee5
);

text-align:center;

color:white;

}

.portfolio-hero h1{

font-size:55px;

margin-bottom:20px;

}

.portfolio-hero p{

font-size:18px;

opacity:.9;

}



.portfolio-filter{

display:flex;

justify-content:center;

gap:15px;

padding:35px;

flex-wrap:wrap;

}

.portfolio-filter button{

padding:12px 20px;

border:none;

border-radius:30px;

background:white;

font-weight:600;

cursor:pointer;

box-shadow:
0 4px 15px rgba(0,0,0,.06);

}

.portfolio-filter .active{

background:#0d47a1;

color:white;

}



.portfolio-container{

padding:80px 8%;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(min(100%,320px),1fr));

gap:35px;

}



.project-card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}

.project-card:hover{

transform:translateY(-10px);

}


.project-image{

height:250px;

position:relative;

overflow:hidden;

}

.project-image img{

width:100%;

height:100%;

object-fit:cover;

}


.status{

position:absolute;

top:15px;

right:15px;

padding:8px 15px;

border-radius:20px;

font-size:12px;

font-weight:bold;

color:white;

}

.live{

background:#00a651;

}

.progress{

background:#ff6b00;

}



.project-content{

padding:25px;

}


.project-type{

background:#eef4ff;

color:#0d47a1;

padding:6px 14px;

border-radius:20px;

font-size:12px;

font-weight:bold;

}


.project-content h2{

margin-top:15px;

font-size:28px;

}


.project-content p{

margin:15px 0;

line-height:1.7;

color:#666;

}


.tech-stack{

display:flex;

gap:10px;

margin-bottom:20px;

flex-wrap:wrap;

}


.tech-stack span{

padding:8px 14px;

background:#f4f4f4;

border-radius:20px;

font-size:13px;

}


.project-buttons{

display:flex;

gap:10px;

}


.project-buttons a{

flex:1;

text-align:center;

padding:12px;

background:#0d47a1;

color:white;

text-decoration:none;

border-radius:10px;

font-weight:600;

}

@media(max-width:900px){

.portfolio-hero{

padding:76px 6%;

}

.portfolio-hero h1{

font-size:42px;

}

.portfolio-filter{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

padding:24px 6%;

scrollbar-width:none;

}

.portfolio-filter::-webkit-scrollbar{

display:none;

}

.portfolio-filter button{

flex:0 0 auto;

white-space:nowrap;

}

.portfolio-container{

padding:54px 6%;

gap:24px;

}

}

@media(max-width:520px){

.portfolio-hero{

padding:62px 6%;

}

.portfolio-hero h1{

font-size:34px;

}

.portfolio-hero p{

font-size:16px;

}

.project-image{

height:210px;

}

.project-content{

padding:22px;

}

.project-content h2{

font-size:24px;

}

.project-buttons{

flex-direction:column;

}

}