Shuffle Components in Filytreck library

<section class="py-12 py-lg-24 py-xl-32 overflow-hidden">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 col-xl-5 mb-16 mb-lg-0">
        <div class="mw-md">
          <h2 class="font-heading mb-10">How it works</h2>
          <p class="fs-6 fw-medium text-light-dark mb-14">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt porta eget massa vitae, vehicula convallis velit.</p><a class="btn btn-primary" href="#">Contact us</a>
        </div>
      </div>
      <div class="col-lg-6 col-xl-7">
        <div class="d-flex gap-5">
          <div class="flex-shrink-0 w-100 mw-md">
            <div class="h-100 px-8 px-sm-12 py-16 bg-success-light rounded-3">
              <h2 class="text-success mb-8">01</h2>
              <h3 class="fw-medium mb-6"><span class="d-block">Streamlined</span><span>Efficiency</span></h3>
              <p class="fs-7 text-light-dark fw-light 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="flex-shrink-0 w-100 mw-md">
            <div class="h-100 px-8 px-sm-12 py-16 bg-warning-light rounded-3">
              <h2 class="text-warning mb-8">02</h2>
              <h3 class="fw-medium mb-6"><span class="d-block">Intuitive</span><span>Navigation</span></h3>
              <p class="fs-7 text-light-dark fw-light 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="flex-shrink-0 w-100 mw-md">
            <div class="h-100 px-8 px-sm-12 py-16 bg-info-light rounded-3">
              <h2 class="text-info mb-8">03</h2>
              <h3 class="fw-medium mb-6"><span class="d-block">Seamless</span><span>Integration</span></h3>
              <p class="fs-7 text-light-dark fw-light mb-0">Experience a platform designed for maximum efficiency, ensuring a smooth and straightforward user journey from start to finish.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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 w-100 h-100" src="fily-assets/gradients/gradient-brands.png" alt="">
  <div class="mw-8xl mx-auto px-5 position-relative">
    <h3 class="font-heading text-center text-white fw-medium mb-16">They trusted us</h3>
    <div class="d-flex flex-wrap gap-8 justify-content-center">
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/spotify.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/slack.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/figma.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/apple-dark.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/mastercard.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/microsoft.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/opera.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/visa.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center bg-light-light rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/brand.svg" alt=""></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-20">Who we are</h2>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 order-last order-lg-first mt-16 mt-lg-0">
          <div class="d-block p-0 rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 463px; object-fit: cover; object-position:  top;" src="fily-assets/about/pic.jpg" alt="">
            <div class="pt-16 px-12 pb-16 bg-white">
              <p class="text-secondary 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. Join us on this journey of productivity optimization, and experience the future of task and time management today."</p><a class="btn btn-primary px-8 py-5" href="#">Read more</a>
            </div>
          </div>
        </div>
        <div class="col-lg-6 mt-lg-16">
          <div class="d-block p-0 rounded-3 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 463px; object-fit: cover; object-position:  top;" src="fily-assets/about/pic2.jpg" alt="">
            <div class="pt-16 px-12 pb-16 bg-white">
              <h3 class="font-heading fw-medium mb-12">Simplify your workflow</h3>
              <ul class="list-unstyled mb-0">
                <li class="d-flex align-items-center mb-4">
                  <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="#F5F6F8"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
                  </svg><span class="ms-4 fs-7 fw-medium">Streamline tasks effortlessly</span>
                </li>
                <li class="d-flex align-items-center mb-4">
                  <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="#F5F6F8"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
                  </svg><span class="ms-4 fs-7 fw-medium">Boost productivity with simplicity</span>
                </li>
                <li class="d-flex align-items-center mb-4">
                  <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="#F5F6F8"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
                  </svg><span class="ms-4 fs-7 fw-medium">Accelerate your work pace</span>
                </li>
                <li class="d-flex align-items-center mb-4">
                  <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="#F5F6F8"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
                  </svg><span class="ms-4 fs-7 fw-medium">Effortless speed and efficiency</span>
                </li>
                <li class="d-flex align-items-center">
                  <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="#F5F6F8"></rect>
                    <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
                  </svg><span class="ms-4 fs-7 fw-medium">Work smarter, not harder</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="position-fixed bottom-0 start-0 w-100 h-100 px-6 py-24 overflow-auto">
  <div class="py-14 px-8 px-sm-14 bg-white mw-lg ms-auto me-lg-32 rounded-3">
    <div class="mb-14">
      <h6 class="font-heading mb-6">About you privacy</h6>
      <p class="fs-7 fw-light text-light-dark mb-10">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis volutpat.</p><a class="btn btn-primary py-3" href="#">Allow cookies</a>
    </div>
    <div>
      <h6 class="font-heading mb-6">Manage Consent Preferences</h6>
      <div class="px-4 py-5 mb-2 bg-light-light rounded-2">
        <div class="d-flex align-items-center justify-content-between"><span class="fs-9 fw-medium">Stricly Necessary Cookies</span><span class="fs-9 fw-medium text-success">Always active</span></div>
      </div>
      <div class="px-4 py-4 mb-2 border border-light-light rounded-2">
        <div class="d-flex flex-wrap align-items-center justify-content-between"><span class="me-5 fs-9 fw-medium">Funcional Cookies</span>
          <div class="flex-shrink-0 d-inline-flex align-items-center rounded-pill border border-light bg-light-light" style="padding: 2px;">
            <button class="btn btn-secondary p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
            <button class="btn bg-transparent p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
          </div>
        </div>
      </div>
      <div class="px-4 py-4 mb-2 border border-light-light rounded-2">
        <div class="d-flex flex-wrap align-items-center justify-content-between"><span class="me-5 fs-9 fw-medium">Performance Cookies</span>
          <div class="flex-shrink-0 d-inline-flex align-items-center rounded-pill border border-light bg-light-light" style="padding: 2px;">
            <button class="btn btn-secondary p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
            <button class="btn bg-transparent p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
          </div>
        </div>
      </div>
      <div class="px-4 py-4 mb-10 border border-light-light rounded-2">
        <div class="d-flex flex-wrap align-items-center justify-content-between"><span class="me-5 fs-9 fw-medium">Personalised ads and content</span>
          <div class="flex-shrink-0 d-inline-flex align-items-center rounded-pill border border-light bg-success-light" style="padding: 2px;">
            <button class="btn btn-transparent p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
            <button class="btn bg-success p-0 rounded-pill" style="width: 20px; height: 20px;"></button>
          </div>
        </div>
      </div>
      <div class="d-flex flex-wrap gap-2"><a class="btn btn-sm py-3 btn-dark" href="#">Reject all</a><a class="btn btn-sm py-3 btn-outline-light text-dark" href="#">Submit my choices</a></div>
    </div>
  </div>
