Shuffle Components in Consulty library

<section class="px-4 md:px-20 pt-8 pb-16 bg-center bg-no-repeat bg-cover relative" style="background-image: url('consulty-assets/headers/picture1.png')">
    <div x-data="{ mobileNavOpen: false }">
        <nav class="relative bg-black p-4 rounded-2xl mb-32">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo.svg" alt="">
                    </a>
                    <span class="hidden xl:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
                </div>
                <ul class="hidden xl:flex items-center gap-2">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="hidden xl:flex gap-3">
                    <a href="#" class="rounded-full border border-gray-700 px-5 py-3 h-14 hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center transition duration-200 text-white text-sm font-semibold tracking-tight">Sign In</a>
                    <a href="#" class="rounded-full border border-gray-200 bg-white px-5 py-3 h-14 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="xl:hidden">
                    <svg class="navbar-burger text-white" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
        <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.prevent="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 items-center justify-between">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-12 py-12">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="flex flex-col gap-4">
                    <a href="#" class="rounded-full border border-gray-700 px-5 py-3 h-14 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center transition duration-200 text-sm font-semibold tracking-tight">Sign In</a>
                    <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </nav>
        </div>
    </div>
    <h1 class="font-heading tracking-tight text-white text-center text-5xl md:text-7xl font-medium max-w-lg md:max-w-5xl mx-auto mb-6">Navigating complex paths to unleash your success</h1>
    <p class="text-white tracking-tight mb-10 text-center text-xl text-opacity-80 max-w-xl mx-auto">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
    <div class="flex flex-wrap justify-center gap-4 mb-32">
        <a href="#" class="bg-orange-500 h-16 rounded-full px-6 py-4 inline-flex items-center justify-center gap-2 tracking-tight hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
            <span class="text-white font-bold tracking-tight">Get A Free Consultation</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
        <a href="#" class="rounded-full border border-gray-200 bg-white px-6 py-4 h-16 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center transition duration-200 font-bold tracking-tight">Explore Case Studies</a>
    </div>
    <div class="flex flex-wrap">
        <div class="w-full lg:w-1/3">
            <a href="#" class="inline-block w-full py-3 border-b-2 border-white">
                <p class="text-white font-semibold">Strategic Road mapping</p>
            </a>
        </div>
        <div class="w-full lg:w-1/3">
            <a href="#" class="inline-block w-full py-3 border-b-2 border-white border-opacity-10 hover:border-opacity-100 transition duration-200">
                <p class="text-white font-semibold lg:text-center">Collaborative Ideation</p>
            </a>
        </div>
        <div class="w-full lg:w-1/3">
            <a href="#" class="inline-block w-full py-3 border-b-2 border-white border-opacity-10 hover:border-opacity-100 transition duration-200">
                <p class="text-white font-semibold lg:text-right">Data-Driven Insights</p>
            </a>
        </div>
    </div>
</section>

<section class="px-4 md:px-24 bg-black">
    <div x-data="{ mobileNavOpen: false }">
        <nav class="relative bg-black p-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo.svg" alt="">
                    </a>
                    <span class="hidden xl:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
                </div>
                <ul class="hidden xl:flex items-center gap-2">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-900 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <a href="#" class="rounded-full border border-gray-200 bg-white px-5 py-3 h-14 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 hidden xl:inline-flex items-center justify-center gap-2 transition duration-200">
                    <span class="text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="xl:hidden">
                    <svg class="navbar-burger text-white" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
        <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.prevent="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 items-center justify-between">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-12 py-12">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="flex flex-col gap-4">
                    <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </nav>
        </div>
    </div>
    <div class="pt-20">
        <div class="flex flex-wrap items-end -m-4 mb-48">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading tracking-tight text-white text-5xl md:text-7xl font-medium max-w-md md:max-w-2xl">Crafting tailored solutions for growth</h1>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <p class="text-gray-200 text-xl max-w-xl">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using is that it has distribution.</p>
            </div>
        </div>
        <div class="relative">  
            <img class="w-full object-cover rounded-tl-2xl rounded-tr-2xl" style="height:500px;" src="consulty-assets/headers/picture2.png" alt="">
            <div class="absolute -top-24 right-1/4">
                <img style="height:232px;" src="consulty-assets/headers/arrow-circle.svg" alt="">
            </div>
        </div>
    </div>
</section>

<section class="px-8 md:px-24 pb-12">
    <div x-data="{ mobileNavOpen: false }">
        <nav class="relative">
            <div class="flex items-center justify-between py-4 lg:border-b border-black">
                <div class="flex items-center gap-3">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo2.svg" alt="">
                    </a>
                    <span class="hidden lg:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
                </div>
                <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 hidden lg:inline-flex items-center justify-center transition duration-200 text-white text-sm font-semibold tracking-tight">Call us: 784-395-9944</a>
                <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
            <ul class="hidden lg:flex items-center gap-2 py-4">
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Products</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Resources</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
        <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.prevent="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 items-center justify-between">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-12 py-12">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center transition duration-200 text-white text-sm font-semibold tracking-tight">Call us: 784-395-9944</a>
            </nav>
        </div>
    </div>
    <div class="relative" style="height:700px;">
        <img class="h-full w-full object-cover rounded-2xl" src="consulty-assets/headers/picture3.png" alt="">
        <div class="absolute bottom-0 left-0 w-3/4 lg:w-5/12" style="height:250px;">
            <div class="bg-white p-6 h-full rounded-tr-2xl">
                <div class="flex flex-col items-start justify-end h-full">
                    <h1 class="font-heading tracking-tight text-xl sm:text-3xl md:text-4xl font-semibold mb-6 max-w-xs sm:max-w-sm md:max-w-md">Crafting tailored solutions for business growth</h1>
                    <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-white text-sm font-semibold tracking-tight">Book A Free Call</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66675H7.33333C4.38781 6.66675 2 9.05456 2 12.0001V13.3334M14 6.66675L10 10.6667M14 6.66675L10 2.66675" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </div>  
        </div>
        <div class="absolute sm:bottom-6 bottom-3 sm:right-6 right-3">
            <a href="#" class="rounded-full bg-gray-50 h-16 w-16 flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
                    <path d="M27.7082 20.4167L17.4998 30.625M17.4998 30.625L7.2915 20.4167M17.4998 30.625L17.4998 4.375" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="absolute -left-6 top-1/2 transform -translate-y-1/2">
            <img class="h-9" src="consulty-assets/headers/shape2.svg" alt="">
        </div>
        <div class="absolute -right-6 top-24">
            <img class="h-32" src="consulty-assets/headers/shape1.svg" alt="">
        </div>
    </div>
