<section
  id="challenges"
  class="relative py-32 bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 overflow-hidden"
>
  <!-- Animated background patterns -->
  <div class="absolute inset-0 opacity-10">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmOTczMTYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0aDZ2NmgtNnpNNDIgNDBoNnY2aC02ek0zMCA0MGg2djZoLTZ6TTQyIDM0aDZ2NmgtNnoiLz48L2c+PC9nPjwvc3ZnPg==')]"></div>
  </div>
  
  <!-- Colorful floating elements -->
  <div class="absolute top-1/4 left-10 w-32 h-32 bg-gradient-to-r from-orange-400 to-amber-400 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-float"></div>
  <div class="absolute top-1/3 right-10 w-40 h-40 bg-gradient-to-r from-amber-300 to-yellow-400 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-float animation-delay-2000"></div>
  <div class="absolute bottom-1/4 left-1/3 w-36 h-36 bg-gradient-to-r from-red-400 to-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-float animation-delay-4000"></div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section header with vibrant design -->
    <div class="text-center mb-20">
      <span class="inline-flex items-center px-4 py-1.5 rounded-full bg-orange-100 text-orange-800 text-sm font-medium mb-6 ring-1 ring-orange-200">
        <span class="w-2 h-2 bg-orange-500 rounded-full mr-2 animate-pulse"></span>
        Remarkable Achievements
      </span>
      <h2 class="text-6xl font-black mb-8 bg-clip-text text-transparent bg-gradient-to-r from-orange-600 via-amber-500 to-yellow-500 tracking-tight">
        {{ sections.challenges.title }}
      </h2>
      <p class="text-xl text-orange-900/60 max-w-3xl mx-auto leading-relaxed">
        {{ sections.challenges.subtitle }}
      </p>
    </div>

    <!-- Vibrant card grid with modern animations -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
      {% for item in sections.challenges.items %}
      <div class="group">
        <div class="relative h-full transition-all duration-500 ease-out transform-gpu hover:-translate-y-2 hover:shadow-2xl">
          <div class="h-full p-8 rounded-3xl bg-white shadow-lg border border-orange-100 overflow-hidden">
            <!-- Glowing accent -->
            <div class="absolute -inset-0.5 bg-gradient-to-r from-orange-500 to-amber-400 rounded-3xl opacity-0 group-hover:opacity-100 blur-sm transition duration-1000 group-hover:duration-200"></div>
            
            <!-- Card content -->
            <div class="relative h-full bg-white rounded-3xl p-8">
              <!-- Animated icon with glow -->
              <div class="relative w-20 h-20 mb-8 group-hover:scale-110 transition-transform duration-300">
                <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-orange-400 to-amber-500 opacity-10 group-hover:opacity-20 transition-opacity"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                  <i class="{{ item.icon }} text-orange-500 text-4xl"></i>
                </div>
                <div class="absolute -inset-1 bg-orange-500/20 rounded-2xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
              </div>
              
              <!-- Content with bright accents -->
              <h3 class="text-4xl font-extrabold text-orange-900 mb-4 group-hover:text-orange-600 transition-colors counter-value">
                {{ item.value }}
              </h3>
              <p class="text-lg text-orange-700/70 group-hover:text-orange-700 transition-colors">
                {{ item.label }}
              </p>
              
              <!-- Decorative elements -->
              <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl from-orange-100 to-transparent rounded-tl-full opacity-40"></div>
              
              <!-- Animated corner dot -->
              <div class="absolute -bottom-2 -right-2 w-10 h-10 bg-gradient-to-br from-orange-400 to-amber-300 rounded-full opacity-30 group-hover:scale-[3] group-hover:opacity-10 transition-all duration-700"></div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Vibrant CTA button -->
    <div class="text-center mt-24">
      <a href="#contact" class="group relative inline-flex items-center justify-center">
        <!-- Button background with gradient -->
        <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform translate-x-2 translate-y-2 bg-orange-400 group-hover:translate-x-0 group-hover:translate-y-0 rounded-xl"></span>
        <span class="absolute inset-0 w-full h-full bg-white border-2 border-orange-500 group-hover:bg-orange-500 rounded-xl"></span>
        
        <!-- Button content -->
        <span class="relative px-10 py-5 text-orange-500 group-hover:text-white transition-colors flex items-center space-x-3">
          <span class="font-bold text-lg">Start Your Journey</span>
          <svg class="w-6 h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
          </svg>
          
          <!-- Animated dots on hover -->
          <span class="absolute -right-4 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
        </span>
      </a>
    </div>
  </div>
  
  <style>
    /* Custom animations */
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(30px, -30px) scale(1.1); }
      50% { transform: translate(-20px, 20px) scale(0.9); }
      75% { transform: translate(20px, 30px) scale(1.05); }
    }
    
    .animate-float {
      animation: float 18s ease-in-out infinite;
    }
    
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    
    .animation-delay-4000 {
      animation-delay: 4s;
    }
    
    /* Mobile optimizations */
    @media (max-width: 639px) {
      .grid {
        gap: 2rem;
      }
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Counter animation
      const counters = document.querySelectorAll('.counter-value');
      
      counters.forEach(counter => {
        const value = counter.innerText;
        if (!isNaN(parseInt(value.replace(/,/g, '')))) {
          const target = parseInt(value.replace(/,/g, ''));
          const duration = 2500;
          const frameDuration = 1000/60;
          const totalFrames = Math.round(duration / frameDuration);
          const easeOutQuad = t => t * (2 - t);
          
          let frame = 0;
          counter.innerText = '0';
          
          const animate = () => {
            frame++;
            const progress = easeOutQuad(frame / totalFrames);
            const currentCount = Math.round(target * progress);
            
            if (currentCount === target) {
              counter.innerText = target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              cancelAnimationFrame(animate);
            } else {
              counter.innerText = currentCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              requestAnimationFrame(animate);
            }
          };
          
          // Start animation when element is in view
          const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
              requestAnimationFrame(animate);
              observer.disconnect();
            }
          }, { threshold: 0.5 });
          
          observer.observe(counter);
        }
      });
      
      // Add hover effect to cards
      const cards = document.querySelectorAll('.group');
      cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
          // Add subtle movement to other cards when one is hovered
          cards.forEach(otherCard => {
            if (otherCard !== card) {
              otherCard.style.transform = 'scale(0.98)';
              otherCard.style.transition = 'transform 0.5s ease-out';
            }
          });
        });
        
        card.addEventListener('mouseleave', () => {
          // Reset other cards
          cards.forEach(otherCard => {
            if (otherCard !== card) {
              otherCard.style.transform = 'scale(1)';
            }
          });
        });
      });
    });
  </script>
</section>