</div>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <h2 class="font-heading text-center text-white mb-24">What others say about us</h2>
    <div class="position-relative mw-4xl mx-auto overflow-hidden" style="max-height: 1100px;">
      <div class="overflow-hidden mb-10">
        <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">
            <div class="row align-items-center">
              <div class="col-md-5 mb-8 mb-md-0"><img class="img-fluid rounded-3" src="fily-assets/testimonials/pic-medium.jpg" alt=""></div>
              <div class="col-md-7">
                <div class="d-flex flex-column flex-sm-row align-items-start justify-content-between mb-10">
                  <div class="mb-8 mb-sm-0 me-sm-10"><span class="d-block fs-5 text-white fw-bold">Heath Kaufman</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
                  <div class="d-inline-flex flex-shrink-0 px-3 py-1 align-items-center bg-light-dark bg-opacity-10 rounded"><span class="me-3 fs-7 fw-medium text-white">4.95</span><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star.svg" alt=""></div>
                </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.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="overflow-hidden mb-10">
        <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">
            <div class="row align-items-center">
              <div class="col-md-5 mb-8 mb-md-0"><img class="img-fluid rounded-3" src="fily-assets/testimonials/pic-medium2.jpg" alt=""></div>
              <div class="col-md-7">
                <div class="d-flex flex-column flex-sm-row align-items-start justify-content-between mb-10">
                  <div class="mb-8 mb-sm-0 me-sm-10"><span class="d-block fs-5 text-white fw-bold">Deacon Galvan</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
                  <div class="d-inline-flex flex-shrink-0 px-3 py-1 align-items-center bg-light-dark bg-opacity-10 rounded"><span class="me-3 fs-7 fw-medium text-white">4.5</span><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star.svg" alt=""></div>
                </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.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="overflow-hidden mb-10">
        <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">
            <div class="row align-items-center">
              <div class="col-md-5 mb-8 mb-md-0"><img class="img-fluid rounded-3" src="fily-assets/testimonials/pic-medium.jpg" alt=""></div>
              <div class="col-md-7">
                <div class="d-flex flex-column flex-sm-row align-items-start justify-content-between mb-10">
                  <div class="mb-8 mb-sm-0 me-sm-10"><span class="d-block fs-5 text-white fw-bold">Heath Kaufman</span><span class="d-block fs-9 fw-medium text-primary">CEO, Founder</span></div>
                  <div class="d-inline-flex flex-shrink-0 px-3 py-1 align-items-center bg-light-dark bg-opacity-10 rounded"><span class="me-3 fs-7 fw-medium text-white">4.95</span><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star.svg" alt=""></div>
                </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.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-absolute bottom-0 start-0 w-100 py-48 py-sm-52 py-md-24 text-center" style="background: linear-gradient(0deg, #060918 21.24%, rgba(6, 9, 24, 0.80) 127.09%);"><a class="btn btn-primary" href="#">Show more</a></div>
    </div>
  </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 w-100 h-100" src="fily-assets/gradients/gradient-httpcodes2.png" alt="">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto py-24 px-8 px-sm-16 text-center bg-dark rounded-3">
      <h1 class="display-2 font-heading text-white mb-2">404</h1>
      <p class="fs-4 fw-light text-white 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>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <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 px-xl-20 pt-24 pb-20 rounded-3">
                <div class="mw-md mw-lg-none mx-auto mx-lg-0">
                  <h3 class="font-heading fw-medium text-white mb-10"><span class="d-block">Download</span><span>our application</span></h3>
                  <p class="fs-8 fw-medium text-white mb-6">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis consequat volutpat.</p>
                  <p class="fs-8 fw-medium text-white mb-14">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci fermentum.</p>
                  <div class="d-flex flex-wrap align-items-center gap-4"><a class="d-inline-block p-0" href="#"><img class="img-fluid" src="fily-assets/download/app-store.png" alt=""></a><a class="d-inline-block p-0" href="#"><img class="img-fluid" src="fily-assets/download/google-play.png" alt=""></a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="position-relative d-flex align-items-end pt-32 pt-lg-24 px-12 px-md-24 px-lg-16 px-xl-28 h-100 w-100 rounded-3 overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-download2.png" alt=""><img class="img-fluid position-relative d-block w-100 mx-auto" src="fily-assets/download/iphone2.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <h3 class="font-heading fw-medium mb-12">Register an account</h3>
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="py-16 px-8 px-sm-12 px-md-16 bg-light-light rounded-3">
            <div class="mw-md mx-auto">
              <form action="">
                <div class="mb-6">
                  <label class="mb-1 fs-9 fw-medium" for="">Email</label>
                  <input class="form-control fs-8 bg-white border border-light" type="email" placeholder="Enter your email">
                </div>
                <div class="mb-10">
                  <label class="mb-1 fs-9 fw-medium" for="">Password</label>
                  <div class="position-relative">
                    <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_447_91)">
                          <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                          <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                        </g>
                      </svg>
                    </button>
                    <input class="form-control fs-8 bg-white border border-light" type="password" placeholder="Your password">
                  </div>
                </div>
                <button class="btn w-100 px-10 py-5 btn-dark" type="submit">Create account</button>
              </form>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md mx-lg-auto">
            <h5 class="font-heading mb-10">You can also use your account</h5><a class="btn btn-outline-light mb-6 py-5 d-flex align-items-center justify-content-center text-dark" href="#"><img class="img-fluid" src="fily-assets/sign-up/google-play.svg" alt=""><span class="ms-3">Continue with Google</span></a><a class="btn btn-outline-light mb-10 py-5 d-flex align-items-center justify-content-center text-dark" href="#"><img class="img-fluid" src="fily-assets/sign-up/apple.svg" alt=""><span class="ms-3">Continue with Apple</span></a>
            <div class="d-flex align-items-center justify-content-center"><span class="fw-medium me-1">Already have an account? </span><a class="d-inline-block fw-semibold text-primary" href="#">Log in</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="position-relative pb-24"><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="d-xl-none 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 class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link px-xl-7" href="#">Our features</a></li>
            <li class="nav-item"><a class="nav-link px-xl-7" href="#">How to use?</a></li>
            <li class="nav-item"><a class="nav-link px-xl-7" href="#">Use cases</a></li>
            <li class="nav-item"><a class="nav-link px-xl-7" href="#">Plans &amp; pricing</a></li>
          </ul>
        </div>
        <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn me-2 px-6 py-4 btn-outline-light" href="#">Login</a><a class="btn px-6 py-4 btn-primary" href="#">Get started</a></div>
      </div>
    </nav>
    <div class="position-relative mw-lg mw-md-6xl mw-xl-8xl px-md-20 mx-auto">
      <div class="container-fluid">
        <div class="position-relative py-12 py-md-16 px-8 px-md-14 bg-white rounded-3">
          <div class="row">
            <div class="col-xl-7 mb-10 mb-xl-0">
              <div class="row">
                <div class="col-md-6 mb-10 mb-md-0">
                  <div class="mw-sm">
                    <h5 class="font-heading mb-10">By industry</h5>
                    <ul class="list-unstyled mb-0">
                      <li class="mb-6"><a class="btn p-0 border-0 text-start fs-7 fw-medium" href="#">Creative &amp; Marketing agencies</a></li>
                      <li class="mb-6"><a class="btn p-0 border-0 text-start fs-7 fw-medium" href="#">Software &amp; Engineering firms</a></li>
                      <li class="mb-6"><a class="btn p-0 border-0 text-start fs-7 fw-medium" href="#">Architecture firms</a></li>
                      <li class="mb-6"><a class="btn p-0 border-0 text-start fs-7 fw-medium" href="#">Consulting businesses</a></li>
                      <li><a class="btn p-0 border-0 text-start fs-7 fw-medium" href="#">Educational institutions </a></li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mw-sm pe-lg-9">
                    <h5 class="font-heading mb-10">By role</h5>
                    <ul class="list-unstyled mb-0">
                      <li class="mb-6"><a class="btn d-block p-0 text-start border-0" href="#"><span class="d-block mb-2 fs-7 fw-medium">For business owners</span>
                          <p class="fs-9 fw-medium text-secondary">Nullam bibendum mollis enim, sed tempus lacus tempus nec. Etiam cursus nec neque at tempor.</p></a></li>
                      <li class="mb-6"><a class="btn d-block p-0 text-start border-0" href="#"><span class="d-block mb-2 fs-7 fw-medium">For project managers</span>
                          <p class="fs-9 fw-medium text-secondary">Nam ut neque nisi. Vestibulum volutpat feugiat libero, tempus ligula. Nullam ut diam sit amet turpis pretium.</p></a></li>
                      <li><a class="btn d-block p-0 text-start border-0" href="#"><span class="d-block mb-2 fs-7 fw-medium">For employees</span>
                          <p class="fs-9 fw-medium text-secondary">Vivamus sapien enim, consequat ac volutpat a, ultrices quis enim. Cras scelerisque vel eros in consequat.</p></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-5">
              <div class="mw-xs mw-lg-md">
                <h5 class="font-heading mb-10">Recommended articles</h5>
                <ul class="list-unstyled mb-0">
                  <li class="mb-6"><a class="btn d-md-flex align-items-center p-0 text-start border-0" href="#"><img class="img-fluid" style="height: 136px; width: 124px;" src="fily-assets/navigations/article.png" alt="">
                      <div class="mt-8 mt-md-0 ms-md-8">
                        <h6 class="font-heading fw-medium mb-6">2023 Remote Work: A Comprehensive Guide</h6>
                        <div class="text-primary"><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>
                        </div>
                      </div></a></li>
                  <li class="mb-6"><a class="btn d-md-flex align-items-center p-0 text-start border-0" href="#"><img class="img-fluid" style="height: 136px; width: 124px;" src="fily-assets/navigations/article2.png" alt="">
                      <div class="mt-8 mt-md-0 ms-md-8">
                        <h6 class="font-heading fw-medium mb-6">Mastering the Art of Project Management Success</h6>
                        <div class="text-primary"><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>
                        </div>
                      </div></a></li>
                  <li><a class="btn d-md-flex align-items-center p-0 text-start border-0" href="#"><img class="img-fluid" style="height: 136px; width: 124px;" src="fily-assets/navigations/article3.png" alt="">
                      <div class="mt-8 mt-md-0 ms-md-8">
                        <h6 class="font-heading fw-medium mb-6">Optimal Work Management Software for Firms</h6>
                        <div class="text-primary"><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>
                        </div>
                      </div></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-black-logo.svg" alt=""></a><a class="navbar-close" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="pt-20 pb-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Our features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">How to use?</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Use cases</a></li>
          <li class="nav-item"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Plans &amp; pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 py-4 mb-4 btn-outline-light text-dark" href="#">Login</a><a class="btn w-100 py-4 btn-primary" href="#">Get started</a></div>
    </nav>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <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 mb-20">
        <div class="col-lg-4 mb-6 mb-lg-0">
          <div class="h-100 py-14 px-10 bg-white rounded-3">
            <div class="mw-xs mx-auto text-center">
              <div class="d-inline-flex mb-6 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>
              <h4 class="font-heading mb-14"><span class="d-block">Everything in</span><span>one app</span></h4>
              <p class="fs-7 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>
        <div class="col-lg-4 mb-6 mb-lg-0">
          <div class="h-100 py-14 px-10 bg-white rounded-3">
            <div class="mw-xs mx-auto text-center">
              <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-primary rounded" style="width: 56px; height: 56px;">
                <svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_611_582)">
                    <path d="M26.7493 4.63867H23.1489C22.9182 4.63872 22.6927 4.70717 22.5009 4.83537C22.3091 4.96357 22.1596 5.14576 22.0713 5.35891C21.983 5.57206 21.9599 5.8066 22.0049 6.03288C22.0499 6.25915 22.161 6.46701 22.3241 6.63017L23.5911 7.89717L19.4074 12.0797C19.1852 12.2921 18.8895 12.4107 18.582 12.4107C18.2745 12.4107 17.9789 12.2921 17.7566 12.0797L17.5583 11.8802C16.8917 11.2433 16.0052 10.8878 15.0832 10.8878C14.1612 10.8878 13.2747 11.2433 12.6081 11.8802L6.65811 17.8302C6.43888 18.05 6.31597 18.3479 6.31641 18.6584C6.31684 18.9689 6.4406 19.2664 6.66044 19.4857C6.88028 19.7049 7.17821 19.8278 7.48867 19.8274C7.79914 19.8269 8.09672 19.7032 8.31594 19.4833L14.2659 13.5333C14.4881 13.3206 14.7838 13.2019 15.0914 13.2019C15.3989 13.2019 15.6946 13.3206 15.9168 13.5333L16.1151 13.7328C16.782 14.3692 17.6684 14.7243 18.5902 14.7243C19.512 14.7243 20.3984 14.3692 21.0653 13.7328L25.2489 9.54917L26.5159 10.8162C26.6796 10.9766 26.887 11.0853 27.1121 11.1287C27.3372 11.172 27.5701 11.148 27.7817 11.0598C27.9933 10.9716 28.1742 10.8229 28.3018 10.6325C28.4294 10.4421 28.4981 10.2182 28.4993 9.98901V6.38867C28.4993 5.92454 28.3149 5.47942 27.9867 5.15124C27.6585 4.82305 27.2134 4.63867 26.7493 4.63867Z" fill="white"></path>
                    <path d="M27.3333 25.6387H6.33333C5.40508 25.6387 4.51484 25.2699 3.85846 24.6135C3.20208 23.9572 2.83333 23.0669 2.83333 22.1387V1.16667C2.83333 0.857247 2.71042 0.560501 2.49162 0.341709C2.27283 0.122916 1.97609 0 1.66667 0C1.35725 0 1.0605 0.122916 0.841709 0.341709C0.622916 0.560501 0.5 0.857247 0.5 1.16667L0.5 22.1387C0.501853 23.6852 1.11703 25.1678 2.21059 26.2614C3.30415 27.355 4.78681 27.9701 6.33333 27.972H27.3333C27.6428 27.972 27.9395 27.8491 28.1583 27.6303C28.3771 27.4115 28.5 27.1148 28.5 26.8053C28.5 26.4959 28.3771 26.1992 28.1583 25.9804C27.9395 25.7616 27.6428 25.6387 27.3333 25.6387Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <h4 class="font-heading mb-14"><span class="d-block">Increase in</span><span>the productivity</span></h4>
              <p class="fs-7 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>
        <div class="col-lg-4">
          <div class="h-100 py-14 px-10 bg-white rounded-3">
            <div class="mw-xs mx-auto text-center">
              <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded" style="width: 56px; height: 56px;">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_611_590)">
                    <path d="M28 18.6669V24.5002C28 25.4285 27.6313 26.3187 26.9749 26.9751C26.3185 27.6315 25.4283 28.0002 24.5 28.0002H18.6667C17.0299 27.9986 15.4224 27.5665 14.0054 26.7474C12.5884 25.9283 11.4117 24.751 10.5933 23.3336C11.4728 23.3273 12.3494 23.2303 13.209 23.0442C13.8637 23.8628 14.6942 24.5236 15.6389 24.9776C16.5837 25.4316 17.6185 25.6672 18.6667 25.6669H24.5C24.8094 25.6669 25.1062 25.544 25.325 25.3252C25.5438 25.1064 25.6667 24.8097 25.6667 24.5002V18.6669C25.6664 17.6183 25.4301 16.5833 24.9753 15.6385C24.5204 14.6937 23.8588 13.8634 23.0393 13.2092C23.227 12.3498 23.3255 11.4732 23.3333 10.5936C24.7508 11.4119 25.9281 12.5886 26.7472 14.0057C27.5663 15.4227 27.9983 17.0302 28 18.6669ZM20.9732 11.2597C21.0823 9.75665 20.8666 8.24769 20.3406 6.83538C19.8147 5.42308 18.991 4.14053 17.9253 3.07489C16.8597 2.00925 15.5772 1.18549 14.1649 0.659587C12.7526 0.133682 11.2436 -0.0820434 9.7405 0.0270699C7.0769 0.331257 4.61641 1.59878 2.82237 3.59094C1.02833 5.5831 0.0245317 8.16244 0 10.8432L0 16.7232C0 19.6772 1.75817 21.0002 3.5 21.0002H10.15C12.8319 20.9772 15.4128 19.974 17.4064 18.1799C19.4 16.3857 20.6686 13.9244 20.9732 11.2597ZM16.275 4.7264C17.1033 5.55649 17.7435 6.5548 18.1525 7.65379C18.5615 8.75278 18.7297 9.92679 18.6457 11.0964C18.3967 13.1774 17.3956 15.0955 15.8309 16.4898C14.2662 17.8841 12.2458 18.6584 10.15 18.6669H3.5C2.41733 18.6669 2.33333 17.1794 2.33333 16.7232V10.8432C2.34306 8.74834 3.11809 6.72923 4.51257 5.16586C5.90705 3.6025 7.82483 2.60268 9.905 2.35457C10.0987 2.34057 10.2923 2.33357 10.486 2.33357C11.5608 2.33257 12.6253 2.54338 13.6186 2.95395C14.6119 3.36453 15.5146 3.96682 16.275 4.7264Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <h4 class="font-heading mb-14"><span class="d-block">Efficient contact</span><span>with the client</span></h4>
              <p class="fs-7 fw-medium text-light-dark mb-0">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
            </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 position-relative">
    <h2 class="font-heading mb-20">Recent happenings and updates</h2>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mb-24 mx-xl-n6">
        <div class="col-lg-4 mb-8 mb-lg-0 px-xl-6"><a class="btn text-start p-0 d-block h-100 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-8 px-8 pb-12 h-100 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="col-lg-4 mb-8 mb-lg-0 px-xl-6"><a class="btn text-start p-0 d-block h-100 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-8 px-8 pb-12 h-100 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="col-lg-4 px-xl-6"><a class="btn text-start p-0 d-block h-100 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-8 px-8 pb-12 h-100 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>
      <div class="text-center"><a class="btn btn-primary" href="#">View all news</a></div>
    </div>
  </div>
</section>