<section
  class="w-full py-20 md:py-32 lg:py-40 px-4 md:px-12 lg:px-24 bg-cover bg-center bg-no-repeat text-center relative"
  style="background-image: url('./assets/about-background.png')"
  data-component-type="Content"
>
  <!-- TAG -->
  <div
    class="inline-block py-2.5 px-6 font-['Cabin'] text-[32px] font-normal text-white rounded-xl bg-[rgba(10,10,10,0.65)] border border-white/[0.12] backdrop-blur-[18px] mx-auto mb-8"
    data-node="about_work_hero_tag"
    data-node-type="text"
    data-node-default="Our works"
  >
    {{about_work_hero_tag}}
  </div>

  <!-- TITLE -->
  <h2
    class="font-['Cabin'] text-[38px] md:text-[64px] font-medium leading-[105%] md:leading-[95%] text-white max-w-[1000px] mx-auto mb-6"
    data-node="about_work_hero_title"
    data-node-type="text"
    data-node-default="Work That Delivers Outcomes. Not Just Aesthetics."
  >
    {{about_work_hero_title}}
  </h2>

  <!-- DESCRIPTION -->
  <p
    class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] max-w-[780px] mx-auto mb-10"
    data-node="about_work_hero_desc"
    data-node-type="textarea"
    data-node-default="From brand foundations to high-converting digital experiences, our work is built on strategy, execution, and measurable impact."
  >
    {{about_work_hero_desc}}
  </p>

  <!-- CTA BUTTON -->
  <a
    class="w-full max-w-[340px] sm:w-[269px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] flex justify-center items-center gap-2.5 cursor-pointer transition-opacity duration-300 hover:opacity-85 mx-auto font-['Cabin'] text-[24px] font-normal text-black"
    data-node="about_work_hero_cta_link"
    data-node-type="page_links"
    data-node-default="{{about_work_hero_cta_link}}"
  >
    <span data-node="about_work_hero_cta_text" data-node-type="text" data-node-default="View Our Projects">
      {{about_work_hero_cta_text}}
    </span>

    <img
      src="{{about_work_hero_cta_icon}}"
      class="w-[26px] h-[26px]"
      data-node="about_work_hero_cta_icon"
      data-node-type="file"
      data-node-default="./assets/Hero btn arrw.svg"
    />
  </a>
</section>
