<!DOCTYPE html>
<html lang="en">
<!--<< Header Area >>-->

<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="iamlabib">
    <meta name="description" content="Laxary- Hotel & Resort Booking HTML Template">
    <!-- ======== Page title ============ -->
    <?php include("head.php"); ?>

    <style>
        /* Lightbox Overlay */
        .lightbox-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .lightbox-overlay.active {
            display: flex;
        }

        .lightbox-container {
            position: relative;
            max-width: 90%;
            max-height: 90vh;
        }

        .lightbox-container img {
            max-width: 100%;
            max-height: 85vh;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
            display: block;
        }

        /* Close Button */
        .lightbox-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: #fff;
            font-size: 32px;
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s;
        }

        .lightbox-close:hover {
            color: #ccc;
        }

        /* Prev / Next Arrows */
        .lightbox-prev,
        .lightbox-next {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: none;
            font-size: 28px;
            padding: 12px 18px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
            z-index: 10000;
        }

        .lightbox-prev {
            left: 16px;
        }

        .lightbox-next {
            right: 16px;
        }

        .lightbox-prev:hover,
        .lightbox-next:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Clickable gallery images */
        .team-image img {
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .team-image img:hover {
            opacity: 0.85;
        }
    </style>
</head>

<body>
    <?php include("menu.php"); ?>

    <!-- Breadcrumb Section Start -->
    <div class="gt-breadcrumb-wrapper bg-cover" style="background-color:#1F6F4A;">
        <div class="container">
            <div class="gt-page-heading">
                <div class="gt-breadcrumb-sub-title">
                    <h1 class="text-white wow fadeInUp" data-wow-delay=".3s">Gallery</h1>
                </div>
                <ul class="gt-breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li><a href="index">Home</a></li>
                    <li><i class="fa-solid fa-chevron-right"></i></li>
                    <li>Our Gallery</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- GT Team Section Start -->
    <section class="team-section-3 fix section-padding">
        <div class="container">
            <div class="row g-4">
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                            <!-- <img src="assets/gallery/gallery1.jpg" alt="Gallery Image 1" class="gallery-img"> -->
                            <img src="assets/gallery/gallery1.jpg"  data-full="assets/gallery-full/gallery1.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                            <!-- <img src="assets/gallery/gallery2.jpg" alt="Gallery Image 2" class="gallery-img"> -->
                              <img src="assets/gallery/gallery2.jpg"  data-full="assets/gallery-full/gallery2.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery3.jpg"  data-full="assets/gallery-full/gallery3.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                               <img src="assets/gallery/gallery4.jpg"  data-full="assets/gallery-full/gallery4.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                              <img src="assets/gallery/gallery5.jpg"  data-full="assets/gallery-full/gallery5.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                        <img src="assets/gallery/gallery6.jpg"  data-full="assets/gallery-full/gallery6.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                              <img src="assets/gallery/gallery7.jpg"  data-full="assets/gallery-full/gallery7.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery8.jpg"  data-full="assets/gallery-full/gallery8.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                         <img src="assets/gallery/gallery9.jpg"  data-full="assets/gallery-full/gallery9.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery10.jpg"  data-full="assets/gallery-full/gallery10.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                           <img src="assets/gallery/gallery11.jpg"  data-full="assets/gallery-full/gallery11.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                           <img src="assets/gallery/gallery12.jpg"  data-full="assets/gallery-full/gallery12.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery13.jpg"  data-full="assets/gallery-full/gallery13.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery14.jpg"  data-full="assets/gallery-full/gallery14.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                               <img src="assets/gallery/gallery15.jpg"  data-full="assets/gallery-full/gallery15.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                               <img src="assets/gallery/gallery16.jpg"  data-full="assets/gallery-full/gallery16.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery17.jpg"  data-full="assets/gallery-full/gallery17.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                      <img src="assets/gallery/gallery18.jpg"  data-full="assets/gallery-full/gallery18.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                            <img src="assets/gallery/gallery19.jpg"  data-full="assets/gallery-full/gallery19.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                              <img src="assets/gallery/gallery20.jpg"  data-full="assets/gallery-full/gallery20.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="team-card-item-3 mt-0">
                        <div class="team-image">
                             <img src="assets/gallery/gallery21.jpg"  data-full="assets/gallery-full/gallery21.jpeg"class="gallery-img">
                        </div>
                    </div>
                </div>











            </div>
        </div>
    </section>

    <!-- Lightbox Markup -->
    <div class="lightbox-overlay" id="lightbox">
        <div class="lightbox-container">
            <span class="lightbox-close" id="lightboxClose">&times;</span>
            <img src="" alt="Popup Image" id="lightboxImg">
        </div>
        <button class="lightbox-prev" id="lightboxPrev">&#10094;</button>
        <button class="lightbox-next" id="lightboxNext">&#10095;</button>
    </div>

    <?php include("footer.php"); ?>

    <script>
        const galleryImgs = document.querySelectorAll('.gallery-img');
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightboxImg');
        const closeBtn = document.getElementById('lightboxClose');
        const prevBtn = document.getElementById('lightboxPrev');
        const nextBtn = document.getElementById('lightboxNext');

        let currentIndex = 0;

        function openLightbox(index) {
            currentIndex = index;
            lightboxImg.src = galleryImgs[index].getAttribute('data-full') || galleryImgs[index].src;
            lightboxImg.alt = galleryImgs[index].alt;
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeLightbox() {
            lightbox.classList.remove('active');
            document.body.style.overflow = '';
        }

        function showPrev() {
            currentIndex = (currentIndex - 1 + galleryImgs.length) % galleryImgs.length;
           lightboxImg.src = galleryImgs[currentIndex].getAttribute('data-full') || galleryImgs[currentIndex].src;
            lightboxImg.alt = galleryImgs[currentIndex].alt;
        }

        function showNext() {
            currentIndex = (currentIndex + 1) % galleryImgs.length;
            lightboxImg.src = galleryImgs[currentIndex].getAttribute('data-full') || galleryImgs[currentIndex].src;
            lightboxImg.alt = galleryImgs[currentIndex].alt;
        }

        // Attach click to each gallery image
        galleryImgs.forEach((img, i) => {
            img.addEventListener('click', () => openLightbox(i));
        });

        closeBtn.addEventListener('click', closeLightbox);
        prevBtn.addEventListener('click', showPrev);
        nextBtn.addEventListener('click', showNext);

        // Close on overlay click (outside image)
        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox) closeLightbox();
        });

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (!lightbox.classList.contains('active')) return;
            if (e.key === 'Escape') closeLightbox();
            if (e.key === 'ArrowLeft') showPrev();
            if (e.key === 'ArrowRight') showNext();
        });
    </script>
</body>

</html>