<section class="bg-[#f6fafb]" data-component-type="Hero" data-component-slug="real-estate-template-hero">
  <div class="max-w-[90%] mx-auto pt-[100px]">

    <!-- HERO IMAGE CARD -->
    <div class="relative overflow-hidden min-h-[320px] sm:min-h-[420px] lg:min-h-[520px]">

      <!-- IMAGE -->
      <img src="{{hero_image}}" data-node="hero_image" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359396/seltrix/templates/real-estate-template/service1.png" alt="Hero Image" class="w-full min-h-[420px] sm:min-h-[420px] lg:min-h-[520px] object-cover rounded-2xl">

      <!-- OVERLAY -->
      <div class="absolute inset-0 bg-black/25 rounded-2xl"></div>

      <!-- CONTENT -->
      <div class="absolute inset-0 z-10 flex flex-col lg:flex-row lg:justify-between
               px-6 sm:px-10 lg:px-16 pt-10 w-full mt-[40px]">

        <!-- LEFT HEADING -->
        <h1 class="text-white text-3xl sm:text-4xl lg:text-[30px] xl:text-6xl
                 font-semibold leading-tight max-w-full xl:w-[50%] lg:w-[80%]" data-node="hero_heading" data-node-type="textarea" data-node-label="Hero Heading" data-node-default="Creating Spaces That Elevate Everyday Living">
          {{hero_heading}}
        </h1>

        <!-- RIGHT DESCRIPTION -->
        <p class="text-white/90 text-sm sm:text-base leading-relaxed
                 max-w-md mt-6 lg:mt-0" data-node="hero_description" data-node-type="textarea" data-node-label="Hero Description" data-node-default="Experience thoughtfully built homes designed for comfort, connection, and long-lasting lifestyle value. From design to delivery, every detail reflects trust, quality, and modern living.">
          {{hero_description}}
        </p>

      </div>

    </div>
  </div>
</section>