Gallery section with lightbox image

                                        <!-- Custom Style -->
    <style>
      .nav-for-slider .swiper-slide {
        cursor: pointer;
        margin-right: 0 !important;
      }
      .swiper-wrapper {
        height: auto;
      }
      .nav-for-slider .swiper-slide img {
        border: 2px solid transparent;
        border-radius: 28px;
      }
      .nav-for-slider .swiper-slide-thumb-active img {
        border-color: rgb(79 70 229);
      }
      
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-image {
  display: block;
  margin: auto;
  max-width: 100%;
 max-height: 100%;
}
.close {
  color: #fff;
  font-size: 3em;
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.gallery {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.gallery img {
  max-width: 100%;
  cursor: pointer;
}
.gallery img:hover {
  max-width: 100%;
  cursor: pointer;
}
    </style>
     <section class="py-24 relative">
      <div class="mx-auto max-w-7xl px-4 sm:px-5 lg:px-6">
        <div class="mb-16">
            <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-normal pb-2.5">Our Gallery</h2>
            <p class="w-full text-center text-gray-600 text-lg font-normal leading-8">Explore the essence of beauty in our gallery's intimate space.</p>
        </div>
        <div class="flex flex-col-reverse  gap-8 mx-auto">
          
            <div class="slider-box flex flex-col xl:flex-row gap-8">
             
              <div class="box xl:w-[1062px] w-full gallery">
                <div class="swiper main-slide-carousel swiper-container relative">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943683.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                   
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943709.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943720.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943731.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="xl:w-[126px] w-full">
                <div class="nav-for-slider">
                  <div class="swiper-wrapper justify-center md:gap-7 gap-4 xl:flex-col">
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943683.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943709.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]" >
                      <img src="https://pagedone.io/asset/uploads/1713943720.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943731.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>                   
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lightbox" id="lightbox">
          <span class="close" id="close">&times;</span>
          <img src="" alt="" class="lightbox-image" id="lightbox-image">
        </div>
      </div>
    </section>  
  <!-- Custom Slider -->
    <script>
      var swiper_thumbs = new Swiper(".nav-for-slider", {
        loop: true,
        spaceBetween: 30,
        slidesPerView: 4,
      });
      var swiper = new Swiper(".main-slide-carousel", {
        slidesPerView: 1,
        effect: "fade",
        thumbs: {
          swiper: swiper_thumbs,
        },
      });
      
// Get references to elements
const gallery = document.querySelector('.gallery');
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightbox-image');
const closeButton = document.getElementById('close');

// Add event listener to each image
gallery.addEventListener('click', e => {
  if (e.target.classList.contains('gallery-image')) {
    const imageSrc = e.target.src;
    lightboxImage.src = imageSrc;
    lightbox.style.display = 'flex';
  }
});

// Close lightbox when close button is clicked
closeButton.addEventListener('click', () => {
  lightbox.style.display = 'none';
});

// Close lightbox when clicking outside the image
lightbox.addEventListener('click', e => {
  if (e.target === lightbox) {
    lightbox.style.display = 'none';
  }
});
    </script>