Industrial_Juwel_Tones_Grid_Layout_Component

<section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-700 dark:text-emerald-400 mb-4">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        Leveraging a deep understanding of industry dynamics, we deliver bespoke solutions that drive transformation and sustainable growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Service Card 1 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-emerald-600 dark:hover:border-emerald-500">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-emerald-600 dark:bg-emerald-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.208-8.454-3.327M10 6L6 2m0 0L2 6m4-4v14m0-4 4 4m0 0 4-4m-4 4h14m-4-4 4-4m0 0 4 4"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Strategic Planning</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            We help define clear visions, actionable strategies, and robust roadmaps for future success.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-emerald-600 dark:bg-emerald-500 text-white rounded-md font-semibold text-lg hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75">
            Learn More
          </a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-ruby-600 dark:hover:border-ruby-500" style="--ruby-600: #DC2626; --ruby-500: #EF4444;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-red-600 dark:bg-red-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 3H9M3 19V6l12-3m-6 3v13m-6 0V6.364v3.272m0 10.364V12a8 8 0 008 8h2.091M17 19H9M7 6H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V7a1 1 0 00-1-1h-3.398m-7.798 0V5.091c0-.5-.41-.909-.909-.909h-.182c-.5 0-.909.41-.909.909V6m-2.182 0l-2.062 4.4L4 12V7c0-.55.45-1 1-1h2.182zm1.636 0L12 9.091L13.182 6m2.182 0l2.062 4.4L20 12V7c0-.55-.45-1-1-1h-2.182z"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Operational Excellence</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Optimize processes, streamline workflows, and enhance productivity across your organization.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-red-600 dark:bg-red-500 text-white rounded-md font-semibold text-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
            Explore Services
          </a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-sapphire-600 dark:hover:border-sapphire-500" style="--sapphire-600: #2563EB; --sapphire-500: #3B82F6;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-blue-600 dark:bg-blue-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M9 9l3 3m0 0l3-3m-3 3l-3 3m3-3v8m4-12h4m-2 2v4m1-13.438V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868M6.5 17L12 22l5.5-5M9 7h6m-1 7h2m-1 6H9m6-10V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Navigate the digital landscape with confidence, implementing cutting-edge technologies.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white rounded-md font-semibold text-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
            Start Your Journey
          </a>
        </div>
      </div>

      <!-- Service Card 4 (Horizontal, Image-backed) -->
      <div class="md:col-span-2 relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-purple-600 dark:hover:border-purple-500">
        <img src="https://picsum.photos/id/160/1200/600" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 group-hover:scale-105 transition-transform duration-500">
        <div class="p-6 sm:p-8 flex flex-col md:flex-row items-center relative z-10">
          <div class="flex-shrink-0 mb-6 md:mb-0 md:mr-8">
            <div class="flex items-center justify-center w-20 h-20 bg-purple-600 dark:bg-purple-500 text-white rounded-full mx-auto md:mx-0 group-hover:rotate-12 transition-transform duration-300">
              <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.5M16 11H4m10 0a2 2 0 100-4m-10 4a2 2 0 100-4m-2 4h4m-2-4v4m-2 2L9 20l-4-4