<section class="bg-[#0B0F12] text-white relative my-[20px]" data-component-type="Content" data-component-slug="real-estate-template-modern_living">
  <div class="max-w-[90%] mx-auto">

    <!-- TOP SECTION -->
    <div class="relative grid lg:grid-cols-3 gap-12 items-center mb-32 pt-[120px] lg:pt-[80px]">

      <!-- Left Image -->
      <div>
        <img src="{{modern_main_image}}" data-node="modern_main_image" data-node-type="file" data-node-label="Modern Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358813/seltrix/templates/real-estate-template/halfimg.png" class="rounded-2xl w-[220px] sm:w-[300px] xl:w-[500px] object-cover" alt="Modern Home">
      </div>

      <!-- Heading -->
      <div>
        <h2 class="text-3xl lg:text-4xl font-semibold mb-4" data-node="modern_heading" data-node-type="text" data-node-label="Modern heading" data-node-default="Homes Designed for How You Live">
          {{modern_heading}}
        </h2>
        <p class="text-gray-400 max-w-md" data-node="modern_description" data-node-type="text" data-node-label="Modern Description" data-node-default="Premium living crafted with trust and transparency.">
          {{modern_description}}
        </p>
      </div>

      <!-- Stats -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
        <div>
          <h3 class="text-3xl font-bold" data-node="stat_projects" data-node-type="text" data-node-label="stat projects" data-node-default="170+">
          >{{stat_projects}}</h3>
          <p class="text-gray-400 text-sm" data-node="stat_projects_desc" data-node-type="text" data-node-label="stat projects Description" data-node-default="Projects Delivered">{{stat_projects_desc}}</p>
        </div>
        <div>
          <h3 class="text-3xl font-bold" data-node="stat_families" data-node-type="text" data-node-label="stat families " data-node-default="1000+">{{stat_families}}</h3>
          <p class="text-gray-400 text-sm" data-node="stat_families_desc" data-node-type="text" data-node-label="stat families Description" data-node-default="Happy Families">{{stat_families_desc}}</p>
        </div>
        <div>
          <h3 class="text-3xl font-bold" data-node="stat_members" data-node-type="text" data-node-label="stat members " data-node-default="12K+">{{stat_members}}</h3>
          <p class="text-gray-400 text-sm" data-node="stat_members_desc" data-node-type="text" data-node-label="stat members Description " data-node-default="Community Members">{{stat_members_desc}}</p>
        </div>
      </div>
    </div>

    <!-- MODERN LIVING -->
    <div class="mb-12">
      <div class="flex gap-4 items-center mb-4">
        <h3 class="text-2xl font-semibold" data-node="modern_tabs_heading" data-node-type="text" data-node-label="modern tabs heading" data-node-default="Modern Living">{{modern_tabs_heading}}</h3>
        <div class="flex-1 border-b border-white/10"></div>
      </div>

      <!-- Tabs -->
      <div class="relative">
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 py-6 text-sm">
          <span class="tab-heading active" data-index="0" data-node="tab_1" data-node-type="text" data-node-label="modern tabs1" data-node-default="Experience">{{tab_1}}</span>
          <span class="tab-heading" data-node="tab_2" data-node-type="text" data-node-label="modern tabs2" data-node-default="Reputation" data-index="1">{{tab_2}}</span>
          <span class="tab-heading" data-index="2" data-node="tab_3" data-node-type="text" data-node-label="modern tabs3" data-node-default="Communication">{{tab_3}}</span>
          <span class="tab-heading" data-index="3" data-node="tab_4" data-node-type="text" data-node-label="modern tabs4" data-node-default="Technology">{{tab_4}}</span>
        </div>

        <!-- Half Line -->
        <div class="absolute bottom-0 left-0 w-full h-[1px] bg-[#434649]"></div>
        <div class="absolute bottom-0 left-0 h-[1px] bg-white transition-all duration-300 half-line" style="width:25%"></div>
      </div>
    </div>

    <!-- TAB CONTENT -->
    <div class="tab-content grid lg:grid-cols-2 gap-12 items-center pb-20" data-index="0">
      <img data-node="modern_bottom_image1" data-node-type="file" data-node-label="modern bottom image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358817/seltrix/templates/real-estate-template/ing.png" src="{{modern_bottom_image1}}" class="rounded-2xl w-full lg:h-[500px] md:h-[350px] h-[200px]">
      <div>
        <h2 class="text-3xl lg:text-4xl font-semibold mb-6" data-node="bottom_heading1" data-node-type="text" data-node-label="bottom heading 1" data-node-default="Crafting Living Experiences Beyond the Ordinary.">
          {{bottom_heading1}}
        </h2>
        <p class="text-gray-400 mb-8 max-w-lg" data-node="bottom_description1" data-node-type="text" data-node-label="bottom description1" data-node-default="Find thoughtfully designed homes that balance comfort, lifestyle, and long-term value, crafted for families, investors, and first-time buyers. Partner with a real-estate team known for turning desirable properties into exceptional homes. ">
          {{bottom_description1}}
          
        </p>
        <a class="inline-block px-8 py-3 rounded-full border border-white/30 hover:bg-white hover:text-black transition" data-node="bottom_cta_text1" data-node-type="text" data-node-label="bottom cta text1 1" data-node-default="Explore Properties">
          {{bottom_cta_text1}}
        </a>
      </div>
    </div>
     <div class="tab-content grid lg:grid-cols-2 gap-12 items-center pb-20 hidden" data-index="1">
      <img data-node="modern_bottom_image2" data-node-type="file" data-node-label="modern bottom image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358815/seltrix/templates/real-estate-template/heroimg1.png" src="{{modern_bottom_image2}}" class="rounded-2xl w-full lg:h-[500px] md:h-[350px] h-[200px]">
      <div>
        <h2 class="text-3xl lg:text-4xl font-semibold mb-6" data-node="bottom_heading2" data-node-type="text" data-node-label="bottom heading 2" data-node-default="Reputation Crafting Living Experiences Beyond the Ordinary.">
          {{bottom_heading2}}
        </h2>
        <p class="text-gray-400 mb-8 max-w-lg" data-node="bottom_description2" data-node-type="text" data-node-label="bottom description2" data-node-default="Find thoughtfully designed homes that balance comfort, lifestyle, and long-term value, crafted for families, investors, and first-time buyers. Partner with a real-estate team known for turning desirable properties into exceptional homes. ">
          {{bottom_description2}}
          
        </p>
        <a class="inline-block px-8 py-3 rounded-full border border-white/30 hover:bg-white hover:text-black transition" data-node="bottom_cta_text2" data-node-type="text" data-node-label="bottom cta text1 2" data-node-default="Explore Properties">
          {{bottom_cta_text2}}
        </a>
      </div>
    </div>

     <div class="tab-content grid lg:grid-cols-2 gap-12 items-center pb-20 hidden" data-index="2">
      <img data-node="modern_bottom_image3" data-node-type="file" data-node-label="modern bottom image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358817/seltrix/templates/real-estate-template/ing.png" src="{{modern_bottom_image3}}" class="rounded-2xl w-full lg:h-[500px] md:h-[350px] h-[200px]">
      <div>
        <h2 class="text-3xl lg:text-4xl font-semibold mb-6" data-node="bottom_heading3" data-node-type="text" data-node-label="bottom heading 3" data-node-default="Communication Crafting Living Experiences Beyond the Ordinary.">
          {{bottom_heading3}}
        </h2>
        <p class="text-gray-400 mb-8 max-w-lg" data-node="bottom_description3" data-node-type="text" data-node-label="bottom description3" data-node-default="Find thoughtfully designed homes that balance comfort, lifestyle, and long-term value, crafted for families, investors, and first-time buyers. Partner with a real-estate team known for turning desirable properties into exceptional homes. ">
          {{bottom_description3}}
          
        </p>
        <a class="inline-block px-8 py-3 rounded-full border border-white/30 hover:bg-white hover:text-black transition" data-node="bottom_cta_text3" data-node-type="text" data-node-label="bottom cta text1 3" data-node-default="Explore Properties">
          {{bottom_cta_text3}}
        </a>
      </div>
    </div>

     <div class="tab-content grid lg:grid-cols-2 gap-12 items-center pb-20 hidden" data-index="3">
      <img data-node="modern_bottom_image4" data-node-type="text" data-node-label="modern bottom image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358815/seltrix/templates/real-estate-template/heroimg1.png" src="{{modern_bottom_image4}}" class="rounded-2xl w-full lg:h-[500px] md:h-[350px] h-[200px]">
      <div>
        <h2 class="text-3xl lg:text-4xl font-semibold mb-6" data-node="bottom_heading4" data-node-type="text" data-node-label="bottom heading 4" data-node-default="Technology Crafting Living Experiences Beyond the Ordinary.">
          {{bottom_heading4}}
        </h2>
        <p class="text-gray-400 mb-8 max-w-lg" data-node="bottom_description4" data-node-type="text" data-node-label="bottom description4" data-node-default="Find thoughtfully designed homes that balance comfort, lifestyle, and long-term value, crafted for families, investors, and first-time buyers. Partner with a real-estate team known for turning desirable properties into exceptional homes. ">
          {{bottom_description4}}
          
        </p>
        <a class="inline-block px-8 py-3 rounded-full border border-white/30 hover:bg-white hover:text-black transition" data-node="bottom_cta_text4" data-node-type="text" data-node-label="bottom cta text1 4" data-node-default="Explore Properties">
          {{bottom_cta_text4}}
        </a>
      </div>
    </div>

   

  </div>
</section>