Manual changes saved

index.html

@@ -814,6 +814,7 @@
     </div>
   </div>
 <!-- ====== ALL FEATURES (Collapsible) ====== -->
+<!-- ====== ALL FEATURES ====== -->
 <section class="py-12 bg-white">
   <style>[x-cloak]{display:none!important}</style>
 
@@ -822,16 +823,17 @@
     <p class="text-gray-600 mb-10">Expand a section to view detailed capabilities.</p>
 
     <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+
       <!-- Manage Orders -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="0" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Manage Orders
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Filter Orders</li>
           <li>View, Search, and Sort Orders</li>
           <li>Set a Ship By Date</li>
@@ -845,15 +847,15 @@
       </div>
 
       <!-- Ship Orders -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="50" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="50" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="truck" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Ship Orders
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Connect a Postage Provider</li>
           <li>Add Funds and Auto-fund Postal Accounts</li>
           <li>Edit Services &amp; Package Types</li>
@@ -875,15 +877,15 @@
       </div>
 
       <!-- Shipment Records & Details -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="100" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="100" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="file-text" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Shipment Records &amp; Details
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Drop-shipping with VLC</li>
           <li>Add Insurance to Shipments</li>
           <li>Manage Shipments</li>
@@ -901,15 +903,15 @@
       </div>
 
       <!-- Printer and Scale Integration -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="150" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="150" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="printer" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Printer and Scale Integration
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Printing Overview</li>
           <li>Set Up Printers in Windows</li>
           <li>Print a Document</li>
@@ -919,32 +921,31 @@
       </div>
 
       <!-- Notification and Documents -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="200" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="200" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="bell" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Notification and Documents
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Print Packing Slips</li>
         </ul>
       </div>
 
       <!-- Advanced Analytics -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="250" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="250" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="bar-chart-2" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Advanced Analytics
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-
-        <div x-show="open" x-transition x-cloak class="mt-3 text-gray-700 text-sm">
+        <div x-show="open" x-transition x-cloak class="mt-3 pl-7 text-gray-700 text-sm">
           <p class="font-medium">a) Warehouse</p>
-          <ul class="mt-1 pl-6 list-disc space-y-1">
+          <ul class="mt-1 list-disc space-y-1">
             <li>Orders to Pick</li>
             <li>Orders Picked</li>
             <li>Daily/Monthly Picked Orders</li>
@@ -957,9 +958,275 @@
             <li>Pick Performance</li>
             <li>Pack Performance</li>
           </ul>
+          <p class="font-medium mt-4">b) Non-Warehouse</p>
+          <ul class="mt-1 list-disc space-y-1">
+            <li>Orders To Ship</li>
+            <li>Orders To Ship v/s Shipped Orders</li>
+            <li>Orders to Ship By Carrier</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Account Management -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="300" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Account Management
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Add &amp; Edit Users</li>
+          <li>Set User Permissions and Restrictions</li>
+        </ul>
+      </div>
+
+      <!-- International Shipments -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="350" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            International Shipments
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>International Shipping with VLC</li>
+          <li>VLC’s International Settings</li>
+          <li>Customs Declarations</li>
+          <li>Print Customs Forms</li>
+          <li>Other International Options &amp; Forms</li>
+          <li>Global Advantage Program</li>
+        </ul>
+      </div>
+
+      <!-- Custom Packaging -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="400" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Custom Packaging
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Custom Package Types</li>
+        </ul>
+      </div>
+
+      <!-- Barcode Actions -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="450" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Barcode Actions
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Barcode Scanning Overview</li>
+          <li>View Orders with a Barcode Scan</li>
+          <li>Search Orders with a Barcode Scan</li>
+          <li>Verify &amp; Print Shipments with Barcode Scan</li>
+          <li>UPC and SKU Settings for Barcode Scanning</li>
+          <li>Batch Orders with a Barcode Scan</li>
+          <li>Add Barcodes to Packing Slips</li>
+          <li>Other Barcode Uses</li>
+          <li>Scan Barcodes with VLC Mobile</li>
+        </ul>
+      </div>
+
+      <!-- General Settings -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="500" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            General Settings
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Third-Party Billing</li>
+        </ul>
+      </div>
+
+      <!-- Setup Carrier Accounts -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="550" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Setup Carrier Accounts
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Dimensions based on setup</li>
+          <li>Weights and dimensions on items</li>
+          <li>Posting shipment and Invoice of a BC order from Shipping App</li>
+          <li>Weight Discrepancy</li>
+          <li>Setup based rate shop for a specific carrier</li>
+          <li>Package Contents Label/PDF</li>
+          <li>Print Posted Documents</li>
+          <li>Partial Shipments</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<!-- Alpine.js + Feather Icons -->
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded",()=>{ feather.replace(); });
+</script>
+<!-- ====== ALL FEATURES ====== -->
+<section class="py-12 bg-white">
+  <style>[x-cloak]{display:none!important}</style>
+
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h2 class="text-2xl md:text-3xl font-bold text-[#002060] mb-6">ALL FEATURES</h2>
+    <p class="text-gray-600 mb-10">Expand a section to view detailed capabilities.</p>
+
+    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+      <!-- Manage Orders -->
+      <div x-data="{ open:false }" data-aos="fade-up" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Manage Orders
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Filter Orders</li>
+          <li>View, Search, and Sort Orders</li>
+          <li>Set a Ship By Date</li>
+          <li>Split Orders Into Multiple Shipments</li>
+          <li>Order Tags</li>
+          <li>Edit Order Details</li>
+          <li>Configure Checkout Rates</li>
+          <li>Address Validation</li>
+          <li>Order Alerts</li>
+        </ul>
+      </div>
+
+      <!-- Ship Orders -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="50" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Ship Orders
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Connect a Postage Provider</li>
+          <li>Add Funds and Auto-fund Postal Accounts</li>
+          <li>Edit Services &amp; Package Types</li>
+          <li>Set Ship From &amp; Return Address</li>
+          <li>Configure Shipping</li>
+          <li>Use Shipping Presets</li>
+          <li>Calculate Rates</li>
+          <li>Create Single Labels</li>
+          <li>Create Multi-Package Labels</li>
+          <li>Reship an Order</li>
+          <li>Print Labels</li>
+          <li>Introduction to Batch Shipping</li>
+          <li>Working with Batches</li>
+          <li>Create a Batch</li>
+          <li>Print Labels with a Batch</li>
+          <li>Using Quickship</li>
+          <li>The Label Queue</li>
+        </ul>
+      </div>
+
+      <!-- Shipment Records & Details -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="100" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Shipment Records &amp; Details
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Drop-shipping with VLC</li>
+          <li>Add Insurance to Shipments</li>
+          <li>Manage Shipments</li>
+          <li>Order &amp; Shipment Records</li>
+          <li>Track Shipments</li>
+          <li>End of Day Forms</li>
+          <li>Void Labels</li>
+          <li>Return Labels</li>
+          <li>Search and Sort Shipments or Fulfillments</li>
+          <li>Filter Shipment or Fulfillment Records</li>
+          <li>Reprint a Label</li>
+          <li>Schedule a Pickup</li>
+          <li>Create Multi-Package Labels</li>
+        </ul>
+      </div>
+
+      <!-- Printer and Scale Integration -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="150" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Printer and Scale Integration
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Printing Overview</li>
+          <li>Set Up Printers in Windows</li>
+          <li>Print a Document</li>
+          <li>Print a Test Label</li>
+          <li>Use a USB Scale</li>
+        </ul>
+      </div>
 
