.portfolio-hero{

padding-top:120px;
padding-bottom:80px;
background:#f6ffff;

}

.portfolio-hero h1{

font-family:'Quintessential',serif;
font-size:48px;
color:darkcyan;

}

.portfolio-hero p{

font-size:18px;

}



.portfolio-filter{

padding:30px 0;

}

.filter-buttons{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}

.filter-btn{

border:none;
padding:10px 22px;
border-radius:8px;
background:white;
border:2px solid darkcyan;
color:darkcyan;
font-weight:600;
transition:0.3s;

}

.filter-btn:hover{

background:darkcyan;
color:white;

}

.filter-btn.active{

background:darkcyan;
color:white;

}



.portfolio-gallery{

padding:60px 0;

}

.portfolio-gallery img{

width:100%;
height:300px;
object-fit:cover;
border-radius:10px;
transition:0.4s;

}

.portfolio-gallery img:hover{

transform:scale(1.08);
box-shadow:0 0 20px rgba(0,139,139,0.5);

}



.portfolio-cta{

padding:100px 0;
background:#f6ffff;

}

.portfolio-cta h2{

font-family:'Quintessential',serif;
color:darkcyan;
margin-bottom:20px;

}

.portfolio-cta p{

margin-bottom:30px;

}



/* DARK MODE */

body[data-theme="dark"] .portfolio-hero{

background:#0f172a;

}

body[data-theme="dark"] .portfolio-filter{

background:#0f172a;

}

body[data-theme="dark"] .portfolio-gallery{

background:#0f172a;

}

body[data-theme="dark"] .portfolio-cta{

background:#0f172a;

}

body[data-theme="dark"] .filter-btn{

background:#1e2937;
border-color:gold;
color:gold;

}

body[data-theme="dark"] .filter-btn.active{

background:gold;
color:black;

}