Bootstrap 5 Components

<section class="position-relative py-12 py-lg-24 bg-success-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-success-light" style="letter-spacing: 1.44px;">FEATURES</span>
      <h3 class="font-heading mb-4">Designed for the modern business owners</h3>
      <p class="mw-2xl mx-auto fs-7 text-white text-opacity-75 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
    </div>
    <div class="mw-xs mw-sm-none mx-auto">
      <div class="row mb-n8">
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-success bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-success rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-dark bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3334 2.66675H4.66671C2.66671 2.66675 1.33337 3.66675 1.33337 6.00008V8.37341C1.33337 8.62008 1.58671 8.77341 1.80671 8.67341C2.46004 8.37341 3.21337 8.26008 4.00671 8.40008C5.76004 8.71341 7.04671 10.3401 7.00004 12.1201C6.99337 12.4001 6.95337 12.6734 6.88004 12.9401C6.82671 13.1467 6.99337 13.3401 7.20671 13.3401H11.3334C13.3334 13.3401 14.6667 12.3401 14.6667 10.0067V6.00008C14.6667 3.66675 13.3334 2.66675 11.3334 2.66675ZM8.00004 9.66675C7.08004 9.66675 6.33337 8.92008 6.33337 8.00008C6.33337 7.08008 7.08004 6.33341 8.00004 6.33341C8.92004 6.33341 9.66671 7.08008 9.66671 8.00008C9.66671 8.92008 8.92004 9.66675 8.00004 9.66675ZM12.8334 9.33341C12.8334 9.60675 12.6067 9.83341 12.3334 9.83341C12.06 9.83341 11.8334 9.60675 11.8334 9.33341V6.66675C11.8334 6.39341 12.06 6.16675 12.3334 6.16675C12.6067 6.16675 12.8334 6.39341 12.8334 6.66675V9.33341Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M3.33329 9.33325C1.85996 9.33325 0.666626 10.5266 0.666626 11.9999C0.666626 12.4999 0.806626 12.9733 1.05329 13.3733C1.51329 14.1466 2.35996 14.6666 3.33329 14.6666C4.30663 14.6666 5.15329 14.1466 5.61329 13.3733C5.85996 12.9733 5.99996 12.4999 5.99996 11.9999C5.99996 10.5266 4.80663 9.33325 3.33329 9.33325ZM4.64663 11.7799L3.22663 13.0933C3.13329 13.1799 3.00663 13.2266 2.88663 13.2266C2.75996 13.2266 2.63329 13.1799 2.53329 13.0799L1.87329 12.4199C1.67996 12.2266 1.67996 11.9066 1.87329 11.7133C2.06663 11.5199 2.38663 11.5199 2.57996 11.7133L2.89996 12.0333L3.96663 11.0466C4.16663 10.8599 4.48663 10.8733 4.67329 11.0733C4.85996 11.2733 4.84663 11.5933 4.64663 11.7799Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Simple Accounting</span>
            <p class="fs-9 text-white text-opacity-50">Keep track of your financial transactions with ease and simplicity.</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-success bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-success rounded-pill" style="width: 40px; height: 40px;">

