Bootstrap 5 Footers Components

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none mb-24">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading mb-6">
              <span>Ready to get</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">started?</span>
            </h3>
            <p class="text-secondary mb-16">If there are questions you want to ask, we will answer all your question</p>
            <form action="">
              <div class="d-flex flex-column flex-sm-row gap-4">
                <input class="form-control ps-0 rounded-0 border-0 border-bottom border-light-dark bg-transparent" type="email" name="" id="" placeholder="Enter your email">
                <a class="btn btn-sm btn-primary rounded-pill" href="#">Subscribe</a>
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto">
            <h6 class="fs-5 lh-sm mb-12">Maybe your question is have been answered, check this out.</h6>
            <div>
              <a class="btn btn-link text-start d-flex justify-content-between w-100 px-0 pt-0 pb-5 mb-5 border-top-0 border-start-0 border-end-0 border-bottom border-light-dark text-decoration-none rounded-0" href="#">

<section class="pt-24 pb-8">
  <div class="container">
    <div class="row pb-20 mb-6 border-bottom">
      <div class="col-12 col-lg-7 mb-16 mb-lg-0">
        <div class="row">
          <div class="col-6 col-md-3 mb-16 mb-md-0">
            <h6 class="mb-6" >Company</h6>
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >About Us</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Careers</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Press</a></li>
              <li><a class="btn btn-link p-0 text-secondary" href="#" >Blog</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-16 mb-md-0">
            <h6 class="mb-6" >Pages</h6>
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Login</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Register</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Add list</a></li>
              <li><a class="btn btn-link p-0 text-secondary" href="#" >Contact</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3">

<section class="position-relative py-24 bg-white overflow-hidden"><img class="position-absolute bottom-0 start-0" src="gradia-assets/elements/footers/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="d-flex flex-column justify-content-between h-100">
          <div class="mb-16"><a class="d-inline-block" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a></div>
          <div>
            <h3 class="fs-18 fw-medium mb-4" >The boldest SaaS kit in the market.</h3>
            <p class="fs-19 text-muted mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Press Kit</h3></a></li>
        </ul>

<section class="py-12 pt-lg-24">
  <div class="container position-relative">
    <div class="d-none d-lg-block position-absolute top-50 start-50 translate-middle">
      <div class="d-flex align-items-center"><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Platform</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Features</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">How it works</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Resources</a><a class="btn p-0 btn-link text-dark-light" href="#">FAQs</a></div>
    </div>
    <div class="row justify-content-between">
      <div class="col-auto">
        <a class="d-inline-block" href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
      </div>
      <div class="col-auto">
        <div class="d-flex">
          <a class="btn me-3 btn-outline-light p-1 border-0 rounded" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="#A3A3A3"></path>
            </svg>
          </a>
          <a class="btn me-3 btn-outline-light p-1 border-0 rounded" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="#A3A3A3"></path>
            </svg>
          </a>
          <a class="btn btn-outline-light p-1 border-0 rounded" href="#">

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="position-relative px-8 px-md-11 py-10 mb-16 bg-white rounded-4 overflow-hidden">
      <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/gradient.png" alt="">
      <div class="position-relative row align-items-center">
        <div class="col-12 col-lg-7 mb-10 mb-lg-0">
          <h2 class="text-white mb-0">Grow your business fast with Basko Productivity Tool.</h2>
        </div>
        <div class="col-12 col-lg-5 text-lg-end"><a class="btn btn-dark" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
    <div class="row mb-n12">
      <div class="col-12 col-sm-6 col-lg-3 mb-12">
        <div>
          <span class="d-block fw-semibold text-white mb-7">Company</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="d-inline-block text-white " href="#">About</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Features</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Works</a></li>
            <li><a class="d-inline-block text-white " href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-12">

