<section class="bg-[#F6FBFF] " data-component-type="Hero" data-component-slug="real-estate-template-home_hero">
  <div class="max-w-[90%] mx-auto lg:px-12  grid grid-cols-1 lg:grid-cols-2 gap-[40px]  items-center lg:items-start">
    <!-- LEFT CONTENT -->
    <div class="pt-[30%]">
      <!-- Heading -->
      <h1 class="text-4xl sm:text-5xl lg:text-4xl font-bold text-[#111111] leading-tight" data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Discover Spaces Built for Life">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p class="text-[#6C6C6C] mt-6 max-w-[80%]" data-node="hero_description" data-node-type="text" data-node-label="Hero Description" data-node-default="Step into a world where luxury meets comfort. We guide you toward the villa that matches your lifestyle, aspirations, and future plans">
        {{hero_description}}
      </p>

      <!-- CTA -->
    <!-- CTA -->
<div class="mt-8 flex gap-[20px]">
  <a data-node="home_hero_link" data-node-type="page_links" data-node-label="Hero CTA Link" href="{{home_hero_link}}" data-node-default="#" class="flex items-center justify-center gap-3
           bg-[#010609] text-white
           w-[170px] h-[60px]
           rounded-full font-medium
           hover:bg-black-700 transition">
    <span data-node="hero_cta_text" data-node-type="text" data-node-label="Hero Button Text" data-node-default="Get Started">
      {{hero_cta_text}} 
    </span>
  </a>
    
<a data-node="home_hero_link2" data-node-type="page_links" data-node-label="Hero CTA Link2" href="{{home_hero_link2}}" data-node-default="#" class="inline-flex items-center gap-3
         text-white font-medium
         hover:opacity-80 transition">
  <img src="{{hero_main_image2}}" data-node="hero_main_image2" data-node-type="file" data-node-label="Hero Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358824/seltrix/templates/real-estate-template/play.png" alt="Hero Image" class="w-[60px] h-[60px] rounded-full object-cover">

  <span data-node="hero_cta_text2" data-node-type="text" data-node-label="Hero Button Text2" data-node-default="Working Process" class="text-[#010609]">
    {{hero_cta_text2}}
  </span>
</a>

</div>


     
   
    </div>

    <!-- RIGHT IMAGE -->
    <div class=" flex justify-center lg:justify-start pt-[10%]">
      <div class="rounded-[40px] lg:p-6 w-full">
        <img src="{{hero_main_image}}" data-node="hero_main_image" data-node-type="file" data-node-label="Hero Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358815/seltrix/templates/real-estate-template/heroimg1.png" alt="Hero Image" class="rounded-[30px] w-full object-cover">
      </div>
    </div>
  </div>
</section>