Bootstrap 5 Contact Components

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="d-none d-sm-block position-absolute top-0 start-0 mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="d-none d-sm-block position-absolute bottom-0 end-0 mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="container position-relative">
    <div class="mw-2xl mx-auto mb-16 text-center">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">READY TO SUPPORT</span>
      <h3 class="font-heading mb-4">
        <span>Anything unclear or</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">need help ?</span>
      </h3>
      <p class="lead text-secondary">Relax, we are ready to support 24/7 for you</p>
    </div>
    <div class="mw-sm mw-lg-2xl mw-xl-4xl mx-auto">
      <div class="row justify-content-between">
        <div class="col-12 col-lg-6 col-xl-5 mb-8 mb-lg-0">
          <div class="text-center px-6 py-8 rounded-2 bg-white border">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M28 23.02H32.84C33.1032 23.0215 33.3641 22.9711 33.6078 22.8715C33.8515 22.772 34.0731 22.6254 34.26 22.44L43.42 13.28C43.6075 13.0941 43.7562 12.8729 43.8578 12.6291C43.9593 12.3854 44.0116 12.124 44.0116 11.86C44.0116 11.596 43.9593 11.3346 43.8578 11.0908C43.7562 10.8471 43.6075 10.6259 43.42 10.44L38.58 5.59999C38.3941 5.41253 38.1729 5.26374 37.9292 5.16221C37.6854 5.06067 37.424 5.00839 37.16 5.00839C36.896 5.00839 36.6346 5.06067 36.3908 5.16221C36.1471 5.26374 35.9259 5.41253 35.74 5.59999L26.58 14.76C26.2145 15.1433 26.0074 15.6505 26 16.18V21.02C26 21.5504 26.2107 22.0591 26.5858 22.4342C26.9609 22.8093 27.4696 23.02 28 23.02ZM30 17.02L37.16 9.85999L39.16 11.86L32 19.02H30V17.02ZM42 21.02C41.4696 21.02 40.9609 21.2307 40.5858 21.6058C40.2107 21.9808 40 22.4896 40 23.02V37.02C40 37.5504 39.7893 38.0591 39.4142 38.4342C39.0391 38.8093 38.5304 39.02 38 39.02H10C9.46957 39.02 8.96086 38.8093 8.58579 38.4342C8.21071 38.0591 8 37.5504 8 37.02V17.8L19.76 29.58C20.3181 30.1454 20.983 30.5943 21.716 30.9007C22.449 31.2071 23.2355 31.3649 24.03 31.3649C24.8245 31.3649 25.611 31.2071 26.344 30.9007C27.077 30.5943 27.7419 30.1454 28.3 29.58C28.6665 29.2061 28.8717 28.7035 28.8717 28.18C28.8717 27.6565 28.6665 27.1538 28.3 26.78C28.1137 26.5895 27.8913 26.4381 27.6457 26.3348C27.4002 26.2315 27.1364 26.1782 26.87 26.1782C26.6036 26.1782 26.3398 26.2315 26.0943 26.3348C25.8487 26.4381 25.6263 26.5895 25.44 26.78C25.0661 27.1464 24.5635 27.3517 24.04 27.3517C23.5165 27.3517 23.0139 27.1464 22.64 26.78L10.82 14.98H20C20.5304 14.98 21.0391 14.7693 21.4142 14.3942C21.7893 14.0191 22 13.5104 22 12.98C22 12.4496 21.7893 11.9408 21.4142 11.5658C21.0391 11.1907 20.5304 10.98 20 10.98H10C8.4087 10.98 6.88258 11.6121 5.75736 12.7373C4.63214 13.8626 4 15.3887 4 16.98V36.98C4 38.5713 4.63214 40.0974 5.75736 41.2226C6.88258 42.3478 8.4087 42.98 10 42.98H38C39.5913 42.98 41.1174 42.3478 42.2426 41.2226C43.3679 40.0974 44 38.5713 44 36.98V22.98C44 22.4496 43.7893 21.9408 43.4142 21.5658C43.0391 21.1907 42.5304 20.98 42 20.98V21.02Z" fill="#FF5621"></path>
            </svg>
            <h5 class="fs-6 mt-3 mb-3">Contact Us</h5>
            <p class="text-muted mb-3">Contact us to seek help from us, we will help you as soon as possible</p>
            <span class="d-block fs-9 text-primary mb-8">+08 128 903427</span>
            <a class="btn btn-primary rounded-pill" href="#">
              <span class="me-1">Contact</span>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.83 11.29L10.59 7.05C10.497 6.95627 10.3864 6.88188 10.2646 6.83111C10.1427 6.78034 10.012 6.7542 9.88 6.7542C9.74799 6.7542 9.61729 6.78034 9.49543 6.83111C9.37357 6.88188 9.26297 6.95627 9.17 7.05C8.98375 7.23736 8.87921 7.49082 8.87921 7.755C8.87921 8.01919 8.98375 8.27264 9.17 8.46L12.71 12L9.17 15.54C8.98375 15.7274 8.87921 15.9808 8.87921 16.245C8.87921 16.5092 8.98375 16.7626 9.17 16.95C9.26344 17.0427 9.37426 17.116 9.4961 17.1658C9.61794 17.2155 9.7484 17.2408 9.88 17.24C10.0116 17.2408 10.1421 17.2155 10.2639 17.1658C10.3857 17.116 10.4966 17.0427 10.59 16.95L14.83 12.71C14.9237 12.617 14.9981 12.5064 15.0489 12.3846C15.0997 12.2627 15.1258 12.132 15.1258 12C15.1258 11.868 15.0997 11.7373 15.0489 11.6154C14.9981 11.4936 14.9237 11.383 14.83 11.29Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-5">
          <div class="text-center px-6 py-8 rounded-2 bg-white border">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M40 26.36V22C40 17.7565 38.3143 13.6869 35.3137 10.6863C32.3131 7.68571 28.2435 6 24 6C19.7565 6 15.6869 7.68571 12.6863 10.6863C9.68571 13.6869 8 17.7565 8 22V26.36C6.8329 26.7726 5.822 27.5361 5.10588 28.5459C4.38976 29.5556 4.00348 30.7621 4 32V36C4 37.5913 4.63214 39.1174 5.75736 40.2426C6.88258 41.3679 8.4087 42 10 42H16C16.5304 42 17.0391 41.7893 17.4142 41.4142C17.7893 41.0391 18 40.5304 18 40V28C18 27.4696 17.7893 26.9609 17.4142 26.5858C17.0391 26.2107 16.5304 26 16 26H12V22C12 18.8174 13.2643 15.7652 15.5147 13.5147C17.7652 11.2643 20.8174 10 24 10C27.1826 10 30.2348 11.2643 32.4853 13.5147C34.7357 15.7652 36 18.8174 36 22V26H32C31.4696 26 30.9609 26.2107 30.5858 26.5858C30.2107 26.9609 30 27.4696 30 28V40C30 40.5304 30.2107 41.0391 30.5858 41.4142C30.9609 41.7893 31.4696 42 32 42H38C39.5913 42 41.1174 41.3679 42.2426 40.2426C43.3679 39.1174 44 37.5913 44 36V32C43.9965 30.7621 43.6102 29.5556 42.8941 28.5459C42.178 27.5361 41.1671 26.7726 40 26.36ZM14 30V38H10C9.46957 38 8.96086 37.7893 8.58579 37.4142C8.21071 37.0391 8 36.5304 8 36V32C8 31.4696 8.21071 30.9609 8.58579 30.5858C8.96086 30.2107 9.46957 30 10 30H14ZM40 36C40 36.5304 39.7893 37.0391 39.4142 37.4142C39.0391 37.7893 38.5304 38 38 38H34V30H38C38.5304 30 39.0391 30.2107 39.4142 30.5858C39.7893 30.9609 40 31.4696 40 32V36Z" fill="#FF5621"></path>
            </svg>
            <h5 class="fs-6 mt-3 mb-3">Customer Service</h5>
            <p class="text-muted mb-3">Contact us to seek help from us, we will help you as soon as possible</p>
            <span class="d-block fs-9 text-primary mb-8">hello@yourdomain.com</span>
            <a class="btn btn-primary rounded-pill" href="#">
              <span class="me-2">Call Now</span>
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.94 13C19.72 13 19.49 12.93 19.27 12.88C18.8245 12.7818 18.3867 12.6515 17.96 12.49C17.4961 12.3212 16.9861 12.33 16.5283 12.5146C16.0705 12.6992 15.6971 13.0466 15.48 13.49L15.26 13.94C14.286 13.3982 13.391 12.7252 12.6 11.94C11.8148 11.149 11.1418 10.254 10.6 9.27999L11.02 8.99999C11.4634 8.78291 11.8108 8.40952 11.9954 7.95168C12.18 7.49384 12.1888 6.9839 12.02 6.51999C11.8612 6.09241 11.7309 5.65479 11.63 5.20999C11.58 4.98999 11.54 4.75999 11.51 4.52999C11.3886 3.82561 11.0196 3.18773 10.4696 2.73123C9.91961 2.27473 9.22469 2.0296 8.50999 2.03999H5.50999C5.07903 2.03594 4.65224 2.1248 4.2587 2.30052C3.86516 2.47624 3.5141 2.73469 3.22942 3.05827C2.94474 3.38186 2.73313 3.76298 2.60898 4.1757C2.48484 4.58842 2.45107 5.02305 2.50999 5.44999C3.04273 9.63937 4.95602 13.5319 7.94765 16.5126C10.9393 19.4934 14.8387 21.3925 19.03 21.91H19.41C20.1474 21.9111 20.8594 21.6405 21.41 21.15C21.7264 20.867 21.9791 20.5202 22.1515 20.1323C22.3238 19.7444 22.412 19.3244 22.41 18.9V15.9C22.3977 15.2054 22.1448 14.5365 21.6943 14.0077C21.2439 13.4788 20.6238 13.1226 19.94 13ZM20.44 19C20.4398 19.142 20.4094 19.2823 20.3508 19.4116C20.2922 19.5409 20.2067 19.6563 20.1 19.75C19.9904 19.8498 19.86 19.9241 19.7181 19.9673C19.5763 20.0106 19.4267 20.0217 19.28 20C15.5349 19.5198 12.0562 17.8065 9.39271 15.1303C6.72919 12.4541 5.0324 8.96733 4.56999 5.21999C4.55408 5.07351 4.56803 4.92532 4.611 4.78438C4.65397 4.64344 4.72506 4.51268 4.81999 4.39999C4.9137 4.29332 5.02906 4.20783 5.15837 4.14921C5.28769 4.09058 5.42801 4.06017 5.56999 4.05999H8.56999C8.80254 4.05482 9.02962 4.13087 9.21214 4.27506C9.39466 4.41925 9.5212 4.62256 9.56999 4.84999C9.60999 5.12332 9.65999 5.39332 9.71999 5.65999C9.83551 6.18713 9.98925 6.70517 10.18 7.20999L8.77999 7.85999C8.66029 7.91491 8.55262 7.99294 8.46315 8.08959C8.37369 8.18623 8.30419 8.2996 8.25867 8.42318C8.21314 8.54677 8.19247 8.67812 8.19784 8.80971C8.20322 8.9413 8.23453 9.07054 8.28999 9.18999C9.72919 12.2727 12.2072 14.7508 15.29 16.19C15.5335 16.29 15.8065 16.29 16.05 16.19C16.1747 16.1454 16.2893 16.0764 16.3872 15.9872C16.485 15.8979 16.5642 15.7901 16.62 15.67L17.24 14.27C17.757 14.4549 18.2846 14.6085 18.82 14.73C19.0867 14.79 19.3567 14.84 19.63 14.88C19.8574 14.9288 20.0607 15.0553 20.2049 15.2378C20.3491 15.4204 20.4252 15.6474 20.42 15.88L20.44 19ZM19.5 9.99999C19.7652 9.99999 20.0196 9.89463 20.2071 9.7071C20.3946 9.51956 20.5 9.26521 20.5 8.99999V4.99999C20.5 4.73477 20.3946 4.48042 20.2071 4.29288C20.0196 4.10535 19.7652 3.99999 19.5 3.99999C19.2348 3.99999 18.9804 4.10535 18.7929 4.29288C18.6054 4.48042 18.5 4.73477 18.5 4.99999V8.99999C18.5 9.26521 18.6054 9.51956 18.7929 9.7071C18.9804 9.89463 19.2348 9.99999 19.5 9.99999ZM15.5 9.99999C15.7652 9.99999 16.0196 9.89463 16.2071 9.7071C16.3946 9.51956 16.5 9.26521 16.5 8.99999V4.99999C16.5 4.73477 16.3946 4.48042 16.2071 4.29288C16.0196 4.10535 15.7652 3.99999 15.5 3.99999C15.2348 3.99999 14.9804 4.10535 14.7929 4.29288C14.6054 4.48042 14.5 4.73477 14.5 4.99999V8.99999C14.5 9.26521 14.6054 9.51956 14.7929 9.7071C14.9804 9.89463 15.2348 9.99999 15.5 9.99999Z" fill="#FAFBFC"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-sm-24 pb-md-32 bg-info-light position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 ms-20" src="flaro-assets/images/contact/gradient.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mb-20 mx-auto text-center">
      <h2 class="mb-5" >Get connected</h2>
      <p class="fs-7 text-secondary" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="mw-md mx-auto py-12 px-8 bg-white rounded-4 text-center shadow-lg">
          <div class="d-flex mb-6 mx-auto align-items-center justify-content-center bg-primary rounded-pill" style="width: 70px; height: 70px;">
            <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 5.16663L11.5208 12.1805C12.4165 12.7776 13.5835 12.7776 14.4792 12.1805L25 5.16663M3.66667 19.8333H22.3333C23.8061 19.8333 25 18.6394 25 17.1666V3.83329C25 2.36053 23.8061 1.16663 22.3333 1.16663H3.66667C2.19391 1.16663 1 2.36053 1 3.83329V17.1666C1 18.6394 2.19391 19.8333 3.66667 19.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h6 class="fs-6" >Send Email</h6><span class="d-block" >info@mail.com</span><span >support@mail.com</span>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="mw-md mx-auto py-12 px-8 bg-white rounded-4 text-center shadow-lg">
          <div class="d-flex mb-6 mx-auto align-items-center justify-content-center bg-white border rounded-pill" style="width: 70px; height: 70px;">
            <svg width="26" height="27" viewbox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 4.16667C1 2.69391 2.19391 1.5 3.66667 1.5H8.03899C8.61289 1.5 9.12241 1.86724 9.3039 2.4117L11.301 8.40295C11.5108 9.03243 11.2258 9.72041 10.6324 10.0172L7.62268 11.522C9.09233 14.7816 11.7184 17.4077 14.978 18.8773L16.4828 15.8676C16.7796 15.2742 17.4676 14.9892 18.0971 15.199L24.0883 17.1961C24.6328 17.3776 25 17.8871 25 18.461V22.8333C25 24.3061 23.8061 25.5 22.3333 25.5H21C9.95431 25.5 1 16.5457 1 5.5V4.16667Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h6 class="fs-6" >Call Us</h6><span class="d-block" >+1 8408 412 569</span><span >+1 0393 259 222</span>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mw-md mx-auto py-12 px-8 bg-white rounded-4 text-center shadow-lg">
          <div class="d-flex mb-6 mx-auto align-items-center justify-content-center bg-white border rounded-pill" style="width: 70px; height: 70px;">
            <svg width="24" height="28" viewbox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.5431 19.7091C18.1797 21.0725 15.192 24.0602 13.4133 25.8389C12.6323 26.62 11.3693 26.6203 10.5883 25.8392C8.83934 24.0903 5.91373 21.1647 4.45818 19.7091C0.292586 15.5435 0.292586 8.78979 4.45818 4.62419C8.62377 0.458602 15.3775 0.458602 19.5431 4.62419C23.7087 8.78979 23.7087 15.5435 19.5431 19.7091Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16.0007 12.1667C16.0007 14.3758 14.2098 16.1667 12.0007 16.1667C9.79151 16.1667 8.00065 14.3758 8.00065 12.1667C8.00065 9.95753 9.79151 8.16667 12.0007 8.16667C14.2098 8.16667 16.0007 9.95753 16.0007 12.1667Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h6 class="fs-6" >Address</h6><span class="d-block" >380 St Kilda Road, Melbourne</span><span > VIC 3004, Australia</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-32 pb-28 bg-black overflow-hidden"><img class="position-absolute top-0 start-0" src="gradia-assets/elements/contact/radial3.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-6 fw-semibold text-white lh-sm mb-7" >Want to get in touch with us?</h2>
          <p class="text-secondary-light mw-md-sm mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-md ms-auto">
          <h2 class="d-inline-block fs-17 fw-semibold mb-4" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Send us a mail</h2>
          <p class="fs-15 text-white mb-16" >hello@gradia.io</p>
          <h2 class="d-inline-block fs-17 fw-semibold mb-4" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Follow us</h2>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Facebook</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Twitter</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Linkedin</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Instagram</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Pinterest</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-sm mw-xl-md d-flex flex-column align-items-start h-100">
            <span class="badge mb-6 d-inline-flex align-items-center bg-primary-light text-primary border border-warning">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1 lh-base">Contact Support</span>
            </span>
            <h3 class="font-heading mb-4">How can we help you today?</h3>
            <p class="text-light-dark mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="mw-sm mt-auto p-8 bg-secondary rounded-2">
              <p class="display-3 fw-semibold text-white mb-6">Click here to report an incident</p>
              <a class="btn btn-sm d-inline-flex flex-wrap align-items-center btn-light text-secondary bg-white border border-secondary-dark" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2595C11.0647 14.1468 11.1612 14.0141 11.2308 13.836C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9755 11.2282 12.8244C11.164 12.6704 11.0747 12.531 10.9633 12.4072L10.9457 12.3876L10.9261 12.37C10.8023 12.2586 10.6629 12.1693 10.5089 12.1051C10.1859 11.9705 9.81406 11.9705 9.49099 12.1051C9.33705 12.1693 9.19764 12.2586 9.07381 12.37L9.05425 12.3876L9.03665 12.4072C8.9252 12.531 8.8359 12.6704 8.77175 12.8244C8.70878 12.9755 8.66663 13.1492 8.66663 13.3334C8.66663 13.515 8.70762 13.6864 8.76915 13.836C8.83871 14.0141 8.93524 14.1468 9.03665 14.2595L9.05425 14.2791L9.07381 14.2967C9.19763 14.4081 9.33704 14.4974 9.49099 14.5616C9.64213 14.6245 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6245 10.5089 14.5616C10.6629 14.4974 10.8023 14.4081 10.9261 14.2967ZM2.16663 10C2.16663 5.6845 5.68443 2.16669 9.99996 2.16669C14.3155 2.16669 17.8333 5.6845 17.8333 10C17.8333 14.3155 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3155 2.16663 10ZM9.99996 5.54169C9.38215 5.54169 8.87496 6.04888 8.87496 6.66669V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66669C11.125 6.04888 10.6178 5.54169 9.99996 5.54169Z" fill="#530031" stroke="#530031"></path>
                </svg>
                <span class="ms-2">Report</span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-7 col-xl-6">
          <div class="p-8 border border-light rounded-3">
            <form action="">
              <div class="row">
                <div class="col-12 col-lg-6 mb-4">
                  <label class="form-label" for="">First name</label>
                  <input class="form-control" type="text" placeholder="First name" aria-label="">
                </div>
                <div class="col-12 col-lg-6 mb-4">
                  <label class="form-label" for="">Last name</label>
                  <input class="form-control" type="text" placeholder="Last name" aria-label="">
                </div>
                <div class="col-12 col-lg-6 mb-4">
                  <label class="form-label" for="">Email</label>
                  <input class="form-control" type="text" placeholder="john@email.com" aria-label="">
                </div>
                <div class="col-12 col-lg-6 mb-4">
                  <label class="form-label" for="">Phone number</label>
                  <div class="input-group mb-3">
                    <span class="input-group-text pe-1 bg-transparent" id="">
                      <select class="border-0 bg-transparent" style="outline: none;" aria-label="">
                        <option selected="">US</option>
                        <option value="1">EU</option>
                        <option value="2">GER</option>
                      </select>
                    </span>
                    <input class="form-control" type="text" placeholder="+1 (555) 000-0000" aria-label="">
                  </div>
                </div>
                <div class="col-12 mb-8">
                  <label class="form-label" for="">Message</label>
                  <textarea class="form-control rounded-2" style="resize: none;" id="" rows="8" placeholder="Enter your message"></textarea>
                </div>
                <div class="col-12">
                  <button class="btn mb-8 py-4 btn-primary border-primary-dark w-100" type="submit">Submit</button>
                  <p class="small text-light-dark mb-0">
                    <span>We process your information in accordance with our</span>
                    <a class="p-0 fw-semibold" href="#">Privacy Policy</a>
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-md mx-auto mx-lg-0">
          <div class="position-relative d-flex align-items-center justify-content-center rounded-3 overflow-hidden mb-8" style="width: 80px; height: 80px;">
            <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/gradient.png" alt="">
            <span class="position-relative">
              <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.2077 7.19551C17.9184 4.26816 22.0816 4.26816 22.7923 7.19552C23.2514 9.08655 25.4179 9.98396 27.0797 8.97142C29.6522 7.40398 32.596 10.3478 31.0286 12.9203C30.016 14.5821 30.9135 16.7486 32.8045 17.2077C35.7318 17.9184 35.7318 22.0816 32.8045 22.7923C30.9135 23.2514 30.016 25.4179 31.0286 27.0797C32.596 29.6522 29.6522 32.596 27.0797 31.0286C25.4179 30.016 23.2514 30.9135 22.7923 32.8045C22.0816 35.7318 17.9184 35.7318 17.2077 32.8045C16.7486 30.9135 14.5821 30.016 12.9203 31.0286C10.3478 32.596 7.40398 29.6522 8.97142 27.0797C9.98396 25.4179 9.08655 23.2514 7.19552 22.7923C4.26816 22.0816 4.26816 17.9184 7.19551 17.2077C9.08655 16.7486 9.98396 14.5821 8.97142 12.9203C7.40398 10.3478 10.3478 7.40398 12.9203 8.97141C14.5821 9.98396 16.7486 9.08655 17.2077 7.19551Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M25 20C25 22.7614 22.7614 25 20 25C17.2386 25 15 22.7614 15 20C15 17.2386 17.2386 15 20 15C22.7614 15 25 17.2386 25 20Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </div>
          <p class="fs-4 fw-semibold mb-6">&ldquo;Basko is a total game-changer! Streamlined workflow &amp; productivity. Highly recommend!&rdquo;</p>
          <div>
            <span class="d-block fw-semibold">Annabelle Porter</span>
            <span class="d-block text-secondary-dark">Co-Founder, Marin-Jones Inc.</span>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="mw-md mw-lg-lg mx-auto me-lg-0">
          <form action="">
            <div class="row">
              <div class="col-12 col-sm-6 mb-6">
                <input class="form-control" type="text" placeholder="First Name">
              </div>
              <div class="col-12 col-sm-6 mb-6">
                <input class="form-control" type="text" placeholder="Last Name">
              </div>
              <div class="col-12 col-sm-6 mb-6">
                <input class="form-control" type="email" placeholder="Email Address">
              </div>
              <div class="col-12 col-sm-6 mb-6">
                <input class="form-control" type="text" placeholder="Phone Number">
              </div>
              <div class="col-12 mb-6">
                <input class="form-control" type="text" placeholder="Company (Optional)">
              </div>
              <div class="col-12">
                <button class="btn btn-primary mb-4 w-100">Try 14 Days Free Trial</button>
                <p class="mb-0 text-secondary-dark">* We never share user details with third parties, period.</p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-16 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-8" style="letter-spacing: -0.1rem;">Work with Nightsable Team Exchange as a creative partner, we`ll reach out to you soon!</h2><span class="text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</span>
    </div>
    <div class="mw-md mw-lg-4xl mx-auto">
      <form action="">
        <div class="row mb-14">
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="First Name">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="Last Name">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="email" placeholder="E-mail">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="Company">
          </div>
          <div class="col-12 col-lg-6">
            <select class="form-select bg-transparent" name="" id="">
              <option value="1">Location</option>
              <option value="2">USA</option>
              <option value="3">Germany</option>
            </select>
          </div>
        </div>
        <div class="text-center">
          <button class="btn btn-primary mb-6 w-100 mw-xs fw-medium" type="submit">Sign up</button>
          <p class="mw-sm mx-auto mb-0"><span class="text-secondary-light">Your information will be used accordane with our</span><a class="btn ms-1 p-0 text-light text-decoration-underline" href="#"> Privacy Policy.</a><span class="text-secondary-light">You may opf out at any time</span></p>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="pt-20">
  <div class="container mb-20">
    <div class="row justify-content-between">
      <div class="col-12 col-lg-6 mb-12 mb-lg-0">
        <div class="max-w-lg">
          <h2>Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <h3 class="mb-4 h4">Address</h3>
        <p class="mb-10 mb-lg-8 text-muted">1686  Geraldine Lane New York, NY 10013</p>
        <h3 class="mb-4 h4">Contacts</h3>
        <p class="text-muted">hello@wireframes.org</p>
      </div>
    </div>
  </div>
  <div class="position-relative"><img class="position-relative w-100" style="height:448px; object-fit: cover;" src="zeus-assets/images/map.png" alt=""/></div>
