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 #6641

<section class="position-fixed bottom-0 start-0 bg-white bg-opacity-50 h-100 w-100 overflow-auto" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-end h-100">
    <div class="container py-10">
      <div class="p-12 w-100 bg-light-light border rounded shadow">
        <div class="row align-items-center g-8">
          <div class="col-12 col-md-6">
            <div class="mw-md-xs">
              <p class="mb-4 text-secondary fw-medium">We use third-party cookies in order to personalise your experience</p>
              <a class="d-flex flex-wrap align-items-center text-success link-success" href="#">
                <span class="me-2 fw-medium">Read our cookie policy</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light fs-11 py-3 px-4 w-100 text-light-dark shadow" href="#">Decline</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Allow</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6642

<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="row g-16">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Projects completed</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">APR</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Hours Saved Annually</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6643

<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="position-relative container" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5" style="letter-spacing: -1px;">235.000</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Projects completed</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5" style="letter-spacing: -1px;">$10m</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">APR</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5" style="letter-spacing: -1px;">+50.000</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Hours Saved Annually</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5" style="letter-spacing: -1px;">3.500</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</p>
          </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="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 #6644

<section class="bg-white 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-20 pb-32 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="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="mb-16 mw-4xl mx-auto text-center">
          <span class="mb-4 badge bg-success text-success-light text-uppercase shadow">Get Started</span>
          <h2 class="mb-4 fs-6 font-heading text-white" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
          <p class="mb-6 fs-9 fw-medium text-secondary-light">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
          <div class="row justify-content-center">
            <div class="col 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>
        </div>
        <div class="row justify-content-center">
          <div class="col-auto">
            <div class="position-relative">
              <img class="position-absolute top-0 start-0 mt-n14 ms-n14" style="z-index: 20;" src="flex-assets/elements/circle-orange.svg" alt="">
              <img class="position-absolute bottom-0 end-0 me-n12 mb-n10" src="flex-assets/elements/dots-blue.svg" alt="">
              <img class="position-relative img-fluid" style="z-index: 10;" src="flex-assets/images/cta/work2.png" alt="">
            </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 #6645

<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="position-relative container" style="z-index:1;">
      <h3 class="mb-8 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
      <div class="row justify-content-center g-16">
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/symetric-normal.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/welytics-normal.png" alt="">
        </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 #6646

<section class="position-relative pt-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 pb-12" style="z-index:1;">
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="mw-md-xs">
          <div class="d-flex mb-4">
            <a href="#">
              <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
            </a>
          </div>
          <p class="fs-10 fw-medium text-secondary">Launch your own Software As A Service Application with Flex Solutions.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <div class="mw-md-xs">
          <h3 class="font-heading mb-5 fs-10">Product</h3>
          <ul class="nav flex-column">
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Features</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Solutions</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Pricing</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Tutorials</a></li>
            <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary" href="#">Updates</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <div class="mw-md-xs">
          <h3 class="font-heading mb-5 fs-10">Remaining</h3>
          <ul class="nav flex-column">
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Blog</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Newsletter</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Help Centre</a></li>
            <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Careers</a></li>
            <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary" href="#">Support</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="mw-md-sm">
          <h3 class="font-heading mb-5 fs-10">Newsletter</h3>
          <div class="row g-4 justify-content-center">
            <div class="col">
              <div class="form-group">
                <input class="form-control text-secondary-dark p-3 shadow" id="footerInput8-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Enter email">
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <button class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" type="submit">Subscribe</button>
            </div>
          </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;">
    <p class="mb-0 pt-10 pb-16 fs-12 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
  </div>
</section>

Bootstrap Component #6647

<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>
    <img class="position-absolute top-0 start-0 mt-6 ms-6" style="z-index: 1;" src="flex-assets/elements/dots-blue.svg" alt="">
    <img class="position-absolute end-0 bottom-0 mb-6 me-6" style="z-index: 1;" src="flex-assets/elements/dots-blue.svg" alt="">
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-8 text-center mw-md-2xl mx-auto">
        <h2 class="font-heading mb-4 fs-6" style="letter-spacing: -1px;">Sign up for our newsletter</h2>
        <p class="fs-9 fw-medium text-secondary">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="mw-md-md mx-auto">
        <div class="mb-2 row justify-content-center g-4 g-md-6">
          <div class="col">
            <div class="form-group">
              <input class="form-control text-secondary p-3 shadow" id="newsletterInput5-1" type="email" aria-describedby="emailHelp" placeholder="Enter your email">
            </div>
          </div>
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" href="#">Subscribe</a></div>
        </div>
        <p class="mb-0 fs-13 fw-medium text-secondary">
          <span>We care about your data in our</span>
          <a class="text-sucess link-success" href="#">privacy policy</a>
        </p>
      </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 #6648

