Bootstrap 5 Application Components

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/applications/blue-left-light.png" alt="">
  <img class="d-none d-lg-block position-absolute top-50 end-0 col-6 translate-middle-y" src="saturn-assets/images/applications/group-app-light.png" alt="">
  <div class="position-relative container">
    <div class="mw-lg mx-auto mx-lg-0">
      <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
      <h2 class="font-heading mb-8">
        <span>Manage your</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">products</span>
        <span>with saturn</span>
      </h2>
      <p class="mw-md lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
      <img class="img-fluid d-block mt-n4 mb-2 ms-auto" src="saturn-assets/images/applications/arrow-left.png" alt="">
      <div class="mb-10">
        <form action="">
          <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
            <input class="form-control" type="email" name="" id="" placeholder="Enter email address">
            <button class="flex-shrink-0 btn btn-sm h-100 btn-primary d-flex align-items-center justify-content-center fs-8" type="submit">Start 14-days trial</button>
          </div>
        </form>
      </div>
      <div class="d-flex align-items-center">
        <div>
          <img class="img-fluid" src="saturn-assets/images/applications/avatar-photo1.png" alt="">
          <img class="img-fluid ms-n5" src="saturn-assets/images/applications/avatar-photo2.png" alt="">
          <img class="img-fluid ms-n5" src="saturn-assets/images/applications/avatar-photo3.png" alt="">
        </div>
        <div class="ms-8">
          <span class="d-block lh-sm fs-5 fw-bold">500+</span>
          <span class="fs-9 lh-sm text-secondary">Happy Customers</span>
        </div>
        <div class="ms-8">
          <span class="d-block lh-sm fs-5 fw-bold">5.0/5</span>
          <div class="d-flex align-items-center">
            <img class="img-fluid" src="saturn-assets/images/applications/star.svg" alt="">
            <img class="img-fluid" src="saturn-assets/images/applications/star.svg" alt="">
            <img class="img-fluid" src="saturn-assets/images/applications/star.svg" alt="">
            <img class="img-fluid" src="saturn-assets/images/applications/star.svg" alt="">
            <img class="img-fluid" src="saturn-assets/images/applications/star.svg" alt="">
            <span class="ms-3 fs-9 lh-sm text-secondary">Reviews</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="d-block d-lg-none mt-24 ms-auto" src="saturn-assets/images/applications/group-app-light.png" alt="">
</section>

