Bootstrap 5 Hero section Components

<section class="position-relative bg-light-light overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="44" height="2" rx="1" fill="black"></rect>
          <rect y="14" width="44" height="2" rx="1" fill="black"></rect>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="position-relative mx-auto mb-12 pb-12 border-bottom">
      <div>
        <h1 class="display-1" >We create modern architecture</h1>
        <div class="d-none d-xl-block position-absolute bottom-0 end-0 mw-sm mb-8"><span class="d-block mb-n1 fs-10 text-end fw-medium" >Since</span><span class="d-block mb-3 fs-10 text-end fw-medium" >1979</span>
          <p class="text-end fw-medium"><span class="d-block" >Duoloco&reg; is a strategic branding agency</span><span class="d-block" >focused on brand creation, rebrands, and brand</span><span class="d-block" >transformation for progressive companies.</span></p>
        </div>
        <div class="d-xl-none mt-10 mw-sm ms-auto"><span class="d-block mb-n1 fs-10 text-end fw-medium" >Since</span><span class="d-block mb-3 fs-10 text-end fw-medium" >1979</span>
          <p class="text-end fw-medium"><span class="d-block" >Duoloco&reg; is a strategic branding agency</span><span class="d-block" >focused on brand creation, rebrands, and brand</span><span class="d-block" >transformation for progressive companies.</span></p>
        </div>
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-12 col-md-7 position-relative">
        <div class="position-absolute top-0 end-0 mt-4 me-5 d-flex align-items-center justify-content-center" style="width: 180px; height: 180px;"><img class="position-absolute top-0 start-0 w-100 h-100 spin" src="asitrastudio-assets/headers/spin-bonus.svg" alt=""/><img class="position-relative" src="asitrastudio-assets/headers/arrow-spin.svg" alt=""/></div><img class="imd-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-horizontal.png" alt=""/>
      </div>
      <div class="d-none d-md-block col-12 col-md-5">
        <div class="row">
          <div class="col-5"><img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-small2.png" alt=""/></div>
          <div class="col-7"><img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo1.png" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" 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 justify-content-between py-8 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" style="height: 16px;" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a><a class="navbar-close" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >About</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >Services</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link text-dark" href="#" >Contact us</a></li>
        </ul>
      </div>
      <div><a class="btn btn-outline-dark mb-3 w-100 rounded-pill" href="#" >Login</a><a class="btn btn-primary w-100 rounded-pill" href="#" >Sign in</a></div>
    </nav>
  </div>
</section>