</section>

<section class="px-8 md:px-20 pb-24 bg-center bg-no-repeat bg-cover relative overflow-hidden" style="background-image: url('consulty-assets/headers/picture4.png')">
    <div x-data="{ mobileNavOpen: false }">
        <nav class="relative p-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo.svg" alt="">
                    </a>
                    <span class="hidden xl:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
                </div>
                <ul class="hidden xl:flex items-center gap-2">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white group-hover:text-black text-sm font-medium tracking-tight">Products</span>
                                <div class="text-white group-hover:text-black transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                        <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-white group-hover:text-black text-sm font-medium tracking-tight">Resources</span>
                                <div class="text-white group-hover:text-black transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                        <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <a href="#" class="rounded-full border border-gray-200 bg-white px-5 py-3 h-14 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 hidden xl:inline-flex items-center justify-center gap-2 transition duration-200">
                    <span class="text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="xl:hidden">
                    <svg class="navbar-burger text-white" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
        <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.prevent="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 items-center justify-between">
                    <a href="#" class="inline-block">
                        <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <ul class="flex flex-col gap-12 py-12">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Products</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium tracking-tight">Resources</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="flex flex-col gap-4">
                    <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </nav>
        </div>
    </div>
    <div class="pt-40">
        <div class="relative max-w-xs sm:max-w-sm lg:max-w-lg xl:max-w-5xl">
            <h1 class="font-heading tracking-tight text-white text-4xl sm:text-5xl lg:text-7xl xl:text-9xl font-medium">Shaping Future</h1>
            <div class="absolute right-6 sm:right-0 lg:-right-20 xl:-right-32 -top-3 lg:-top-6">
                <img class="h-9 lg:h-18 xl:h-32 transform rotate-12" src="consulty-assets/headers/shape3.svg" alt="">
            </div>
        </div>
        <div class="pl-16 sm:pl-32 lg:pl-56 mb-32">
            <h1 class="font-heading tracking-tight text-white text-4xl sm:text-5xl lg:text-7xl xl:text-9xl font-medium mb-6">Business Growth</h1>
            <p class="text-white text-xl mb-8 max-w-xl">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
            <a href="#" class="rounded-full border border-gray-200 bg-white px-6 py-4 h-16 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center gap-2 transition duration-200">
                <span class="text-sm font-semibold tracking-tight">Book A Free Call</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex justify-end">
            <a href="#" class="group inline-block">
                <div class="flex items-center flex-wrap gap-1">
                    <span class="text-white text-sm group-hover:text-opacity-80 transition duration-200">SCROLL DOWN</span>
                    <div class="text-white group-hover:text-opacity-80 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.35147 8.75137C6.8201 8.28275 7.5799 8.28275 8.04853 8.75137L12 12.7028L15.9515 8.75137C16.4201 8.28275 17.1799 8.28275 17.6485 8.75137C18.1172 9.22 18.1172 9.9798 17.6485 10.4484L12.8485 15.2484C12.3799 15.7171 11.6201 15.7171 11.1515 15.2484L6.35147 10.4484C5.88284 9.9798 5.88284 9.22 6.35147 8.75137Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="absolute bottom-0 right-48">
        <img class="h-48 transform translate-y-6" style="height:180px;" src="consulty-assets/headers/shape4.svg" alt="">
    </div>
</section>

<section class="p-5">
    <div class="rounded-2xl px-4 md:px-14 pb-16 bg-center bg-no-repeat bg-cover relative" style="background-image: url('consulty-assets/headers/picture5.png')">
        <div x-data="{ mobileNavOpen: false }">
            <nav class="relative p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <a href="#" class="inline-block">
                            <img class="h-7" src="consulty-assets/logos/consulty-logo.svg" alt="">
                        </a>
                        <span class="hidden xl:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
                    </div>
                    <ul class="hidden xl:flex items-center gap-2">
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                                <div class="flex items-center gap-2">
                                    <span class="text-white group-hover:text-black text-sm font-medium tracking-tight">Products</span>
                                    <div class="text-white group-hover:text-black transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                            <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200 text-white text-sm font-medium tracking-tight rounded-full">Support</a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                                <div class="flex items-center gap-2">
                                    <span class="text-white group-hover:text-black text-sm font-medium tracking-tight">Resources</span>
                                    <div class="text-white group-hover:text-black transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                            <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <a href="#" class="rounded-full border border-gray-200 bg-white px-5 py-3 h-14 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 hidden xl:inline-flex items-center justify-center gap-2 transition duration-200">
                        <span class="text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="xl:hidden">
                        <svg class="navbar-burger text-white" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                          <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </nav>
            <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.prevent="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 items-center justify-between">
                        <a href="#" class="inline-block">
                            <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                    <ul class="flex flex-col gap-12 py-12">
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium tracking-tight">Products</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                        <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                        </li>
                        <li>
                            <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium tracking-tight">Resources</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                        <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="flex flex-col gap-4">
                        <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                            <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </nav>
            </div>
        </div>
        <div class="pt-80">
            <h1 class="font-heading tracking-tight text-5xl md:text-7xl text-white font-medium max-w-xs md:max-w-xl mb-6">Get help from the industry experts.</h1>
            <p class="tracking-tight text-white text-lg mb-8 max-w-md">We are passionate about transforming spaces into extraordinary experiences. With a seamless fusion of architecture and interior design.</p>
            <a href="#" class="rounded-full border border-gray-200 bg-white px-6 py-4 h-16 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 inline-flex items-center justify-center gap-2 transition duration-200">
                <span class="font-bold tracking-tight">Book A Free Call</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="hidden md:block absolute bottom-8 right-8">
            <img style="height:200px;" src="consulty-assets/headers/arrow-circle2.svg" alt="">
        </div>
    </div>
