Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

UI Components by Shuffle

Browse 13489 beautiful UI components — complete with full source code, visual editing, AI assistance, and more.

Framework

UI Library

Components

Bootstrap Component #6941

<section class="position-relative py-16 bg-secondary-dark overflow-hidden">
  <div class="position-absolute bottom-0 start-0 bg-light w-100" style="height: 209px;"></div>
  <div class="container">
    <div class="position-relative py-16 px-16 px-md-24 bg-light-light overflow-hidden rounded" style="background-image: url('flex-assets/elements/pattern-light.png')">
      <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
      <div class="position-relative row align-items-center g-16" style="z-index:10;">
        <div class="col-12 col-md-6">
          <div class="mw-md-md">
            <h2 class="mb-4 fs-6 font-heading" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4 g-md-6">
            <div class="col-12 col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto">
              <div class="bg-white rounded"><a class="btn btn-outline-light w-100 px-7 py-4 fs-10 fw-medium text-dark border rounded shadow" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6942

<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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.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 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Rich text</span>
          <h2 class="font-heading mb-6 fs-6 text-white" style="letter-spacing: -1px;">Flex is a simple, beautiful tool that helps you work sanely</h2>
          <p class="mb-0 fs-9 fw-semibold text-secondary-light">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end 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-sm" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-white shadow-sm" href="#">Learn More</a></div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-8">
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary-light">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <h3 class="mb-4 font-heading fs-7 fw-semibold text-white">Header 1</h3>
          <p class="mb-6 fs-10 fw-medium text-secondary-light">Flex integrates customer data and marketing tools:</p>
          <ul class="list-unstyled">
            <li class="fs-10 fw-medium text-secondary-light">1.Enterprise software for startups</li>
            <li class="fs-10 fw-medium text-secondary-light">2.Time is money. Stop jumping from tool to tool with all the hassle of integrations.</li>
            <li class="fs-10 fw-medium text-secondary-light">3.Now you can manage your entire business on one platform.</li>
          </ul>
          <p class="mb-0 fs-10 fw-medium text-secondary-light">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex justify-content-center justify-content-md-end">
            <img class="img-fluid" src="flex-assets/images/rich-text/avatar.png" alt="">
          </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="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6943

<section class="position-relative py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-8 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Our clients</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Trusted by the top companies in this industry</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6944

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-8 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Our clients</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Trusted by the top companies in this industry</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6945

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative pt-24 pb-32 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-20 mw-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Features</span>
        <h2 class="font-heading mb-4 fs-6" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="row g-10">
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_631_12694)">
                          <path d="M17 21.63H5C4.20435 21.63 3.44129 21.3139 2.87868 20.7513C2.31607 20.1887 2 19.4257 2 18.63V10.63C2 10.3648 1.89464 10.1104 1.70711 9.9229C1.51957 9.73536 1.26522 9.63 1 9.63C0.734784 9.63 0.48043 9.73536 0.292893 9.9229C0.105357 10.1104 0 10.3648 0 10.63L0 18.63C0 19.9561 0.526784 21.2279 1.46447 22.1655C2.40215 23.1032 3.67392 23.63 5 23.63H17C17.2652 23.63 17.5196 23.5246 17.7071 23.3371C17.8946 23.1496 18 22.8952 18 22.63C18 22.3648 17.8946 22.1104 17.7071 21.9229C17.5196 21.7354 17.2652 21.63 17 21.63ZM21 3.63H7C6.20435 3.63 5.44129 3.94608 4.87868 4.50868C4.31607 5.07129 4 5.83436 4 6.63V16.63C4 17.4257 4.31607 18.1887 4.87868 18.7513C5.44129 19.3139 6.20435 19.63 7 19.63H21C21.7956 19.63 22.5587 19.3139 23.1213 18.7513C23.6839 18.1887 24 17.4257 24 16.63V6.63C24 5.83436 23.6839 5.07129 23.1213 4.50868C22.5587 3.94608 21.7956 3.63 21 3.63V3.63ZM20.59 5.63L14.71 11.51C14.617 11.6037 14.5064 11.6781 14.3846 11.7289C14.2627 11.7797 14.132 11.8058 14 11.8058C13.868 11.8058 13.7373 11.7797 13.6154 11.7289C13.4936 11.6781 13.383 11.6037 13.29 11.51L7.41 5.63H20.59ZM22 16.63C22 16.8952 21.8946 17.1496 21.7071 17.3371C21.5196 17.5246 21.2652 17.63 21 17.63H7C6.73478 17.63 6.48043 17.5246 6.29289 17.3371C6.10536 17.1496 6 16.8952 6 16.63V7L11.88 12.88C12.4425 13.4418 13.205 13.7574 14 13.7574C14.795 13.7574 15.5575 13.4418 16.12 12.88L22 7V16.63Z" fill="currentColor"></path>
                        </g>
                        <defs><clippath id="clip0_631_12694"><rect width="24" height="24" fill="currentColor"></rect></clippath></defs>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3">Measure your performance</h3>
                    <p class="mb-0 fw-medium text-secondary">Stay connected with your team and make quick decisions wherever you are.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3">Build your website</h3>
                    <p class="mb-0 fw-medium text-secondary">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2V2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2V2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3">Connect multiple apps</h3>
                    <p class="mb-0 fw-medium text-secondary">The first business platform to bring together all of your products from one place.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-center">
            <div class="col-auto">
              <div class="position-relative">
                <img class="position-absolute top-0 start-0 mt-n8 ms-n8" src="flex-assets/elements/circle-orange.svg" alt="">
                <img class="position-absolute bottom-0 end-0 me-n8 mb-n9" src="flex-assets/elements/dots-blue.svg" alt="">
                <img class="img-fluid" src="flex-assets/images/features/book.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6946

<section class="overflow-hidden">
  <div class="position-relative py-20 bg-light-light border-bottom border-5 border-success" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mw-md-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Blog</span>
        <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Our mission is to make knowledge and news accessible for everyone.</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="bg-white">
    <div class="container">
      <div class="py-16">
        <div class="row g-8">
          <div class="col-12 col-md-3">
            <div class="form-group position-relative mb-6 mx-auto">
              <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.07 16.83L19 14.71C18.5547 14.2868 17.9931 14.0063 17.3872 13.9047C16.7814 13.8032 16.159 13.8851 15.6 14.14L14.7 13.24C15.7606 11.8229 16.2449 10.0567 16.0555 8.29684C15.8662 6.537 15.0172 4.91423 13.6794 3.7552C12.3417 2.59618 10.6145 1.98696 8.84567 2.05019C7.0768 2.11341 5.39755 2.84439 4.14597 4.09597C2.8944 5.34755 2.16342 7.0268 2.10019 8.79567C2.03696 10.5645 2.64618 12.2917 3.80521 13.6294C4.96423 14.9672 6.587 15.8162 8.34684 16.0055C10.1067 16.1949 11.8729 15.7106 13.29 14.65L14.18 15.54C13.8951 16.0996 13.793 16.7346 13.8881 17.3553C13.9832 17.9761 14.2706 18.5513 14.71 19L16.83 21.12C17.3925 21.6818 18.155 21.9974 18.95 21.9974C19.745 21.9974 20.5075 21.6818 21.07 21.12C21.3557 20.8406 21.5828 20.5069 21.7378 20.1386C21.8928 19.7702 21.9726 19.3746 21.9726 18.975C21.9726 18.5754 21.8928 18.1798 21.7378 17.8114C21.5828 17.4431 21.3557 17.1094 21.07 16.83ZM12.59 12.59C11.8902 13.288 10.9993 13.7629 10.0297 13.9549C9.06019 14.1468 8.0555 14.047 7.14261 13.6682C6.22971 13.2894 5.44957 12.6485 4.90072 11.8265C4.35187 11.0046 4.05894 10.0384 4.05894 9.05C4.05894 8.06163 4.35187 7.09544 4.90072 6.27347C5.44957 5.45149 6.22971 4.81062 7.14261 4.43182C8.0555 4.05301 9.06019 3.95325 10.0297 4.14515C10.9993 4.33706 11.8902 4.812 12.59 5.51C13.0556 5.97446 13.4251 6.52621 13.6771 7.13367C13.9292 7.74112 14.0589 8.39233 14.0589 9.05C14.0589 9.70768 13.9292 10.3589 13.6771 10.9663C13.4251 11.5738 13.0556 12.1255 12.59 12.59ZM19.66 19.66C19.567 19.7537 19.4564 19.8281 19.3346 19.8789C19.2127 19.9297 19.082 19.9558 18.95 19.9558C18.818 19.9558 18.6873 19.9297 18.5654 19.8789C18.4436 19.8281 18.333 19.7537 18.24 19.66L16.12 17.54C16.0263 17.447 15.9519 17.3364 15.9011 17.2146C15.8503 17.0927 15.8242 16.962 15.8242 16.83C15.8242 16.698 15.8503 16.5673 15.9011 16.4454C15.9519 16.3236 16.0263 16.213 16.12 16.12C16.213 16.0263 16.3236 15.9519 16.4454 15.9011C16.5673 15.8503 16.698 15.8242 16.83 15.8242C16.962 15.8242 17.0927 15.8503 17.2146 15.9011C17.3364 15.9519 17.447 16.0263 17.54 16.12L19.66 18.24C19.7537 18.333 19.8281 18.4436 19.8789 18.5654C19.9297 18.6873 19.9558 18.818 19.9558 18.95C19.9558 19.082 19.9297 19.2127 19.8789 19.3346C19.8281 19.4564 19.7537 19.567 19.66 19.66Z" fill="#556987"></path>
              </svg>
              <input class="form-control ps-12 pe-4 text-secondary shadow" id="blogInput19-1" type="text" aria-describedby="blogHelp" placeholder="Search">
            </div>
            <p class="mb-4 fs-12 px-4 text-secondary text-uppercase fw-semibold">Categories</p>
            <ul class="mb-8 nav nav-pills flex-column">
              <li class="nav-item active mb-2"><a class="nav-link py-3 px-4 fw-bold text-success link-success bg-success bg-opacity-25 shadow" href="#">All Categories</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Technology</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Development</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Marketing</a></li>
              <li class="nav-item"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Start-up</a></li>
            </ul>
          </div>
          <div class="col-12 col-md-9">
            <div class="mb-20 row g-8">
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news2-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news3-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news4-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news5-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news6-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row justify-content-center">
              <div class="col-12 col-md-auto">
                <a class="btn btn-lg btn-success d-flex justify-content-center align-items-center fs-12 py-2 px-4 w-100 shadow" href="#">
                  <span class="me-3 text-success-light">View more</span>
                  <svg width="12" height="10" viewbox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.7583 4.40833C10.6809 4.33023 10.5887 4.26823 10.4871 4.22592C10.3856 4.18362 10.2767 4.16183 10.1667 4.16183C10.0567 4.16183 9.94773 4.18362 9.84619 4.22592C9.74464 4.26823 9.65247 4.33023 9.575 4.40833L6.83333 7.15833V0.833333C6.83333 0.61232 6.74554 0.400358 6.58926 0.244078C6.43297 0.0877975 6.22101 0 6 0C5.77899 0 5.56702 0.0877975 5.41074 0.244078C5.25446 0.400358 5.16667 0.61232 5.16667 0.833333V7.15833L2.425 4.40833C2.26808 4.25141 2.05525 4.16326 1.83333 4.16326C1.61141 4.16326 1.39859 4.25141 1.24167 4.40833C1.08475 4.56525 0.99659 4.77808 0.99659 5C0.99659 5.22192 1.08475 5.43475 1.24167 5.59167L5.40833 9.75833C5.48759 9.8342 5.58104 9.89367 5.68333 9.93333C5.78308 9.97742 5.89094 10.0002 6 10.0002C6.10906 10.0002 6.21692 9.97742 6.31667 9.93333C6.41896 9.89367 6.51241 9.8342 6.59167 9.75833L10.7583 5.59167C10.8364 5.5142 10.8984 5.42203 10.9407 5.32048C10.9831 5.21893 11.0048 5.11001 11.0048 5C11.0048 4.88999 10.9831 4.78107 10.9407 4.67952C10.8984 4.57797 10.8364 4.4858 10.7583 4.40833Z" fill="#F0FDF4"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6947

