Bootstrap Contacts Components

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <img class="position-absolute top-0 start-0 col-8 col-md-6 col-xl-5 img-fluid" src="zospace-assets/images/map.svg" alt="">
  <div class="container position-relative mx-auto">
    <div class="text-center mb-20">
      <span class="h6 text-primary">Have a question?</span>
      <h2 class="h3 text-white mt-10">Contact with us</h2>
    </div>
    <div class="row justify-content-center mb-24">
      <div class="col-12 col-md-6 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-sm mx-auto">
          <img class="img-fluid rounded" src="https://image.freepik.com/free-photo/contacting-with-friends-via-computer_329181-14587.jpg" alt="">
          <div class="pt-12 pb-10 px-6 px-sm-14 mt-n4 rounded-bottom bg-secondary">
            <div class="mb-5 w-100 bg-secondary" style="height: 1px;"></div>
            <h3 class="h5 text-white mb-6">Have any question? Send a message!</h3>
            <div class="text-end"><a class="btn btn-outline-light" href="#">Message</a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="mw-sm mx-auto">
          <div class="py-6 px-8 mb-4 rounded bg-secondary">
            <div class="d-flex flex-wrap flex-sm-nowrap align-items-center">
              <span class="flex-shrink-0 d-flex mb-4 mb-sm-0 me-8 justify-content-center align-items-center bg-primary rounded" style="width: 48px; height: 48px;">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style=" width: 16px;height: 16px">
                  <path d="M17.9347 13.3167C17.811 12.6058 17.2022 12.0401 16.4551 11.94L12.3077 11.3855C11.555 11.2832 10.8101 11.6825 10.4984 12.3528C10.4185 12.5237 10.3521 12.7014 10.2981 12.8848C9.13582 12.4 8.09277 11.7004 7.19375 10.8018C6.29473 9.90315 5.59374 8.86053 5.10992 7.6987C5.29332 7.64471 5.4711 7.57835 5.64213 7.4985C6.31274 7.18695 6.70993 6.44351 6.60866 5.69108L6.05394 1.54536C5.9538 0.797426 5.38784 0.188953 4.66434 0.0641091C4.40105 0.0202451 4.18164 0 3.97348 0C2.61201 0 1.32368 0.71982 0.612565 1.87716C-0.157059 3.13122 -0.0501675 4.73507 0.128736 5.9925C0.533802 8.84029 1.99766 11.7038 4.14451 13.8498C5.74002 15.4446 7.71246 16.6402 9.84693 17.306C10.9339 17.6457 12.2942 18 13.605 18C14.5851 18 15.537 17.802 16.3235 17.2498C17.3733 16.5109 18 15.3052 18 14.0196C18 13.8115 17.9797 13.5911 17.9347 13.3167Z" fill="white"></path>
                </svg>
              </span>
              <span class="fw-bold text-white">+44 20457523 00 01</span>
            </div>
          </div>
          <div class="py-6 px-8 mb-10 rounded bg-secondary">
            <div class="d-flex flex-wrap flex-sm-nowrap align-items-center">
              <span class="flex-shrink-0 d-flex mb-4 mb-sm-0 me-8 justify-content-center align-items-center bg-primary rounded" style="width: 48px; height: 48px;">
                <svg width="21" height="14" viewbox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.8109 0H2.1878C0.981688 0 0 0.980499 0 2.18676V11.8119C0 13.0182 0.981688 14 2.1878 14H18.8122C20.0183 14 21 13.0182 21 11.8119V2.18676C20.9987 0.980499 20.017 0 18.8109 0ZM19.2492 4.73317L11.716 8.67092C11.3393 8.86387 10.9193 8.96887 10.4993 8.96887C10.0794 8.96887 9.66858 8.86387 9.28273 8.67092L1.74945 4.73317V2.75511L10.0872 7.11288C10.3405 7.24414 10.6555 7.24414 10.9101 7.11288L19.2479 2.75511V4.73317H19.2492Z" fill="white"></path>
                </svg>
              </span>
              <span class="fw-bold text-white">[email protected]</span>
            </div>
          </div>
          <div class="px-8">
            <div class="d-flex flex-wrap flex-sm-nowrap">
              <span class="flex-shrink-0 d-flex mb-4 mb-sm-0 me-8 justify-content-center align-items-center bg-primary rounded" style="width: 48px; height: 48px;">
                <svg width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.5 11C16.0185 11 14 13.0962 14 15.6729C14 19.2285 17.8951 22.6871 18.0612 22.8339C18.3123 23.0554 18.6877 23.0554 18.9388 22.8339C19.1049 22.6885 23 19.2298 23 15.6729C23 13.0962 20.9815 11 18.5 11ZM18.5 17.4618C17.5077 17.4618 16.7003 16.6338 16.7003 15.6161C16.7003 14.5985 17.5077 13.7705 18.5 13.7705C19.4923 13.7705 20.2997 14.5985 20.2997 15.6161C20.2997 16.6338 19.4923 17.4618 18.5 17.4618Z" fill="white"></path>
                  <path d="M9.01758 0C4.04824 0 0 4.04035 0 9C0 13.9597 4.04824 18 9.01758 18C9.90081 18 10.7583 17.8745 11.5604 17.6315C10.1794 14.5374 10.8571 11.7539 12.7236 9.9193C12.6912 9.9193 12.2597 9.73436 12.2272 9.72086C8.69567 8.37903 5.3927 12.6232 8.35888 16.156C6.02299 15.94 4.00361 14.6171 2.84987 12.7096C4.09829 12.4153 5.00721 11.3057 5.02344 9.9922C5.04373 9.16199 5.60505 8.59232 6.30433 8.43573C9.41794 7.77021 9.7128 3.90535 8.51307 1.83051C9.34355 1.78461 10.0442 1.80756 11.0383 2.10049C10.7881 4.61407 12.1501 7.66087 15.1596 7.37468L16.0158 7.27614C16.0875 7.57312 16.1335 7.87011 16.1605 8.18464C16.7272 8.08745 17.4468 8.06855 18 8.17519C17.5739 3.60027 13.7056 0 9.01758 0Z" fill="white"></path>
                </svg>
              </span>
              <div>
                <div class="pb-5 mb-4 border-bottom">
                  <p class="fw-bold text-white mb-0">Bayswater, London</p>
                  <span class="fw-bold text-white">W16EG, UK</span>
                </div>
                <p class="text-secondary-light mb-0">The one est bad, semper six. At sem quis, congue</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <p class="text-secondary-light mb-6">The brown fox jumps over the lazy dog.</p>
      <a class="d-inline-flex align-items-center text-primary" href="#">
        <span class="me-4">Learn more</span>
        <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="#1F40FF"></path>
        </svg>
      </a>
    </div>
  </div>
</section>