<?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>Porto - 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 6.000 square meters of retail, restaurants, health, sport
                                facilities,Spa, Co-working Light Human Hotel Boutique with 112 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 Lucios Developer and
                                Atelier Arcau </p>

                            <a href="https://goo.gl/maps/2PPZXBqEVWev9QiX8" 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/hotelporto/porto1.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Porto"><img
                                                src="<?= url("storage/images/hotelporto/porto1.jpg") ?>"
                                                alt="Hotel Porto"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Porto</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/hotelporto/porto2.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Porto"><img
                                                src="<?= url("storage/images/hotelporto/porto2.jpg") ?>"
                                                alt="Hotel Porto"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Porto</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/hotelporto/porto3.jpg") ?>"
                                       class="item-quick-view book-image" data-lightbox="image" title="Hotel Porto"><img
                                                src="<?= url("storage/images/hotelporto/porto3.jpg") ?>"
                                                alt="Hotel Porto"></a>
                                    <div class="book-detail">
                                        <h2 class="book-title"><a href="#">Hotel Porto</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(); ?>