<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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.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-16 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Contact</span>
          <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Let&rsquo;s stay connected</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary-light">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Send Message</a></div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-5">
          <div class="mw-md-xl">
            <div class="row g-16">
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M32.21 20.82L26 14.78C25.474 14.2799 24.7759 14.001 24.05 14.001C23.3241 14.001 22.626 14.2799 22.1 14.78L15.89 20.78C15.6141 21.0209 15.3922 21.3173 15.2388 21.6499C15.0854 21.9825 15.004 22.3438 15 22.71V31.29C15.0105 32.0176 15.309 32.7114 15.8301 33.2193C16.3512 33.7273 17.0524 34.008 17.78 34H30.22C30.9476 34.008 31.6488 33.7273 32.1699 33.2193C32.691 32.7114 32.9895 32.0176 33 31.29V22.71C32.9992 22.3585 32.929 22.0106 32.7935 21.6862C32.6579 21.3619 32.4596 21.0675 32.21 20.82ZM23.44 16.22C23.593 16.0802 23.7927 16.0026 24 16.0026C24.2073 16.0026 24.407 16.0802 24.56 16.22L30 21.5L24.53 26.78C24.377 26.9198 24.1773 26.9974 23.97 26.9974C23.7627 26.9974 23.563 26.9198 23.41 26.78L18 21.5L23.44 16.22ZM31 31.29C30.9871 31.4863 30.8987 31.6699 30.7532 31.8023C30.6078 31.9347 30.4166 32.0056 30.22 32H17.78C17.5834 32.0056 17.3922 31.9347 17.2468 31.8023C17.1013 31.6699 17.0129 31.4863 17 31.29V23.35L21.05 27.25L19.39 28.85C19.2037 29.0374 19.0992 29.2908 19.0992 29.555C19.0992 29.8192 19.2037 30.0726 19.39 30.26C19.4829 30.3575 19.5946 30.4352 19.7184 30.4885C19.8421 30.5418 19.9753 30.5695 20.11 30.57C20.3675 30.569 20.6146 30.4687 20.8 30.29L22.57 28.59C23.0096 28.8586 23.5148 29.0008 24.03 29.0008C24.5452 29.0008 25.0504 28.8586 25.49 28.59L27.26 30.29C27.4454 30.4687 27.6925 30.569 27.95 30.57C28.0847 30.5695 28.2179 30.5418 28.3416 30.4885C28.4654 30.4352 28.5771 30.3575 28.67 30.26C28.8563 30.0726 28.9608 29.8192 28.9608 29.555C28.9608 29.2908 28.8563 29.0374 28.67 28.85L27 27.25L31 23.35V31.29Z" fill="#333F51"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-2 font-heading fs-7 text-white">Email</h2>
                    <p class="mb-0 fs-9 text-secondary-light fw-medium">contact@flex.co</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M31.41 25C31.19 25 30.96 24.93 30.74 24.88C30.2949 24.7805 29.8572 24.6501 29.43 24.49C28.9661 24.3212 28.4562 24.33 27.9984 24.5146C27.5405 24.6992 27.1671 25.0466 26.95 25.49L26.73 25.95C25.7589 25.3992 24.8617 24.7271 24.0601 23.95C23.2829 23.1484 22.6108 22.2512 22.0601 21.28L22.5201 21.07C22.9634 20.8529 23.3108 20.4795 23.4954 20.0217C23.6801 19.5639 23.6888 19.0539 23.5201 18.59C23.3612 18.159 23.231 17.7181 23.13 17.27C23.08 17.05 23.04 16.82 23.01 16.6C22.8886 15.8956 22.5197 15.2577 21.9697 14.8012C21.4197 14.3447 20.7247 14.0996 20.0101 14.11H17C16.5773 14.1094 16.1592 14.1982 15.7732 14.3706C15.3871 14.5429 15.0419 14.7949 14.76 15.11C14.4724 15.4337 14.2582 15.8158 14.1322 16.23C14.0061 16.6443 13.9713 17.081 14.03 17.51C14.5736 21.6721 16.4753 25.5387 19.4401 28.51C22.4114 31.4748 26.2779 33.3764 30.4401 33.92C30.5699 33.9299 30.7002 33.9299 30.83 33.92C31.5675 33.9211 32.2794 33.6505 32.83 33.16C33.1452 32.8782 33.3971 32.5329 33.5695 32.1469C33.7418 31.7609 33.8306 31.3428 33.83 30.92V27.92C33.8247 27.229 33.5809 26.5611 33.14 26.0291C32.6991 25.4971 32.088 25.1336 31.41 25ZM31.9 31C31.8997 31.1395 31.8702 31.2775 31.8134 31.4049C31.7565 31.5324 31.6736 31.6465 31.57 31.74C31.4605 31.8399 31.33 31.9141 31.1882 31.9573C31.0464 32.0006 30.8967 32.0117 30.75 31.99C27.0183 31.5026 23.5503 29.802 20.8801 27.15C18.2075 24.4775 16.4921 20.9974 16 17.25C15.9783 17.1033 15.9895 16.9537 16.0327 16.8119C16.076 16.67 16.1502 16.5396 16.25 16.43C16.3447 16.3252 16.4604 16.2415 16.5897 16.1847C16.719 16.1278 16.8588 16.0989 17 16.1H20.0001C20.2312 16.0944 20.4572 16.169 20.6395 16.3112C20.8218 16.4534 20.9492 16.6544 21.0001 16.88C21.0001 17.15 21.09 17.43 21.15 17.7C21.2656 18.2239 21.4194 18.7386 21.61 19.24L20.2101 19.9C19.9694 20.0105 19.7824 20.2119 19.6901 20.46C19.59 20.7035 19.59 20.9765 19.6901 21.22C21.1293 24.3028 23.6073 26.7808 26.69 28.22C26.9335 28.32 27.2066 28.32 27.45 28.22C27.6982 28.1276 27.8996 27.9406 28.01 27.7L28.64 26.3C29.156 26.4881 29.6838 26.6418 30.22 26.76C30.48 26.82 30.7601 26.87 31.0301 26.91C31.2556 26.9608 31.4566 27.0882 31.5989 27.2705C31.7411 27.4529 31.8157 27.6788 31.81 27.91L31.9 31ZM26 14C25.77 14 25.53 14 25.3 14C25.0348 14.0225 24.7894 14.1495 24.6178 14.353C24.4462 14.5565 24.3625 14.8198 24.385 15.085C24.4076 15.3502 24.5346 15.5956 24.738 15.7672C24.9415 15.9388 25.2048 16.0225 25.47 16H26C27.5913 16 29.1175 16.6321 30.2427 17.7574C31.3679 18.8826 32 20.4087 32 22C32 22.18 32 22.35 32 22.53C31.9779 22.7938 32.0612 23.0556 32.2318 23.2581C32.4024 23.4606 32.6463 23.5871 32.91 23.61H32.99C33.2404 23.611 33.482 23.5181 33.6671 23.3496C33.8523 23.1811 33.9675 22.9493 33.99 22.7C33.99 22.47 33.99 22.23 33.99 22C33.9901 19.88 33.1486 17.8467 31.6504 16.3467C30.1523 14.8467 28.12 14.0027 26 14V14ZM28 22C28 22.2652 28.1054 22.5196 28.2929 22.7071C28.4805 22.8946 28.7348 23 29 23C29.2653 23 29.5196 22.8946 29.7072 22.7071C29.8947 22.5196 30 22.2652 30 22C30 20.9391 29.5786 19.9217 28.8285 19.1716C28.0783 18.4214 27.0609 18 26 18C25.7348 18 25.4805 18.1054 25.2929 18.2929C25.1054 18.4804 25 18.7348 25 19C25 19.2652 25.1054 19.5196 25.2929 19.7071C25.4805 19.8946 25.7348 20 26 20C26.5305 20 27.0392 20.2107 27.4143 20.5858C27.7893 20.9609 28 21.4696 28 22Z" fill="#333F51"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-2 font-heading fs-7 text-white">Phone</h2>
                    <p class="mb-0 fs-9 text-secondary-light fw-medium">+7-843-672-431</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M33 14H15C14.7348 14 14.4804 14.1054 14.2929 14.2929C14.1054 14.4804 14 14.7348 14 15V33C14 33.2652 14.1054 33.5196 14.2929 33.7071C14.4804 33.8946 14.7348 34 15 34H33C33.2652 34 33.5196 33.8946 33.7071 33.7071C33.8946 33.5196 34 33.2652 34 33V15C34 14.7348 33.8946 14.4804 33.7071 14.2929C33.5196 14.1054 33.2652 14 33 14V14ZM20 32H16V28H20V32ZM20 26H16V22H20V26ZM20 20H16V16H20V20ZM26 32H22V28H26V32ZM26 26H22V22H26V26ZM26 20H22V16H26V20ZM32 32H28V28H32V32ZM32 26H28V22H32V26ZM32 20H28V16H32V20Z" fill="#333F51"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-3 font-heading fs-7 text-white">Socials</h2>
                    <div class="row">
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7272V12.766H16.3582L16.7668 9.66243H13.6348V7.68126C13.6348 6.78299 13.8881 6.17083 15.2029 6.17083L16.877 6.17015V3.39421C16.5875 3.35731 15.5937 3.27271 14.437 3.27271C12.0216 3.27271 10.368 4.71878 10.368 7.37389V9.66243H7.63635V12.766H10.368V20.7272H13.6348Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15606" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7272V12.766H16.3582L16.7668 9.66243H13.6348V7.68126C13.6348 6.78299 13.8881 6.17083 15.2029 6.17083L16.877 6.17015V3.39421C16.5875 3.35731 15.5937 3.27271 14.437 3.27271C12.0216 3.27271 10.368 4.71878 10.368 7.37389V9.66243H7.63635V12.766H10.368V20.7272H13.6348Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15606)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15607" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15607)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.60057 2.18176H16.3991C19.3872 2.18176 21.8182 4.61276 21.8181 7.60069V16.3992C21.8181 19.3871 19.3872 21.8181 16.3991 21.8181H7.60057C4.61264 21.8181 2.18176 19.3872 2.18176 16.3992V7.60069C2.18176 4.61276 4.61264 2.18176 7.60057 2.18176ZM16.3992 20.0759C18.4266 20.0759 20.076 18.4266 20.076 16.3992H20.0759V7.60069C20.0759 5.57343 18.4265 3.924 16.3991 3.924H7.60057C5.57331 3.924 3.924 5.57343 3.924 7.60069V16.3992C3.924 18.4266 5.57331 20.076 7.60057 20.0759H16.3992ZM6.85709 12.0001C6.85709 9.16418 9.16413 6.85709 11.9999 6.85709C14.8358 6.85709 17.1428 9.16418 17.1428 12.0001C17.1428 14.8358 14.8358 17.1428 11.9999 17.1428C9.16413 17.1428 6.85709 14.8358 6.85709 12.0001ZM8.62792 11.9999C8.62792 13.8592 10.1407 15.3718 11.9999 15.3718C13.8592 15.3718 15.372 13.8592 15.372 11.9999C15.372 10.1405 13.8593 8.62784 11.9999 8.62784C10.1406 8.62784 8.62792 10.1405 8.62792 11.9999Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15608" style="mask-type:alpha" maskunits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.60057 2.18176H16.3991C19.3872 2.18176 21.8182 4.61276 21.8181 7.60069V16.3992C21.8181 19.3871 19.3872 21.8181 16.3991 21.8181H7.60057C4.61264 21.8181 2.18176 19.3872 2.18176 16.3992V7.60069C2.18176 4.61276 4.61264 2.18176 7.60057 2.18176ZM16.3992 20.0759C18.4266 20.0759 20.076 18.4266 20.076 16.3992H20.0759V7.60069C20.0759 5.57343 18.4265 3.924 16.3991 3.924H7.60057C5.57331 3.924 3.924 5.57343 3.924 7.60069V16.3992C3.924 18.4266 5.57331 20.076 7.60057 20.0759H16.3992ZM6.85709 12.0001C6.85709 9.16418 9.16413 6.85709 11.9999 6.85709C14.8358 6.85709 17.1428 9.16418 17.1428 12.0001C17.1428 14.8358 14.8358 17.1428 11.9999 17.1428C9.16413 17.1428 6.85709 14.8358 6.85709 12.0001ZM8.62792 11.9999C8.62792 13.8592 10.1407 15.3718 11.9999 15.3718C13.8592 15.3718 15.372 13.8592 15.372 11.9999C15.372 10.1405 13.8593 8.62784 11.9999 8.62784C10.1406 8.62784 8.62792 10.1405 8.62792 11.9999Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15608)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentColor"></path>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-7">
          <iframe class="w-100 rounded" id="gmap_canvas" style="height: 640px;" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&amp;t=&amp;z=19&amp;ie=UTF8&amp;iwloc=&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
        </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="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6948

