Watercolor_Artistic_Grid_Layout_Consulting

<div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
            relative overflow-hidden group">
  <!-- Background artistic overlay for light mode -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <!-- Background artistic overlay for dark mode -->
  <div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <header class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                 text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering your business with strategic insights and tailored solutions.
      </p>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Service Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Streamlining processes and enhancing efficiency to maximize your operational performance.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Guiding your journey through digital innovation, from adoption to full integration.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

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