<!--page-Hero-->
<section class="bg-dark text-white position-relative overflow-hidden jarallax" data-speed=".2">
<!--Hero Parallax image-->
<img src="assets/img/backgrounds/bg4.jpg" alt="" class="jarallax-img">
<!--Hero Image overlay-->
<div class="bg-shade-primary opacity-75 position-absolute start-0 top-0 w-100 h-100"></div>
<!--Hero content-->
<div class="container pt-9 pb-9 position-relative z-index-1">
<div class="row pt-6 pb-lg-7">
<div class="col-xl-8 mx-auto text-center">
<!--Video button-->
<a href="https://vimeo.com/353105087" data-glightbox data-gallery="03"
class="btn btn-white mb-5 btn-circle-ripple width-10x height-10x rounded-circle d-flex justify-content-center mx-auto align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bx bx-play" viewBox="0 0 16 16">
<path
d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
</svg>
</a>
<!--Hero heading-->
<h1 class="display-3 mb-4">
Ultimate design kit for every
<span class="d-inline-block text-warning"
data-typed='{"strings": ["Startup", "Business", "Team", "Dev"]}'></span>
</h1>
<!--Hero subheading-->
<p class="mb-5 w-lg-75 lead mx-auto">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
industries.
</p>
<!--Hero action button-->
<div class="d-flex flex-column align-items-center">
<a href="#next" class="btn btn-primary btn-lg mb-3">Learn more</a>
</div>
</div>
</div>
</div>
</section>
<!--/.Hero end-->