<div style="background:linear-gradient(90deg, black 20%, transparent 100%), url('{{imageurl}}'); background-repeat: no-repeat; background-size: cover;" class="w-full max-w-[1920px] mx-auto relative">
        <!-- Hero Section -->
        <section class="flex flex-col gap-4 px-5 pt-16 md:px-12.5 md:pt-42 xl:px-25">
        <div class="content max-w-4xl md:w-4/5 sm:w-full text-body-bg" >
            <h1 class="text-[clamp(2rem,4vw+1rem,3.5rem)] leading-11.5 md:leading-16 text-shadow-lg text-shadow-body font-black uppercase">
                {{title}}
              </h1>
              <div class=" pt-5 text-body-bg text-[clamp(14px,2vw,18px)">
                {{description}}
              </div>
              <div class=" mb-42  w-full md:w-fit pt-10 flex  flex-col md:flex-row gap-[clamp(20px,20px,30px)]">
               {{cta}}
               </div>
          </div>
        </section>
      </div>