<section class="bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid position-relative">
      <a class="navbar-brand me-16" href="#">
        <img class="img-fluid" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link text-primary" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <a class="d-inline-block" href="#">
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.5 0.5H2.16667L2.5 2.16667M3.83333 8.83333H12.1667L15.5 2.16667H2.5M3.83333 8.83333L2.5 2.16667M3.83333 8.83333L1.92259 10.7441C1.39762 11.269 1.76942 12.1667 2.51184 12.1667H12.1667M12.1667 12.1667C11.2462 12.1667 10.5 12.9129 10.5 13.8333C10.5 14.7538 11.2462 15.5 12.1667 15.5C13.0871 15.5 13.8333 14.7538 13.8333 13.8333C13.8333 12.9129 13.0871 12.1667 12.1667 12.1667ZM5.5 13.8333C5.5 14.7538 4.75381 15.5 3.83333 15.5C2.91286 15.5 2.16667 14.7538 2.16667 13.8333C2.16667 12.9129 2.91286 12.1667 3.83333 12.1667C4.75381 12.1667 5.5 12.9129 5.5 13.8333Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="d-lg-none">
        <button class="btn btn-primary d-flex align-items-center px-2 py-1 navbar-burger">
          <svg viewbox="0 0 100 45" width="26" height="20"><rect width="100" height="6"></rect><rect y="18" width="100" height="6"></rect><rect y="38" width="100" height="6"></rect></svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="mx-6 pt-24 pb-96 pt-xl-52 bg-primary position-relative overflow-hidden">
    <div class="position-absolute bottom-0 start-0 w-100 ps-10 pt-14">
      <img class="d-block img-fluid mx-auto me-sm-0 ms-xl-0 mw-lg-none h-100 col-10 col-sm-8 col-md-6" src="vendia-assets/images/header/woman-white-circle.png" alt="" style="object-fit: contain; object-position: bottom;">
    </div>
    <div class="container position-relative">
      <div class="mw-2xl mx-auto me-xl-0 me-xl-20">
        <h1 class="d-none d-sm-inline-block h2 mb-16">SUMMER COLLECTION</h1>
        <h1 class="d-sm-none h2 text-break mb-12">SUMMER COLLECTION</h1>
        <div class="mw-lg mx-auto">
          <p class="fs-7 fw-medium mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattis.</p>
          <a class="d-inline-fex align-items-center fs-7 fw-bold" href="#">
            <span class="me-3">Explore Collections</span>
            <svg width="11" height="12" viewbox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.95669 1.75742L9.55635 1.75742M9.55635 1.75742L9.55635 8.35709M9.55635 1.75742L1.07107 10.2427" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" 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 justify-content-between py-8 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="vendia-assets/logos/vendia-dark.svg" alt="">
        </a>
        <a class="navbar-close" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="py-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Shop</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Product</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link text-dark" href="#">Support</a></li>
        </ul>
      </div>
      <div><a class="btn w-100" href="#">Login</a><a class="btn w-100 btn-primary" href="#">Sign in</a></div>
    </nav>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-xl navbar-light bg-transparent border-bottom border-light">
    <div class="container-fluid"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-black-logo.svg" alt=""></a>
      <button class="d-xl-none navbar-burger btn btn-outline-dark py-3 px-5 ms-auto" type="button" aria-controls="nav01" aria-expanded="false">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.75 8.75003H1.25C0.559648 8.75003 0 9.30968 0 10C0 10.6904 0.559648 11.25 1.25 11.25H18.75C19.4404 11.25 20 10.6904 20 10C20 9.30968 19.4404 8.75003 18.75 8.75003Z" fill="currentColor"></path>
          <path d="M1.25 5.41669H18.75C19.4404 5.41669 20 4.85704 20 4.16669C20 3.47634 19.4404 2.91669 18.75 2.91669H1.25C0.559648 2.91669 0 3.47634 0 4.16669C0 4.85704 0.559648 5.41669 1.25 5.41669Z" fill="currentColor"></path>
          <path d="M18.75 14.5834H1.25C0.559648 14.5834 0 15.143 0 15.8334C0 16.5237 0.559648 17.0834 1.25 17.0834H18.75C19.4404 17.0834 20 16.5237 20 15.8334C20 15.143 19.4404 14.5834 18.75 14.5834Z" fill="currentColor"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link px-xl-7" href="#">Our features</a></li>
          <li class="nav-item"><a class="nav-link px-xl-7" href="#">How to use?</a></li>
          <li class="nav-item"><a class="nav-link px-xl-7" href="#">Use cases</a></li>
          <li class="nav-item"><a class="nav-link px-xl-7" href="#">Plans &amp; pricing</a></li>
        </ul>
      </div>
      <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn me-2 px-6 py-4 btn-outline-light text-dark" href="#">Login</a><a class="btn px-6 py-4 btn-primary" href="#">Get started</a></div>
    </div>
  </nav>
  <div class="container-fluid overflow-hidden">
    <div class="row">
      <div class="col-xl-7">
        <div class="mw-2xl mw-xl-4xl mx-auto pt-12 pt-xl-32 pb-12 pb-xl-32 px-xl-24">
          <h1 class="font-heading mb-14"><span>Transform your productivity with</span> <span class="text-primary">FilyTreck</span></h1>
          <div class="d-flex mb-16 align-items-center"><a class="btn me-5 me-sm-8 btn-dark" href="#">Let’s start!</a><a class="btn p-0 text-secondary" href="#">It’s free now!</a></div>
          <div>
            <p class="mb-0 fs-4 fw-medium text-secondary">Unlock peak productivity with FilyTreck, your key to streamlined tasks and efficient time management</p>
          </div>
        </div>
      </div>
      <div class="col-xl-5 pt-12 pt-xl-32 px-12 bg-info-light">
        <div class="d-flex flex-column h-100 align-items-center">
          <div class="mw-lg text-center mb-24">
            <h3 class="font-heading fw-medium mb-6">Get mobile app</h3>
            <p class="fs-7 text-light-dark mb-10">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci.</p>
            <div class="d-flex justify-content-center align-items-center"><a class="d-inline-block me-4" href="#"><img class="img-fluid" src="fily-assets/headers/app-store.png" alt=""></a><a class="d-inline-block" href="#"><img class="img-fluid" src="fily-assets/headers/google-play.png" alt=""></a></div>
          </div><img class="img-fluid d-block mt-auto mx-auto" src="fily-assets/headers/iphone13-pro.png" alt="">
        </div>
      </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="fily-assets/logos/fily-treck-black-logo.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 py-3 text-start border-0 w-100 text-dark" href="#">Our features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">How to use?</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Use cases</a></li>
          <li class="nav-item"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Plans &amp; pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 py-4 mb-4 btn-outline-light text-dark" href="#">Login</a><a class="btn w-100 py-4 btn-primary" href="#">Get started</a></div>
    </nav>
  </div>
