<!--Hero-->
    <section class="position-relative bg-dark 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-lg-10 col-xl-8 py-12 py-lg-15">
            <div class="row justify-content-center pt-lg-4 align-items-center">
                <div class="col-lg-8 col-xl-7 mx-auto text-center">
                    <!--Hero heading-->
                    <h1 class="mb-4 display-1">Built for <br>
                        <span class="d-inline-block text-warning"
                            data-typed='{"strings": ["Developers", "Businesses", "Minimal Studios", "Agencies", "Creatives"]}'></span>
                    </h1>
                     <!--Hero subheading-->
                    <p class="col-lg-11 mb-5 mx-auto 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-->