</section>

<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" >support@shuffle.dev</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>

<section class="py-24 pb-md-64 pt-md-40 bg-light position-relative">
  <div class="d-none d-lg-block position-absolute top-50 translate-middle-y end-0 col-lg-7 col-xl-6 p-20"><img class="img-fluid" style="object-fit: contain;" src="wrexa-assets/images/message-photo-writing-women.png" alt=""/></div>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 col-xl-7">
        <div class="mb-14 pb-14 pb-md-20 border-bottom">
          <h2 class="display-2 mb-3" >Contact</h2>
          <h3 class="display-5 mb-10" >Have any question? Text me!</h3>
          <p class="lh-lg mb-0" >Mon - Fr 8:00 - 20:00 CET</p>
          <p class="lh-lg mb-16" >Hotline +44 223 448 0171</p>
          <div class="d-sm-flex mb-n4"><a class="d-flex align-items-center text-decoration-none text-dark me-sm-14 mb-4" href="#"><img class="img-fluid me-4" src="wrexa-assets/logos/brands/messenger.svg" alt=""/><span >chatshxxk</span></a><a class="d-flex align-items-center text-decoration-none text-dark mb-4" href="#"><img class="img-fluid me-4" src="wrexa-assets/logos/brands/snapchat.svg" alt=""/><span >snapshxxk</span></a></div>
        </div>
        <div class="d-flex flex-wrap align-items-center mb-n4"><a class="btn mb-4 me-5 btn-primary" href="#" >Send a message</a><a class="btn mb-4 btn-outline-dark" href="#" >Live chat</a></div><img class="d-block d-lg-none mx-auto mt-24 img-fluid" style="object-fit: contain;" src="wrexa-assets/images/message-photo-writing-women.png" alt=""/>
      </div>
    </div>
  </div>
