/* HERO */

.gallery-hero{
background:url("../assests/img.png") center top / cover no-repeat;
min-height:700px;
display:flex;
align-items:center;
position:relative;
padding:60px 0;
}

.gallery-hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.35));
}

.gallery-hero .container{
position:relative;
z-index:2;
text-align:center;
}

.gallery-hero .section-title{
color:#fff;
font-size:42px;
margin-bottom:10px;
}

.gallery-hero .section-sub{
color:#eee;
font-size:18px;
}

.gallery-hero .badge{
color:#fff;
border:1px solid rgba(255,255,255,.6);
padding:6px 16px;
border-radius:30px;
display:inline-block;
margin-bottom:15px;
}

/* GALLERY */

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.gallery-grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
transition:.3s;
}

.gallery-grid img:hover{
transform:scale(1.05);
}
/* ===============================
   WHATSAPP FLOAT
================================*/
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  z-index: 2000;
  transition: .3s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Pulse */
.whatsapp-float::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, .6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: .7;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* RESPONSIVE */

@media(max-width:900px){
.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){

.gallery-grid{
grid-template-columns:1fr;
}

.gallery-hero{
min-height:280px;
}

.gallery-hero .section-title{
font-size:28px;
}

.gallery-hero .section-sub{
font-size:15px;
}

}
/* IMAGE MODAL */

.img-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}

.img-modal img{
max-width:90%;
max-height:90%;
border-radius:10px;
animation:zoom .3s;
}

@keyframes zoom{
from{transform:scale(.8)}
to{transform:scale(1)}
}

.img-modal .close{
position:absolute;
top:20px;
right:30px;
color:#fff;
font-size:40px;
cursor:pointer;
}

#caption{
color:#fff;
margin-top:12px;
text-align:center;
font-size:14px;
}