.gallery-section{

padding:100px 0;

}

.gallery-filter{

text-align:center;

margin-bottom:50px;

}

.filter-btn{

border:none;

padding:12px 30px;

margin:5px;

background:var(--light);

border-radius:30px;

cursor:pointer;

transition:.3s;

font-weight:600;

}

.filter-btn:hover{

background:var(--secondary);

color:#fff;

}

.filter-btn.active{

background:var(--primary);

color:white;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:15px;

cursor:zoom-in;

transition:.4s;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-overlay{

position:absolute;

bottom:0;

left:0;

right:0;

padding:25px;

background:linear-gradient(transparent,rgba(0,0,0,.85));

color:white;

opacity:0;

transition:.4s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.lightbox{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.92);

z-index:999999;

justify-content:center;

align-items:center;

flex-direction:column;

}

.lightbox img{

max-width:85%;

max-height:80vh;

border-radius:10px;

}

.caption{

color:white;

margin-top:20px;

font-size:20px;

}

.close{

position:absolute;

right:40px;

top:30px;

font-size:45px;

color:white;

cursor:pointer;

}

.prev,

.next{

position:absolute;

top:50%;

font-size:55px;

color:white;

cursor:pointer;

padding:20px;

user-select:none;

}

.prev{

left:30px;

}

.next{

right:30px;

}

.gallery-item.hide{

display:none;

animation:none;

}

.gallery-item.show{

animation:fadeIn .5s;

}

@keyframes fadeIn{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}