</section>

<section class="py-6">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <div class="d-flex align-items-center"><span class="flex-shrink-0 d-inline-flex align-items-center justify-content-center rounded-2 bg-success-light me-6" style="width: 64px; height: 64px">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 14.375V12.5882C1.875 8.09766 5.48075 4.39059 9.97126 4.37505C11.0407 4.37127 12.1003 4.57863 13.0894 4.98526C14.0785 5.39188 14.9776 5.98976 15.7351 6.74461C16.4926 7.49945 17.0936 8.39642 17.5038 9.38406C17.9139 10.3717 18.125 11.4306 18.125 12.5V14.375C18.125 14.5408 18.0592 14.6997 17.9419 14.8169C17.8247 14.9342 17.6658 15 17.5 15H2.5C2.33424 15 2.17527 14.9342 2.05806 14.8169C1.94085 14.6997 1.875 14.5408 1.875 14.375Z" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10 4.375V6.875" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M2.15186 10.3971L4.56667 11.0441" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M17.8481 10.3971L15.4333 11.0441" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.0817 15L13.4243 8.0374" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <div>
            <h4>Analytics Dashboard</h4>
            <p class="mb-0">Monitor key metrics, check reporting and review insights</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-auto ms-auto"><a class="btn d-inline-flex align-items-center mb-4 mb-sm-0 me-2 px-8 py-3 btn-outline-light text-dark shadow" href="#">
          <svg class="me-3" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 6L13.9995 2.00053L10 2" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8.99817 7.00177L13.4982 2.50177" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12 9V13.4444C12 13.5918 11.9415 13.7331 11.8373 13.8373C11.7331 13.9415 11.5918 14 11.4444 14H2.55556C2.40821 14 2.26691 13.9415 2.16272 13.8373C2.05853 13.7331 2 13.5918 2 13.4444V4.55556C2 4.40821 2.05853 4.26691 2.16272 4.16272C2.26691 4.05853 2.40821 4 2.55556 4H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span>Export</span></a><a class="btn d-inline-flex align-items-center mb-4 mb-sm-0 me-2 px-8 py-3 btn-outline-light text-dark shadow" href="#">
          <svg class="me-3" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.69108 2.94929L6.55442 2.09705C6.49344 2.05117 6.42242 2.02045 6.34723 2.0074C6.27203 1.99435 6.19482 1.99936 6.12194 2.02202C5.76991 2.13226 5.42837 2.27357 5.10136 2.44428C5.03366 2.47979 4.97538 2.53088 4.93133 2.59335C4.88727 2.65582 4.85871 2.72788 4.84799 2.80356L4.64705 4.21017C4.57046 4.27806 4.49547 4.34868 4.42209 4.42201C4.34874 4.49537 4.27811 4.57037 4.2102 4.64703L4.21017 4.64705L2.80381 4.84816C2.72824 4.85885 2.6563 4.88734 2.59391 4.93128C2.53151 4.97522 2.48046 5.03337 2.44494 5.10092C2.27397 5.42779 2.13238 5.76922 2.02186 6.12116C1.9991 6.19414 1.99402 6.27148 2.00705 6.3468C2.02007 6.42213 2.05082 6.49327 2.09675 6.55437L2.94929 7.69108C2.94314 7.79325 2.94005 7.8962 2.94002 7.99994C2.94002 8.10368 2.94311 8.20666 2.9493 8.30888L2.94929 8.30892L2.09705 9.44558C2.05118 9.50656 2.02045 9.57758 2.0074 9.65277C1.99436 9.72797 1.99937 9.80518 2.02202 9.87806C2.13226 10.2301 2.27357 10.5716 2.44428 10.8986C2.47979 10.9663 2.53089 11.0246 2.59336 11.0687C2.65583 11.1127 2.72788 11.1413 2.80356 11.152L4.21017 11.3529C4.27806 11.4295 4.34868 11.5045 4.42201 11.5779C4.49537 11.6513 4.57037 11.7219 4.64703 11.7898L4.64705 11.7898L4.84817 13.1962C4.85885 13.2718 4.88734 13.3437 4.93128 13.4061C4.97523 13.4685 5.03337 13.5195 5.10092 13.5551C5.42779 13.726 5.76922 13.8676 6.12116 13.9781C6.19414 14.0009 6.27148 14.006 6.3468 13.993C6.42213 13.9799 6.49328 13.9492 6.55438 13.9032L7.69108 13.0507C7.79325 13.0569 7.8962 13.06 7.99994 13.06C8.10368 13.06 8.20666 13.0569 8.30888 13.0507L8.30892 13.0507L9.44558 13.9029C9.50656 13.9488 9.57758 13.9796 9.65277 13.9926C9.72797 14.0056 9.80518 14.0006 9.87806 13.978C10.2301 13.8677 10.5716 13.7264 10.8986 13.5557C10.9663 13.5202 11.0246 13.4691 11.0687 13.4066C11.1127 13.3442 11.1413 13.2721 11.152 13.1964L11.3529 11.7898C11.4295 11.7219 11.5045 11.6513 11.5779 11.578C11.6513 11.5046 11.7219 11.4296 11.7898 11.353L11.7898 11.353L13.1962 11.1518C13.2718 11.1412 13.3437 11.1127 13.4061 11.0687C13.4685 11.0248 13.5195 10.9666 13.5551 10.8991C13.726 10.5722 13.8676 10.2308 13.9781 9.87884C14.0009 9.80586 14.006 9.72852 13.993 9.6532C13.9799 9.57788 13.9492 9.50673 13.9032 9.44563L13.0507 8.30892C13.0569 8.20675 13.0599 8.1038 13.06 8.00006C13.06 7.89632 13.0569 7.79334 13.0507 7.69112L13.0507 7.69108L13.9029 6.55442C13.9488 6.49344 13.9796 6.42242 13.9926 6.34723C14.0056 6.27203 14.0006 6.19482 13.978 6.12194C13.8677 5.76991 13.7264 5.42837 13.5557 5.10136C13.5202 5.03366 13.4691 4.97538 13.4066 4.93133C13.3442 4.88727 13.2721 4.85871 13.1964 4.84799L11.7898 4.64705C11.7219 4.57046 11.6513 4.49547 11.578 4.42209C11.5046 4.34874 11.4296 4.27811 11.353 4.2102L11.3529 4.21017L11.1518 2.80381C11.1412 2.72824 11.1127 2.6563 11.0687 2.59391C11.0248 2.53151 10.9666 2.48045 10.8991 2.44494C10.5722 2.27397 10.2308 2.13238 9.87884 2.02186C9.80586 1.9991 9.72852 1.99402 9.6532 2.00705C9.57787 2.02007 9.50672 2.05082 9.44563 2.09675L8.30892 2.94929C8.20675 2.94314 8.1038 2.94005 8.00006 2.94002C7.89632 2.94002 7.79334 2.94311 7.69112 2.9493L7.69108 2.94929Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span>Settings</span></a><a class="btn px-8 py-3 btn-primary shadow" href="#">
          <svg class="me-3" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 7L8 10L11 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 2V8.99816" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M14 10V13.5C14 13.6326 13.9425 13.7598 13.8402 13.8536C13.7379 13.9473 13.5992 14 13.4545 14H2.54545C2.40079 14 2.26205 13.9473 2.15976 13.8536C2.05747 13.7598 2 13.6326 2 13.5V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span>Download Report</span></a></div>
    </div>
  </div>
</section>