<section class="pt-24 position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="flaro-assets/images/applications/gradient3.svg" alt=""/><img class="d-none d-md-block position-absolute bottom-0 end-0 mw-md-md mw-lg-xl mw-xl-3xl img-fluid" src="flaro-assets/images/applications/iphone.png" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-end">
      <div class="col-12 col-lg-7 col-xl-6 pb-24">
        <div class="mw-lg mw-lg-2xl mx-auto mx-md-0"><span class="d-block mb-6 text-primary fs-9 fw-semibold text-uppercase" >👋 Meet new Flaro</span>
          <h2 class="mb-6"><span class="d-block" >Start with ease,</span><span >Grow your business</span></h2>
          <p class="mw-sm mb-10 fs-7 text-secondary" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p><a class="d-inline-block mb-20" href="#"><img src="flaro-assets/images/applications/app-store-round.png" alt=""/></a><span class="d-block mb-3 fw-bold" >Trusted by 1M+ customers</span>
          <div class="d-sm-flex align-items-center">
            <svg width="109" height="22" viewbox="0 0 109 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.707 4.21267C10.0281 3.22436 11.4263 3.22436 11.7474 4.21267L12.8948 7.74387C13.0384 8.18586 13.4503 8.48511 13.915 8.48511H17.6279C18.6671 8.48511 19.0992 9.81488 18.2585 10.4257L15.2547 12.6081C14.8787 12.8813 14.7214 13.3654 14.865 13.8074L16.0123 17.3386C16.3335 18.327 15.2023 19.1488 14.3616 18.538L11.3578 16.3556C10.9818 16.0824 10.4727 16.0824 10.0967 16.3556L7.09287 18.538C6.25216 19.1488 5.12099 18.327 5.44211 17.3386L6.58947 13.8074C6.73308 13.3654 6.57575 12.8813 6.19978 12.6081L3.19596 10.4257C2.35525 9.81488 2.78732 8.48511 3.82649 8.48511H7.53942C8.00415 8.48511 8.41603 8.18586 8.55964 7.74387L9.707 4.21267Z" fill="#6366F1"></path>
              <path d="M32.1616 4.21267C32.4827 3.22436 33.8809 3.22436 34.202 4.21267L35.3494 7.74387C35.493 8.18586 35.9049 8.48511 36.3696 8.48511H40.0825C41.1217 8.48511 41.5538 9.81488 40.7131 10.4257L37.7093 12.6081C37.3333 12.8813 37.176 13.3654 37.3196 13.8074L38.4669 17.3386C38.788 18.327 37.6569 19.1488 36.8162 18.538L33.8123 16.3556C33.4364 16.0824 32.9273 16.0824 32.5513 16.3556L29.5475 18.538C28.7067 19.1488 27.5756 18.327 27.8967 17.3386L29.0441 13.8074C29.1877 13.3654 29.0303 12.8813 28.6544 12.6081L25.6505 10.4257C24.8098 9.81488 25.2419 8.48511 26.2811 8.48511H29.994C30.4587 8.48511 30.8706 8.18586 31.0142 7.74387L32.1616 4.21267Z" fill="#6366F1"></path>
              <path d="M54.6162 4.21267C54.9373 3.22436 56.3355 3.22436 56.6566 4.21267L57.804 7.74387C57.9476 8.18586 58.3595 8.48511 58.8242 8.48511H62.5371C63.5763 8.48511 64.0084 9.81488 63.1677 10.4257L60.1638 12.6081C59.7879 12.8813 59.6305 13.3654 59.7742 13.8074L60.9215 17.3386C61.2426 18.327 60.1115 19.1488 59.2708 18.538L56.2669 16.3556C55.891 16.0824 55.3818 16.0824 55.0059 16.3556L52.002 18.538C51.1613 19.1488 50.0302 18.327 50.3513 17.3386L51.4986 13.8074C51.6423 13.3654 51.4849 12.8813 51.109 12.6081L48.1051 10.4257C47.2644 9.81488 47.6965 8.48511 48.7357 8.48511H52.4486C52.9133 8.48511 53.3252 8.18586 53.4688 7.74387L54.6162 4.21267Z" fill="#6366F1"></path>
              <path d="M77.0708 4.21267C77.3919 3.22436 78.7901 3.22436 79.1112 4.21267L80.2586 7.74387C80.4022 8.18586 80.8141 8.48511 81.2788 8.48511H84.9917C86.0309 8.48511 86.463 9.81488 85.6222 10.4257L82.6184 12.6081C82.2425 12.8813 82.0851 13.3654 82.2287 13.8074L83.3761 17.3386C83.6972 18.327 82.5661 19.1488 81.7253 18.538L78.7215 16.3556C78.3455 16.0824 77.8364 16.0824 77.4605 16.3556L74.4566 18.538C73.6159 19.1488 72.4848 18.327 72.8059 17.3386L73.9532 13.8074C74.0968 13.3654 73.9395 12.8813 73.5635 12.6081L70.5597 10.4257C69.719 9.81488 70.1511 8.48511 71.1903 8.48511H74.9032C75.3679 8.48511 75.7798 8.18586 75.9234 7.74387L77.0708 4.21267Z" fill="#6366F1"></path>
              <path d="M99.5251 4.21267C99.8462 3.22436 101.244 3.22436 101.566 4.21267L102.713 7.74387C102.857 8.18586 103.268 8.48511 103.733 8.48511H107.446C108.485 8.48511 108.917 9.81488 108.077 10.4257L105.073 12.6081C104.697 12.8813 104.539 13.3654 104.683 13.8074L105.83 17.3386C106.152 18.327 105.02 19.1488 104.18 18.538L101.176 16.3556C100.8 16.0824 100.291 16.0824 99.9148 16.3556L96.911 18.538C96.0703 19.1488 94.9391 18.327 95.2602 17.3386L96.4076 13.8074C96.5512 13.3654 96.3939 12.8813 96.0179 12.6081L93.0141 10.4257C92.1734 9.81488 92.6054 8.48511 93.6446 8.48511H97.3575C97.8223 8.48511 98.2341 8.18586 98.3778 7.74387L99.5251 4.21267Z" fill="#6366F1"></path>
            </svg><span class="ms-2 fw-bold" >4.2/5</span><span class="d-block ms-1 text-secondary-dark fw-medium" >(45k Reviews)</span>
          </div><img class="d-md-none d-block w-100 mt-20 img-fluid" src="flaro-assets/images/applications/iphone.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-xl">
          <h2 class="fs-10 lh-sm mb-6" >Get our mobile app to make the process faster.</h2>
          <p class="fs-17 text-muted mb-16" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
          <div class="row g-5">
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store2.png" alt=""/></a></div>
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store2.png" alt=""/></a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center"><img class="img-fluid self-end" src="gradia-assets/images/applications/mobile.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto">
      <div class="row align-items-center align-items-xl-stretch">
        <div class="col-md-6 d-xl-none position-relative order-last order-md-first"><img class="position-absolute top-0 end-0 mt-12 mt-md-0 me-n24" src="nightsable-assets/images/application-section/lines.png" alt=""><img class="img-fluid" src="nightsable-assets/images/application-section/phone.png" alt=""></div>
        <div class="d-none d-xl-block col-xl-7 position-relative h-100"><img class="position-absolute top-50 end-0 me-n24 mt-32" src="nightsable-assets/images/application-section/lines.png" alt=""><img class="position-absolute top-50 start-0 ms-n32" src="nightsable-assets/images/application-section/phone.png" alt=""></div>
        <div class="col-md-6 col-xl-5">
          <div class="mw-sm mx-auto me-md-0 py-12 py-md-52">
            <div class="mw-xs mb-6"><span class="badge mb-4 text-primary">Nightsable Card</span>
              <h3 class="font-heading mb-6" style="letter-spacing: -0.1rem;">Get a Nightsable App</h3>
              <p class="text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
            <div class="d-flex"><a class="btn me-6 p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/application-section/app-store.png" alt=""></a><a class="btn p-0" href="#"><img class="img-fluid" src="nightsable-assets/images/application-section/google-play.png" alt=""></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-20"><img class="d-none d-md-block position-absolute top-0 start-0 mt-24" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/>
  <div class="position-relative container text-center">
    <div class="max-w-2xl mx-auto mb-16"><span class="text-info">What&apos;s new at Shuffle</span>
      <h2 class="mt-8 mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-10 lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="d-flex justify-content-center align-items-center mb-24"><a class="me-4" href="#"><img src="zeus-assets/buttons/app-store.svg" alt=""/></a><a href="#"><img src="zeus-assets/buttons/google-play.svg" alt=""/></a></div>
    </div>
    <div><img class="d-block img-fluid mx-auto" src="zeus-assets/images/devices/3-devices.svg" alt=""/></div>
  </div>