<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 g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">We are hiring</span>
          <h2 class="font-heading mb-4 fs-6" 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>
      <div class="col-12 col-md-6">
        <div class="mw-md-xl ms-auto">
          <div class="row g-8">
            <div class="col-12">
              <a class="d-block h-100 bg-white rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Software Development</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-light-dark">Front-end Developer</h2>
                  <p class="mb-4 fw-medium text-secondary">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
                  <div class="row g-6">
                    <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>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-white rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Software Development</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-light-dark">Back-end Developer</h2>
                  <p class="mb-4 fw-medium text-secondary">We&rsquo;re looking for a junior Back-end Developer to join our team.</p>
                  <div class="row g-6">
                    <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>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-white rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Product</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-light-dark">UI/UX Designer</h2>
                  <p class="mb-4 fw-medium text-secondary">We&rsquo;re looking for a senior UI/UX Designer to join our team.</p>
                  <div class="row g-6">
                    <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>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-white rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Product</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-light-dark">Product Designer</h2>
                  <p class="mb-4 fw-medium text-secondary">We&rsquo;re looking for a mid-level Product Designer to join our team.</p>
                  <div class="row g-6">
                    <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>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6649

<section class="position-relative pt-20 pb-32 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 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Our team is the best in the business.</h2>
      <p class="mb-8 fs-9 fw-medium text-secondary">Highly professional and capable of running your business across all digital channels.</p>
      <div class="row justify-content-center g-4">
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Open Positions</a></div>
        <div class="col-12 col-md-auto">
          <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
        </div>
      </div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Dance is the hidden language of the soul.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar2.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Ivan Mathews</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">CTO</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Everything you&rsquo;ve ever wanted is on the other side of fear.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar3.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Elen Benitez</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">CPO</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The only way to do great work is to love what you do.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar4.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">Customer Success</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">There are no traffic jams along the extra mile.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar5.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Alya Levine</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">Backend Developer</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The mind is everything. What you think you become.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <div class="h-100 p-8 text-center bg-white rounded shadow">
          <img class="mb-6" src="flex-assets/images/team/avatar6.png" alt="">
          <h3 class="mb-2 fs-7 fw-semibold">Rose Hernandez</h3>
          <h4 class="mb-6 fs-10 fw-medium text-success">iOS Developer</h4>
          <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Whether you think you can or you think you can&rsquo;t, you&rsquo;re right.</p>
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link p-2 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-2 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>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6650

<section class="position-relative py-20 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-xl-absolute d-flex mt-md-28 mb-32 mb-xl-0">
    <div class="position-relative">
      <img class="position-absolute start-0 top-0 mt-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
      <img class="position-absolute start-0 bottom-0 mb-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
      <img class="position-absolute end-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-left-dark.png" alt="">
    </div>
  </div>
  <div class="position-relative container" style="z-index: 1;">
    <div class="row align-items-center g-0">
      <div class="col-12 col-xl-6"></div>
      <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>
  </div>
</section>

Bootstrap Component #6651

<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-xl-absolute d-flex mt-md-28 mb-32 mb-xl-0">
    <div class="position-relative">
      <img class="position-absolute start-0 top-0 mt-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
      <img class="position-absolute start-0 bottom-0 mb-n20" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
      <img class="position-absolute end-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-left.png" alt="">
    </div>
  </div>
  <div class="position-relative container" style="z-index: 1;">
    <div class="row align-items-center g-0">
      <div class="col-12 col-xl-6"></div>
      <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>
  </div>
</section>

Bootstrap Component #6652