</section>

<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-4">
        <div class="text-center">
          <svg class="mb-6 text-success" width="72" height="72" viewbox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="36" cy="36" r="36" fill="currentColor"></circle>
            <path d="M46.9467 31.76L38.6667 23.7067C37.9653 23.0398 37.0345 22.6679 36.0667 22.6679C35.0989 22.6679 34.1681 23.0398 33.4667 23.7067L25.1867 31.7067C24.8188 32.0278 24.5229 32.4231 24.3184 32.8665C24.1139 33.31 24.0054 33.7917 24 34.28V45.72C24.0141 46.6902 24.4121 47.6152 25.1068 48.2925C25.8016 48.9697 26.7365 49.344 27.7067 49.3333H44.2933C45.2635 49.344 46.1984 48.9697 46.8932 48.2925C47.5879 47.6152 47.9859 46.6902 48 45.72V34.28C47.999 33.8113 47.9054 33.3474 47.7246 32.915C47.5439 32.4825 47.2795 32.09 46.9467 31.76ZM35.2533 25.6267C35.4573 25.4402 35.7237 25.3368 36 25.3368C36.2763 25.3368 36.5427 25.4402 36.7467 25.6267L44 32.6667L36.7067 39.7067C36.5027 39.8931 36.2363 39.9965 35.96 39.9965C35.6837 39.9965 35.4173 39.8931 35.2133 39.7067L28 32.6667L35.2533 25.6267ZM45.3333 45.72C45.3162 45.9817 45.1982 46.2266 45.0043 46.4031C44.8103 46.5797 44.5555 46.6741 44.2933 46.6667H27.7067C27.4445 46.6741 27.1897 46.5797 26.9957 46.4031C26.8018 46.2266 26.6838 45.9817 26.6667 45.72V35.1333L32.0667 40.3333L29.8533 42.4667C29.605 42.7165 29.4656 43.0544 29.4656 43.4067C29.4656 43.7589 29.605 44.0969 29.8533 44.3467C29.9773 44.4767 30.1262 44.5803 30.2911 44.6513C30.4561 44.7224 30.6337 44.7593 30.8133 44.76C31.1566 44.7586 31.4862 44.6249 31.7333 44.3867L34.0933 42.12C34.6795 42.4782 35.3531 42.6677 36.04 42.6677C36.7269 42.6677 37.4005 42.4782 37.9867 42.12L40.3467 44.3867C40.5938 44.6249 40.9234 44.7586 41.2667 44.76C41.4463 44.7593 41.6239 44.7224 41.7889 44.6513C41.9538 44.5803 42.1027 44.4767 42.2267 44.3467C42.475 44.0969 42.6144 43.7589 42.6144 43.4067C42.6144 43.0544 42.475 42.7165 42.2267 42.4667L40 40.3333L45.3333 35.1333V45.72Z" fill="white"></path>
          </svg>
          <h2 class="mb-2 font-heading fs-7">Email</h2>
          <p class="mb-4 fs-9 text-secondary fw-medium">Lorem ipsum dolor sit amet</p>
          <p class="mb-0 fs-9 text-success 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="72" height="72" viewbox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="36" cy="36" r="36" fill="currentColor"></circle>
            <path d="M45.88 37.3333C45.5867 37.3333 45.28 37.24 44.9867 37.1733C44.3931 37.0406 43.8095 36.8669 43.24 36.6533C42.6215 36.4283 41.9415 36.44 41.3311 36.6861C40.7206 36.9323 40.2228 37.3955 39.9333 37.9867L39.64 38.6C38.3451 37.8656 37.1488 36.9695 36.08 35.9333C35.0438 34.8645 34.1477 33.6682 33.4133 32.3733L34.0267 32.0933C34.6178 31.8039 35.081 31.306 35.3272 30.6956C35.5733 30.0851 35.585 29.4052 35.36 28.7867C35.1483 28.212 34.9745 27.6241 34.84 27.0267C34.7733 26.7333 34.72 26.4267 34.68 26.1333C34.5181 25.1942 34.0262 24.3437 33.2928 23.735C32.5595 23.1263 31.6329 22.7995 30.68 22.8133H26.6667C26.103 22.8126 25.5455 22.931 25.0308 23.1608C24.5161 23.3906 24.0558 23.7265 23.68 24.1467C23.2964 24.5782 23.0108 25.0877 22.8428 25.6401C22.6748 26.1924 22.6283 26.7746 22.7067 27.3467C23.4315 32.8962 25.9669 38.0515 29.92 42.0133C33.8818 45.9664 39.0372 48.5019 44.5867 49.2267C44.7597 49.2399 44.9336 49.2399 45.1067 49.2267C46.0899 49.2281 47.0392 48.8674 47.7733 48.2133C48.1935 47.8376 48.5294 47.3772 48.7592 46.8625C48.989 46.3478 49.1074 45.7903 49.1067 45.2267V41.2267C49.0995 40.3054 48.7745 39.4148 48.1866 38.7055C47.5987 37.9961 46.7839 37.5114 45.88 37.3333ZM46.5333 45.3333C46.5329 45.5194 46.4935 45.7033 46.4177 45.8732C46.342 46.0432 46.2315 46.1953 46.0933 46.32C45.9472 46.4531 45.7733 46.5521 45.5842 46.6098C45.3951 46.6674 45.1956 46.6823 45 46.6533C40.0244 46.0035 35.4003 43.736 31.84 40.2C28.2766 36.6366 25.9894 31.9965 25.3333 27C25.3044 26.8045 25.3192 26.6049 25.3769 26.4158C25.4346 26.2267 25.5335 26.0528 25.6667 25.9067C25.7928 25.7669 25.9472 25.6554 26.1195 25.5795C26.2919 25.5037 26.4784 25.4652 26.6667 25.4667H30.6667C30.9749 25.4591 31.2762 25.5587 31.5193 25.7483C31.7624 25.9379 31.9323 26.2059 32 26.5067C32 26.8667 32.12 27.24 32.2 27.6C32.3541 28.2985 32.5591 28.9848 32.8133 29.6533L30.9467 30.5333C30.6258 30.6806 30.3765 30.9491 30.2533 31.28C30.12 31.6046 30.12 31.9687 30.2533 32.2933C32.1723 36.4037 35.4763 39.7077 39.5867 41.6267C39.9113 41.76 40.2754 41.76 40.6 41.6267C40.9309 41.5035 41.1994 41.2542 41.3467 40.9333L42.1867 39.0667C42.8745 39.3175 43.5783 39.5224 44.2933 39.68C44.64 39.76 45.0133 39.8267 45.3733 39.88C45.6741 39.9477 45.9421 40.1176 46.1317 40.3607C46.3214 40.6038 46.4209 40.9051 46.4133 41.2133L46.5333 45.3333ZM38.6667 22.6667C38.36 22.6667 38.04 22.6667 37.7333 22.6667C37.3797 22.6967 37.0525 22.866 36.8237 23.1373C36.5949 23.4086 36.4833 23.7597 36.5133 24.1133C36.5434 24.467 36.7127 24.7942 36.984 25.023C37.2553 25.2517 37.6064 25.3634 37.96 25.3333H38.6667C40.7884 25.3333 42.8232 26.1762 44.3235 27.6765C45.8238 29.1768 46.6667 31.2116 46.6667 33.3333C46.6667 33.5733 46.6667 33.8 46.6667 34.04C46.6371 34.3918 46.7482 34.7409 46.9757 35.0108C47.2031 35.2807 47.5283 35.4495 47.88 35.48H47.9867C48.3204 35.4814 48.6426 35.3575 48.8895 35.1328C49.1363 34.9082 49.29 34.5991 49.32 34.2667C49.32 33.96 49.32 33.64 49.32 33.3333C49.32 30.5067 48.198 27.7956 46.2005 25.7956C44.203 23.7956 41.4933 22.6702 38.6667 22.6667ZM41.3333 33.3333C41.3333 33.687 41.4738 34.0261 41.7239 34.2761C41.9739 34.5262 42.313 34.6667 42.6667 34.6667C43.0203 34.6667 43.3594 34.5262 43.6095 34.2761C43.8595 34.0261 44 33.687 44 33.3333C44 31.9189 43.4381 30.5623 42.4379 29.5621C41.4377 28.5619 40.0812 28 38.6667 28C38.313 28 37.9739 28.1405 37.7239 28.3905C37.4738 28.6406 37.3333 28.9797 37.3333 29.3333C37.3333 29.687 37.4738 30.0261 37.7239 30.2761C37.9739 30.5262 38.313 30.6667 38.6667 30.6667C39.3739 30.6667 40.0522 30.9476 40.5523 31.4477C41.0524 31.9478 41.3333 32.6261 41.3333 33.3333Z" fill="white"></path>
          </svg>
          <h2 class="mb-2 font-heading fs-7">Phone</h2>
          <p class="mb-4 fs-9 text-secondary fw-medium">Lorem ipsum dolor sit amet</p>
          <p class="mb-0 fs-9 text-success 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="72" height="72" viewbox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="36" cy="36" r="36" fill="currentColor"></circle>
            <path d="M44 25.9733C41.8783 23.8516 39.0006 22.6596 36 22.6596C32.9994 22.6596 30.1217 23.8516 28 25.9733C25.8783 28.0951 24.6863 30.9727 24.6863 33.9733C24.6863 36.9739 25.8783 39.8516 28 41.9733L35.0267 49.0133C35.1506 49.1383 35.2981 49.2375 35.4606 49.3052C35.623 49.3729 35.7973 49.4077 35.9733 49.4077C36.1493 49.4077 36.3236 49.3729 36.4861 49.3052C36.6486 49.2375 36.796 49.1383 36.92 49.0133L44 41.9067C46.1129 39.7938 47.2998 36.9281 47.2998 33.94C47.2998 30.9519 46.1129 28.0862 44 25.9733ZM42.0933 40L36 46.12L29.9067 40C28.7028 38.7951 27.8833 37.2603 27.5516 35.5897C27.2199 33.9191 27.3909 32.1877 28.0431 30.6142C28.6952 29.0408 29.7992 27.6961 31.2155 26.75C32.6318 25.8039 34.2968 25.2989 36 25.2989C37.7032 25.2989 39.3682 25.8039 40.7845 26.75C42.2008 27.6961 43.3048 29.0408 43.9569 30.6142C44.6091 32.1877 44.7801 33.9191 44.4484 35.5897C44.1167 37.2603 43.2971 38.7951 42.0933 40ZM32 29.88C30.9236 30.9597 30.3192 32.4221 30.3192 33.9467C30.3192 35.4712 30.9236 36.9336 32 38.0133C32.7997 38.8144 33.8181 39.3614 34.9275 39.5859C36.0369 39.8103 37.1879 39.7021 38.2361 39.2749C39.2842 38.8476 40.1829 38.1204 40.8193 37.1843C41.4557 36.2483 41.8015 35.1452 41.8133 34.0133C41.8193 33.2576 41.6737 32.5083 41.3852 31.8098C41.0966 31.1114 40.671 30.4778 40.1333 29.9467C39.6049 29.4061 38.9748 28.9754 38.2792 28.6793C37.5837 28.3832 36.8364 28.2276 36.0805 28.2214C35.3246 28.2152 34.5749 28.3585 33.8746 28.6432C33.1743 28.9278 32.5372 29.3482 32 29.88ZM38.2533 36.12C37.748 36.633 37.0803 36.9545 36.3642 37.0297C35.648 37.1048 34.9281 36.9288 34.3273 36.5319C33.7266 36.135 33.2824 35.5417 33.0707 34.8534C32.8589 34.1652 32.8929 33.4248 33.1666 32.7589C33.4403 32.0929 33.9369 31.5427 34.5714 31.2023C35.2059 30.8619 35.939 30.7525 36.6452 30.8928C37.3515 31.0331 37.9871 31.4143 38.4433 31.9714C38.8996 32.5284 39.1482 33.2266 39.1467 33.9467C39.1273 34.7697 38.782 35.5514 38.1867 36.12H38.2533Z" fill="white"></path>
          </svg>
          <h2 class="mb-2 font-heading fs-7">Office</h2>
          <p class="mb-4 fs-9 text-secondary fw-medium">Lorem ipsum dolor sit amet</p>
          <p class="mb-0 fs-9 text-success fw-medium">1686, Geraldine Lane</p>
          <p class="mb-0 fs-9 text-success fw-medium">New York, NY 10013</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-28 bg-white">
  <div class="container"><img class="position-absolute top-0 start-0 bottom-0 h-100 w-100" style="object-fit: cover;" src="pstls-assets/images/contacts/pink-shadows.png" alt=""/>
    <div class="position-relative row mb-8 mb-md-24">
      <div class="col-12 col-md-6 mb-6 mb-md-0">
        <h2 class="display-4 font-heading" >Contact</h2>
      </div>
      <div class="col-12 col-md-6">
        <p class="mb-0 text-muted" >Is the answer to your question missing?</p>
        <p >Get in touch with us.</p>
      </div>
    </div>
    <div class="position-relative row">
      <div class="col-12 col-md-6">
        <div class="row mb-12">
          <div class="col-12 col-md-6 mb-12">
            <p class="mb-0 text-muted" >E-mail</p><a class="text-decoration-none text-dark" href="mailto:contact@pstls.com" >contact@pstls.com</a>
          </div>
          <div class="col-12 col-md-6 mb-12">
            <p class="mb-0 text-muted" >Phone</p>
            <p class="mb-0" >+1-2020-555-109</p>
          </div>
          <div class="col-6">
            <p class="mb-2 text-muted" >Socials</p>
            <div class="d-flex"><a class="text-decoration-none" href="#"><img src="pstls-assets/images/contacts/facebook.png" alt=""/></a><a class="text-decoration-none" href="#"><img src="pstls-assets/images/contacts/twitter.png" alt=""/></a><a class="text-decoration-none" href="#"><img src="pstls-assets/images/contacts/google.png" alt=""/></a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="p-8 bg-white shadow">
          <form action="">
            <div class="row mb-6">
              <div class="col-12 col-md-6 mb-6 mb-md-0">
                <input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Name"/>
              </div>
              <div class="col-12 col-md-6">
                <input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Surname"/>
              </div>
            </div>
            <div class="row mb-6">
              <div class="col-12 col-md-6 mb-6 mb-md-0">
                <input class="form-control border-top-0 border-start-0 border-end-0" type="email" placeholder="Mail address"/>
              </div>
              <div class="col-12 col-md-6">
                <input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Phone number"/>
              </div>
            </div>
            <input class="form-control mb-6 border-top-0 border-start-0 border-end-0" type="text" placeholder="Form Topic"/>
            <textarea class="form-control mb-6 border-top-0 border-start-0 border-end-0" style="resize: none;" name="" id="" cols="30" rows="10" placeholder="Form message"></textarea>
            <button class="btn mb-6 d-flex align-items-center">
              <svg class="me-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 8.96959L9.96279 16.5497C8.97817 17.4783 7.64274 18 6.25028 18C4.85782 18 3.52239 17.4783 2.53777 16.5497C1.55315 15.6211 1 14.3616 1 13.0483C1 11.7351 1.55315 10.4756 2.53777 9.54697L10.575 1.96687C11.2314 1.34779 12.1217 1 13.05 1C13.9783 1 14.8686 1.34779 15.525 1.96687C16.1814 2.58595 16.5502 3.4256 16.5502 4.30111C16.5502 5.17662 16.1814 6.01628 15.525 6.63535L7.47904 14.2154C7.15083 14.525 6.70569 14.6989 6.24154 14.6989C5.77738 14.6989 5.33224 14.525 5.00403 14.2154C4.67583 13.9059 4.49144 13.4861 4.49144 13.0483C4.49144 12.6106 4.67583 12.1907 5.00403 11.8812L12.429 4.88674" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="fw-normal" >Attach File</span>
            </button>
            <button class="btn w-100 btn-primary" >Send Now</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-5">
        <div class="row mb-5">
          <div class="col-8">
            <span class="text-muted">Contact Us</span>
            <h2 class="fs-1 fw-bold">We will be glad to hear from you!</h2>
          </div>
        </div>
        <div class="mb-4">
          <h5 class="text-muted">Phone</h5>
          <p>+ 48 654-430-309</p>
        </div>
        <div class="mb-4">
          <h5 class="text-muted">E-mail</h5>
          <p>info@metis.com</p>
        </div>
        <div>
          <h5 class="text-muted">Address</h5>
          <p>11567 E Broadview Dr</p>
          <p>Kiowa, Colorado(CO), 80117</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <form action="#">
          <div class="d-flex mb-4">
            <span class="me-3 fw-bold">Departament:</span>
            <div class="me-3 form-check">
              <input class="form-check-input" type="radio" name="department" value="1" checked="">
              <label class="form-check-label" for="departament1">Support</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="department" value="2">
              <label class="form-check-label" for="departament2">Sales</label>
            </div>
          </div>
          <div class="mb-3">
            <input class="form-control py-2 px-3 bg-light border-0" type="text" placeholder="Subject">
          </div>
          <div class="mb-3">
            <input class="form-control py-2 px-3 bg-light border-0" type="text" placeholder="Name">
          </div>
          <div class="mb-3">
            <input class="form-control py-2 px-3 bg-light border-0" type="email" placeholder="name@example.com">
          </div>
          <div class="mb-3"><textarea class="form-control py-2 px-3 bg-light border-0" type="text" placeholder="Message..."></textarea></div>
          <div class="mb-4 input-group">
            <input class="form-control py-2 px-3 bg-light border-0" type="file" placeholder="Choose file.." name="Choose file">
            <button class="btn btn-secondary" type="button">Browse</button>
          </div>
          <div class="d-flex justify-content-between">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="terms" value="1">
              <label class="from-check-label">I agree to terms and conditions.</label>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-20 pb-lg-32">
  <div class="container mb-16 mb-lg-32">
    <div class="row align-items">
      <div class="col-12 col-lg-6 mb-6 mb-lg-0">
        <h2>Lorem ipsum dolor sit amet consectutar</h2>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-lg-md ms-lg-auto">
          <h6>Address</h6>
          <p class="text-muted mb-6">1686 Geraldine Lane New York, NY 10013</p>
          <h6>Contacts</h6>
          <p class="text-muted mb-0">hello@wireframes.org</p>
        </div>
      </div>
    </div>
  </div>
  <div class="position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 translate-middle-y" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="d-none d-md-block position-absolute top-100 start-0 translate-middle-y" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="w-100 img-fluid" style="height: 448px; object-fit: cover;" src="cronos-assets/images/maps/map.png" alt=""/></div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 col-xl-7 mb-12 mb-lg-0">
          <p class="text-dark-light mb-2">Contact us</p>
          <h1 class="font-heading mb-14" style="letter-spacing: -1.2px;">Get In Touch</h1>
          <form action="#">
            <div class="mw-xl">
              <div class="row mb-3">
                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                  <label class="d-block mb-3 fs-9 fw-medium">Your name</label>
                  <input class="form-control w-100" type="text" placeholder="John Doe">
                </div>
                <div class="col-12 col-sm-6">
                  <label class="d-block mb-3 fs-9 fw-medium">Email</label>
                  <input class="form-control w-100" type="email" placeholder="john@email.com">
                </div>
              </div>
              <label class="d-block mb-3 fs-9 fw-medium">Subject</label>
              <input class="form-control w-100 mb-3" type="text" placeholder="Add a subject">
              <label class="d-block mb-3 fs-9 fw-medium">Message</label>
              <textarea class="form-control rounded-3 w-100 mb-3" rows="5" style="resize: none;" placeholder="Write your message"></textarea>
              <button class="btn btn-dark d-inline-flex align-items-center" type="submit"><span class="me-2">Send Message</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </form>
        </div>
        <div class="col-12 col-lg-6 col-xl-5"><img class="img-fluid" style="object-fit: contain;" src="consulty-assets/contact/picture1.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="pb-12 pb-lg-24 bg-danger-dark">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-dark bg-transparent border-bottom border-white border-opacity-10">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </nav>
  <div class="container">
    <div class="mw-md mw-sm-md mw-lg-xl mx-auto mb-20 text-center">
      <h1 class="font-heading h2 mb-6">Contact Us</h1>
      <p class="fs-8 text-white text-opacity-50 mb-0">Our team is here to help you access capital and grow on your terms. Check out the resources below and reach out directly if you have any questions.</p>
    </div>
    <div class="mw-md mw-lg-lg mx-auto p-3 rounded-2 bg-white bg-opacity-10 border border-white border-opacity-25">
      <div class="py-8 px-6 px-sm-8 bg-danger-dark rounded-2">
        <form action="">
          <div class="mb-8">
            <label class="form-label fs-9" for="">Name</label>
            <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="Name">
          </div>
          <div class="mb-8">
            <label class="form-label fs-9" for="">Email</label>
            <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="Email address">
          </div>
          <div class="mb-8">
            <label class="form-label fs-9" for="">Message</label>
            <textarea class="form-control bg-white bg-opacity-10 border-white border-opacity-25 rounded-2" name="" id="" style="height: 120px; resize: none;" placeholder="Enter a message..."></textarea>
          </div><a class="btn w-100 d-inline-flex align-items-center justify-content-center btn-danger btn-shadow-danger border-2 border-white border-opacity-10" href="#">Send Message</a>
        </form>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo-dark.svg" alt=""></a><a class="navbar-close" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="pt-20 pb-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Home</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Pricing</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">About</a></li>
          <li class="nav-item"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 btn-danger-dark" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </nav>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n40 mt-n40" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0"><span class="d-block text-info mb-4">CONTACT US</span>
          <h2 class="font-heading fw-medium text-white mb-16">Get in touch!</h2>
          <form action="">
            <div class="mb-5">
              <label class="form-label text-white" for="">Name</label>
              <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="Enter your name"/>
            </div>
            <div class="mb-5">
              <label class="form-label text-white" for="">Email</label>
              <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
            </div>
            <div class="mb-5">
              <label class="form-label text-white" for="">Email</label>
              <textarea class="form-control rounded-1 bg-secondary-dark" name="" style="resize: none;" rows="5" placeholder="Enter your message"></textarea>
            </div>
            <div class="form-check mb-6">
              <input class="form-check-input" type="checkbox" value=""/>
              <label class="form-check-label ms-2 text-light-light"><span>I agree with</span><a class="d-inline-block text-info" href="#">Privacy Policy</a><span>and</span><a class="d-inline-block text-info" href="#">Terms of Conditions</a></label>
            </div>
            <button class="btn w-100 btn-primary text-black" type="submit"><span class="me-2">Submit</span>
              <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
              </svg>
            </button>\
          </form>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="position-relative mw-lg mx-auto me-lg-0 pt-12 px-12 pb-14 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/contact/bg-gradient.png" alt=""/>
          <div class="position-relative">
            <h4 class="mw-xs display-2 fw-semibold">Let&rsquo;s stay connected</h4>
            <p class="display-5 mb-36">We&rsquo;re 24/7 ready to help you at anytime</p>
            <div class="d-flex mb-12 align-items-center">
              <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-pill" style="width: 80px; height: 80px;">
                <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M25.92 17.3333C25.6267 17.3333 25.32 17.24 25.0267 17.1733C24.4326 17.0424 23.8489 16.8686 23.28 16.6533C22.6614 16.4283 21.9815 16.44 21.3711 16.6861C20.7606 16.9323 20.2628 17.3955 19.9733 17.9867L19.68 18.5867C18.3813 17.8642 17.188 16.967 16.1333 15.92C15.0864 14.8654 14.1891 13.672 13.4667 12.3733L14.0267 12C14.6178 11.7106 15.081 11.2127 15.3272 10.6023C15.5733 9.9918 15.585 9.31188 15.36 8.69333C15.1483 8.12323 14.9746 7.53973 14.84 6.94667C14.7733 6.65333 14.72 6.34667 14.68 6.04C14.5181 5.10083 14.0262 4.25032 13.2928 3.64165C12.5595 3.03298 11.6329 2.70615 10.68 2.72H6.68C6.10537 2.71461 5.53633 2.83309 5.01161 3.06737C4.48689 3.30166 4.01881 3.64626 3.63924 4.07771C3.25966 4.50916 2.97751 5.01733 2.81198 5.56762C2.64645 6.11791 2.60144 6.69741 2.68 7.26667C3.39031 12.8525 5.94137 18.0425 9.9302 22.0168C13.919 25.9912 19.1183 28.5233 24.7067 29.2133H25.2133C26.1966 29.2148 27.1459 28.854 27.88 28.2C28.3018 27.8227 28.6388 27.3602 28.8686 26.8431C29.0985 26.3259 29.216 25.7659 29.2133 25.2V21.2C29.197 20.2738 28.8597 19.3821 28.2591 18.6769C27.6585 17.9717 26.8318 17.4968 25.92 17.3333ZM26.5867 25.3333C26.5864 25.5226 26.5459 25.7097 26.4677 25.8822C26.3895 26.0546 26.2756 26.2084 26.1333 26.3333C25.9872 26.4665 25.8133 26.5655 25.6242 26.6231C25.4351 26.6808 25.2356 26.6956 25.04 26.6667C20.0465 26.0264 15.4083 23.742 11.857 20.1737C8.30559 16.6055 6.04321 11.9565 5.42666 6.96C5.40544 6.76469 5.42404 6.56711 5.48133 6.37919C5.53863 6.19127 5.63342 6.01692 5.76 5.86667C5.88494 5.72444 6.03875 5.61046 6.21117 5.53229C6.38359 5.45413 6.57068 5.41357 6.76 5.41333H10.76C11.0701 5.40644 11.3728 5.50784 11.6162 5.7001C11.8595 5.89235 12.0283 6.16343 12.0933 6.46667C12.1467 6.83111 12.2133 7.19111 12.2933 7.54667C12.4474 8.24953 12.6523 8.94024 12.9067 9.61333L11.04 10.48C10.8804 10.5532 10.7368 10.6573 10.6175 10.7861C10.4983 10.915 10.4056 11.0662 10.3449 11.2309C10.2842 11.3957 10.2566 11.5708 10.2638 11.7463C10.271 11.9218 10.3127 12.0941 10.3867 12.2533C12.3056 16.3637 15.6097 19.6677 19.72 21.5867C20.0446 21.72 20.4087 21.72 20.7333 21.5867C20.8996 21.5272 21.0524 21.4353 21.1829 21.3162C21.3134 21.1972 21.4189 21.0535 21.4933 20.8933L22.32 19.0267C23.0093 19.2732 23.7128 19.478 24.4267 19.64C24.7822 19.72 25.1422 19.7867 25.5067 19.84C25.8099 19.9051 26.081 20.0738 26.2732 20.3171C26.4655 20.5605 26.5669 20.8633 26.56 21.1733L26.5867 25.3333ZM25.3333 13.3333C25.687 13.3333 26.0261 13.1929 26.2761 12.9428C26.5262 12.6928 26.6667 12.3536 26.6667 12V6.66667C26.6667 6.31305 26.5262 5.97391 26.2761 5.72386C26.0261 5.47381 25.687 5.33333 25.3333 5.33333C24.9797 5.33333 24.6406 5.47381 24.3905 5.72386C24.1405 5.97391 24 6.31305 24 6.66667V12C24 12.3536 24.1405 12.6928 24.3905 12.9428C24.6406 13.1929 24.9797 13.3333 25.3333 13.3333ZM20 13.3333C20.3536 13.3333 20.6928 13.1929 20.9428 12.9428C21.1929 12.6928 21.3333 12.3536 21.3333 12V6.66667C21.3333 6.31305 21.1929 5.97391 20.9428 5.72386C20.6928 5.47381 20.3536 5.33333 20 5.33333C19.6464 5.33333 19.3072 5.47381 19.0572 5.72386C18.8071 5.97391 18.6667 6.31305 18.6667 6.66667V12C18.6667 12.3536 18.8071 12.6928 19.0572 12.9428C19.3072 13.1929 19.6464 13.3333 20 13.3333Z" fill="black"></path>
                </svg>
              </div>
              <div class="ms-4"><span class="fs-6 text-secondary">Phone</span><span class="d-block display-4">+1 892 3298</span></div>
            </div>
            <div class="d-flex align-items-center">
              <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-pill" style="width: 80px; height: 80px;">
                <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.6667 15.3467H21.8933C22.0688 15.3477 22.2428 15.314 22.4052 15.2477C22.5677 15.1813 22.7154 15.0836 22.84 14.96L28.9467 8.85333C29.0716 8.72938 29.1708 8.58191 29.2385 8.41943C29.3062 8.25695 29.3411 8.08267 29.3411 7.90666C29.3411 7.73064 29.3062 7.55637 29.2385 7.39389C29.1708 7.23141 29.0716 7.08394 28.9467 6.95999L25.72 3.73333C25.5961 3.60835 25.4486 3.50916 25.2861 3.44147C25.1236 3.37378 24.9494 3.33893 24.7733 3.33893C24.5973 3.33893 24.423 3.37378 24.2606 3.44147C24.0981 3.50916 23.9506 3.60835 23.8267 3.73333L17.72 9.83999C17.4764 10.0955 17.3383 10.4336 17.3333 10.7867V14.0133C17.3333 14.3669 17.4738 14.7061 17.7239 14.9561C17.9739 15.2062 18.3131 15.3467 18.6667 15.3467ZM20 11.3467L24.7733 6.57333L26.1067 7.90666L21.3333 12.68H20V11.3467ZM28 14.0133C27.6464 14.0133 27.3072 14.1538 27.0572 14.4038C26.8071 14.6539 26.6667 14.993 26.6667 15.3467V24.68C26.6667 25.0336 26.5262 25.3728 26.2761 25.6228C26.0261 25.8728 25.687 26.0133 25.3333 26.0133H6.66667C6.31305 26.0133 5.97391 25.8728 5.72386 25.6228C5.47381 25.3728 5.33334 25.0336 5.33334 24.68V11.8667L13.1733 19.72C13.5454 20.0969 13.9887 20.3962 14.4773 20.6005C14.966 20.8047 15.4904 20.9099 16.02 20.9099C16.5496 20.9099 17.074 20.8047 17.5627 20.6005C18.0514 20.3962 18.4946 20.0969 18.8667 19.72C19.111 19.4708 19.2478 19.1357 19.2478 18.7867C19.2478 18.4377 19.111 18.1026 18.8667 17.8533C18.7425 17.7263 18.5942 17.6254 18.4305 17.5565C18.2668 17.4876 18.091 17.4522 17.9133 17.4522C17.7357 17.4522 17.5599 17.4876 17.3962 17.5565C17.2325 17.6254 17.0842 17.7263 16.96 17.8533C16.7108 18.0976 16.3757 18.2345 16.0267 18.2345C15.6777 18.2345 15.3426 18.0976 15.0933 17.8533L7.21334 9.98666H13.3333C13.687 9.98666 14.0261 9.84618 14.2761 9.59614C14.5262 9.34609 14.6667 9.00695 14.6667 8.65333C14.6667 8.2997 14.5262 7.96057 14.2761 7.71052C14.0261 7.46047 13.687 7.31999 13.3333 7.31999H6.66667C5.60581 7.31999 4.58839 7.74142 3.83824 8.49157C3.0881 9.24171 2.66667 10.2591 2.66667 11.32V24.6533C2.66667 25.7142 3.0881 26.7316 3.83824 27.4818C4.58839 28.2319 5.60581 28.6533 6.66667 28.6533H25.3333C26.3942 28.6533 27.4116 28.2319 28.1618 27.4818C28.9119 26.7316 29.3333 25.7142 29.3333 24.6533V15.32C29.3333 14.9664 29.1929 14.6272 28.9428 14.3772C28.6928 14.1271 28.3536 13.9867 28 13.9867V14.0133Z" fill="black"></path>
                </svg>
              </div>
              <div class="ms-4"><span class="fs-6 text-secondary">Email</span><span class="d-block display-4">hello@yourdomain.com</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container mw-xl mw-lg-7xl">
    <div class="position-relative d-inline-block mb-14">
      <span class="position-absolute top-0 end-0 me-n7 me-md-n6 me-lg-n5">
        <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.1104 0H7.89656C3.53541 0 0 3.54358 0 7.9148V22.1614C0 26.5327 3.53541 30.0763 7.89656 30.0763H22.1104C26.4715 30.0763 30.0069 26.5327 30.0069 22.1614V7.9148C30.0069 3.54358 26.4715 0 22.1104 0Z" fill="#FEE34E"></path>
          <path d="M15.3529 7.38071C14.3388 6.36424 12.6946 6.36424 11.6805 7.38071C10.6663 8.39718 10.6663 10.0452 11.6805 11.0617L15.812 15.2028C16.8261 16.2192 18.4704 16.2192 19.4845 15.2028C20.4986 14.1863 20.4986 12.5383 19.4845 11.5218L15.3529 7.38071Z" fill="#19191B"></path>
          <path d="M13.4047 14.3978C12.3906 13.3813 10.7464 13.3813 9.73223 14.3978C8.71811 15.4143 8.71811 17.0623 9.73223 18.0788L13.8638 22.2199C14.8779 23.2363 16.5221 23.2363 17.5362 22.2199C18.5504 21.2034 18.5504 19.5554 17.5362 18.5389L13.4047 14.3978Z" fill="#19191B"></path>
        </svg>
      </span>
      <h2 class="position-relative font-heading text-white mb-0">Contact us</h2>
    </div>
    <div class="pt-2 border-top border-dark-light mb-8">
      <h5 class="font-heading fw-semibold text-white mb-0">Do you have any question?</h5>
    </div>
    <div class="px-8 px-sm-12 py-10 mb-4 bg-white rounded-5">
      <div class="row align-items-center">
        <div class="col-12 col-lg-5 mb-10 mb-lg-0">
          <h4 class="fs-3 fw-medium mb-0">Office in Chester, UK</h4>
        </div>
        <div class="col-12 col-lg-7">
          <div class="d-lg-flex w-100 align-items-center justify-content-lg-end">
            <span class="d-block lead fs-6">Anfield Rd 88, M11349, Chester, United Kingdom</span>
            <a class="btn mt-8 mt-lg-0 ms-lg-auto ms-lg-16 btn-primary" href="#">More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-4 mb-lg-0">
        <div class="h-100 px-8 px-sm-10 pt-10 pb-12 bg-white rounded-5">
          <div class="mw-md">
            <h4 class="fs-3 fw-medium mb-2">Office in Chester, UK</h4>
            <p class="lead fw-medium mb-12">Can create, connect, verify, and search across all you knowledge platforms is one centralized.</p>
            <div class="d-flex mb-6 align-items-center">
              <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 24H5C2.243 24 0 21.757 0 19V5C0 2.243 2.243 0 5 0H11C13.757 0 16 2.243 16 5V19C16 21.757 13.757 24 11 24ZM5 2C3.346 2 2 3.346 2 5V19C2 20.654 3.346 22 5 22H11C12.654 22 14 20.654 14 19V5C14 3.346 12.654 2 11 2H5ZM10 19C10 18.448 9.552 18 9 18H7C6.448 18 6 18.448 6 19C6 19.552 6.448 20 7 20H9C9.552 20 10 19.552 10 19Z" fill="#19191B"></path>
              </svg>
              <span class="ms-2 fs-6 fw-medium text-dark">+41 3372 003 00</span>
            </div>
            <div class="d-flex mb-10 align-items-center">
              <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0H5C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 17C0.00158786 18.3256 0.528882 19.5964 1.46622 20.5338C2.40356 21.4711 3.67441 21.9984 5 22H19C20.3256 21.9984 21.5964 21.4711 22.5338 20.5338C23.4711 19.5964 23.9984 18.3256 24 17V5C23.9984 3.67441 23.4711 2.40356 22.5338 1.46622C21.5964 0.528882 20.3256 0.00158786 19 0ZM5 2H19C19.5988 2.00118 20.1835 2.18151 20.679 2.5178C21.1744 2.85409 21.5579 3.33095 21.78 3.887L14.122 11.546C13.5584 12.1073 12.7954 12.4225 12 12.4225C11.2046 12.4225 10.4416 12.1073 9.878 11.546L2.22 3.887C2.44215 3.33095 2.82561 2.85409 3.32105 2.5178C3.81648 2.18151 4.40121 2.00118 5 2ZM19 20H5C4.20435 20 3.44129 19.6839 2.87868 19.1213C2.31607 18.5587 2 17.7956 2 17V6.5L8.464 12.96C9.40263 13.8963 10.6743 14.422 12 14.422C13.3257 14.422 14.5974 13.8963 15.536 12.96L22 6.5V17C22 17.7956 21.6839 18.5587 21.1213 19.1213C20.5587 19.6839 19.7956 20 19 20Z" fill="#19191B"></path>
              </svg>
              <span class="ms-2 fs-6 fw-medium text-dark">contact@email.com</span>
            </div>
            <div class="d-flex mb-16 align-items-center">
              <a class="btn p-0 me-3 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.59391 18.8946V12.6047H6.30815V10.002H8.59391V8.01827C8.59391 5.76115 9.93802 4.51549 11.9934 4.51549C12.9781 4.51549 14.0083 4.69145 14.0083 4.69145V6.9068H12.8731C11.7542 6.9068 11.4062 7.60179 11.4062 8.31323V10.002H13.902L13.5033 12.6047H11.4062V18.8946C15.7088 18.2194 19 14.4951 19 10.0019C19 5.03029 14.9706 1 10 1C5.02944 1 1 5.03029 1 10.0019C1 14.4951 4.29123 18.2194 8.59391 18.8946Z" fill="#19191B"></path>
                </svg>
              </a>
              <a class="btn p-0 me-3 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_231_5728)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.0834 5.83317C19.0834 3.11983 16.8801 0.916504 14.1667 0.916504H5.83342C3.12008 0.916504 0.916748 3.11983 0.916748 5.83317V14.1665C0.916748 16.8798 3.12008 19.0832 5.83342 19.0832H14.1667C16.8801 19.0832 19.0834 16.8798 19.0834 14.1665V5.83317ZM17.5834 5.83317V14.1665C17.5834 16.0523 16.0526 17.5832 14.1667 17.5832H5.83342C3.94758 17.5832 2.41675 16.0523 2.41675 14.1665V5.83317C2.41675 3.94733 3.94758 2.41649 5.83342 2.41649H14.1667C16.0526 2.41649 17.5834 3.94733 17.5834 5.83317ZM14.0751 9.36484C13.8126 7.59067 12.4092 6.18733 10.6351 5.92483C10.4367 5.89483 10.2367 5.88067 10.0359 5.88067C7.79591 5.88067 5.95258 7.724 5.95258 9.964C5.95258 12.204 7.79591 14.0473 10.0359 14.0473C12.2759 14.0473 14.1192 12.204 14.1192 9.964C14.1192 9.76317 14.1051 9.56317 14.0751 9.36484ZM12.5917 9.58483C12.6101 9.71066 12.6192 9.83733 12.6192 9.964C12.6192 11.3807 11.4534 12.5473 10.0359 12.5473C8.61925 12.5473 7.45258 11.3807 7.45258 9.964C7.45258 8.5465 8.61925 7.38066 10.0359 7.38066C10.1626 7.38066 10.2892 7.38983 10.4151 7.40816C11.5376 7.57483 12.4251 8.46233 12.5917 9.58483ZM14.5834 4.6665C14.9976 4.6665 15.3334 5.00233 15.3334 5.4165C15.3334 5.83067 14.9976 6.16649 14.5834 6.16649C14.1692 6.16649 13.8334 5.83067 13.8334 5.4165C13.8334 5.00233 14.1692 4.6665 14.5834 4.6665Z" fill="#19191B"></path>
                  </g>
                </svg>
              </a>
              <a class="btn p-0 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.8216 8.98736L17.9648 2H16.5092L11.1727 8.06576L6.91356 2H2L8.44212 11.1733L2 18.5H3.45554L9.08757 12.0929L13.5864 18.5H18.5L11.8216 8.98736ZM9.82739 11.2538L9.17367 10.3398L3.98044 3.07371H6.21644L10.4088 8.93987L11.0597 9.8539L16.5085 17.4786H14.2725L9.82739 11.2538Z" fill="#19191B"></path>
                </svg>
              </a>
            </div>
            <div><a class="btn me-4 btn-outline-dark" href="#">FAQs</a><a class="btn btn-outline-primary" href="#">Helpdesk</a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="h-100 px-8 px-sm-10 pt-10 pb-12 bg-white rounded-5">
          <div class="mw-md">
            <h4 class="fs-3 fw-medium mb-2">Live chat</h4>
            <p class="lead fw-medium mb-8">Chat with Jesse for expert help!</p>
            <img class="img-fluid d-block mb-8 mx-auto" src="mirga-assets/images/contact/woman.png" alt="">
            <div><a class="btn btn-outline-primary" href="#">Open chat</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-5">
  <div class="container mb-5">
    <div class="row align-items-center">
      <div class="col-12 col-lg-7 col-xl-5 mb-4 mb-lg-0">
        <h2 class="display-5 fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="col-12 col-lg-5 col-xl-5 offset-xl-2">
        <h4 class="fw-bold">Address</h4>
        <p class="text-muted">1686 Geraldine Lane New York, NY 10013</p>
        <h4 class="fw-bold">Contacts</h4>
        <p class="text-muted">hello@wireframes.org</p>
      </div>
    </div>
  </div>
  <div>
    <img class="w-100 img-fluid" src="bootstrap5-plain-assets/images/map.png" alt="">
  </div>
