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

<head>
    <title>zemaraim — Hotel Website Template</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <meta content="zemaraim — Hotel Website Template" name="description" >
    <meta content="" name="keywords" >
    <meta content="" name="author" >
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper.css" rel="stylesheet" type="text/css" >
    <link href="css/style.css" rel="stylesheet" type="text/css" >
    <link href="css/coloring.css" rel="stylesheet" type="text/css" >
    <!-- color scheme -->
    <link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css" >

</head>

<body>
    <div id="wrapper">
        <a href="#" id="back-to-top"></a>
        
        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <!-- header begin -->
        <?php include 'header.php'; ?>
        <!-- header close -->
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">

            <div id="top"></div>

            <section class="page-breadcrumb-hero" style="--page-hero-bg: url('images/background/3.webp');">
                <div class="container">
                    <div class="page-breadcrumb-content text-center">
                        <span class="page-breadcrumb-kicker">About Zemaraim</span>
                        <h1>About Us</h1>
                        <p>Discover the story, service values, and guest-first experience that define our hotel booking journey.</p>
                        <ul class="page-breadcrumb-list">
                            <li><a href="index.php">Home</a></li>
                            <li class="active">About Us</li>
                        </ul>
                    </div>
                </div>
            </section>
            
            <section class="about-modern-section">
                <div class="container">
                    <div class="row g-4 g-lg-5 align-items-center">
                        <div class="col-12 col-lg-6 wow fadeInLeft" data-wow-delay=".1s">
                            <div class="about-modern-card">
                                <span class="about-modern-kicker">Our Heritage</span>
                                <h2 class="about-modern-title">A legacy of luxury that inspires every booking</h2>
                                <p class="about-modern-text">At Zemaraim, every stay is designed around comfort, elegance, and consistent service. We combine premium rooms, warm hospitality, and modern amenities to deliver memorable guest experiences.</p>
                                <div class="about-modern-points">
                                    <div class="about-point-item"><i class="icofont-check-circled about-point-icon"></i>Personalized guest support from check-in to checkout</div>
                                    <div class="about-point-item"><i class="icofont-check-circled about-point-icon"></i>Luxury rooms and suites for business and leisure travel</div>
                                    <div class="about-point-item"><i class="icofont-check-circled about-point-icon"></i>Prime location near key city attractions and business hubs</div>
                                </div>
                                <div class="about-modern-cta">
                                    <a href="rooms.php" class="btn-main">Explore Rooms</a>
                                    <a href="reservation.php" class="btn-main btn-line">Book Your Stay</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 wow fadeInRight" data-wow-delay=".2s">
                            <div class="about-modern-gallery">
                                <div class="about-gallery-main">
                                    <img src="images/misc/7.webp" alt="Zemaraim hotel overview">
                                    <div class="about-gallery-badge">
                                        <span>Years of Excellence</span>
                                        <strong>25+</strong>
                                    </div>
                                </div>
                                <div class="about-gallery-sub-wrap">
                                    <div class="about-gallery-sub"><img src="images/gallery-square/1.webp" alt="Premium room"></div>
                                    <div class="about-gallery-sub"><img src="images/gallery-square/2.webp" alt="Hotel ambience"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-stats-modern-section">
                <div class="container">
                    <div class="about-section-head text-center">
                        <span class="about-modern-kicker">Key Statistics</span>
                        <h2 class="about-modern-title">Trusted by guests worldwide</h2>
                        <p class="about-modern-text">Our numbers reflect reliable service, premium stays, and guest satisfaction that drives repeat bookings.</p>
                    </div>
                    <div class="row g-3 g-md-4">
                        <div class="col-6 col-lg-3">
                            <div class="about-stats-card">
                                <strong>120+</strong>
                                <span>Luxury Rooms</span>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="about-stats-card">
                                <strong>5 Star</strong>
                                <span>Service Rating</span>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="about-stats-card">
                                <strong>50k+</strong>
                                <span>Happy Guests</span>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="about-stats-card">
                                <strong>24/7</strong>
                                <span>Guest Support</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-choose-modern-section">
                <div class="container">
                    <div class="about-section-head text-center">
                        <span class="about-modern-kicker">Why Choose Us</span>
                        <h2 class="about-modern-title">Experience designed to attract every traveler</h2>
                        <p class="about-modern-text">From room comfort to dining and wellness, everything is tailored to make guests book with confidence.</p>
                    </div>
                    <div class="row g-3 g-md-4">
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-diamond"></i></div>
                                <h4>Premium Comfort</h4>
                                <p>Elegant rooms with modern features for a restful and productive stay.</p>
                            </article>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-spoon-and-fork"></i></div>
                                <h4>Fine Dining</h4>
                                <p>Delightful dining options with curated menus for every preference.</p>
                            </article>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-heart"></i></div>
                                <h4>Wellness and Spa</h4>
                                <p>Relaxing spa services and facilities that enhance your full stay experience.</p>
                            </article>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-conference"></i></div>
                                <h4>Event Spaces</h4>
                                <p>Flexible venues for meetings, celebrations, and corporate gatherings.</p>
                            </article>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-location-pin"></i></div>
                                <h4>Prime Location</h4>
                                <p>Well-connected location close to key places guests want to access quickly.</p>
                            </article>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4">
                            <article class="about-choose-card">
                                <div class="about-choose-icon"><i class="icofont-headphone-alt"></i></div>
                                <h4>24/7 Support</h4>
                                <p>Dedicated team available around the clock for seamless guest assistance.</p>
                            </article>
                        </div>
                    </div>
                </div>
            </section>

            <section class="about-gallery-modern-section">
                <div class="container">
                    <div class="about-section-head text-center">
                        <span class="about-modern-kicker">Gallery</span>
                        <h2 class="about-modern-title">A closer look at your next stay</h2>
                        <p class="about-modern-text">Explore highlights from our rooms, dining, and guest spaces before you book.</p>
                    </div>
                    <div class="about-page-gallery-grid">
                        <a href="images/gallery-square/1.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/1.webp" alt="Hotel room"></a>
                        <a href="images/gallery-square/2.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/2.webp" alt="Lobby"></a>
                        <a href="images/gallery-square/3.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/3.webp" alt="Dining"></a>
                        <a href="images/gallery-square/4.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/4.webp" alt="Suite"></a>
                        <a href="images/gallery-square/5.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/5.webp" alt="Pool"></a>
                        <a href="images/gallery-square/6.webp" class="about-page-gallery-item js-about-gallery-popup"><img src="images/gallery-square/6.webp" alt="Facilities"></a>
                    </div>
                    <div class="text-center mt-4">
                        <a href="gallery.php" class="btn-main">View Full Gallery</a>
                    </div>
                </div>
            </section>

            <div class="about-gallery-lightbox" id="aboutGalleryLightbox" aria-hidden="true">
                <button type="button" class="about-gallery-lightbox-close" id="aboutGalleryClose" aria-label="Close image popup">&times;</button>
                <img src="" alt="Gallery preview" id="aboutGalleryPreview">
            </div>
        </div>
        <!-- content close -->
        
        <!-- footer begin -->
        <?php include 'footer.php'; ?>
        <!-- footer close -->
    </div>
    <!-- Javascript Files
    ================================================== -->
    <script src="js/plugins.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/custom-marquee.js"></script>
    <script src="js/custom-swiper-1.js"></script>
    <script>
        (function () {
            var popupLinks = document.querySelectorAll('.js-about-gallery-popup');
            var lightbox = document.getElementById('aboutGalleryLightbox');
            var preview = document.getElementById('aboutGalleryPreview');
            var closeBtn = document.getElementById('aboutGalleryClose');
            if (!popupLinks.length || !lightbox || !preview || !closeBtn) return;

            function openLightbox(src, alt) {
                preview.src = src;
                preview.alt = alt || 'Gallery image';
                lightbox.classList.add('is-open');
                lightbox.setAttribute('aria-hidden', 'false');
                document.body.classList.add('about-lightbox-open');
            }

            function closeLightbox() {
                lightbox.classList.remove('is-open');
                lightbox.setAttribute('aria-hidden', 'true');
                preview.src = '';
                document.body.classList.remove('about-lightbox-open');
            }

            popupLinks.forEach(function (link) {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    var image = link.querySelector('img');
                    openLightbox(link.getAttribute('href'), image ? image.alt : '');
                });
            });

            closeBtn.addEventListener('click', closeLightbox);
            lightbox.addEventListener('click', function (e) {
                if (e.target === lightbox) closeLightbox();
            });
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && lightbox.classList.contains('is-open')) {
                    closeLightbox();
                }
            });
        })();
    </script>

</body>

</html>