<section class="position-relative overflow-hidden">
  <div class="position-relative pt-20 pb-44 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(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 mw-5xl mx-auto text-center">
        <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="mb-16 row g-16">
        <div class="col-12 col-md-4">
          <div class="text-center">
            <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>
            <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 class="col-12 col-md-4">
          <div class="text-center">
            <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.4099 25C31.1899 25 30.9599 24.93 30.7399 24.88C30.2948 24.7805 29.857 24.6501 29.4299 24.49C28.966 24.3212 28.4561 24.33 27.9982 24.5146C27.5404 24.6992 27.167 25.0466 26.9499 25.49L26.7299 25.95C25.7587 25.3992 24.8616 24.7271 24.0599 23.95C23.2828 23.1484 22.6107 22.2512 22.0599 21.28L22.5199 21.07C22.9633 20.8529 23.3107 20.4795 23.4953 20.0217C23.6799 19.5639 23.6887 19.0539 23.5199 18.59C23.3611 18.159 23.2308 17.7181 23.1299 17.27C23.0799 17.05 23.0399 16.82 23.0099 16.6C22.8885 15.8956 22.5196 15.2577 21.9695 14.8012C21.4195 14.3447 20.7246 14.0996 20.0099 14.11H16.9999C16.5772 14.1094 16.1591 14.1982 15.773 14.3706C15.387 14.5429 15.0418 14.7949 14.7599 15.11C14.4722 15.4337 14.258 15.8158 14.132 16.23C14.006 16.6443 13.9712 17.081 14.0299 17.51C14.5735 21.6721 16.4751 25.5387 19.4399 28.51C22.4113 31.4748 26.2778 33.3764 30.4399 33.92C30.5697 33.9299 30.7001 33.9299 30.8299 33.92C31.5673 33.9211 32.2793 33.6505 32.8299 33.16C33.145 32.8782 33.397 32.5329 33.5693 32.1469C33.7417 31.7609 33.8305 31.3428 33.8299 30.92V27.92C33.8245 27.229 33.5808 26.5611 33.1399 26.0291C32.6989 25.4971 32.0879 25.1336 31.4099 25ZM31.8999 31C31.8996 31.1395 31.8701 31.2775 31.8132 31.4049C31.7564 31.5324 31.6735 31.6465 31.5699 31.74C31.4603 31.8399 31.3299 31.9141 31.1881 31.9573C31.0463 32.0006 30.8966 32.0117 30.7499 31.99C27.0182 31.5026 23.5502 29.802 20.8799 27.15C18.2074 24.4775 16.492 20.9974 15.9999 17.25C15.9782 17.1033 15.9894 16.9537 16.0326 16.8119C16.0758 16.67 16.1501 16.5396 16.2499 16.43C16.3445 16.3252 16.4603 16.2415 16.5896 16.1847C16.7188 16.1278 16.8587 16.0989 16.9999 16.1H19.9999C20.2311 16.0944 20.4571 16.169 20.6394 16.3112C20.8217 16.4534 20.9491 16.6544 20.9999 16.88C20.9999 17.15 21.0899 17.43 21.1499 17.7C21.2655 18.2239 21.4192 18.7386 21.6099 19.24L20.2099 19.9C19.9693 20.0105 19.7823 20.2119 19.6899 20.46C19.5899 20.7035 19.5899 20.9765 19.6899 21.22C21.1291 24.3028 23.6072 26.7808 26.6899 28.22C26.9334 28.32 27.2065 28.32 27.4499 28.22C27.6981 28.1276 27.8995 27.9406 28.0099 27.7L28.6399 26.3C29.1558 26.4881 29.6837 26.6418 30.2199 26.76C30.4799 26.82 30.7599 26.87 31.0299 26.91C31.2555 26.9608 31.4565 27.0882 31.5987 27.2705C31.7409 27.4529 31.8156 27.6788 31.8099 27.91L31.8999 31ZM25.9999 14C25.7699 14 25.5299 14 25.2999 14C25.0347 14.0225 24.7893 14.1495 24.6177 14.353C24.4461 14.5565 24.3624 14.8198 24.3849 15.085C24.4075 15.3502 24.5344 15.5956 24.7379 15.7672C24.9414 15.9388 25.2047 16.0225 25.4699 16H25.9999C27.5912 16 29.1174 16.6321 30.2426 17.7574C31.3678 18.8826 31.9999 20.4087 31.9999 22C31.9999 22.18 31.9999 22.35 31.9999 22.53C31.9778 22.7938 32.0611 23.0556 32.2317 23.2581C32.4023 23.4606 32.6462 23.5871 32.9099 23.61H32.9899C33.2403 23.611 33.4819 23.5181 33.667 23.3496C33.8522 23.1811 33.9674 22.9493 33.9899 22.7C33.9899 22.47 33.9899 22.23 33.9899 22C33.9899 19.88 33.1484 17.8467 31.6503 16.3467C30.1522 14.8467 28.1199 14.0027 25.9999 14ZM27.9999 22C27.9999 22.2652 28.1053 22.5196 28.2928 22.7071C28.4804 22.8946 28.7347 23 28.9999 23C29.2651 23 29.5195 22.8946 29.707 22.7071C29.8946 22.5196 29.9999 22.2652 29.9999 22C29.9999 20.9391 29.5785 19.9217 28.8284 19.1716C28.0782 18.4214 27.0608 18 25.9999 18C25.7347 18 25.4804 18.1054 25.2928 18.2929C25.1053 18.4804 24.9999 18.7348 24.9999 19C24.9999 19.2652 25.1053 19.5196 25.2928 19.7071C25.4804 19.8946 25.7347 20 25.9999 20C26.5304 20 27.0391 20.2107 27.4141 20.5858C27.7892 20.9609 27.9999 21.4696 27.9999 22Z" fill="#F0FDF4"></path>
            </svg>
            <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 class="col-12 col-md-4">
          <div class="text-center">
            <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 14ZM20 32H16V28H20V32ZM20 26H16V22H20V26ZM20 20H16V16H20V20ZM26 32H22V28H26V32ZM26 26H22V22H26V26ZM26 20H22V16H26V20ZM32 32H28V28H32V32ZM32 26H28V22H32V26ZM32 20H28V16H32V20Z" fill="#F0FDF4"></path>
            </svg>
            <h2 class="mb-3 font-heading fs-7">Office</h2>
            <div class="row justify-content-center">
              <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>
      <iframe class="w-100" id="gmap_canvas" style="height: 641px;" 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 class="position-absolute bottom-0 start-0 w-100 bg-secondary-dark" style="height: 496px;">
    <div class="bg-success" style="height: 6px;"></div>
  </div>
</section>

