<section id="challenges-1" class="py-20 bg-gradient-to-t from-white to-blue-50">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-bold text-gray-800 tracking-tight">
        {{ sections.challenges.title }}
      </h2>
      <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto leading-relaxed">
        {{ sections.challenges.subtitle }}
      </p>
    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {% for item in sections.challenges.items %}
      <div
        class="relative bg-white rounded-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
      >
        <!-- Colored top border -->
        <div class="h-2 bg-{{ item.color }}-500"></div>

        <!-- Card content -->
        <div class="p-6">
          <!-- Icon with circular gradient background -->
          <div class="relative w-16 h-16 mb-5">
            <div
              class="absolute inset-0 bg-gradient-to-br from-{{ item.color }}-100 to-{{ item.color }}-200 rounded-full"
            ></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <i class="{{ item.icon }} text-{{ item.color }}-600 text-3xl"></i>
            </div>
          </div>

          <!-- Title and description -->
          <h3 class="text-xl font-bold text-gray-800 mb-3">{{ item.value }}</h3>
          <p class="text-gray-600 text-sm leading-relaxed">{{ item.label }}</p>
        </div>

        <!-- Hover effect overlay -->
        <div
          class="absolute inset-0 bg-{{ item.color }}-500 opacity-0 hover:opacity-10 transition-opacity duration-300"
        ></div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
