.gallery-container{margin:0 auto;position:relative;}
.gallery-wrapper{position:relative}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:20px;background-color:#fff;transition:opacity .4s ease,transform .4s ease;border-radius:12px}
.gallery.fade-out{opacity:0;transform:scale(.95)}
.gallery-item{height:300px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08);position:relative;cursor:pointer;transition:transform .5s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease}

.gallery-item:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.gallery-item:hover::before{opacity:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery-item:hover img{transform:scale(1.08)}
.navigation-button{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background-color:#fff;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;color:#444;z-index:10;box-shadow:0 4px 15px rgba(0,0,0,.15);transition:all .3s ease;
font-size: 16px;}
.navigation-button:hover{background-color:#b09656;color:#fff;box-shadow:0 6px 18px rgba(52,152,219,.35)}
.navigation-button:focus{outline:0}
.prev{left:-25px}
.next{right:-25px}
.dots-container{display:flex;justify-content:center;gap:8px;margin-top:25px}
.dot{width:12px;height:12px;border-radius:50%;background-color:#e0e0e0;cursor:pointer;transition:all .3s ease;position:relative}
.dot:hover{background-color:#bdbdbd;transform:scale(.7)}
.dot.active{background-color:#b09656}
.dot.active::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;border:2px solid #b09656;opacity:.5;animation:pulse 1.5s infinite}
@keyframes pulse{
0%{transform:scale(1);opacity:.5}
50%{transform:scale(1.2);opacity:.3}
100%{transform:scale(1);opacity:.5}
}
.gallery-title{position:absolute;bottom:10px;left:10px;right:10px;color:#fff;font-size:14px;font-weight:500;opacity:0;transform:translateY(10px);transition:all .3s ease;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* .gallery-item:hover .gallery-title{opacity:1;transform:translateY(0)} */
.page-transition{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(52,152,219,.2);z-index:5;opacity:0;pointer-events:none;transition:opacity .4s ease;border-radius:12px}
.page-transition.active{animation:ripple .8s ease-out}
@keyframes ripple{
0%{transform:scale(.5);opacity:0}
40%{opacity:.3}
100%{transform:scale(2);opacity:0}
}
@media (max-width:768px){
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery-item{height:250px}
.navigation-button{width:40px;height:40px;font-size:18px}
}
@media (max-width:480px){
.gallery{gap:12px}
.gallery-item{height:130px}
.prev{left:-15px}
.next{right:-15px}
.navigation-button{width:35px;height:35px}
.dot{
width:8px;
height:8px;
}
}