Bootstrap Component #6653

<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-16 text-center mw-md-5xl mx-auto">
      <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 class="mb-16 row g-8">
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news2.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news3.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news4.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news5.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news6.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
    <nav class="d-flex justify-content-center" aria-label="page navigation example">
      <ul class="pagination shadow">
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.28994 5.99995L6.82994 2.45995C7.01619 2.27259 7.12074 2.01913 7.12074 1.75495C7.12074 1.49076 7.01619 1.23731 6.82994 1.04995C6.73698 0.95622 6.62638 0.881826 6.50452 0.831057C6.38266 0.780288 6.25196 0.75415 6.11994 0.75415C5.98793 0.75415 5.85723 0.780288 5.73537 0.831057C5.61351 0.881826 5.50291 0.95622 5.40994 1.04995L1.16994 5.28995C1.07622 5.38291 1.00182 5.49351 0.951053 5.61537C0.900284 5.73723 0.874146 5.86794 0.874146 5.99995C0.874146 6.13196 0.900284 6.26267 0.951053 6.38453C1.00182 6.50638 1.07622 6.61699 1.16994 6.70995L5.40994 10.9999C5.50338 11.0926 5.6142 11.166 5.73604 11.2157C5.85787 11.2655 5.98834 11.2907 6.11994 11.2899C6.25155 11.2907 6.38201 11.2655 6.50385 11.2157C6.62569 11.166 6.7365 11.0926 6.82994 10.9999C7.01619 10.8126 7.12074 10.5591 7.12074 10.2949C7.12074 10.0308 7.01619 9.77731 6.82994 9.58995L3.28994 5.99995Z" fill="#BBC3CF"></path>
            </svg>
          </a>
        </li>
        <li class="page-item"><a class="page-link fw-medium" href="#">1</a></li>
        <li class="page-item active"><a class="page-link fw-medium" href="#">2</a></li>
        <li class="page-item"><a class="page-link fw-medium" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.71006 6.00005L1.17006 9.54005C0.983805 9.72741 0.879264 9.98087 0.879264 10.2451C0.879264 10.5092 0.983805 10.7627 1.17006 10.9501C1.26302 11.0438 1.37362 11.1182 1.49548 11.1689C1.61734 11.2197 1.74804 11.2459 1.88006 11.2459C2.01207 11.2459 2.14277 11.2197 2.26463 11.1689C2.38649 11.1182 2.49709 11.0438 2.59006 10.9501L6.83006 6.71005C6.92378 6.61709 6.99818 6.50649 7.04895 6.38463C7.09972 6.26277 7.12585 6.13206 7.12585 6.00005C7.12585 5.86804 7.09972 5.73733 7.04895 5.61547C6.99818 5.49362 6.92378 5.38301 6.83006 5.29005L2.59006 1.00005C2.49662 0.907371 2.3858 0.834046 2.26396 0.784281C2.14212 0.734517 2.01166 0.70929 1.88006 0.710051C1.74845 0.70929 1.61799 0.734517 1.49615 0.784281C1.37431 0.834046 1.2635 0.907371 1.17006 1.00005C0.983804 1.18741 0.879263 1.44087 0.879263 1.70505C0.879263 1.96924 0.983804 2.22269 1.17006 2.41005L4.71006 6.00005Z" fill="#BBC3CF"></path>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

Bootstrap Component #6654

<section class="position-relative py-20 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="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">We are hiring</span>
          <h2 class="font-heading mb-4 fs-6 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>
      <div class="col-12 col-md-6">
        <div class="mw-md-xl ms-auto">
          <div class="row g-8">
            <div class="col-12">
              <a class="d-block h-100 bg-light-dark rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Software Development</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-white">Front-end Developer</h2>
                  <p class="mb-4 fw-medium text-secondary-light">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
                  <div class="row g-6">
                    <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="#556987"></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="#556987"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-light-dark rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Software Development</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-white">Back-end Developer</h2>
                  <p class="mb-4 fw-medium text-secondary-light">We&rsquo;re looking for a junior Back-end Developer to join our team.</p>
                  <div class="row g-6">
                    <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="#556987"></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="#556987"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-light-dark rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Product</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-white">UI/UX Designer</h2>
                  <p class="mb-4 fw-medium text-secondary-light">We&rsquo;re looking for a senior UI/UX Designer to join our team.</p>
                  <div class="row g-6">
                    <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="#556987"></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="#556987"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="d-block h-100 bg-light-dark rounded shadow" href="#">
                <div class="p-10">
                  <span class="badge mb-2 bg-success-dark text-success shadow">Product</span>
                  <h2 class="font-heading mb-2 fs-9 fw-semibold text-white">Product Designer</h2>
                  <p class="mb-4 fw-medium text-secondary-light">We&rsquo;re looking for a mid-level Product Designer to join our team.</p>
                  <div class="row g-6">
                    <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="#556987"></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="#556987"></path>
                          </svg>
                        </div>
                        <div class="col-auto">
                          <span class="fw-medium text-secondary-light">Full-time</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6655