<section class="overflow-hidden">
  <div class="position-relative py-20 bg-secondary-dark border-bottom border-5 border-success" 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="mw-md-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Blog</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Our mission is to make knowledge and news accessible for everyone.</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="bg-white">
    <div class="container">
      <div class="py-16">
        <div class="row g-8">
          <div class="col-12 col-md-3">
            <div class="form-group position-relative mb-6 mx-auto">
              <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.07 16.83L19 14.71C18.5547 14.2868 17.9931 14.0063 17.3872 13.9047C16.7814 13.8032 16.159 13.8851 15.6 14.14L14.7 13.24C15.7606 11.8229 16.2449 10.0567 16.0555 8.29684C15.8662 6.537 15.0172 4.91423 13.6794 3.7552C12.3417 2.59618 10.6145 1.98696 8.84567 2.05019C7.0768 2.11341 5.39755 2.84439 4.14597 4.09597C2.8944 5.34755 2.16342 7.0268 2.10019 8.79567C2.03696 10.5645 2.64618 12.2917 3.80521 13.6294C4.96423 14.9672 6.587 15.8162 8.34684 16.0055C10.1067 16.1949 11.8729 15.7106 13.29 14.65L14.18 15.54C13.8951 16.0996 13.793 16.7346 13.8881 17.3553C13.9832 17.9761 14.2706 18.5513 14.71 19L16.83 21.12C17.3925 21.6818 18.155 21.9974 18.95 21.9974C19.745 21.9974 20.5075 21.6818 21.07 21.12C21.3557 20.8406 21.5828 20.5069 21.7378 20.1386C21.8928 19.7702 21.9726 19.3746 21.9726 18.975C21.9726 18.5754 21.8928 18.1798 21.7378 17.8114C21.5828 17.4431 21.3557 17.1094 21.07 16.83ZM12.59 12.59C11.8902 13.288 10.9993 13.7629 10.0297 13.9549C9.06019 14.1468 8.0555 14.047 7.14261 13.6682C6.22971 13.2894 5.44957 12.6485 4.90072 11.8265C4.35187 11.0046 4.05894 10.0384 4.05894 9.05C4.05894 8.06163 4.35187 7.09544 4.90072 6.27347C5.44957 5.45149 6.22971 4.81062 7.14261 4.43182C8.0555 4.05301 9.06019 3.95325 10.0297 4.14515C10.9993 4.33706 11.8902 4.812 12.59 5.51C13.0556 5.97446 13.4251 6.52621 13.6771 7.13367C13.9292 7.74112 14.0589 8.39233 14.0589 9.05C14.0589 9.70768 13.9292 10.3589 13.6771 10.9663C13.4251 11.5738 13.0556 12.1255 12.59 12.59ZM19.66 19.66C19.567 19.7537 19.4564 19.8281 19.3346 19.8789C19.2127 19.9297 19.082 19.9558 18.95 19.9558C18.818 19.9558 18.6873 19.9297 18.5654 19.8789C18.4436 19.8281 18.333 19.7537 18.24 19.66L16.12 17.54C16.0263 17.447 15.9519 17.3364 15.9011 17.2146C15.8503 17.0927 15.8242 16.962 15.8242 16.83C15.8242 16.698 15.8503 16.5673 15.9011 16.4454C15.9519 16.3236 16.0263 16.213 16.12 16.12C16.213 16.0263 16.3236 15.9519 16.4454 15.9011C16.5673 15.8503 16.698 15.8242 16.83 15.8242C16.962 15.8242 17.0927 15.8503 17.2146 15.9011C17.3364 15.9519 17.447 16.0263 17.54 16.12L19.66 18.24C19.7537 18.333 19.8281 18.4436 19.8789 18.5654C19.9297 18.6873 19.9558 18.818 19.9558 18.95C19.9558 19.082 19.9297 19.2127 19.8789 19.3346C19.8281 19.4564 19.7537 19.567 19.66 19.66Z" fill="#556987"></path>
              </svg>
              <input class="form-control ps-12 pe-4 text-secondary shadow" id="blogInput20-1" type="text" aria-describedby="blogHelp" placeholder="Search">
            </div>
            <p class="mb-4 fs-12 px-4 text-secondary text-uppercase fw-semibold">Categories</p>
            <ul class="mb-8 nav nav-pills flex-column">
              <li class="nav-item active mb-2"><a class="nav-link py-3 px-4 fw-bold text-success link-success bg-success bg-opacity-25 shadow" href="#">All Categories</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Technology</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Development</a></li>
              <li class="nav-item mb-2"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Marketing</a></li>
              <li class="nav-item"><a class="nav-link py-3 px-4 fw-semibold text-secondary-light link-secondary-light" href="#">Start-up</a></li>
            </ul>
          </div>
          <div class="col-12 col-md-9">
            <div class="mb-20 row g-8">
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news2-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news3-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news4-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news5-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news6-block.png" alt="">
                <a class="mb-4 d-inline-block" href="#">
                  <h3 class="font-heading link-light-dark mb-0 fs-8">Our mission is to make knowledge and news accessible for everyone.</h3>
                </a>
                <p class="mb-4 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
                <div class="row align-items-center g-4">
                  <div class="col-auto">
                    <img src="flex-assets/images/blog/avatar.png" alt="">
                  </div>
                  <div class="col">
                    <h4 class="font-heading text-light-dark fs-10 mb-0">John Doe</h4>
                    <p class="mb-0 fs-10 text-secondary">12 October 2021</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row justify-content-center">
              <div class="col-12 col-md-auto">
                <a class="btn btn-lg btn-success d-flex justify-content-center align-items-center fs-12 py-2 px-4 w-100 shadow" href="#">
                  <span class="me-3 text-success-light">View more</span>
                  <svg width="12" height="10" viewbox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.7583 4.40833C10.6809 4.33023 10.5887 4.26823 10.4871 4.22592C10.3856 4.18362 10.2767 4.16183 10.1667 4.16183C10.0567 4.16183 9.94773 4.18362 9.84619 4.22592C9.74464 4.26823 9.65247 4.33023 9.575 4.40833L6.83333 7.15833V0.833333C6.83333 0.61232 6.74554 0.400358 6.58926 0.244078C6.43297 0.0877975 6.22101 0 6 0C5.77899 0 5.56702 0.0877975 5.41074 0.244078C5.25446 0.400358 5.16667 0.61232 5.16667 0.833333V7.15833L2.425 4.40833C2.26808 4.25141 2.05525 4.16326 1.83333 4.16326C1.61141 4.16326 1.39859 4.25141 1.24167 4.40833C1.08475 4.56525 0.99659 4.77808 0.99659 5C0.99659 5.22192 1.08475 5.43475 1.24167 5.59167L5.40833 9.75833C5.48759 9.8342 5.58104 9.89367 5.68333 9.93333C5.78308 9.97742 5.89094 10.0002 6 10.0002C6.10906 10.0002 6.21692 9.97742 6.31667 9.93333C6.41896 9.89367 6.51241 9.8342 6.59167 9.75833L10.7583 5.59167C10.8364 5.5142 10.8984 5.42203 10.9407 5.32048C10.9831 5.21893 11.0048 5.11001 11.0048 5C11.0048 4.88999 10.9831 4.78107 10.9407 4.67952C10.8984 4.57797 10.8364 4.4858 10.7583 4.40833Z" fill="#F0FDF4"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6949

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <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 pt-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container mb-6" style="z-index:1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-8">
          <a class="d-inline-block mb-8" href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
          </a>
          <p class="mb-6 fs-10 fw-medium text-secondary-light mw-md-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <ul class="nav ms-n6">
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Resources</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Careers</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary" href="#">Privacy</a></li>
          </ul>
        </div>
        <div class="col-12 col-md-4">
          <div class="row flex-column align-items-md-end pe-16 g-4">
            <div class="col-auto">
              <a href="#">
                <img src="flex-assets/images/footers/google-play.svg">
              </a>
            </div>
            <div class="col-auto">
              <a href="#">
                <img src="flex-assets/images/footers/apps-store.svg">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-relative border-bottom border-light" style="z-index: 1;"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="row align-items-center justify-content-between pt-12 pb-36">
        <div class="col-auto">
          <p class="mb-0 fs-11 fw-medium text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
        </div>
        <div class="col-auto">
          <ul class="nav justify-content-md-end">
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light opacity-50" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3312)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light opacity-50" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3313)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light opacity-50" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3314" style="mask-type:alpha" maskunits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3314)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light opacity-50" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light opacity-50" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6950

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <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-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="mb-32 mb-xl-0 position-relative container" style="z-index: 1;">
      <div class="row align-items-center g-0">
        <div class="col-12 col-xl-6">
          <div class="mw-md-2xl">
            <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
            <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Great work starts with your app</h2>
            <p class="mb-12 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="row g-10">
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_1384_25655)">
                          <path d="M15.375 19.4263H4.875C4.17881 19.4263 3.51113 19.1497 3.01884 18.6574C2.52656 18.1651 2.25 17.4974 2.25 16.8012V9.80125C2.25 9.56919 2.15781 9.34663 1.99372 9.18253C1.82962 9.01844 1.60706 8.92625 1.375 8.92625C1.14294 8.92625 0.920376 9.01844 0.756282 9.18253C0.592187 9.34663 0.5 9.56919 0.5 9.80125L0.5 16.8012C0.5 17.9616 0.960936 19.0744 1.78141 19.8948C2.60188 20.7153 3.71468 21.1763 4.875 21.1763H15.375C15.6071 21.1763 15.8296 21.0841 15.9937 20.92C16.1578 20.7559 16.25 20.5333 16.25 20.3013C16.25 20.0692 16.1578 19.8466 15.9937 19.6825C15.8296 19.5184 15.6071 19.4263 15.375 19.4263ZM18.875 3.67625H6.625C5.92881 3.67625 5.26113 3.95281 4.76884 4.4451C4.27656 4.93738 4 5.60506 4 6.30125V15.0512C4 15.7474 4.27656 16.4151 4.76884 16.9074C5.26113 17.3997 5.92881 17.6762 6.625 17.6762H18.875C19.5712 17.6762 20.2389 17.3997 20.7312 16.9074C21.2234 16.4151 21.5 15.7474 21.5 15.0512V6.30125C21.5 5.60506 21.2234 4.93738 20.7312 4.4451C20.2389 3.95281 19.5712 3.67625 18.875 3.67625V3.67625ZM18.5163 5.42625L13.3713 10.5713C13.2899 10.6533 13.1931 10.7184 13.0865 10.7628C12.9799 10.8072 12.8655 10.8301 12.75 10.8301C12.6345 10.8301 12.5201 10.8072 12.4135 10.7628C12.3069 10.7184 12.2101 10.6533 12.1287 10.5713L6.98375 5.42625H18.5163ZM19.75 15.0512C19.75 15.2833 19.6578 15.5059 19.4937 15.67C19.3296 15.8341 19.1071 15.9262 18.875 15.9262H6.625C6.39294 15.9262 6.17038 15.8341 6.00628 15.67C5.84219 15.5059 5.75 15.2833 5.75 15.0512V6.625L10.895 11.77C11.3872 12.2616 12.0544 12.5377 12.75 12.5377C13.4456 12.5377 14.1128 12.2616 14.605 11.77L19.75 6.625V15.0512Z" fill="white"></path>
                        </g>
                        <defs><clippath id="clip0_1384_25655"><rect width="21" height="21" fill="white" transform="translate(0.5 0.5)"></rect></clippath></defs>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8">Measure your performance</h2>
                    <p class="mb-0 fw-medium text-secondary">Stay connected with your team and make quick decisions wherever you are.</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.875 16.25H8.585C8.70016 16.2507 8.81431 16.2286 8.92092 16.1851C9.02753 16.1415 9.12449 16.0773 9.20625 15.9962L15.2613 9.9325L17.7462 7.5C17.8283 7.41866 17.8934 7.32188 17.9378 7.21525C17.9822 7.10863 18.0051 6.99426 18.0051 6.87875C18.0051 6.76324 17.9822 6.64887 17.9378 6.54225C17.8934 6.43562 17.8283 6.33884 17.7462 6.2575L14.0363 2.50375C13.9549 2.42174 13.8581 2.35664 13.7515 2.31222C13.6449 2.2678 13.5305 2.24493 13.415 2.24493C13.2995 2.24493 13.1851 2.2678 13.0785 2.31222C12.9719 2.35664 12.8751 2.42174 12.7937 2.50375L10.3263 4.98L4.25375 11.0437C4.17265 11.1255 4.10849 11.2225 4.06495 11.3291C4.02141 11.4357 3.99933 11.5498 4 11.665V15.375C4 15.6071 4.09219 15.8296 4.25628 15.9937C4.42038 16.1578 4.64294 16.25 4.875 16.25ZM13.415 4.35875L15.8913 6.835L14.6488 8.0775L12.1725 5.60125L13.415 4.35875ZM5.75 12.0238L10.9388 6.835L13.415 9.31125L8.22625 14.5H5.75V12.0238ZM18.875 18H3.125C2.89294 18 2.67038 18.0922 2.50628 18.2563C2.34219 18.4204 2.25 18.6429 2.25 18.875C2.25 19.1071 2.34219 19.3296 2.50628 19.4937C2.67038 19.6578 2.89294 19.75 3.125 19.75H18.875C19.1071 19.75 19.3296 19.6578 19.4937 19.4937C19.6578 19.3296 19.75 19.1071 19.75 18.875C19.75 18.6429 19.6578 18.4204 19.4937 18.2563C19.3296 18.0922 19.1071 18 18.875 18Z" fill="white"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8">Build your website</h2>
                    <p class="mb-0 fw-medium text-secondary">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.25 11.875H3.125C2.89294 11.875 2.67038 11.9672 2.50628 12.1313C2.34219 12.2954 2.25 12.5179 2.25 12.75V18.875C2.25 19.1071 2.34219 19.3296 2.50628 19.4937C2.67038 19.6578 2.89294 19.75 3.125 19.75H9.25C9.48206 19.75 9.70462 19.6578 9.86872 19.4937C10.0328 19.3296 10.125 19.1071 10.125 18.875V12.75C10.125 12.5179 10.0328 12.2954 9.86872 12.1313C9.70462 11.9672 9.48206 11.875 9.25 11.875ZM8.375 18H4V13.625H8.375V18ZM18.875 2.25H12.75C12.5179 2.25 12.2954 2.34219 12.1313 2.50628C11.9672 2.67038 11.875 2.89294 11.875 3.125V9.25C11.875 9.48206 11.9672 9.70462 12.1313 9.86872C12.2954 10.0328 12.5179 10.125 12.75 10.125H18.875C19.1071 10.125 19.3296 10.0328 19.4937 9.86872C19.6578 9.70462 19.75 9.48206 19.75 9.25V3.125C19.75 2.89294 19.6578 2.67038 19.4937 2.50628C19.3296 2.34219 19.1071 2.25 18.875 2.25V2.25ZM18 8.375H13.625V4H18V8.375ZM18.875 11.875H12.75C12.5179 11.875 12.2954 11.9672 12.1313 12.1313C11.9672 12.2954 11.875 12.5179 11.875 12.75V18.875C11.875 19.1071 11.9672 19.3296 12.1313 19.4937C12.2954 19.6578 12.5179 19.75 12.75 19.75H18.875C19.1071 19.75 19.3296 19.6578 19.4937 19.4937C19.6578 19.3296 19.75 19.1071 19.75 18.875V12.75C19.75 12.5179 19.6578 12.2954 19.4937 12.1313C19.3296 11.9672 19.1071 11.875 18.875 11.875ZM18 18H13.625V13.625H18V18ZM9.25 2.25H3.125C2.89294 2.25 2.67038 2.34219 2.50628 2.50628C2.34219 2.67038 2.25 2.89294 2.25 3.125V9.25C2.25 9.48206 2.34219 9.70462 2.50628 9.86872C2.67038 10.0328 2.89294 10.125 3.125 10.125H9.25C9.48206 10.125 9.70462 10.0328 9.86872 9.86872C10.0328 9.70462 10.125 9.48206 10.125 9.25V3.125C10.125 2.89294 10.0328 2.67038 9.86872 2.50628C9.70462 2.34219 9.48206 2.25 9.25 2.25V2.25ZM8.375 8.375H4V4H8.375V8.375Z" fill="white"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8">Connect multiple apps</h2>
                    <p class="mb-0 fw-medium text-secondary">The first business platform to bring together all of your products from one place.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6"></div>
      </div>
    </div>
    <div class="position-xl-absolute end-0 d-flex top-0 mt-xl-56" style="z-index: 1;">
      <div class="position-relative">
        <img class="position-absolute end-0 top-0 mt-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
        <img class="position-absolute end-0 bottom-0 mb-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
        <img class="position-absolute start-0 top-0 mt-32 mb-n20" src="flex-assets/elements/circle-2xl-orange.svg" alt="">
        <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/applications/mockup-right.png" alt="">
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <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>

