.gallery-section{
    margin-top: 80px;
    padding:80px 5%;
    background:#f7f7f7;
}

.gallery-header{
    text-align:center;
    margin-bottom:40px;
}

.gallery-header h2{
font-size:36px;
}

.gallery-header p{
color:#777;
}

.gallery-filters{
text-align:center;
margin-bottom:40px;
}

.filter-btn{
border:none;
padding:10px 22px;
margin:5px;
background:#eee;
border-radius:25px;
cursor:pointer;
font-weight:600;
transition:0.3s;
}

.filter-btn:hover,
.filter-btn.active{
background:#ff6b35;
color:white;
}

/* MASONRY */

.gallery-grid{
column-count:4;
column-gap:20px;
}

@media(max-width:1100px){
.gallery-grid{column-count:3;}
}

@media(max-width:700px){
.gallery-grid{column-count:2;}
}

.gallery-item{
break-inside:avoid;
margin-bottom:20px;
position:relative;
cursor:pointer;
transition:.3s;
}

.gallery-item.hide{
display:none;
}

.gallery-item img{
width:100%;
border-radius:8px;
display:block;
}

.overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
color:white;
background:linear-gradient(transparent,rgba(0,0,0,.7));
opacity:0;
transition:.3s;
border-radius:0 0 8px 8px;
}

.gallery-item:hover .overlay{
opacity:1;
}

/* LIGHTBOX */

#lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

#lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

#lightbox .close{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}