UI Components – Filytreck Library

<div class="position-fixed bottom-0 start-0 w-100 p-6">
  <div class="py-8 px-12 bg-white mw-7xl mx-auto rounded-3">
    <div class="row align-items-center">
      <div class="col-md-7 col-lg-8 mb-6 mb-md-0">
        <h2 class="font-heading fs-7 fw-medium mb-0">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
      </div>
      <div class="col-md-5 col-lg-4">
        <div class="d-flex flex-wrap gap-2 justify-content-sm-end"><a class="btn btn-sm py-3 btn-dark" href="#">Allow cookies</a><a class="btn btn-sm py-3 btn-outline-light text-dark" href="#">Decline</a></div>
      </div>
    </div>
  </div>
</div>

<section class="pt-12 pt-lg-16">
  <div class="mw-8xl mx-auto mb-20 px-5">
    <div class="text-center"><a class="d-inline-block mb-16" href="#"><img class="img-fluid" style="height: 40px;" src="fily-assets/logos/fily-treck-black-logo.svg" alt=""></a>
      <div class="d-flex mb-16 gap-4 flex-wrap justify-content-center"><a class="btn px-4 py-3 btn-outline-light text-dark" href="#">Our features</a><a class="btn px-4 py-3 btn-outline-light text-dark" href="#">How to use?</a><a class="btn px-4 py-3 btn-outline-light text-dark" href="#">Use cases</a><a class="btn px-4 py-3 btn-outline-light text-dark" href="#">Plans &amp; pricing</a><a class="btn px-4 py-3 btn-outline-light text-dark" href="#">Help center</a></div>
      <div class="mw-sm mw-lg-lg mx-auto text-center">
        <h3 class="font-heading mb-10 fw-medium">Subscribe to our newsletter</h3>
        <form action="">
          <div class="position-relative">
            <input class="form-control ps-6 bg-light-light" type="email">
            <button class="position-absolute top-50 end-0 me-2 translate-middle-y btn btn-sm btn-primary d-flex align-items-center justify-content-center" type="submit">Get started</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="py-5 bg-dark">
    <div class="mw-8xl mx-auto px-5">
      <div class="d-flex flex-wrap gap-6 align-items-center justify-content-between"><span class="text-light fw-medium">© Shuffle 2023. All rights reserved.</span>
        <div class="d-flex align-items-center"><a class="d-inline-block me-2" href="#">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="40" height="40" rx="20" fill="#F5F6F8"></rect>
              <path d="M24.3731 13.2004H26.7039L21.6119 19.0203L27.6022 26.9397H22.9118L19.2381 22.1366L15.0346 26.9397H12.7025L18.1489 20.7148L12.4023 13.2004H17.2118L20.5324 17.5907L24.3731 13.2004ZM23.5551 25.5447H24.8466L16.51 14.5222H15.1241L23.5551 25.5447Z" fill="#060918"></path>
            </svg></a><a class="d-inline-block fw-medium text-secondary" href="#">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="40" height="40" rx="20" fill="#F5F6F8"></rect>
              <g clip-path="url(#clip0_360_251)">
                <path d="M12.25 12.8981C12.25 12.3592 12.4386 11.9146 12.8159 11.5643C13.1931 11.214 13.6836 11.0388 14.2872 11.0388C14.88 11.0388 15.3596 11.2113 15.7261 11.5562C16.1034 11.9119 16.292 12.3754 16.292 12.9466C16.292 13.464 16.1088 13.8951 15.7423 14.2401C15.365 14.5958 14.8692 14.7736 14.2548 14.7736H14.2387C13.6458 14.7736 13.1662 14.5958 12.7997 14.2401C12.4332 13.8844 12.25 13.4371 12.25 12.8981ZM12.4602 27.0451V16.2449H16.0495V27.0451H12.4602ZM18.0381 27.0451H21.6274V21.0144C21.6274 20.6372 21.6705 20.3462 21.7568 20.1414C21.9077 19.7749 22.1367 19.465 22.4439 19.2117C22.7511 18.9584 23.1364 18.8318 23.5999 18.8318C24.8071 18.8318 25.4107 19.6456 25.4107 21.2731V27.0451H29V20.8528C29 19.2575 28.6228 18.0476 27.8682 17.2231C27.1137 16.3985 26.1167 15.9862 24.8772 15.9862C23.4867 15.9862 22.4035 16.5844 21.6274 17.7809V17.8132H21.6112L21.6274 17.7809V16.2449H18.0381C18.0597 16.5898 18.0705 17.6623 18.0705 19.4623C18.0705 21.2623 18.0597 23.7899 18.0381 27.0451Z" fill="#060918"></path>
              </g>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32">
  <div class="container">
    <h2 class="font-heading text-center mb-24">Say hello, and ask a question</h2>
    <div class="mw-4xl mx-auto">
      <form action="">
        <div class="row">
          <div class="col-md-6 mb-6">
            <label class="mb-1 fs-9 fw-medium" for="">First name</label>
            <input class="form-control py-4 px-0 bg-transparent rounded-0 border-0 border-bottom border-secondary-light" type="text" placeholder="Adrew">
          </div>
          <div class="col-md-6 mb-6">
            <label class="mb-1 fs-9 fw-medium" for="">Last name</label>
            <input class="form-control py-4 px-0 bg-transparent rounded-0 border-0 border-bottom border-secondary-light" type="text" placeholder="Robertson">
          </div>
          <div class="col-md-6 mb-6">
            <label class="mb-1 fs-9 fw-medium" for="">Address email</label>
            <input class="form-control py-4 px-0 bg-transparent rounded-0 border-0 border-bottom border-secondary-light" type="email" placeholder="andrewrobertson@gmail.com">
          </div>
          <div class="col-md-6 mb-6">
            <label class="mb-1 fs-9 fw-medium" for="">Subject</label>
            <input class="form-control py-4 px-0 bg-transparent rounded-0 border-0 border-bottom border-secondary-light" type="text" placeholder="Type here">
          </div>
          <div class="col-12 mb-16">
            <label class="mb-1 fs-9 fw-medium" for="">Message</label>
            <input class="form-control py-4 px-0 bg-transparent rounded-0 border-0 border-bottom border-secondary-light" type="text" placeholder="Type subject here">
          </div>
          <div class="col-12">
            <button class="btn px-10 py-5 btn-dark" type="submit">Send message</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark">
  <div class="container">
    <div class="text-center mb-24">
      <h2 class="font-heading text-white mb-10">Stay in touch</h2>
      <p class="fs-7 fw-medium text-white mb-0">Duis pellentesque urna a erat sollicitudin, et molestie leo semper aliquam ligula.</p>
    </div>
    <div class="mw-4xl mx-auto px-6 px-sm-10 py-24 rounded-3 position-relative overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-newsletter.jpg" alt="">
      <div class="mw-4xl mx-auto position-relative">
        <div class="text-center mb-14">
          <h3 class="font-heading text-white fw-medium mb-0">Subscribe to our newsletter</h3>
        </div>
        <div class="mw-lg mx-auto">
          <form action="">
            <div class="position-relative border border-light-dark p-1 rounded-pill">
              <input class="form-control bg-transparent ps-4 ps-sm-8 py-4 text-light" type="email">
              <button class="position-absolute top-50 end-0 me-1 translate-middle-y btn p-0 btn-danger" type="submit" style="width: 56px; height: 56px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path>
                </svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-navigation.jpg" alt="">
    <nav class="position-relative navbar navbar-expand-xl navbar-dark bg-transparent">
      <div class="container-fluid"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-white-logo.svg" alt=""></a>
        <button class="navbar-burger btn btn-outline-light 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="white"></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="white"></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="white"></path>
          </svg>
        </button>
      </div>
    </nav>
  </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="position-relative py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 h-100 w-100" src="fily-assets/gradients/gradient-how-it-work.png" alt="">
  <div class="container position-relative">
    <h2 class="font-heading text-center text-white mb-20">How it works</h2>
    <div class="mw-xl mw-lg-4xl mx-auto py-24 px-8 px-sm-16 px-lg-24 bg-white bg-opacity-10 rounded-3">
      <div class="row mb-20">
        <div class="col-lg-2 mb-8 mb-lg-0">
          <div class="d-flex flex-column align-items-lg-center">
            <div class="d-flex mb-8 align-items-center justify-content-center bg-primary rounded-pill" style="width: 72px; height: 72px;"><span class="fs-5 text-white fw-medium">1</span></div>
            <div class="d-none d-lg-block py-16 bg-white bg-opacity-10 rounded-pill" style="width: 3px;"></div>
          </div>
        </div>
        <div class="col-lg-10">
          <h3 class="font-heading text-white fw-medium mb-8">Streamlined Efficiency</h3>
          <p class="mw-lg fs-6 fw-light text-white mb-0">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
        </div>
      </div>
      <div class="row mb-20">
        <div class="col-lg-2 mb-8 mb-lg-0">
          <div class="d-flex flex-column align-items-lg-center">
            <div class="d-flex mb-8 align-items-center justify-content-center bg-danger rounded-pill" style="width: 72px; height: 72px;"><span class="fs-5 text-white fw-medium">2</span></div>
            <div class="d-none d-lg-block py-16 bg-white bg-opacity-10 rounded-pill" style="width: 3px;"></div>
          </div>
        </div>
        <div class="col-lg-10">
          <h3 class="font-heading text-white fw-medium mb-8">Intuitive Navigation</h3>
          <p class="mw-lg fs-6 fw-light text-white mb-0">Navigate effortlessly through our user-friendly interface, allowing you to easily access and manage all features with just a few clicks.</p>
        </div>
      </div>
      <div class="row mb-20">
        <div class="col-lg-2 mb-8 mb-lg-0">
          <div class="d-flex flex-column align-items-lg-center">
            <div class="d-flex align-items-center justify-content-center bg-warning rounded-pill" style="width: 72px; height: 72px;"><span class="fs-5 text-white fw-medium">3</span></div>
          </div>
        </div>
        <div class="col-lg-10">
          <h3 class="font-heading text-white fw-medium mb-8">Seamless Integration</h3>
          <p class="mw-lg fs-6 fw-light text-white mb-0">Enjoy the convenience of seamless integration with other tools, providing a cohesive and comprehensive solution for your workflow needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-12 pb-32 pt-lg-24 pt-xl-32 overflow-hidden">
  <div class="container">
    <h2 class="font-heading mb-10">Who we are</h2>
    <div class="mw-4xl mb-24">
      <p class="fs-4 fw-medium mb-0">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</p>
    </div>
  </div>
  <div class="position-relative"><img class="img-fluid d-block mb-24 mb-md-32 w-100" style="height: 800px; object-fit: cover;" src="fily-assets/about/pic2.jpg" alt="">
    <div class="position-absolute w-100 px-6 mw-sm-lg me-md-40 bottom-0 mb-n24 end-0">
      <div class="pt-14 pb-10 px-14 rounded-3 bg-light-light">
        <div>
          <h4 class="mb-6">About us</h4>
          <p class="fs-7 text-light-dark fw-medium mb-10">Our mission is to provide a seamless and comprehensive platform that transforms how you approach your daily tasks and goals. We are committed to helping you achieve success with efficiency and precision.</p><a class="btn btn-primary px-8 py-5" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <h2 class="font-heading text-white mb-24">What others say about us</h2>
    <div class="d-flex mb-14">
      <div class="flex-shrink-0 w-100 mw-xl pe-8 pe-sm-10">
        <div class="h-100 py-16 px-8 px-sm-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-inline-flex flex-column flex-sm-row mb-12 align-items-sm-center"><img class="img-fluid rounded-pill" style="width: 72px;" src="fily-assets/testimonials/pic.jpg" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-6"><span class="d-block fs-5 text-white fw-bold">Aleeza Keller</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
          </div>
          <p class="fs-6 text-light-dark mb-0">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-xl pe-8 pe-sm-10">
        <div class="h-100 py-16 px-8 px-sm-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-inline-flex flex-column flex-sm-row mb-12 align-items-sm-center"><img class="img-fluid rounded-pill" style="width: 72px;" src="fily-assets/testimonials/pic2.jpg" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-6"><span class="d-block text-white fs-5 fw-bold">Stephen Leblanc</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
          </div>
          <p class="fs-6 text-light-dark mb-0">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-xl pe-8 pe-sm-10">
        <div class="h-100 py-16 px-8 px-sm-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-inline-flex flex-column flex-sm-row mb-12 align-items-sm-center"><img class="img-fluid rounded-pill" style="width: 72px;" src="fily-assets/testimonials/pic.jpg" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-6"><span class="d-block text-white fs-5 fw-bold">Natasha Adams</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
          </div>
          <p class="fs-6 text-light-dark mb-0">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc.</p>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-center">
      <div class="w-100 bg-secondary-dark rounded-pill me-14">
        <div class="col-4 col-sm-3 col-md-2">
          <div class="w-100 bg-primary rounded-pill" style="height: 3px;"></div>
        </div>
      </div>
      <div class="flex-shrink-0 d-flex ms-auto align-items-center justify-content-center"><a class="d-flex me-4 btn flex-shrink-0 align-items-center justify-content-center btn-secondary-dark p-0" href="#" style="width: 56px; height: 56px;">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path>
          </svg></a><a class="d-flex btn flex-shrink-0 align-items-center justify-content-center btn-primary p-0" href="#" style="width: 56px; height: 56px;">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path>
          </svg></a></div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 py-lg-40 py-xl-52 overflow-hidden"><img class="d-none d-lg-block position-absolute top-0 end-0 h-100 col-5" style="object-fit: cover;" src="fily-assets/http-codes/pic4.jpg" alt="">
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none">
      <h1 class="display-1 font-heading mb-4">404</h1>
      <p class="fs-5 fw-bold mb-16">That page isn’t doesn’t exist or we can’t find it.</p><a class="btn btn-primary" href="#">Back to homepage</a>
    </div>
  </div><img class="d-lg-none img-fluid d-block mt-24 w-100" src="fily-assets/http-codes/pic4.jpg" alt="">
