<section
  class="w-full relative bg-black px-4 md:px-10 lg:px-16 xl:px-24 pt-24 md:pt-36 lg:pt-52"
  data-component-type="Content"
>
  <!-- GLOW IMAGE (TOUCHING BORDER) -->
  <div class="absolute top-0 md:top-5 lg:top-10 left-0 w-full flex justify-center -translate-y-1/2 pointer-events-none">
    <img
      src="{{techstack_glow_image}}"
      alt="Glow"
      class="w-[85%] sm:w-[90%] h-auto object-cover"
      data-node="techstack_glow_image"
      data-node-type="file"
      data-node-default="./assets/Tech stack top.png"
    />
  </div>

  <!-- MAIN BOX -->
  <div
    class="w-full bg-[#040404] rounded-[36px] border border-[#464646] p-16 md:p-24 lg:p-32 pt-16 md:pt-24 lg:pt-32 pb-16 md:pb-20 text-center relative"
  >
    <!-- TITLE -->
    <h2
      class="font-['Cabin'] font-medium text-[36px] sm:text-[42px] md:text-[58px] lg:text-[78px] xl:text-[96px] 2xl:text-[110px] leading-[100%] md:leading-[110%] text-white"
      data-node="techstack_title"
      data-node-type="text"
      data-node-default="Tech stack we use to bring Business Growth"
    >
      {{techstack_title}}
    </h2>

    <!-- DESCRIPTION -->
    <p
      class="font-['Cabin'] text-[16px] sm:text-[17px] md:text-[20px] lg:text-[22px] xl:text-[26px] font-normal text-[#6D6D6D] leading-[130%] md:leading-[140%] mt-4 md:mt-8 max-w-[90%] md:max-w-[850px] mx-auto"
      data-node="techstack_description"
      data-node-type="text"
      data-node-default="We use industry-proven tools to scale intelligently by automating insights, optimizing performance, and monitoring growth in real time."
    >
      {{techstack_description}}
    </p>

    <!-- MAIN IMAGE -->
    <div class="w-full flex justify-center mt-10 md:mt-12">
      <img
        src="{{techstack_image}}"
        class="w-full h-auto object-contain"
        data-node="techstack_image"
        data-node-type="file"
        data-node-default="./assets/growth.webp"
      />
    </div>
  </div>
</section>
