<!-- 
  Business Grow Section Component
  Integration icons with heading
-->
<section data-component-type="Content" class="w-full bg-white py-20">
  <div class="max-w-[90%] mx-auto bg-[#F2F0FF] py-20 px-[10] relative overflow-hidden">
    <!-- Soft Right Gradient Curve -->
    <div class="absolute top-0 left-0 hidden xl:block z-[1]">
      <img src="../assets/businesstogrowimages/right.png" />
    </div>

    <div class="absolute top-0 right-0 hidden xl:block z-[1]">
      <img src="../assets/businesstogrowimages/left.png" />
    </div>

    <!-- ========== ICONS GROUP ========== -->
    <div class="max-w-[1200px] mx-auto flex flex-col items-center gap-10 z-[1]">
      <!-- Row 1 -->
      {{#if show_row1}}
      <div class="flex gap-6 md:gap-10 flex-wrap justify-center z-[2]">
        <img
          data-node="icon_row1_1"
          data-node-type="file"
          data-node-label="Icon Row 1 - 1"
          data-node-default="../assets/businesstogrowimages/icon11.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_1}}"
        />

        <img
          data-node="icon_row1_2"
          data-node-type="file"
          data-node-label="Icon Row 1 - 2"
          data-node-default="../assets/businesstogrowimages/icon2.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_2}}"
        />

        <img
          data-node="icon_row1_3"
          data-node-type="file"
          data-node-label="Icon Row 1 - 3"
          data-node-default="../assets/businesstogrowimages/icon3.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_3}}"
        />

        <img
          data-node="icon_row1_4"
          data-node-type="file"
          data-node-label="Icon Row 1 - 4"
          data-node-default="../assets/businesstogrowimages/icon4.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_4}}"
        />

        <img
          data-node="icon_row1_5"
          data-node-type="file"
          data-node-label="Icon Row 1 - 5"
          data-node-default="../assets/businesstogrowimages/icon5.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_5}}"
        />

        <img
          data-node="icon_row1_6"
          data-node-type="file"
          data-node-label="Icon Row 1 - 6"
          data-node-default="../assets/businesstogrowimages/icon6.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_6}}"
        />

        <img
          data-node="icon_row1_7"
          data-node-type="file"
          data-node-label="Icon Row 1 - 7"
          data-node-default="../assets/businesstogrowimages/icon7.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row1_7}}"
        />
      </div>
      {{/if}}

      <!-- Row 2 -->
      {{#if show_row2}}
      <div class="flex gap-6 md:gap-10 flex-wrap justify-center z-[2]">
        <img
          data-node="icon_row2_1"
          data-node-type="file"
          data-node-label="Icon Row 2 - 1"
          data-node-default="../assets/businesstogrowimages/icon6.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_1}}"
        />
        <img
          data-node="icon_row2_2"
          data-node-type="file"
          data-node-label="Icon Row 2 - 2"
          data-node-default="../assets/businesstogrowimages/icon2.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_2}}"
        />
        <img
          data-node="icon_row2_3"
          data-node-type="file"
          data-node-label="Icon Row 2 - 3"
          data-node-default="../assets/businesstogrowimages/icon11.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_3}}"
        />

        <img
          data-node="icon_row2_4"
          data-node-type="file"
          data-node-label="Icon Row 2 - 4"
          data-node-default="../assets/businesstogrowimages/icon2.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_4}}"
        />

        <img
          data-node="icon_row2_5"
          data-node-type="file"
          data-node-label="Icon Row 2 - 5"
          data-node-default="../assets/businesstogrowimages/icon3.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_5}}"
        />

        <img
          data-node="icon_row2_6"
          data-node-type="file"
          data-node-label="Icon Row 2 - 6"
          data-node-default="../assets/businesstogrowimages/icon4.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_6}}"
        />

        <img
          data-node="icon_row2_7"
          data-node-type="file"
          data-node-label="Icon Row 2 - 7"
          data-node-default="../assets/businesstogrowimages/icon5.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_7}}"
        />

        <img
          data-node="icon_row2_8"
          data-node-type="file"
          data-node-label="Icon Row 2 - 8"
          data-node-default="../assets/businesstogrowimages/icon6.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_8}}"
        />

        <img
          data-node="icon_row2_9"
          data-node-type="file"
          data-node-label="Icon Row 2 - 9"
          data-node-default="../assets/businesstogrowimages/icon7.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row2_9}}"
        />
      </div>
      {{/if}}

      <!-- Row 3 -->
      {{#if show_row3}}
      <div class="flex gap-6 md:gap-10 flex-wrap justify-center z-[2]">
        <img
          data-node="icon_row3_1"
          data-node-type="file"
          data-node-label="Icon Row 3 - 1"
          data-node-default="../assets/businesstogrowimages/icon11.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_1}}"
        />

        <img
          data-node="icon_row3_2"
          data-node-type="file"
          data-node-label="Icon Row 3 - 2"
          data-node-default="../assets/businesstogrowimages/icon2.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_2}}"
        />

        <img
          data-node="icon_row3_3"
          data-node-type="file"
          data-node-label="Icon Row 3 - 3"
          data-node-default="../assets/businesstogrowimages/icon3.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_3}}"
        />

        <img
          data-node="icon_row3_4"
          data-node-type="file"
          data-node-label="Icon Row 3 - 4"
          data-node-default="../assets/businesstogrowimages/icon4.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_4}}"
        />

        <img
          data-node="icon_row3_5"
          data-node-type="file"
          data-node-label="Icon Row 3 - 5"
          data-node-default="../assets/businesstogrowimages/icon5.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_5}}"
        />

        <img
          data-node="icon_row3_6"
          data-node-type="file"
          data-node-label="Icon Row 3 - 6"
          data-node-default="../assets/businesstogrowimages/icon6.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_6}}"
        />

        <img
          data-node="icon_row3_7"
          data-node-type="file"
          data-node-label="Icon Row 3 - 7"
          data-node-default="../assets/businesstogrowimages/icon7.png"
          class="w-14 h-14 xl:w-20 xl:h-20 rounded-full bg-white p-2 shadow-md"
          src="{{icon_row3_7}}"
        />
      </div>
      {{/if}}

      <!-- ========== Heading & Text ========== -->
      <div class="text-center max-w-[650px] mt-10 px-5">
        <h2
          data-node="businessGrow_title"
          data-node-type="text"
          data-node-label="Section Title"
          data-node-default="The Features that would help your business to grow"
          class="text-[30px] md:text-[36px] font-bold text-[#0A0A0A] leading-snug"
        >
          {{businessGrow_title}}
        </h2>

        <p
          data-node="businessGrow_subtitle"
          data-node-type="textarea"
          data-node-label="Section Subtitle"
          data-node-default="Seamless integrations keep all your tools connected, helping your business operate faster and smarter."
          class="text-[#4A6673] mt-3 text-[16px] md:text-[18px] leading-relaxed"
        >
          {{businessGrow_subtitle}}
        </p>
      </div>
    </div>
  </div>
</section>
