UI Components – Filytreck Library

<section class="py-24 md:py-36 bg-gray-50 overflow-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 4 }">
    <div class="container mx-auto px-4">
        <div class="mb-20 max-w-6xl">
            <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Frequently asked questions</h2>
            <p class="text-xl text-gray-500 font-medium max-w-2xl leading-relaxed">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p>
        </div>
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-7">
            <div x-ref="slide1" class="flex-shrink-0 max-w-md w-full p-7">
                <div class="relative py-14 px-12 h-full bg-white rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-10">
                            <div class="mb-6 flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                <svg class="h-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.494 7.96787L10.954 0.967865C10.2089 0.42225 9.32722 0.0936595 8.40677 0.0185285C7.48631 -0.0566025 6.56302 0.124662 5.7393 0.542223C4.91557 0.959783 4.22358 1.59732 3.74006 2.38415C3.25654 3.17098 3.00039 4.07635 3 4.99987V18.9999C3.00016 19.9238 3.25633 20.8296 3.74007 21.6168C4.22382 22.404 4.91621 23.0417 5.74042 23.4593C6.56463 23.8768 7.48841 24.0578 8.40925 23.9822C9.33008 23.9066 10.212 23.5773 10.957 23.0309L20.497 16.0309C21.1303 15.5665 21.6452 14.9594 22.0002 14.2589C22.3552 13.5584 22.5401 12.7842 22.5401 11.9989C22.5401 11.2136 22.3552 10.4393 22.0002 9.73881C21.6452 9.03831 21.1303 8.43127 20.497 7.96687L20.494 7.96787ZM19.31 14.4179L9.77 21.4179C9.32302 21.7445 8.79437 21.9411 8.24257 21.9858C7.69078 22.0306 7.13736 21.9218 6.64357 21.6715C6.14978 21.4212 5.73488 21.0391 5.4448 20.5676C5.15472 20.0961 5.00078 19.5535 5 18.9999V4.99987C4.99445 4.44521 5.1455 3.90025 5.43578 3.42759C5.72606 2.95493 6.1438 2.57376 6.641 2.32787C7.06389 2.11276 7.53154 2.00038 8.006 1.99987C8.64189 2.00229 9.26022 2.20875 9.77 2.58887L19.31 9.58887C19.6895 9.86756 19.9981 10.2317 20.2107 10.6517C20.4234 11.0718 20.5343 11.536 20.5343 12.0069C20.5343 12.4777 20.4234 12.9419 20.2107 13.362C19.9981 13.7821 19.6895 14.1462 19.31 14.4249V14.4179Z" fill="white"></path>
                                </svg>
                            </div>
                            <h3 class="font-heading text-2xl font-bold">How can I get started with FilyTreck?</h3>
                        </div>
                        <p class="font-medium text-gray-500 leading-relaxed">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                    </div>
                </div>
            </div>
            <div x-ref="slide2" class="flex-shrink-0 max-w-md w-full p-7">
                <div class="relative py-14 px-12 h-full bg-white rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-10">
                            <div class="mb-6 flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                <img class="h-6" src="fily-assets/faq/user.svg" alt="">
                            </div>
                            <h3 class="font-heading text-2xl font-bold">Is there a free trial available for new users?</h3>
                        </div>
                        <p class="font-medium text-gray-500 leading-relaxed">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                    </div>
                </div>
            </div>
            <div x-ref="slide3" class="flex-shrink-0 max-w-md w-full p-7">
                <div class="relative py-14 px-12 h-full bg-white rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-10">
                            <div class="mb-6 flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                <img class="h-6" src="fily-assets/faq/devices.svg" alt="">
                            </div>
                            <h3 class="font-heading text-2xl font-bold">Can I use FilyTreck on different devices?</h3>
                        </div>
                        <p class="font-medium text-gray-500 leading-relaxed">Yes, app is compatible with multiple devices, including smartphones, tablets, and desktop computers.</p>
                    </div>
                </div>
            </div>
            <div x-ref="slide4" class="flex-shrink-0 max-w-md w-full p-7">
                <div class="relative py-14 px-12 h-full bg-white rounded-3xl">
                    <div class="flex flex-col justify-between h-full">
                        <div class="mb-10">
                            <div class="mb-6 flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                <img class="h-6" src="fily-assets/faq/hold.svg" alt="">
                            </div>
                            <h3 class="font-heading text-2xl font-bold">What types of support and assistance do you provide for users?</h3>
                        </div>
                        <p class="font-medium text-gray-500 leading-relaxed">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap items-center -m-7">
            <div class="w-full md:flex-1 p-7">
                <div class="relative bg-white overflow-hidden rounded-full" style="height: 3px;" x-data="{ progress: 0 }" x-init="progress = 100 / slideCount">
                    <div class="absolute top-0 left-0 h-full bg-blue-500" :style="`width: ${progress * (activeSlide + 1)}%`"></div>
                </div>
            </div>
            <div class="w-full md:w-auto p-7">
                <div class="flex flex-wrap justify-center md:justify-end">
                    <div class="w-auto p-2">
                        <a href="#" x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <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="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="w-auto p-2">
                        <a href="#" x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-14 h-14 text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                            <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="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section x-data="{ mobileNavOpen: false, dropdown: false }" class="pb-24 md:pb-32">
    <div class="py-1 text-center bg-pink-500">
        <div class="text-sm font-light text-light text-white">
            <span>Get the Premium plan at a 15% discount using code</span>
            <a href="#" class="inline-flex items-center">
                <span class="mr-2 font-bold">WINTERisCOMING</span>
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
                        <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="white"></path>
                    </svg>
                </span>
            </a>
        </div>
    </div>
    <nav class="relative px-12 py-5">
        <div class="flex items-center justify-between">
            <a class="relative z-10 pr-4 lg:pr-0" href="#">
                <img class="h-9" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
            </a>
            <ul class="hidden xl:absolute xl:top-1/2 xl:left-1/2 xl:transform xl:-translate-y-1/2 xl:-translate-x-1/2 xl:flex lg:justify-center gap-14">
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Our features</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">How to use?</a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = true" :class="{'text-gray-800': dropdown}" class="flex items-center text-lg text-black hover:text-gray-800 font-medium transition duration-200">
                        <span class="mr-2.5">Use cases</span>
                        <div :class="{'rotate-180': dropdown}" class="transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" x-on:mousemove="dropdown = false" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Plans &amp; pricing</a>
                </li>
            </ul>
            <div class="hidden xl:flex items-center gap-2">
                <a class="hidden 2xl:block mr-8" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_231_6677)">
                            <path d="M19.6343 17.871L15.7634 13.9984C18.6598 10.1278 17.87 4.64195 13.9994 1.74551C10.1288 -1.15092 4.64292 -0.361157 1.74649 3.50949C-1.14994 7.38013 -0.36018 12.866 3.51046 15.7624C6.61969 18.0891 10.8901 18.0891 13.9994 15.7624L17.872 19.635C18.3587 20.1216 19.1477 20.1216 19.6343 19.635C20.121 19.1483 20.121 18.3593 19.6343 17.8727L19.6343 17.871ZM8.7872 15.015C5.34716 15.015 2.55848 12.2263 2.55848 8.78623C2.55848 5.34618 5.34716 2.55751 8.7872 2.55751C12.2273 2.55751 15.0159 5.34618 15.0159 8.78623C15.0123 12.2247 12.2257 15.0113 8.7872 15.015Z" fill="#19191B"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_6677">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                <a class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center h-12 p-5 text-black border border-gray-300 xl:hidden rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.75 6.75003H1.25C0.559648 6.75003 0 7.30968 0 8.00003C0 8.69038 0.559648 9.25003 1.25 9.25003H18.75C19.4404 9.25003 20 8.69038 20 8.00003C20 7.30968 19.4404 6.75003 18.75 6.75003Z" fill="currentColor"></path>
                    <path d="M1.25 3.41669H18.75C19.4404 3.41669 20 2.85704 20 2.16669C20 1.47634 19.4404 0.916687 18.75 0.916687H1.25C0.559648 0.916687 0 1.47634 0 2.16669C0 2.85704 0.559648 3.41669 1.25 3.41669Z" fill="currentColor"></path>
                    <path d="M18.75 12.5834H1.25C0.559648 12.5834 0 13.143 0 13.8334C0 14.5237 0.559648 15.0834 1.25 15.0834H18.75C19.4404 15.0834 20 14.5237 20 13.8334C20 13.143 19.4404 12.5834 18.75 12.5834Z" fill="currentColor"></path>
                </svg>
            </a>
        </div>
    </nav>
    <div :class="{'hidden': !dropdown}" class="hidden absolute w-full z-40 px-8 lg:px-20 2xl:px-40">
        <div x-on:mouseleave="dropdown = false">
            <div class="bg-white rounded-3xl">
                <div class="flex flex-wrap divide-x divide-gray-100">
                    <div class="w-7/12 py-20">
                        <div class="flex px-16 -m-8">
                            <div class="w-1-2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By industry</h3>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Creative &amp; Marketing agencies</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Software &amp; Engineering firms</a>
                                <a href="#" class="mb-6 block max- w-max text-lg hover:text-gray-700 font-medium">Architecture firms</a>
                                <a href="#" class="mb-6 block max-w-max text-lg hover:text-gray-700 font-medium">Consulting businesses</a>
                                <a href="#" class="block max-w-max text-lg hover:text-gray-700 font-medium">Educational institutions </a>
                            </div>
                            <div class="w-1/2 p-8">
                                <h3 class="mb-10 font-heading text-2xl font-bold">By role</h3>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For business owners</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nullam bibendum mollis enim, sed tempus lacus tempus nec. Etiam cursus nec neque at tempor.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For project managers</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Nam ut neque nisi. Vestibulum volutpat feugiat libero, tempus ligula. Nullam ut diam sit amet turpis pretium.</p>
                                <a href="#" class="mb-2.5 block max-w-max text-lg hover:text-gray-800 font-medium">For employees</a>
                                <p class="text-sm mb-6 text-gray-500 font-medium">Vivamus sapien enim, consequat ac volutpat a, ultrices quis enim. Cras scelerisque vel eros in consequat.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 py-20">
                        <div class="px-16">
                            <h3 class="mb-10 font-heading text-2xl font-bold">Recommended articles</h3>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">2023 Remote Work: A Comprehensive Guide</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">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>
                            <div class="mb-6">
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article2.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Mastering the Art of Project Management Success</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">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>
                            <div>
                                <div class="flex flex-wrap items-center -m-4">
                                    <div class="w-auto p-4">
                                        <div class="overflow-hidden rounded-3xl" style="width: 130px;height: 130px;">
                                            <img class="w-full h-full object-cover" src="fily-assets/navigations/article3.png" alt="">
                                        </div>
                                    </div>
                                    <div class="flex-1 p-4">
                                        <h3 class="mb-6 text-xl font-medium leading-snug">Optimal Work Management Software for Firms</h3>
                                        <a href="#" class="flex flex-wrap items-center text-blue-500 hover:text-blue-600">
                                            <span class="mr-2 font-semibold transition duration-200">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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div :class="{'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex flex-col justify-between h-full">
                <div class="flex items-center justify-between mb-8">
                    <a class="pr-4" href="#">
                        <img class="h-8" src="fily-assets/logos/fily-treck-black-logo.svg" alt="">
                    </a>
                    <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 18L18 6M6 6L18 18" stroke="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-8 py-16">
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Our features</a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">How to use?</a>
                    </li>
                    <li>
                        <a href="#" class="inline-flex items-center text-lg text-black hover:text-gray-800 font-medium transition duration-200">
                            <span class="mr-2.5">Use cases</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                                <g>
                                    <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath>
                                        <rect width="12" height="12" fill="white" transform="translate(0.5 0.5)"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-lg text-black hover:text-gray-800 font-medium transition duration-200">Plans &amp; pricing</a>
                    </li>
                </ul>
                <div class="flex flex-col items-center gap-2">
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-white focus:bg-white border border-gray-100 rounded-full focus:ring-4 focus:ring-white focus:ring-opacity-50 transition duration-200" href="#">Login</a>
                    <a class="inline-flex justify-center items-center text-center w-full h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200" href="#">Get started</a>
                </div>
            </div>
        </nav>
    </div>
    <div>
        <div class="container mx-auto px-4">
            <div class="pt-18">
                <h3 class="mb-16 font-heading text-4xl font-medium">Register an account</h3>
                <div class="flex flex-wrap items-center -m-8">
                    <div class="w-full md:w-1/2 p-8">
                        <div class="px-10 md:px-16 py-16 bg-gray-50 rounded-3xl">
                            <form action="#" class="max-w-lg mx-auto">
                                <div class="flex flex-wrap -m-3 mb-7">
                                    <div class="w-full p-3">
                                        <label for="signup-input-05-1" class="mb-2 inline-block text-sm font-medium">Email</label>
                                        <input id="signup-input-05-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-white font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                    </div>
                                    <div class="w-full p-3">
                                        <div class="relative">
                                            <label for="signup-input-05-2" class="mb-2 inline-block text-sm font-medium">Password</label>
                                            <div class="relative" x-data="{ visible: false }">
                                                <input id="signup-input-05-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-white font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                                <div x-on:click="visible = !visible" class="absolute right-6 top-1/2 transform -translate-y-1/2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                        <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>
                                                        <defs>
                                                            <clipPath id="clip0_447_91">
                                                                <rect width="18" height="18" fill="white"></rect>
                                                            </clipPath>
                                                        </defs>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="inline-flex justify-center items-center text-center w-full h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Create account</button>
                            </form>
                        </div>
                    </div>
                    <div class="w-full md:w-1/2 p-8">
                        <div class="max-w-lg mx-auto">
                            <h3 class="mb-10 font-heading text-2xl font-bold">You can also use your account</h3>
                            <a href="#" class="inline-flex justify-center items-center text-center w-full mb-4 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                                <img class="mr-3" src="fily-assets/sign-up/google-play.svg" alt="">
                                <span>Continue with Google</span>
                            </a>
                            <a href="#" class="inline-flex justify-center items-center text-center w-full mb-10 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                                <img class="mr-3" src="fily-assets/sign-up/apple.svg" alt="">
                                <span>Continue with Apple</span>
                            </a>
                            <span class="font-medium text-center">Already have an account? <a href="#" class="font-semibold text-blue-500 hover:text-blue-600">Log in</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt-24 md:pt-36 bg-black overflow-hidden" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-white text-center">What others say about us</h2>
    </div>
    <div class="relative max-w-5xl mx-auto px-4" :style="showContent ? 'height: auto' : 'height: 1200px'" style="height: 1200px;">
        <div :class="{'hidden': showContent}" class="flex items-center justify-center absolute z-20 bottom-0 left-0 w-full h-44 md:h-72 px-4" style="background: linear-gradient(0deg, #060918 21.24%, rgba(6, 9, 24, 0.80) 127.09%);">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Show more</a>
        </div>
        <div class="mb-10 p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 p-10 lg:p-18 h-full">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full md:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 248px; height: 275px" src="fily-assets/testimonials/pic-medium.jpg" alt="">
                        </div>
                        <div class="w-full md:w-2/3 p-5">
                            <div class="flex flex-wrap justify-between -m-2 mb-8 pt-8">
                                <div class="w-full md:flex-1 p-2">
                                    <h3 class="font-heading text-2xl text-white font-bold">Heath Kaufman</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full md:w-auto p-2">
                                    <div class="inline-flex items-center px-2.5 h-8 bg-white bg-opacity-10 rounded-xl gap-1">
                                        <span class="font-medium mr-1.5 text-white">4.95</span>
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <p class="text-xl text-gray-500 leading-normal">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 class="mb-10 p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 p-10 lg:p-18 h-full">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full md:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 248px; height: 275px" src="fily-assets/testimonials/pic-medium2.jpg" alt="">
                        </div>
                        <div class="w-full md:w-2/3 p-5">
                            <div class="flex flex-wrap justify-between -m-2 mb-8 pt-8">
                                <div class="w-full md:flex-1 p-2">
                                    <h3 class="font-heading text-2xl text-white font-bold">Deacon Galvan</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full md:w-auto p-2">
                                    <div class="inline-flex items-center px-2.5 h-8 bg-white bg-opacity-10 rounded-xl gap-1">
                                        <span class="font-medium mr-1.5 text-white">4.35</span>
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <p class="text-xl text-gray-500 leading-normal">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 class="mb-10 p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 p-10 lg:p-18 h-full">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full md:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 248px; height: 275px" src="fily-assets/testimonials/pic-medium.jpg" alt="">
                        </div>
                        <div class="w-full md:w-2/3 p-5">
                            <div class="flex flex-wrap justify-between -m-2 mb-8 pt-8">
                                <div class="w-full md:flex-1 p-2">
                                    <h3 class="font-heading text-2xl text-white font-bold">Margaret Reiss</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full md:w-auto p-2">
                                    <div class="inline-flex items-center px-2.5 h-8 bg-white bg-opacity-10 rounded-xl gap-1">
                                        <span class="font-medium mr-1.5 text-white">4.9</span>
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <p class="text-xl text-gray-500 leading-normal">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 class="mb-10 p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 p-10 lg:p-18 h-full">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full md:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 248px; height: 275px" src="fily-assets/testimonials/pic-medium2.jpg" alt="">
                        </div>
                        <div class="w-full md:w-2/3 p-5">
                            <div class="flex flex-wrap justify-between -m-2 mb-8 pt-8">
                                <div class="w-full md:flex-1 p-2">
                                    <h3 class="font-heading text-2xl text-white font-bold">Mark Can</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full md:w-auto p-2">
                                    <div class="inline-flex items-center px-2.5 h-8 bg-white bg-opacity-10 rounded-xl gap-1">
                                        <span class="font-medium mr-1.5 text-white">4.9</span>
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <p class="text-xl text-gray-500 leading-normal">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 class="mb-10 p-px bg-gradient-white overflow-hidden rounded-3xl">
            <div class="relative h-full">
                <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                <div class="relative z-10 p-10 lg:p-18 h-full">
                    <div class="flex flex-wrap -m-5">
                        <div class="w-full md:w-1/3 p-5">
                            <img class="object-cover transform hover:scale-105 rounded-3xl transition duration-200" style="width: 248px; height: 275px" src="fily-assets/testimonials/pic-medium.jpg" alt="">
                        </div>
                        <div class="w-full md:w-2/3 p-5">
                            <div class="flex flex-wrap justify-between -m-2 mb-8 pt-8">
                                <div class="w-full md:flex-1 p-2">
                                    <h3 class="font-heading text-2xl text-white font-bold">Elizabeth Wenger</h3>
                                    <p class="text-sm text-blue-500 font-medium">Owner, Director</p>
                                </div>
                                <div class="w-full md:w-auto p-2">
                                    <div class="inline-flex items-center px-2.5 h-8 bg-white bg-opacity-10 rounded-xl gap-1">
                                        <span class="font-medium mr-1.5 text-white">4.9</span>
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <p class="text-xl text-gray-500 leading-normal">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>
</section>

