<section data-section data-component-type="Hero" class="relative w-full h-[700px] md:h-[800px] xl:h-[883px] overflow-hidden" data-component-slug="marathon-template-programs-hero">
  <!-- Background Image -->
  <div class="absolute inset-0">
    <img data-node="programs_hero_bg" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024196/seltrix/templates/marathon-template/programs-hero-bg.png" src="{{programs_hero_bg}}" alt="Programs Background" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-black/30"></div>
  </div>

  <!-- Content -->
  <div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-6">
    <h1 data-node="programs_hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Our Programs" class="text-4xl md:text-5xl lg:text-6xl text-white font-['Racing_Sans_One'] mb-4 italic">
      {{programs_hero_title}}
    </h1>

    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm md:text-base">
      <a data-node="programs_breadcrumb_home_link" data-node-type="page_links" data-node-label="Home Link" data-node-default="home" href="{{programs_breadcrumb_home_link}}" class="text-[#C7CBCF] hover:text-white transition-colors uppercase tracking-wider">
        <span data-node="programs_breadcrumb_home_text" data-node-type="text" data-node-label="Home Text" data-node-default="HOME">{{programs_breadcrumb_home_text}}</span>
      </a>
      <span class="w-5 h-1 bg-[#DCFC62]"></span>
      <span data-node="programs_breadcrumb_current" data-node-type="text" data-node-label="Current Page Text" data-node-default="OUR PROGRAMS" class="text-[#C7CBCF] uppercase tracking-wider font-medium">{{programs_breadcrumb_current}}</span>
    </nav>
  </div>
</section>