<section
  class="w-full bg-black px-4 md:px-12 lg:px-24 xl:px-72 pt-5 md:pt-28 pb-0 md:pb-28 lg:pb-36 text-center"
  data-component-type="Content"
>
  <!-- LABEL -->
  <div
    class="inline-block py-3 px-6 md:py-3.5 md:px-8 font-['Cabin'] text-[26px] md:text-[32px] text-white rounded-[13px] bg-white/[0.07] backdrop-blur-[13px]"
    data-node="services_label"
    data-node-type="text"
    data-node-default="Services"
  >
    {{services_label}}
  </div>

  <!-- HEADING -->
  <h2
    class="font-['Cabin'] text-[35px] md:text-[56px] font-medium leading-[100%] md:leading-[110%] text-white mt-8 md:mt-10 mb-12 md:mb-20"
    data-node="services_heading"
    data-node-type="text"
    data-node-default="End-to-end Execution, grounded in strategy."
  >
    {{services_heading}}
  </h2>

  <!-- SERVICES GRID -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-7 justify-items-center">
    <!-- SERVICE 1 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service1_icon"
          data-node-default="./assets/Brand Strategy.svg"
          data-node-type="file"
          data-node-label="Service 1 Icon"
          src="{{service1_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service1_title"
          data-node-type="text"
          data-node-default="Brand Strategy"
        >
          {{service1_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service1_desc"
          data-node-type="text"
          data-node-default="Positioning, messaging frameworks, and audience clarity."
        >
          {{service1_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 2 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service2_icon"
          data-node-default="./assets/Web Copywriting.svg"
          data-node-type="file"
          data-node-label="Service 2 Icon"
          src="{{service2_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service2_title"
          data-node-type="text"
          data-node-default="Web Copywriting"
        >
          {{service2_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service2_desc"
          data-node-type="text"
          data-node-default="Conversion-focused copy that shortens decision time."
        >
          {{service2_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 3 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service3_icon"
          data-node-default="./assets/Content Marketing.svg"
          data-node-type="file"
          data-node-label="Service 3 Icon"
          src="{{service3_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service3_title"
          data-node-type="text"
          data-node-default="Content Marketing"
        >
          {{service3_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service3_desc"
          data-node-type="text"
          data-node-default="Search-led content built to compound traffic and trust."
        >
          {{service3_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 4 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service4_icon"
          data-node-default="./assets/Performance Marketing.svg"
          data-node-type="file"
          data-node-label="Service 4 Icon"
          src="{{service4_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service4_title"
          data-node-type="text"
          data-node-default="Performance Marketing"
        >
          {{service4_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service4_desc"
          data-node-type="text"
          data-node-default="Paid campaigns optimized for ROI, not vanity metrics."
        >
          {{service4_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 5 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service5_icon"
          data-node-default="./assets/Social Media Strategy.svg"
          data-node-type="file"
          data-node-label="Service 5 Icon"
          src="{{service5_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service5_title"
          data-node-type="text"
          data-node-default="Social Media Strategy"
        >
          {{service5_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service5_desc"
          data-node-type="text"
          data-node-default="Content systems designed for reach, relevance, and recall."
        >
          {{service5_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 6 -->
    <div
      class="w-full max-w-[420px] h-auto md:h-28 flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]"
    >
      <div
        class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0"
      >
        <img
          data-node="service6_icon"
          data-node-default="./assets/Analytics_Optimization.svg"
          data-node-type="file"
          data-node-label="Service 6 Icon"
          src="{{service6_icon}}"
          class="w-12"
        />
      </div>

      <div>
        <div
          class="font-['Cabin'] text-[22px] md:text-[24px] font-normal text-white text-left leading-[110%]"
          data-node="service6_title"
          data-node-type="text"
          data-node-default="Analytics & Optimization"
        >
          {{service6_title}}
        </div>

        <div
          class="font-['Cabin'] text-[14px] md:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]"
          data-node="service6_desc"
          data-node-type="text"
          data-node-default="Tracking what matters and improving what converts."
        >
          {{service6_desc}}
        </div>
      </div>
    </div>
  </div>
</section>
