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

  <!-- BACKGROUND SLIDES -->
  <div class="absolute inset-0">
    <img src="{{dest_bg_1}}" data-node="dest_bg_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768047785/seltrix/templates/history-template/destinations-1.webp" class="dest-slide active w-full h-full">
    <img src="{{dest_bg_2}}" data-node="dest_bg_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699885/seltrix/templates/history-template/destinations-2.webp" class="dest-slide w-full h-full">
    <img src="{{dest_bg_3}}" data-node="dest_bg_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699886/seltrix/templates/history-template/destinations-3.webp" class="dest-slide w-full h-full">
    <img src="{{dest_bg_4}}" data-node="dest_bg_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767699887/seltrix/templates/history-template/destinations-4.webp" class="dest-slide w-full h-full">
  </div>

  <!-- CONTENT -->
  <div class="relative z-10 h-full flex items-end px-[16px] sm:px-[24px] lg:px-[96px] pb-[80px]">
    <div class="max-w-[1728px] mx-auto w-full">
      <div class="dest-hero-content text-white select-none">
        <h1 id="destHeroTitle" class="font-['Orbitron'] text-[64px] leading-[100%] mb-4" data-node="dest_title_1" data-node-type="text" data-node-default="TIMELESS EGYPT">
          {{dest_title_1}}
        </h1>

        <p id="destHeroDesc" class="font-['Albert_Sans'] text-[24px] leading-[100%] mb-6" data-node="dest_desc_1" data-node-type="text" data-node-default="Walk through landscapes shaped by history, culture, and millennia of human imagination.">
          {{dest_desc_1}}
        </p>

        <a href="{{dest_cta}}" class="inline-flex items-center justify-center bg-white text-black font-['Albert_Sans'] font-semibold text-[20px] px-6 py-4 rounded-[12px] w-[260px] h-[56px] mb-6" data-node="dest_cta" data-node-type="url" data-node-default="#">
          <span id="destHeroCta" data-node="dest_cta_text_1" data-node-type="text" data-node-default="Explore the Journey">
            {{dest_cta_text_1}}
          </span>
        </a>

        <!-- PROGRESS BAR -->
        <div class="flex items-center gap-4">
          <span id="destSlideIndex" class="text-[20px]">01</span>
          <div class="dest-progress-track">
            <div id="destProgressFill" class="dest-progress-fill"></div>
          </div>
          <span class="opacity-50">04</span>
        </div>

        <!-- HIDDEN CONTENT -->
        <div style="position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden">
          <span id="dest_title_2" data-node="dest_title_2" data-node-type="text" data-node-default="THE GREAT PYRAMIDS">{{dest_title_2}}</span>
          <span id="dest_desc_2" data-node="dest_desc_2" data-node-type="text" data-node-default="Stand before architectural marvels that have defied time.">{{dest_desc_2}}</span>
          <span id="dest_cta_text_2" data-node="dest_cta_text_2" data-node-type="text" data-node-default="View Pyramids">{{dest_cta_text_2}}</span>

          <span id="dest_title_3" data-node="dest_title_3" data-node-type="text" data-node-default="TEMPLES OF THE NILE">{{dest_title_3}}</span>
          <span id="dest_desc_3" data-node="dest_desc_3" data-node-type="text" data-node-default="Discover sacred temples carved with stories of gods.">{{dest_desc_3}}</span>
          <span id="dest_cta_text_3" data-node="dest_cta_text_3" data-node-type="text" data-node-default="Explore Temples">{{dest_cta_text_3}}</span>

          <span id="dest_title_4" data-node="dest_title_4" data-node-type="text" data-node-default="MODERN EGYPT">{{dest_title_4}}</span>
          <span id="dest_desc_4" data-node="dest_desc_4" data-node-type="text" data-node-default="A nation where history meets modern life.">{{dest_desc_4}}</span>
          <span id="dest_cta_text_4" data-node="dest_cta_text_4" data-node-type="text" data-node-default="Discover Today">{{dest_cta_text_4}}</span>
        </div>
      </div>
    </div>
  </div>

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