Untitled

<!-- Footer Section -->
        <footer class="bg-white text-[#FFFFFFB2] relative">
            <div class="bg-[#052e26] md:rounded-t-3xl">
                <div class="container mx-auto px-4 sm:px-6 lg:px-8 rounded">
                    <!-- Upper and Lower Footer: Combined Grid Layout -->
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-8 py-12">
                        <!-- Logo and Social Links (spanning 2 columns on mobile, 1 on larger screens) -->
                        <div class="col-span-2 sm:col-span-1">
                            <div class="flex-shrink-0 mb-4">
                                <!-- Logo -->
                                <a href="#" class="flex items-center">
                                    <img
                                        src="../assets/images/logo/logo_footer.png"
                                        alt="Logo"
                                        class="h-8 w-auto"
                                    />
                                </a>
                            </div>
                            <p class="mb-4 w-[14rem] text-[#FFF] sm:w-full">
                                Fun, engaging and authentic Platform
                            </p>
                            <div class="flex space-x-4">
                                <a href="#"
                                    ><img
                                        src="../assets/linkedin.png"
                                        alt="LinkedIn"
                                        class="h-5"
                                /></a>
                                <a href="#"
                                    ><img
                                        src="../assets/youtube.png"
                                        alt="YouTube"
                                        class="h-5"
                                /></a>
                                <a href="#"
                                    ><img
                                        src="../assets/twitter.png"
                                        alt="Twitter"
                                        class="h-5"
                                /></a>
                                <a href="#"
                                    ><img
                                        src="../assets/facebook.png"
                                        alt="Facebook"
                                        class="h-5"
                                /></a>
                            </div>
                        </div>

                        <!-- Product Links -->
                        <div>
                            <h4 class="font-bold mb-4 text-[#FFF]">Product</h4>
                            <ul>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >About us</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >FAQs</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Contact</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Pricing</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="../signin.html"
                                        class="hover:text-green-400"
                                        >Log in</a
                                    >
                                </li>
                            </ul>
                        </div>

                        <!-- Resources Links -->
                        <div>
                            <h4 class="font-bold mb-4 text-[#FFF]">
                                Resources
                            </h4>
                            <ul>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Learn</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Videos</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Help Center</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Webinar Glossary</a
                                    >
                                </li>
                            </ul>
                        </div>

                        <!-- More Links -->
                        <div>
                            <h4 class="font-bold mb-4 text-[#FFF]">More</h4>
                            <ul>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Our story</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >We’re hiring</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Resolver NG</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Resolver NG Satisfaction</a
                                    >
                                </li>
                            </ul>
                        </div>

                        <div class="block md:hidden">
                            <h4 class="font-bold mb-4 text-[#FFF]">Support</h4>
                            <ul>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Trust Center</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Privacy Policy</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Resolver NG</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Status</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Legal</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Do Not Sell My Info</a
                                    >
                                </li>
                                <li>
                                    <a href="#" class="hover:text-green-400"
                                        >Opt out</a
                                    >
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="border-t text-[#FFF] border-gray-600 py-4">
                        <div
                            class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-sm space-y-4 sm:space-y-0"
                        >
                            <!-- Left Section: Links -->
                            <div class="hidden md:block">
                                <div
                                    class="flex flex-wrap justify-center sm:justify-start space-x-6"
                                >
                                    <a href="#" class="hover:text-green-400"
                                        >Trust Center</a
                                    >
                                    <a href="#" class="hover:text-green-400"
                                        >Privacy Policy</a
                                    >
                                    <a href="#" class="hover:text-green-400"
                                        >Status</a
                                    >
                                    <a href="#" class="hover:text-green-400"
                                        >Legal</a
                                    >
                                    <a href="#" class="hover:text-green-400"
                                        >Do Not Sell My Info</a
                                    >
                                    <a href="#" class="hover:text-green-400"
                                        >Opt out</a
                                    >
                                </div>
                            </div>

                            <!-- Right Section: Copyright -->
                            <div class="text-right sm:text-center">
                                <p>© All rights reserved by Resolver NG.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Star Icon (Absolute Positioned) -->
                    <div
                        class="absolute top-9 md:top-11 right-9 transform translate-x-1/4 -translate-y-1/4"
                    >
                        <img
                            src="../assets/images/footer_star.png"
                            alt="Star Icon"
                            class="h-32 w-32"
                        />
                    </div>
                </div>
            </div>
        </footer>