</section>

<section class="bg-black py-56 relative overflow-hidden">
    <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full">
        <div class="flex flex-col justify-center h-full">
            <img class="opacity-5 object-cover mx-auto" style="height:690px;" src="consulty-assets/stats/shapes1.svg" alt="">
        </div>
    </div>
    <div class="relative z-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/3 p-4">
                    <h2 class="font-heading tracking-tight text-7xl font-medium text-center mb-6 text-white">5.2M</h2>
                    <p class="text-center tracking-tight text-white text-xl font-semibold mb-4">Fund Raised</p>
                    <p class="tracking-tight text-gray-300 text-center max-w-xs mx-auto">It is a long established fact that a reader will be that the distracted by the  readable content of a page when looking.</p>
                </div>
                <div class="w-full lg:w-1/3 p-4">
                    <h2 class="font-heading tracking-tight text-7xl font-medium text-center mb-6 text-white">17k</h2>
                    <p class="text-center tracking-tight text-white text-xl font-semibold mb-4">Case Solved</p>
                    <p class="tracking-tight text-gray-300 text-center max-w-xs mx-auto">It is a long established fact that a reader will be that the distracted by the  readable content of a page when looking.</p>
                </div>
                <div class="w-full lg:w-1/3 p-4">
                    <h2 class="font-heading tracking-tight text-7xl font-medium text-center mb-6 text-white">99%</h2>
                    <p class="text-center tracking-tight text-white text-xl font-semibold mb-4">Success Rate</p>
                    <p class="tracking-tight text-gray-300 text-center max-w-xs mx-auto">It is a long established fact that a reader will be that the distracted by the  readable content of a page when looking.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-32">
    <div class="container mx-auto px-4">
        <p class="tracking-tight text-gray-600 font-medium text-center mb-4">Pricing &amp; Plan</p>
        <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-16">Select a suitable plan</h1>
        <div class="flex flex-wrap -m-4 mb-16">
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-orange-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Starter Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$3,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-white h-16 w-full border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <span class="tracking-tight font-bold">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-blue-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Pro Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$6,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-black h-16 w-full rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                            <span class="tracking-tight font-bold text-white">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-green-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Business Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$11,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-white h-16 w-full border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <span class="tracking-tight font-bold">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-center justify-center flex-wrap gap-16">
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M12.5 15V17M6.5 21H18.5C19.6046 21 20.5 20.1046 20.5 19V13C20.5 11.8954 19.6046 11 18.5 11H6.5C5.39543 11 4.5 11.8954 4.5 13V19C4.5 20.1046 5.39543 21 6.5 21ZM16.5 11V7C16.5 4.79086 14.7091 3 12.5 3C10.2909 3 8.5 4.79086 8.5 7V11H16.5Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round"></path>
                </svg>
                <span class="tracking-tight">Secure Checkout</span>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M9.5 12L11.5 14L15.5 10M21.1179 5.98434C20.9132 5.99472 20.7072 5.99997 20.5 5.99997C17.4265 5.99997 14.623 4.84453 12.4999 2.94434C10.3769 4.84446 7.57339 5.99985 4.5 5.99985C4.29277 5.99985 4.08678 5.9946 3.88213 5.98422C3.6327 6.94783 3.5 7.95842 3.5 9.00001C3.5 14.5915 7.32432 19.2898 12.5 20.622C17.6757 19.2898 21.5 14.5915 21.5 9.00001C21.5 7.95847 21.3673 6.94791 21.1179 5.98434Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="tracking-tight">Satisfaction Guaranteed</span>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M17.5 8H19.5C20.6046 8 21.5 8.89543 21.5 10V16C21.5 17.1046 20.6046 18 19.5 18H17.5V22L13.5 18H9.5C8.94772 18 8.44772 17.7761 8.08579 17.4142M8.08579 17.4142L11.5 14H15.5C16.6046 14 17.5 13.1046 17.5 12V6C17.5 4.89543 16.6046 4 15.5 4H5.5C4.39543 4 3.5 4.89543 3.5 6V12C3.5 13.1046 4.39543 14 5.5 14H7.5V18L8.08579 17.4142Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="tracking-tight">24/7 Async Support</span>
            </div>
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-32">
    <p class="tracking-tight text-center text-gray-600 font-medium mb-4">Awards &amp; Recognitions</p>
    <h1 class="font-heading tracking-tight text-center text-4xl md:text-6xl font-medium mb-20">Our Awards</h1>
    <div class="overflow-hidden">
        <div class="overflow-x-auto">
          <table class="table-auto w-full">
            <tbody>
              <tr>
                <td class="py-8 border-b border-t border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">2014</p>
                </td>
                <td class="py-8 border-b border-t border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-medium">Business Award</h2>
                </td>
                <td class="py-8 border-b border-t border-gray-100 px-8">
                    <p class="text-gray-700 tracking-tight whitespace-nowrap">Physical space is often conceived in three linear dimensions</p>
                </td>
                <td class="py-8 border-b border-t border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="text-gray-300 hover:text-black transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
                                <path d="M22.375 7.00012V18.3751C22.375 18.6072 22.2828 18.8297 22.1187 18.9938C21.9546 19.1579 21.7321 19.2501 21.5 19.2501C21.2679 19.2501 21.0454 19.1579 20.8813 18.9938C20.7172 18.8297 20.625 18.6072 20.625 18.3751V9.11215L8.11906 21.6192C7.95488 21.7834 7.73219 21.8756 7.5 21.8756C7.2678 21.8756 7.04512 21.7834 6.88094 21.6192C6.71675 21.455 6.62451 21.2323 6.62451 21.0001C6.62451 20.7679 6.71675 20.5452 6.88094 20.3811L19.388 7.87512H10.125C9.89293 7.87512 9.67037 7.78293 9.50628 7.61884C9.34219 7.45475 9.25 7.23219 9.25 7.00012C9.25 6.76806 9.34219 6.5455 9.50628 6.3814C9.67037 6.21731 9.89293 6.12512 10.125 6.12512H21.5C21.7321 6.12512 21.9546 6.21731 22.1187 6.3814C22.2828 6.5455 22.375 6.76806 22.375 7.00012Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </td>
              </tr>
              <tr>
                <td class="py-8 border-b border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">2016</p>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-medium">Design Award</h2>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <p class="text-gray-700 tracking-tight whitespace-nowrap">Maxwell's equations—the foundation of classical electromagnetism</p>
                </td>
                <td class="py-8 border-b border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="text-gray-300 hover:text-black transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
                                <path d="M22.375 7.00012V18.3751C22.375 18.6072 22.2828 18.8297 22.1187 18.9938C21.9546 19.1579 21.7321 19.2501 21.5 19.2501C21.2679 19.2501 21.0454 19.1579 20.8813 18.9938C20.7172 18.8297 20.625 18.6072 20.625 18.3751V9.11215L8.11906 21.6192C7.95488 21.7834 7.73219 21.8756 7.5 21.8756C7.2678 21.8756 7.04512 21.7834 6.88094 21.6192C6.71675 21.455 6.62451 21.2323 6.62451 21.0001C6.62451 20.7679 6.71675 20.5452 6.88094 20.3811L19.388 7.87512H10.125C9.89293 7.87512 9.67037 7.78293 9.50628 7.61884C9.34219 7.45475 9.25 7.23219 9.25 7.00012C9.25 6.76806 9.34219 6.5455 9.50628 6.3814C9.67037 6.21731 9.89293 6.12512 10.125 6.12512H21.5C21.7321 6.12512 21.9546 6.21731 22.1187 6.3814C22.2828 6.5455 22.375 6.76806 22.375 7.00012Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </td>
              </tr>
              <tr>
                <td class="py-8 border-b border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">2017</p>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-medium">Best Renovation</h2>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <p class="text-gray-700 tracking-tight whitespace-nowrap">The long barrow was built on land previously inhabited in the Mesolithic</p>
                </td>
                <td class="py-8 border-b border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="text-gray-300 hover:text-black transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
                                <path d="M22.375 7.00012V18.3751C22.375 18.6072 22.2828 18.8297 22.1187 18.9938C21.9546 19.1579 21.7321 19.2501 21.5 19.2501C21.2679 19.2501 21.0454 19.1579 20.8813 18.9938C20.7172 18.8297 20.625 18.6072 20.625 18.3751V9.11215L8.11906 21.6192C7.95488 21.7834 7.73219 21.8756 7.5 21.8756C7.2678 21.8756 7.04512 21.7834 6.88094 21.6192C6.71675 21.455 6.62451 21.2323 6.62451 21.0001C6.62451 20.7679 6.71675 20.5452 6.88094 20.3811L19.388 7.87512H10.125C9.89293 7.87512 9.67037 7.78293 9.50628 7.61884C9.34219 7.45475 9.25 7.23219 9.25 7.00012C9.25 6.76806 9.34219 6.5455 9.50628 6.3814C9.67037 6.21731 9.89293 6.12512 10.125 6.12512H21.5C21.7321 6.12512 21.9546 6.21731 22.1187 6.3814C22.2828 6.5455 22.375 6.76806 22.375 7.00012Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </td>
              </tr>
              <tr>
                <td class="py-8 border-b border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">2018</p>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-medium">Innovation Award</h2>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <p class="text-gray-700 tracking-tight whitespace-nowrap">Physiological respiration involves the mechanisms that ensure that</p>
                </td>
                <td class="py-8 border-b border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="text-gray-300 hover:text-black transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
                                <path d="M22.375 7.00012V18.3751C22.375 18.6072 22.2828 18.8297 22.1187 18.9938C21.9546 19.1579 21.7321 19.2501 21.5 19.2501C21.2679 19.2501 21.0454 19.1579 20.8813 18.9938C20.7172 18.8297 20.625 18.6072 20.625 18.3751V9.11215L8.11906 21.6192C7.95488 21.7834 7.73219 21.8756 7.5 21.8756C7.2678 21.8756 7.04512 21.7834 6.88094 21.6192C6.71675 21.455 6.62451 21.2323 6.62451 21.0001C6.62451 20.7679 6.71675 20.5452 6.88094 20.3811L19.388 7.87512H10.125C9.89293 7.87512 9.67037 7.78293 9.50628 7.61884C9.34219 7.45475 9.25 7.23219 9.25 7.00012C9.25 6.76806 9.34219 6.5455 9.50628 6.3814C9.67037 6.21731 9.89293 6.12512 10.125 6.12512H21.5C21.7321 6.12512 21.9546 6.21731 22.1187 6.3814C22.2828 6.5455 22.375 6.76806 22.375 7.00012Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </td>
              </tr>
              <tr>
                <td class="py-8 border-b border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">2019</p>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-medium">Landscape Design</h2>
                </td>
                <td class="py-8 border-b border-gray-100 px-8">
                    <p class="text-gray-700 tracking-tight whitespace-nowrap">Maxwell's equations—the foundation of classical electromagnetism</p>
                </td>
                <td class="py-8 border-b border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="text-gray-300 hover:text-black transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
                                <path d="M22.375 7.00012V18.3751C22.375 18.6072 22.2828 18.8297 22.1187 18.9938C21.9546 19.1579 21.7321 19.2501 21.5 19.2501C21.2679 19.2501 21.0454 19.1579 20.8813 18.9938C20.7172 18.8297 20.625 18.6072 20.625 18.3751V9.11215L8.11906 21.6192C7.95488 21.7834 7.73219 21.8756 7.5 21.8756C7.2678 21.8756 7.04512 21.7834 6.88094 21.6192C6.71675 21.455 6.62451 21.2323 6.62451 21.0001C6.62451 20.7679 6.71675 20.5452 6.88094 20.3811L19.388 7.87512H10.125C9.89293 7.87512 9.67037 7.78293 9.50628 7.61884C9.34219 7.45475 9.25 7.23219 9.25 7.00012C9.25 6.76806 9.34219 6.5455 9.50628 6.3814C9.67037 6.21731 9.89293 6.12512 10.125 6.12512H21.5C21.7321 6.12512 21.9546 6.21731 22.1187 6.3814C22.2828 6.5455 22.375 6.76806 22.375 7.00012Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
