ass="text-neutral-400 hover:text-white transition-colors">About Us</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">All Articles</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">Nutrition</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">Fitness</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">Wellness</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">Contact</a></li>
          </ul>
        </div>

        <!-- Newsletter -->
        <div>
          <h3 class="font-medium text-lg mb-4">Subscribe to Our Newsletter</h3>
          <p class="text-neutral-400 mb-4">
            Get the latest health tips and articles delivered directly to your inbox.
          </p>
          <form class="space-y-3">
            <input type="email" placeholder="Your email address" class="w-full px-4 py-3 rounded-lg bg-neutral-800 border border-neutral-700 text-white focus:outline-none focus:ring-2 focus:ring-primary">
            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 rounded-lg transition-colors">
              Subscribe
            </button>
          </form>
          <p class="text-xs text-neutral-500 mt-3">
            We respect your privacy. Unsubscribe at any time.
          </p>
        </div>
      </div>
      <div class="border-t border-neutral-800 pt-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-neutral-500 text-sm mb-4 md:mb-0">
            © 2025 Health Pulse. All rights reserved.
          </p>
          <div class="flex space-x-6">
            <a href="#" class="text-neutral-500 hover:text-white text-sm transition-colors">Privacy Policy</a>
            <a href="#" class="text-neutral-500 hover:text-white text-sm transition-colors">Terms of Service</a>
            <a href="#" class="text-neutral-500 hover:text-white text-sm transition-colors">Disclaimer</a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Back to Top Button -->
  <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all opacity-0 invisible">
    <i class="fa fa-arrow-up"></i>
  </button>

  <script>
    // Mobile menu toggle
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });

    // Header scroll effect
    const header = document.getElementById('site-header');
    const backToTopButton = document.getElementById('back-to-top');

    window.addEventListener('scroll', () => {
      // Shrink header on scroll
      if (window.scrollY > 50) {
        header.classList.add('py-2', 'shadow');
        header.classList.remove('py-4');
      } else {
        header.classList.add('py-4');
        header.classList.remove('py-2', 'shadow');
      }

      // Show/hide back to top button
      if (window.scrollY > 500) {
        backToTopButton.classList.remove('opacity-0', 'invisible');
        backToTopButton.classList.add('opacity-100', 'visible');
      } else {
        backToTopButton.classList.add('opacity-0', 'invisible');
        backToTopButton.classList.remove('opacity-100', 'visible');
      }
    });

    // Back to top functionality
    backToTopButton.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth'
          });
        }
      });
    });
  </script>
</body>

</html>