</section>

<section class="position-relative bg-white pt-40 overflow-hidden">
  <div class="container mb-28">
    <div class="text-center"><a class="d-inline-block mb-8" href="#"><img class="img-fluid" src="zospace-assets/logos/zospace-dark-logo.svg" alt=""/></a>
      <h2 class="text-dark mb-8" >Collaborate everywhere.</h2>
      <p class="text-secondary mb-16" >Get our free mobile application.</p><a class="btn btn-primary" href="#" >Downolad</a>
    </div>
  </div>
  <div class="position-relative">
    <div class="position-absolute top-0 end-0 mt-24 col-6 bg-secondary-light" style="height: 1px;"></div>
    <div class="position-absolute top-50 start-0 col-6 bg-secondary-light" style="height: 1px;"></div><img class="position-relative d-block mx-auto img-fluid" src="zospace-assets/images/phone-center-with-apps.png" alt=""/>
  </div>
</section>

<section class="position-relative pt-24 pt-md-32 bg-warning overflow-hidden">
  <div class="container">
    <div class="d-flex align-items-center mb-24"><span class="display-6 h5 mb-0" >06</span>
      <div class="mx-4 bg-warning-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Download App</span>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-24 pb-xl-52">
        <h1 class="display-3 mb-20" >Online Configurator</h1>
        <div class="row mb-20">
          <div class="col-12 col-sm-6 mb-12 mb-sm-0">
            <div class="d-sm-flex mw-xs">
              <div class="mb-4 mb-sm-0 me-sm-4 me-md-8 text-primary">
                <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.9999 3.33301C19.5579 3.33301 19.134 3.5086 18.8214 3.82116C18.5088 4.13372 18.3333 4.55765 18.3333 4.99967V8.33301C18.3333 8.77504 18.5088 9.19896 18.8214 9.51152C19.134 9.82408 19.5579 9.99967 19.9999 9.99967C20.4419 9.99967 20.8659 9.82408 21.1784 9.51152C21.491 9.19896 21.6666 8.77504 21.6666 8.33301V4.99967C21.6666 4.55765 21.491 4.13372 21.1784 3.82116C20.8659 3.5086 20.4419 3.33301 19.9999 3.33301ZM34.9999 18.333H31.6666C31.2246 18.333 30.8006 18.5086 30.4881 18.8212C30.1755 19.1337 29.9999 19.5576 29.9999 19.9997C29.9999 20.4417 30.1755 20.8656 30.4881 21.1782C30.8006 21.4907 31.2246 21.6663 31.6666 21.6663H34.9999C35.4419 21.6663 35.8659 21.4907 36.1784 21.1782C36.491 20.8656 36.6666 20.4417 36.6666 19.9997C36.6666 19.5576 36.491 19.1337 36.1784 18.8212C35.8659 18.5086 35.4419 18.333 34.9999 18.333ZM9.99992 19.9997C9.99992 19.5576 9.82432 19.1337 9.51176 18.8212C9.1992 18.5086 8.77528 18.333 8.33325 18.333H4.99992C4.55789 18.333 4.13397 18.5086 3.82141 18.8212C3.50885 19.1337 3.33325 19.5576 3.33325 19.9997C3.33325 20.4417 3.50885 20.8656 3.82141 21.1782C4.13397 21.4907 4.55789 21.6663 4.99992 21.6663H8.33325C8.77528 21.6663 9.1992 21.4907 9.51176 21.1782C9.82432 20.8656 9.99992 20.4417 9.99992 19.9997ZM10.3666 8.33301C10.0417 8.0258 9.60807 7.86023 9.16111 7.87274C8.71415 7.88524 8.29046 8.07478 7.98325 8.39967C7.67604 8.72457 7.51048 9.15819 7.52298 9.60515C7.53548 10.0521 7.72503 10.4758 8.04992 10.783L10.4499 13.0997C10.611 13.2552 10.8017 13.3767 11.0108 13.4568C11.2198 13.537 11.4428 13.5743 11.6666 13.5663C11.8911 13.5655 12.1131 13.5193 12.3193 13.4305C12.5255 13.3417 12.7117 13.2122 12.8666 13.0497C13.177 12.7374 13.3512 12.315 13.3512 11.8747C13.3512 11.4344 13.177 11.0119 12.8666 10.6997L10.3666 8.33301ZM28.3333 13.5663C28.7624 13.5646 29.1743 13.3975 29.4833 13.0997L31.8833 10.783C32.176 10.4771 32.3414 10.0712 32.3458 9.64779C32.3501 9.22437 32.1931 8.81517 31.9067 8.50329C31.6203 8.19141 31.2259 8.00025 30.8037 7.96862C30.3814 7.93699 29.9629 8.06728 29.6333 8.33301L27.2333 10.6997C26.9228 11.0119 26.7486 11.4344 26.7486 11.8747C26.7486 12.315 26.9228 12.7374 27.2333 13.0497C27.5218 13.3542 27.9146 13.5387 28.3333 13.5663ZM19.9999 29.9997C19.5579 29.9997 19.134 30.1753 18.8214 30.4878C18.5088 30.8004 18.3333 31.2243 18.3333 31.6663V34.9997C18.3333 35.4417 18.5088 35.8656 18.8214 36.1782C19.134 36.4907 19.5579 36.6663 19.9999 36.6663C20.4419 36.6663 20.8659 36.4907 21.1784 36.1782C21.491 35.8656 21.6666 35.4417 21.6666 34.9997V31.6663C21.6666 31.2243 21.491 30.8004 21.1784 30.4878C20.8659 30.1753 20.4419 29.9997 19.9999 29.9997ZM29.5499 26.8997C29.2317 26.5925 28.8044 26.4243 28.3621 26.4321C27.9199 26.4399 27.4988 26.6231 27.1916 26.9413C26.8844 27.2596 26.7162 27.6869 26.724 28.1291C26.7318 28.5714 26.915 28.9925 27.2333 29.2997L29.6333 31.6663C29.9422 31.9641 30.3541 32.1313 30.7833 32.133C31.0066 32.1343 31.2279 32.0907 31.434 32.0048C31.6402 31.9189 31.8269 31.7925 31.9833 31.633C32.1395 31.4781 32.2635 31.2937 32.3481 31.0906C32.4327 30.8875 32.4762 30.6697 32.4762 30.4497C32.4762 30.2297 32.4327 30.0118 32.3481 29.8087C32.2635 29.6056 32.1395 29.4213 31.9833 29.2663L29.5499 26.8997ZM10.4499 26.8997L8.04992 29.2163C7.8937 29.3713 7.76971 29.5556 7.6851 29.7587C7.60049 29.9618 7.55692 30.1797 7.55692 30.3997C7.55692 30.6197 7.60049 30.8375 7.6851 31.0406C7.76971 31.2437 7.8937 31.4281 8.04992 31.583C8.20624 31.7425 8.39302 31.8689 8.59916 31.9548C8.8053 32.0407 9.0266 32.0843 9.24992 32.083C9.66078 32.0865 10.0584 31.9381 10.3666 31.6663L12.7666 29.3497C13.0848 29.0425 13.268 28.6214 13.2758 28.1791C13.2837 27.7369 13.1155 27.3096 12.8083 26.9913C12.501 26.6731 12.08 26.4899 11.6377 26.4821C11.1954 26.4743 10.7682 26.6425 10.4499 26.9497V26.8997Z" fill="currentColor"></path>
                </svg>
              </div>
              <div>
                <h4 class="mb-6" >Flexibility</h4>
                <p class="text-dark lh-lg mb-0" >The house by the pond cras ornare, some chords for a three moments, like a sense of truth that.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-sm-6">
            <div class="d-sm-flex mw-xs">
              <div class="mb-4 mb-sm-0 me-sm-4 me-md-8 text-primary">
                <svg width="22" height="34" viewbox="0 0 22 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="14" y="0.75" width="3.5" height="7" rx="1.75" transform="rotate(90 14 0.75)" fill="currentColor"></rect>
                  <rect x="18" y="8" width="3" height="15" rx="1.5" transform="rotate(90 18 8)" fill="currentColor"></rect>
                  <rect x="22" y="15.25" width="3" height="15" rx="1.5" transform="rotate(90 22 15.25)" fill="currentColor"></rect>
                  <rect x="15" y="22.5" width="3" height="15" rx="1.5" transform="rotate(90 15 22.5)" fill="currentColor"></rect>
                  <rect x="16" y="30" width="3.5" height="9" rx="1.75" transform="rotate(90 16 30)" fill="currentColor"></rect>
                </svg>
              </div>
              <div>
                <h4 class="mb-6" >Organize</h4>
                <p class="text-dark lh-lg mb-0" >Really, like a sense of truth that comes from within. The final game.</p>
              </div>
            </div>
          </div>
        </div><a class="btn btn-primary" href="#" >Download Application</a>
      </div>
      <div class="col-12 col-lg-6 align-self-end"><img class="img-fluid d-block mx-auto me-lg-0 ms-lg-20 ms-xxl-40" style="object-fit: contain;" src="wrexa-assets/images/application-right.png" alt=""/></div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="mb-10 text-center mw-md-5xl mx-auto">
        <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
        <h2 class="font-heading mb-0 fs-6 text-white" style="letter-spacing: -1px;">Great work starts with your app</h2>
      </div>
      <div class="mb-10 d-flex justify-content-center">
        <div class="position-relative">
          <img class="position-absolute start-0 top-50 translate-middle-y" style="width: 31%;" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
          <img class="position-absolute end-0 top-50 translate-middle-y" style="width: 16%;" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
          <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/applications/mockup-dark.png" alt="">
        </div>
      </div>
      <div class="mw-md-5xl mx-auto text-center">
        <p class="mb-6 fs-9 fw-medium text-secondary-light">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
        <div class="row justify-content-center g-4 g-md-6">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Learn More</a></div>
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-success-light shadow" href="#">About Us</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

