<style>
    .pg-hero .height1 {
        height: 400px;
    }
</style>
        <div id="smooth-content">
            <main class="o-hidden">
                <!-- Header Banner -->
                <header class="pg-hero section-padding">
                    <div class="container">
                        <div class="row mb-60 justify-content-center">
                            <div class="col-md-6 text-center">
                                <div class="section-subtitle">Explore Our Tours</div>
                                <div class="section-title"><?= htmlspecialchars($offer['title']) ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="height1">
                            <div class="radius-mask">
                            <div class="container">
                            <div class="row g-2">
                    <!-- Left column: 4 small images in 2x2 grid -->
                    <div class="col-lg-4 col-md-12">
                    <div class="row g-2">
                        <?php foreach ($offer['images']['grid'] as $gridImg): ?>
                        <div class="col-6">
                            <a href="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $gridImg)) ?>"
                                class="image-grid-item hover-on-image radius20" data-fancybox="gallery">
                                <div class="image" style="height:200px; overflow:hidden; border-radius:12px;">
                                    <img src="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $gridImg)) ?>"
                                        loading="lazy" alt="<?= htmlspecialchars($offer['title']) ?>"
                                        style="width:100%; height:100%; object-fit:cover;">
                                </div>
                            </a>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Right column: 1 large main image -->
                <div class="col-lg-8 col-md-12">
                    <a href="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $offer['images']['main'])) ?>"
                        class="image-grid-item hover-on-image radius20" data-fancybox="gallery"
                        style="position:relative; display:block;">
                        <div class="image" style="height:410px; overflow:hidden; border-radius:12px;">
                            <img src="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $offer['images']['main'])) ?>"
                                loading="lazy" alt="<?= htmlspecialchars($offer['title']) ?>"
                                style="width:100%; height:100%; object-fit:cover;">
                        </div>
                        <div style="position:absolute; bottom:15px; right:15px; background:#000; color:#fff; padding:10px 18px; border-radius:8px; font-size:14px;">
                            View All Photos
                        </div>
                    </a>
                </div>
                </div>
                            </div>
                        </div>
                    </div>
                </header>
                <!-- Tour Details -->
                <section class="tour-details stsec section-padding">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-12 mb-30">
                <h4>Overview</h4>
                <p class="mb-30"><?= htmlspecialchars($offer['description']) ?></p>

                <h4>Tour Highlights</h4>
                <ul class="page-list list-unstyled mb-30">
                    <?php foreach ($offer['highlights'] as $highlight): ?>
                    <li>
                        <div class="page-list-icon"><span class="ti-check"></span></div>
                        <div class="page-list-text">
                            <p><?= htmlspecialchars($highlight) ?></p>
                        </div>
                    </li>
                    <?php endforeach; ?>
                </ul>

                <h4>Included Services</h4>
                <ul class="page-list list-unstyled mb-30">
                    <?php foreach ($offer['includes'] as $item): ?>
                    <li>
                        <div class="page-list-icon"><span class="ti-check"></span></div>
                        <div class="page-list-text">
                            <p><?= htmlspecialchars($item) ?></p>
                        </div>
                    </li>
                    <?php endforeach; ?>
                </ul>

                <h4>Not Included</h4>
                <ul class="page-list list-unstyled">
                    <?php foreach ($offer['excludes'] as $item): ?>
                    <li>
                        <div class="page-list-icon"><span class="ti-check"></span></div>
                        <div class="page-list-text">
                            <p><?= htmlspecialchars($item) ?></p>
                        </div>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>

            <div class="col-lg-4 offset-lg-1 col-md-12">
                <div class="cont stack-title">
                    <h4>Tour Details</h4>
                    <div class="item">
                        <div class="icon"><i class="fa-light fa-hourglass-start"></i></div>
                        <div class="title">Duration</div>
                        <div class="value"><?= htmlspecialchars($offer['duration']) ?></div>
                    </div>
                    <div class="item">
                        <div class="icon"><i class="fa-light fa-map-marker-alt"></i></div>
                        <div class="title">Location</div>
                        <div class="value"><?= htmlspecialchars($offer['destination']) ?></div>
                    </div>
                    <div class="item">
                        <div class="icon"><i class="fa-light fa-tag"></i></div>
                        <div class="title">Price</div>
                        <div class="value">
                            <?= $offer['currency'] ?><?= number_format($offer['price']) ?> / person
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon"><i class="fa-solid fa-star"></i></div>
                        <div class="title">Rating</div>
                        <div class="value">
                            <?= number_format($offer['rating'], 2) ?> 
                            (<?= $offer['review_count'] ?> reviews)
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
                <!-- Gallery Scroll Image -->
                <section class="galleryscroll section-padding pt-0">
                    <div class="container-fluid p-0 box-right-7">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="swiper galleryscroll-slider">
                                    <div class="swiper-wrapper">
                                    <?php foreach ($offer['images']['grid'] as $gridImg): ?>
                                        <div class="swiper-slide">
                                            <div class="item">
                                            
                                                <a href="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $gridImg)) ?>" title="" class="img-zoom">
                                                    <div class="img"> <img src="<?= base_url('assets/img/offers/' . str_replace(' ', '%20', $gridImg)) ?>" class="img-fluid mx-auto d-block" alt=""> </div>
                                                </a>
                                            
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                        <!-- <div class="swiper-slide">
                                            <div class="item">
                                                <a href="assets/img/destination/b.jpg" title="" class="img-zoom">
                                                    <div class="img"> <img src="assets/img/destination/b.jpg" class="img-fluid mx-auto d-block" alt=""> </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="item">
                                                <a href="assets/img/destination/c.jpg" title="" class="img-zoom">
                                                    <div class="img"> <img src="assets/img/destination/c.jpg" class="img-fluid mx-auto d-block" alt=""> </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="item">
                                                <a href="assets/img/destination/d.jpg" title="" class="img-zoom">
                                                    <div class="img"> <img src="assets/img/destination/d.jpg" class="img-fluid mx-auto d-block" alt=""> </div>
                                                </a>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Next & Prev -->
                <!-- <section class="nex-prv">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5 rest">
                                <div class="prv">
                                    <div class="img bg-img" data-background="assets/img/destination/03.jpg">
                                        <div class="text-left ontop">
                                            <h5><a href="tour-details.html">Dubai Luxury Journey</a></h5>
                                        </div>
                                        <div class="overly"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 text-center rest">
                                <a href="tours.html" class="all-works d-flex align-items-center"> <span class="icon full-width ti-layout-grid3"></span> </a>
                            </div>
                            <div class="col-md-5 rest">
                                <div class="nxt">
                                    <div class="img bg-img" data-background="assets/img/destination/02.jpg">
                                        <div class="text-right ontop">
                                            <h5><a href="tour-details.html">Canadian Nature Tour</a></h5>
                                        </div>
                                        <div class="overly"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section> -->
            </main>
            