<section class="bg-white position-relative overflow-hidden">
  <div class="pb-24 bg-light-light">
    <div class="d-flex justify-content-center mb-12 mb-md-24">
      <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="111" viewBox="0 0 1440 111" fill="none">
        <path d="M0 -571H1440V31C1440 75.1828 1404.18 111 1360 111H80C35.8173 111 0 75.1828 0 31V-571Z" fill="#0E0F11"></path>
      </svg>
    </div>
    <div class="container">
      <div class="mw-md mw-md-3xl mx-auto mw-xl-none">
        <div class="row mb-24">
          <div class="col-xl-3 mb-12 mb-xl-0">
            <div class="mw-xs"><img class="img-fluid mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
              <p class="pe-10 text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-5 mb-12 mb-md-0">
            <div class="d-flex gap-24 gap-xl-10 justify-content-xl-around">
              <div>
                <h6 class="mb-6 fs-7 fw-medium text-black">About</h6>
                <ul class="list-unstyled mb-0">
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Contact</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Blog</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Our Storry</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Careers</a></li>

<section class="py-12 py-lg-20">
  <div class="container">
    <div class="row mb-8 pb-20 border-bottom">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="d-inline-block mb-3 h4 text-decoration-none" href="#"><img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px" width="auto"/></a>
        <p class="mb-6 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div><a class="d-inline-block me-4" href="#" style="width: 40px;">
            <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="#838EA4"></path>
            </svg></a><a class="d-inline-block me-4" href="#" style="width: 40px;">
            <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="#838EA4"></path>
            </svg></a><a class="d-inline-block me-4" href="#" style="width: 40px;">
            <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="#838EA4" stroke="#838EA4"></path>
            </svg></a></div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="row">
          <div class="col-6 col-lg-3 mb-4 mb-lg-0">
            <h3 class="mb-6 h6">Company</h3>
            <ul class="list-unstyled">
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">About Us</a></li>
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">Careers</a></li>
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">Press</a></li>

<section class="bg-secondary-dark py-24 py-md-40">
  <div class="container">
    <div class="row align-items-center pb-24 mb-14 border-bottom border-secondary">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0"><span class="h6 text-primary" >We&apos;re Zospace</span>
        <h2 class="mw-md h3 text-white mt-10 mb-12" >Thank you for your time</h2>
        <p class="text-secondary-light mb-16"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        <div><a class="btn btn-primary me-4" href="#" >Active demo</a><a class="btn btn-outline-light" href="#" >Contact</a></div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="row">
          <div class="col-6 col-md-4 mb-8 mb-lg-0">
            <ul class="list-unstyled">
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Hello</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Story</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Pricing</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Applictaions</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Stats</a></li>
              <li><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Blog</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-4 mb-8 mb-lg-0">
            <ul class="list-unstyled">
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Newsletter</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Features</a></li>

<section class="pb-10 bg-dark">
  <div class="bg-white py-3 mx-12 mb-24 mb-md-40"></div>
  <div class="container mb-16">
    <div class="row align-items-center mb-24">
      <div class="col-12 col-lg-8 mb-16 mb-lg-0">
        <h3 class="display-5 text-white mb-4" >Have any question? </h3>
        <h2 class="display-3 display-3 text-white" >Follow us and our story</h2>
      </div>
      <div class="col-12 col-lg-4 text-lg-end"><a class="btn btn-outline-light" href="#" >Get Started</a></div>
    </div>
    <div class="row mw-lg-4xl mw-xl-5xl justify-content-between mb-24">
      <div class="col-6 col-md-4 col-lg-auto mb-8">
        <h4 class="h6 text-secondary-light mb-6" >About</h4>
        <ul class="list-unstyled">
          <li class="mb-4"><a class="d-inline-block text-decoration-none text-secondary" href="#" >Story</a></li>
          <li class="mb-4"><a class="d-inline-block text-decoration-none text-secondary" href="#" >Creative Team</a></li>
          <li class="mb-4"><a class="d-inline-block text-decoration-none text-secondary" href="#" >Founders</a></li>
          <li class="mb-4"><a class="d-inline-block text-decoration-none text-secondary" href="#" >Why Us</a></li>
          <li class="mb-4"><a class="d-inline-block text-decoration-none text-secondary" href="#" >Our Mission</a></li>
          <li><a class="d-inline-block text-decoration-none text-secondary" href="#" >Idea</a></li>
        </ul>
      </div>
      <div class="col-6 col-md-4 col-lg-auto mb-8">
        <h4 class="h6 text-secondary-light mb-6" >Product</h4>

