.lightboxpreview {
   transition: all .3s linear;
padding-top:60%;
  cursor:pointer;
  background-size:cover;
}
   
.lightbox-content {
max-height:75svh;
  height:75svh;
}

.lightbox-close { 
  cursor:pointer;
    margin-left: auto;
  position:absolute;
  right:-30px;
  top:-30px;
  color:white;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;}

.modalscale {transform:scale(0);
opacity:0;}



.lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{transition:all .4s ease-in-out;}
.lightbox_img_wrap {padding-top:65%;
  position:relative;
  overflow:hidden;
}
.lightbox-enabled:hover {
  transform:scale(1.1)
}
.lightbox-enabled {width:100%;
height:100%;
  position:absolute;
  top:0;
object-fit:cover;
cursor:pointer;
border:6px solid #fff;}

.lightbox-container {width:100svw;
height:100svh;
position:fixed;
top:0;
left:0;
  display:flex;
  align-items:center;
  justify-content:center;
background-color:rgba(0,0,0,.6);
z-index:9999;
opacity:0;
pointer-events:none;
}

.lightbox-container.active {
  opacity:1;
  pointer-events:all;
}
.lightbox-image-wrapper {
  display:flex;
  transform:scale(0);
  align-items:center;
  justify-content:center;
  max-width:90vw;
  max-height:90vh;
  position:relative;
}
.lightbox-container.active .lightbox-image-wrapper {transform:scale(1);}
.lightbox-btn, #close {
  color:white;
  z-index:9999999;
 cursor:pointer; 
  position:absolute;
  font-size:50px;
}

.left {left:50px;}
.right {right:50px;}
#close {top:50px;
right:50px;}

.lightbox-image {
  width:100%;
  max-height:95vh;
  object-fit:cover;
 }

@keyframes slideleft {
  33% {transform:translateX(-300px);
  opacity:0;
  }
  66% {transform:translateX(300px);
  opacity:0;
  }
}


.slideleft {
   animation-name: slideleft;
 animation-duration: .5s; 
 animation-timing-function: ease; 
}
@keyframes slideright {
  33% {transform:translateX(300px);
  opacity:0;}
  66% {transform:translateX(-300px);
  opacity:0;}
}


.slideright{
   animation-name: slideright;
 animation-duration: .5s; 
 animation-timing-function: ease; 
}



/* Style for the gallery section */
        .gallery-section {
            text-align: center;
			background-color:#edf4f7;
        }
        .tabs {
            margin-bottom: 20px;
        }
        .tabs button {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
            background-color: #169b81;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
			            color: white;

        }
        .tabs button.active {
            background-color: #000;
            color: white;
        }
		  .tabs button:hover {
            background-color: #fff;
            color: black;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .gallery div {
            display: none; /* Initially hidden, handled via JS */
            margin: 10px;
        }
        .gallery img {
    width: 300px;
    height: 250px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 5px solid #fff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery img:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 30px rgba(22, 155, 129, 0.3);
}