<section class="bg-white py-24 overflow-hidden" data-component-type="Content" data-component-slug="ss-technology-template-solution">
  <div class="max-w-[90%] mx-auto px-6 sm:px-12">
    
    <!-- Header -->
    <div class="flex flex-col lg:flex-row justify-between lg:items-end items-start gap-10 mb-20">
      <div class="lg:max-w-[40%] max:w-[90%] ">
        <div class="inline-block bg-[#E2FC80] px-4 py-1 rounded-full text-sm font-medium text-[#0A2519] mb-6" data-node="solution_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Solutions That Scale with You">
           <img src="{{badgeimg}}" data-node="badgeimg" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-[18px] h-[18px] p-1 object-cover inline-block" alt="App Interface">
          {{solution_badge}}
        </div>
        <h2 class="text-3xl md:text-5xl font-bold text-[#0A2519] leading-tight" data-node="solution_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Built for individuals, startups, and growing enterprises.">
          {{solution_heading}}
        </h2>
      </div>
      <div class="lg:max-w-[30%] max:w-[90%] lg:text-right">
        <p class="text-lg text-[#4A736D] leading-relaxed" data-node="solution_description" data-node-type="textarea" data-node-label="Description" data-node-default="Our solutions adapt as your financial needs grow without forcing you to switch platforms or relearn systems.">
          {{solution_description}}
        </p>
      </div>
    </div>

    <!-- Top Grid (3 Columns) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      
      <!-- Card 1 -->
      <div class="bg-[#F5F9F6]  rounded-[32px] p-2 flex flex-col h-full">
         <div class="bg-white rounded-[24px] mb-6 overflow-hidden h-[300px] flex items-center justify-center relative">
             <img src="{{sol_img_1}}" data-node="sol_img_1" data-node-type="file" data-node-label="Solution Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956714/seltrix/templates/ss-technology-template/sol1.png" class="w-[80%] h-auto object-contain bg-white" alt="Connect Payments">
         </div>
         <div class="px-4 pb-6">
           <p class="text-[#4A736D] text-lg leading-relaxed" data-node="sol_text_1" data-node-type="textarea" data-node-label="Solution Text 1" data-node-default="Connect payments and banking directly with your existing tools.">
             {{sol_text_1}}
           </p>
         </div>
      </div>

       <!-- Card 2 -->
      <div class="bg-[#F5F9F6] rounded-[32px] p-2 flex flex-col h-full">
         <div class="bg-white  rounded-[24px] mb-6 overflow-hidden h-[300px] flex items-center justify-center relative">
             <img src="{{sol_img_2}}" data-node="sol_img_2" data-node-type="file" data-node-label="Solution Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956716/seltrix/templates/ss-technology-template/sol2.png" class="w-[80%] h-auto object-contain bg-white" alt="Encryption">
         </div>
         <div class="px-4 pb-6">
           <p class="text-[#4A736D] text-lg leading-relaxed" data-node="sol_text_2" data-node-type="textarea" data-node-label="Solution Text 2" data-node-default="End-to-end encryption and real-time fraud monitoring.">
             {{sol_text_2}}
           </p>
         </div>
      </div>

       <!-- Card 3 -->
      <div class="bg-[#F5F9F6]  rounded-[32px] p-2 hidden lg:flex  flex-col h-full">
         <div class="bg-white  rounded-[24px] mb-6 overflow-hidden h-[300px] flex items-center justify-center relative">
             <img src="{{sol_img_3}}" data-node="sol_img_3" data-node-type="file" data-node-label="Solution Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956717/seltrix/templates/ss-technology-template/sol3.png" class="w-[80%] h-auto object-contain bg-white" alt="Management">
         </div>
         <div class="px-4 pb-6">
           <p class="text-[#4A736D] text-lg leading-relaxed" data-node="sol_text_3" data-node-type="textarea" data-node-label="Solution Text 3" data-node-default="Simplified money management for teams and organizations.">
             {{sol_text_3}}
           </p>
         </div>
      </div>

    </div>

    <!-- Bottom Grid (2 Columns) -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      
      <!-- Automated Compliance -->
   

           <!-- Automated Compliance -->
      <div class="bg-[#F5F9F6] rounded-[32px] p-10 flex flex-col relative overflow-hidden h-[400px] lg:h-[500px]">
         <h3 class="text-2xl font-bold text-[#0A2519] mb-3" data-node="sol_lg_title_1" data-node-type="text" data-node-label="Large Card Title 1" data-node-default="Automated Compliance">
           {{sol_lg_title_1}}
         </h3>
         <p class="text-[#4A736D] mb-10 max-w-sm z-10 relative" data-node="sol_lg_desc_1" data-node-type="textarea" data-node-label="Large Card Desc 1" data-node-default="Built-in regulatory checks that continuously monitor transactions and reduce manual oversight">
            {{sol_lg_desc_1}}
         </p>
         <div class="absolute bottom-0 right-0">
             <img src="{{sol_lg_img_1}}" data-node="sol_lg_img_1" data-node-type="file" data-node-label="Large Card Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956631/seltrix/templates/ss-technology-template/chart.png" class="xl:w-[500px] lg:w-[400px] md:w-[400px] w-[300px] object-bottom object-contain" alt="Compliance Chart">
         </div>
      </div>



      <!-- Digital Wallets -->
      <div class="bg-[#F5F9F6] rounded-[32px] p-10 flex flex-col relative overflow-hidden h-[400px] lg:h-[500px]">
         <h3 class="text-2xl font-bold text-[#0A2519] mb-3" data-node="sol_lg_title_2" data-node-type="text" data-node-label="Large Card Title 2" data-node-default="Digital Wallets">
           {{sol_lg_title_2}}
         </h3>
         <p class="text-[#4A736D] mb-10 max-w-sm z-10 relative" data-node="sol_lg_desc_2" data-node-type="textarea" data-node-label="Large Card Desc 2" data-node-default="Fast, flexible, and secure money storage that enables seamless payments and instant transfers.">
            {{sol_lg_desc_2}}
         </p>
         <div class="absolute bottom-0 right-0">
             <img src="{{sol_lg_img_2}}" data-node="sol_lg_img_2" data-node-type="file" data-node-label="Large Card Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956644/seltrix/templates/ss-technology-template/finix_card.png" class="xl:w-[400px] lg:w-[300px] md:w-[400px] w-[300px] object-bottom object-contain" alt="Digital Wallet">
         </div>
      </div>

    </div>

  </div>
</section>