<section class="position-relative pt-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="d-flex justify-content-center mb-2">
      <a href="#">
        <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
      </a>
    </div>
    <ul class="nav justify-content-center mb-5">
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Product</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Pricing</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Resources</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Careers</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Privacy</a></li>
    </ul>
  </div>
  <div class="position-relative container" style="z-index: 1;">
    <p class="mb-0 pt-10 pb-20 fs-9 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
  </div>
</section>

<section class="bg-light overflow-hidden">
  <div class="row">
    <div class="col-12 col-md-5 col-lg-3 py-20 px-6 bg-white">
      <div class="mw-xs mx-auto"><a class="d-inline-block mb-12" href="#"  ><img class="img-fluid" src="yofte-assets/logos/yofte-logo.svg" alt=""/></a>
        <div class="mb-12 font-semibold">
          <p  >Our Store</p>
          <p  >N&oslash;rremark 51, 8700 Horsens</p>
          <p  >Denmark</p>
        </div>
        <div class="d-flex mb-16 mb-md-40"><a class="d-inline-block me-2" href="#"><img class="img-fluid" src="yofte-assets/buttons/facebook-circle.svg" alt=""/></a><a class="d-inline-block me-2" href="#"><img class="img-fluid" src="yofte-assets/buttons/instagram-circle.svg" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" src="yofte-assets/buttons/twitter-circle.svg" alt=""/></a></div>
        <div class="row">
          <div class="col-4"><img class="img-fluid" src="yofte-assets/brands/visa.svg" alt=""/></div>
          <div class="col-4"><img class="img-fluid" src="yofte-assets/brands/paypal.svg" alt=""/></div>
          <div class="col-4"><img class="img-fluid" src="yofte-assets/brands/mastercard.svg" alt=""/></div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-7 col-lg-9 py-20 px-6 ps-lg-40">
      <ul class="row mb-16 list-unstyled">
        <li class="col-6 col-lg-4 col-xl-auto mb-3"><a class="btn btn-light-light py-2 text-center rounded-pill" href="#" >Category</a></li>
        <li class="col-6 col-lg-4 col-xl-auto mb-3"><a class="btn btn-light-light py-2 text-center rounded-pill" href="#" >Collection</a></li>
        <li class="col-6 col-lg-4 col-xl-auto mb-3"><a class="btn btn-light-light py-2 text-center rounded-pill" href="#" >Story</a></li>
        <li class="col-6 col-lg-4 col-xl-auto mb-3"><a class="btn btn-light-light py-2 text-center rounded-pill" href="#" >Brand</a></li>
        <li class="col-6 col-lg-4 col-xl-auto mb-3"><a class="btn btn-light-light py-2 text-center rounded-pill" href="#" >Partners</a></li>

