@extends('layouts.new-layout')
@section('title', 'Gallery')

@section('content')
<a id="button"></a>
<!-- <section class="bg-bb1 pb-5">
<div class="container">
<div class="text-center padding-top-section"><h1 class="text-white">Gallery</h1></div></div>
</section> -->

 @include('partials.parallaxSlider', ['title' => 'Gallery'])
<section>

  <div class="container">
    <div class="row h-100" data-aos="fade-up">
    <h6 class="py-0 text-blue text-uppercase">SEE <div class="line mb-0"></div></h6>
    <h1 class="py-2 mb-5 text-capitalize">Our Gallery</h1>
    
    </div>
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="row justify-content-center ps-3">
         
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="1" src="/new-assets/img/gallery/gallery/IMG_6876.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7044.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7053.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7107.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7111.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7216.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7651.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7690.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/IMG_7691.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/Graphite2.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/Graphite3.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/Graphite4.jpg" class="img-fluid">
          </a>
          <a href="#" class="col-md-4 mb-3 ps-0" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
            <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="/new-assets/img/gallery/gallery/Graphite5.jpg" class="img-fluid">
          </a>
          
          
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="exampleLightbox" tabindex="-1" aria-labelledby="exampleLightboxLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body p-0">
          <div id="lightboxExampleCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="carousel-item text-center active">
              <img src="/new-assets/img/gallery/gallery/IMG_6876.jpg" class="img-fluid">
              </div>
              <div class="carousel-item text-center">
              <img src="/new-assets/img/gallery/gallery/IMG_7044.jpg" class="img-fluid">
              </div>
              <div class="carousel-item text-center">
              <img src="/new-assets/img/gallery/gallery/IMG_7053.jpg" class="img-fluid">
             </div>
              <div class="carousel-item text-center">
              <img src="/new-assets/img/gallery/gallery/IMG_7107.jpg" class="img-fluid">
           </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/IMG_7111.jpg" class="img-fluid">
          </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/IMG_7216.jpg" class="img-fluid">
           </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/IMG_7651.jpg" class="img-fluid">
           </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/IMG_7690.jpg" class="img-fluid">
             </div>
             <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/IMG_7691.jpg" class="img-fluid">
             </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/Graphite2.jpg" class="img-fluid">
             </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/Graphite3.jpg" class="img-fluid">
              </div>
              <div class="carousel-item text-center">
              <img src="/new-assets/img/gallery/gallery/Graphite4.jpg" class="img-fluid">
              </div>
              <div class="carousel-item text-center">
              <img  src="/new-assets/img/gallery/gallery/Graphite5.jpg" class="img-fluid">
              </div>
              
              
              
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#lightboxExampleCarousel" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#lightboxExampleCarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- <section> close ============================-->



@endsection