Bootstrap Component #6951

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Contact</span>
          <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Let&rsquo;s stay connected</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Send Message</a></div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-5">
          <div class="mw-md-xl">
            <div class="row g-16">
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M32.21 20.82L26 14.78C25.474 14.2799 24.7759 14.001 24.05 14.001C23.3241 14.001 22.626 14.2799 22.1 14.78L15.89 20.78C15.6141 21.0209 15.3922 21.3173 15.2388 21.6499C15.0854 21.9825 15.004 22.3438 15 22.71V31.29C15.0105 32.0176 15.309 32.7114 15.8301 33.2193C16.3512 33.7273 17.0524 34.008 17.78 34H30.22C30.9476 34.008 31.6488 33.7273 32.1699 33.2193C32.691 32.7114 32.9895 32.0176 33 31.29V22.71C32.9992 22.3585 32.929 22.0106 32.7935 21.6862C32.6579 21.3619 32.4596 21.0675 32.21 20.82ZM23.44 16.22C23.593 16.0802 23.7927 16.0026 24 16.0026C24.2073 16.0026 24.407 16.0802 24.56 16.22L30 21.5L24.53 26.78C24.377 26.9198 24.1773 26.9974 23.97 26.9974C23.7627 26.9974 23.563 26.9198 23.41 26.78L18 21.5L23.44 16.22ZM31 31.29C30.9871 31.4863 30.8987 31.6699 30.7532 31.8023C30.6078 31.9347 30.4166 32.0056 30.22 32H17.78C17.5834 32.0056 17.3922 31.9347 17.2468 31.8023C17.1013 31.6699 17.0129 31.4863 17 31.29V23.35L21.05 27.25L19.39 28.85C19.2037 29.0374 19.0992 29.2908 19.0992 29.555C19.0992 29.8192 19.2037 30.0726 19.39 30.26C19.4829 30.3575 19.5946 30.4352 19.7184 30.4885C19.8421 30.5418 19.9753 30.5695 20.11 30.57C20.3675 30.569 20.6146 30.4687 20.8 30.29L22.57 28.59C23.0096 28.8586 23.5148 29.0008 24.03 29.0008C24.5452 29.0008 25.0504 28.8586 25.49 28.59L27.26 30.29C27.4454 30.4687 27.6925 30.569 27.95 30.57C28.0847 30.5695 28.2179 30.5418 28.3416 30.4885C28.4654 30.4352 28.5771 30.3575 28.67 30.26C28.8563 30.0726 28.9608 29.8192 28.9608 29.555C28.9608 29.2908 28.8563 29.0374 28.67 28.85L27 27.25L31 23.35V31.29Z" fill="#F0FDF4"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-2 font-heading fs-7">Email</h2>
                    <p class="mb-0 fs-9 text-secondary fw-medium">contact@flex.co</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M31.41 25C31.19 25 30.96 24.93 30.74 24.88C30.2949 24.7805 29.8572 24.6501 29.43 24.49C28.9661 24.3212 28.4562 24.33 27.9984 24.5146C27.5405 24.6992 27.1671 25.0466 26.95 25.49L26.73 25.95C25.7589 25.3992 24.8617 24.7271 24.0601 23.95C23.2829 23.1484 22.6108 22.2512 22.0601 21.28L22.5201 21.07C22.9634 20.8529 23.3108 20.4795 23.4954 20.0217C23.6801 19.5639 23.6888 19.0539 23.5201 18.59C23.3612 18.159 23.231 17.7181 23.13 17.27C23.08 17.05 23.04 16.82 23.01 16.6C22.8886 15.8956 22.5197 15.2577 21.9697 14.8012C21.4197 14.3447 20.7247 14.0996 20.0101 14.11H17C16.5773 14.1094 16.1592 14.1982 15.7732 14.3706C15.3871 14.5429 15.0419 14.7949 14.76 15.11C14.4724 15.4337 14.2582 15.8158 14.1322 16.23C14.0061 16.6443 13.9713 17.081 14.03 17.51C14.5736 21.6721 16.4753 25.5387 19.4401 28.51C22.4114 31.4748 26.2779 33.3764 30.4401 33.92C30.5699 33.9299 30.7002 33.9299 30.83 33.92C31.5675 33.9211 32.2794 33.6505 32.83 33.16C33.1452 32.8782 33.3971 32.5329 33.5695 32.1469C33.7418 31.7609 33.8306 31.3428 33.83 30.92V27.92C33.8247 27.229 33.5809 26.5611 33.14 26.0291C32.6991 25.4971 32.088 25.1336 31.41 25ZM31.9 31C31.8997 31.1395 31.8702 31.2775 31.8134 31.4049C31.7565 31.5324 31.6736 31.6465 31.57 31.74C31.4605 31.8399 31.33 31.9141 31.1882 31.9573C31.0464 32.0006 30.8967 32.0117 30.75 31.99C27.0183 31.5026 23.5503 29.802 20.8801 27.15C18.2075 24.4775 16.4921 20.9974 16 17.25C15.9783 17.1033 15.9895 16.9537 16.0327 16.8119C16.076 16.67 16.1502 16.5396 16.25 16.43C16.3447 16.3252 16.4604 16.2415 16.5897 16.1847C16.719 16.1278 16.8588 16.0989 17 16.1H20.0001C20.2312 16.0944 20.4572 16.169 20.6395 16.3112C20.8218 16.4534 20.9492 16.6544 21.0001 16.88C21.0001 17.15 21.09 17.43 21.15 17.7C21.2656 18.2239 21.4194 18.7386 21.61 19.24L20.2101 19.9C19.9694 20.0105 19.7824 20.2119 19.6901 20.46C19.59 20.7035 19.59 20.9765 19.6901 21.22C21.1293 24.3028 23.6073 26.7808 26.69 28.22C26.9335 28.32 27.2066 28.32 27.45 28.22C27.6982 28.1276 27.8996 27.9406 28.01 27.7L28.64 26.3C29.156 26.4881 29.6838 26.6418 30.22 26.76C30.48 26.82 30.7601 26.87 31.0301 26.91C31.2556 26.9608 31.4566 27.0882 31.5989 27.2705C31.7411 27.4529 31.8157 27.6788 31.81 27.91L31.9 31ZM26 14C25.77 14 25.53 14 25.3 14C25.0348 14.0225 24.7894 14.1495 24.6178 14.353C24.4462 14.5565 24.3625 14.8198 24.385 15.085C24.4076 15.3502 24.5346 15.5956 24.738 15.7672C24.9415 15.9388 25.2048 16.0225 25.47 16H26C27.5913 16 29.1175 16.6321 30.2427 17.7574C31.3679 18.8826 32 20.4087 32 22C32 22.18 32 22.35 32 22.53C31.9779 22.7938 32.0612 23.0556 32.2318 23.2581C32.4024 23.4606 32.6463 23.5871 32.91 23.61H32.99C33.2404 23.611 33.482 23.5181 33.6671 23.3496C33.8523 23.1811 33.9675 22.9493 33.99 22.7C33.99 22.47 33.99 22.23 33.99 22C33.9901 19.88 33.1486 17.8467 31.6504 16.3467C30.1523 14.8467 28.12 14.0027 26 14V14ZM28 22C28 22.2652 28.1054 22.5196 28.2929 22.7071C28.4805 22.8946 28.7348 23 29 23C29.2653 23 29.5196 22.8946 29.7072 22.7071C29.8947 22.5196 30 22.2652 30 22C30 20.9391 29.5786 19.9217 28.8285 19.1716C28.0783 18.4214 27.0609 18 26 18C25.7348 18 25.4805 18.1054 25.2929 18.2929C25.1054 18.4804 25 18.7348 25 19C25 19.2652 25.1054 19.5196 25.2929 19.7071C25.4805 19.8946 25.7348 20 26 20C26.5305 20 27.0392 20.2107 27.4143 20.5858C27.7893 20.9609 28 21.4696 28 22Z" fill="#F0FDF4"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-2 font-heading fs-7">Phone</h2>
                    <p class="mb-0 fs-9 text-secondary fw-medium">+7-843-672-431</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <svg class="mb-6 text-success" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
                      <path d="M33 14H15C14.7348 14 14.4804 14.1054 14.2929 14.2929C14.1054 14.4804 14 14.7348 14 15V33C14 33.2652 14.1054 33.5196 14.2929 33.7071C14.4804 33.8946 14.7348 34 15 34H33C33.2652 34 33.5196 33.8946 33.7071 33.7071C33.8946 33.5196 34 33.2652 34 33V15C34 14.7348 33.8946 14.4804 33.7071 14.2929C33.5196 14.1054 33.2652 14 33 14V14ZM20 32H16V28H20V32ZM20 26H16V22H20V26ZM20 20H16V16H20V20ZM26 32H22V28H26V32ZM26 26H22V22H26V26ZM26 20H22V16H26V20ZM32 32H28V28H32V32ZM32 26H28V22H32V26ZM32 20H28V16H32V20Z" fill="#F0FDF4"></path>
                    </svg>
                  </div>
                  <div class="col-auto">
                    <h2 class="mb-3 font-heading fs-7">Socials</h2>
                    <div class="row">
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7272V12.766H16.3582L16.7668 9.66243H13.6348V7.68126C13.6348 6.78299 13.8881 6.17083 15.2029 6.17083L16.877 6.17015V3.39421C16.5875 3.35731 15.5937 3.27271 14.437 3.27271C12.0216 3.27271 10.368 4.71878 10.368 7.37389V9.66243H7.63635V12.766H10.368V20.7272H13.6348Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15606" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7272V12.766H16.3582L16.7668 9.66243H13.6348V7.68126C13.6348 6.78299 13.8881 6.17083 15.2029 6.17083L16.877 6.17015V3.39421C16.5875 3.35731 15.5937 3.27271 14.437 3.27271C12.0216 3.27271 10.368 4.71878 10.368 7.37389V9.66243H7.63635V12.766H10.368V20.7272H13.6348Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15606)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15607" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15607)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.60057 2.18176H16.3991C19.3872 2.18176 21.8182 4.61276 21.8181 7.60069V16.3992C21.8181 19.3871 19.3872 21.8181 16.3991 21.8181H7.60057C4.61264 21.8181 2.18176 19.3872 2.18176 16.3992V7.60069C2.18176 4.61276 4.61264 2.18176 7.60057 2.18176ZM16.3992 20.0759C18.4266 20.0759 20.076 18.4266 20.076 16.3992H20.0759V7.60069C20.0759 5.57343 18.4265 3.924 16.3991 3.924H7.60057C5.57331 3.924 3.924 5.57343 3.924 7.60069V16.3992C3.924 18.4266 5.57331 20.076 7.60057 20.0759H16.3992ZM6.85709 12.0001C6.85709 9.16418 9.16413 6.85709 11.9999 6.85709C14.8358 6.85709 17.1428 9.16418 17.1428 12.0001C17.1428 14.8358 14.8358 17.1428 11.9999 17.1428C9.16413 17.1428 6.85709 14.8358 6.85709 12.0001ZM8.62792 11.9999C8.62792 13.8592 10.1407 15.3718 11.9999 15.3718C13.8592 15.3718 15.372 13.8592 15.372 11.9999C15.372 10.1405 13.8593 8.62784 11.9999 8.62784C10.1406 8.62784 8.62792 10.1405 8.62792 11.9999Z" fill="currentColor"></path>
                            <mask id="mask0_1201_15608" style="mask-type:alpha" maskunits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.60057 2.18176H16.3991C19.3872 2.18176 21.8182 4.61276 21.8181 7.60069V16.3992C21.8181 19.3871 19.3872 21.8181 16.3991 21.8181H7.60057C4.61264 21.8181 2.18176 19.3872 2.18176 16.3992V7.60069C2.18176 4.61276 4.61264 2.18176 7.60057 2.18176ZM16.3992 20.0759C18.4266 20.0759 20.076 18.4266 20.076 16.3992H20.0759V7.60069C20.0759 5.57343 18.4265 3.924 16.3991 3.924H7.60057C5.57331 3.924 3.924 5.57343 3.924 7.60069V16.3992C3.924 18.4266 5.57331 20.076 7.60057 20.0759H16.3992ZM6.85709 12.0001C6.85709 9.16418 9.16413 6.85709 11.9999 6.85709C14.8358 6.85709 17.1428 9.16418 17.1428 12.0001C17.1428 14.8358 14.8358 17.1428 11.9999 17.1428C9.16413 17.1428 6.85709 14.8358 6.85709 12.0001ZM8.62792 11.9999C8.62792 13.8592 10.1407 15.3718 11.9999 15.3718C13.8592 15.3718 15.372 13.8592 15.372 11.9999C15.372 10.1405 13.8593 8.62784 11.9999 8.62784C10.1406 8.62784 8.62792 10.1405 8.62792 11.9999Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_1201_15608)"></g>
                          </svg>
                        </a>
                      </div>
                      <div class="col-auto">
                        <a class="text-success link-success" href="#">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentColor"></path>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-7">
          <iframe class="w-100 rounded" id="gmap_canvas" style="height: 640px;" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&amp;t=&amp;z=19&amp;ie=UTF8&amp;iwloc=&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6952

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <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-white" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-8 text-center mw-md-5xl mx-auto">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">We are hiring</span>
        <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Join our team</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">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>
      <div class="mb-12 mw-md-5xl mx-auto">
        <div class="row g-6">
          <div class="col-12 col-md-4">
            <div class="form-group position-relative mx-auto">
              <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.07 16.83L19 14.71C18.5547 14.2868 17.9931 14.0063 17.3872 13.9047C16.7814 13.8032 16.159 13.8851 15.6 14.14L14.7 13.24C15.7606 11.8229 16.2449 10.0567 16.0555 8.29684C15.8662 6.537 15.0172 4.91423 13.6794 3.7552C12.3417 2.59618 10.6145 1.98696 8.84567 2.05019C7.0768 2.11341 5.39755 2.84439 4.14597 4.09597C2.8944 5.34755 2.16342 7.0268 2.10019 8.79567C2.03696 10.5645 2.64618 12.2917 3.80521 13.6294C4.96423 14.9672 6.587 15.8162 8.34684 16.0055C10.1067 16.1949 11.8729 15.7106 13.29 14.65L14.18 15.54C13.8951 16.0996 13.793 16.7346 13.8881 17.3553C13.9832 17.9761 14.2706 18.5513 14.71 19L16.83 21.12C17.3925 21.6818 18.155 21.9974 18.95 21.9974C19.745 21.9974 20.5075 21.6818 21.07 21.12C21.3557 20.8406 21.5828 20.5069 21.7378 20.1386C21.8928 19.7702 21.9726 19.3746 21.9726 18.975C21.9726 18.5754 21.8928 18.1798 21.7378 17.8114C21.5828 17.4431 21.3557 17.1094 21.07 16.83ZM12.59 12.59C11.8902 13.288 10.9993 13.7629 10.0297 13.9549C9.06019 14.1468 8.0555 14.047 7.14261 13.6682C6.22971 13.2894 5.44957 12.6485 4.90072 11.8265C4.35187 11.0046 4.05894 10.0384 4.05894 9.05C4.05894 8.06163 4.35187 7.09544 4.90072 6.27347C5.44957 5.45149 6.22971 4.81062 7.14261 4.43182C8.0555 4.05301 9.06019 3.95325 10.0297 4.14515C10.9993 4.33706 11.8902 4.812 12.59 5.51C13.0556 5.97446 13.4251 6.52621 13.6771 7.13367C13.9292 7.74112 14.0589 8.39233 14.0589 9.05C14.0589 9.70768 13.9292 10.3589 13.6771 10.9663C13.4251 11.5738 13.0556 12.1255 12.59 12.59ZM19.66 19.66C19.567 19.7537 19.4564 19.8281 19.3346 19.8789C19.2127 19.9297 19.082 19.9558 18.95 19.9558C18.818 19.9558 18.6873 19.9297 18.5654 19.8789C18.4436 19.8281 18.333 19.7537 18.24 19.66L16.12 17.54C16.0263 17.447 15.9519 17.3364 15.9011 17.2146C15.8503 17.0927 15.8242 16.962 15.8242 16.83C15.8242 16.698 15.8503 16.5673 15.9011 16.4454C15.9519 16.3236 16.0263 16.213 16.12 16.12C16.213 16.0263 16.3236 15.9519 16.4454 15.9011C16.5673 15.8503 16.698 15.8242 16.83 15.8242C16.962 15.8242 17.0927 15.8503 17.2146 15.9011C17.3364 15.9519 17.447 16.0263 17.54 16.12L19.66 18.24C19.7537 18.333 19.8281 18.4436 19.8789 18.5654C19.9297 18.6873 19.9558 18.818 19.9558 18.95C19.9558 19.082 19.9297 19.2127 19.8789 19.3346C19.8281 19.4564 19.7537 19.567 19.66 19.66Z" fill="#556987"></path>
              </svg>
              <input class="form-control ps-12 pe-4 text-secondary h-100 shadow" id="careerInput25-1" type="text" aria-describedby="careerHelp" placeholder="Search">
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="dropdown show">
              <a class="btn btn-outline-light d-flex justify-content-between align-items-center p-3 w-100 h-100 bg-white border shadow" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fs-11 fw-normal text-secondary-light">Location</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.0002 9.17C16.8128 8.98375 16.5594 8.87921 16.2952 8.87921C16.031 8.87921 15.7776 8.98375 15.5902 9.17L12.0002 12.71L8.46019 9.17C8.27283 8.98375 8.01938 8.87921 7.75519 8.87921C7.49101 8.87921 7.23756 8.98375 7.05019 9.17C6.95646 9.26297 6.88207 9.37357 6.8313 9.49543C6.78053 9.61729 6.75439 9.74799 6.75439 9.88C6.75439 10.012 6.78053 10.1427 6.8313 10.2646C6.88207 10.3864 6.95646 10.497 7.05019 10.59L11.2902 14.83C11.3832 14.9237 11.4938 14.9981 11.6156 15.0489C11.7375 15.0997 11.8682 15.1258 12.0002 15.1258C12.1322 15.1258 12.2629 15.0997 12.3848 15.0489C12.5066 14.9981 12.6172 14.9237 12.7102 14.83L17.0002 10.59C17.0939 10.497 17.1683 10.3864 17.2191 10.2646C17.2699 10.1427 17.296 10.012 17.296 9.88C17.296 9.74799 17.2699 9.61729 17.2191 9.49543C17.1683 9.37357 17.0939 9.26297 17.0002 9.17Z" fill="#556987"></path>
                </svg>
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="dropdown show">
              <a class="btn btn-outline-light d-flex justify-content-between align-items-center p-3 w-100 h-100 bg-white border shadow" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fs-11 fw-normal text-secondary-light">Type</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.0002 9.17C16.8128 8.98375 16.5594 8.87921 16.2952 8.87921C16.031 8.87921 15.7776 8.98375 15.5902 9.17L12.0002 12.71L8.46019 9.17C8.27283 8.98375 8.01938 8.87921 7.75519 8.87921C7.49101 8.87921 7.23756 8.98375 7.05019 9.17C6.95646 9.26297 6.88207 9.37357 6.8313 9.49543C6.78053 9.61729 6.75439 9.74799 6.75439 9.88C6.75439 10.012 6.78053 10.1427 6.8313 10.2646C6.88207 10.3864 6.95646 10.497 7.05019 10.59L11.2902 14.83C11.3832 14.9237 11.4938 14.9981 11.6156 15.0489C11.7375 15.0997 11.8682 15.1258 12.0002 15.1258C12.1322 15.1258 12.2629 15.0997 12.3848 15.0489C12.5066 14.9981 12.6172 14.9237 12.7102 14.83L17.0002 10.59C17.0939 10.497 17.1683 10.3864 17.2191 10.2646C17.2699 10.1427 17.296 10.012 17.296 9.88C17.296 9.74799 17.2699 9.61729 17.2191 9.49543C17.1683 9.37357 17.0939 9.26297 17.0002 9.17Z" fill="#556987"></path>
                </svg>
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-0">
        <div class="col-12">
          <a class="d-block bg-white rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Front-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Back-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-white rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">UI/UX Designer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Product Designer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-white rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Project Manager</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Front-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-white rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-light-dark">Back-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#BBC3CF"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <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>

