<?php $v->layout("_theme");
$v->insert("views/page-title", ["pageTitle" => $pageTitle, "breadcrumb" => $breadcrumb]);
?>


<section id="content">

    <div class="content-wrap">
        <div class="section parallax notopborder  header-stick nomargin nobottommargin footer-stick"
             >
<!--            <div class="overlay overlay-black opacity-medium bg-deep-brown"></div>-->


            <div class="container clearfix" id="section-diferenciais">

                <div class="row col-mb-50 gutter-lg-50 justify-content-center align-items-center">

                    <div class="col-lg-6 col-md-12 p-5 center-col">
                        <h3 class="color-2" style="font-size: 45px;">customize your stay</h3>
                        <p class="mb-5">A special dream?
                            Tell us, we can help you!</p>

                            <ul class="iconlist ml-0 font-medium3">
                                <li class="mb-2"><i class="icon-line-check text-smaller bg-color-2 color"></i> <a class="" href="">Bath amenities of your choice.</a></li>
                                <li class="mb-2"><i class="icon-line-check text-smaller bg-color-2 color"></i> <a class="" href="">Unpacking | Repacking of luggage.</a></li>
                                <li class="mb-2"><i class="icon-line-check text-smaller bg-color-2 color"></i> <a class="" href="">Personally select the minibar items.</a></li>
                                <li class="mb-2"><i class="icon-line-check text-smaller bg-color-2 color"></i> <a class="" href="">Shopping service.</a></li>
                            </ul>

                    </div>


                </div>
                <div class="line"></div>
                <div class="row justify-content-between align-items-center col-mb-30 mb-5">
                    <div class="col-lg-4">
                        <div class="portfolio-item col-12">
                            <div class="book-wrap">
                                <div class="book-card">
                                    <a href="<?= url("shared/img/custom1.jpg") ?>" class="item-quick-view book-image" data-lightbox="image" ><img src="<?= url("shared/img/custom1.jpg") ?>" alt="Experience LHH Images"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Bath Amenities</a></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="portfolio-item col-12">
                            <div class="book-wrap">
                                <div class="book-card">
                                    <a href="<?= url("shared/img/custom2.jpg") ?>" data-lightbox="image" class="item-quick-view book-image"><img src="<?= url("shared/img/custom2.jpg") ?>" alt="Experience LHH Images"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Unpacking | Repacking of luggage</a></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="portfolio-item col-12">
                            <div class="book-wrap">
                                <div class="book-card">
                                    <a href="<?= url("shared/img/custom3.jpg") ?>" class="item-quick-view book-image" data-lightbox="image" ><img src="<?= url("shared/img/custom3.jpg") ?>" alt="Experience LHH Images"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">minibar items</a></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>




    </div>



    <?php $v->insert("views/map"); ?>

    <?php $v->insert("views/newsletter-widget"); ?>


</section><!-- #content end -->
<?php $v->start("scripts"); ?>
    <script src="<?= url("/shared/scripts/hover3d.js"); ?>"></script>

    <script>

        jQuery(document).ready( function(){

            if( !jQuery('body').hasClass('device-touch') ) {

                var lFollowX = 0,
                    lFollowY = 0,
                    x = 0,
                    y = 0,
                    friction = 1 / 30;

                function moveBackground() {
                    x += (lFollowX - x) * friction;
                    y += (lFollowY - y) * friction;

                    translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

                    jQuery('.move-bg').css({
                        '-webit-transform': translate,
                        '-moz-transform': translate,
                        'transform': translate
                    });

                    window.requestAnimationFrame(moveBackground);
                }

                jQuery(window).on('mousemove click', function(e) {

                    var lMouseX = Math.max(-100, Math.min(100, jQuery(window).width() / 2 - e.clientX));
                    var lMouseY = Math.max(-100, Math.min(100, jQuery(window).height() / 2 - e.clientY));
                    lFollowX = (10 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
                    lFollowY = (10 * lMouseY) / 100;

                });

                moveBackground();

                jQuery(".book-wrap").hover3d({
                    selector: ".book-card",
                    shine: false,
                });

            }

        });

    </script>
<?php $v->end(); ?>