<section class="wrapper image-wrapper bg-auto no-overlay bg-image text-center py-14 py-md-16 bg-map" data-image-src="./assets/img/map.png">
  <div class="container py-0 py-md-18">
    <div class="row">
      <div class="col-lg-6 col-xl-5 mx-auto">
        <h2 class="display-4 mb-3 text-center">Join Our Community</h2>
        <p class="lead mb-5 px-md-16 px-lg-3">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
        <a href="#" class="btn btn-primary rounded-pill">Join Us</a>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-xl-10 mx-auto">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400" data-image-src="./assets/img/photos/bg3.jpg">
          <div class="card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start">
            <h3 class="display-6 mb-6 mb-lg-0 pe-lg-10 pe-xl-5 pe-xxl-18 text-white">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
            <a href="#" class="btn btn-white rounded-pill mb-0 text-nowrap">Join Us</a>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16 text-center">
    <div class="row">
      <div class="col-md-9 col-lg-7 col-xl-7 mx-auto text-center">
        <img src="./assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3">Join Our Community</h2>
        <p class="lead fs-lg mb-6 px-xl-10 px-xxl-15">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
        <a href="#" class="btn btn-primary rounded">Join Us</a>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-soft-primary">
  <div class="container py-14 py-md-16">
    <div class="row mb-8">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="fs-16 text-uppercase text-primary mb-3">Analyze Now</h2>
        <h3 class="display-4 mb-0">Wonder how much faster your website can go? Easily check your SEO Score now.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="row">
      <div class="col-lg-5 mx-auto">
        <form action="#">
          <div class="form-floating input-group">
            <input type="url" class="form-control border-0" placeholder="Enter Website URL" id="analyze">
            <label for="analyze">Enter Website URL</label>
            <button class="btn btn-primary" type="button">Analyze</button>
          </div>
        </form>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-soft-primary">
  <div class="container pt-10 pb-15 py-lg-17 py-xl-20 py-xxl-22 position-relative">
    <img class="position-lg-absolute col-12 col-lg-12 mt-lg-n50p mb-3 mb-md-10 mb-lg-0" src="./assets/img/photos/devices2.png" srcset="./assets/img/photos/devices2@2x.png 2x" alt="" style="top: 50%; left: -23%;" />
    <div class="row gx-lg-8 gx-xl-12 align-items-center">
      <div class="col-md-10 offset-md-1 col-lg-6 offset-lg-6 mt-md-n9 text-center text-lg-start">
        <h1 class="display-4 mb-4 px-md-10 px-lg-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
        <p class="lead fs-lg mb-7 px-md-10 px-lg-0 pe-xxl-15">Sandbox is now available to download from both the App Store and Google Play Store.</p>
        <div class="d-flex justify-content-center justify-content-lg-start">
          <span><a class="btn btn-primary btn-icon btn-icon-start rounded me-2"><i class="uil uil-apple"></i> App Store</a></span>
          <span><a class="btn btn-green btn-icon btn-icon-start rounded"><i class="uil uil-google-play"></i> Google Play</a></span>
        </div>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600" data-image-src="./assets/img/photos/bg23.png">
  <div class="overflow-hidden" style="z-index:1;">
    <div class="divider divider-alt text-light mx-n2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><g fill="currentColor"><polygon points="1440 100 0 15 0 0 1440 0 1440 100"/></g></svg>
    </div>
  </div>
  <!-- /.overflow-hidden -->
  <div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
    <div class="row gx-0 gy-10">
      <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
        <img src="./assets/img/svg/doodle2.svg" class="h-15 position-absolute d-none d-lg-block" style="bottom: 36%; right: -25%" alt="">
        <img src="./assets/img/svg/doodle6.svg" class="h-14 position-absolute d-none d-lg-block" style="top: -20%; left: -25%" alt="">
        <h2 class="display-3 mb-4">Manage all your bills, accounts & budgets in <span class="text-gradient gradient-7">one place.</span></h2>
        <p class="lead fs-24 lh-sm mb-7">Sandbox is available to download from both App Store and Google Play Store.</p>
        <div class="d-flex justify-content-center justify-content-lg-start">
          <span><a href="#" class="me-2"><img src="./assets/img/photos/button-appstore.svg" class="h-11 rounded-xl" alt=""></a></span>
          <span><a href="#"><img src="./assets/img/photos/button-google-play.svg" class="h-11 rounded-xl" alt=""></a></span>
        </div>
      </div>
      <!-- /column -->
      <div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
        <figure><img src="./assets/img/photos/devices6.png" srcset="./assets/img/photos/devices6@2x.png 2x" alt=""></figure>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper gradient-8 bg-lines">
  <div class="container py-15 py-md-17 text-center">
    <div class="row">
      <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
        <h2 class="fs-16 text-uppercase text-white mb-3">Join Our Community</h2>
        <h3 class="display-3 text-white mb-6">We are <span class="underline-2 underline-gradient-6"><em>trusted</em></span> by over 5000+ clients. Join them now and grow your business.</h3>
        <a href="#" class="btn btn-white">Join Us</a>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="section-frame mx-xxl-11 overflow-hidden">
  <div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500" data-image-src="./assets/img/photos/bg23.png">
    <div class="container py-16 py-md-18 text-center">
      <div class="position-absolute shape yellow d-none d-lg-block w-5" style="top: 18%; left: 5%;"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
      <div class="position-absolute shape leaf d-none d-lg-block w-10" style="bottom: 30%; left: 2%;"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
      <div class="position-absolute shape fuchsia d-none d-lg-block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
      <div class="position-absolute shape grape d-none d-lg-block w-6" style="bottom: 28%; right: 5%;"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
      <div class="row">
        <div class="col-lg-9 col-xxl-8 mx-auto">
          <h1 class="display-1 fs-70 mx-lg-n10 mx-xl-0 mb-5">Got a 👾 project in mind? Let's work together. ✌️</h1>
          <p class="lead fs-24 px-md-12 px-lg-0 mx-lg-n10 mx-xl-0 mb-8">I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.</p>
          <a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end">Contact Me <i class="uil uil-arrow-up-right"></i></a>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.wrapper -->
</section>
<!-- /section -->