<section class="bg-white py-4 relative overflow-hidden pb-20" data-component-type="Content" data-component-slug="sports-template-happy-sponers">

  <!-- Background Big Text -->
  <h1 data-node="sp_bg_title" data-node-type="text" data-node-label="Sponsors Background Title" data-node-default="SPONSORS" class="text-gray-300 text-[120px] md:text-[200px] font-extrabold opacity-20 absolute top-[-40px] left-[50%] -translate-x-1/2 whitespace-nowrap select-none">
    {{sp_bg_title}}
  </h1>

  <div class="relative z-10 max-w-[90%] mx-auto px-4 text-center pt-20 md:pt-32 lg:translate-y-[-20px]">

    <!-- Main Title -->
    <h2 data-node="sp_title" data-node-type="text" data-node-label="Sponsors Main Heading" data-node-default="HAPPY SPONSORS" class="text-3xl md:text-5xl font-bold text-black">
      {{sp_title}}
    </h2>

    <!-- Subtitle -->
    <p data-node="sp_subtitle" data-node-type="text" data-node-label="Sponsors Subtitle" data-node-default="It is one of the most popular football clubs that offer training programs for the youth, as well as summer camps." class="text-gray-500 text-sm md:text-lg mt-10 leading-relaxed">
      {{sp_subtitle}}
    </p>

    <!-- Logos -->
    <div class="grid grid-cols-2 md:grid-cols-6 w-full gap-10 md:gap-16 mt-10">

      <!-- Sponsor 1 -->
      <img data-node="sp_logo1" data-node-type="file" data-node-label="Sponsor Logo 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338017/seltrix/templates/sports-template/happySponsers/Logo1.png" src="{{sp_logo1}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 1">

      <!-- Sponsor 2 -->
      <img data-node="sp_logo2" data-node-type="file" data-node-label="Sponsor Logo 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338019/seltrix/templates/sports-template/happySponsers/Logo2.png" src="{{sp_logo2}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 2">

      <!-- Sponsor 3 -->
      <img data-node="sp_logo3" data-node-type="file" data-node-label="Sponsor Logo 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338020/seltrix/templates/sports-template/happySponsers/Logo3.png" src="{{sp_logo3}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 3">

      <!-- Sponsor 4 -->
      <img data-node="sp_logo4" data-node-type="file" data-node-label="Sponsor Logo 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338021/seltrix/templates/sports-template/happySponsers/Logo4.png" src="{{sp_logo4}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 4">

      <!-- Sponsor 5 -->
      <img data-node="sp_logo5" data-node-type="file" data-node-label="Sponsor Logo 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338023/seltrix/templates/sports-template/happySponsers/Logo5.png" src="{{sp_logo5}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 5">

      <!-- Sponsor 6 -->
      <img data-node="sp_logo6" data-node-type="file" data-node-label="Sponsor Logo 6" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338024/seltrix/templates/sports-template/happySponsers/Logo6.png" src="{{sp_logo6}}" class="w-[100px] h-[60px] md:w-[130px] md:h-[80px] object-contain mx-auto" alt="Sponsor Logo 6">

    </div>
  </div>
</section>