<section class="w-full px-4 md:px-12 lg:px-24 py-0 md:py-32 lg:py-0 pb-16" data-component-type="Content">
  <!-- TAG -->
  <div class="w-full flex justify-center mb-8">
    <div
      class="inline-block py-2.5 px-5 md:px-6 rounded-xl font-['Cabin'] text-[24px] font-normal text-white bg-[rgba(10,10,10,0.65)] backdrop-blur-[18px] border border-white/[0.12]"
      data-node="services_top_tag"
      data-node-type="text"
      data-node-default="Our Services"
    >
      {{services_top_tag}}
    </div>
  </div>

  <!-- TITLE -->
  <h2
    class="font-['Cabin'] text-[28px] md:text-[56px] font-medium text-center leading-[100%] text-white"
    data-node="services_title"
    data-node-type="text"
    data-node-default="End-to-end marketing services grounded in strategy."
  >
    {{services_title}}
  </h2>

  <!-- DESCRIPTION -->
  <p
    class="max-w-[780px] mx-auto my-6 mb-10 text-center font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]"
    data-node="services_description"
    data-node-type="textarea"
    data-node-default="Our services are designed to move audiences from attention to action. Each service can stand alone or combine into a full growth engine."
  >
    {{services_description}}
  </p>

  <!-- CTA -->
  <a
    class="w-[300px] max-w-full h-12 mx-auto mb-20 bg-[#D3FF5B] rounded-xl font-['Cabin'] text-[20px] font-medium text-black flex items-center justify-center gap-2"
    data-node="services_cta_link"
    data-node-type="page_links"
    data-node-default="#"
    data-node-label="Services CTA Link"
    href="{{services_cta_link}}"
  >
    <span
      data-node="services_cta_text"
      data-node-type="text"
      data-node-default="Request a Strategy Call"
      data-node-label="Services CTA Text"
    >
      {{services_cta_text}}
    </span>
    <img src="./assets/Hero btn arrw.svg" width="36" />
  </a>

  <!-- ROW 1 -->
  <div class="w-full flex flex-col xl:flex-row justify-center gap-6 mb-6">
    <!-- CARD 1 -->
    <div
      class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden"
    >
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img
          src="{{service_1_icon}}"
          class="w-10 h-10 md:w-12 md:h-12"
          data-node="service_1_icon"
          data-node-type="file"
          data-node-default="./assets/Brand Strategy.svg"
        />
      </div>

      <div
        class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white"
        data-node="service_1_title"
        data-node-type="text"
        data-node-default="Brand Strategy"
      >
        {{service_1_title}}
      </div>

      <p
        class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto"
        data-node="service_1_desc"
        data-node-type="textarea"
        data-node-default="We define what your brand stands for, who it's speaking to, and why it should be chosen. This aligns messaging, visuals, and growth decisions across every channel."
      >
        {{service_1_desc}}
      </p>
    </div>

    <!-- CARD 2 -->
    <div
      class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden"
    >
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img
          src="{{service_2_icon}}"
          class="w-10 h-10 md:w-12 md:h-12"
          data-node="service_2_icon"
          data-node-type="file"
          data-node-default="./assets/Web Copywriting.svg"
        />
      </div>

      <div
        class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white"
        data-node="service_2_title"
        data-node-type="text"
        data-node-default="Web Copywriting"
      >
        {{service_2_title}}
      </div>

      <p
        class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto"
        data-node="service_2_desc"
        data-node-type="textarea"
        data-node-default="Clear, friction-free messaging built to guide users toward action and shorten buying decisions."
      >
        {{service_2_desc}}
      </p>
    </div>

    <!-- CARD 3 -->
    <div
      class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden"
    >
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img
          src="{{service_3_icon}}"
          class="w-10 h-10 md:w-12 md:h-12"
          data-node="service_3_icon"
          data-node-type="file"
          data-node-default="./assets/SEO.svg"
        />
      </div>

      <div
        class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white"
        data-node="service_3_title"
        data-node-type="text"
        data-node-default="SEO & Content Marketing"
      >
        {{service_3_title}}
      </div>

      <p
        class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto"
        data-node="service_3_desc"
        data-node-type="textarea"
        data-node-default="Search-driven strategy focused on intent, authority building, and sustainable organic traffic."
      >
        {{service_3_desc}}
      </p>
    </div>
  </div>

  <!-- ROW 2 -->
  <div class="w-full flex flex-col xl:flex-row justify-center gap-6">
    <!-- CARD 4 -->
    <div
      class="w-full xl:w-[854px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden"
    >
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img
          src="{{service_4_icon}}"
          class="w-10 h-10 md:w-12 md:h-12"
          data-node="service_4_icon"
          data-node-type="file"
          data-node-default="./assets/Performance Marketing.svg"
        />
      </div>

      <div
        class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white"
        data-node="service_4_title"
        data-node-type="text"
        data-node-default="Performance Marketing"
      >
        {{service_4_title}}
      </div>

      <p
        class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto"
        data-node="service_4_desc"
        data-node-type="textarea"
        data-node-default="Paid campaigns optimized for conversions, cost efficiency, and scalable revenue outcomes."
      >
        {{service_4_desc}}
      </p>
    </div>

    <!-- CARD 5 -->
    <div
      class="w-full xl:w-[854px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden"
    >
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img
          src="{{service_5_icon}}"
          class="w-10 h-10 md:w-12 md:h-12"
          data-node="service_5_icon"
          data-node-type="file"
          data-node-default="./assets/Social Media Strategy.svg"
        />
      </div>

      <div
        class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white"
        data-node="service_5_title"
        data-node-type="text"
        data-node-default="Social Media Strategy"
      >
        {{service_5_title}}
      </div>

      <p
        class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto"
        data-node="service_5_desc"
        data-node-type="textarea"
        data-node-default="Platform-specific content systems designed for reach, relevance, and brand recall."
      >
        {{service_5_desc}}
      </p>
    </div>
  </div>
</section>
