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

        <div class="section parallax notopborder m-0"
             >
<!--            <div class="overlay overlay-black opacity-light"></div>-->


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

                <div class="row justify-content-between align-items-center col-mb-30 mw-lg">

                    <div class="col-lg-5">
                        <div class="heading-block">
                            <h2 class="color-2 font-large">Light Human Hotel <br>Vila Real - Portugal</h2>
                            <p>Lucios/Azevedos Project</p>
                        </div>

                    </div>
                    <div class="col-lg-7 p-5">
                        <div class="row mb-4">

                            <h3 class="font-weight-bolder">The project</h3>

                            <p class="font-medium mb-5">
                                The project will accommodate 7.500 square meters of retail, restaurants, health, sport
                                facilities,Spa, Co-working Light Human Hotel Boutique with 126 rooms keys. Biomimicry
                                and biodiversity are the central approaches of the project oriented towards shaping an
                                environment for its future users based on innovative technologies. These elements are
                                reflected in all aspects of the project conception developed by Enthusiastic Target
                                Developer and Atelier Arcau
                                <a href="https://goo.gl/maps/PbSpsi3dNtyjNQQ87" target="_blank"
                                   class="btn text-larger px-4 py-2 rounded-pill mt-3 bg-color-2"
                                   style="">Location project <i class="icon-chevron-right ml-3 mr-2 position-relative"
                                                                style="top: 1px"></i></a>

                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="row 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("storage/images/hotelvilareal/vr1.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Vila Real"><img
                                                src="<?= url("storage/images/hotelvilareal/vr1.jpg") ?>"
                                                alt="Hotel Vila Real"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Vila Real</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("storage/images/hotelvilareal/vr2.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Vila Real"><img
                                                src="<?= url("storage/images/hotelvilareal/vr2.jpg") ?>"
                                                alt="Hotel Vila Real"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Vila Real</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("storage/images/hotelvilareal/vr3.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Vila Real"><img
                                                src="<?= url("storage/images/hotelvilareal/vr3.jpg") ?>"
                                                alt="Hotel Vila Real"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Vila Real</a></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">


                    </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(); ?>