</section>

<section class="px-8 md:px-24 py-12">
    <div class="bg-gray-50 rounded-2xl px-8 py-24">
        <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-4">FAQ</h1>
        <p class="tracking-tight text-center mb-12">Get to know our most common questions &amp; answers.</p>
        <div class="max-w-2xl mx-auto mb-10">
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-2">
                    <p class="tracking-tight text-lg font-semibold">How Consulty can help us grow?</p>
                    <div class="w-6 h-6" :class="{'hidden': accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
                            <path d="M13.1699 6.875V13.125M13.1699 13.125V19.375M13.1699 13.125H19.4199M13.1699 13.125L6.91992 13.125" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="hidden w-6 h-6" :class="{'hidden': !accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                            <path d="M20.3301 12H4.33008" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-2">
                    <p class="tracking-tight text-lg font-semibold">Do you offer discounts for NGO?</p>
                    <div class="w-6 h-6" :class="{'hidden': accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
                            <path d="M13.1699 6.875V13.125M13.1699 13.125V19.375M13.1699 13.125H19.4199M13.1699 13.125L6.91992 13.125" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="hidden w-6 h-6" :class="{'hidden': !accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                            <path d="M20.3301 12H4.33008" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-2">
                    <p class="tracking-tight text-lg font-semibold">How can I book a free call?</p>
                    <div class="w-6 h-6" :class="{'hidden': accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
                            <path d="M13.1699 6.875V13.125M13.1699 13.125V19.375M13.1699 13.125H19.4199M13.1699 13.125L6.91992 13.125" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="hidden w-6 h-6" :class="{'hidden': !accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                            <path d="M20.3301 12H4.33008" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer1" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-2">
                    <p class="tracking-tight text-lg font-semibold">Can I cancel the booking if needed?</p>
                    <div class="w-6 h-6" :class="{'hidden': accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
                            <path d="M13.1699 6.875V13.125M13.1699 13.125V19.375M13.1699 13.125H19.4199M13.1699 13.125L6.91992 13.125" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="hidden w-6 h-6" :class="{'hidden': !accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                            <path d="M20.3301 12H4.33008" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
        </div>
        <p class="tracking-tight text-center text-xl font-medium mb-4">Still have more questions?</p>
        <div class="flex justify-center">
            <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M13.3333 1.66663H6.66663C3.33329 1.66663 1.66663 3.33329 1.66663 6.66663V17.5C1.66663 17.9583 2.04163 18.3333 2.49996 18.3333H13.3333C16.6666 18.3333 18.3333 16.6666 18.3333 13.3333V6.66663C18.3333 3.33329 16.6666 1.66663 13.3333 1.66663ZM11.6666 12.7083H5.83329C5.49163 12.7083 5.20829 12.425 5.20829 12.0833C5.20829 11.7416 5.49163 11.4583 5.83329 11.4583H11.6666C12.0083 11.4583 12.2916 11.7416 12.2916 12.0833C12.2916 12.425 12.0083 12.7083 11.6666 12.7083ZM14.1666 8.54163H5.83329C5.49163 8.54163 5.20829 8.25829 5.20829 7.91663C5.20829 7.57496 5.49163 7.29163 5.83329 7.29163H14.1666C14.5083 7.29163 14.7916 7.57496 14.7916 7.91663C14.7916 8.25829 14.5083 8.54163 14.1666 8.54163Z" fill="white"></path>
                </svg>
                <span class="tracking-tight text-sm font-semibold text-white">Talk to us</span>
            </a>
        </div>
    </div>
