<!--page-hero-->
 <section class="bg-gradient-secondary text-white position-relative overflow-hidden">
    <!--Video Vimeo-->
    <div class="jarallax bg-dark h-100 w-100 position-absolute start-0 top-0 opacity-50"
        data-video-src="https://vimeo.com/167338879">
        </div>
    <!--Container-->
    <div class="container py-9 py-lg-11 position-relative z-index-1">
        <div class="row pt-7 align-items-center">
            <div class="col-lg-10 mx-auto text-center mb-5 mb-lg-0">
                <!--Hero heading-->
                <h1 class="display-2 mb-4 mb-lg-5">
                Vimeo video background hero example
                    </h1>
                <!--Hero subheadingheading-->
                <p class="mb-5 mb-lg-7 lead w-lg-75 mx-auto">
                    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
                    industries.
                    </p>
                <!--Hero action-->
                <div class="d-flex align-items-center justify-content-center">
                    <a href="#section" class="btn btn-outline-white border-2 btn-lg me-2 me-lg-3">Let's get
                        started</a>
                        </div>
                </div>
            </div>
        </div>
    </section>
<!--/.Hero end-->