<section class="position-relative py-12 py-lg-24 bg-success-dark">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <h2 class="font-heading mb-16">How it works</h2>
      <div class="row">
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-success rounded-pill" style="width: 58px; height: 58px;">
              <div class="d-flex align-items-center justify-content-center bg-success-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 44px; height: 44px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 2H8C5.24 2 3 4.24 3 7V17C3 19.76 5.24 22 8 22H16C18.76 22 21 19.76 21 17V7C21 4.24 18.76 2 16 2ZM8.86 18.63C8.67 18.82 8.42 18.92 8.16 18.92C7.89 18.92 7.64 18.82 7.45 18.63C7.26 18.44 7.15 18.19 7.15 17.92C7.15 17.66 7.26 17.4 7.45 17.21C7.54 17.12 7.65 17.05 7.77 17C8.02 16.9 8.29 16.9 8.54 17C8.6 17.02 8.66 17.05 8.71 17.09C8.77 17.12 8.82 17.17 8.86 17.21C9.05 17.4 9.16 17.66 9.16 17.92C9.16 18.19 9.05 18.44 8.86 18.63ZM7.15 13.92C7.15 13.79 7.18 13.66 7.23 13.54C7.28 13.41 7.35 13.31 7.45 13.21C7.68 12.98 8.03 12.87 8.35 12.94C8.41 12.95 8.48 12.97 8.54 13C8.6 13.02 8.66 13.05 8.71 13.09C8.77 13.12 8.82 13.17 8.86 13.21C8.95 13.31 9.03 13.41 9.08 13.54C9.13 13.66 9.15 13.79 9.15 13.92C9.15 14.19 9.05 14.44 8.86 14.63C8.67 14.82 8.42 14.92 8.16 14.92C8.02 14.92 7.89 14.89 7.77 14.84C7.65 14.79 7.54 14.72 7.45 14.63C7.26 14.44 7.15 14.19 7.15 13.92ZM12.86 18.63C12.77 18.72 12.66 18.79 12.54 18.84C12.42 18.89 12.29 18.92 12.15 18.92C11.89 18.92 11.64 18.82 11.45 18.63C11.26 18.44 11.15 18.19 11.15 17.92C11.15 17.85 11.16 17.79 11.17 17.72C11.19 17.66 11.21 17.6 11.23 17.54C11.26 17.48 11.29 17.42 11.32 17.36C11.36 17.31 11.4 17.26 11.45 17.21C11.54 17.12 11.65 17.05 11.77 17C12.14 16.85 12.58 16.93 12.86 17.21C13.05 17.4 13.15 17.66 13.15 17.92C13.15 18.19 13.05 18.44 12.86 18.63ZM12.86 14.63C12.67 14.82 12.42 14.92 12.15 14.92C11.89 14.92 11.64 14.82 11.45 14.63C11.26 14.44 11.15 14.19 11.15 13.92C11.15 13.66 11.26 13.4 11.45 13.21C11.82 12.84 12.49 12.84 12.86 13.21C12.95 13.31 13.03 13.41 13.08 13.54C13.13 13.66 13.15 13.79 13.15 13.92C13.15 14.19 13.05 14.44 12.86 14.63ZM9 10.46C7.97 10.46 7.12 9.62 7.12 8.58V7.58C7.12 6.55 7.96 5.7 9 5.7H15C16.03 5.7 16.88 6.54 16.88 7.58V8.58C16.88 9.61 16.04 10.46 15 10.46H9ZM16.86 18.63C16.67 18.82 16.42 18.92 16.15 18.92C16.02 18.92 15.89 18.89 15.77 18.84C15.65 18.79 15.54 18.72 15.45 18.63C15.26 18.44 15.16 18.19 15.16 17.92C15.16 17.66 15.26 17.4 15.45 17.21C15.72 16.93 16.17 16.85 16.54 17C16.66 17.05 16.77 17.12 16.86 17.21C17.05 17.4 17.15 17.66 17.15 17.92C17.15 18.19 17.05 18.44 16.86 18.63ZM17.08 14.3C17.03 14.42 16.96 14.53 16.86 14.63C16.67 14.82 16.42 14.92 16.15 14.92C15.89 14.92 15.64 14.82 15.45 14.63C15.26 14.44 15.15 14.19 15.15 13.92C15.15 13.66 15.26 13.4 15.45 13.21C15.82 12.84 16.49 12.84 16.86 13.21C17.05 13.4 17.16 13.66 17.16 13.92C17.16 14.05 17.13 14.18 17.08 14.3Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div>
            <div class="w-100 border-white border-opacity-10" style="border-bottom: 2px dashed"></div>
          </div>
          <div class="mw-sm">
            <h6 class="fs-6 fw-semibold">Input Transactions</h6>
            <p class="text-white text-opacity-50">Record your financial transactions such as receipts, and other relevant documents.</p>
          </div>
        </div>
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-success rounded-pill" style="width: 58px; height: 58px;">