</section>

<section class="position-relative py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-brands.png" alt="">
  <div class="container position-relative">
    <h3 class="font-heading text-center fw-medium text-white mb-16">They trusted us</h3>
    <div class="mw-xs mw-sm-md mx-auto mw-md-3xl mw-xl-none">
      <div class="row mb-n8 justify-content-center">
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/spotify.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Spotify</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/slack.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Slack</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid h-100" src="fily-assets/brands/figma.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Figma</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/apple.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Apple</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/mastercard.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Mastercard</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 offset-xl-1 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/microsoft.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Microsoft</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/opera.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Opera</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid h-100" src="fily-assets/brands/visa.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Visa</span>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-xl-2 mb-8">
          <div class="d-inline-flex align-items-center py-2 ps-2 pe-6 rounded-2 bg-secondary bg-opacity-10">
            <div class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 px-2 py-1 rounded-2" style="width: 48px; height: 48px;"><img class="img-fluid" src="fily-assets/brands/brand.svg" alt=""></div><span class="ms-4 fs-7 text-white fw-medium">Wrike</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-features.jpg" alt="">
  <div class="container position-relative">
    <div class="text-center mb-16">
      <h2 class="font-heading text-white mb-4">Features</h2>
      <p class="fs-6 text-white mb-0">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
    </div>
    <div class="mw-md mx-auto mb-20 mw-lg-none">
      <div class="row">
        <div class="col-lg-7 mb-5 mb-lg-0">
          <div class="h-100 bg-white bg-opacity-25 px-8 px-sm-12 px-xl-16 py-20 rounded-3 border border-light border-opacity-25">
            <h4 class="font-heading text-white mb-6">Everything in one app</h4>
            <p class="mw-md fw-medium fs-6 text-white mb-12">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
            <ul class="list-unstyled mb-0">
              <li class="mb-5">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="28" height="28" rx="14" fill="#5729D6"></rect>
                  <g clip-path="url(#clip0_113_457)">
                    <path d="M11.8746 17.8306C11.534 17.8307 11.2073 17.6953 10.9666 17.4543L8.22153 14.7102C7.92616 14.4147 7.92616 13.9358 8.22153 13.6403C8.517 13.3449 8.99595 13.3449 9.29142 13.6403L11.8746 16.2235L18.7086 9.3895C19.004 9.09413 19.483 9.09413 19.7785 9.3895C20.0738 9.68497 20.0738 10.1639 19.7785 10.4594L12.7826 17.4543C12.5419 17.6953 12.2152 17.8307 11.8746 17.8306Z" fill="white"></path>
                  </g>
                </svg><span class="ms-3 fs-7 fw-medium text-white">Effortless Task Management</span>
              </li>
              <li class="mb-5">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="28" height="28" rx="14" fill="#5729D6"></rect>
                  <g clip-path="url(#clip0_113_457)">
                    <path d="M11.8746 17.8306C11.534 17.8307 11.2073 17.6953 10.9666 17.4543L8.22153 14.7102C7.92616 14.4147 7.92616 13.9358 8.22153 13.6403C8.517 13.3449 8.99595 13.3449 9.29142 13.6403L11.8746 16.2235L18.7086 9.3895C19.004 9.09413 19.483 9.09413 19.7785 9.3895C20.0738 9.68497 20.0738 10.1639 19.7785 10.4594L12.7826 17.4543C12.5419 17.6953 12.2152 17.8307 11.8746 17.8306Z" fill="white"></path>
                  </g>
                </svg><span class="ms-3 fs-7 fw-medium text-white">Intuitive Time Management</span>
              </li>
              <li class="mb-5">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="28" height="28" rx="14" fill="#5729D6"></rect>
                  <g clip-path="url(#clip0_113_457)">
                    <path d="M11.8746 17.8306C11.534 17.8307 11.2073 17.6953 10.9666 17.4543L8.22153 14.7102C7.92616 14.4147 7.92616 13.9358 8.22153 13.6403C8.517 13.3449 8.99595 13.3449 9.29142 13.6403L11.8746 16.2235L18.7086 9.3895C19.004 9.09413 19.483 9.09413 19.7785 9.3895C20.0738 9.68497 20.0738 10.1639 19.7785 10.4594L12.7826 17.4543C12.5419 17.6953 12.2152 17.8307 11.8746 17.8306Z" fill="white"></path>
                  </g>
                </svg><span class="ms-3 fs-7 fw-medium text-white">Comprehensive Goal Setting</span>
              </li>
              <li>
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="28" height="28" rx="14" fill="#5729D6"></rect>
                  <g clip-path="url(#clip0_113_457)">
                    <path d="M11.8746 17.8306C11.534 17.8307 11.2073 17.6953 10.9666 17.4543L8.22153 14.7102C7.92616 14.4147 7.92616 13.9358 8.22153 13.6403C8.517 13.3449 8.99595 13.3449 9.29142 13.6403L11.8746 16.2235L18.7086 9.3895C19.004 9.09413 19.483 9.09413 19.7785 9.3895C20.0738 9.68497 20.0738 10.1639 19.7785 10.4594L12.7826 17.4543C12.5419 17.6953 12.2152 17.8307 11.8746 17.8306Z" fill="white"></path>
                  </g>
                </svg><span class="ms-3 fs-7 fw-medium text-white">Single Platform Convenience</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="bg-white mb-5 bg-opacity-25 px-8 px-sm-10 py-12 rounded-3 border border-light border-opacity-25">
            <h5 class="font-heading text-white mb-6">Increase in the productivity</h5>
            <p class="mw-sm fw-medium fs-6 text-white mb-0">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
          </div>
          <div class="bg-white bg-opacity-25 px-8 px-sm-10 py-12 rounded-3 border border-light border-opacity-25">
            <h5 class="font-heading text-white mb-6">Take charge of your time</h5>
            <p class="mw-md fw-medium fs-6 text-white mb-0">Effortless Time Management for Optimal Productivity. Discover effective strategies and tools to manage your time efficiently.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-danger" href="#">See all features</a></div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light overflow-hidden">
  <div class="container">
    <h2 class="font-heading mb-10">Frequently asked questions</h2>
    <p class="mw-2xl fs-7 fw-medium text-light-dark mb-20">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p>
    <div class="d-flex mb-14">
      <div class="flex-shrink-0 w-100 mw-md pe-10 pe-sm-14">
        <div class="d-flex flex-column h-100 py-14 px-8 px-sm-12 bg-white rounded-3">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="10" fill="#FF9900"></rect>
            <path d="M36.494 23.9679L26.954 16.9679C26.2089 16.4223 25.3272 16.0937 24.4068 16.0185C23.4863 15.9434 22.563 16.1247 21.7393 16.5422C20.9156 16.9598 20.2236 17.5973 19.7401 18.3842C19.2565 19.171 19.0004 20.0763 19 20.9999V34.9999C19.0002 35.9238 19.2563 36.8296 19.7401 37.6168C20.2238 38.404 20.9162 39.0417 21.7404 39.4593C22.5646 39.8768 23.4884 40.0578 24.4092 39.9822C25.3301 39.9066 26.212 39.5773 26.957 39.0309L36.497 32.0309C37.1303 31.5665 37.6452 30.9594 38.0002 30.2589C38.3552 29.5584 38.5401 28.7842 38.5401 27.9989C38.5401 27.2136 38.3552 26.4393 38.0002 25.7388C37.6452 25.0383 37.1303 24.4313 36.497 23.9669L36.494 23.9679ZM35.31 30.4179L25.77 37.4179C25.323 37.7445 24.7944 37.9411 24.2426 37.9858C23.6908 38.0306 23.1374 37.9218 22.6436 37.6715C22.1498 37.4212 21.7349 37.0391 21.4448 36.5676C21.1547 36.0961 21.0008 35.5535 21 34.9999V20.9999C20.9945 20.4452 21.1455 19.9002 21.4358 19.4276C21.7261 18.9549 22.1438 18.5738 22.641 18.3279C23.0639 18.1128 23.5315 18.0004 24.006 17.9999C24.6419 18.0023 25.2602 18.2088 25.77 18.5889L35.31 25.5889C35.6895 25.8676 35.9981 26.2317 36.2107 26.6517C36.4234 27.0718 36.5343 27.536 36.5343 28.0069C36.5343 28.4777 36.4234 28.9419 36.2107 29.362C35.9981 29.7821 35.6895 30.1462 35.31 30.4249V30.4179Z" fill="white"></path>
          </svg>
          <h5 class="font-heading mt-6 mb-10">How can I get started with FilyTreck?</h5>
          <p class="text-secondary fw-medium mt-auto mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-md pe-10 pe-sm-14">
        <div class="d-flex flex-column h-100 py-14 px-8 px-sm-12 bg-white rounded-3">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="10" fill="#273ACF"></rect>
            <g clip-path="url(#clip0_245_1371)">
              <path d="M28 28C29.1867 28 30.3467 27.6481 31.3334 26.9888C32.3201 26.3295 33.0892 25.3925 33.5433 24.2961C33.9974 23.1997 34.1162 21.9933 33.8847 20.8295C33.6532 19.6656 33.0818 18.5965 32.2426 17.7574C31.4035 16.9182 30.3344 16.3468 29.1705 16.1153C28.0067 15.8838 26.8003 16.0026 25.7039 16.4567C24.6075 16.9109 23.6705 17.6799 23.0112 18.6666C22.3519 19.6533 22 20.8133 22 22C22.0016 23.5908 22.6342 25.116 23.7591 26.2409C24.884 27.3658 26.4092 27.9984 28 28ZM28 18C28.7911 18 29.5645 18.2346 30.2223 18.6741C30.8801 19.1136 31.3928 19.7384 31.6955 20.4693C31.9983 21.2002 32.0775 22.0044 31.9231 22.7804C31.7688 23.5563 31.3878 24.269 30.8284 24.8284C30.269 25.3878 29.5563 25.7688 28.7804 25.9231C28.0044 26.0775 27.2002 25.9983 26.4693 25.6955C25.7384 25.3928 25.1136 24.8801 24.6741 24.2223C24.2346 23.5645 24 22.7911 24 22C24 20.9391 24.4214 19.9217 25.1716 19.1716C25.9217 18.4214 26.9391 18 28 18Z" fill="white"></path>
              <path d="M28 30C25.6139 30.0026 23.3262 30.9517 21.639 32.639C19.9517 34.3262 19.0026 36.6139 19 39C19 39.2652 19.1054 39.5196 19.2929 39.7071C19.4804 39.8946 19.7348 40 20 40C20.2652 40 20.5196 39.8946 20.7071 39.7071C20.8946 39.5196 21 39.2652 21 39C21 37.1435 21.7375 35.363 23.0503 34.0503C24.363 32.7375 26.1435 32 28 32C29.8565 32 31.637 32.7375 32.9497 34.0503C34.2625 35.363 35 37.1435 35 39C35 39.2652 35.1054 39.5196 35.2929 39.7071C35.4804 39.8946 35.7348 40 36 40C36.2652 40 36.5196 39.8946 36.7071 39.7071C36.8946 39.5196 37 39.2652 37 39C36.9974 36.6139 36.0483 34.3262 34.361 32.639C32.6738 30.9517 30.3861 30.0026 28 30Z" fill="white"></path>
            </g>
          </svg>
          <h5 class="font-heading mt-6 mb-10">Is there a free trial available for new users?</h5>
          <p class="text-secondary fw-medium mt-auto mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-md pe-10 pe-sm-14">
        <div class="d-flex flex-column h-100 py-14 px-8 px-sm-12 bg-white rounded-3">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="10" fill="#24B428"></rect>
            <g clip-path="url(#clip0_245_1400)">
              <path d="M28 33V37C28 37.55 27.55 38 27 38H23C22.45 38 22 37.55 22 37C22 36.45 22.45 36 23 36H26V34H21C18.24 34 16 31.76 16 29V22C16 19.24 18.24 17 21 17H33C35.76 17 38 19.24 38 22C38 22.55 37.55 23 37 23C36.45 23 36 22.55 36 22C36 20.35 34.65 19 33 19H21C19.35 19 18 20.35 18 22V29C18 30.65 19.35 32 21 32H27C27.55 32 28 32.45 28 33ZM40 29V36C40 38.21 38.21 40 36 40H34C31.79 40 30 38.21 30 36V29C30 26.79 31.79 25 34 25H36C38.21 25 40 26.79 40 29ZM38 29C38 27.9 37.1 27 36 27H34C32.9 27 32 27.9 32 29V36C32 37.1 32.9 38 34 38H36C37.1 38 38 37.1 38 36V29Z" fill="white"></path>
            </g>
          </svg>
          <h5 class="font-heading mt-6 mb-10">Can I use FilyTreck on different devices?</h5>
          <p class="text-secondary fw-medium mt-auto mb-0">Yes, app is compatible with multiple devices, including smartphones, tablets, and desktop computers.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-md pe-10 pe-sm-14">
        <div class="d-flex flex-column h-100 py-14 px-8 px-sm-12 bg-white rounded-3">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="10" fill="#FF9900"></rect>
            <path d="M36.494 23.9679L26.954 16.9679C26.2089 16.4223 25.3272 16.0937 24.4068 16.0185C23.4863 15.9434 22.563 16.1247 21.7393 16.5422C20.9156 16.9598 20.2236 17.5973 19.7401 18.3842C19.2565 19.171 19.0004 20.0763 19 20.9999V34.9999C19.0002 35.9238 19.2563 36.8296 19.7401 37.6168C20.2238 38.404 20.9162 39.0417 21.7404 39.4593C22.5646 39.8768 23.4884 40.0578 24.4092 39.9822C25.3301 39.9066 26.212 39.5773 26.957 39.0309L36.497 32.0309C37.1303 31.5665 37.6452 30.9594 38.0002 30.2589C38.3552 29.5584 38.5401 28.7842 38.5401 27.9989C38.5401 27.2136 38.3552 26.4393 38.0002 25.7388C37.6452 25.0383 37.1303 24.4313 36.497 23.9669L36.494 23.9679ZM35.31 30.4179L25.77 37.4179C25.323 37.7445 24.7944 37.9411 24.2426 37.9858C23.6908 38.0306 23.1374 37.9218 22.6436 37.6715C22.1498 37.4212 21.7349 37.0391 21.4448 36.5676C21.1547 36.0961 21.0008 35.5535 21 34.9999V20.9999C20.9945 20.4452 21.1455 19.9002 21.4358 19.4276C21.7261 18.9549 22.1438 18.5738 22.641 18.3279C23.0639 18.1128 23.5315 18.0004 24.006 17.9999C24.6419 18.0023 25.2602 18.2088 25.77 18.5889L35.31 25.5889C35.6895 25.8676 35.9981 26.2317 36.2107 26.6517C36.4234 27.0718 36.5343 27.536 36.5343 28.0069C36.5343 28.4777 36.4234 28.9419 36.2107 29.362C35.9981 29.7821 35.6895 30.1462 35.31 30.4249V30.4179Z" fill="white"></path>
          </svg>
          <h5 class="font-heading mt-6 mb-10">How can I get started with FilyTreck?</h5>
          <p class="text-secondary fw-medium mt-auto mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-md pe-10 pe-sm-14">
        <div class="d-flex flex-column h-100 py-14 px-8 px-sm-12 bg-white rounded-3">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="10" fill="#5729D6"></rect>
            <g clip-path="url(#clip0_619_554)">
              <path d="M21 20C21 19.448 21.448 19 22 19H24V17C24 16.448 24.448 16 25 16C25.552 16 26 16.448 26 17V19H28C28.552 19 29 19.448 29 20C29 20.552 28.552 21 28 21H26V23C26 23.552 25.552 24 25 24C24.448 24 24 23.552 24 23V21H22C21.448 21 21 20.552 21 20ZM39.236 29.015L32.431 36.652C30.535 38.78 27.814 40 24.965 40H20C17.794 40 16 38.206 16 36V31C16 28.794 17.794 27 20 27H28.858C29.997 27 30.996 27.609 31.547 28.518L34.763 24.984C35.305 24.389 36.045 24.04 36.849 24.003C37.652 23.958 38.422 24.243 39.017 24.785C40.231 25.892 40.329 27.789 39.236 29.014V29.015ZM37.67 26.264C37.471 26.083 37.211 25.997 36.942 26.002C36.672 26.015 36.424 26.131 36.242 26.331L31.816 31.195C31.431 32.266 30.477 33.086 29.302 33.254L24.141 33.991C23.596 34.07 23.088 33.69 23.01 33.143C22.932 32.596 23.312 32.09 23.858 32.012L29.019 31.275C29.578 31.195 30 30.709 30 30.144C30 29.514 29.488 29.002 28.858 29.002H20C18.897 29.002 18 29.899 18 31.002V36.002C18 37.105 18.897 38.002 20 38.002H24.965C27.244 38.002 29.422 37.026 30.938 35.324L37.743 27.686C38.11 27.274 38.077 26.637 37.67 26.265V26.264Z" fill="white"></path>
            </g>
          </svg>
          <h5 class="font-heading mt-6 mb-10">What types of support and assistance do you provide for users?</h5>
          <p class="text-secondary fw-medium mt-auto mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-center">
      <div class="w-100 bg-white rounded-pill me-14">
        <div class="col-4 col-sm-3 col-md-2">
          <div class="w-100 bg-primary rounded-pill" style="height: 3px;"></div>
        </div>
      </div>
      <div class="flex-shrink-0 d-flex ms-auto align-items-center justify-content-center"><a class="d-flex me-4 btn flex-shrink-0 align-items-center justify-content-center bg-white p-0" href="#" style="width: 56px; height: 56px;">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path>
          </svg></a><a class="d-flex btn flex-shrink-0 align-items-center justify-content-center bg-primary p-0" href="#" style="width: 56px; height: 56px;">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path>
          </svg></a></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32">
  <div class="container position-relative">
    <div class="text-center mb-16">
      <h2 class="font-heading mb-4">Features</h2>
      <p class="fs-6 text-light-dark mb-0">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
    </div>
    <div class="mw-md mx-auto mb-20 mw-lg-none">
      <div class="row mx-lg-n10 mb-20">
        <div class="col-lg-4 px-lg-10 py-14 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-secondary-light"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-secondary-light"></div>
          <div class="mw-sm">
            <div class="d-flex align-items-center mb-10">
              <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-warning rounded" style="width: 56px; height: 56px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_113_571)">
                    <path d="M7 0H4C2.93913 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4L0 7C0 8.06087 0.421427 9.07828 1.17157 9.82843C1.92172 10.5786 2.93913 11 4 11H7C8.06087 11 9.07828 10.5786 9.82843 9.82843C10.5786 9.07828 11 8.06087 11 7V4C11 2.93913 10.5786 1.92172 9.82843 1.17157C9.07828 0.421427 8.06087 0 7 0ZM9 7C9 7.53043 8.78929 8.03914 8.41421 8.41421C8.03914 8.78929 7.53043 9 7 9H4C3.46957 9 2.96086 8.78929 2.58579 8.41421C2.21071 8.03914 2 7.53043 2 7V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H7C7.53043 2 8.03914 2.21071 8.41421 2.58579C8.78929 2.96086 9 3.46957 9 4V7Z" fill="white"></path>
                    <path d="M20 0H17C15.9391 0 14.9217 0.421427 14.1716 1.17157C13.4214 1.92172 13 2.93913 13 4V7C13 8.06087 13.4214 9.07828 14.1716 9.82843C14.9217 10.5786 15.9391 11 17 11H20C21.0609 11 22.0783 10.5786 22.8284 9.82843C23.5786 9.07828 24 8.06087 24 7V4C24 2.93913 23.5786 1.92172 22.8284 1.17157C22.0783 0.421427 21.0609 0 20 0ZM22 7C22 7.53043 21.7893 8.03914 21.4142 8.41421C21.0391 8.78929 20.5304 9 20 9H17C16.4696 9 15.9609 8.78929 15.5858 8.41421C15.2107 8.03914 15 7.53043 15 7V4C15 3.46957 15.2107 2.96086 15.5858 2.58579C15.9609 2.21071 16.4696 2 17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V7Z" fill="white"></path>
                    <path d="M7 13H4C2.93913 13 1.92172 13.4214 1.17157 14.1716C0.421427 14.9217 0 15.9391 0 17L0 20C0 21.0609 0.421427 22.0783 1.17157 22.8284C1.92172 23.5786 2.93913 24 4 24H7C8.06087 24 9.07828 23.5786 9.82843 22.8284C10.5786 22.0783 11 21.0609 11 20V17C11 15.9391 10.5786 14.9217 9.82843 14.1716C9.07828 13.4214 8.06087 13 7 13ZM9 20C9 20.5304 8.78929 21.0391 8.41421 21.4142C8.03914 21.7893 7.53043 22 7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V17C2 16.4696 2.21071 15.9609 2.58579 15.5858C2.96086 15.2107 3.46957 15 4 15H7C7.53043 15 8.03914 15.2107 8.41421 15.5858C8.78929 15.9609 9 16.4696 9 17V20Z" fill="white"></path>
                    <path d="M20 13H17C15.9391 13 14.9217 13.4214 14.1716 14.1716C13.4214 14.9217 13 15.9391 13 17V20C13 21.0609 13.4214 22.0783 14.1716 22.8284C14.9217 23.5786 15.9391 24 17 24H20C21.0609 24 22.0783 23.5786 22.8284 22.8284C23.5786 22.0783 24 21.0609 24 20V17C24 15.9391 23.5786 14.9217 22.8284 14.1716C22.0783 13.4214 21.0609 13 20 13ZM22 20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0391 21.7893 20.5304 22 20 22H17C16.4696 22 15.9609 21.7893 15.5858 21.4142C15.2107 21.0391 15 20.5304 15 20V17C15 16.4696 15.2107 15.9609 15.5858 15.5858C15.9609 15.2107 16.4696 15 17 15H20C20.5304 15 21.0391 15.2107 21.4142 15.5858C21.7893 15.9609 22 16.4696 22 17V20Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <div>
                <h6 class="font-heading mb-0">Everything in one app</h6>
              </div>
            </div>
            <p class="fw-medium text-light-dark mb-0">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
          </div>
        </div>
        <div class="col-lg-4 px-lg-8 py-14 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-secondary-light"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-secondary-light"></div>
          <div class="mw-sm">
            <div class="d-flex align-items-center mb-10">
              <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-primary rounded" style="width: 56px; height: 56px;">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_113_582)">
                    <path d="M23.01 3.97607H19.924C19.7262 3.97612 19.5329 4.03479 19.3685 4.14467C19.2041 4.25456 19.076 4.41072 19.0003 4.59342C18.9246 4.77612 18.9048 4.97715 18.9434 5.17111C18.982 5.36506 19.0772 5.54322 19.217 5.68307L20.303 6.76907L16.717 10.3541C16.5264 10.5362 16.273 10.6378 16.0095 10.6378C15.7459 10.6378 15.4925 10.5362 15.302 10.3541L15.132 10.1831C14.5606 9.63715 13.8007 9.3325 13.0105 9.3325C12.2202 9.3325 11.4604 9.63715 10.889 10.1831L5.78898 15.2831C5.60107 15.4715 5.49572 15.7269 5.49609 15.993C5.49647 16.2591 5.60254 16.5142 5.79098 16.7021C5.97942 16.89 6.23478 16.9953 6.50089 16.995C6.76701 16.9946 7.02207 16.8885 7.20998 16.7001L12.31 11.6001C12.5004 11.4178 12.7538 11.316 13.0175 11.316C13.2811 11.316 13.5346 11.4178 13.725 11.6001L13.895 11.7711C14.4666 12.3165 15.2264 12.6209 16.0165 12.6209C16.8066 12.6209 17.5664 12.3165 18.138 11.7711L21.724 8.18508L22.81 9.27107C22.9503 9.40862 23.128 9.50178 23.321 9.53892C23.5139 9.57606 23.7136 9.55553 23.8949 9.47989C24.0763 9.40426 24.2313 9.27687 24.3407 9.11364C24.4501 8.95041 24.509 8.75857 24.51 8.56208V5.47607C24.51 5.07825 24.3519 4.69672 24.0706 4.41541C23.7893 4.13411 23.4078 3.97607 23.01 3.97607Z" fill="white"></path>
                    <path d="M23.5098 21.976H5.50977C4.71412 21.976 3.95105 21.6599 3.38845 21.0973C2.82584 20.5347 2.50977 19.7716 2.50977 18.976V1C2.50977 0.734784 2.40441 0.48043 2.21687 0.292893C2.02934 0.105357 1.77498 0 1.50977 0C1.24455 0 0.990195 0.105357 0.802659 0.292893C0.615122 0.48043 0.509766 0.734784 0.509766 1L0.509766 18.976C0.511353 20.3016 1.03865 21.5724 1.97599 22.5098C2.91332 23.4471 4.18417 23.9744 5.50977 23.976H23.5098C23.775 23.976 24.0293 23.8706 24.2169 23.6831C24.4044 23.4956 24.5098 23.2412 24.5098 22.976C24.5098 22.7108 24.4044 22.4564 24.2169 22.2689C24.0293 22.0814 23.775 21.976 23.5098 21.976Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <div>
                <h6 class="font-heading mb-0"><span class="d-block">Increase in the</span><span>productivity</span></h6>
              </div>
            </div>
            <p class="fw-medium text-light-dark mb-0">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
          </div>
        </div>
        <div class="col-lg-4 pt-14 pb-lg-14 px-lg-10">
          <div class="mw-sm">
            <div class="d-flex align-items-center mb-10">
              <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-info rounded" style="width: 56px; height: 56px;">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_113_589)">
                    <path d="M24.0176 16.0001V21.0001C24.0176 21.7958 23.7015 22.5588 23.1389 23.1215C22.5763 23.6841 21.8132 24.0001 21.0176 24.0001H16.0176C14.6147 23.9987 13.2368 23.6284 12.0222 22.9263C10.8076 22.2242 9.79903 21.2151 9.09758 20.0001C9.85145 19.9947 10.6028 19.9116 11.3396 19.7521C11.9007 20.4538 12.6126 21.0202 13.4224 21.4093C14.2322 21.7984 15.1191 22.0004 16.0176 22.0001H21.0176C21.2828 22.0001 21.5371 21.8948 21.7247 21.7072C21.9122 21.5197 22.0176 21.2654 22.0176 21.0001V16.0001C22.0173 15.1014 21.8148 14.2142 21.4249 13.4044C21.0351 12.5946 20.468 11.8829 19.7656 11.3221C19.9264 10.5855 20.0109 9.83414 20.0176 9.08013C21.2325 9.78159 22.2417 10.7902 22.9437 12.0048C23.6458 13.2194 24.0161 14.5972 24.0176 16.0001ZM17.9946 9.65113C18.0881 8.36277 17.9032 7.06938 17.4524 5.85883C17.0016 4.64828 16.2956 3.54896 15.3822 2.63555C14.4688 1.72215 13.3694 1.01607 12.1589 0.56529C10.9483 0.114515 9.65494 -0.0703926 8.36658 0.0231331C6.08349 0.283865 3.9745 1.37031 2.43675 3.07788C0.899005 4.78544 0.0386053 6.99631 0.0175781 9.29413L0.0175781 14.3341C0.0175781 16.8661 1.52458 18.0001 3.01758 18.0001H8.71758C11.0164 17.9804 13.2286 17.1205 14.9374 15.5827C16.6461 14.0448 17.7335 11.9352 17.9946 9.65113ZM13.9676 4.05113C14.6775 4.76264 15.2263 5.61833 15.5769 6.56032C15.9275 7.50231 16.0716 8.50861 15.9996 9.51113C15.7861 11.2948 14.9281 12.939 13.5869 14.1341C12.2457 15.3292 10.514 15.9929 8.71758 16.0001H3.01758C2.08958 16.0001 2.01758 14.7251 2.01758 14.3341V9.29413C2.02592 7.49851 2.69023 5.76784 3.88549 4.42781C5.08076 3.08778 6.72457 2.2308 8.50758 2.01813C8.67358 2.00613 8.83958 2.00013 9.00558 2.00013C9.92685 1.99927 10.8393 2.17997 11.6907 2.53189C12.5421 2.88381 13.3158 3.40006 13.9676 4.05113Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <div>
                <h6 class="font-heading mb-0"><span class="d-block">Efficient contact with</span><span>the client</span></h6>
              </div>
            </div>
            <p class="fw-medium text-light-dark mb-0">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
          </div>
        </div>
      </div>
      <div class="text-center"><a class="btn btn-outline-dark" href="#">See all features</a></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark">
  <div class="container">
    <div class="mw-3xl mx-auto text-center mb-24">
      <h2 class="font-heading text-white mb-10">Categories</h2>
      <p class="fs-6 text-light-dark fw-medium">Nullam dignissim diam sed velit molestie, at auctor lectus finibus.  Phasellus risus nisl, cursus dictum fermentum finibus tellus malesuada fames.</p>
    </div>
    <div class="mw-sm-xl mw-lg-6xl mx-auto">
      <div class="mb-14 bg-light-dark bg-opacity-10 rounded-3 overflow-hidden">
        <div class="row">
          <div class="col-lg-6 py-24 py-lg-32">
            <div class="ps-12 ps-sm-20 pe-8 pe-sm-16 mx-auto">
              <h3 class="font-heading fw-medium text-white mb-6">Time tracker</h3>
              <p class="fs-7 fw-light text-white mb-16">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec arcu enim. Suspendisse vitae lectus sit amet dolor hendrerit euismod in vel enim.</p><a class="btn-link text-decoration-none fw-bold" href="#"><span class="me-2">Read more</span>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="d-flex h-100 py-40 py-lg-0 w-100 align-items-center justify-content-center bg-primary">
              <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="96" height="96" rx="20" fill="white"></rect>
                <g clip-path="url(#clip0_552_491)">
                  <path d="M48 28C44.0444 28 40.1776 29.173 36.8886 31.3706C33.5996 33.5682 31.0362 36.6918 29.5224 40.3463C28.0087 44.0009 27.6126 48.0222 28.3843 51.9018C29.156 55.7814 31.0608 59.3451 33.8579 62.1421C36.6549 64.9392 40.2186 66.844 44.0982 67.6157C47.9778 68.3874 51.9992 67.9913 55.6537 66.4776C59.3082 64.9638 62.4318 62.4004 64.6294 59.1114C66.827 55.8224 68 51.9556 68 48C67.9943 42.6974 65.8853 37.6137 62.1358 33.8642C58.3863 30.1147 53.3026 28.0057 48 28ZM48 64.6667C44.7037 64.6667 41.4813 63.6892 38.7405 61.8578C35.9997 60.0265 33.8635 57.4235 32.602 54.3781C31.3406 51.3326 31.0105 47.9815 31.6536 44.7485C32.2967 41.5155 33.884 38.5458 36.2149 36.2149C38.5458 33.884 41.5155 32.2967 44.7485 31.6536C47.9815 31.0105 51.3326 31.3405 54.3781 32.602C57.4235 33.8635 60.0265 35.9997 61.8578 38.7405C63.6892 41.4813 64.6667 44.7036 64.6667 48C64.6618 52.4188 62.9043 56.6552 59.7798 59.7798C56.6552 62.9043 52.4188 64.6618 48 64.6667Z" fill="#273ACF"></path>
                  <path d="M47.9962 38C47.5541 38 47.1302 38.1756 46.8177 38.4882C46.5051 38.8007 46.3295 39.2246 46.3295 39.6667V46.875L40.7112 50.395C40.3354 50.6297 40.0683 51.0041 39.9686 51.4357C39.8689 51.8674 39.9448 52.3209 40.1795 52.6967C40.4142 53.0724 40.7886 53.3395 41.2202 53.4392C41.6519 53.5389 42.1054 53.463 42.4812 53.2283L48.8812 49.2283C49.123 49.0768 49.3218 48.8658 49.4587 48.6154C49.5956 48.365 49.6659 48.0837 49.6628 47.7983V39.6667C49.6628 39.2246 49.4872 38.8007 49.1747 38.4882C48.8621 38.1756 48.4382 38 47.9962 38Z" fill="#273ACF"></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-14 bg-light-dark bg-opacity-10 rounded-3 overflow-hidden">
        <div class="row">
          <div class="col-lg-6 py-24 py-lg-32">
            <div class="ps-12 ps-sm-20 pe-8 pe-sm-16 mx-auto">
              <h3 class="font-heading fw-medium text-white mb-6">Timesheets &amp; reports</h3>
              <p class="fs-7 fw-light text-white mb-16">Aenean vitae semper urna. Sed eleifend accumsan turpis, et facilisis justo molestie a. Maecenas tortor odio, commodo consequat sed, ornare viverra ante. Donec ac felis enim.</p><a class="btn-link text-danger text-decoration-none fw-bold" href="#"><span class="me-2">Read more</span>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="d-flex h-100 py-40 py-lg-0 w-100 align-items-center justify-content-center bg-danger">
              <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="96" height="96" rx="20" fill="white"></rect>
                <path d="M59.6667 33.0367C59.6667 33.0233 59.6667 33.0133 59.6667 33V29.6667C59.6667 29.2246 59.4911 28.8007 59.1785 28.4882C58.866 28.1756 58.442 28 58 28C57.558 28 57.134 28.1756 56.8215 28.4882C56.5089 28.8007 56.3333 29.2246 56.3333 29.6667V31.5C55.7848 31.3886 55.2264 31.3328 54.6667 31.3333H53V29.6667C53 29.2246 52.8244 28.8007 52.5118 28.4882C52.1993 28.1756 51.7754 28 51.3333 28C50.8913 28 50.4674 28.1756 50.1548 28.4882C49.8423 28.8007 49.6667 29.2246 49.6667 29.6667V31.3333H46.3333V29.6667C46.3333 29.2246 46.1577 28.8007 45.8452 28.4882C45.5326 28.1756 45.1087 28 44.6667 28C44.2246 28 43.8007 28.1756 43.4882 28.4882C43.1756 28.8007 43 29.2246 43 29.6667V31.3333H41.3333C40.7736 31.3328 40.2152 31.3886 39.6667 31.5V29.6667C39.6667 29.2246 39.4911 28.8007 39.1785 28.4882C38.866 28.1756 38.442 28 38 28C37.558 28 37.134 28.1756 36.8215 28.4882C36.5089 28.8007 36.3333 29.2246 36.3333 29.6667V33V33.0367C35.3013 33.8073 34.4628 34.8076 33.8843 35.9583C33.3057 37.1091 33.003 38.3787 33 39.6667V59.6667C33.0026 61.876 33.8815 63.9941 35.4437 65.5563C37.0059 67.1185 39.124 67.9974 41.3333 68H54.6667C56.876 67.9974 58.9941 67.1185 60.5563 65.5563C62.1185 63.9941 62.9974 61.876 63 59.6667V39.6667C62.997 38.3787 62.6943 37.1091 62.1157 35.9583C61.5372 34.8076 60.6987 33.8073 59.6667 33.0367ZM59.6667 59.6667C59.6667 60.9927 59.1399 62.2645 58.2022 63.2022C57.2645 64.1399 55.9927 64.6667 54.6667 64.6667H41.3333C40.0073 64.6667 38.7355 64.1399 37.7978 63.2022C36.8601 62.2645 36.3333 60.9927 36.3333 59.6667V39.6667C36.3333 38.3406 36.8601 37.0688 37.7978 36.1311C38.7355 35.1935 40.0073 34.6667 41.3333 34.6667H54.6667C55.9927 34.6667 57.2645 35.1935 58.2022 36.1311C59.1399 37.0688 59.6667 38.3406 59.6667 39.6667V59.6667ZM56.3333 41.3333C56.3333 41.7754 56.1577 42.1993 55.8452 42.5118C55.5326 42.8244 55.1087 43 54.6667 43H41.3333C40.8913 43 40.4674 42.8244 40.1548 42.5118C39.8423 42.1993 39.6667 41.7754 39.6667 41.3333C39.6667 40.8913 39.8423 40.4674 40.1548 40.1548C40.4674 39.8423 40.8913 39.6667 41.3333 39.6667H54.6667C55.1087 39.6667 55.5326 39.8423 55.8452 40.1548C56.1577 40.4674 56.3333 40.8913 56.3333 41.3333ZM56.3333 48C56.3333 48.442 56.1577 48.8659 55.8452 49.1785C55.5326 49.4911 55.1087 49.6667 54.6667 49.6667H41.3333C40.8913 49.6667 40.4674 49.4911 40.1548 49.1785C39.8423 48.8659 39.6667 48.442 39.6667 48C39.6667 47.558 39.8423 47.134 40.1548 46.8215C40.4674 46.5089 40.8913 46.3333 41.3333 46.3333H54.6667C55.1087 46.3333 55.5326 46.5089 55.8452 46.8215C56.1577 47.134 56.3333 47.558 56.3333 48ZM49.6667 54.6667C49.6667 55.1087 49.4911 55.5326 49.1785 55.8452C48.8659 56.1577 48.442 56.3333 48 56.3333H41.3333C40.8913 56.3333 40.4674 56.1577 40.1548 55.8452C39.8423 55.5326 39.6667 55.1087 39.6667 54.6667C39.6667 54.2246 39.8423 53.8007 40.1548 53.4882C40.4674 53.1756 40.8913 53 41.3333 53H48C48.442 53 48.8659 53.1756 49.1785 53.4882C49.4911 53.8007 49.6667 54.2246 49.6667 54.6667Z" fill="#FF008F"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-14 bg-light-dark bg-opacity-10 rounded-3 overflow-hidden">
        <div class="row">
          <div class="col-lg-6 py-24 py-lg-32">
            <div class="ps-12 ps-sm-20 pe-8 pe-sm-16 mx-auto">
              <h4 class="font-heading fw-medium text-white mb-6">Real-time active timers</h4>
              <p class="fs-7 fw-light text-white mb-16">Morbi porttitor est tempus urna cursus, gravida consectetur nisi suscipit. Fusce vitae purus in leo dapibus maximus. Proin et nulla a est venenatis mattis eu quis leo.</p><a class="btn-link text-warning text-decoration-none fw-bold" href="#"><span class="me-2">Read more</span>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.39189 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.39189 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="d-flex h-100 py-40 py-lg-0 w-100 align-items-center justify-content-center bg-warning">
              <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="96" height="96" rx="20" fill="white"></rect>
                <g clip-path="url(#clip0_552_521)">
                  <path d="M51.3346 49.6667C51.3373 50.2524 51.1855 50.8285 50.8947 51.337C50.6038 51.8454 50.1841 52.2682 49.6778 52.5628C49.1715 52.8574 48.5965 53.0134 48.0108 53.0151C47.425 53.0167 46.8492 52.864 46.3412 52.5723C45.8333 52.2805 45.4112 51.8601 45.1174 51.3533C44.8237 50.8465 44.6687 50.2713 44.668 49.6855C44.6673 49.0998 44.821 48.5242 45.1136 48.0167C45.4062 47.5093 45.8274 47.0879 46.3346 46.795V39.6667C46.3346 39.2246 46.5102 38.8007 46.8228 38.4882C47.1354 38.1756 47.5593 38 48.0013 38C48.4433 38 48.8673 38.1756 49.1798 38.4882C49.4924 38.8007 49.668 39.2246 49.668 39.6667V46.795C50.1732 47.0855 50.5931 47.5037 50.8856 48.0078C51.1782 48.5118 51.333 49.0839 51.3346 49.6667ZM61.4346 37.2317C63.863 39.8463 65.4755 43.1128 66.0745 46.6305C66.6735 50.1482 66.2329 53.7643 64.8067 57.0353C63.3805 60.3062 61.0308 63.0899 58.0456 65.0449C55.0605 66.9999 51.5697 68.0412 48.0013 68.0412C44.433 68.0412 40.9422 66.9999 37.957 65.0449C34.9718 63.0899 32.6221 60.3062 31.1959 57.0353C29.7697 53.7643 29.3291 50.1482 29.9281 46.6305C30.5271 43.1128 32.1396 39.8463 34.568 37.2317L33.448 35.9867C32.7694 36.2255 32.054 36.3429 31.3346 36.3333C30.8926 36.3333 30.4687 36.1577 30.1561 35.8452C29.8436 35.5326 29.668 35.1087 29.668 34.6667C29.668 34.2246 29.8436 33.8007 30.1561 33.4882C30.4687 33.1756 30.8926 33 31.3346 33C32.643 33 33.0013 32.6417 33.0013 31.3333C33.0013 30.8913 33.1769 30.4674 33.4895 30.1548C33.802 29.8423 34.226 29.6667 34.668 29.6667C35.11 29.6667 35.5339 29.8423 35.8465 30.1548C36.1591 30.4674 36.3346 30.8913 36.3346 31.3333C36.3444 32.1444 36.1854 32.9486 35.868 33.695L37.0446 35.0017C39.7481 32.9671 42.9652 31.7263 46.3346 31.4183V29.6667C46.3346 29.2246 46.5102 28.8007 46.8228 28.4882C47.1354 28.1756 47.5593 28 48.0013 28C48.4433 28 48.8673 28.1756 49.1798 28.4882C49.4924 28.8007 49.668 29.2246 49.668 29.6667V31.4183C53.0373 31.7258 56.2543 32.9661 58.958 35L60.1346 33.6933C59.8174 32.9474 59.6585 32.1438 59.668 31.3333C59.668 30.8913 59.8436 30.4674 60.1561 30.1548C60.4687 29.8423 60.8926 29.6667 61.3346 29.6667C61.7767 29.6667 62.2006 29.8423 62.5132 30.1548C62.8257 30.4674 63.0013 30.8913 63.0013 31.3333C63.0013 32.6417 63.3596 33 64.668 33C65.11 33 65.5339 33.1756 65.8465 33.4882C66.159 33.8007 66.3346 34.2246 66.3346 34.6667C66.3346 35.1087 66.159 35.5326 65.8465 35.8452C65.5339 36.1577 65.11 36.3333 64.668 36.3333C63.9486 36.3429 63.2332 36.2255 62.5546 35.9867L61.4346 37.2317ZM63.0013 49.6667C63.0013 46.6999 62.1216 43.7999 60.4734 41.3331C58.8251 38.8664 56.4825 36.9438 53.7416 35.8085C51.0007 34.6732 47.9847 34.3761 45.075 34.9549C42.1652 35.5337 39.4925 36.9623 37.3947 39.0601C35.2969 41.1579 33.8683 43.8306 33.2895 46.7403C32.7108 49.65 33.0078 52.666 34.1431 55.4069C35.2784 58.1478 37.201 60.4905 39.6678 62.1387C42.1345 63.7869 45.0346 64.6667 48.0013 64.6667C51.9782 64.6623 55.791 63.0805 58.603 60.2684C61.4151 57.4563 62.9969 53.6436 63.0013 49.6667Z" fill="#FF9900"></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light overflow-hidden">
  <div class="container">
    <h2 class="font-heading text-center mb-14">Meet our team</h2>
    <div class="mw-sm mx-auto mw-md-3xl mw-xl-none">
      <div class="row mb-n8">
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium6.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">John Barton</span><span class="fs-9 fw-medium text-primary">CEO, Founder</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium2.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Natasha Adams</span><span class="fs-9 fw-medium text-primary">CEO, Founder</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium4.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Heath Kaufman</span><span class="fs-9 fw-medium text-primary">CEO, Founder</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Aleeza Keller</span><span class="fs-9 fw-medium text-primary">CEO, Founder</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium3.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Aaron York</span><span class="fs-9 fw-medium text-primary">Owner, Director</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="h-100 bg-white rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 270px;" src="fily-assets/team/pic-medium5.jpg" alt="">
            <div class="py-10 px-8">
              <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Jenna Hines</span><span class="fs-9 fw-medium text-primary">CEO, Founder</span></div>
                <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                    </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_210_121)">
                        <path d="M0.25 1.89816C0.25 1.35922 0.438632 0.914602 0.815878 0.564307C1.19313 0.213996 1.68356 0.0388489 2.28716 0.0388489C2.87999 0.0388489 3.35963 0.211296 3.72611 0.556223C4.10336 0.911918 4.29199 1.37539 4.29199 1.94667C4.29199 2.46404 4.10876 2.89518 3.74228 3.2401C3.36503 3.5958 2.86921 3.77365 2.25483 3.77365H2.23866C1.64583 3.77365 1.16619 3.5958 0.79971 3.2401C0.433231 2.88441 0.25 2.43709 0.25 1.89816ZM0.460183 16.0451V5.24493H4.04947V16.0451H0.460183ZM6.03813 16.0451H9.62741V10.0145C9.62741 9.63721 9.67053 9.34619 9.75676 9.14141C9.90765 8.77493 10.1367 8.46504 10.4439 8.21175C10.7511 7.95845 11.1364 7.8318 11.5999 7.8318C12.8071 7.8318 13.4107 8.64558 13.4107 10.2732V16.0451H17V9.8528C17 8.25755 16.6228 7.04766 15.8682 6.22309C15.1137 5.39853 14.1167 4.98624 12.8772 4.98624C11.4867 4.98624 10.4035 5.58446 9.62741 6.78089V6.81322H9.61125L9.62741 6.78089V5.24493H6.03813C6.05968 5.58984 6.07046 6.66231 6.07046 8.46235C6.07046 10.2624 6.05968 12.79 6.03813 16.0451Z" fill="#060918"></path>
                      </g>
                    </svg></a></div>
              </div>
              <div class="mw-sm">
                <p class="text-secondary fw-medium mb-0">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-mg-24 py-lg-32 bg-light-light position-relative overflow-hidden"><img class="position-absolute top-0 start-0 h-100" src="fily-assets/newsletter/laptop.jpg" alt="">
  <div class="container position-relative">
    <div class="mw-md-lg mw-lg-xl ms-auto px-8 px-sm-10 px-lg-16 py-24 bg-white rounded-3">
      <div class="mw-lg mx-auto">
        <h3 class="font-heading fw-medium mb-6">Newsletter</h3>
        <p class="mw-md mw-md-none fs-7 fw-medium text-light-dark mb-14">Subscribe to our newsletter and receive the latest news and exclusive insight every week.</p>
        <div>
          <form action="">
            <div class="position-relative bg-light-light p-1 rounded-pill">
              <input class="form-control bg-transparent ps-4 ps-sm-8 text-dark" type="email" placeholder="Your email address">
              <button class="position-absolute top-50 end-0 me-1 translate-middle-y btn px-4 px-sm-10 py-5 fs-8 btn-primary" type="submit">Get started</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-24">
      <h2 class="font-heading text-center text-white mb-10">Say hello, and ask a question</h2>
      <p class="text-white fs-6 fw-medium mb-0">Nullam dignissim diam sed velit molestie, at auctor lectus finibus phasellus risus nisl.</p>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6 col-xl-5 order-last order-lg-first mt-6 mt-lg-0">
          <div class="d-flex flex-column h-100"><img class="img-fluid d-block h-100 mb-5 w-100 rounded-3" src="fily-assets/contact/pic.jpg" alt="">
            <div class="overflow-hidden h-100">
              <div class="position-relative h-100 bg-light rounded-3" style="padding: 1px;">
                <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
                <div class="position-relative bg-dark h-100 px-8 py-10 rounded-3">
                  <h5 class="text-white">Natasha Adams</h5><span class="d-block mb-10 text-primary fs-9 fw-medium">CEO, Team Leader</span>
                  <h6 class="text-white fw-normal mb-4">Can I help you?</h6>
                  <p class="fs-9 fw-medium text-secondary">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia mauris, at mattis nisl.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-xl-7">
          <div class="overflow-hidden">
            <div class="position-relative bg-light rounded-3" style="padding: 1px;">
              <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
              <div class="position-relative bg-dark px-6 px-sm-14 py-14 rounded-3">
                <form action="">
                  <div class="row">
                    <div class="col-md-6 mb-6">
                      <label class="mb-1 fs-9 fw-medium text-light-dark" for="">First name</label>
                      <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                    </div>
                    <div class="col-md-6 mb-6">
                      <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Last name</label>
                      <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                    </div>
                    <div class="col-12 mb-6">
                      <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Address email</label>
                      <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="email">
                    </div>
                    <div class="col-12 mb-6">
                      <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Subject</label>
                      <input class="form-control fs-8 text-white bg-transparent border border-secondary" type="text">
                    </div>
                    <div class="col-12 mb-16">
                      <label class="mb-1 fs-9 fw-medium text-light-dark" for="">Message</label>
                      <textarea class="form-control fs-8 text-white bg-transparent rounded-3 border border-secondary" name="" id="" style="height: 124px; resize: none;"></textarea>
                    </div>
                    <div class="col-12">
                      <button class="btn px-10 py-5 btn-primary" type="submit">Send message</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-12 pt-lg-16 bg-info">
  <div class="mw-4xl mw-xl-8xl mx-auto mb-20 px-5">
    <div class="row mb-n12">
      <div class="col-md-6 col-xl-3 text-center mb-12">
        <h5 class="text-white fw-bold mb-8">Product</h5>
        <ul class="list-unstyled">
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Time Tracking</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Task Management</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Kanban Board</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Team Collaboration</a></li>
          <li><a class="d-inline-block fs-7 fw-medium text-white" href="#">Team Scheduling</a></li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 text-center mb-12">
        <h5 class="text-white fw-bold mb-8">Use Cases</h5>
        <ul class="list-unstyled">
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Creative &amp; Marketing</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Software &amp; Engineering</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Architecture firms</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Consulting businesses</a></li>
          <li><a class="d-inline-block fs-7 fw-medium text-white" href="#">Educational institutions</a></li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 text-center mb-12">
        <h5 class="text-white fw-bold mb-8">Resources</h5>
        <ul class="list-unstyled">
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Kanban Software</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Timesheet Software</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Gantt Chart Software</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Time Tracking Apps</a></li>
          <li><a class="d-inline-block fs-7 fw-medium text-white" href="#">Project Tracker</a></li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 text-center mb-12">
        <h5 class="text-white fw-bold mb-8">FilyTreck</h5>
        <ul class="list-unstyled">
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Our features</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">How to use?</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Use cases</a></li>
          <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-white" href="#">Plans &amp; pricing</a></li>
          <li><a class="d-inline-block fs-7 fw-medium text-white" href="#">Help center</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="py-5 bg-info-dark bg-opacity-25">
    <div class="mw-8xl mx-auto px-5">
      <div class="d-flex flex-wrap gap-6 align-items-center justify-content-between"><span class="text-light fw-medium">© Shuffle 2023. All rights reserved.</span>
        <div class="d-flex ms-sm-auto align-items-center"><a class="d-inline-block me-4 fw-medium text-white" href="#">Terms</a><a class="d-inline-block fw-medium text-white" href="#">Privacy Policy</a></div>
        <div class="d-flex align-items-center"><a class="d-inline-block me-2" href="#">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="40" height="40" rx="20" fill="#F5F6F8"></rect>
              <path d="M24.3731 13.2004H26.7039L21.6119 19.0203L27.6022 26.9397H22.9118L19.2381 22.1366L15.0346 26.9397H12.7025L18.1489 20.7148L12.4023 13.2004H17.2118L20.5324 17.5907L24.3731 13.2004ZM23.5551 25.5447H24.8466L16.51 14.5222H15.1241L23.5551 25.5447Z" fill="#060918"></path>
            </svg></a><a class="d-inline-block fw-medium text-white" href="#">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="40" height="40" rx="20" fill="#F5F6F8"></rect>
              <g clip-path="url(#clip0_360_251)">
                <path d="M12.25 12.8981C12.25 12.3592 12.4386 11.9146 12.8159 11.5643C13.1931 11.214 13.6836 11.0388 14.2872 11.0388C14.88 11.0388 15.3596 11.2113 15.7261 11.5562C16.1034 11.9119 16.292 12.3754 16.292 12.9466C16.292 13.464 16.1088 13.8951 15.7423 14.2401C15.365 14.5958 14.8692 14.7736 14.2548 14.7736H14.2387C13.6458 14.7736 13.1662 14.5958 12.7997 14.2401C12.4332 13.8844 12.25 13.4371 12.25 12.8981ZM12.4602 27.0451V16.2449H16.0495V27.0451H12.4602ZM18.0381 27.0451H21.6274V21.0144C21.6274 20.6372 21.6705 20.3462 21.7568 20.1414C21.9077 19.7749 22.1367 19.465 22.4439 19.2117C22.7511 18.9584 23.1364 18.8318 23.5999 18.8318C24.8071 18.8318 25.4107 19.6456 25.4107 21.2731V27.0451H29V20.8528C29 19.2575 28.6228 18.0476 27.8682 17.2231C27.1137 16.3985 26.1167 15.9862 24.8772 15.9862C23.4867 15.9862 22.4035 16.5844 21.6274 17.7809V17.8132H21.6112L21.6274 17.7809V16.2449H18.0381C18.0597 16.5898 18.0705 17.6623 18.0705 19.4623C18.0705 21.2623 18.0597 23.7899 18.0381 27.0451Z" fill="#060918"></path>
              </g>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light overflow-hidden">
  <div class="container position-relative">
    <h2 class="font-heading mb-20">Recent happenings and updates</h2><a class="d-none d-md-flex position-absolute top-50 end-0 me-md-12 translate-middle-y btn bg-white border-0 p-0 align-items-center justify-content-center" href="#" style="width: 66px; height: 48px;">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.68464 2.28591C8.59426 2.3789 8.52252 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52252 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52252 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52252 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36446 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86658 2.10093 8.68464 2.28591Z" fill="#060918"></path>
      </svg></a>
    <div class="d-flex mb-8 mb-md-24 flex-nowrap">
      <div class="flex-shrink-0 h-100 w-100 mw-md-xl mw-lg-md mw-xl-xl pe-lg-14 pe-xl-24"><a class="btn d-block h-100 p-0 text-start rounded-3 overflow-hidden" href="#"><img class="img-fluid d-block w-100" style="height: 308px; object-fit: cover; object-position:  top;" src="fily-assets/blog/people.jpg" alt="">
          <div class="pt-10 px-10 pb-12 bg-white">
            <h5 class="font-heading mb-4">2023 Remote Work: A Comprehensive Guide</h5>
            <p class="mw-sm text-light-dark fw-medium mb-0">I have embraced remote work for well over six years, and possibly much longer by the time you come across this—well before the global pandemic pushed professionals to transition their offices to their homes.</p>
          </div></a></div>
      <div class="d-none d-lg-block flex-shrink-0 h-100 mw-lg-md mw-xl-xl pe-lg-14 pe-xl-24"><a class="btn d-block h-100 p-0 text-start rounded-3 overflow-hidden" href="#"><img class="img-fluid d-block w-100" style="height: 308px; object-fit: cover; object-position:  top;" src="fily-assets/blog/woman.jpg" alt="">
          <div class="pt-10 px-10 pb-12 bg-white">
            <h5 class="font-heading mb-4">Mastering the Art of Project Management Success</h5>
            <p class="mw-sm text-light-dark fw-medium mb-0">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
          </div></a></div>
      <div class="d-none d-lg-block flex-shrink-0 h-100 mw-lg-md mw-xl-xl ms-40 pe-lg-14 pe-xl-24"><a class="btn d-block h-100 p-0 text-start rounded-3 overflow-hidden" href="#"><img class="img-fluid d-block w-100" style="height: 308px; object-fit: cover; object-position:  top;" src="fily-assets/blog/work.jpg" alt="">
          <div class="pt-10 px-10 pb-12 bg-white">
            <h5 class="font-heading mb-4">Optimal Work Management Software for Firms</h5>
            <p class="mw-sm text-light-dark fw-medium mb-0">I have embraced remote work for well over six years, and possibly much longer by the time you come across this—well before the global pandemic pushed professionals to transition their offices to their homes.</p>
          </div></a></div>
    </div><a class="btn d-flex d-md-none ms-auto mb-12 bg-white border-0 p-0 align-items-center justify-content-center" href="#" style="width: 66px; height: 48px;">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.68464 2.28591C8.59426 2.3789 8.52252 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52252 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52252 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52252 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36446 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86658 2.10093 8.68464 2.28591Z" fill="#060918"></path>
      </svg></a><a class="btn btn-primary" href="#">View all news</a>
  </div>