</section>

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-xl mx-auto mx-lg-0">
          <div class="mw-lg mb-10">
            <h1 class="mb-8" >Let&grave;s talk</h1>
            <p class="fs-6 text-secondary-light mb-0" >
              Whereby Embedded is the easiest way to embed video calls directly into
              your app, website, or anywhere else you need
              beautiful, custom video chat &ndash; that just works.
            </p>
          </div>
          <div class="row mb-20">
            <div class="col-12 col-sm-6 mb-6 mb-sm-0">
              <div class="py-6 text-center border border-light-dark rounded-5"><span class="d-block mb-2 fs-9 text-light-dark" >Call us</span><span class="fw-semibold" >+48 291 821 114</span></div>
            </div>
            <div class="col-12 col-sm-6">
              <div class="py-6 text-center border border-light-dark rounded-5"><span class="d-block mb-2 fs-9 text-light-dark" >Email us</span><span class="fw-semibold" >contact@example.com</span></div>
            </div>
          </div>
          <div class="mb-16"><span class="d-block mb-5 fs-7 fw-semibold" >Socials</span>
            <div class="d-flex flex-wrap align-items-center"><a class="d-inline-flex me-8 align-items-center" href="#">
                <svg width="17" height="13" viewbox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0828 1.7882C15.5128 2.0352 14.9238 2.2062 14.2968 2.2822C14.9428 1.9022 15.4368 1.2942 15.6648 0.553195C15.0568 0.914195 14.3918 1.1612 13.6888 1.3132C13.1188 0.705195 12.3018 0.325195 11.4088 0.325195C9.67981 0.325195 8.29281 1.7312 8.29281 3.4412C8.29281 3.6882 8.31181 3.91619 8.36881 4.1442C5.78481 4.03019 3.50481 2.7762 1.96581 0.895195C0.863813 2.8712 2.09881 4.5052 2.91581 5.0562C2.42181 5.0562 1.92781 4.9042 1.50981 4.6762C1.50981 6.2152 2.59281 7.4882 3.99881 7.7732C3.69481 7.8682 3.01081 7.9252 2.59281 7.8302C2.99181 9.0652 4.15081 9.9772 5.49981 9.9962C4.43581 10.8322 2.87781 11.4972 0.882812 11.2882C2.26981 12.1812 3.90381 12.6942 5.67081 12.6942C11.4088 12.6942 14.5248 7.9442 14.5248 3.8402C14.5248 3.7072 14.5248 3.5742 14.5058 3.4412C15.1518 2.9662 15.6838 2.4152 16.0828 1.7882Z" fill="black"></path>
                </svg><span class="ms-3 fw-medium" >Twitter</span></a><a class="d-inline-flex me-8 align-items-center" href="#">
                <svg width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.0038 4.8916C7.7351 4.8916 5.89844 6.73027 5.89844 8.99694C5.89844 11.2656 7.7371 13.1023 10.0038 13.1023C12.2724 13.1023 14.1091 11.2636 14.1091 8.99694C14.1091 6.72827 12.2704 4.8916 10.0038 4.8916ZM10.0038 11.6616C8.5311 11.6616 7.3391 10.4689 7.3391 8.99694C7.3391 7.52494 8.53177 6.33227 10.0038 6.33227C11.4758 6.33227 12.6684 7.52494 12.6684 8.99694C12.6691 10.4689 11.4764 11.6616 10.0038 11.6616Z" fill="black"></path>
                  <path d="M13.2988 1.05026C11.8268 0.981591 8.18082 0.984924 6.70749 1.05026C5.41282 1.11092 4.27082 1.42359 3.35015 2.34426C1.81148 3.88292 2.00815 5.95626 2.00815 8.99692C2.00815 12.1089 1.83482 14.1343 3.35015 15.6496C4.89482 17.1936 6.99815 16.9916 10.0028 16.9916C13.0855 16.9916 14.1495 16.9936 15.2395 16.5716C16.7215 15.9963 17.8402 14.6716 17.9495 12.2923C18.0188 10.8196 18.0148 7.17426 17.9495 5.70092C17.8175 2.89226 16.3102 1.18892 13.2988 1.05026ZM15.6288 14.6316C14.6202 15.6403 13.2208 15.5503 9.98349 15.5503C6.65015 15.5503 5.31348 15.5996 4.33815 14.6216C3.21482 13.5036 3.41815 11.7083 3.41815 8.98626C3.41815 5.30292 3.04015 2.65026 6.73682 2.46092C7.58615 2.43092 7.83615 2.42092 9.97415 2.42092L10.0042 2.44092C13.5568 2.44092 16.3442 2.06892 16.5115 5.76492C16.5495 6.60826 16.5582 6.86159 16.5582 8.99626C16.5575 12.2909 16.6202 13.6356 15.6288 14.6316Z" fill="black"></path>
                  <path d="M14.2718 5.6882C14.8017 5.6882 15.2312 5.25869 15.2312 4.72886C15.2312 4.19904 14.8017 3.76953 14.2718 3.76953C13.742 3.76953 13.3125 4.19904 13.3125 4.72886C13.3125 5.25869 13.742 5.6882 14.2718 5.6882Z" fill="black"></path>
                </svg><span class="ms-3 fw-medium" >Instagram</span></a><a class="d-inline-flex align-items-center" href="#">
                <svg width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0984 16.0993V11.3016C16.0984 8.94368 15.5908 7.14249 12.8399 7.14249C11.5136 7.14249 10.6293 7.86297 10.2691 8.55069H10.2364V7.35536H7.63281V16.0993H10.351V11.7601C10.351 10.6139 10.5639 9.51679 11.9721 9.51679C13.3639 9.51679 13.3803 10.8104 13.3803 11.8256V16.083H16.0984V16.0993Z" fill="black"></path>
                  <path d="M3.21094 7.35538H5.92911V16.0994H3.21094V7.35538Z" fill="black"></path>
                  <path d="M4.57195 2.99991C3.7041 2.99991 3 3.70401 3 4.57186C3 5.43971 3.7041 6.16019 4.57195 6.16019C5.4398 6.16019 6.14391 5.43971 6.14391 4.57186C6.14391 3.70401 5.4398 2.99991 4.57195 2.99991Z" fill="black"></path>
                </svg><span class="ms-3 fw-medium" >Linkedin</span></a></div>
          </div>
          <div><span class="d-block mb-5 fs-7 fw-semibold" >Trusted by:</span>
            <div class="d-flex flex-wrap align-items-center"><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/pinterest.svg" alt=""/><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/brex.svg" alt=""/><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/instacart.svg" alt=""/><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/general-motors.svg" alt=""/><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/openai.svg" alt=""/><img class="img-fluid mb-8 me-16" src="asitrastudio-assets/contacts/faire.svg" alt=""/><img class="img-fluid mb-8" src="asitrastudio-assets/contacts/paypal.svg" alt=""/></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="py-12 px-8 px-md-10 bg-white rounded-5 mw-xl mx-auto me-lg-0">
          <h3 class="fs-4 mb-8" >Contact Us</h3>
          <form action="">
            <input class="form-control mb-6 bg-white" type="text" placeholder="First Name*"/>
            <input class="form-control mb-6 bg-white" type="text" placeholder="Last Name*"/>
            <input class="form-control mb-6 bg-white" type="email" placeholder="E-mail"/>
            <input class="form-control mb-6 bg-white" type="text" placeholder="Phone number"/>
            <select class="form-select mb-6">
              <option selected="">What can we help you with?</option>
              <option>Marketing</option>
              <option>Selling</option>
            </select>
            <textarea class="form-control mb-8 rounded-4" placeholder="Message" style="resize: none; height: 250px;" rows="3"></textarea>
            <button class="btn btn-lg w-100 btn-dark" type="submit" >Send message</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 py-xl-32 overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;" src="fily-assets/gradients/gradient-contact.jpg" alt="">
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-16 mb-lg-0">
          <div class="mw-xl pt-lg-20">
            <h2 class="font-heading text-white mb-10">Let us know how we can help you</h2>
            <p class="mw-md mw-xl-lg fs-6 text-white fw-light">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci fermentum</p>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="bg-light-dark bg-opacity-10 pt-24 pb-28 px-8 px-sm-14 rounded-3">
            <form action="">
              <div class="row">
                <div class="col-md-6 mb-6">
                  <label class="mb-1 fs-9 fw-medium text-light-dark" for="">First name</label>
                  <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                </div>
                <div class="col-md-6 mb-6">
                  <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Last name</label>
                  <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                </div>
                <div class="col-12 mb-6">
                  <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Address email</label>
                  <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="email">
                </div>
                <div class="col-12 mb-6">
                  <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Subject</label>
                  <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                </div>
                <div class="col-12 mb-16">
                  <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Message</label>
                  <textarea class="form-control fs-8 text-white bg-transparent rounded-3 border border-secondary" name="" id="" style="height: 124px; resize: none;"></textarea>
                </div>
                <div class="col-12">
                  <button class="btn px-10 py-5 btn-primary" type="submit">Send message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>