<section class="position-relative pb-12 pb-lg-24 bg-success-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</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="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="row align-items-center">
        <div class="col-md-8 col-lg-6 mt-12 mt-md-0 order-last order-md-first">
          <h2 class="font-heading mb-6">Careers at Vista</h2><a class="btn d-inline-flex align-items-center text-success-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
        </div>
        <div class="col-md-4 col-lg-6">
          <div class="d-flex justify-content-md-end">
            <div class="position-relative" style="width: 67px;">

<section class="position-relative py-24 bg-success-dark">
  <div class="container">
    <div class="border-bottom border-white border-opacity-10 mb-20">
      <div class="row">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-success px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
              <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-success"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
        </div>
        <div class="col-lg-4">
          <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
            <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
          </div>
        </div>
      </div>
    </div>
    <div class="mw-lg mx-auto mw-lg-none"><a class="btn mb-20 d-block p-0 text-start fw-normal bg-success bg-opacity-10 rounded-2 overflow-hidden" href="#">
        <div class="row">
          <div class="col-lg-6 p-0"><img class="img-fluid d-block mb-12 w-100 h-100" src="vista-assets/images/blog-content/placeholder-green.png" alt=""></div>

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-success-dark">
  <div class="container">
    <div class="mw-xs mw-md-lg mx-auto mw-md-5xl">
      <div class="row mb-20 align-items-end">
        <div class="col-md-7 mb-10 mb-md-0">
          <div><span class="badge mb-3 text-success-light text-uppercase" style="letter-spacing: 1.44px;">diverse and world-class</span>
            <h3 class="font-heading mb-0">Meet our team</h3>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex align-items-center justify-content-end">
            <div class="d-flex me-8 align-items-center">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.27232 5.86201L9.50687 6.42608L10.1158 6.47487L13.4188 6.73952L10.9024 8.8953L10.4387 9.2926L10.5803 9.88662L11.3486 13.1097L8.52091 11.3826L7.99968 11.0643L7.47844 11.3826L4.65075 13.1097L5.41909 9.88662L5.56069 9.2926L5.09694 8.8953L2.58054 6.73952L5.88355 6.47487L6.49248 6.42608L6.72703 5.86201L7.99968 2.80143L9.27232 5.86201ZM4.581 13.4023L4.58109 13.4019L4.581 13.4023ZM2.28065 6.76355L2.28088 6.76353L2.28065 6.76355Z" fill="#7ACC66" stroke="#7ACC66" style="fill:#7ACC66;fill:color(display-p3 0.4800 0.8000 0.4000);fill-opacity:1;stroke:#7ACC66;stroke:color(display-p3 0.4800 0.8000 0.4000);stroke-opacity:1;" stroke-width="2"></path>
              </svg><span class="ms-2 text-success fw-semibold">We are hiring!</span>
            </div><a class="btn py-0 d-inline-flex align-items-center text-success-dark btn-light border-2 border-secondary border-opacity-25" href="#"><span class="me-2 lh-lg">Careers</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.43032 8.28862L9.4303 8.2886L9.42602 8.29289L6.45312 11.2658V8.20666V4.72754L8.11268 6.3871L9.42602 7.70044C9.59121 7.86563 9.58501 8.13579 9.43032 8.28862Z" fill="black" stroke="#2E0F17" style="fill:black;fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="2"></path>
              </svg></a>
          </div>
        </div>
      </div>
      <div class="mw-xs mx-auto mw-lg-none">
        <div class="row">

