@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Poppins,sans-serif;
background:linear-gradient(135deg,#eef2ff,#f8fafc);
padding:40px;
}
.gallery-container{
max-width:1300px;margin:auto;background:#fff;border-radius:24px;
overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.12)
}
.slider{position:relative}
.main-image{width:100%;height:700px;object-fit:cover;display:block}
.slider:after{
content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.2),transparent)
}
.image-info{
position:absolute;left:50px;bottom:120px;z-index:5;color:#fff;max-width:700px
}
.badge{
display:inline-block;background:rgba(255,255,255,.15);
backdrop-filter:blur(10px);padding:8px 14px;border-radius:20px;margin-bottom:15px
}
.image-info h2{font-size:48px;font-weight:700}
.image-info p{margin-top:10px;font-size:17px}
.nav-btn{
position:absolute;top:50%;transform:translateY(-50%);z-index:10;
width:60px;height:60px;border:none;border-radius:50%;
background:rgba(255,255,255,.15);backdrop-filter:blur(10px);
color:#fff;font-size:26px;cursor:pointer
}
.prev{left:25px}.next{right:25px}
.thumbnail-container{
display:flex;gap:14px;overflow:auto;padding:20px
}
.thumbnail{
width:140px;height:90px;object-fit:cover;border-radius:14px;
border:3px solid transparent;cursor:pointer;flex-shrink:0;
transition:.3s
}
.thumbnail:hover{transform:translateY(-6px)}
.thumbnail.active{
border-color:#3b82f6;
box-shadow:0 10px 30px rgba(59,130,246,.35)
}