<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="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <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>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg ms-auto">
          <div class="row g-10">
            <div class="col-12">
              <a class="text-success link-success" href="#">
                <div class="mb-4 row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9">How long does it take to ship my order?</h3>
                  </div>
                  <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="M12.71 8.29C12.6149 8.19896 12.5028 8.12759 12.38 8.08C12.1365 7.97998 11.8635 7.97998 11.62 8.08C11.4972 8.12759 11.3851 8.19896 11.29 8.29L8.29 11.29C8.1017 11.4783 7.99591 11.7337 7.99591 12C7.99591 12.2663 8.1017 12.5217 8.29 12.71C8.4783 12.8983 8.7337 13.0041 9 13.0041C9.2663 13.0041 9.5217 12.8983 9.71 12.71L11 11.41L11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15L13 11.41L14.29 12.71C14.383 12.8037 14.4936 12.8781 14.6154 12.9289C14.7373 12.9797 14.868 13.0058 15 13.0058C15.132 13.0058 15.2627 12.9797 15.3846 12.9289C15.5064 12.8781 15.617 12.8037 15.71 12.71C15.8037 12.617 15.8781 12.5064 15.9289 12.3846C15.9797 12.2627 16.0058 12.132 16.0058 12C16.0058 11.868 15.9797 11.7373 15.9289 11.6154C15.8781 11.4936 15.8037 11.383 15.71 11.29L12.71 8.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51808 6.3459 2.7612 8.17316C2.00433 10.0004 1.80629 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92893 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.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 9.34783 20.9464 6.80429 19.0711 4.92893C18.1425 4.00034 17.0401 3.26375 15.8268 2.7612C14.6136 2.25865 13.3132 2 12 2ZM12 20C10.4177 20 8.87103 19.5308 7.55544 18.6518C6.23984 17.7727 5.21446 16.5233 4.60896 15.0615C4.00346 13.5997 3.84503 11.9911 4.15372 10.4393C4.4624 8.88743 5.22432 7.46196 6.34314 6.34314C7.46196 5.22432 8.88743 4.4624 10.4393 4.15371C11.9911 3.84503 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55543C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <p class="mb-0 fw-medium text-secondary">Orders are usually shipped within 1-2 business days after placing the order.</p>
              </a>
            </div>
            <div class="col-12">
              <a class="text-success link-success" href="#">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9">What payment methods do you accept?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="text-success link-success" href="#">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9">What shipping options do you have?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="text-success link-success" href="#">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9">How do I make changes to an existing order?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-12">
              <a class="text-success link-success" href="#">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9">When will my order arrive?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6656

<section class="position-relative py-20 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-16 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
      <h2 class="font-heading mb-6 fs-5 text-white" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
      <div class="d-flex justify-content-center align-items-center">
        <p class="mb-0 fs-9 fw-medium text-secondary">Billed Monthly</p>
        <a class="mx-4" href="#">
          <div class="p-1 d-flex align-items-center justify-content-end bg-success rounded-pill" style="width: 72px; height: 36px;">
            <div class="bg-white rounded-pill" style="width: 28px; height: 28px;"></div>
          </div>
        </a>
        <p class="mb-0 fs-9 fw-medium text-light-light">Billed Annually</p>
      </div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="h-100 p-8 bg-white rounded shadow">
          <div class="mb-7 d-flex flex-column align-items-center">
            <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Small</h3>
            <p class="mb-6 fw-medium text-secondary-light">For Individual Users</p>
            <div class="d-flex">
              <div class="fs-7 fw-bold mt-1 pe-1">$</div>
              <div class="fs-3 fw-semibold">
                <span>10</span>
                <span class="fs-11 text-secondary">/mo</span>
              </div>
            </div>
          </div>
          <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow shadow" href="#">Get Started Now</a>
          <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">Complete documentation</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">Working materials in Figma</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">100GB cloud storage</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">500 team members</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100 p-8 bg-white rounded shadow">
          <div class="mb-7 d-flex flex-column align-items-center">
            <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Medium</h3>
            <p class="mb-6 fw-medium text-secondary-light">For bigger teams</p>
            <div class="d-flex">
              <div class="fs-7 fw-bold mt-1 pe-1">$</div>
              <div class="fs-3 fw-semibold">
                <span>99</span>
                <span class="fs-11 text-secondary">/mo</span>
              </div>
            </div>
          </div>
          <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow shadow" href="#">Get Started Now</a>
          <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">Complete documentation</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">Working materials in Figma</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">100GB cloud storage</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">500 team members</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">Program reviews 1x a month</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">CPM Overage: Unlimited</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100 p-8 bg-white rounded shadow">
          <div class="mb-7 d-flex flex-column align-items-center">
            <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Large</h3>
            <p class="mb-6 fw-medium text-secondary-light">Unlimited possibilities</p>
            <div class="d-flex">
              <div class="fs-7 fw-bold mt-1 pe-1">$</div>
              <div class="fs-3 fw-semibold">
                <span>799</span>
                <span class="fs-11 text-secondary">/mo</span>
              </div>
            </div>
          </div>
          <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow shadow" href="#">Get Started Now</a>
          <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">Complete documentation</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">Working materials in Figma</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">100GB cloud storage</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">500 team members</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">Program reviews 1x a month</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="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="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>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6657