<section class="position-relative py-24 bg-success-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div>
        <div class="row align-items-center">
          <div class="col-lg-6 mb-8 mb-lg-0">
            <div class="mw-md">
              <div class="d-flex mb-10 align-items-center"><span class="badge me-6 px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="fs-9 fw-medium">17 Jul 2024</span></div>
              <h3 class="font-heading">Mastering Cash Basis Accounting: A Step-by-Step Guide</h3>
            </div>
          </div>
          <div class="col-lg-6"><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-green.png" alt=""></div>
        </div>
      </div>
      <div class="my-12 border-bottom border-white border-opacity-10"></div>
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="mw-sm pt-8 px-8 pb-12 bg-success-light bg-opacity-10 rounded"><a class="btn mb-3 btn-link p-0 text-start text-white text-opacity-50" href="#">Table of content</a><a class="btn mb-3 btn-link p-0 text-start text-white fw-semibold" href="#">What is cash basis accounting?</a><a class="btn mb-3 btn-link p-0 text-start text-white text-opacity-50" href="#">How does cash accounting work?</a><a class="btn mb-12 btn-link p-0 text-start text-white text-opacity-50" href="#">The bottom line on cash basis accounting</a><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex mb-12 align-items-center"><img class="img-fluid" src="vista-assets/images/blog-content/avatar.png" alt="">
              <div class="ms-4"><span class="d-block text-white fw-semibold">Madelyn</span><span class="d-block fs-9 text-white text-opacity-50">Content Marketing</span></div>
            </div><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex align-items-center gap-6"><a class="btn btn-link p-0 text-white fs-6" 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>

<section class="pb-12 pb-lg-24 bg-success-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>

<section class="position-relative py-12 py-lg-24 bg-success-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <p class="mb-12 text-center">Powering financial insights for business owners.</p>
      <div class="row justify-content-center mb-n10">
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 bg-gradient-success-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-green.png" alt="">
</section>

<section class="position-relative py-12 py-md-24 py-lg-32 bg-success-dark">
  <div class="container">
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="position-relative mw-lg-sm ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-success"></div><span class="d-block mb-5 fs-6">Customer’s revenue saved</span>
            <h2 class="lh-sm fw-semibold mb-0">$55,199,213.68</h2>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="position-relative mw-lg-sm ms-lg-auto ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-white bg-opacity-25"></div><span class="d-block mb-5 fs-6">Time saved managing finances</span>
            <h2 class="lh-sm fw-semibold mb-0">3,195 hours</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-success-dark">
  <div class="position-absolute top-0 end-0 col-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-green1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Login</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Don’t have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Sign up</a></p>
          </div>
          <form action="">
            <div class="mb-6">
              <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="john@email.com">
            </div>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>

<section class="position-relative bg-success-dark">
  <div class="position-absolute top-0 end-0 col-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-green1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Sign up</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Already have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Login</a></p>
          </div>
          <form action="">
            <div class="mb-6">
              <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="john@email.com">
            </div>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>

<section class="py-12 py-lg-24 bg-success-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <h1 class="font-heading mb-6">FAQ</h1>
      <p class="d-inline-flex flex-wrap mb-16"><span class="d-inline-block me-1 text-white text-opacity-50">Still have more questions?</span><a class="btn p-0 btn-outline-success d-inline-flex align-items-center border-0 bg-transparent" href="#"><span class="me-1">Talk to us</span>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></p>
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <div class="position-relative">
            <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fs-7 mb-0">What is Vista?</h6><span class="ms-5">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></span>
              </div>
            </button>
            <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fs-7 mb-0">Do you facilitate any regular events or offer rooms for?</h6><span class="ms-5">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="position-relative py-12 py-lg-24 bg-success-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-success-light" style="letter-spacing: 1.44px;">WHAT THEY SAY ABOUT US</span>
      <h3 class="font-heading mb-0">Testimonials</h3>
    </div>
    <div class="mw-4xl mx-auto px-12">
      <div class="position-relative mb-20">
        <div class="position-absolute top-0 start-0 w-100 h-100 mt-6 ms-4 bg-white bg-opacity-10 rounded-4"></div>
        <div class="position-relative ps-10 py-10 pe-20 bg-success rounded-4">
          <div class="position-absolute top-100 end-0 mt-n3 me-10 text-success">
            <svg width="44" height="33" viewBox="0 0 44 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h4 class="text-white fw-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h4>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">
        <button class="btn p-0 me-2 text-light">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>