<section class="py-20 py-md-24 bg-white">
  <div class="container">
    <div class="row align-items-start mb-12">
      <div class="col-12 col-sm-3 col-lg-3 col-xl-4 mb-12 mb-sm-0"><a href="#"  ><img class="img-fluid" src="pstls-assets/logos/pstls-logo.svg" alt="" width="87"/></a></div>
      
      <div class="col-12 col-sm-9 col-lg-5 col-xl-4 mb-12 mb-lg-0">
        <ul class="list-unstyled d-sm-flex justify-content-sm-end justify-content-lg-center mb-0">
          <li class="mb-6 mb-sm-0"><a class="text-decoration-none link-dark fw-bold" href="#" style="font-size: 14px;" >Hello</a></li>
          <li class="mb-6 mb-sm-0 ms-sm-12"><a class="text-decoration-none link-dark fw-bold" href="#" style="font-size: 14px;" >Story</a></li>
          <li class="mb-6 mb-sm-0 ms-sm-12"><a class="text-decoration-none link-dark fw-bold" href="#" style="font-size: 14px;" >About us</a></li>
          <li class="ms-sm-12"><a class="text-decoration-none link-dark fw-bold" href="#" style="font-size: 14px;" >Services</a></li>
        </ul>
      </div>
      <div class="col-12 col-sm-12 col-lg-4">
        <div class="d-flex flex-row justify-content-sm-center justify-content-lg-end flex-wrap"><a class="text-decoration-none" href="#"><img class="img-fluid" src="pstls-assets/logos/twitter.svg" alt=""/></a><a class="mx-7 text-decoration-none" href="#"><img class="img-fluid" src="pstls-assets/logos/google.svg" alt=""/></a><a class="text-decoration-none" href="#"><img class="img-fluid" src="pstls-assets/logos/facebook.svg" alt=""/></a></div>
      </div>
    </div>
    
    <p class="mb-0 text-muted small lh-sm d-sm-flex justify-content-sm-center" >&copy; Pstls. 2021 All right reserved. </p>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-2 mb-4 mb-lg-0 text-center text-lg-left">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="col-12 col-lg-4 mb-5 mb-lg-0 text-center text-lg-left">
        <p class="text-muted fs-6 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
      </div>
      <div class="col-12 col-lg-3 mb-4 mb-lg-0 text-center text-lg-left">
        <h6 class="fw-bold">Office</h6>
        <p class="fs-6 text-muted mb-0">359 Hidden Valley Road, NY</p>
      </div>
      <div class="col-12 col-lg-3 text-center text-lg-left">
        <h6 class="fw-bold">Contacts</h6>
        <p class="fs-6 text-muted mb-0">hello@gmail.com</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 text-center text-lg-left order-1 order-lg-0">
        <p class="small text-muted">&copy; 2021. All rights reserved.</p>
      </div>

<section class="py-20 bg-dark">
  <div class="container">
    <div class="row border-bottom">
      <div class="col-12 col-lg-3 mb-10 mb-lg-0"><a class="navbar-brand text-white" href="#"><img src="cronos-assets/logos/cronos-logo-white.svg" alt="" width="132"/></a></div>
      <div class="col-12 col-lg-9 mb-12">
        <div class="row justify-content-between">
          <div class="col-12 col-sm-6 col-lg-auto mb-8 mb-lg-0">
            <p class="text-white fw-bold mb-6">Product</p>
            <ul class="list-unstyled">
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Careers</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">About Us</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Insights</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">PCI Compliance</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Interfratlons</a></li>
              <li><a class="small text-muted text-decoration-none" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="col-12 col-sm-6 col-lg-auto mb-8 mb-lg-0">
            <p class="text-white fw-bold mb-6">For Developers</p>
            <ul class="list-unstyled">
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Docs</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Knowledge Base</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">System Status</a></li>
              <li><a class="small text-muted text-decoration-none" href="#">Security</a></li>

<section class="py-12 py-lg-24 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="consulty-assets/footer/shapes1.svg" alt="">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-2 mb-8 mb-lg-0"><img class="img-fluid" src="consulty-assets/logos/consulty-logo2.svg" alt=""></div>
        <div class="col-12 col-lg-7 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap justify-content-lg-center gap-12">
            <div>
              <p class="fw-medium mb-6">Platform</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-dark-light" href="#">Services</a></li>
                <li><a class="btn-link text-dark-light" href="#">Book A Call</a></li>
                <li><a class="btn-link text-dark-light" href="#">Pricing</a></li>
                <li><a class="btn-link text-dark-light" href="#">Products</a></li>
              </ul>
            </div>
            <div>
              <p class="fw-medium mb-6">Company</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-dark-light" href="#">About</a></li>
                <li><a class="btn-link text-dark-light" href="#">Our Mission</a></li>
                <li>
                  <div class="d-flex align-items-center flex-wrap gap-2"><a class="btn-link text-dark-light" href="#">Careers</a><span class="d-inline-block bg-warning-light rounded-pill px-2 py-1 fs-10 fw-semibold">WE ARE HIRING</span></div>
                </li>

