<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome To || Shyam Event</title>
  <link rel="icon" href="assets/img/favicon.png">
  <!-- CSS only -->
   <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
   <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
   <!-- fancybox -->
   <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
   <!-- Font Awesome 6 -->
   <link rel="stylesheet" href="assets/css/fontawesome.min.css">
   <!-- style -->
   <link rel="stylesheet" href="assets/css/style.css">
   <!-- responsive -->
   <link rel="stylesheet" href="assets/css/responsive.css">
   <!-- color -->
   <link rel="stylesheet" href="assets/css/color.css">
 </head>
<body>
  <?php include "header.php" ?>
<section class="banner" style="background-image:url(assets/img/background.jpg)">
  <div class="container">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="index.php">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Gallery</li>
    </ol>
    <h2>Gallery</h2>
  </div>
</section>
<section class="gallery-section">
  <div class="container">

    <div class="gallery-grid">

      <!-- Item 1 -->
      <a href="assets/img/1.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/1.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/2.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/2.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/3.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/4.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/5.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/5.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/6.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/6.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/7.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/7.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/8.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/8.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 1 -->
      <a href="assets/img/9.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/9.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 2 -->
      <a href="assets/img/10.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/10.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 3 -->
      <a href="assets/img/11.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/11.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 4 -->
      <a href="assets/img/12.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/12.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 5 -->
      <a href="assets/img/13.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/13.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 6 -->
      <a href="assets/img/14.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/14.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/15.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/15.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/16.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/16.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/17.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/17.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/18.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/18.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/19.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/19.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/20.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/20.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/21.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/21.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/22.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/22.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/23.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/23.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/24.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/24.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/25.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/25.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/26.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/26.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/27.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/27.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/28.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/28.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/29.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/29.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/30.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/30.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/31.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/31.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/32.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/32.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/33.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/33.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/34.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/34.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/35.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/35.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/36.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/36.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/37.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/37.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/38.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/38.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/39.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/39.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/40.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/40.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/41.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/41.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/42.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/42.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/43.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/43.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/44.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/44.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/45.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/45.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/46.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/46.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/47.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/47.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/48.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/48.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/49.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/49.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/50.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/50.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/51.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/51.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/52.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/52.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/53.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/53.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/54.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/54.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/55.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/55.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/56.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/56.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/57.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/57.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/58.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/58.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/59.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/59.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/60.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/60.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/61.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/61.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/62.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/62.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/63.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/63.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/64.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/64.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/65.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/65.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/66.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/66.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/67.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/67.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>

      <!-- Item 7 -->
      <a href="assets/img/68.jpeg" data-fancybox="gallery" class="gallery-item">
        <img src="assets/img/68.jpeg" alt="">
        <div class="gallery-overlay">
          <i class="fa-solid fa-plus"></i>
        </div>
      </a>
      
      
    </div>

  </div>
</section>

<style type="text/css">
  .gallery-section {
  padding: 70px 0;
  background: #f4f4f4;
}

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

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: 0.5s ease;
  display: block;
}

/* Overlay */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s ease;
}

.gallery-overlay i {
  color: #fff;
  font-size: 28px;
  background: #ff8800;
  padding: 15px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.4s ease;
}

/* Hover Effects */
.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item:hover .gallery-overlay i {
  transform: scale(1);
}

/* Responsive */
@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

</style>

<script>
  $('[data-fancybox="gallery"]').fancybox({
    buttons: ["zoom","slideShow","thumbs","close"],
    animationEffect: "zoom-in-out",
    transitionEffect: "slide"
  });
</script>


  <?php include "footer.php" ?>
<!-- jQuery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<!-- fancybox -->
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
