<section data-component-type="Hero" class="hero relative w-full h-screen overflow-hidden bg-black" data-component-slug="history-template-hero">
  

  <!-- BACKGROUND SLIDES -->
  <div class="absolute inset-0">
    <img src="{{hero_bg_1}}" data-node="hero_bg_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699938/seltrix/templates/history-template/slide-hero-1.webp" class="slide active w-full h-full object-cover">
    <img src="{{hero_bg_2}}" data-node="hero_bg_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699939/seltrix/templates/history-template/slide-hero-2.webp" class="slide w-full h-full object-cover">
    <img src="{{hero_bg_3}}" data-node="hero_bg_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699941/seltrix/templates/history-template/slide-hero-3.webp" class="slide w-full h-full object-cover">
    <img src="{{hero_bg_4}}" data-node="hero_bg_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699942/seltrix/templates/history-template/slide-hero-4.webp" class="slide w-full h-full object-cover">
  </div>

  <!-- BOTTOM STACK (SINGLE FLEX CONTROLLER) -->
  <div class="relative z-10 h-full flex items-end px-[16px] sm:px-[24px] lg:px-[96px] pb-[120px]">
    <div class="max-w-[1728px] mx-auto w-full">
      <div class="flex flex-col gap-8">
        <!-- HERO CONTENT -->
        <div class="hero-left text-white max-w-[730px]">
          <h1 id="heroTitle" class="text-[64px] leading-[100%] mb-6" data-node="hero_title_1" data-node-type="text" data-node-default="THE RISE OF EGYPT">
            {{hero_title_1}}
          </h1>

          <p id="heroDesc" class="text-[24px] leading-[100%] mb-8" data-node="hero_desc_1" data-node-type="text" data-node-default="Journey into a land where ancient wonders meet modern discovery. From timeless pyramids to stories carved in stone.">
            {{hero_desc_1}}
          </p>

          <a href="{{hero_cta}}" class="inline-flex items-center justify-center bg-white text-black font-['Albert_Sans'] font-semibold text-[20px] px-6 py-4 w-[283px] h-[56px]" data-node="hero_cta" data-node-type="url" data-node-default="#">
            <span id="heroCtaText" data-node="hero_cta_text_1" data-node-type="text" data-node-default="Explore Egypt’s Wonders">
              {{hero_cta_text_1}}
            </span>
          </a>

          <!-- HIDDEN CONTENT FOR OTHER SLIDES -->
          <div class="hidden">
            <span id="hero_title_2" data-node="hero_title_2" data-node-type="text" data-node-default="SECRETS OF THE NILE">{{hero_title_2}}</span>
            <span id="hero_desc_2" data-node="hero_desc_2" data-node-type="text" data-node-default="Explore the lifeline of ancient Egypt — the Nile that shaped civilization.">{{hero_desc_2}}</span>
            <span id="hero_cta_text_2" data-node="hero_cta_text_2" data-node-type="text" data-node-default="Discover the Nile">{{hero_cta_text_2}}</span>

            <span id="hero_title_3" data-node="hero_title_3" data-node-type="text" data-node-default="TEMPLES & PHARAOHS">{{hero_title_3}}</span>
            <span id="hero_desc_3" data-node="hero_desc_3" data-node-type="text" data-node-default="Walk through colossal temples and uncover stories of mighty rulers.">{{hero_desc_3}}</span>
            <span id="hero_cta_text_3" data-node="hero_cta_text_3" data-node-type="text" data-node-default="View Ancient Temples">{{hero_cta_text_3}}</span>

            <span id="hero_title_4" data-node="hero_title_4" data-node-type="text" data-node-default="MODERN EGYPT">{{hero_title_4}}</span>
            <span id="hero_desc_4" data-node="hero_desc_4" data-node-type="text" data-node-default="Experience a nation where history meets vibrant modern culture.">{{hero_desc_4}}</span>
            <span id="hero_cta_text_4" data-node="hero_cta_text_4" data-node-type="text" data-node-default="Explore Modern Egypt">{{hero_cta_text_4}}</span>
          </div>

          <!-- PROGRESS -->
          <div class="flex items-center gap-4 mt-10">
            <span id="slideIndex" class="text-[24px]">01</span>
            <div class="progress-track">
              <div id="progressFill" class="progress-fill"></div>
            </div>
            <span class="opacity-50">02</span>
            <span class="opacity-50">03</span>
            <span class="opacity-50">04</span>
          </div>
        </div>

        <!-- MINI SLIDER -->
        <div class="mini-slider">
          <div id="miniTrack" class="mini-track">
            <img src="{{thumb_2}}" data-node="thumb_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699927/seltrix/templates/history-template/Rectangle%20%281%29.webp" class="mini-thumb">
            <img src="{{thumb_3}}" data-node="thumb_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699929/seltrix/templates/history-template/Rectangle%20%282%29.webp" class="mini-thumb">
            <img src="{{thumb_4}}" data-node="thumb_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699930/seltrix/templates/history-template/Rectangle.webp" class="mini-thumb">
            <img src="{{thumb_1}}" data-node="thumb_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699930/seltrix/templates/history-template/Rectangle.webp" class="mini-thumb">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- SCRIPT -->
  
</section>