<section class="bg-[#F6FBFF]" data-component-type="Content" data-component-slug="real-estate-template-why_us">
    <div class="max-w-[90%] mx-auto lgpy-[30px]">

        <h2 class="text-3xl sm:text-4xl lg:text-[150px] font-semibold text-black text-center lg:py-[60px] py-[30px]" data-node="why_us_headingmain" data-node-type="text" data-node-label="why_us Heading" data-node-default="WHY US">
            {{why_us_headingmain}}
        </h2>

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

            <!-- IMAGE -->
            <img src="{{why_us_image}}" data-node="why_us_image" data-node-type="file" data-node-label="why_us Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359405/seltrix/templates/real-estate-template/why.png" alt="why_us 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
    left-1/2 top-1/2
    -translate-x-1/2 -translate-y-1/2

    lg:top-auto
    lg:bottom-[20px]
    lg:translate-y-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]">
                <p class="text-white/90 text-sm sm:text-base leading-relaxed text-center lg:text-start
                 lg:max-w-[20%] mt-6 lg:mt-0" data-node="why_us_description" data-node-type="textarea" data-node-label="why_us Description" data-node-default="Built with premium materials and uncompromised standards.">
                    {{why_us_description}}
                </p>

                <p class="text-white/90 text-sm sm:text-base leading-relaxed text-center lg:text-start
                 lg:max-w-[20%] mt-6 lg:mt-0" data-node="why_us_description" data-node-type="textarea" data-node-label="why_us Description" data-node-default="A smooth, transparent journey from inquiry to handover.">
                    {{why_us_description}}
                </p>

                <p class="text-white/90 text-sm sm:text-base leading-relaxed text-center lg:text-start
                 lg:max-w-[20%] mt-6 lg:mt-0" data-node="why_us_description" data-node-type="textarea" data-node-label="why_us Description" data-node-default="Experienced professionals guiding you at every step.">
                    {{why_us_description}}
                </p>

            </div>

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