<!-- Footer -->
<footer class="bg-white text-gray-600 text-sm border-t">
  <div class="max-w-screen-xl mx-auto px-6 py-10">
    <!-- Ratings -->
    <div class="flex flex-wrap justify-center gap-10 text-center mb-10">
      <div class="flex items-center gap-2">
        <img src="https://cdn-icons-png.flaticon.com/128/5290/5290058.png" alt="G2" class="w-5 h-5" />
        <span class="font-semibold text-black">G2 / 4.8</span>
      </div>
      <div class="flex items-center gap-2">
        <img src="https://cdn-icons-png.flaticon.com/128/5300/5300532.png" alt="Capterra" class="w-5 h-5" />
        <span class="font-semibold text-black">Capterra / 4.9</span>
      </div>
      <div class="flex items-center gap-2">
        <img src="https://cdn-icons-png.flaticon.com/128/18359/18359846.png" alt="TrustRadius" class="w-5 h-5" />
        <span class="font-semibold text-black">TrustRadius / 5.0</span>
      </div>
    </div>

    <!-- Footer Grid -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-10 border-t pt-10">

      <!-- Company Info -->
      <div class="space-y-4">
        <div class="flex items-center gap-2">
          <i data-lucide="leaf" class="w-5 h-5 text-black"></i>
          <span class="font-semibold text-black text-lg">Email Tools</span>
        </div>
        <div class="flex items-center gap-2">
          <i data-lucide="mail" class="w-4 h-4"></i>
          <a href="mailto:#">support@domain.com</a>
        </div>
        <div class="flex items-center gap-2">
          <i data-lucide="phone" class="w-4 h-4"></i>
          <span>+1 800 123 4567</span>
        </div>
        
        <!-- Social Icons -->
        <div class="flex gap-3 mt-4">
          <a href="#" class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 hover:bg-blue-600 transition group">
            <i data-lucide="facebook" class="w-4 h-4 text-gray-600 group-hover:text-white"></i>
          </a>
          <a href="#" class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 hover:bg-blue-600 transition group">
            <i data-lucide="linkedin" class="w-4 h-4 text-gray-600 group-hover:text-white"></i>
          </a>
          <a href="#" class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 hover:bg-red-500 transition group">
            <i data-lucide="youtube" class="w-4 h-4 text-gray-600 group-hover:text-white"></i>
          </a>
          <a href="#" class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 hover:bg-black transition group">
            <i data-lucide="twitter" class="w-4 h-4 text-gray-600 group-hover:text-white"></i>
          </a>
        </div>

        <button class="mt-6 inline-flex items-center gap-2 px-4 py-2 text-sm bg-blue-100 text-blue-700 font-medium rounded-md hover:bg-blue-200 transition">
          <i data-lucide="mail-check" class="w-4 h-4"></i> Contact us</button> 
      </div>

      <!-- About -->
      <div class="space-y-2">
        <h3 class="text-black font-semibold mb-2">About</h3>
        <p><a href="#">Company Overview</a></p>
        <p><a href="#">Careers</a></p>
        <p><a href="#">Our Team</a></p>
        <p><a href="#">Blog</a></p>
      </div>

      <!-- Help & Support -->
      <div class="space-y-2">
        <h3 class="text-black font-semibold mb-2">Help & Support</h3>
        <p><a href="#">FAQ</a></p>
        <p><a href="#">Contact Support</a></p>
        <p><a href="#">Report an Issue</a></p>
        <p><a href="#">Knowledge Base</a></p>
      </div>

      <!-- Legal -->
      <div class="space-y-2">
        <h3 class="text-black font-semibold mb-2">Legal</h3>
        <p><a href="#">Privacy Policy</a></p>
        <p><a href="#">Terms & Conditions</a></p>
        <p><a href="#">Cookie Policy</a></p>
        <p><a href="#">Acceptable Use Policy</a></p>
      </div>

      <!-- Resources -->
      <div class="space-y-2">
        <h3 class="text-black font-semibold mb-2">Resources</h3>
        <p><a href="#">Guides</a></p>
        <p><a href="#">Case Studies</a></p>
        <p><a href="#">Blog</a></p>
        <p><a href="#">Webinars</a></p>
        <p><a href="#">Press</a></p>
      </div>
    </div>

    <!-- Bottom Row -->
    <div class="flex flex-col md:flex-row justify-between items-center mt-10 text-xs text-gray-500 space-y-4 md:space-y-0">
      <div>
        © 2025 Company Name. All rights reserved.<br />
        Address Line 1, City, Country
      </div>
      <div class="flex gap-4">
        <a href="#">Security</a>
        <a href="#">Privacy Policy</a>
        <a href="#">Cookie Policy</a>
        <a href="#">Terms & Conditions</a>
        <a href="#">Acceptable Use Policy</a>
      </div>
    </div>

    <!-- Footer Logos -->
    <div class="flex flex-wrap justify-between items-center mt-6 text-xs">
      <div class="flex gap-2 items-center">
        <i class="lucide lucide-shield-check w-4 h-4 text-green-600"></i> 
        Backed by Trusted Partners
      </div>
      <div class="flex gap-2 items-center">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png" alt="Visa" class="w-8" />
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png" alt="MasterCard" class="w-8" />
        <img src="https://cdn-icons-png.flaticon.com/128/349/349230.png" alt="Discover" class="w-8" />
        <img src="https://cdn-icons-png.flaticon.com/128/349/349228.png" alt="Amex" class="w-8" />
      </div>
    </div>
  </div>
</footer>






<!-- Animations -->
<style>
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out both;
  }

  /* Adding a text shadow to the hero header for better contrast */
  .text-shadow-md {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  }
</style>


<!-- Scripts -->
<script>
  lucide.createIcons();
  document.getElementById('mobile-menu-button').addEventListener('click', function () {
    document.getElementById('mobile-menu').classList.toggle('hidden');
  });
</script>

<!-- Animations (Tailwind custom) -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in { animation: fade-in 0.6s ease-out both; }
  .animate-fade-in-down { animation: fade-in-down 0.6s ease-out both; }
  .animate-fade-in-up { animation: fade-in-up 0.6s ease-out both; }
  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
</style>


</body>
</html>