</section>

<div x-data="{ mobileNavOpen: false }">
    <nav class="relative p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="#" class="inline-block">
                    <img class="h-7" src="consulty-assets/logos/consulty-logo2.svg" alt="">
                </a>
                <span class="hidden lg:block px-2 py-1 bg-orange-50 border border-orange-100 rounded-3xl text-orange-500 text-xs font-medium tracking-tight">We are hiring!</span>
            </div>
            <ul class="hidden lg:flex items-center gap-2">
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class=" group-hover:text-black text-sm font-medium tracking-tight">Products</span>
                            <div class=" group-hover:text-black transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200  text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200  text-sm font-medium tracking-tight rounded-full">Support</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="group-hover:text-black text-sm font-medium tracking-tight">Resources</span>
                            <div class="group-hover:text-black transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                    <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="hidden lg:flex gap-4">
                <a href="#" class="bg-white h-14 border border-gray-200 rounded-full px-5 py-3 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Sign In</a>
                <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                    <span class="text-sm font-semibold tracking-tight text-white">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
            <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#" class="lg:hidden">
                <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </nav>
    <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 items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-7" src="consulty-assets/logos/consulty-logo2.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="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Products</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 text-sm font-medium tracking-tight rounded-full">Support</a>
                </li>
                <li>
                    <a href="#" class="inline-block py-2 px-3 hover:bg-gray-50 transition duration-200 rounded-full">
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium tracking-tight">Resources</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="flex flex-col gap-4">
                <a href="#" class="bg-white h-14 border border-gray-200 rounded-full px-5 py-3 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Sign In</a>
                <a href="#" class="rounded-full bg-black px-5 py-3 h-14 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 inline-flex items-center justify-center gap-2 transition duration-200">
                    <span class="text-white text-sm font-semibold tracking-tight">Get A Free Consultation</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66666H7.33333C4.38781 6.66666 2 9.05447 2 12V13.3333M14 6.66666L10 10.6667M14 6.66666L10 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</div>

