<section data-component-type="Content" data-component-slug="home-appliances-template-business_counter">

   <div class="py-12 md:py-20 max-w-[90%] mx-auto  ">

 
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">

        <!-- Counter Item 1 -->
        <div class="flex flex-col">
            <h3 class="text-5xl font-bold text-[#3637A5] mb-4 text-center">

                <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="380" class="font-bold">0</span>
                <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>


            </h3>
            <p class="text-[#3F404E] text-center text-base leading-relaxed" data-node="bus_counter_1_desc" data-node-type="textarea" data-node-default="Products">
                {{bus_counter_1_desc}}
            </p>
        </div>

        <!-- Counter Item 2 -->
        <div class="flex flex-col">
            <h3 class="text-5xl font-bold text-[#3637A5] mb-4 text-center">
                <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="22" class="font-bold">0</span>
                <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default data-suffix="2" class="font-bold">{{counter_2_suffix}}</span>
            </h3>
            <p class="text-[#3F404E] text-center text-base leading-relaxed" data-node="bus_counter_2_desc" data-node-type="textarea" data-node-default="Countries">
                {{bus_counter_2_desc}}
            </p>
        </div>

        <!-- Counter Item 3 -->
        <div class="flex flex-col">
            <h3 class="text-5xl font-bold text-[#3637A5] mb-4 text-center">
                <span data-counter="3" data-node="counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="44" class="font-bold">0</span>

                <span data-node="counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default data-suffix="3" class="font-bold">{{counter_3_suffix}}</span>
            </h3>
            <p class="text-[#3F404E] text-center text-base leading-relaxed" data-node="bus_counter_3_desc" data-node-type="textarea" data-node-default="Engineers">
                {{bus_counter_3_desc}}
            </p>
        </div>

        <!-- Counter Item 4 -->
        <div class="flex flex-col">
            <h3 class="text-5xl font-bold text-[#3637A5] mb-4 text-center">
                
                <span data-counter="4" data-node="counter_4_value" data-node-type="number" data-node-label="Counter 4 Value" data-node-default="12" class="font-bold">0</span>
                <span data-node="counter_4_suffix" data-node-type="text" data-node-label="Counter 4 Suffix" data-node-default="+" data-suffix="4" class="font-bold">{{counter_4_suffix}}</span>
            </h3>
            <p class="text-[#3F404E] text-center text-base leading-relaxed" data-node="bus_counter_4_desc" data-node-type="textarea" data-node-default="Patents">
                {{bus_counter_4_desc}}
            </p>
        </div>

    </div>

      </div>
</section>