Responsive Dark Theme Footer with Social Icons

<footer class="bg-slate-900/90 border-slate-800 border-t backdrop-blur-lg">
    <div class="max-w-7xl mx-auto px-6 py-16">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            <div class="">
                <div class="flex items-center gap-3 mb-6">
                    <span class="font-semibold text-xl tracking-tight">BeautyMaster</span>
                </div>
                <p class="text-slate-400 text-sm mb-6 leading-relaxed">
                    Transform your passion for beauty into a thriving career. Join thousands of certified makeup artists
                    who started their journey with us.
                </p>
                <div class="flex gap-4">

                    <a href="#"
                        class="w-10 h-10 hover:bg-cyan-600 flex items-center justify-center transition-colors bg-slate-800 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="w-4 h-4">
                            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                            <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                            <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
                        </svg>
                    </a>
                    <a href="#"
                        class="w-10 h-10 rounded-full bg-slate-800 hover:bg-cyan-600 flex items-center justify-center transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="w-4 h-4">
                            <path
                                d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
                            </path>
                        </svg>
                    </a>
                    <a href="#"
                        class="w-10 h-10 rounded-full bg-slate-800 hover:bg-cyan-600 flex items-center justify-center transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="w-4 h-4">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z">
                            </path>
                            <rect width="4" height="12" x="2" y="9"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                </div>
            </div>

            <div class="">
                <h4 class="font-semibold mb-6">Courses</h4>
                <ul class="space-y-4 text-sm">
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Essential
                            Makeup</a></li>
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Professional
                            Artistry</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Master Artist
                            Program</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Bridal
                            Specialization</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Editorial &amp;
                            Fashion</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Business
                            Masterclass</a></li>
                </ul>
            </div>

            <div class="">
                <h4 class="font-semibold mb-6">Support</h4>
                <ul class="space-y-4 text-sm">
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Help Center</a></li>
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Student
                            Portal</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Community Forum</a>
                    </li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Live Q&amp;A
                            Sessions</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Technical Support</a>
                    </li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Contact Us</a></li>
                </ul>
            </div>

            <div class="">
                <h4 class="font-semibold mb-6">Company</h4>
                <ul class="space-y-4 text-sm">
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">About Us</a>
                    </li>
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Our
                            Instructors</a></li>
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Success
                            Stories</a></li>
                    <li class=""><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Press &amp;
                            Media</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Careers</a></li>
                    <li><a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Partnerships</a></li>
                </ul>
            </div>
        </div>

        <div class="pt-8 border-t border-slate-800">
            <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex flex-col sm:flex-row gap-4 text-sm text-slate-400">
                    <span>© 2024 BeautyMaster Academy. All rights reserved.</span>
                </div>
                <div class="flex gap-6 text-sm text-slate-400">
                    <a href="#" class="hover:text-cyan-400 transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-cyan-400 transition-colors">Terms of Service</a>
                    <a href="#" class="hover:text-cyan-400 transition-colors">Refund Policy</a>
                </div>
            </div>
        </div>
    </div>
</footer>