<section class="position-relative py-12 py-md-24 bg-success-dark">
  <div class="container">
    <div class="mw-md mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="text-center">
        <h3 class="font-heading mb-4">Stay in the loop</h3>
        <p class="mw-xs mx-auto mw-md-none mb-16">Join our newsletter to get top news before anyone else</p>
        <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
          <div class="bg-success bg-opacity-50" style="height: 48px; filter: blur(25px);"></div>
          <div class="position-absolute w-100 top-0 start-0" style="height: 48px;">
            <input class="form-control bg-success-dark bg-opacity-75 h-100" type="" placeholder="Email address">
            <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
              <button class="btn h-100 d-flex align-items-center py-2 px-4 text-success-dark btn-light border border-white border-opacity-10" type="submit">Subscribe</button>
            </div>
          </div>
        </div>
        <p class="fs-9 mb-0">No spam. You can unsubscribe anytime.</p>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 pb-lg-32 bg-success-dark">
  <div class="container">
    <div class="mw-lg mx-auto text-center"><img class="img-fluid d-block mx-auto mb-24" src="vista-assets/images/http-codes/illustration.svg" alt="">
      <h4 class="font-heading mb-4">Oops. Page not found.</h4>
      <p class="fs-7 text-white text-opacity-50 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p><a class="btn d-inline-flex align-items-center btn-success text-white border-2 border-white border-opacity-10" href="#"><span class="me-2">Back to home</span>
        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 bg-gradient-success-bottom">
  <div class="container">
    <div class="mw-2xl mx-auto text-center">
      <h3 class="font-heading mb-4">Optimize your finances now</h3>
      <p class="fs-7 text-white mb-10">Take control of your money. Optimize your finances for a brighter tomorrow!</p><a class="btn d-inline-flex align-items-center text-white btn-success border-2 border-white border-opacity-10" href="#">Get started for free</a>
    </div>
  </div><img class="img-fluid d-block mx-auto px-4 mt-24" src="vista-assets/images/cta/vista-text.svg" alt="">
</section>

<section class="position-relative py-12 py-lg-24 bg-success-dark overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto mb-16 mb-sm-32 text-center">
      <h1 class="font-heading mb-12 mb-sm-24">Our mission is to make bookkeeping simple</h1>
      <div class="position-relative mx-auto mw-sm">
        <div class="position-absolute start-0 top-0 mt-n10 bg-gradient-success-top opacity-50 rounded-pill h-100 w-100" style="filter: blur(90px);"></div><img class="position-relative img-fluid" style="height:400px" src="vista-assets/images/logos/vista-logo-green.svg" alt="">
      </div>
    </div>
    <div class="mw-xs mw-sm-xl mx-auto mb-8 mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-5 mb-12 pb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
          <div class="mw-xs"><span class="d-block mb-1 text-white text-opacity-50">Investors</span>
            <h6 class="text-white mb-0">Funded by industry-leading investors</h6>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-8 pb-8 mb-sm-0 pb-sm-0 position-relative">
          <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
          <div class="d-sm-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
          <div class="d-flex justify-content-center">
            <div class="text-center"><span class="d-block mb-1 text-white text-opacity-50">Team members</span><span class="d-block fs-3 text-white fw-bold">110</span></div>
          </div>
        </div>

<section class="position-relative pb-12 pb-lg-24 bg-success-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</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="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="text-center mb-12">
      <h2 class="font-heading mb-4">Careers at Vista</h2>
      <p class="text-white text-opacity-50 mb-12">We are on our mission is to make bookkeeping simple. Join us to make bookkeeping fun.</p><a class="btn d-inline-flex align-items-center text-success-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="d-flex mb-24 align-items-center justify-content-center py-20 py-sm-40 bg-gradient-success-top rounded-2">
        <div class="position-relative" style="width: 224px;">
          <div class="position-absolute top-50 start-50 mt-n16 translate-middle-x d-inline-block h-100 w-100 bg-gradient-success-top rounded-pill" style="filter: blur(65px);"></div>

<section class="pb-12 pb-lg-24 pb-xl-32 bg-success-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>