+      <!-- Notification and Documents -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="200" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Notification and Documents
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+          <li>Print Packing Slips</li>
+        </ul>
+      </div>
+
+      <!-- Advanced Analytics -->
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="250" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
+        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
+          <span class="flex items-center gap-2">
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
+            Advanced Analytics
+          </span>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
+        </button>
+        <div x-show="open" x-transition x-cloak class="mt-3 pl-7 text-gray-700 text-sm">
+          <p class="font-medium">a) Warehouse</p>
+          <ul class="mt-1 list-disc space-y-1">
+            <li>Orders to Pick</li>
+            <li>Orders Picked</li>
+            <li>Daily/Monthly Picked Orders</li>
+            <li>Order Analysis</li>
+            <li>Orders Shipped</li>
+            <li>Daily/Monthly Shipped Orders</li>
+            <li>Orders to Ship</li>
+            <li>Employee Analysis</li>
+            <li>Monthly Expenses Breakdown</li>
+            <li>Pick Performance</li>
+            <li>Pack Performance</li>
+          </ul>
           <p class="font-medium mt-4">b) Non-Warehouse</p>
-          <ul class="mt-1 pl-6 list-disc space-y-1">
+          <ul class="mt-1 list-disc space-y-1">
             <li>Orders To Ship</li>
             <li>Orders To Ship v/s Shipped Orders</li>
             <li>Orders to Ship By Carrier</li>
@@ -968,30 +1235,30 @@
       </div>
 
       <!-- Account Management -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="300" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="300" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="users" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Account Management
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Add &amp; Edit Users</li>
           <li>Set User Permissions and Restrictions</li>
         </ul>
       </div>
 
       <!-- International Shipments -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="350" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="350" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="globe" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             International Shipments
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>International Shipping with VLC</li>
           <li>VLC’s International Settings</li>
           <li>Customs Declarations</li>
@@ -1002,29 +1269,29 @@
       </div>
 
       <!-- Custom Packaging -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="400" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="400" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="package" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Custom Packaging
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Custom Package Types</li>
         </ul>
       </div>
 
       <!-- Barcode Actions -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="450" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="450" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="maximize-2" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Barcode Actions
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Barcode Scanning Overview</li>
           <li>View Orders with a Barcode Scan</li>
           <li>Search Orders with a Barcode Scan</li>
@@ -1038,29 +1305,29 @@
       </div>
 
       <!-- General Settings -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="500" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="500" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="settings" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             General Settings
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Third-Party Billing</li>
         </ul>
       </div>
 
       <!-- Setup Carrier Accounts -->
-      <div x-data="{open:false}" data-aos="fade-up" data-aos-delay="550" class="border border-gray-100 rounded-xl shadow-sm p-4">
+      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="550" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
         <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
           <span class="flex items-center gap-2">
-            <i data-feather="credit-card" class="w-5 h-5"></i>
+            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
             Setup Carrier Accounts
           </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
+          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
         </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-6 list-disc text-gray-700 space-y-1 text-sm">
+        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
           <li>Dimensions based on setup</li>
           <li>Weights and dimensions on items</li>
           <li>Posting shipment and Invoice of a BC order from Shipping App</li>
@@ -1076,6 +1343,13 @@
   </div>
 </section>
 
+<!-- Alpine.js + Feather Icons -->
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded",()=>{ feather.replace(); });
+</script>
+
+
 <!-- Alpine.js (for collapsibles) -->
 <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>