<section class="w-full max-w-[90%] mx-auto pt-20 md:pt-32 lg:pt-40 pb-5" data-component-type="Content" data-component-slug="portfolio-template-work-project-feature">
  <!-- PROJECT 1 — WEBSITE DESIGNING -->

  <img src="{{work_project_feature_image}}" class="w-full object-cover mb-10 rounded-none" alt="Website Designing Project" data-node="work_project_feature_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879961/seltrix/templates/portfolio-template/website%20designing%20work.webp">

  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
    <div class="w-full">
      <h2 class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3" data-node="work_project_feature_title_1" data-node-label="Work Project Feature Title 1" data-node-type="text" data-node-default="Website Designing">
        {{work_project_feature_title_1}}
      </h2>
      <span class="w-full flex flex-col md:flex-row justify-between items-start gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
        <p class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]" data-node="work_project_feature_desc_1" data-node-label="Work Project Feature Desc 1" data-node-type="textarea" data-node-default="A conversion-focused website designed to reduce bounce rate, improve navigation clarity, and guide users toward action within seconds of landing.">
          {{work_project_feature_desc_1}}
        </p>
        <a class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0" data-node="work_project_feature_cta_link_1" data-node-type="page_links" data-node-default="{{work_project_feature_cta_link_1}}">
          <span data-node="work_project_feature_cta_text_1" data-node-type="text" data-node-default="Explore project">
            {{work_project_feature_cta_text_1}}
          </span>
        </a>
      </span>
    </div>
  </div>

  <!-- PROJECT 2 — BRANDING -->

  <img src="{{work_project_feature_image_2}}" class="w-full object-cover mb-10 rounded-none" alt="Branding Project" data-node="work_project_feature_image_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879856/seltrix/templates/portfolio-template/Branding.webp">

  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
    <div class="w-full">
      <h2 class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3" data-node="work_project_feature_title_2" data-node-label="Work Project Feature Title 2" data-node-type="text" data-node-default="Branding">
        {{work_project_feature_title_2}}
      </h2>
      <span class="w-full flex flex-col md:flex-row justify-between items-start gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
        <p class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]" data-node="work_project_feature_desc_2" data-node-label="Work Project Feature Desc 2" data-node-type="textarea" data-node-default="A complete brand system crafted to establish authority, consistency, and recognition across digital and offline touchpoints.">
          {{work_project_feature_desc_2}}
        </p>
        <a class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0" data-node="work_project_feature_cta_link_2" data-node-type="page_links" data-node-default="{{work_project_feature_cta_link_2}}">
          <span data-node="work_project_feature_cta_text_2" data-node-type="text" data-node-default="Explore project">
            {{work_project_feature_cta_text_2}}
          </span>
        </a>
      </span>
    </div>
  </div>

  <!-- PROJECT 3 — GRAPHIC DESIGNING -->

  <img src="{{work_project_feature_image_3}}" class="w-full object-cover mb-10 rounded-none" alt="Graphic Designing Project" data-node="work_project_feature_image_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879872/seltrix/templates/portfolio-template/Graphic%20Designing.webp">

  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
    <div class="w-full">
      <h2 class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3" data-node="work_project_feature_title_3" data-node-label="Work Project Feature Title 3" data-node-type="text" data-node-default="Graphic Designing">
        {{work_project_feature_title_3}}
      </h2>
      <span class="w-full flex flex-col md:flex-row justify-between items-start gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
        <p class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]" data-node="work_project_feature_desc_3" data-node-label="Work Project Feature Desc 3" data-node-type="textarea" data-node-default="High-impact visuals designed for performance, not decoration. Optimized for social engagement, ad recall, and brand consistency.">
          {{work_project_feature_desc_3}}
        </p>
        <a class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0" data-node="work_project_feature_cta_link_3" data-node-type="page_links" data-node-default="{{work_project_feature_cta_link_3}}">
          <span data-node="work_project_feature_cta_text_3" data-node-type="text" data-node-default="Explore project">
            {{work_project_feature_cta_text_3}}
          </span>
        </a>
      </span>
    </div>
  </div>

  <!-- PROJECT 4 — UX DESIGNING -->

  <img src="{{work_project_feature_image_4}}" class="w-full object-cover mb-10 rounded-none" alt="UX Designing Project" data-node="work_project_feature_image_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879922/seltrix/templates/portfolio-template/UX%20Designing.webp">

  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
    <div class="w-full">
      <h2 class="font-['Cabin'] text-[28px] md:text-[32px] font-normal text-white mb-3" data-node="work_project_feature_title_4" data-node-label="Work Project Feature Title 4" data-node-type="text" data-node-default="UX Designing">
        {{work_project_feature_title_4}}
      </h2>
      <span class="w-full flex flex-col md:flex-row justify-between items-start gap-8 md:gap-10 mb-16 md:mb-20 lg:mb-24">
        <p class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]" data-node="work_project_feature_desc_4" data-node-label="Work Project Feature Desc 4" data-node-type="textarea" data-node-default="User journeys redesigned to remove friction, simplify decision-making, and increase task completion through intuitive UX architecture.">
          {{work_project_feature_desc_4}}
        </p>
        <a class="w-full md:w-[210px] max-w-[340px] h-14 py-2.5 px-4 rounded-xl bg-[#D3FF5B] text-black font-['Cabin'] text-[24px] font-normal flex justify-center items-center cursor-pointer transition-opacity duration-300 hover:opacity-85 whitespace-nowrap shrink-0" data-node="work_project_feature_cta_link_4" data-node-type="page_links" data-node-default="{{work_project_feature_cta_link_4}}">
          <span data-node="work_project_feature_cta_text_4" data-node-type="text" data-node-default="Explore project">
            {{work_project_feature_cta_text_4}}
          </span>
        </a>
      </span>
    </div>
  </div>
</section>