</section>

<section>
  <div class="position-relative pb-32"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-brand.jpg" alt="">
    <nav class="position-relative navbar navbar-expand-xl navbar-dark bg-transparent">
      <div class="container-fluid"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-white-logo.svg" alt=""></a>
        <button class="navbar-burger btn btn-outline-light py-3 px-5 ms-auto" type="button" aria-controls="nav01" aria-expanded="false">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_119_1119)">
              <path d="M8.60575 8.00022L9.00988 7.59614L15.3029 1.30376C15.303 1.30375 15.303 1.30375 15.303 1.30374C15.4704 1.13625 15.4704 0.864734 15.303 0.697302L15.3029 0.697285C15.1355 0.529793 14.8639 0.529816 14.6965 0.69727M8.60575 8.00022L14.6965 0.69727M8.60575 8.00022L9.00988 8.4043L15.3029 14.6967C15.4704 14.8642 15.4704 15.1357 15.3029 15.3032L15.3029 15.3032C15.1355 15.4706 14.864 15.4707 14.6965 15.3032C14.6965 15.3032 14.6964 15.3032 14.6964 15.3032L8.40406 9.01012L7.99998 8.606L7.59589 9.01012L1.3035 15.3032C1.3035 15.3032 1.3035 15.3032 1.3035 15.3032C1.13608 15.4706 0.86454 15.4707 0.697025 15.3032C0.529578 15.1357 0.529549 14.8642 0.697021 14.6967C0.697028 14.6967 0.697035 14.6967 0.697041 14.6967L6.99008 8.4043L7.3942 8.00022L6.99007 7.59614L0.697025 1.30375C0.697023 1.30374 0.697022 1.30374 0.69702 1.30374C0.529593 1.13632 0.529556 0.864784 0.697057 0.697269C0.86449 0.529823 1.136 0.529793 1.3035 0.697264C1.3035 0.697271 1.30351 0.697278 1.30352 0.697285L7.59589 6.99032L7.99998 7.39444L8.40406 6.99032L14.6965 0.69727M8.60575 8.00022L14.2924 0.293224L14.6965 0.69727" fill="white" stroke="white" stroke-width="1.14286"></path>
            </g>
          </svg>
        </button>
      </div>
    </nav>
    <div class="position-relative d-flex flex-column justify-content-center mt-16">
      <ul class="list-unstyled mb-24 text-center">
        <li class="mb-10"><a class="btn btn-outline-light border-0 px-5 py-0 fw-medium fs-3" href="#">Our features</a></li>
        <li class="mb-10"><a class="btn btn-outline-light border-0 px-5 py-0 fw-medium fs-3" href="#">How to use?</a></li>
        <li class="mb-10"><a class="btn btn-outline-light border-0 px-5 py-0 fw-medium fs-3" href="#">Use cases</a></li>
        <li><a class="btn btn-outline-light border-0 px-5 py-0 fw-medium fs-3" href="#">Plans &amp; pricing</a></li>
      </ul>
      <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center"><a class="btn mb-4 me-sm-4 btn-outline-light" href="#" style="min-width: 162px;">Login</a><a class="btn btn-primary" href="#" style="min-width: 162px;">Get started</a></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>