<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 mw-md-4xl mx-auto">
        <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="mw-md-3xl mx-auto">
        <div class="row g-8">
          <div class="col-12">
            <a class="text-secondary link-secondary" href="#">
              <div class="p-10 bg-light-dark rounded shadow">
                <div class="mb-4 row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9 text-white">How long does it take to ship my order?</h3>
                  </div>
                  <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="M12.71 8.29C12.6149 8.19896 12.5028 8.12759 12.38 8.08C12.1365 7.97998 11.8635 7.97998 11.62 8.08C11.4972 8.12759 11.3851 8.19896 11.29 8.29L8.29 11.29C8.1017 11.4783 7.99591 11.7337 7.99591 12C7.99591 12.2663 8.1017 12.5217 8.29 12.71C8.4783 12.8983 8.7337 13.0041 9 13.0041C9.2663 13.0041 9.5217 12.8983 9.71 12.71L11 11.41L11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15L13 11.41L14.29 12.71C14.383 12.8037 14.4936 12.8781 14.6154 12.9289C14.7373 12.9797 14.868 13.0058 15 13.0058C15.132 13.0058 15.2627 12.9797 15.3846 12.9289C15.5064 12.8781 15.617 12.8037 15.71 12.71C15.8037 12.617 15.8781 12.5064 15.9289 12.3846C15.9797 12.2627 16.0058 12.132 16.0058 12C16.0058 11.868 15.9797 11.7373 15.9289 11.6154C15.8781 11.4936 15.8037 11.383 15.71 11.29L12.71 8.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51808 6.3459 2.7612 8.17316C2.00433 10.0004 1.80629 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92893 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.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 9.34783 20.9464 6.80429 19.0711 4.92893C18.1425 4.00034 17.0401 3.26375 15.8268 2.7612C14.6136 2.25865 13.3132 2 12 2ZM12 20C10.4177 20 8.87103 19.5308 7.55544 18.6518C6.23984 17.7727 5.21446 16.5233 4.60896 15.0615C4.00346 13.5997 3.84503 11.9911 4.15372 10.4393C4.4624 8.88743 5.22432 7.46196 6.34314 6.34314C7.46196 5.22432 8.88743 4.4624 10.4393 4.15371C11.9911 3.84503 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55543C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <p class="mb-0 fw-medium text-secondary-light">Orders are usually shipped within 1-2 business days after placing the order.</p>
              </div>
            </a>
          </div>
          <div class="col-12">
            <a class="text-secondary link-secondary" href="#">
              <div class="p-10 bg-light-dark rounded shadow">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9 text-white">What payment methods do you accept?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="col-12">
            <a class="text-secondary link-secondary" href="#">
              <div class="p-10 bg-light-dark rounded shadow">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9 text-white">What shipping options do you have?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="col-12">
            <a class="text-secondary link-secondary" href="#">
              <div class="p-10 bg-light-dark rounded shadow">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9 text-white">How do I make changes to an existing order?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="col-12">
            <a class="text-secondary link-secondary" href="#">
              <div class="p-10 bg-light-dark rounded shadow">
                <div class="row justify-content-between g-4">
                  <div class="col-auto">
                    <h3 class="mb-0 font-heading fs-9 text-white">When will my order arrive?</h3>
                  </div>
                  <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="M11.29 15.71C11.3851 15.801 11.4972 15.8724 11.62 15.92C11.8635 16.02 12.1365 16.02 12.38 15.92C12.5028 15.8724 12.6149 15.801 12.71 15.71L15.71 12.71C15.8983 12.5217 16.0041 12.2663 16.0041 12C16.0041 11.7337 15.8983 11.4783 15.71 11.29C15.5217 11.1017 15.2663 10.9959 15 10.9959C14.7337 10.9959 14.4783 11.1017 14.29 11.29L13 12.59L13 9C13 8.73479 12.8946 8.48043 12.7071 8.2929C12.5196 8.10536 12.2652 8 12 8C11.7348 8 11.4804 8.10536 11.2929 8.2929C11.1054 8.48043 11 8.73479 11 9L11 12.59L9.71 11.29C9.61704 11.1963 9.50644 11.1219 9.38458 11.0711C9.26272 11.0203 9.13201 10.9942 9 10.9942C8.86799 10.9942 8.73728 11.0203 8.61542 11.0711C8.49356 11.1219 8.38296 11.1963 8.29 11.29C8.19627 11.383 8.12188 11.4936 8.07111 11.6154C8.02034 11.7373 7.9942 11.868 7.9942 12C7.9942 12.132 8.02034 12.2627 8.07111 12.3846C8.12188 12.5064 8.19627 12.617 8.29 12.71L11.29 15.71ZM12 22C13.9778 22 15.9112 21.4135 17.5557 20.3147C19.2002 19.2159 20.4819 17.6541 21.2388 15.8268C21.9957 13.9996 22.1937 11.9889 21.8079 10.0491C21.422 8.10929 20.4696 6.32746 19.0711 4.92894C17.6725 3.53041 15.8907 2.578 13.9509 2.19215C12.0111 1.8063 10.0004 2.00433 8.17317 2.76121C6.3459 3.51809 4.78412 4.79981 3.6853 6.4443C2.58649 8.08879 2 10.0222 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7363 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22ZM12 4C13.5823 4 15.129 4.4692 16.4446 5.34825C17.7602 6.2273 18.7855 7.47673 19.391 8.93854C19.9965 10.4003 20.155 12.0089 19.8463 13.5607C19.5376 15.1126 18.7757 16.538 17.6569 17.6569C16.538 18.7757 15.1126 19.5376 13.5607 19.8463C12.0089 20.155 10.4003 19.9965 8.93853 19.391C7.47672 18.7855 6.22729 17.7602 5.34824 16.4446C4.46919 15.129 4 13.5823 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84286 9.87827 4 12 4Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6658

