<section data-component-type="Content" data-component-slug="ss-technology-template-case_study">
  <div class="py-16 md:py-24 max-w-[90%] mx-auto border-t border-gray-100">


    <!-- Top Bar -->
    <div class="flex justify-between items-center text-sm font-semibold text-[#666] mb-16 uppercase tracking-wider">
        <span data-node="case_label_left" class="text-black" data-node-type="text" data-node-default="Case ">{{case_label_left}}
            <span data-node="case_label_left_text" data-node-type="text" class="text-[#8F8F8F]" data-node-default=" Study">{{case_label_left_text}}</span>
        </span>
        <span class="hidden md:inline-block text-black" data-node="case_center_text" data-node-type="text" data-node-default="Discover The Results We've Achieved. ">{{case_center_text}}
        <span class="text-[#8F8F8F] " data-node="case_center_text_bold" data-node-type="text" data-node-default="Results That Matter">{{case_center_text_bold}}</span>
    </span>
        <span data-node="case_label_right" data-node-type="text" data-node-default="Featured " class="text-black">{{case_label_right}}
         <span data-node="case_label_right_text" class="text-[#8F8F8F] " data-node-type="text" data-node-default="Case Study">{{case_label_right_text}}</span>
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
        <!-- Left Column: Content -->
        <div class="flex flex-col items-start">
            <!-- Logo -->
            <img src="{{case_logo}}" data-node="case_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768051172/seltrix/templates/ss-technology-template/Logo.png" class="h-8 mb-16 object-contain" alt="Client Logo">

            <span class="text-xs font-bold tracking-widest text-[#0A2519] uppercase mb-4" data-node="case_study_label_left" data-node-type="text" data-node-default="Case Study ">{{case_study_label_left}}</span>
            
            <h2 class="text-3xl md:text-5xl font-bold text-[#01483D] leading-[1.15] mb-8" data-node="case_title" data-node-type="textarea" data-node-default="How a Scaling Startup Reduced Financial Ops Time by 42%">
                {{case_title}}
            </h2>

            <p class="text-[#4A736D] text-lg leading-relaxed mb-8 max-w-lg" data-node="case_desc" data-node-type="textarea" data-node-default="A fast-growing company replaced three separate tools with this platform. The result: faster reconciliations, real-time visibility, and fewer operational errors, within the first month.">
               {{case_desc}}
            </p>

            <a href="{{case_link}}" class="inline-flex items-center text-[#0A2519] font-bold border-b-2 border-transparent hover:border-[#0A2519] transition-all" data-node="case_link" data-node-type="text" data-node-default="#">
               <span data-node="case_link_text" data-node-type="text" data-node-default="Read More">{{case_link_text}}</span>
               <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>

        <!-- Right Column: Image -->
        <div class="bg-[#D3F976] rounded-[30px] p-0 overflow-hidden relative max-h-[600px] flex items-center justify-center">
            <!-- Hand / Phone Image -->
             <img src="{{case_image}}" data-node="case_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956650/seltrix/templates/ss-technology-template/hand_phone_green.png" class="w-full h-full object-cover" alt="Case Study Visual">
        </div>
    </div>

      </div>
</section>