<section
  id="challenges"
  class="relative py-24 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 overflow-hidden"
>
  <!-- Decorative elements -->
  <div class="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-indigo-500/20 rounded-full opacity-70 blur-3xl"></div>
  <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-80 h-80 bg-purple-500/20 rounded-full opacity-70 blur-3xl"></div>
  <div class="absolute top-1/2 left-1/3 w-64 h-64 bg-blue-500/20 rounded-full opacity-50 blur-3xl"></div>
  
  <!-- Animated particles background -->
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0aDZ2NmgtNnpNNDIgNDBoNnY2aC02ek0zMCA0MGg2djZoLTZ6TTQyIDM0aDZ2NmgtNnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30"></div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section header with glass effect -->
    <div class="text-center mb-16 backdrop-blur-sm bg-white/5 p-6 rounded-2xl border border-white/10 shadow-xl max-w-3xl mx-auto">
      <h2 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-primary/80 to-white mb-4">
        {{ sections.challenges.title }}
      </h2>
      <p class="text-lg text-white/80 leading-relaxed">
        {{ sections.challenges.subtitle }}
      </p>
    </div>

    <!-- Mobile: horizontal snap; Desktop: grid -->
    <div
      class="overflow-x-auto snap-x snap-mandatory flex space-x-6 sm:space-x-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 pb-4"
    >
      {% for item in sections.challenges.items %}
      <div
        class="snap-center min-w-[80%] sm:min-w-0 backdrop-blur-sm bg-white/10 border border-white/20 p-8 rounded-2xl shadow-2xl transform hover:-translate-y-2 transition-all duration-500 hover:shadow-{{ item.color }}-500/20 group"
      >
        <!-- Layered shadow effect -->
        <div
          class="absolute inset-0 rounded-2xl -z-10 scale-95 opacity-70 bg-gradient-to-br from-{{ item.color }}-500/10 to-transparent"
        ></div>

        <div
          class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-{{ item.color }}-500/30 to-{{ item.color }}-500/10 rounded-xl mb-6 group-hover:scale-110 transition-transform duration-300"
        >
          <i class="{{ item.icon }} text-white text-2xl"></i>
        </div>
        
        <h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-{{ item.color }}-300 mb-3">
          {{ item.value }}
        </h3>
        
        <p class="text-white/70">{{ item.label }}</p>
        
        <!-- Animated border on hover -->
        <div class="absolute inset-0 rounded-2xl border border-{{ item.color }}-500/0 group-hover:border-{{ item.color }}-500/50 transition-colors duration-500"></div>
      </div>
      {% endfor %}
    </div>
    
    <!-- CTA button with fancy hover effect -->
    <div class="text-center mt-12">
      <a href="#contact" class="group relative inline-flex items-center justify-center overflow-hidden rounded-full p-0.5">
        <span class="absolute h-full w-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></span>
        <span class="relative flex items-center space-x-2 px-8 py-3.5 transition-all duration-300 ease-out bg-slate-900 rounded-full group-hover:bg-opacity-0">
          <span class="font-medium text-white">Get Started Today</span>
          <svg class="w-5 h-5 text-white group-hover:translate-x-1 transition-transform duration-300" 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>
        </span>
      </a>
    </div>
  </div>
  
  <!-- Custom scrollbar for mobile -->
  <style>
    /* Hide scrollbar for Chrome, Safari and Opera */
    .snap-x::-webkit-scrollbar {
      display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    .snap-x {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  </style>
</section>