Features change the other different pattern

index.html

@@ -708,47 +708,105 @@
     </div>
   </div>
 </section>
-
 <!-- Features (short) -->
-<section class="py-16 text-white"
+<section class="py-16 text-white relative overflow-hidden"
   style="
     background:
-      linear-gradient(135deg,#003366 0%, #002060 100%),
-      radial-gradient(circle at 20% 30%, rgba(0,160,233,.18) 0%, transparent 35%),
-      radial-gradient(circle at 80% 70%, rgba(141,198,63,.18) 0%, transparent 35%);
+      linear-gradient(135deg,#003366 0%, #002060 100%);
 ">
-  <div class="max-w-4xl mx-auto px-6 md:px-8">
+  <!-- Diagonal grid pattern -->
+  <div class="absolute inset-0 opacity-10"
+       style="
+        background:
+          linear-gradient(45deg, transparent 65%, rgba(0,160,233,0.3) 65.5%, transparent 66%),
+          linear-gradient(-45deg, transparent 65%, rgba(141,198,63,0.3) 65.5%, transparent 66%);
+        background-size: 40px 40px;">
+  </div>
+<div class="max-w-4xl mx-auto px-6 md:px-8">
     <div class="flex items-center gap-3 mb-6">
       <span class="inline-block w-2.5 h-8 rounded-full bg-white/60"></span>
       <h3 class="text-2xl md:text-3xl font-bold">Features</h3>
     </div>
-
-    <div class="space-y-5">
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Integration with Microsoft Dynamics 365 Business Central</p>
-        <p class="mt-1 text-white/90">Sales orders in Business Central can be processed quickly with VLC Smart Shipping. A few clicks or barcode scans are all it takes to ship your orders directly from the ERP system.</p>
+    <div class="space-y-5 relative z-10">
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(0,160,233,0.2);">
+              <i data-feather="cpu" class="w-4 h-4 text-[#00A0E9]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Integration with Microsoft Dynamics 365 Business Central</p>
+            <p class="mt-1 text-white/90">Sales orders in Business Central can be processed quickly with VLC Smart Shipping. A few clicks or barcode scans are all it takes to ship your orders directly from the ERP system.</p>
+          </div>
+        </div>
       </div>
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Shipping Price Comparison</p>
-        <p class="mt-1 text-white/90">Compare rates from different carriers to find the best pricing and service options. Whether you're shipping small packages or LTL, VLC Smart Shipping ensures that you always pick the most cost-effective solution.</p>
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(141,198,63,0.2);">
+              <i data-feather="dollar-sign" class="w-4 h-4 text-[#8DC63F]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Shipping Price Comparison</p>
+            <p class="mt-1 text-white/90">Compare rates from different carriers to find the best pricing and service options. Whether you're shipping small packages or LTL, VLC Smart Shipping ensures that you always pick the most cost-effective solution.</p>
+          </div>
+        </div>
       </div>
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Decreases Shipping Errors</p>
-        <p class="mt-1 text-white/90">VLC Smart Shipping minimizes common errors like incorrect shipping addresses, missed products, and improper shipments. Data integration directly with your ERP application ensures accuracy at all stages of shipping.</p>
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(0,160,233,0.2);">
+              <i data-feather="check-circle" class="w-4 h-4 text-[#00A0E9]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Decreases Shipping Errors</p>
+            <p class="mt-1 text-white/90">VLC Smart Shipping minimizes common errors like incorrect shipping addresses, missed products, and improper shipments. Data integration directly with your ERP application ensures accuracy at all stages of shipping.</p>
+          </div>
+        </div>
       </div>
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Direct Status Tracking from Sales Documents</p>
-        <p class="mt-1 text-white/90">Easily track orders directly from your sales documents, giving you and your customers full visibility of order statuses and delivery timelines.</p>
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(141,198,63,0.2);">
+              <i data-feather="map-pin" class="w-4 h-4 text-[#8DC63F]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Direct Status Tracking from Sales Documents</p>
+            <p class="mt-1 text-white/90">Easily track orders directly from your sales documents, giving you and your customers full visibility of order statuses and delivery timelines.</p>
+          </div>
+        </div>
       </div>
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Automated Label and Document Printing</p>
-        <p class="mt-1 text-white/90">Shipping labels and required documents are automatically generated and sent to the assigned printers, reducing manual input and speeding up the shipping process.</p>
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(0,160,233,0.2);">
+              <i data-feather="printer" class="w-4 h-4 text-[#00A0E9]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Automated Label and Document Printing</p>
+            <p class="mt-1 text-white/90">Shipping labels and required documents are automatically generated and sent to the assigned printers, reducing manual input and speeding up the shipping process.</p>
+          </div>
+        </div>
       </div>
-      <div class="rounded-xl border border-white/12 bg-white/5 p-5 backdrop-blur-sm">
-        <p class="font-semibold">● Simplified International Shipping</p>
-        <p class="mt-1 text-white/90">International shipments are simplified by automatically extracting required information (like Schedule B, producer details) from your ERP system, helping you manage complex shipping processes with ease.</p>
+      <div class="rounded-xl border border-white/12 bg-gradient-to-br from-white/5 to-white/10 p-5 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 mt-1">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(141,198,63,0.2);">
+              <i data-feather="globe" class="w-4 h-4 text-[#8DC63F]"></i>
+            </div>
+          </div>
+          <div>
+            <p class="font-semibold">● Simplified International Shipping</p>
+            <p class="mt-1 text-white/90">International shipments are simplified by automatically extracting required information (like Schedule B, producer details) from your ERP system, helping you manage complex shipping processes with ease.</p>
+          </div>
+        </div>
       </div>
-    </div>
+</div>
 
     <div class="mt-8 flex items-center gap-4">
       <a href="https://www.vlcsolutions.com/contactus.html"