<section class="position-relative py-20 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-16 text-center mw-md-5xl mx-auto">
      <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 class="mb-16 row g-8">
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news2.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news3.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news4.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news5.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news6.png" alt="">
        <a href="#">
          <h3 class="font-heading mb-4 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</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>
        <a class="d-flex align-items-center text-success link-success" href="#">
          <span class="me-2 fw-semibold fs-10">Read Post</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
    <nav class="d-flex justify-content-center" aria-label="page navigation example">
      <ul class="pagination shadow">
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100 bg-light-dark border-dark-light" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.28994 5.9997L6.82994 2.4597C7.01619 2.27234 7.12074 2.01889 7.12074 1.7547C7.12074 1.49052 7.01619 1.23707 6.82994 1.0497C6.73698 0.955976 6.62638 0.881582 6.50452 0.830813C6.38266 0.780044 6.25196 0.753906 6.11994 0.753906C5.98793 0.753906 5.85723 0.780044 5.73537 0.830813C5.61351 0.881582 5.50291 0.955976 5.40994 1.0497L1.16994 5.2897C1.07622 5.38267 1.00182 5.49327 0.951053 5.61513C0.900284 5.73699 0.874146 5.86769 0.874146 5.9997C0.874146 6.13172 0.900284 6.26242 0.951053 6.38428C1.00182 6.50614 1.07622 6.61674 1.16994 6.7097L5.40994 10.9997C5.50338 11.0924 5.6142 11.1657 5.73604 11.2155C5.85787 11.2652 5.98834 11.2905 6.11994 11.2897C6.25155 11.2905 6.38201 11.2652 6.50385 11.2155C6.62569 11.1657 6.7365 11.0924 6.82994 10.9997C7.01619 10.8123 7.12074 10.5589 7.12074 10.2947C7.12074 10.0305 7.01619 9.77707 6.82994 9.5897L3.28994 5.9997Z" fill="#556987"></path>
            </svg>
          </a>
        </li>
        <li class="page-item"><a class="page-link text-secondary fw-medium bg-light-dark border-dark-light" href="#">1</a></li>
        <li class="page-item active"><a class="page-link fw-medium bg-light-dark border-dark-light" href="#">2</a></li>
        <li class="page-item"><a class="page-link text-secondary fw-medium bg-light-dark border-dark-light" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100 bg-light-dark border-dark-light" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.71006 6.0003L1.17006 9.5403C0.983805 9.72766 0.879264 9.98111 0.879264 10.2453C0.879264 10.5095 0.983805 10.7629 1.17006 10.9503C1.26302 11.044 1.37362 11.1184 1.49548 11.1692C1.61734 11.22 1.74804 11.2461 1.88006 11.2461C2.01207 11.2461 2.14277 11.22 2.26463 11.1692C2.38649 11.1184 2.49709 11.044 2.59006 10.9503L6.83006 6.7103C6.92378 6.61733 6.99818 6.50673 7.04895 6.38487C7.09972 6.26301 7.12585 6.13231 7.12585 6.0003C7.12585 5.86828 7.09972 5.73758 7.04895 5.61572C6.99818 5.49386 6.92378 5.38326 6.83006 5.2903L2.59006 1.0003C2.49662 0.907615 2.3858 0.83429 2.26396 0.784525C2.14212 0.734761 2.01166 0.709534 1.88006 0.710295C1.74845 0.709534 1.61799 0.734761 1.49615 0.784525C1.37431 0.83429 1.2635 0.907615 1.17006 1.0003C0.983805 1.18766 0.879263 1.44111 0.879263 1.7053C0.879263 1.96948 0.983805 2.22293 1.17006 2.4103L4.71006 6.0003Z" fill="#556987"></path>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

Bootstrap Component #6659

