<section class="bg-[#F6FBFF]" data-component-type="Content" data-component-slug="real-estate-template-our-vision">
<section class="px-6 py-16 max-w-[90%] mx-auto">
  <!-- Container -->
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
    <!-- Left Text -->
    <div class="lg:col-span-1 flex flex-col justify-center items-start text-start pt-[30px]">
      <h2 data-node="vision_heading" data-node-type="text" data-node-label="Vision Heading" data-node-default="Our Vision" class="text-2xl font-semibold text-[#151515] mb-3">
        {{vision_heading}}
      </h2>
      <p data-node="vision_desc" data-node-type="textarea" data-node-label="Vision Description" data-node-default="We aim to redefine modern living through responsible development, thoughtful design, and community-first values." class="text-[#4A6673] max-w-sm">
        {{vision_desc}}
      </p>
    </div>

    <!-- Cards -->
    <div class="lg:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Card 1 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E8EFF3] shadow mb-4">
          <img data-node="card_1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359394/seltrix/templates/real-estate-template/send-sqaure-2.png" src="{{card_1_icon}}" alt="icon" class="w-8 h-8">
        </div>
        <h3 data-node="card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Sustainable Growth" class="text-lg font-semibold mb-2 text-[#000000]">
          {{card_1_title}}
        </h3>
        <p data-node="card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="We build with the future in mind, eco-conscious materials, smart layouts, and responsible planning." class="text-[#4A6673] text-sm">
          {{card_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E8EFF3] shadow mb-4">
          <img data-node="card_2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359399/seltrix/templates/real-estate-template/user-octagon.png" src="{{card_2_icon}}" alt="icon" class="w-5 h-5">
        </div>
        <h3 data-node="card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="People-Centric Design" class="text-lg font-semibold mb-2 text-[#000000]">
          {{card_2_title}}
        </h3>
        <p data-node="card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Every home prioritizes comfort, natural flow, and quality spaces that improve everyday life." class="text-[#4A6673] text-sm">
          {{card_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-[#F8FAFB] rounded-xl p-6 shadow-sm hover:shadow-md transition">
        <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#E8EFF3] shadow mb-4">
          <img data-node="card_3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359355/seltrix/templates/real-estate-template/flash.png" src="{{card_3_icon}}" alt="icon" class="w-5 h-5">
        </div>
        <h3 data-node="card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Long-Term Value" class="text-lg font-semibold mb-2 text-[#000000]">
          {{card_3_title}}
        </h3>
        <p data-node="card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="From durability to location strategy, we ensure each property stands strong for generations." class="text-[#4A6673] text-sm">
          {{card_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>

</section>