Responsive Contact CTA with Email & Schedule Buttons

<div class="max-w-4xl lg:px-8 text-center mr-auto ml-auto pr-6 pl-6">
        <div class="space-y-8 animate-fade-in-up">
          <h2 class="text-4xl sm:text-5xl font-bold tracking-tight text-white">Let's Work Together</h2>
          <p class="text-xl text-gray-400 max-w-2xl mx-auto">
            I'm always interested in hearing about new opportunities, especially in emerging tech and social impact.
          </p>
          
          <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
            <a href="mailto:alex.chen.design@gmail.com" class="group flex items-center gap-3 rounded-2xl bg-white text-black px-6 py-4 text-lg font-medium hover:bg-gray-100 hover:scale-105 transition-all duration-300">
              <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" data-lucide="mail" class="lucide lucide-mail h-5 w-5"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
              <span>alex.chen.design@gmail.com</span>
            </a>
            <button id="footer-schedule-btn" class="group flex items-center gap-3 rounded-2xl border border-white/20 bg-white/5 text-white px-6 py-4 text-lg font-medium hover:bg-white/10 hover:border-white/30 transition-all duration-300">
              <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" data-lucide="calendar" class="lucide lucide-calendar h-5 w-5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
              <span>Schedule a Call</span>
            </button>
          </div>
        </div>
      </div>