<section class="bg-gray-50 pt-32 pb-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading tracking-tight text-4xl md:text-5xl font-medium mb-4">Open Positions</h1>
                <p class="tracking-tight text-gray-600 max-w-sm">It is a long established fact that a reader will be distracted by the readable.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <p class="tracking-tight text-gray-700 font-medium mb-5">Design</p>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-2">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Product Designer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$60k - $72k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-6">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Senior UX Designer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$120k - $150k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <p class="tracking-tight text-gray-700 font-medium mb-5">Engineering</p>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-2">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Jr. Software Developer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Remote</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$60k - $72k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Full-stack Developer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$120k - $150k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-black px-8 md:px-24 pt-32 pb-44">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="flex flex-col justify-between gap-4 h-full">
                <p class="text-white tracking-tight">Our services</p>
                <div>
                    <h2 class="text-white tracking-tight font-heading text-2xl font-semibold mb-4">Vision &amp; direction</h2>
                    <p class="text-gray-400 mb-6 tracking-tight max-w-xs">There are many variations of passages you the blocks needed to create a truly professional website for your template. </p>
                    <a href="#" class="bg-black border border-gray-200 h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 tracking-tight text-white text-sm font-medium hover:bg-gray-900 focus:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">Explore All Services</a>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-2/3 p-4">
            <div class="overflow-x-auto overflow-y-hidden">
                <div class="flex" style="height:628px;">
                    <div class="flex-shrink-0">
                        <div class="flex h-full">
                            <img class="h-full transform translate-x-16" src="consulty-assets/services/picture1.png" alt="">
                            <a href="#" class="group">
                                <div class="flex gap-5 h-full">
                                    <div class="flex flex-col justify-between items-end h-full">
                                        <div class="text-white">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                                <path d="M36 10.5L16.5 10.5C16.1022 10.5 15.7206 10.6581 15.4393 10.9394C15.158 11.2207 15 11.6022 15 12C15 12.3979 15.158 12.7794 15.4393 13.0607C15.7206 13.342 16.1022 13.5 16.5 13.5L32.3794 13.5L10.9387 34.9388C10.6573 35.2203 10.4992 35.602 10.4992 36C10.4992 36.3981 10.6573 36.7798 10.9387 37.0613C11.2202 37.3428 11.602 37.5009 12 37.5009C12.398 37.5009 12.7798 37.3428 13.0612 37.0613L34.5 15.6207L34.5 31.5001C34.5 31.8979 34.658 32.2794 34.9393 32.5607C35.2206 32.842 35.6022 33.0001 36 33.0001C36.3978 33.0001 36.7794 32.842 37.0607 32.5607C37.342 32.2794 37.5 31.8979 37.5 31.5001L37.5 12C37.5 11.6022 37.342 11.2207 37.0607 10.9394C36.7794 10.6581 36.3978 10.5 36 10.5Z" fill="currentColor"></path>
                                            </svg>
                                        </div>
                                        <div class="flex gap-4 items-center">
                                            <h2 class="font-heading text-white text-6xl font-medium tracking-tight">01</h2>
                                            <p class="text-white text-xl font-semibold tracking-tight">Strategy</p>
                                        </div>
                                    </div>
                                    <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">02</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Branding</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">03</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Marketing</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="fixed top-0 left-0 z-30 w-full" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="w-full py-4 px-5 bg-orange-400 relative" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
        <p class="tracking-tight text-white text-sm font-medium text-center w-56 sm:w-auto mx-auto">
            <span>A quick announcement goes here.</span>
            <a href="#" class="underline">Add your quick alert here</a>
        </p>
        <div class="absolute right-5 top-1/2 transform -translate-y-1/2">
            <a href="#" x-on:click.prevent="open = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </div>
</div>