<section class="position-relative pt-20 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 mb-6" style="z-index:1;">
    <div class="row align-items-center">
      <div class="col-12 col-md-auto">
        <a href="#">
          <img class="img-fluid" src="flex-assets/logos/flex-light-green.svg" alt="">
        </a>
      </div>
      <div class="col-12 col-md">
        <ul class="nav justify-content-md-end">
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Resources</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Careers</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Help</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Privacy</a></li>
        </ul>
      </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>
</section>

Bootstrap Component #6660

<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="#">Open Positions</a></div>
            <div class="col-12 col-md-auto">
              <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="row">
            <div class="col-12">
              <div class="mw-md-xl">
                <div class="row g-8">
                  <div class="col-12 col-md-6">
                    <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>
                    <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 class="col-12 col-md-6">
                    <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>
                    <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 class="col-12 col-md-6">
                    <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="M30.0001 16.48C28.4088 14.8887 26.2505 13.9947 24.0001 13.9947C21.7496 13.9947 19.5914 14.8887 18.0001 16.48C16.4088 18.0713 15.5148 20.2296 15.5148 22.48C15.5148 24.7304 16.4088 26.8887 18.0001 28.48L23.2701 33.76C23.363 33.8537 23.4736 33.9281 23.5955 33.9789C23.7173 34.0297 23.848 34.0558 23.9801 34.0558C24.1121 34.0558 24.2428 34.0297 24.3646 33.9789C24.4865 33.9281 24.5971 33.8537 24.6901 33.76L30.0001 28.43C31.5847 26.8453 32.4749 24.6961 32.4749 22.455C32.4749 20.2139 31.5847 18.0647 30.0001 16.48V16.48ZM28.5701 27L24.0001 31.59L19.4301 27C18.5272 26.0963 17.9125 24.9452 17.6637 23.6923C17.415 22.4393 17.5432 21.1407 18.0324 19.9607C18.5215 18.7806 19.3495 17.7721 20.4117 17.0625C21.4739 16.3529 22.7226 15.9742 24.0001 15.9742C25.2775 15.9742 26.5262 16.3529 27.5884 17.0625C28.6506 17.7721 29.4786 18.7806 29.9677 19.9607C30.4569 21.1407 30.5851 22.4393 30.3364 23.6923C30.0876 24.9452 29.4729 26.0963 28.5701 27V27ZM21.0001 19.41C20.1928 20.2198 19.7394 21.3166 19.7394 22.46C19.7394 23.6034 20.1928 24.7002 21.0001 25.51C21.5998 26.1108 22.3636 26.5211 23.1957 26.6894C24.0278 26.8577 24.891 26.7766 25.6771 26.4562C26.4632 26.1357 27.1372 25.5903 27.6145 24.8883C28.0918 24.1862 28.3512 23.3589 28.3601 22.51C28.3646 21.9432 28.2554 21.3813 28.039 20.8574C27.8225 20.3335 27.5033 19.8584 27.1001 19.46C26.7037 19.0546 26.2311 18.7315 25.7095 18.5095C25.1878 18.2874 24.6274 18.1707 24.0605 18.166C23.4935 18.1614 22.9313 18.2689 22.406 18.4824C21.8808 18.6959 21.403 19.0111 21.0001 19.41V19.41ZM25.6901 24.09C25.3111 24.4747 24.8103 24.7159 24.2732 24.7723C23.7361 24.8286 23.1961 24.6966 22.7456 24.3989C22.295 24.1012 21.9618 23.6562 21.8031 23.1401C21.6443 22.6239 21.6697 22.0686 21.875 21.5692C22.0803 21.0697 22.4528 20.657 22.9286 20.4017C23.4045 20.1465 23.9543 20.0644 24.484 20.1696C25.0137 20.2748 25.4904 20.5608 25.8326 20.9785C26.1748 21.3963 26.3612 21.92 26.3601 22.46C26.3455 23.0773 26.0865 23.6635 25.6401 24.09H25.6901Z" fill="#F0FDF4"></path>
                    </svg>
                    <h2 class="mb-2 font-heading fs-7">Office</h2>
                    <p class="mb-0 fs-9 text-secondary fw-medium">1686, Geraldine Lane</p>
                    <p class="mb-0 fs-9 text-secondary fw-medium">New York, NY 10013</p>
                  </div>
                  <div class="col-12 col-md-6">
                    <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>
                    <h2 class="mb-8 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-6">
          <form class="mw-md-xl ms-auto p-10 bg-white rounded shadow">
            <div class="mb-6 form-group">
              <label class="mb-1 fw-medium text-light-dark" for="contactInput11-1">Email</label>
              <input class="form-control shadow" id="contactInput11-1" type="email" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <div class="mb-6 form-group">
              <label class="mb-1 fw-medium text-light-dark" for="contactInput11-2">Message</label>
              <textarea class="form-control shadow" id="contactInput11-2" placeholder="Your message" rows="10"></textarea>
            </div>
            <button class="btn btn-lg btn-success w-100 text-success-light shadow" type="submit">Send</button>
          </form>
        </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>

1
...
330
331
332
333
334
335
336
...
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.