<section data-component-type="Hero" class="bg-white py-[120px] lg:pt-[150px] pb-[30px] overflow-hidden " data-component-slug="ss-interior-kitchen-home_hero">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-start">
      
      <!-- Left Column -->
      <div class="flex flex-col gap-10 lg:gap-14 pt-4">
        <!-- Text Content -->
        <div class="flex flex-col gap-6 sm:gap-8">
           <h1 data-node="hero_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="We Design Kitchens That Shape Modern Homes." class="text-[31px]  xl:text-[54px] md:text-[34px] lg:text-[44px] 
             leading-[30px] md:leading-[50px] lg:leading-[70px] font-bold text-[#000000] ">
            {{hero_title}}
           </h1>
           
           <p data-node="hero_subtitle" data-node-type="textarea" data-node-label="Hero Subtitle" data-node-default="Upgrade your everyday with modern appliances crafted for beauty, efficiency, and effortless cooking." class="text-lg sm:text-xl text-[#636363] max-w-lg leading-relaxed font-medium">
            {{hero_subtitle}}
           </p>
           
           <div class="mt-2">
             <a data-node="cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#" href="{{cta_link}}" class="inline-block group">
                <div class="bg-[#0019BA] text-white px-8 py-4
                 rounded-[12px]  lg:text-[12px] text-[10px] transition-all duration-300 transform group-hover:-translate-y-1 shadow-lg shadow-indigo-200">
                   <span data-node="cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Explore Our Collection">{{cta_text}}</span>
                </div>
             </a>
           </div>
        </div>

        <!-- Bottom Left Image (Wide) -->
        <div class="w-full h-[280px] sm:h-[350px] lg:h-[400px] overflow-hidden rounded-[32px] shadow-sm relative group">
           <img data-node="hero_image_wide" data-node-type="file" data-node-label="Wide Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779846/seltrix/templates/ss-interior-kitchen/h2.png" src="{{hero_image_wide}}" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="Modern Kitchen Detail">
           <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
        </div>
      </div>

      <!-- Right Column (Tall Image) -->
      <div class="w-full h-[500px] lg:h-[850px] overflow-hidden rounded-[32px] shadow-sm relative group mt-4 lg:mt-0">
        <img data-node="hero_image_tall" data-node-type="file" data-node-label="Tall Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779845/seltrix/templates/ss-interior-kitchen/h1.png" src="{{hero_image_tall}}" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="Luxury Kitchen Interior">
        <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
      </div>

    </div>
  </div>
</section>