<section class="py-24 position-relative overflow-hidden">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 mb-12 mb-md-0">
        <div class="mw-md mx-auto">
          <h2 class="mb-6 display-4 lh-sm font-heading" >Build and launch without problems</h2>
          <p class="mb-6 lh-lg" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          
          <div class="d-flex flex-wrap"><a class="mb-4 me-4" href="#"><img src="pstls-assets/images/applications/appstore.svg" alt="" /></a><a class="mb-4" href="#"><img src="pstls-assets/images/applications/googleplay.svg" alt="" /></a></div>
        </div>
      </div>
      
      <div class="col-12 col-md-6"><img class="img-fluid d-block mx-auto mw-xs mw-lg-md" src="pstls-assets/images/applications/phone-light-squares.png" alt="" /></div>
    </div>
  </div>
</section>

<section class="pt-20">
  <div class="container position-relative text-center">
    <div class="mw-4xl mx-auto mb-16 text-center"><span class="badge bg-warning-light">New feature</span>
      <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mw-xl mx-auto lead lh-lg text-muted mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="d-flex flex-wrap justify-content-center"><a class="me-4 mb-4 mb-sm-0" href="#"><img src="cronos-assets/buttons/app-store.svg" alt=""/></a><a href="#"><img src="cronos-assets/buttons/google-play.svg" alt=""/></a></div>
    </div>
    <div class="mw-xl mx-auto"><img class="img-fluid" src="cronos-assets/images/phone-half-three.png" alt=""/></div>
  </div>
</section>

<section class="pt-5">
  <div class="container position-relative text-center">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8 col-xl-7">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="mt-2 mb-3 display-5 fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="d-flex flex-wrap justify-content-center">
          <a class="me-3 mb-3 mb-sm-0" href="#">
            <img src="bootstrap5-plain-assets/images/buttons/app-store.svg" alt="">
          </a>
          <a href="#">
            <img src="bootstrap5-plain-assets/images/buttons/google-play.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="mt-5 pt-2">
      <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/images/devices/3-devices.svg" alt="">
    </div>
  </div>
</section>