Bootstrap Component #6953

<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="mb-32 mb-xl-0 position-relative container" style="z-index: 1;">
      <div class="row align-items-center g-0">
        <div class="col-12 col-xl-6">
          <div class="mw-md-2xl">
            <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
            <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Great work starts with your app</h2>
            <p class="mb-12 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="row g-10">
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_1384_25655)">
                          <path d="M15.375 19.4263H4.875C4.17881 19.4263 3.51113 19.1497 3.01884 18.6574C2.52656 18.1651 2.25 17.4974 2.25 16.8012V9.80125C2.25 9.56919 2.15781 9.34663 1.99372 9.18253C1.82962 9.01844 1.60706 8.92625 1.375 8.92625C1.14294 8.92625 0.920376 9.01844 0.756282 9.18253C0.592187 9.34663 0.5 9.56919 0.5 9.80125L0.5 16.8012C0.5 17.9616 0.960936 19.0744 1.78141 19.8948C2.60188 20.7153 3.71468 21.1763 4.875 21.1763H15.375C15.6071 21.1763 15.8296 21.0841 15.9937 20.92C16.1578 20.7559 16.25 20.5333 16.25 20.3013C16.25 20.0692 16.1578 19.8466 15.9937 19.6825C15.8296 19.5184 15.6071 19.4263 15.375 19.4263ZM18.875 3.67625H6.625C5.92881 3.67625 5.26113 3.95281 4.76884 4.4451C4.27656 4.93738 4 5.60506 4 6.30125V15.0512C4 15.7474 4.27656 16.4151 4.76884 16.9074C5.26113 17.3997 5.92881 17.6762 6.625 17.6762H18.875C19.5712 17.6762 20.2389 17.3997 20.7312 16.9074C21.2234 16.4151 21.5 15.7474 21.5 15.0512V6.30125C21.5 5.60506 21.2234 4.93738 20.7312 4.4451C20.2389 3.95281 19.5712 3.67625 18.875 3.67625V3.67625ZM18.5163 5.42625L13.3713 10.5713C13.2899 10.6533 13.1931 10.7184 13.0865 10.7628C12.9799 10.8072 12.8655 10.8301 12.75 10.8301C12.6345 10.8301 12.5201 10.8072 12.4135 10.7628C12.3069 10.7184 12.2101 10.6533 12.1287 10.5713L6.98375 5.42625H18.5163ZM19.75 15.0512C19.75 15.2833 19.6578 15.5059 19.4937 15.67C19.3296 15.8341 19.1071 15.9262 18.875 15.9262H6.625C6.39294 15.9262 6.17038 15.8341 6.00628 15.67C5.84219 15.5059 5.75 15.2833 5.75 15.0512V6.625L10.895 11.77C11.3872 12.2616 12.0544 12.5377 12.75 12.5377C13.4456 12.5377 14.1128 12.2616 14.605 11.77L19.75 6.625V15.0512Z" fill="#2A3342"></path>
                        </g>
                        <defs><clippath id="clip0_1384_25655"><rect width="21" height="21" fill="white" transform="translate(0.5 0.5)"></rect></clippath></defs>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8 text-white">Measure your performance</h2>
                    <p class="mb-0 fw-medium text-secondary-light">Stay connected with your team and make quick decisions wherever you are.</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.875 16.25H8.585C8.70016 16.2507 8.81431 16.2286 8.92092 16.1851C9.02753 16.1415 9.12449 16.0773 9.20625 15.9962L15.2613 9.9325L17.7462 7.5C17.8283 7.41866 17.8934 7.32188 17.9378 7.21525C17.9822 7.10863 18.0051 6.99426 18.0051 6.87875C18.0051 6.76324 17.9822 6.64887 17.9378 6.54225C17.8934 6.43562 17.8283 6.33884 17.7462 6.2575L14.0363 2.50375C13.9549 2.42174 13.8581 2.35664 13.7515 2.31222C13.6449 2.2678 13.5305 2.24493 13.415 2.24493C13.2995 2.24493 13.1851 2.2678 13.0785 2.31222C12.9719 2.35664 12.8751 2.42174 12.7937 2.50375L10.3263 4.98L4.25375 11.0437C4.17265 11.1255 4.10849 11.2225 4.06495 11.3291C4.02141 11.4357 3.99933 11.5498 4 11.665V15.375C4 15.6071 4.09219 15.8296 4.25628 15.9937C4.42038 16.1578 4.64294 16.25 4.875 16.25ZM13.415 4.35875L15.8913 6.835L14.6488 8.0775L12.1725 5.60125L13.415 4.35875ZM5.75 12.0238L10.9388 6.835L13.415 9.31125L8.22625 14.5H5.75V12.0238ZM18.875 18H3.125C2.89294 18 2.67038 18.0922 2.50628 18.2563C2.34219 18.4204 2.25 18.6429 2.25 18.875C2.25 19.1071 2.34219 19.3296 2.50628 19.4937C2.67038 19.6578 2.89294 19.75 3.125 19.75H18.875C19.1071 19.75 19.3296 19.6578 19.4937 19.4937C19.6578 19.3296 19.75 19.1071 19.75 18.875C19.75 18.6429 19.6578 18.4204 19.4937 18.2563C19.3296 18.0922 19.1071 18 18.875 18Z" fill="#2A3342"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8 text-white">Build your website</h2>
                    <p class="mb-0 fw-medium text-secondary-light">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="d-flex justify-content-center align-items-center bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.25 11.875H3.125C2.89294 11.875 2.67038 11.9672 2.50628 12.1313C2.34219 12.2954 2.25 12.5179 2.25 12.75V18.875C2.25 19.1071 2.34219 19.3296 2.50628 19.4937C2.67038 19.6578 2.89294 19.75 3.125 19.75H9.25C9.48206 19.75 9.70462 19.6578 9.86872 19.4937C10.0328 19.3296 10.125 19.1071 10.125 18.875V12.75C10.125 12.5179 10.0328 12.2954 9.86872 12.1313C9.70462 11.9672 9.48206 11.875 9.25 11.875ZM8.375 18H4V13.625H8.375V18ZM18.875 2.25H12.75C12.5179 2.25 12.2954 2.34219 12.1313 2.50628C11.9672 2.67038 11.875 2.89294 11.875 3.125V9.25C11.875 9.48206 11.9672 9.70462 12.1313 9.86872C12.2954 10.0328 12.5179 10.125 12.75 10.125H18.875C19.1071 10.125 19.3296 10.0328 19.4937 9.86872C19.6578 9.70462 19.75 9.48206 19.75 9.25V3.125C19.75 2.89294 19.6578 2.67038 19.4937 2.50628C19.3296 2.34219 19.1071 2.25 18.875 2.25V2.25ZM18 8.375H13.625V4H18V8.375ZM18.875 11.875H12.75C12.5179 11.875 12.2954 11.9672 12.1313 12.1313C11.9672 12.2954 11.875 12.5179 11.875 12.75V18.875C11.875 19.1071 11.9672 19.3296 12.1313 19.4937C12.2954 19.6578 12.5179 19.75 12.75 19.75H18.875C19.1071 19.75 19.3296 19.6578 19.4937 19.4937C19.6578 19.3296 19.75 19.1071 19.75 18.875V12.75C19.75 12.5179 19.6578 12.2954 19.4937 12.1313C19.3296 11.9672 19.1071 11.875 18.875 11.875ZM18 18H13.625V13.625H18V18ZM9.25 2.25H3.125C2.89294 2.25 2.67038 2.34219 2.50628 2.50628C2.34219 2.67038 2.25 2.89294 2.25 3.125V9.25C2.25 9.48206 2.34219 9.70462 2.50628 9.86872C2.67038 10.0328 2.89294 10.125 3.125 10.125H9.25C9.48206 10.125 9.70462 10.0328 9.86872 9.86872C10.0328 9.70462 10.125 9.48206 10.125 9.25V3.125C10.125 2.89294 10.0328 2.67038 9.86872 2.50628C9.70462 2.34219 9.48206 2.25 9.25 2.25V2.25ZM8.375 8.375H4V4H8.375V8.375Z" fill="#2A3342"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col pt-3">
                    <h2 class="font-heading mb-4 fs-8 text-white">Connect multiple apps</h2>
                    <p class="mb-0 fw-medium text-secondary-light">The first business platform to bring together all of your products from one place.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6"></div>
      </div>
    </div>
    <div class="position-xl-absolute end-0 d-flex top-0 mt-xl-56" style="z-index: 1;">
      <div class="position-relative">
        <img class="position-absolute end-0 top-0 mt-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
        <img class="position-absolute end-0 bottom-0 mb-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
        <img class="position-absolute start-0 top-0 mt-32 mb-n20" src="flex-assets/elements/circle-2xl-orange.svg" alt="">
        <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/applications/mockup-right-dark.png" alt="">
      </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>

