<!--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-->