<!--page-hero-master-slider-->
<section class="position-relative overflow-hidden">
   <!--Slider: divider-->
   <svg class="w-100 position-absolute start-0 bottom-0 z-1" height="48"
     fill="currentColor" preserveAspectRatio="none" viewBox="0 0 1200 120"
     xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg) scaleX(-1);color: var(--bs-body-bg);">
      <path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54
       16.88 218.2 35.26 69.27 18 138.3 24.88 209.4
       13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z"
        opacity=".25" />
       <path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15
        60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39
        62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 
        113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z"
       opacity=".5" />
      <path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63
      112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" />
     </svg>
     <div class="ms-skin-black-1 master-slider" id="masterslider">
     <!--slide-1-->
     <div class="ms-slide bg-dark" data-delay="3" data-fill-mode="fill">
       <img class="opacity-50" src="assets/vendor/masterslider/style/blank.gif" alt="" title=""
         data-src="assets/img/backgrounds/bg4.jpg" />
        <!--Layer text-->
       <div class="ms-layer ms-title fw-semibold text-white" data-effect="front(800)"
         data-duration="1200" data-delay="600" data-ease="easeInOutCubic"
         data-hide-effect="top(long,false)" data-offset-x="0" data-offset-y="-60" data-origin="mc"
        data-position="center" data-masked="false">
        <div class="text-center">Build stunning<br>website ease</div>
        </div>
        <!--Layer button-->
        <a href="#" class="ms-layer ms-btn" data-effect="front(800)" data-duration="1200"
        data-delay="800" data-ease="easeInOutCubic" data-hide-effect="top(long,false)"
        data-offset-x="0" data-offset-y="130" data-origin="mc" data-position="center"
        data-masked="false"><span class="btn btn-lg btn-primary btn-sm">Get Started</span>
       </a>
    </div>
    <!--slide-2-->
    <div class="ms-slide bg-dark" data-delay="3" data-fill-mode="fill">
    <!--bg-->
    <img class="opacity-50" src="assets/vendor/masterslider/style/blank.gif" alt="" title=""
      data-src="assets/img/backgrounds/bg3.jpg" />
    <!--Layer text-->
     <div class="ms-layer ms-title fw-semibold text-center text-white"
       data-effect="skewbottom(-10,150)" data-duration="1000" data-delay="600"
       data-ease="easeInOutCubic" data-hide-effect="top(long,false)" data-offset-x="0"
       data-offset-y="-60" data-origin="mc" data-position="center" data-masked="false">
       <div>Design anything<br>with less code</div>
     </div>
     <!--Layer button-->
     <a href="#" class="ms-layer ms-btn" data-effect="skewbottom(-10,150)" data-duration="1000"
     data-delay="900" data-ease="easeInOutCubic" data-hide-effect="top(long,false)"
     data-offset-x="0" data-offset-y="130" data-origin="mc" data-position="center"
     data-masked="false">
     <span class="btn btn-lg btn-white btn-sm">Get
      Started</span>
    </a>
   </div>
    <!--slide-3-->
    <div class="ms-slide bg-dark" data-delay="3" data-fill-mode="fill">
    <!--bg-->
    <img class="opacity-50" src="assets/vendor/masterslider/style/blank.gif" alt="" title=""
     data-src="assets/img/backgrounds/bg5.jpg" />
     <!--Layer text-->
     <div class="ms-layer text-center ms-title fw-semibold text-white" data-effect="skewleft(23,500)"
      data-duration="1000" data-delay="900" data-ease="easeInOutSine"
      data-hide-effect="top(long,false)" data-offset-x="0" data-offset-y="-60" data-origin="mc"
      data-position="center" data-masked="false">
      <div>You deserved a<br> stunning website</div>
    </div>
    <!--Layer button-->
    <a href="#" class="ms-layer ms-btn" data-effect="skewleft(23,500)" data-duration="1000"
    data-delay="1200" data-ease="easeInOutSine" data-hide-effect="top(long,false)"
     data-offset-x="0" data-offset-y="130" data-origin="mc" data-position="center"
     data-masked="false"><span class="btn btn-lg btn-success btn-sm">Get Started</span>
    </a>
  </div>
 </div>
</section>
<!--/Hero slider end-->