Bootstrap Component #6954

<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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative pt-24 pb-32 bg-secondary-dark overflow-hidden" 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-20 mw-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Features</span>
        <h2 class="font-heading mb-4 fs-6 text-white" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="row g-10">
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-secondary-dark bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_631_12694)">
                          <path d="M17 21.63H5C4.20435 21.63 3.44129 21.3139 2.87868 20.7513C2.31607 20.1887 2 19.4257 2 18.63V10.63C2 10.3648 1.89464 10.1104 1.70711 9.9229C1.51957 9.73536 1.26522 9.63 1 9.63C0.734784 9.63 0.48043 9.73536 0.292893 9.9229C0.105357 10.1104 0 10.3648 0 10.63L0 18.63C0 19.9561 0.526784 21.2279 1.46447 22.1655C2.40215 23.1032 3.67392 23.63 5 23.63H17C17.2652 23.63 17.5196 23.5246 17.7071 23.3371C17.8946 23.1496 18 22.8952 18 22.63C18 22.3648 17.8946 22.1104 17.7071 21.9229C17.5196 21.7354 17.2652 21.63 17 21.63ZM21 3.63H7C6.20435 3.63 5.44129 3.94608 4.87868 4.50868C4.31607 5.07129 4 5.83436 4 6.63V16.63C4 17.4257 4.31607 18.1887 4.87868 18.7513C5.44129 19.3139 6.20435 19.63 7 19.63H21C21.7956 19.63 22.5587 19.3139 23.1213 18.7513C23.6839 18.1887 24 17.4257 24 16.63V6.63C24 5.83436 23.6839 5.07129 23.1213 4.50868C22.5587 3.94608 21.7956 3.63 21 3.63V3.63ZM20.59 5.63L14.71 11.51C14.617 11.6037 14.5064 11.6781 14.3846 11.7289C14.2627 11.7797 14.132 11.8058 14 11.8058C13.868 11.8058 13.7373 11.7797 13.6154 11.7289C13.4936 11.6781 13.383 11.6037 13.29 11.51L7.41 5.63H20.59ZM22 16.63C22 16.8952 21.8946 17.1496 21.7071 17.3371C21.5196 17.5246 21.2652 17.63 21 17.63H7C6.73478 17.63 6.48043 17.5246 6.29289 17.3371C6.10536 17.1496 6 16.8952 6 16.63V7L11.88 12.88C12.4425 13.4418 13.205 13.7574 14 13.7574C14.795 13.7574 15.5575 13.4418 16.12 12.88L22 7V16.63Z" fill="currentColor"></path>
                        </g>
                        <defs><clippath id="clip0_631_12694"><rect width="24" height="24" fill="currentColor"></rect></clippath></defs>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Measure your performance</h3>
                    <p class="mb-0 fw-medium text-secondary-light">Stay connected with your team and make quick decisions wherever you are.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-secondary-dark bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Build your website</h3>
                    <p class="mb-0 fw-medium text-secondary text-secondary-light">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="mw-md">
                <div class="row g-6">
                  <div class="col-auto">
                    <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-secondary-dark bg-success rounded" style="width: 56px; height: 56px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2V2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2V2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="col">
                    <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Connect multiple apps</h3>
                    <p class="mb-0 fw-medium text-secondary text-secondary-light">The first business platform to bring together all of your products from one place.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-center">
            <div class="col-auto">
              <div class="position-relative">
                <img class="position-absolute top-0 start-0 mt-n8 ms-n8" src="flex-assets/elements/circle-orange.svg" alt="">
                <img class="position-absolute bottom-0 end-0 me-n8 mb-n9" src="flex-assets/elements/dots-blue.svg" alt="">
                <img class="img-fluid" src="flex-assets/images/features/book.png">
              </div>
            </div>
          </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="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6955

