body{
font-family:'Poppins',sans-serif;
background:#f8f9fb;
}


/* HERO */

.gallery-hero{

height:50vh;

background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
url('../../assets/image/photo/oss.jpeg');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

color:white;
text-align:center;
}

.gallery-hero h1{

font-size:50px;
font-weight:700;
}

.gallery-hero p{

font-size:18px;
opacity:0.9;
margin-top:10px;
}


/* SECTION */

.section-title{

font-size:36px;
font-weight:700;
margin-bottom:30px;
}


/* FILTER BUTTONS */

.filter-buttons{

margin-bottom:20px;
}

.filter-btn{

border:none;
padding:10px 25px;
margin:6px;

background:#eee;

border-radius:30px;

font-weight:500;

cursor:pointer;

transition:0.3s;

}

.filter-btn:hover{

background:#ff7a00;
color:white;
}

.filter-btn.active{

background:#ff7a00;
color:white;
}


/* GALLERY CARD */

.gallery-card{

position:relative;

overflow:hidden;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

}

.gallery-card img{

width:100%;
height:260px;

object-fit:cover;

transition:0.5s;

}

.gallery-card:hover img{

transform:scale(1.1);
}


/* OVERLAY */

.gallery-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

display:flex;

flex-direction:column;

align-items:center;
justify-content:center;

text-align:center;

opacity:0;

transition:0.4s;

color:white;
padding:20px;

}

.gallery-card:hover .gallery-overlay{

opacity:1;
}

.gallery-overlay button{

margin-top:10px;

border:none;

width:45px;
height:45px;

background:#ff7a00;

border-radius:50%;

color:white;

font-size:18px;

}


/* MODAL */

.gallery-modal img{

border-radius:10px;
}


/* ANIMATION */

@keyframes fadeIn{

from{
opacity:0;
transform:scale(0.95);
}

to{
opacity:1;
transform:scale(1);
}

}


/* MOBILE */

@media(max-width:768px){

.gallery-hero h1{

font-size:32px;

}

.gallery-card img{

height:220px;

}

}