<section class="wrapper image-wrapper bg-auto no-overlay bg-image text-center py-14 py-md-16 bg-map" data-image-src="{{ page.cta1.bg_image }}">
  <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">{{ page.cta1.title }}</h2>
        <p class="lead mb-5 px-md-16 px-lg-3">{{ page.cta1.text }}</p>
        <a href="{{ page.cta1.button.url }}" class="{{ page.cta1.button.style }}">{{ page.cta1.button.label }}</a>
      </div>
    </div>
  </div>
</section>

              

# CTA Section 1
cta1:
  enable: true
  bg_image: /assets/img/map.png
  title: "Join Our Community"
  text: "We are trusted by over 5000+ clients. Join them by using our services and grow your business."
  button:
    label: "Join Us"
    url: "#"
    style: "btn btn-primary rounded-pill"
              

    # CTA Section 2
    cta2:
      enable: true
      bg_image: /assets/img/photos/bg3.jpg
      bg_overlay: bg-overlay-400
      title: "We are trusted by over 5000+ clients. Join them by using our services and grow your business."
      button:
        label: "Join Us"
        url: "#"
        style: "btn btn-white rounded-pill mb-0 text-nowrap"
                  

    # CTA Section 3
    cta3:
      enable: true
      icon: /assets/img/icons/lineal/puzzle-2.svg
      title: "Join Our Community"
      text: "We are trusted by over 5000+ clients. Join them by using our services and grow your business."
      button:
        label: "Join Us"
        url: "#"
        style: "btn btn btn-primary rounded"
                  

    # CTA Section 4
    cta4:
      enable: true
      bg_image: /assets/img/photos/bg16.png
      bg_overlay: bg-overlay-300
      subtitle: "Join Our Community"
      title: "We are"
      title_highlight: "trusted"
      highlight_style: "underline-3 style-2 yellow"
      button:
        label: "Get Started"
        url: "#"
        style: "btn btn-white rounded"
                  

    # CTA Section 5
    cta5:
      enable: true
      subtitle: "Analyze Now"
      title: "Wonder how much faster your website can go? Easily check your SEO Score now."
      input:
        placeholder: "Enter Website URL"
        label: "Enter Website URL"
      button:
        label: "Analyze"
                  

    # CTA Section 6
    cta6:
      enable: true
      image: /assets/img/photos/devices2.png
      image2x: /assets/img/photos/[email protected]
      title: "Get all of your steps, exercise, sleep and meds in one place."
      text: "Sandbox is now available to download from both the App Store and Google Play Store."
      buttons:
        - label: "App Store"
          icon: "uil uil-apple"
          style: "btn btn-primary btn-icon btn-icon-start rounded me-2"
        - label: "Google Play"
          icon: "uil uil-google-play"
          style: "btn btn-green btn-icon btn-icon-start rounded"
                  

    
    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600" data-image-src="{{ page.cta7.bg_image }}">
      <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>
      <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="{{ page.cta7.doodle1 }}" class="h-15 position-absolute d-none d-lg-block" style="bottom: 36%; right: -25%" alt="">
            <img src="{{ page.cta7.doodle2 }}" class="h-14 position-absolute d-none d-lg-block" style="top: -20%; left: -25%" alt="">
            <h2 class="display-3 mb-4">{{ page.cta7.title }} <span class="text-gradient gradient-7">{{ page.cta7.title_highlight }}</span></h2>
            <p class="lead fs-24 lh-sm mb-7">{{ page.cta7.text }}</p>
            <div class="d-flex justify-content-center justify-content-lg-start">
              {% for button in page.cta7.store_buttons %}
              <span><a href="{{ button.url }}" class="{{ button.class_name }}"><img src="{{ button.image }}" class="h-11 rounded-xl" alt=""></a></span>
              {% endfor %}
            </div>
          </div>
          <div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
            <figure><img src="{{ page.cta7.device_image }}" srcset="{{ page.cta7.device_image2x }} 2x" alt=""></figure>
          </div>
        </div>
      </div>
    </section>
    
                  

    # CTA Section 7
    cta7:
      enable: true
      bg_image: /assets/img/photos/bg23.png
      doodle1: /assets/img/svg/doodle2.svg
      doodle2: /assets/img/svg/doodle6.svg
      title: "Manage all your bills, accounts & budgets in"
      title_highlight: "one place"
      text: "Sandbox is available to download from both App Store and Google Play Store."
      device_image: /assets/img/photos/devices6.png
      device_image2x: /assets/img/photos/[email protected]
      buttons:
        - url: "#"
          class_name: "me-2"
          image: /assets/img/photos/button-appstore.svg
        - url: "#"
          class_name: ""
          image: /assets/img/photos/button-google-play.svg
                  

    # CTA Section 8
    cta8:
      enable: true
      subtitle: "Join Our Community"
      title: "We are"
      title_highlight: "trusted"
      button:
        label: "Join Us"
        url: "#"
                  

    
    <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="{{ page.cta9.bg_image }}">
        <div class="container py-16 py-md-18 text-center">
          {% for shape in page.cta9.shapes %}
          <div class="position-absolute shape {{ shape.class }} d-none d-lg-block {{ shape.width }}" style="top: {{ shape.position.top }}; left: {{ shape.position.left }}; right: {{ shape.position.right }}; bottom: {{ shape.position.bottom }}; {% if shape.position.rotate %}transform: rotate({{ shape.position.rotate }});{% endif %}">
            <img src="/assets/img/svg/{{ shape.icon }}.svg" class="svg-inject icon-svg w-100 h-100" alt="" />
          </div>
          {% endfor %}
          <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">{{ page.cta9.title }}</h1>
              <p class="lead fs-24 px-md-12 px-lg-0 mx-lg-n10 mx-xl-0 mb-8">{{ page.cta9.text }}</p>
              <a href="{{ page.cta9.button.url }}" class="btn btn-lg btn-primary btn-icon btn-icon-end">{{ page.cta9.button.label }} <i class="uil {{ page.cta9.button.icon }}"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    
                  

    # CTA Section 9
    cta9:
      enable: true
      bg_image: /assets/img/photos/bg23.png
      shapes:
        - icon: pie
          class: yellow
          width: w-5
          position:
            top: 18%
            left: 5%
        - icon: scribble
          class: leaf
          width: w-10
          position:
            bottom: 30%
            left: 2%
        - icon: tri
          class: fuchsia
          width: w-6
          position:
            top: 20%
            right: 2%
            rotate: 70deg
        - icon: circle
          class: grape
          width: w-6
          position:
            bottom: 28%
            right: 5%
      title: "Got a 👾 project in mind? Let's work together. ✌️"
      text: "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."
      button:
        label: "Contact Me"
        icon: "uil-arrow-up-right"
        url: "#"