<!--page-hero-->
<section class="bg-gradient-primary text-white position-relative overflow-hidden">
  <!--Video-->
  <div class="w-100 h-100 opacity-50 position-absolute end-0 top-0 bg-cover bg-no-repeat bg-center"
   style="background-image: url('assets/videos/officeloop-cover.jpg');">
    <div class="jarallax bg-dark h-100 w-100" data-video-src="mp4:./assets/videos/officeloop.mp4">
   </div>
  </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 col-xl-8 mx-auto text-center mb-5 mb-lg-0">
     <!--Hero heading-->
     <h1 class="display-2 mb-4 mb-lg-5">
     Video background hero example
     </h1>
     <!--Hero subheading-->
     <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 button-->
     <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-->