<section class="position-relative pt-12 pt-lg-24 bg-gradient-danger-top">
  <div class="container position-relative">
    <div class="row mb-20 mb-lg-32">
      <div class="col-lg-6 mb-8 mb-lg-0">
        <div class="d-flex flex-wrap align-items-center gap-4"><a class="btn btn-link p-0 text-white" href="#">Features</a><a class="btn btn-link p-0 text-white" href="#">How it works</a><a class="btn btn-link p-0 text-white" href="#">Pricing</a><a class="btn btn-link p-0 text-white" href="#">About</a><a class="btn btn-link p-0 text-white" href="#">Blog</a><a class="btn btn-link p-0 text-white" href="#">FAQs</a><a class="btn btn-link p-0 text-white" href="#">Contact</a></div>
      </div>
      <div class="col-lg-6">
        <div class="d-flex align-items-center justify-content-lg-end gap-6"><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.205 2.25H21.513L14.286 10.51L22.788 21.75H16.13L10.916 14.933L4.94997 21.75H1.63997L9.36997 12.915L1.21497 2.25H8.03997L12.753 8.481L18.205 2.25ZM17.044 19.77H18.877L7.04497 4.126H5.07797L17.044 19.77Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.7778 2C20.3671 2 20.9324 2.23413 21.3491 2.65087C21.7659 3.06762 22 3.63285 22 4.22222V19.7778C22 20.3671 21.7659 20.9324 21.3491 21.3491C20.9324 21.7659 20.3671 22 19.7778 22H4.22222C3.63285 22 3.06762 21.7659 2.65087 21.3491C2.23413 20.9324 2 20.3671 2 19.7778V4.22222C2 3.63285 2.23413 3.06762 2.65087 2.65087C3.06762 2.23413 3.63285 2 4.22222 2H19.7778ZM19.2222 19.2222V13.3333C19.2222 12.3727 18.8406 11.4513 18.1613 10.772C17.482 10.0927 16.5607 9.71111 15.6 9.71111C14.6556 9.71111 13.5556 10.2889 13.0222 11.1556V9.92222H9.92222V19.2222H13.0222V13.7444C13.0222 12.8889 13.7111 12.1889 14.5667 12.1889C14.9792 12.1889 15.3749 12.3528 15.6666 12.6445C15.9583 12.9362 16.1222 13.3319 16.1222 13.7444V19.2222H19.2222ZM6.31111 8.17778C6.80618 8.17778 7.28098 7.98111 7.63104 7.63104C7.98111 7.28098 8.17778 6.80618 8.17778 6.31111C8.17778 5.27778 7.34444 4.43333 6.31111 4.43333C5.81309 4.43333 5.33547 4.63117 4.98332 4.98332C4.63117 5.33547 4.43333 5.81309 4.43333 6.31111C4.43333 7.34444 5.27778 8.17778 6.31111 8.17778ZM7.85556 19.2222V9.92222H4.77778V19.2222H7.85556Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 12.0251C22 6.49123 17.52 2 12 2C6.48 2 2 6.49123 2 12.0251C2 16.8772 5.44 20.9173 10 21.8496V15.0326H8V12.0251H10V9.5188C10 7.58396 11.57 6.01003 13.5 6.01003H16V9.01754H14C13.45 9.01754 13 9.46867 13 10.0201V12.0251H16V15.0326H13V22C18.05 21.4987 22 17.2281 22 12.0251Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div><img class="img-fluid d-block mx-auto" src="vista-assets/images/footer/bg-text-pink.png" alt="">
  </div><img class="position-absolute bottom-0 start-0 w-100" src="vista-assets/images/footer/background-pink.png" alt="">
</section>

