Elite Certification Card

<div class="relative overflow-hidden lg:rounded-3xl hover:border-indigo-400/50 transition-all min-h-[280px] flex flex-col text-white bg-neutral-800/60 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] w-[320px] h-64">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600&display=swap');
  </style>
  <div class="lg:p-8 grow bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/10b82f02-0664-4276-be7d-8b63b0623907_800w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6">
    <div class="flex items-center gap-2 uppercase text-xs font-normal  text-white/50 tracking-widest mb-6 font-sans">
      Certification
    </div>
    <div class="space-y-4">
      <h3 class="text-3xl text-white tracking-tight font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Elite Player</h3>
      <p class="text-sm leading-relaxed text-white/50 font-sans">
        Professional recognition that opens doors to academies, clubs, and competitive opportunities worldwide.
      </p>
      <div class="grid grid-cols-2 gap-4 pt-4">
        <div class="text-center">
          <div class="text-2xl font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">94%</div>
          <div class="text-xs text-white/50 uppercase tracking-wide font-sans">Advance Rate</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">2500+</div>
          <div class="text-xs text-white/50 uppercase tracking-wide font-sans">Certified</div>
        </div>
      </div>
    </div>
  </div>
</div>