<!-- Capability 4 --> section not looking good chnage the pattern

index.html

@@ -243,26 +243,34 @@
           <img src="http://static.photos/industry/640x360/1" alt="Smart factory" class="rounded-lg shadow-xl" loading="lazy">
         </div>
       </div>
-      
-      <!-- Capability 4 -->
-      <div class="mt-12 bg-white p-8 rounded-lg shadow-md">
-        <h3 class="text-2xl font-bold mb-6 text-[var(--vlc-navy)]">Automation and Advanced Analytics</h3>
+      <!-- Capability 4 - Enhanced Layout -->
+      <div class="mt-12 bg-gradient-to-r from-[var(--vlc-tint)] to-white p-8 rounded-xl shadow-lg border border-gray-100">
+        <h3 class="text-3xl font-bold mb-8 text-[var(--vlc-navy)] text-center">Automation and Advanced Analytics</h3>
         <div class="grid md:grid-cols-3 gap-8">
-          <div>
-            <h4 class="font-semibold mb-2">Smooth automation</h4>
-            <p class="text-sm">Introduce extremely fast manufacturing utilities by achieving profound integration of your base ERP software with affiliated shop floor machinery.</p>
+          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 border-l-4 border-[var(--vlc-leaf)]">
+            <div class="flex items-center mb-4">
+              <i data-feather="zap" class="w-8 h-8 text-[var(--vlc-sky)] mr-3"></i>
+              <h4 class="font-bold text-lg">Smooth Automation</h4>
+            </div>
+            <p class="text-gray-700">Introduce extremely fast manufacturing utilities by achieving profound integration of your base ERP software with affiliated shop floor machinery.</p>
           </div>
-          <div>
-            <h4 class="font-semibold mb-2">Intelligent Notifications and Alerts</h4>
-            <p class="text-sm">The automated system alerts staff immediately regarding equipment downtime, a variation in the cycle rate, or any other important exception, allowing personnel to react promptly.</p>
+          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 border-l-4 border-[var(--vlc-sky)]">
+            <div class="flex items-center mb-4">
+              <i data-feather="bell" class="w-8 h-8 text-[var(--vlc-leaf)] mr-3"></i>
+              <h4 class="font-bold text-lg">Intelligent Alerts</h4>
+            </div>
+            <p class="text-gray-700">The automated system alerts staff immediately regarding equipment downtime, a variation in the cycle rate, or any other important exception, allowing personnel to react promptly.</p>
           </div>
-          <div>
-            <h4 class="font-semibold mb-2">Superior Analytics</h4>
-            <p class="text-sm">Our real-time analytics system, inspired by AI-driven business intelligence, enables decision-makers to undertake more informed, dynamic strategic decisions based on high-quality contextual data streams.</p>
+          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 border-l-4 border-[var(--vlc-navy)]">
+            <div class="flex items-center mb-4">
+              <i data-feather="bar-chart-2" class="w-8 h-8 text-[var(--vlc-navy)] mr-3"></i>
+              <h4 class="font-bold text-lg">Superior Analytics</h4>
+            </div>
+            <p class="text-gray-700">Our real-time analytics system, inspired by AI-driven business intelligence, enables decision-makers to undertake more informed, dynamic strategic decisions.</p>
           </div>
         </div>
       </div>
-    </div>
+</div>
   </section>
 <!-- Section 2 -->
   <section class="py-16 px-4 pattern-tint">