<section data-component-type="Content" class="section1 bg-cover bg-center h-[650px] md:h-[580px] lg:h-[930px] w-full" data-node="hero_bg" data-node-type="file" data-node-label="Hero Background file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338035/seltrix/templates/sports-template/HerosectionImages/heroimg.png" style="background-image: url('{{hero_bg}}')" data-component-slug="sports-template-hero">
  <div class="lg:max-w-[90%] max-w-full mx-auto px-5 pt-[200px] pb-[200px] md:pt-[200px] lg:pt-[300px] items-center gap-5">
    <div>
      <!-- Badge -->
       {{#if show_hero_badge}}
      <div class="bg-[#940F0F] w-[140px] p-2">
        <h1 data-node="hero_badge" data-node-type="text" data-node-label="Hero Badge Text" data-node-default="FOOTBALL GAME" class="text-white text-center text-[16px] py-2 rounded-md">{{hero_badge}}</h1>
      </div>
      {{/if}}

      <!-- Title Line 1 -->
        {{#if show_hero_title1}}
      <h1 data-node="hero_title1" data-node-type="text" data-node-label="Hero Title Line 1" data-node-default="Lorem ipsum" class="text-white text-[40px] lg:text-[70px] font-bold rounded-md">
        {{hero_title1}}
      </h1>
        {{/if}}

      <!-- Title Line 2 -->
      <h1 data-node="hero_title2" data-node-type="text" data-node-label="Hero Title Line 2" data-node-default="dolor sit ameT" class="text-white mt-0 pt-0 text-[40px] lg:text-[70px] font-bold rounded-md">
        {{hero_title2}}
      </h1>
     
        {{#if show_hero_btn}}
      <!-- Button -->
       <a data-node="hero_btn_link" data-node-type="page_links" data-node-label="hero btn link" data-node-default="#" href="{{hero_btn_link}}">
      <button class="mt-5 bg-[#111111] text-white font-semibold px-6 py-3 border border-transparent hover:bg-[#940F0F] hover:text-white hover:border-[#940F0F] transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2">
        <span data-node="hero_btn" data-node-type="text" data-node-label="Hero Button Text" data-node-default="LOREM IPSUM">
          {{hero_btn}}
        </span>
        <span class="text-xl">→</span>
      </button>
       </a>

       {{/if}}
    </div>
  </div>
</section>