<section class="pt-32 pb-48 px-8 md:px-24">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <img class="object-cover rounded-2xl object-right" style="height:600px;" src="consulty-assets/about/picture1.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <div class="pt-14">
                <h1 class="font-heading text-4xl font-medium mb-4 tracking-tight">About our company</h1>
                <p class="text-gray-700 text-lg mb-6 max-w-lg tracking-tight">It is a long established fact that a reader will be content distracted by the readable content of a page when it looking at its layout. The point of using is that it has the many variations of passages distribution.</p>
                <a href="#" class="bg-black h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 tracking-tight hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                    <span class="text-white text-sm font-semibold tracking-tight">Read More About Us</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-32">
    <h1 class="font-heading tracking-tight text-5xl md:text-6xl font-medium mb-6 max-w-sm md:max-w-lg">The team behind successful product</h1>
    <p class="tracking-tight text-lg text-gray-700 mb-24 max-w-xl">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
    <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-2/12 p-4">
            <img class="rounded-2xl h-56 w-full object-cover mb-6" src="consulty-assets/team/picture1.png" alt="">
            <img class="rounded-2xl h-28 w-full object-cover" src="consulty-assets/team/shapes-box1.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-3/12 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:360px;" src="consulty-assets/team/picture2.png" alt="">
        </div>
        <div class="w-full md:w-1/2 lg:w-3/12 p-4">
            <div class="flex gap-6">
                <img class="rounded-2xl w-16 object-cover" style="height:360px;" src="consulty-assets/team/shapes-box2.png" alt="">
                <div class="flex-1">
                    <img class="rounded-2xl w-full object-cover mb-6" style="height:165px;" src="consulty-assets/team/picture3.png" alt="">
                    <img class="rounded-2xl w-full object-cover" style="height:165px;" src="consulty-assets/team/picture4.png" alt="">
                </div>
            </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-4/12 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:360px;" src="consulty-assets/team/picture5.png" alt="">
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-10">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-between gap-8 h-full">
                <div>
                    <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium mb-8 max-w-sm md:max-w-lg">Get help from the industry experts.</h1>
                    <p class="tracking-tight text-gray-700 text-lg mb-8 max-w-lg">We are passionate about transforming spaces into extraordinary experiences. With a seamless fusion of architecture and interior design.</p>
                    <a href="#" class="bg-black h-16 rounded-full px-6 py-4 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                        <span class="tracking-tight font-bold text-white">Book A Free Call</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <div class="flex flex-wrap items-center gap-6">
                    <h2 class="font-heading tracking-tight text-4xl md:text-6xl font-medium">159%</h2>
                    <div>
                        <p class="tracking-tight text-lg font-semibold">Average Revenue</p>
                        <p class="tracking-tight text-gray-600">From customers worldwide</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <img class="w-full object-cover rounded-2xl" style="height:815px;" src="consulty-assets/cta/picture1.png" alt="">
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-40">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/4 p-4">
            <img class="mb-6 w-full object-cover rounded-2xl" style="height:375px;" src="consulty-assets/work/picture1.png" alt="">
            <img class="w-full object-cover rounded-2xl" style="height:280px;" src="consulty-assets/work/picture2.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <div class="relative" style="height:682px;">
                <img class="absolute inset-0 w-full h-full rounded-2xl" src="consulty-assets/work/picture3.png" alt="">
                <div class="absolute inset-0">
                    <div class="flex flex-col justify-between h-full p-8">
                        <div>
                            <p class="text-white tracking-tight mb-4">Growth</p>
                            <h1 class="font-heading tracking-tight text-white text-3xl font-medium max-w-md">We helped Flarezo to increase their website conversion rate by 310%</h1>
                        </div>
                        <a href="#" class="tracking-tight bg-white px-5 py-3 w-full h-14 rounded-full hover:bg-gray-50 focus:bg-gray-50 focus:ring-4 focus:ring-gray-300 text-sm font-semibold transition duration-200 inline-flex items-center justify-center">Read Full Story</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/4 p-4">
            <img class="w-full object-cover mb-6 rounded-2xl" style="height:327px;" src="consulty-assets/work/picture4.png" alt="">
            <img class="w-full object-cover rounded-2xl" style="height:327px;" src="consulty-assets/work/picture5.png" alt="">
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-2/3 p-4">
            <p class="tracking-tight text-gray-600 mb-4">Contact us</p>
            <h1 class="font-heading tracking-tight text-5xl md:text-6xl font-medium mb-14">Get In Touch</h1>
            <form action="#">
                <div class="max-w-2xl">
                    <div class="flex flex-wrap -m-4 mb-3">
                        <div class="w-full sm:w-1/2 p-4">
                            <label for="contact1-input1" class="block mb-3 text-sm font-medium tracking-tight">Your name</label>
                            <input type="text" id="contact1-input1" class="w-full px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="John Doe">
                        </div>
                        <div class="w-full sm:w-1/2 p-4">
                            <label for="contact1-input2" class="block mb-3 text-sm font-medium tracking-tight">Email</label>
                            <input type="email" id="contact1-input2" class="w-full px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="john@email.com">
                        </div>
                    </div>
                    <label for="contact1-input3" class="block mb-3 text-sm font-medium tracking-tight">Subject</label>
                    <input type="text" id="contact1-input3" class="w-full mb-3 px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="Add a subject">
                    <label for="contact1-input4" class="block mb-3 text-sm font-medium tracking-tight">Message</label>
                    <textarea id="contact1-input4" rows="5" class="w-full mb-4 px-6 py-4 rounded-3xl resize-none border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="Write your message"></textarea>
                    <button type="submit" class="bg-black h-16 rounded-full px-6 py-4 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                        <span class="text-white font-bold tracking-tight">Send Message</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:600px;" src="consulty-assets/contact/picture1.png" alt="">
        </div>
    </div>