<section class="relative pt-24 pb-28 bg-black">
    <img class="absolute top-0 left-0 w-full h-full object-cover select-none" src="fily-assets/gradients/gradient-brand.jpg" alt="">
    <div class="relative container mx-auto px-4">
        <h2 class="mb-16 font-heading text-4xl font-medium text-white text-center">They trusted us</h2>
        <div class="flex flex-wrap justify-center -m-4">
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 52px;" src="fily-assets/brands/spotify.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 34px;" src="fily-assets/brands/slack2.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 45px;" src="fily-assets/brands/figma.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 52px;" src="fily-assets/brands/apple-dark.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 37px;" src="fily-assets/brands/mastercard.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 42px;" src="fily-assets/brands/microsoft.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 26px;" src="fily-assets/brands/visa.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 32px;" src="fily-assets/brands/brand.svg" alt="">
                </div>
            </div>
            <div class="w-auto p-4">
                <div class="flex justify-center items-center bg-white rounded-3xl" style="width: 120px; height: 120px;">
                    <img style="height: 52px;" src="fily-assets/brands/opera.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-black">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-center text-white font-bold">What others say about us</h2>
        <p class="mb-24 text-xl text-white text-center font-medium">Nullam dignissim diam sed velit molestie, at auctor lectus finibus phasellus risus nisl.</p>
        <div class="flex flex-wrap -m-2.5">
            <div class="w-full md:w-1/3 p-2.5">
                <img class="mb-5 w-full object-cover rounded-3xl" style="height: 359px;" src="fily-assets/contact/pic.jpg" alt="">
                <div class="p-px bg-gradient-white overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                        <div class="relative z-10 pt-10 pb-14 px-8 h-full">
                            <h3 class="mb-2 font-heading text-2xl text-white font-bold">Natasha Adams</h3>
                            <p class="mb-10 text-sm text-blue-500 font-medium">CEO, Team Leader</p>
                            <h4 class="mb-4 font-heading text-xl text-white font-medium">Can I help you?</h4>
                            <p class="text-sm text-gray-500 font-medium leading-normal">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 class="w-full md:w-2/3 p-2.5">
                <div class="h-full p-px bg-gradient-white overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                        <form action="#" class="relative z-10 pt-10 pb-14 px-8 md:px-16 rounded-3xl">
                            <div class="flex flex-wrap -m-2.5 mb-3.5">
                                <div class="w-full md:w-1/2 p-2.5">
                                    <label for="contact-input-05-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">First name</label>
                                    <input id="contact-input-05-1" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                </div>
                                <div class="w-full md:w-1/2 p-2.5">
                                    <label for="contact-input-05-2" class="mb-2 inline-block text-sm text-gray-500 font-medium">Last name</label>
                                    <input id="contact-input-05-2" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                </div>
                            </div>
                            <div class="flex flex-wrap -m-3 mb-11">
                                <div class="w-full p-3">
                                    <label for="contact-input-05-3" class="mb-2 inline-block text-sm text-gray-500 font-medium">Address email</label>
                                    <input id="contact-input-05-3" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                </div>
                                <div class="w-full p-3">
                                    <label for="contact-input-05-4" class="mb-2 inline-block text-sm text-gray-500 font-medium">Subject</label>
                                    <input id="contact-input-05-4" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                </div>
                                <div class="w-full p-3">
                                    <label for="contact-textarea-05-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">Message</label>
                                    <textarea id="contact-textarea-05-1" placeholder="Type message here" class="w-full bg-transparent p-6 h-28 font-semibold text-white placeholder-gray-500 outline-none focus:ring focus:ring-blue-200 border border-gray-600 rounded-3xl resize-none transition duration-2000"></textarea>
                                </div>
                            </div>
                            <button type="submit" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message
                          
                    </button></form></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50" style="background: url('fily-assets/newsletter/laptop.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-end -m-2.5">
            <div class="w-full md:w-3/4 lg:w-1/2 p-2.5">
                <div class="p-8 md:px-20 py-24 h-full max-w-4xl mx-auto bg-white rounded-3xl">
                    <h2 class="mb-6 font-heading text-3xl md:text-4xl font-medium">Newsletter</h2>
                    <p class="mb-12 text-lg text-gray-500 font-medium max-w-xl">Subscribe to our newsletter and receive the latest news and exclusive insight every week. </p>
                    <div class="relative p-1.5 max-w-md mx-auto md:ml-0 bg-gray-50 rounded-2xl md:rounded-full focus-within:ring-4 focus:ring-blue-200 transition duration-200">
                        <div class="relative">
                            <input id="newsletter-input-05-1" type="text" class="py-4 md:pl-8 md:pr-44 w-full text-black placeholder-black font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                            <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center text-center w-full md:w-auto h-14 md:h-full py-2 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">Get started</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="relative py-24 md:py-36 bg-black">
    <img class="absolute top-0 left-0 w-full h-full select-none" src="fily-assets/gradients/gradient-httpcodes2.png" alt="">
    <div class="relative container mx-auto px-4">
        <div class="py-24 px-10 md:px-20 bg-black text-center max-w-5xl mx-auto rounded-3xl">
            <h2 class="font-heading text-7xl md:text-8xl font-bold text-center text-white">404</h2>
            <p class="mb-16 text-2xl md:text-3xl text-white font-light">That page isn’t doesn’t exist or we can’t find it.</p>
            <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Back to homepage</a>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 overflow-hidden">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8">
            <div class="w-full md:w-1/2 p-8">
                <div class="md:max-w-md">
                    <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">How it works</h2>
                    <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt porta eget massa vitae, vehicula convallis velit.</p>
                    <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Contact us</a>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="flex flex-nowrap -m-5">
                    <div class="flex-shrink-0 max-w-md w-full p-5">
                        <div class="py-16 px-12 h-full bg-green-50 rounded-3xl">
                            <h2 class="mb-10 font-heading text-5xl text-green-500 font-bold">01</h2>
                            <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Streamlined Efficiency</h2>
                            <p class="text-xl text-gray-500 font-light leading-normal">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 max-w-md w-full p-5">
                        <div class="py-16 px-12 h-full bg-orange-50 rounded-3xl">
                            <h2 class="mb-10 font-heading text-5xl text-orange-500 font-bold">02</h2>
                            <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Intuitive Navigation</h2>
                            <p class="text-xl text-gray-500 font-light leading-normal">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 max-w-md w-full p-5">
                        <div class="py-16 px-12 h-full bg-blue-50 rounded-3xl">
                            <h2 class="mb-10 font-heading text-5xl text-blue-500 font-bold">03</h2>
                            <h2 class="mb-6 font-heading text-3xl lg:text-4xl font-medium">Seamless Integration</h2>
                            <p class="text-xl text-gray-500 font-light leading-normal">Enjoy the convenience of seamless integration with other tools, providing a cohesive and comprehensive solution for your workflow needs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-36 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl text-center font-bold">Features</h2>
        <p class="mb-20 text-xl text-gray-500 font-medium text-center">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/2 lg:w-1/3 p-5">
                <div class="px-10 py-16 h-full text-center bg-white rounded-3xl">
                    <div class="flex items-center justify-center mb-6 w-14 h-14 mx-auto bg-orange-500 rounded-xl">
                        <img class="h-6" src="fily-assets/features/app.svg" alt="">
                    </div>
                    <h3 class="font-heading mb-16 text-3xl font-bold leading-snug">Everything in one app</h3>
                    <p class="text-lg text-gray-500 font-medium leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-5">
                <div class="px-10 py-16 h-full text-center bg-white rounded-3xl">
                    <div class="flex items-center justify-center mb-6 w-14 h-14 mx-auto bg-blue-500 rounded-xl">
                        <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                    </div>
                    <h3 class="font-heading mb-16 text-3xl font-bold leading-snug">Increase in the productivity</h3>
                    <p class="text-lg text-gray-500 font-medium leading-relaxed">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-5">
                <div class="px-10 py-16 h-full text-center bg-white rounded-3xl">
                    <div class="flex items-center justify-center mb-6 w-14 h-14 mx-auto bg-purple-500 rounded-xl">
                        <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                    </div>
                    <h3 class="font-heading mb-16 text-3xl font-bold leading-snug">Efficient contact with the client</h3>
                    <p class="text-lg text-gray-500 font-medium leading-relaxed">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-24 md:py-40 bg-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-24 font-heading text-4xl md:text-5xl font-bold text-center">Recent happenings and updates</h2>
        <div class="flex flex-wrap -m-6">
            <div class="w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/woman.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">Mastering the Art of Project Management Success</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/work.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">Optimal Work Management Software for Firms</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people2.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">Work Software Essentials</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/woman.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">Project Management Mastery</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-6">
                <div class="relative h-full bg-white overflow-hidden rounded-3xl">
                    <div class="group relative overflow-hidden" style="height: 308px">
                        <img class="absolute w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/work.jpg" alt="">
                    </div>
                    <div class="pt-10 px-10 pb-12">
                        <a href="#" class="hover:underline">
                            <h3 class="mb-4 font-heading text-xl font-medium leading-tight">2024 Remote Work Guide</h3>
                        </a>
                        <p class="text-gray-500 font-medium">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>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <a x-on:click.prevent="showContent = true" href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">View all news</a>
        </div>
    </div>
</section>

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

<section>
  <div class="px-5 py-1 text-center bg-danger">
    <p class="d-flex align-items-end justify-content-center fs-9 mb-0 text-white"><span class="me-1"> Get the Premium plan at a 15% discount using code</span><a class="btn lh-sm p-0 text-white" href="#"><span class="me-2">WINTERisCOMING</span>
        <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="white"></path>
        </svg></a></p>
  </div>
  <nav class="position-relative navbar navbar-expand-xl navbar-dark bg-dark border-bottom border-secondary-dark">
    <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="container-fluid overflow-hidden">
    <div class="row">
      <div class="col-xl-7 bg-info-dark position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-header.png" alt="">
        <div class="mw-2xl mw-xl-4xl mx-auto pt-12 pt-xl-32 pb-12 pb-xl-32 px-xl-24">
          <h1 class="font-heading text-white mb-14"><span>Transform your productivity with</span> <span class="text-secondary">FilyTreck</span></h1>
          <div class="d-flex mb-16 align-items-center"><a class="btn me-5 me-sm-8 btn-primary" href="#">Let’s start!</a><a class="btn p-0 text-secondary" href="#">It’s free now!</a></div>
          <div>
            <p class="mb-0 fs-4 fw-medium text-secondary">Unlock peak productivity with FilyTreck, your key to streamlined tasks and efficient time management</p>
          </div>
        </div>
      </div>
      <div class="col-xl-5 pt-12 pt-xl-32 px-12 bg-info-dark">
        <div class="d-flex flex-column h-100 align-items-center">
          <div class="mw-lg text-center mb-24">
            <h3 class="font-heading fw-medium text-white mb-6">Get mobile app</h3>
            <p class="fs-7 text-light-dark mb-10">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci.</p>
            <div class="d-flex justify-content-center align-items-center"><a class="d-inline-block me-4" href="#"><img class="img-fluid" src="fily-assets/headers/app-store.png" alt=""></a><a class="d-inline-block" href="#"><img class="img-fluid" src="fily-assets/headers/google-play.png" alt=""></a></div>
          </div><img class="img-fluid d-block mt-auto mx-auto" src="fily-assets/headers/iphone13-pro.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-black-logo.svg" alt=""></a><a class="navbar-close" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="pt-20 pb-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Our features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">How to use?</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Use cases</a></li>
          <li class="nav-item"><a class="btn btn-outline-light py-3 text-start border-0 w-100 text-dark" href="#">Plans &amp; pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 py-4 mb-4 btn-outline-light text-dark" href="#">Login</a><a class="btn w-100 py-4 btn-primary" href="#">Get started</a></div>
    </nav>
  </div>
</section>

<section class="position-relative overflow-hidden"><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="#"><span class="me-1">Use cases</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_119_1073)">
                  <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                </g>
              </svg></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 w-100">
    <div class="d-none d-xl-block position-absolute top-0 end-0 h-100 ps-24 mw-sm py-12">
      <div class="d-flex flex-column h-100 align-items-end justify-content-center">
        <div class="d-flex mb-4 align-items-end justify-content-end"><img class="img-fluid me-4" src="fily-assets/headers/work.png" alt=""><img class="img-fluid w-100 mw-sm" src="fily-assets/headers/to-do-list.png" alt=""></div>
        <div class="d-flex align-items-start justify-content-end"><img class="img-fluid w-100 mw-xs d-block me-4" src="fily-assets/headers/last-project.png" alt=""><img class="img-fluid d-block me-6" src="fily-assets/headers/people.png" alt=""></div>
      </div>
    </div>
    <div class="container position-relative">
      <div class="mw-3xl mx-auto mx-xl-0 pt-24 pb-12 pb-xl-40">
        <h1 class="font-heading mb-12"><span class="d-block text-gradient">Seamless task</span><span class="text-white">and time mastery in your grasp</span></h1>
        <p class="mw-2xl fs-6 fw-medium text-white mb-16">Your all-in-one solution, consolidating all your task management needs in a single, convenient app.</p>
        <div class="d-flex align-items-center"><a class="btn me-5 me-sm-8 btn-danger" href="#">Let’s start!</a><a class="btn p-0 text-secondary" href="#">It’s free now!</a></div>
        <div></div>
      </div>
    </div>
    <div class="d-xl-none w-100 ps-8 py-12">
      <div class="d-flex flex-wrap w-100 align-items-end justify-content-end"><img class="img-fluid mb-4 me-4" src="fily-assets/headers/work.png" alt=""><img class="img-fluid mb-4" src="fily-assets/headers/to-do-list.png" alt=""></div>
      <div class="d-flex flex-wrap align-items-start justify-content-end"><img class="img-fluid d-block mb-4 me-4" src="fily-assets/headers/last-project.png" alt=""><img class="img-fluid d-block mb-4 me-6" src="fily-assets/headers/people.png" alt=""></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="position-relative bg-primary-dark overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-header4.png" 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="#"><span class="me-1">Use cases</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_119_1073)">
                  <path d="M11.8098 3.51666C11.7362 3.43826 11.6487 3.37604 11.5523 3.33357C11.4559 3.2911 11.3525 3.26924 11.2481 3.26924C11.1436 3.26924 11.0402 3.2911 10.9438 3.33357C10.8474 3.37604 10.7599 3.43826 10.6864 3.51666L7.06305 7.34761C6.9895 7.42601 6.902 7.48824 6.8056 7.5307C6.70919 7.57317 6.60579 7.59503 6.50135 7.59503C6.39691 7.59503 6.29351 7.57317 6.19711 7.5307C6.1007 7.48824 6.0132 7.42601 5.93966 7.34761L2.31633 3.51666C2.24279 3.43826 2.15529 3.37604 2.05888 3.33357C1.96248 3.2911 1.85907 3.26924 1.75464 3.26924C1.6502 3.26924 1.5468 3.2911 1.45039 3.33357C1.35399 3.37604 1.26649 3.43826 1.19294 3.51666C1.0456 3.67338 0.962891 3.88538 0.962891 4.10636C0.962891 4.32734 1.0456 4.53934 1.19294 4.69606L4.82418 8.53537C5.26918 9.00529 5.87241 9.26924 6.50135 9.26924C7.13029 9.26924 7.73352 9.00529 8.17852 8.53537L11.8098 4.69606C11.9571 4.53934 12.0398 4.32734 12.0398 4.10636C12.0398 3.88538 11.9571 3.67338 11.8098 3.51666Z" fill="currentColor"></path>
                </g>
              </svg></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="mw-9xl mx-auto px-5 pt-24 pb-32 position-relative">
    <div class="row align-items-center">
      <div class="col-lg-5 mt-20 mt-lg-0 order-last order-lg-first">
        <div class="d-flex pe-lg-20 align-items-end justify-content-center mw-2xl mw-lg-none mx-auto"><img class="img-fluid w-50" src="fily-assets/headers/iphone13-pro-header4-2.png" alt=""><img class="img-fluid w-50 mb-8 ms-n14" src="fily-assets/headers/iphone13-pro-header4.png" alt=""></div>
      </div>
      <div class="col-lg-7 ms-auto">
        <div class="mw-2xl mw-lg-4xl mx-auto me-lg-0">
          <div class="d-flex align-items-center mb-12"><img class="img-fluid" src="fily-assets/headers/avatar.png" alt=""><img class="img-fluid ms-n3" src="fily-assets/headers/avatar2.png" alt=""><img class="img-fluid ms-n3" src="fily-assets/headers/avatar3.png" alt=""><span class="ms-3 fs-9 fw-medium text-white">340k+ users</span></div>
          <h1 class="font-heading mb-16"><span class="d-block text-gradient">Seamless task</span><span class="d-block text-white">and time mastery</span><span class="text-white">in your grasp</span></h1>
          <div class="d-flex align-items-center"><a class="btn me-5 me-sm-8 btn-danger" href="#">Let’s start!</a><a class="btn p-0 text-secondary" href="#">It’s free now!</a></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="position-relative overflow-hidden">
  <div class="d-none d-xxl-block position-absolute top-0 end-0 h-100 col-3 col-xxl-4 me-n6 bg-dark"><img class="img-fluid h-100 w-100" src="fily-assets/gradients/gradient-header5.png" alt=""><img class="img-fluid position-absolute top-50 start-0 translate-middle" src="fily-assets/headers/iphone.png" alt=""></div>
  <nav class="navbar navbar-expand-xxl navbar-light bg-transparent">
    <div class="container-fluid"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-black-logo.svg" alt=""></a>
      <button class="d-xxl-none navbar-burger btn btn-outline-dark py-3 px-5 ms-auto" type="button" aria-controls="nav01" aria-expanded="false">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.75 8.75003H1.25C0.559648 8.75003 0 9.30968 0 10C0 10.6904 0.559648 11.25 1.25 11.25H18.75C19.4404 11.25 20 10.6904 20 10C20 9.30968 19.4404 8.75003 18.75 8.75003Z" fill="currentColor"></path>
          <path d="M1.25 5.41669H18.75C19.4404 5.41669 20 4.85704 20 4.16669C20 3.47634 19.4404 2.91669 18.75 2.91669H1.25C0.559648 2.91669 0 3.47634 0 4.16669C0 4.85704 0.559648 5.41669 1.25 5.41669Z" fill="currentColor"></path>
          <path d="M18.75 14.5834H1.25C0.559648 14.5834 0 15.143 0 15.8334C0 16.5237 0.559648 17.0834 1.25 17.0834H18.75C19.4404 17.0834 20 16.5237 20 15.8334C20 15.143 19.4404 14.5834 18.75 14.5834Z" fill="currentColor"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" 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-xxl-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="container-fluid overflow-hidden">
    <div class="row">
      <div class="col-xxl-7">
        <div class="mw-2xl mw-xl-4xl mx-auto pt-12 pt-xl-32 pb-12 pb-xl-32 px-xl-24">
          <h1 class="font-heading mb-12">Transform your productivity with FilyTreck</h1>
          <p class="mb-14 fs-4 fw-medium text-secondary">Unlock peak productivity with FilyTreck, your key to streamlined tasks and efficient time management</p>
          <div class="d-flex align-items-center"><a class="d-inline-block me-4" href="#"><img class="img-fluid" src="fily-assets/headers/app-store.png" alt=""></a><a class="d-inline-block" href="#"><img class="img-fluid" src="fily-assets/headers/google-play.png" alt=""></a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="position-relative d-xxl-none mt-80 bg-dark" style="max-height: 550px;"><img class="img-fluid h-100 w-100" src="fily-assets/gradients/gradient-header5.png" alt=""><img class="img-fluid position-absolute top-0 start-50 translate-middle" style="max-height:  550px;" src="fily-assets/headers/iphone.png" alt=""></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">
  <div class="container position-relative">
    <h2 class="font-heading text-center mb-16">Recent happenings and updates</h2>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0"><a class="d-block h-100 position-relative rounded-3 overflow-hidden" href="#"><img class="img-fluid d-block w-100 h-100 rounded-2" style="min-height: 400px; object-fit: cover;" src="fily-assets/blog/people.jpg" alt="">
            <div class="position-absolute top-0 start-0 ms-10 ms-lg-12 mt-10 d-inline-flex align-items-center py-1 px-2 bg-white rounded-pill">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_119_749)">
                  <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path>
                  <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path>
                </g>
              </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span>
            </div>
            <div class="position-absolute bottom-0 start-0 w-100 pb-10 px-10 px-lg-12">
              <div class="d-flex align-items-center justify-content-between">
                <h4 class="text-white fw-normal me-4"><span class="d-block">2023 Remote Work:</span><span>A Comprehensive Guide</span></h4><span class="flex-shirink-0">
                  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="64" height="64" rx="32" fill="#273ACF"></rect>
                    <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path>
                  </svg></span>
              </div>
            </div></a></div>
        <div class="col-lg-6"><a class="btn btn-outline-light-light d-block mb-6 ps-10 pe-8 py-10 text-start rounded-2" href="#">
            <div class="d-inline-flex mb-6 align-items-center py-1 px-2 bg-white border border-light-light rounded-pill">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_119_749)">
                  <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path>
                  <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path>
                </g>
              </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span>
            </div>
            <div class="d-flex align-items-start">
              <div class="pe-4">
                <h4 class="font-heading mb-5 fw-medium">Mastering the Art of Project Management Success</h4>
                <p class="text-secondary 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><span class="flex-shrink-0">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="64" height="64" rx="32" fill="#273ACF"></rect>
                  <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path>
                </svg></span>
            </div></a><a class="btn btn-outline-light-light d-block ps-10 pe-8 py-10 text-start rounded-2" href="#">
            <div class="d-inline-flex mb-6 align-items-center py-1 px-2 bg-white border border-light-light rounded-pill">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_119_749)">
                  <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path>
                  <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path>
                </g>
              </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span>
            </div>
            <div class="d-flex align-items-start">
              <div class="pe-4">
                <h4 class="font-heading mb-5 fw-medium">Optimal Work Management Software for Firms</h4>
                <p class="text-secondary fw-medium mb-0">If you handle a mix of project-related and other tasks, including client billing, and haven't discovered the perfect software yet, your search may need a new direction.</p>
              </div><span class="flex-shrink-0">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="64" height="64" rx="32" fill="#273ACF"></rect>
                  <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path>
                </svg></span>
            </div></a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <div class="container">
    <div class="mw-2xl mx-auto mb-12 text-center">
      <h2 class="font-heading mb-10">Meet our team</h2>
      <p class="fs-6 text-dark fw-medium mb-0">Our diverse team of experts brings a wealth of experience in task management, time optimization, and goal achievement to deliver the best solutions to you.</p>
    </div>
    <div class="mw-md mw-md-2xl mx-auto mw-xl-none">
      <div class="row mb-n5">
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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">Deacon Galvan</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">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic2.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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>
        </div>
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic3.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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">Proin consequat risus a augue lobortis fermentum. Donec ex nunc, vestibulum eu porttitor efficitur, semper ultrices odio.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic4.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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">Johnathan Barton</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">Nunc porttitor, purus et ultricies porta, nisi magna gravida tortor, molestie lobortis tortor diam mattis mauris cras at lacinia.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic5.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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>
        </div>
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic6.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <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>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-3xl mb-20 mx-auto text-center"><img class="img-fluid d-block mx-auto mb-6" src="fily-assets/logos/fily-treck-icon.svg" alt="">
      <h2 class="font-heading text-white mb-10">Pricing plans</h2>
      <p class="fs-6 fw-medium text-white mb-10">Whether you're looking for essential features at no cost or a premium experience with additional benefits, FilyTreck has the perfect plan for you.</p>
      <div class="d-flex mb-24 align-items-center justify-content-center"><img class="img-fluid" src="fily-assets/pricing/avatar3.png" alt=""><img class="img-fluid ms-n2" src="fily-assets/pricing/avatar2.png" alt=""><img class="img-fluid ms-n2" src="fily-assets/pricing/avatar.png" alt=""><span class="ms-4 fs-9 fw-medium text-secondary">640k+ happy customers</span></div>
      <div class="d-inline-flex p-1 align-items-center justify-content-center border rounded-pill">
        <button class="btn px-6 py-5 text-secondary">Monthly billing</button>
        <button class="btn btn-primary px-6 py-5">Yearly billing</button>
      </div>
    </div>
  </div>
  <div class="mw-md mw-xl-8xl mx-auto px-5">
    <div class="row mx-xl-n5">
      <div class="col-xl-4 mb-8 mb-xl-0 px-xl-5">
        <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 h-100 bg-dark px-6 px-sm-10 py-14 rounded-3">
              <h4 class="font-heading text-white mb-1">Starter</h4><span class="d-block fs-7 fw-medium text-light-dark mb-4">Best for personal use</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$0</span><span class="ms-2 lh-lg fw-medium text-secondary">/free forever</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</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>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Time Tracking</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span><span class="ms-1 fs-7 text-secondary">(limited to 3)</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Static Time Reports</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Desktop &amp; Mobile Apps</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Guest Access</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Start for free</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 mb-8 mb-xl-0 px-xl-5">
        <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 h-100 bg-dark px-6 px-sm-10 py-14 rounded-3"><span class="position-absolute top-0 start-0 mt-8 ms-10 text-danger fs-9 fw-medium">Most popular</span>
              <h4 class="font-heading text-white mb-1">Enterprise</h4><span class="d-block fs-7 fw-medium text-light-dark mb-4">For large teams &amp; corporations</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$32</span><span class="ms-2 lh-lg fw-medium text-secondary">/free forever</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</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>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Time Tracking</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Static Time Reports</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Desktop &amp; Mobile Apps</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Guest Access</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Choose a plan</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 px-xl-5">
        <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 h-100 bg-dark px-6 px-sm-10 py-14 rounded-3">
              <h5 class="font-heading text-white mb-1">Business</h5><span class="d-block fs-7 fw-medium text-light-dark mb-4">Best for personal use</span>
              <div class="d-flex align-items-end"><span class="fs-3 lh-1 text-white fw-medium">$68</span><span class="ms-2 lh-lg fw-medium text-secondary">/per month</span></div>
              <div class="mt-10 pt-10 border-top border-secondary">
                <div class="d-flex mb-8 align-items-center justify-content-between"><span class="fs-6 fw-bold text-white">Features</span><a class="btn btn-outline-secondary border-0 bg-transparent d-flex align-items-center p-0" href="#"><span class="me-2">Show All</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>
                <ul class="list-unstyled mb-12">
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Employee Scheduling &amp; Workload</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Unlimited Invoices</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Projects</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Gantt Charts</span>
                  </li>
                  <li class="d-flex mb-4 align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Portfolio Gantt Chart</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <svg class="flex-shrink-0" 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="#273ACF"></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="white"></path>
                    </svg><span class="ms-4 text-white fs-7 fw-medium">Online Remote Assistance</span>
                  </li>
                </ul><a class="btn btn-outline-light" href="#">Choose a plan</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 pt-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-24">
      <p class="fs-3 fw-medium 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><img class="img-fluid w-100" src="fily-assets/categories/404.png" alt="">
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32">
  <div class="container">
    <div class="mw-5xl mb-20">
      <h1 class="font-heading mb-10">Work with us</h1>
      <p class="fs-6 text-light-dark fw-medium">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit. Maecenas vitae velit ut mi vestibulum luctus ut ut</p>
    </div>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="pb-10 mb-10 border-bottom border-light">
        <div class="row mb-n6">
          <div class="col-lg-8 mb-6">
            <h4 class="mb-3">Product Designer</h4>
            <p class="text-secondary fw-medium mb-0">We’re looking for a mid-level product designer to join our team.</p>
          </div>
          <div class="col-12 col-lg-4 text-end mb-6 order-last order-lg-0"><a class="btn btn-primary p-0 d-inline-flex align-items-center justify-content-center" href="#" style="width: 64px; height: 64px;">
              <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 class="col-12 mb-6">
            <div class="d-inline-flex me-2 align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_252)">
                  <path d="M7.97669 16.5053L7.51197 16.107C6.87131 15.5705 1.27734 10.7394 1.27734 7.20551C1.27734 3.50557 4.27675 0.506165 7.97669 0.506165C11.6766 0.506165 14.676 3.50557 14.676 7.20551C14.676 10.7394 9.08206 15.5706 8.44406 16.1096L7.97669 16.5053ZM7.97669 1.95476C5.07816 1.95804 2.72925 4.30695 2.72597 7.20548C2.72597 9.42554 6.16759 12.972 7.97669 14.5953C9.78581 12.9714 13.2274 9.42285 13.2274 7.20548C13.2241 4.30695 10.8752 1.95807 7.97669 1.95476Z" fill="#060918"></path>
                  <path d="M7.97587 9.86111C6.50925 9.86111 5.32031 8.67218 5.32031 7.20555C5.32031 5.73893 6.50925 4.54999 7.97587 4.54999C9.4425 4.54999 10.6314 5.73893 10.6314 7.20555C10.6314 8.67218 9.44253 9.86111 7.97587 9.86111ZM7.97587 5.87774C7.24256 5.87774 6.64809 6.47221 6.64809 7.20552C6.64809 7.93883 7.24256 8.5333 7.97587 8.5333C8.70919 8.5333 9.30366 7.93883 9.30366 7.20552C9.30366 6.47221 8.70922 5.87774 7.97587 5.87774Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">100% remote</span>
            </div>
            <div class="d-inline-flex align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_258)">
                  <path d="M8 0.5C6.41775 0.5 4.87104 0.969192 3.55544 1.84824C2.23985 2.72729 1.21447 3.97672 0.608967 5.43853C0.00346629 6.90034 -0.15496 8.50887 0.153721 10.0607C0.462403 11.6126 1.22433 13.038 2.34315 14.1569C3.46197 15.2757 4.88743 16.0376 6.43928 16.3463C7.99113 16.655 9.59966 16.4965 11.0615 15.891C12.5233 15.2855 13.7727 14.2602 14.6518 12.9446C15.5308 11.629 16 10.0823 16 8.5C15.9977 6.37897 15.1541 4.34547 13.6543 2.84568C12.1545 1.34589 10.121 0.502294 8 0.5ZM8 15.1667C6.68146 15.1667 5.39253 14.7757 4.2962 14.0431C3.19987 13.3106 2.34539 12.2694 1.84081 11.0512C1.33622 9.83305 1.2042 8.49261 1.46144 7.1994C1.71867 5.90619 2.35361 4.71831 3.28596 3.78596C4.21831 2.85361 5.4062 2.21867 6.6994 1.96143C7.99261 1.7042 9.33305 1.83622 10.5512 2.3408C11.7694 2.84539 12.8106 3.69987 13.5431 4.7962C14.2757 5.89253 14.6667 7.18146 14.6667 8.5C14.6647 10.2675 13.9617 11.9621 12.7119 13.2119C11.4621 14.4617 9.76752 15.1647 8 15.1667Z" fill="#060918"></path>
                  <path d="M8.00159 4.5C7.82478 4.5 7.65521 4.57024 7.53019 4.69526C7.40516 4.82029 7.33493 4.98986 7.33493 5.16667V8.05L5.08759 9.458C4.9373 9.55189 4.83046 9.70163 4.79058 9.87429C4.7507 10.0469 4.78104 10.2284 4.87493 10.3787C4.96881 10.529 5.11856 10.6358 5.29121 10.6757C5.46387 10.7156 5.6453 10.6852 5.79559 10.5913L8.35559 8.99133C8.45232 8.93073 8.53186 8.84631 8.58661 8.74616C8.64135 8.646 8.66947 8.53347 8.66826 8.41933V5.16667C8.66826 4.98986 8.59802 4.82029 8.473 4.69526C8.34797 4.57024 8.1784 4.5 8.00159 4.5Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">Full-time</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pb-10 mb-10 border-bottom border-light">
        <div class="row mb-n6">
          <div class="col-lg-8 mb-6">
            <h4 class="mb-3">Customer Success Manager</h4>
            <p class="text-secondary fw-medium mb-0">We’re looking for a customer manager to join our team.</p>
          </div>
          <div class="col-12 col-lg-4 text-end mb-6 order-last order-lg-0"><a class="btn btn-primary p-0 d-inline-flex align-items-center justify-content-center" href="#" style="width: 64px; height: 64px;">
              <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 class="col-12 mb-6">
            <div class="d-inline-flex me-2 align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_252)">
                  <path d="M7.97669 16.5053L7.51197 16.107C6.87131 15.5705 1.27734 10.7394 1.27734 7.20551C1.27734 3.50557 4.27675 0.506165 7.97669 0.506165C11.6766 0.506165 14.676 3.50557 14.676 7.20551C14.676 10.7394 9.08206 15.5706 8.44406 16.1096L7.97669 16.5053ZM7.97669 1.95476C5.07816 1.95804 2.72925 4.30695 2.72597 7.20548C2.72597 9.42554 6.16759 12.972 7.97669 14.5953C9.78581 12.9714 13.2274 9.42285 13.2274 7.20548C13.2241 4.30695 10.8752 1.95807 7.97669 1.95476Z" fill="#060918"></path>
                  <path d="M7.97587 9.86111C6.50925 9.86111 5.32031 8.67218 5.32031 7.20555C5.32031 5.73893 6.50925 4.54999 7.97587 4.54999C9.4425 4.54999 10.6314 5.73893 10.6314 7.20555C10.6314 8.67218 9.44253 9.86111 7.97587 9.86111ZM7.97587 5.87774C7.24256 5.87774 6.64809 6.47221 6.64809 7.20552C6.64809 7.93883 7.24256 8.5333 7.97587 8.5333C8.70919 8.5333 9.30366 7.93883 9.30366 7.20552C9.30366 6.47221 8.70922 5.87774 7.97587 5.87774Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">100% remote</span>
            </div>
            <div class="d-inline-flex align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_258)">
                  <path d="M8 0.5C6.41775 0.5 4.87104 0.969192 3.55544 1.84824C2.23985 2.72729 1.21447 3.97672 0.608967 5.43853C0.00346629 6.90034 -0.15496 8.50887 0.153721 10.0607C0.462403 11.6126 1.22433 13.038 2.34315 14.1569C3.46197 15.2757 4.88743 16.0376 6.43928 16.3463C7.99113 16.655 9.59966 16.4965 11.0615 15.891C12.5233 15.2855 13.7727 14.2602 14.6518 12.9446C15.5308 11.629 16 10.0823 16 8.5C15.9977 6.37897 15.1541 4.34547 13.6543 2.84568C12.1545 1.34589 10.121 0.502294 8 0.5ZM8 15.1667C6.68146 15.1667 5.39253 14.7757 4.2962 14.0431C3.19987 13.3106 2.34539 12.2694 1.84081 11.0512C1.33622 9.83305 1.2042 8.49261 1.46144 7.1994C1.71867 5.90619 2.35361 4.71831 3.28596 3.78596C4.21831 2.85361 5.4062 2.21867 6.6994 1.96143C7.99261 1.7042 9.33305 1.83622 10.5512 2.3408C11.7694 2.84539 12.8106 3.69987 13.5431 4.7962C14.2757 5.89253 14.6667 7.18146 14.6667 8.5C14.6647 10.2675 13.9617 11.9621 12.7119 13.2119C11.4621 14.4617 9.76752 15.1647 8 15.1667Z" fill="#060918"></path>
                  <path d="M8.00159 4.5C7.82478 4.5 7.65521 4.57024 7.53019 4.69526C7.40516 4.82029 7.33493 4.98986 7.33493 5.16667V8.05L5.08759 9.458C4.9373 9.55189 4.83046 9.70163 4.79058 9.87429C4.7507 10.0469 4.78104 10.2284 4.87493 10.3787C4.96881 10.529 5.11856 10.6358 5.29121 10.6757C5.46387 10.7156 5.6453 10.6852 5.79559 10.5913L8.35559 8.99133C8.45232 8.93073 8.53186 8.84631 8.58661 8.74616C8.64135 8.646 8.66947 8.53347 8.66826 8.41933V5.16667C8.66826 4.98986 8.59802 4.82029 8.473 4.69526C8.34797 4.57024 8.1784 4.5 8.00159 4.5Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">Full-time</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pb-10 mb-16 border-bottom border-light">
        <div class="row mb-n6">
          <div class="col-lg-8 mb-6">
            <h4 class="mb-3">Engineering Manager</h4>
            <p class="text-secondary fw-medium mb-0">We’re looking for an experienced engineering manager to join our team.</p>
          </div>
          <div class="col-12 col-lg-4 text-end mb-6 order-last order-lg-0"><a class="btn btn-primary p-0 d-inline-flex align-items-center justify-content-center" href="#" style="width: 64px; height: 64px;">
              <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 class="col-12 mb-6">
            <div class="d-inline-flex me-2 align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_252)">
                  <path d="M7.97669 16.5053L7.51197 16.107C6.87131 15.5705 1.27734 10.7394 1.27734 7.20551C1.27734 3.50557 4.27675 0.506165 7.97669 0.506165C11.6766 0.506165 14.676 3.50557 14.676 7.20551C14.676 10.7394 9.08206 15.5706 8.44406 16.1096L7.97669 16.5053ZM7.97669 1.95476C5.07816 1.95804 2.72925 4.30695 2.72597 7.20548C2.72597 9.42554 6.16759 12.972 7.97669 14.5953C9.78581 12.9714 13.2274 9.42285 13.2274 7.20548C13.2241 4.30695 10.8752 1.95807 7.97669 1.95476Z" fill="#060918"></path>
                  <path d="M7.97587 9.86111C6.50925 9.86111 5.32031 8.67218 5.32031 7.20555C5.32031 5.73893 6.50925 4.54999 7.97587 4.54999C9.4425 4.54999 10.6314 5.73893 10.6314 7.20555C10.6314 8.67218 9.44253 9.86111 7.97587 9.86111ZM7.97587 5.87774C7.24256 5.87774 6.64809 6.47221 6.64809 7.20552C6.64809 7.93883 7.24256 8.5333 7.97587 8.5333C8.70919 8.5333 9.30366 7.93883 9.30366 7.20552C9.30366 6.47221 8.70922 5.87774 7.97587 5.87774Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">100% remote</span>
            </div>
            <div class="d-inline-flex align-items-center px-4 py-2 rounded-pill border border-light">
              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_527_258)">
                  <path d="M8 0.5C6.41775 0.5 4.87104 0.969192 3.55544 1.84824C2.23985 2.72729 1.21447 3.97672 0.608967 5.43853C0.00346629 6.90034 -0.15496 8.50887 0.153721 10.0607C0.462403 11.6126 1.22433 13.038 2.34315 14.1569C3.46197 15.2757 4.88743 16.0376 6.43928 16.3463C7.99113 16.655 9.59966 16.4965 11.0615 15.891C12.5233 15.2855 13.7727 14.2602 14.6518 12.9446C15.5308 11.629 16 10.0823 16 8.5C15.9977 6.37897 15.1541 4.34547 13.6543 2.84568C12.1545 1.34589 10.121 0.502294 8 0.5ZM8 15.1667C6.68146 15.1667 5.39253 14.7757 4.2962 14.0431C3.19987 13.3106 2.34539 12.2694 1.84081 11.0512C1.33622 9.83305 1.2042 8.49261 1.46144 7.1994C1.71867 5.90619 2.35361 4.71831 3.28596 3.78596C4.21831 2.85361 5.4062 2.21867 6.6994 1.96143C7.99261 1.7042 9.33305 1.83622 10.5512 2.3408C11.7694 2.84539 12.8106 3.69987 13.5431 4.7962C14.2757 5.89253 14.6667 7.18146 14.6667 8.5C14.6647 10.2675 13.9617 11.9621 12.7119 13.2119C11.4621 14.4617 9.76752 15.1647 8 15.1667Z" fill="#060918"></path>
                  <path d="M8.00159 4.5C7.82478 4.5 7.65521 4.57024 7.53019 4.69526C7.40516 4.82029 7.33493 4.98986 7.33493 5.16667V8.05L5.08759 9.458C4.9373 9.55189 4.83046 9.70163 4.79058 9.87429C4.7507 10.0469 4.78104 10.2284 4.87493 10.3787C4.96881 10.529 5.11856 10.6358 5.29121 10.6757C5.46387 10.7156 5.6453 10.6852 5.79559 10.5913L8.35559 8.99133C8.45232 8.93073 8.53186 8.84631 8.58661 8.74616C8.64135 8.646 8.66947 8.53347 8.66826 8.41933V5.16667C8.66826 4.98986 8.59802 4.82029 8.473 4.69526C8.34797 4.57024 8.1784 4.5 8.00159 4.5Z" fill="#060918"></path>
                </g>
              </svg><span class="ms-1 fs-9 fw-medium">Full-time</span>
            </div>
          </div>
        </div>
      </div><a class="btn btn-dark" href="#">Show more</a>
    </div>
  </div>
</section>