<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-8 text-center mw-md-5xl mx-auto">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">We are hiring</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Join our team</h2>
        <p class="mb-0 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>
      <div class="mb-12 mw-md-5xl mx-auto">
        <div class="row g-6">
          <div class="col-12 col-md-4">
            <div class="form-group position-relative mx-auto">
              <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.07 16.83L19 14.71C18.5547 14.2868 17.9931 14.0063 17.3872 13.9047C16.7814 13.8032 16.159 13.8851 15.6 14.14L14.7 13.24C15.7606 11.8229 16.2449 10.0567 16.0555 8.29684C15.8662 6.537 15.0172 4.91423 13.6794 3.7552C12.3417 2.59618 10.6145 1.98696 8.84567 2.05019C7.0768 2.11341 5.39755 2.84439 4.14597 4.09597C2.8944 5.34755 2.16342 7.0268 2.10019 8.79567C2.03696 10.5645 2.64618 12.2917 3.80521 13.6294C4.96423 14.9672 6.587 15.8162 8.34684 16.0055C10.1067 16.1949 11.8729 15.7106 13.29 14.65L14.18 15.54C13.8951 16.0996 13.793 16.7346 13.8881 17.3553C13.9832 17.9761 14.2706 18.5513 14.71 19L16.83 21.12C17.3925 21.6818 18.155 21.9974 18.95 21.9974C19.745 21.9974 20.5075 21.6818 21.07 21.12C21.3557 20.8406 21.5828 20.5069 21.7378 20.1386C21.8928 19.7702 21.9726 19.3746 21.9726 18.975C21.9726 18.5754 21.8928 18.1798 21.7378 17.8114C21.5828 17.4431 21.3557 17.1094 21.07 16.83ZM12.59 12.59C11.8902 13.288 10.9993 13.7629 10.0297 13.9549C9.06019 14.1468 8.0555 14.047 7.14261 13.6682C6.22971 13.2894 5.44957 12.6485 4.90072 11.8265C4.35187 11.0046 4.05894 10.0384 4.05894 9.05C4.05894 8.06163 4.35187 7.09544 4.90072 6.27347C5.44957 5.45149 6.22971 4.81062 7.14261 4.43182C8.0555 4.05301 9.06019 3.95325 10.0297 4.14515C10.9993 4.33706 11.8902 4.812 12.59 5.51C13.0556 5.97446 13.4251 6.52621 13.6771 7.13367C13.9292 7.74112 14.0589 8.39233 14.0589 9.05C14.0589 9.70768 13.9292 10.3589 13.6771 10.9663C13.4251 11.5738 13.0556 12.1255 12.59 12.59ZM19.66 19.66C19.567 19.7537 19.4564 19.8281 19.3346 19.8789C19.2127 19.9297 19.082 19.9558 18.95 19.9558C18.818 19.9558 18.6873 19.9297 18.5654 19.8789C18.4436 19.8281 18.333 19.7537 18.24 19.66L16.12 17.54C16.0263 17.447 15.9519 17.3364 15.9011 17.2146C15.8503 17.0927 15.8242 16.962 15.8242 16.83C15.8242 16.698 15.8503 16.5673 15.9011 16.4454C15.9519 16.3236 16.0263 16.213 16.12 16.12C16.213 16.0263 16.3236 15.9519 16.4454 15.9011C16.5673 15.8503 16.698 15.8242 16.83 15.8242C16.962 15.8242 17.0927 15.8503 17.2146 15.9011C17.3364 15.9519 17.447 16.0263 17.54 16.12L19.66 18.24C19.7537 18.333 19.8281 18.4436 19.8789 18.5654C19.9297 18.6873 19.9558 18.818 19.9558 18.95C19.9558 19.082 19.9297 19.2127 19.8789 19.3346C19.8281 19.4564 19.7537 19.567 19.66 19.66Z" fill="#556987"></path>
              </svg>
              <input class="form-control ps-12 pe-4 text-secondary h-100 shadow" id="careerInput27-1" type="text" aria-describedby="careerHelp" placeholder="Search">
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="dropdown show">
              <a class="btn btn-outline-light d-flex justify-content-between align-items-center p-3 w-100 h-100 bg-white border shadow" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fs-11 fw-normal text-secondary-light">Location</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.0002 9.17C16.8128 8.98375 16.5594 8.87921 16.2952 8.87921C16.031 8.87921 15.7776 8.98375 15.5902 9.17L12.0002 12.71L8.46019 9.17C8.27283 8.98375 8.01938 8.87921 7.75519 8.87921C7.49101 8.87921 7.23756 8.98375 7.05019 9.17C6.95646 9.26297 6.88207 9.37357 6.8313 9.49543C6.78053 9.61729 6.75439 9.74799 6.75439 9.88C6.75439 10.012 6.78053 10.1427 6.8313 10.2646C6.88207 10.3864 6.95646 10.497 7.05019 10.59L11.2902 14.83C11.3832 14.9237 11.4938 14.9981 11.6156 15.0489C11.7375 15.0997 11.8682 15.1258 12.0002 15.1258C12.1322 15.1258 12.2629 15.0997 12.3848 15.0489C12.5066 14.9981 12.6172 14.9237 12.7102 14.83L17.0002 10.59C17.0939 10.497 17.1683 10.3864 17.2191 10.2646C17.2699 10.1427 17.296 10.012 17.296 9.88C17.296 9.74799 17.2699 9.61729 17.2191 9.49543C17.1683 9.37357 17.0939 9.26297 17.0002 9.17Z" fill="#556987"></path>
                </svg>
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="dropdown show">
              <a class="btn btn-outline-light d-flex justify-content-between align-items-center p-3 w-100 h-100 bg-white border shadow" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="fs-11 fw-normal text-secondary-light">Type</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.0002 9.17C16.8128 8.98375 16.5594 8.87921 16.2952 8.87921C16.031 8.87921 15.7776 8.98375 15.5902 9.17L12.0002 12.71L8.46019 9.17C8.27283 8.98375 8.01938 8.87921 7.75519 8.87921C7.49101 8.87921 7.23756 8.98375 7.05019 9.17C6.95646 9.26297 6.88207 9.37357 6.8313 9.49543C6.78053 9.61729 6.75439 9.74799 6.75439 9.88C6.75439 10.012 6.78053 10.1427 6.8313 10.2646C6.88207 10.3864 6.95646 10.497 7.05019 10.59L11.2902 14.83C11.3832 14.9237 11.4938 14.9981 11.6156 15.0489C11.7375 15.0997 11.8682 15.1258 12.0002 15.1258C12.1322 15.1258 12.2629 15.0997 12.3848 15.0489C12.5066 14.9981 12.6172 14.9237 12.7102 14.83L17.0002 10.59C17.0939 10.497 17.1683 10.3864 17.2191 10.2646C17.2699 10.1427 17.296 10.012 17.296 9.88C17.296 9.74799 17.2699 9.61729 17.2191 9.49543C17.1683 9.37357 17.0939 9.26297 17.0002 9.17Z" fill="#556987"></path>
                </svg>
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-0">
        <div class="col-12">
          <a class="d-block bg-light-dark rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Front-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Back-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-light-dark rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">UI/UX Designer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Product Designer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-light-dark rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Project Manager</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-transparent rounded" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Front-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a class="d-block bg-light-dark rounded shadow" href="#">
            <div class="px-10 py-7">
              <div class="row align-items-center justify-content-between g-2">
                <div class="col-12 col-md-auto">
                  <h2 class="font-heading mb-0 fs-9 fw-semibold text-white">Back-end Developer</h2>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="row align-items-center g-10">
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Remote friendly</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row g-2">
                        <div class="col-auto">
                          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 11H13V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="#8896AB"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <div class="row">
                        <div class="col-12 col-md-auto">
                          <div class="btn btn-lg btn-success w-100 text-success-light">View Job</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </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>