</section>

<div class="fixed bottom-0 left-0 z-40 w-full p-6" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="container mx-auto px-4">
        <div class="bg-black rounded-2xl p-6 relative overflow-hidden flex items-center justify-between gap-4 flex-wrap">
            <p class="trakcing-tight text-white">
                <span>We use cookies to enhance your browser experience. By using this website you agree to our</span>
                <span class="underline">Cookie Policy.</span>
            </p>
            <a href="#" x-on:click.prevent="open = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M6 18L18 6M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
            <div class="absolute bottom-0 left-0 right-0">
                <div class="bg-orange-400 w-full h-1"></div>
            </div>
            <div class="absolute top-1/2 right-28 transform -translate-y-1/2 h-full">
                <img class="h-full" src="consulty-assets/cookies/shapes1.svg" alt="">
            </div>
        </div>
    </div>
</div>

<div class="bg-black py-10 relative overflow-hidden">
    <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full">
        <div class="flex items-center gap-24 animate-ticker animation-linear">
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <g clip-path="url(#clip0_815_27045)">
                      <path d="M9.04896 2.92664C9.34833 2.00537 10.6517 2.00538 10.951 2.92664L12.0208 6.21864C12.1547 6.63063 12.5386 6.90957 12.9718 6.90958L16.4333 6.90971C17.402 6.90975 17.8047 8.1493 17.0211 8.71871L14.2208 10.7534C13.8703 11.008 13.7237 11.4594 13.8575 11.8714L14.927 15.1635C15.2263 16.0847 14.1719 16.8508 13.3882 16.2815L10.5878 14.247C10.2373 13.9924 9.76272 13.9924 9.41225 14.247L6.61179 16.2815C5.82809 16.8508 4.77367 16.0847 5.07297 15.1635L6.14249 11.8714C6.27634 11.4594 6.1297 11.008 5.77924 10.7534L2.97894 8.71871C2.19528 8.1493 2.59804 6.90975 3.56672 6.90971L7.02818 6.90958C7.46137 6.90957 7.8453 6.63063 7.97918 6.21864L9.04896 2.92664Z" stroke="white" stroke-width="1.5"></path>
                    </g>
                    <defs>
                      <clipPath id="clip0_815_27045">
                        <rect width="20" height="20" fill="white"></rect>
                      </clipPath>
                    </defs>
                </svg>
                <p class="tracking-tight text-white text-xl font-medium whitespace-nowrap">Strategic Roadmapping</p>
            </div>
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M4.16663 10.8333L7.49996 14.1667L15.8333 5.83333" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="tracking-tight text-white text-xl font-medium whitespace-nowrap">Collaborative Ideation</p>
            </div>
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M7.49994 10L9.16661 11.6667L12.4999 8.33333M6.52889 3.91421C7.12683 3.86649 7.69449 3.63136 8.15104 3.24229C9.21644 2.33436 10.7834 2.33436 11.8488 3.24229C12.3054 3.63136 12.873 3.86649 13.471 3.91421C14.8664 4.02556 15.9744 5.13359 16.0857 6.52895C16.1334 7.12689 16.3686 7.69455 16.7576 8.1511C17.6656 9.2165 17.6656 10.7835 16.7576 11.8489C16.3686 12.3055 16.1334 12.8731 16.0857 13.4711C15.9744 14.8664 14.8664 15.9744 13.471 16.0858C12.873 16.1335 12.3054 16.3686 11.8488 16.7577C10.7834 17.6656 9.21644 17.6656 8.15104 16.7577C7.69449 16.3686 7.12683 16.1335 6.52889 16.0858C5.13353 15.9744 4.0255 14.8664 3.91414 13.4711C3.86643 12.8731 3.6313 12.3055 3.24223 11.8489C2.3343 10.7835 2.3343 9.2165 3.24223 8.1511C3.6313 7.69455 3.86643 7.12689 3.91414 6.52895C4.0255 5.13359 5.13353 4.02556 6.52889 3.91421Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="tracking-tight text-white text-xl font-medium whitespace-nowrap">Proactive Problem Solving</p>
            </div>
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M6.66667 9.99999H6.675M10 9.99999H10.0083M13.3333 9.99999H13.3417M17.5 9.99999C17.5 13.6819 14.1421 16.6667 10 16.6667C8.71728 16.6667 7.50976 16.3804 6.45389 15.8759L2.5 16.6667L3.66249 13.5667C2.9263 12.5353 2.5 11.3119 2.5 9.99999C2.5 6.3181 5.85786 3.33333 10 3.33333C14.1421 3.33333 17.5 6.3181 17.5 9.99999Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="tracking-tight text-white text-xl font-medium whitespace-nowrap">Premium Customer Support</p>
            </div>
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M7.5 9.99999L9.16667 11.6667L12.5 8.33333M17.1816 4.98693C17.011 4.99558 16.8394 4.99996 16.6667 4.99996C14.1055 4.99996 11.7691 4.0371 9.99994 2.4536C8.23076 4.03703 5.89449 4.99986 3.33333 4.99986C3.16065 4.99986 2.98898 4.99548 2.81844 4.98683C2.61059 5.78984 2.5 6.632 2.5 7.49999C2.5 12.1596 5.68693 16.0748 10 17.1849C14.3131 16.0748 17.5 12.1596 17.5 7.49999C17.5 6.63204 17.3894 5.78991 17.1816 4.98693Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="tracking-tight text-white text-xl font-medium whitespace-nowrap">Lifetime Membership</p>
            </div>
        </div>
    </div>
</div>