<!--Hero-->
    <section class="position-relative bg-shade-primary text-white jarallax" data-speed=".2">
        <!--Hero image-->
        <img src="assets/img/backgrounds/bg2.jpg" alt="" class="jarallax-img opacity-50">
        <div class="container col-xl-10 col-xl-8 py-12 py-lg-15">
            <div class="row pt-lg-4 justify-content-center text-center align-items-center">
                <div class="col-lg-8 col-xl-7 mx-auto text-center">
                    <!--Hero heading-->
                    <h1 class="mb-4 display-1 text-outline-white">Built for Every Business</h1>
                     <!--Hero subheading-->
                    <p class="col-lg-11 mx-auto mb-5 lead">
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                        mollit anim id est laborum.
                    </p>
                     <!--Hero action-->
                     <a href="#!" class="btn btn-outline-white border-2 btn-lg">Learn more</a>
                </div>
            </div>
        </div>
        <!--/.container-end-->
    </section>
    <!--/.Hero end-->