Bootstrap Component #6956

<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-16 mw-md-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Faq</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Frequently Asked Questions</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary-light">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="mb-14 row g-8">
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">What shipping options do you have?</h3>
            <p class="mb-0 fw-medium text-secondary-light">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">What payment methods do you accept?</h3>
            <p class="mb-0 fw-medium text-secondary-light">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">How long does it take to ship my order?</h3>
            <p class="mb-0 fw-medium text-secondary-light">Orders are usually shipped within 1-2 business days after placing the order.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">What shipping options do you have?</h3>
            <p class="mb-0 fw-medium text-secondary-light">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">What payment methods do you accept?</h3>
            <p class="mb-0 fw-medium text-secondary-light">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9 text-white">How long does it take to ship my order?</h3>
            <p class="mb-0 fw-medium text-secondary-light">Orders are usually shipped within 1-2 business days after placing the order.</p>
          </div>
        </div>
      </div>
      <div class="position-relative p-8 p-sm-16 bg-light-light overflow-hidden rounded" style="background-image: url('flex-assets/elements/pattern-light.png')">
        <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
        <div class="position-relative text-center" style="z-index: 1">
          <h2 class="mb-1 font-heading fs-5" style="letter-spacing: -1px;">Have any additional questions?</h2>
          <p class="mb-6 text-secondary-light fs-9">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          <div class="row justify-content-center">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow-sm" href="#">Get in touch</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-absolute bottom-0 start-0 py-28 w-100 bg-success"></div>
  </div>
  <div class="d-flex mt-n1 text-success">
    <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>

Bootstrap Component #6957

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 mw-md-4xl">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Faq</span>
        <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Frequently Asked Questions</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="mb-14 row g-8">
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">What shipping options do you have?</h3>
            <p class="mb-0 fw-medium text-secondary">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">What payment methods do you accept?</h3>
            <p class="mb-0 fw-medium text-secondary">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">How long does it take to ship my order?</h3>
            <p class="mb-0 fw-medium text-secondary">Orders are usually shipped within 1-2 business days after placing the order.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">What shipping options do you have?</h3>
            <p class="mb-0 fw-medium text-secondary">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">What payment methods do you accept?</h3>
            <p class="mb-0 fw-medium text-secondary">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100">
            <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#F7F8F9" stroke-width="6"></circle>
              <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
            </svg>
            <h3 class="mb-6 font-heading fs-9">How long does it take to ship my order?</h3>
            <p class="mb-0 fw-medium text-secondary">Orders are usually shipped within 1-2 business days after placing the order.</p>
          </div>
        </div>
      </div>
      <div class="position-relative p-8 p-sm-16 bg-secondary-dark overflow-hidden rounded" 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 text-center" style="z-index: 1">
          <h2 class="mb-1 font-heading fs-5 text-white" style="letter-spacing: -1px;">Have any additional questions?</h2>
          <p class="mb-6 text-secondary-light fs-9">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          <div class="row justify-content-center">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow-sm" href="#">Get in touch</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-absolute bottom-0 start-0 py-28 w-100 bg-success"></div>
  </div>
  <div class="d-flex mt-n1 text-success">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6958

<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 pt-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 mb-6" style="z-index:1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-8">
          <a class="d-inline-block mb-8" href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-light-green.svg" alt="">
          </a>
          <p class="mb-6 fs-10 fw-medium text-white mw-md-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <ul class="nav ms-n6">
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Resources</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Careers</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Privacy</a></li>
          </ul>
        </div>
        <div class="col-12 col-md-4">
          <div class="row flex-column align-items-md-end pe-16 g-4">
            <div class="col-auto">
              <a href="#">
                <img src="flex-assets/images/footers/google-play-dark.svg">
              </a>
            </div>
            <div class="col-auto">
              <a href="#">
                <img src="flex-assets/images/footers/apps-store-dark.svg">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-relative border-bottom border-light-dark" style="z-index: 1;"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="row align-items-center justify-content-between pt-12 pb-36">
        <div class="col-auto">
          <p class="mb-0 fs-11 fw-medium text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
        </div>
        <div class="col-auto">
          <ul class="nav justify-content-md-end">
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3312)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3313)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3314" style="mask-type:alpha" maskunits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3314)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6959

<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-16 text-center">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
        <p class="mb-6 fs-9 fw-medium text-secondary-light">Pricing that scales with your business immediately.</p>
        <div class="d-inline-flex shadow"><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-white bg-secondary border border-light-dark rounded-start" href="#">Billed Monthly</a><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-secondary-light bg-dark-light border border-light-dark rounded-end" href="#">Billed Annually</a></div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-md-6">
          <div class="bg-white rounded shadow">
            <div class="border-bottom border-light">
              <div class="px-8 py-4">
                <div class="row justify-content-between align-items-center g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 fs-7 fw-semibold">Basic plan</h3>
                    <p class="mb-0 fw-medium text-secondary-light">For bigger teams</p>
                  </div>
                  <div class="col-auto">
                    <div class="d-flex">
                      <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                      <div class="fs-4 fw-semibold">
                        <span>99</span>
                        <span class="fs-11 text-secondary">/mo</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="border-bottom border-light">
              <div class="p-8">
                <ul class="mb-0 list-unstyled">
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                  </li>
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                  </li>
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                  </li>
                  <li class="d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="bg-white rounded shadow">
            <div class="border-bottom border-light">
              <div class="px-8 py-4">
                <div class="row justify-content-between align-items-center g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 fs-7 fw-semibold">Lifetime</h3>
                    <p class="mb-0 fw-medium text-secondary-light">Unlimited possibilities</p>
                  </div>
                  <div class="col-auto">
                    <div class="d-flex">
                      <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                      <div class="fs-4 fw-semibold">
                        <span>189</span>
                        <span class="fs-11 text-secondary">/mo</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="border-bottom border-light">
              <div class="p-8">
                <ul class="mb-0 list-unstyled">
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                  </li>
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                  </li>
                  <li class="mb-4 d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                  </li>
                  <li class="d-flex align-items-start">
                    <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                    <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
          </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>

Bootstrap Component #6960

<section class="position-relative py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="row align-items-lg-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-xl">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Our clients</span>
          <h2 class="font-heading mb-8 fs-5" style="letter-spacing: -1px;">Trusted by the top companies in this industry</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="row justify-content-center g-8">
          <div class="col-12 col-lg-6">
            <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
              <img class="img-fluid" src="flex-assets/logos/brands/symetric-normal.png" alt="">
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
              <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal.png" alt="">
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
              <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal.png" alt="">
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-white rounded shadow">
              <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
...
345
346
347
348
349
350
351
...
675

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

The selected plan includes lifetimeannualmonthly access to Shuffle Editor.

A lifetime license is best for those who prefer to avoid subscriptions.

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to live website in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

13,400+ UI components

Top AI models built in

1-click code export

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.