<!--Hero-->
<section class="position-relative bg-dark text-white jarallax" data-speed=".2">
    <!--Hero parallax image-->
    <img src="assets/img/backgrounds/bg1.jpg" alt="" class="jarallax-img opacity-50">

    <!--Hero:divider-->
    <svg class="position-absolute start-0 bottom-0 mb-n1" preserveAspectRatio="none" width="100%" height="120"
        viewBox="0 0 1200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 96L1200 0V120H0V96Z" fill="white" />
    </svg>

    <div class="container position-relative py-12 py-lg-15">
        <div class="row pb-9">
            <div class="col-lg-10 mx-auto text-center">
                <!--Hero: heading-->
                <h1 class="display-1 mb-4">Vector background divider hero example</h1>
                <!--Hero: subheading-->
                <p class="lead mb-5">Build a stunning website that attract visitors</p>
                <!--Hero: action button-->
                <a href="#!" class="btn btn-primary btn-lg rounded-pill btn-hover-arrow">
                  <span class="btn-rise-text">Get started</span>
                </a>
                </div>
            </div>
        <!--/.row-->
        </div>
    <!--/.content-->
    </section>
<!--/Hero end-->