<section class="pt-12 pt-lg-24 pb-10 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n80" src="casper-assets/blur/blur-center-top-violet.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 mt-64 mt-md-20 me-xl-20" src="casper-assets/footer/robot.png" alt=""/>
  <div class="container position-relative">
    <div><img class="img-fluid d-block mb-20" src="casper-assets/footer/logo-c-only.svg" alt=""/>
      <div class="mw-2xl mw-xl-4xl pb-40 pb-sm-20 position-relative">
        <div class="mw-lg mw-lg-none mb-20">
          <h3 class="font-heading fw-medium text-white mb-0">Gain valuable insights into your users&apos; preferences</h3>
        </div>
        <div class="d-md-flex align-items-center">
          <div class="d-flex mb-8 mb-md-0 me-md-24 align-items-center">
            <div class="flex-shrink-0 d-inline-flex justify-content-center align-items-center bg-warning rounded-pill" style="width: 46px; height: 46px;">
              <svg width="24" height="25" viewbox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_159_5006)">
                  <path d="M21 10.5C21 17.5 12 23.5 12 23.5C12 23.5 3 17.5 3 10.5C3 8.11305 3.94821 5.82387 5.63604 4.13604C7.32387 2.44821 9.61305 1.5 12 1.5C14.3869 1.5 16.6761 2.44821 18.364 4.13604C20.0518 5.82387 21 8.11305 21 10.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg>
            </div>
            <div class="ms-3"><span class="d-block text-white">1929, Bancangan, Sambit,</span><span class="d-block text-white">Wakanda Kidul</span></div>
          </div>
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0 d-inline-flex justify-content-center align-items-center bg-info rounded-pill" style="width: 46px; height: 46px;">
              <svg width="24" height="25" viewbox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_159_5006)">
                  <path d="M21 10.5C21 17.5 12 23.5 12 23.5C12 23.5 3 17.5 3 10.5C3 8.11305 3.94821 5.82387 5.63604 4.13604C7.32387 2.44821 9.61305 1.5 12 1.5C14.3869 1.5 16.6761 2.44821 18.364 4.13604C20.0518 5.82387 21 8.11305 21 10.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="bg-dark overflow-hidden">
  <div class="border-bottom border-dark-light mb-12">
    <div class="container mw-9xl">
      <div class="d-flex flex-column flex-sm-row py-5 gap-6 align-items-start align-items-sm-center">
        <a class="btn text-white fw-medium p-0" href="#">Help Center</a><a class="btn text-white fw-medium p-0" href="#">Location</a><a class="btn ms-sm-auto text-white fw-medium p-0" href="#">Contact</a>
        <a class="btn text-white fw-medium p-0" href="#">
          <span class="me-6">Back to top</span>
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" fill="white" stroke="#E5E5E7"></circle>
            <path d="M16.4123 21.1235L19.6007 17.9351L22.7891 21.1235" stroke="#19191B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="pb-24">
    <div class="container mw-7xl">
      <div class="mw-xl mb-24 mx-auto">
        <form action="">
          <label class="form-label mb-6 fs-7 fw-medium text-white" for="">Join our Newsletter now</label>
          <div class="d-flex flex-column flex-sm-row gap-4">
            <input class="form-control" type="email" name="" id="" placeholder="Your Email">
            <button class="flex-shrink-0 btn btn-success" type="submit">More</button>
          </div>

<footer class="py-5">
  <div class="container">
    <div class="row border-bottom">
      <div class="col-12 col-lg-3 mb-5">
        <a class="d-inline-block mb-4" href="#">
          <img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
        <p class="text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/facebook.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/github.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/instagram.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/linkedin.svg">
          </a>
          <a class="d-inline-block" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/twitter.svg">
          </a>

<section class="py-12 py-md-20 bg-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-xl-none">
      <div class="row mb-20">
        <div class="col-12 col-xl-3 mb-12 mb-xl-0"><a class="d-inline-block" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt=""/></a></div>
        <div class="col-auto col-sm-6 col-xl-2 mb-10 mb-xl-0 pe-10 pe-sm-0">
          <h5 class="fs-7 text-white mb-4" >About</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Contact</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Blog</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Our Storry</a></li>
            <li><a class="d-inline-block text-light-dark" href="#"><span class="me-2" >Careers</span><span class="badge px-2 py-1 fs-10 bg-info text-white text-uppercase" >Hiring</span></a></li>
          </ul>
        </div>
        <div class="col-auto col-sm-6 col-xl-3 mb-10 mb-xl-0">
          <h5 class="fs-7 text-white mb-4" >Company</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Press</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Brand Assets</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Changelog</a></li>
            <li><a class="d-inline-block text-light-dark" href="#" >Help centre</a></li>
          </ul>
        </div>
        <div class="col-12 col-xl-4">