diff --git a/crop.html b/crop.html
index a12dd0e4..3c4815f8 100644
--- a/crop.html
+++ b/crop.html
@@ -66,7 +66,20 @@
         }
 
         [data-theme="light"] body {
-            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+
+        [data-theme="light"] .top-nav {
+            background: rgba(255, 255, 255, 0.9) !important;
+            /* No longer black! */
+            border-color: rgba(0, 0, 0, 0.1) !important;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
+        }
+
+        [data-theme="light"] .nav-back,
+        [data-theme="light"] .nav-left span {
+            color: #1e293b !important;
+            /* High-contrast charcoal text */
         }
 
         .container {
@@ -505,12 +518,13 @@
             max-height: 300px;
             overflow-y: auto;
         }
+
         /* Light Mode Styling for Alerts Panel (Issue #1530 Fix) */
-[data-theme="light"] .alerts-panel {
-    background: #ffffff;
-    border: 1px solid #e2e8f0;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-}
+        [data-theme="light"] .alerts-panel {
+            background: #ffffff;
+            border: 1px solid #e2e8f0;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+        }
 
 
         .alert-item {
@@ -539,33 +553,36 @@
         }
 
         /* Light mode alert card refinement */
-[data-theme="light"] .alert-item {
-    background: #f8fafc;
-    border-radius: 12px;
-    border-left-width: 5px;
-    transition: all 0.25s ease;
-}
-
-[data-theme="light"] .alert-item.warning {
-    background: #fffbeb; /* warm soft amber */
-    border-left-color: var(--accent-warning);
-}
-
-[data-theme="light"] .alert-item.danger {
-    background: #fef2f2; /* soft red tint */
-    border-left-color: var(--accent-danger);
-}
-
-[data-theme="light"] .alert-item.success {
-    background: #f0fdf4; /* soft green tint */
-    border-left-color: var(--accent-success);
-}
-
-/* Subtle hover polish for alerts (both themes) */
-.alert-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 18px var(--shadow-light);
-}
+        [data-theme="light"] .alert-item {
+            background: #f8fafc;
+            border-radius: 12px;
+            border-left-width: 5px;
+            transition: all 0.25s ease;
+        }
+
+        [data-theme="light"] .alert-item.warning {
+            background: #fffbeb;
+            /* warm soft amber */
+            border-left-color: var(--accent-warning);
+        }
+
+        [data-theme="light"] .alert-item.danger {
+            background: #fef2f2;
+            /* soft red tint */
+            border-left-color: var(--accent-danger);
+        }
+
+        [data-theme="light"] .alert-item.success {
+            background: #f0fdf4;
+            /* soft green tint */
+            border-left-color: var(--accent-success);
+        }
+
+        /* Subtle hover polish for alerts (both themes) */
+        .alert-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 18px var(--shadow-light);
+        }
 
 
         .alert-icon {
@@ -574,23 +591,23 @@
 
         /* --- FIXED: CONTRAST AND VISIBILITY FOR ALERTS --- */
         /* --- THEME-AWARE ALERT TEXT (Fix for Issue #1530) --- */
-.alert-content h4 {
-    color: var(--text-primary);
-    margin-bottom: 5px;
-    font-weight: 700;
-}
+        .alert-content h4 {
+            color: var(--text-primary);
+            margin-bottom: 5px;
+            font-weight: 700;
+        }
 
-.alert-content p {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    opacity: 1;
-}
+        .alert-content p {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            opacity: 1;
+        }
 
-.alert-time {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    margin-left: auto;
-}
+        .alert-time {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-left: auto;
+        }
 
 
         .sensor-status {
@@ -601,26 +618,26 @@
         }
 
         /* Enhanced Sensor Card Animation (Subtle & Lightweight) */
-.sensor-item {
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 20px;
-    border-left: 4px solid var(--accent-success);
-    position: relative;
-    overflow: hidden;
+        .sensor-item {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            padding: 20px;
+            border-left: 4px solid var(--accent-success);
+            position: relative;
+            overflow: hidden;
 
-    /* NEW: smooth entrance + hover feel */
-    opacity: 0;
-    transform: translateY(15px) scale(0.98);
-    animation: sensorFadeIn 0.6s ease forwards;
+            /* NEW: smooth entrance + hover feel */
+            opacity: 0;
+            transform: translateY(15px) scale(0.98);
+            animation: sensorFadeIn 0.6s ease forwards;
 
-    transition: transform 0.32s cubic-bezier(0.2, 1.6, 0.3, 1),
-            box-shadow 0.3s ease,
-            border-color 0.3s ease;
+            transition: transform 0.32s cubic-bezier(0.2, 1.6, 0.3, 1),
+                box-shadow 0.3s ease,
+                border-color 0.3s ease;
 
 
-}
+        }
 
 
         .sensor-item::before {
@@ -650,28 +667,31 @@
         }
 
         /* Subtle fade-in animation for sensor cards */
-@keyframes sensorFadeIn {
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-/* Spring jump effect for hover (visible but still professional) */
-@keyframes sensorJump {
-    0% {
-        transform: translateY(0) scale(1);
-    }
-    40% {
-        transform: translateY(-14px) scale(1.04);
-    }
-    70% {
-        transform: translateY(-8px) scale(1.02);
-    }
-    100% {
-        transform: translateY(-10px) scale(1.03);
-    }
-}
+        @keyframes sensorFadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        /* Spring jump effect for hover (visible but still professional) */
+        @keyframes sensorJump {
+            0% {
+                transform: translateY(0) scale(1);
+            }
+
+            40% {
+                transform: translateY(-14px) scale(1.04);
+            }
+
+            70% {
+                transform: translateY(-8px) scale(1.02);
+            }
+
+            100% {
+                transform: translateY(-10px) scale(1.03);
+            }
+        }
 
 
 
@@ -692,30 +712,30 @@
         }
 
         /* Subtle hover lift (as requested in issue #1529) */
-/* Enhanced soft bounce hover (more noticeable) */
-.sensor-item:hover {
-    transform: translateY(-12px) scale(1.025);
-    box-shadow: 0 18px 35px var(--shadow-medium);
+        /* Enhanced soft bounce hover (more noticeable) */
+        .sensor-item:hover {
+            transform: translateY(-12px) scale(1.025);
+            box-shadow: 0 18px 35px var(--shadow-medium);
 
-    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
+            transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                 box-shadow 0.25s ease;
-}
+        }
 
 
-/* Status-colored border on hover (matches left accent color) */
-.sensor-item:hover {
-    border-color: var(--accent-success);
-}
+        /* Status-colored border on hover (matches left accent color) */
+        .sensor-item:hover {
+            border-color: var(--accent-success);
+        }
 
-/* Warning card → orange border on hover */
-.sensor-item.warning:hover {
-    border-color: var(--accent-warning);
-}
+        /* Warning card → orange border on hover */
+        .sensor-item.warning:hover {
+            border-color: var(--accent-warning);
+        }
 
-/* Critical card → red border on hover */
-.sensor-item.critical:hover {
-    border-color: var(--accent-danger);
-}
+        /* Critical card → red border on hover */
+        .sensor-item.critical:hover {
+            border-color: var(--accent-danger);
+        }
 
         .sensor-header {
             display: flex;
@@ -762,21 +782,21 @@
         }
 
         /* Gentle status glow based on sensor state */
-.sensor-item:not(.warning):not(.critical) {
-    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
-}
+        .sensor-item:not(.warning):not(.critical) {
+            box-shadow: 0 0 0 rgba(34, 197, 94, 0);
+        }
 
-.sensor-item:not(.warning):not(.critical):hover {
-    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.15);
-}
+        .sensor-item:not(.warning):not(.critical):hover {
+            box-shadow: 0 10px 25px rgba(34, 197, 94, 0.15);
+        }
 
-.sensor-item.warning:hover {
-    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
-}
+        .sensor-item.warning:hover {
+            box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
+        }
 
-.sensor-item.critical:hover {
-    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2);
-}
+        .sensor-item.critical:hover {
+            box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2);
+        }
 
 
         .settings-panel {
@@ -1146,30 +1166,30 @@
         }
 
         .notification-content {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.notification-text {
-    flex: 1;
-}
-
-.notification-close {
-    background: transparent;
-    border: none;
-    color: white;
-    font-size: 18px;
-    cursor: pointer;
-    margin-left: 10px;
-    line-height: 1;
-    opacity: 0.9;
-}
-
-.notification-close:hover {
-    opacity: 1;
-    transform: scale(1.1);
-}
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .notification-text {
+            flex: 1;
+        }
+
+        .notification-close {
+            background: transparent;
+            border: none;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+            margin-left: 10px;
+            line-height: 1;
+            opacity: 0.9;
+        }
+
+        .notification-close:hover {
+            opacity: 1;
+            transform: scale(1.1);
+        }
 
 
         .notification.show {
@@ -1368,50 +1388,51 @@
         }
 
         /* --- END OF CTA INTERACTIVE ENHANCEMENTS --- */
-           /* --- Cursor Trail Container --- */
-.circle-container {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 999999;
-}
-
-/* --- Individual Trail Circles --- */
-.cursor-circle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #ff8c00;
-  box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
-  transform: translate(-50%, -50%);
-  will-change: transform;
-  mix-blend-mode: screen;
-  transition: transform 0.1s ease-out;
-}
-
-/* --- The Leading "Head" Circle --- */
-.cursor-circle:first-child {
-  width: 14px;
-  height: 14px;
-  background-color: #ffcc00;
-  box-shadow:
-    0 0 20px #ff8c00,
-    0 0 40px rgba(255, 140, 0, 0.5);
-}
-
-/* --- Interaction States --- */
-.cursor-clicking {
-  transform: translate(-50%, -50%) scale(2.5) !important;
-  background-color: #ffffff !important;
-  box-shadow: 0 0 30px #ffffff !important;
-}
-
-.cursor-hovering {
-  transform: translate(-50%, -50%) scale(1.8);
-  background-color: #22c55e; /* AgriTech green */
-  box-shadow: 0 0 20px #22c55e;
-}
+        /* --- Cursor Trail Container --- */
+        .circle-container {
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 999999;
+        }
+
+        /* --- Individual Trail Circles --- */
+        .cursor-circle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #ff8c00;
+            box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
+            transform: translate(-50%, -50%);
+            will-change: transform;
+            mix-blend-mode: screen;
+            transition: transform 0.1s ease-out;
+        }
+
+        /* --- The Leading "Head" Circle --- */
+        .cursor-circle:first-child {
+            width: 14px;
+            height: 14px;
+            background-color: #ffcc00;
+            box-shadow:
+                0 0 20px #ff8c00,
+                0 0 40px rgba(255, 140, 0, 0.5);
+        }
+
+        /* --- Interaction States --- */
+        .cursor-clicking {
+            transform: translate(-50%, -50%) scale(2.5) !important;
+            background-color: #ffffff !important;
+            box-shadow: 0 0 30px #ffffff !important;
+        }
+
+        .cursor-hovering {
+            transform: translate(-50%, -50%) scale(1.8);
+            background-color: #22c55e;
+            /* AgriTech green */
+            box-shadow: 0 0 20px #22c55e;
+        }
     </style>
 </head>
 
@@ -1861,8 +1882,8 @@ <h4>Thresholds</h4>
     <button class="scroll-btn" id="scrollBtn" title="Scroll">
         <i class="fas fa-arrow-down" id="scrollIcon"></i>
     </button>
-        <!-- Cursor Trail -->
-<div class="circle-container" id="cursorTrail"></div>
+    <!-- Cursor Trail -->
+    <div class="circle-container" id="cursorTrail"></div>
     <script>
         const scrollBtn = document.getElementById("scrollBtn");
         const scrollIcon = document.getElementById("scrollIcon");
@@ -2081,19 +2102,19 @@ <h4>Thresholds</h4>
 
         // Notification System
         // Notification System (UPDATED with Close Button + Better Dismiss)
-function showNotification(message, type = 'success') {
-    const notification = document.createElement('div');
-    notification.className = `notification ${type}`;
-
-    const icons = {
-        success: 'fa-check-circle',
-        warning: 'fa-exclamation-triangle',
-        danger: 'fa-exclamation-circle',
-        info: 'fa-info-circle'
-    };
-
-    // Create content wrapper
-    notification.innerHTML = `
+        function showNotification(message, type = 'success') {
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+
+            const icons = {
+                success: 'fa-check-circle',
+                warning: 'fa-exclamation-triangle',
+                danger: 'fa-exclamation-circle',
+                info: 'fa-info-circle'
+            };
+
+            // Create content wrapper
+            notification.innerHTML = `
         <div class="notification-content">
             <i class="fas ${icons[type]}"></i>
             <span class="notification-text">${message}</span>
@@ -2101,28 +2122,28 @@ <h4>Thresholds</h4>
         </div>
     `;
 
-    document.body.appendChild(notification);
-
-    // Show animation
-    setTimeout(() => {
-        notification.classList.add('show');
-    }, 100);
+            document.body.appendChild(notification);
 
-    // Close button logic (NEW)
-    const closeBtn = notification.querySelector('.notification-close');
-    closeBtn.addEventListener('click', () => {
-        notification.classList.remove('show');
-        setTimeout(() => notification.remove(), 300);
-    });
+            // Show animation
+            setTimeout(() => {
+                notification.classList.add('show');
+            }, 100);
+
+            // Close button logic (NEW)
+            const closeBtn = notification.querySelector('.notification-close');
+            closeBtn.addEventListener('click', () => {
+                notification.classList.remove('show');
+                setTimeout(() => notification.remove(), 300);
+            });
 
-    // Auto dismiss (still keeps UX smooth)
-    setTimeout(() => {
-        if (notification.parentElement) {
-            notification.classList.remove('show');
-            setTimeout(() => notification.remove(), 300);
+            // Auto dismiss (still keeps UX smooth)
+            setTimeout(() => {
+                if (notification.parentElement) {
+                    notification.classList.remove('show');
+                    setTimeout(() => notification.remove(), 300);
+                }
+            }, 4000);
         }
-    }, 4000);
-}
 
 
         // Sensor Time Updates
@@ -2188,12 +2209,12 @@ <h4>Thresholds</h4>
 
             // Observe all cards for animation
             // Observe cards for animation (EXCLUDE sensor-item to preserve CSS animation)
-document.querySelectorAll('.feature-card, .metric-card').forEach(card => {
-    card.style.opacity = '0';
-    card.style.transform = 'translateY(20px)';
-    card.style.transition = 'all 0.6s ease';
-    observer.observe(card);
-});
+            document.querySelectorAll('.feature-card, .metric-card').forEach(card => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = 'all 0.6s ease';
+                observer.observe(card);
+            });
 
 
             // Simulate some initial alerts
@@ -2267,67 +2288,66 @@ <h4>Thresholds</h4>
         }
 
         window.onload = initTooltips;
-         // --- Cursor Trailing Effect ---
-const container = document.getElementById('cursorTrail');
-const circleCount = 12;
-const circles = [];
-
-let mouseX = 0;
-let mouseY = 0;
-
-// Create circles
-for (let i = 0; i < circleCount; i++) {
-    const circle = document.createElement('div');
-    circle.classList.add('cursor-circle');
-    container.appendChild(circle);
-    circles.push({ el: circle, x: 0, y: 0 });
-}
-
-// Mouse move
-document.addEventListener('mousemove', (e) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-});
-
-// Click effects
-document.addEventListener('mousedown', () => {
-    circles.forEach(c => c.el.classList.add('cursor-clicking'));
-});
-document.addEventListener('mouseup', () => {
-    circles.forEach(c => c.el.classList.remove('cursor-clicking'));
-});
-
-// Hover effects on interactive elements
-document.addEventListener('mouseover', (e) => {
-    if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
-        circles.forEach(c => c.el.classList.add('cursor-hovering'));
-    }
-});
-document.addEventListener('mouseout', (e) => {
-    if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
-        circles.forEach(c => c.el.classList.remove('cursor-hovering'));
-    }
-});
-
-// Animate trailing effect
-function animateCursor() {
-    let x = mouseX;
-    let y = mouseY;
-
-    circles.forEach((circle) => {
-        circle.x += (x - circle.x) * 0.25;
-        circle.y += (y - circle.y) * 0.25;
-
-        circle.el.style.left = circle.x + 'px';
-        circle.el.style.top = circle.y + 'px';
-
-        x = circle.x;
-        y = circle.y;
-    });
-
-    requestAnimationFrame(animateCursor);
-}
-animateCursor();
+        // --- Cursor Trailing Effect ---
+        const container = document.getElementById('cursorTrail');
+        const circleCount = 12;
+        const circles = [];
+        let mouseX = 0;
+        let mouseY = 0;
+
+        // Create circles
+        for (let i = 0; i < circleCount; i++) {
+            const circle = document.createElement('div');
+            circle.classList.add('cursor-circle');
+            container.appendChild(circle);
+            circles.push({ el: circle, x: 0, y: 0 });
+        }
+
+        // Mouse move
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+        });
+
+        // Click effects
+        document.addEventListener('mousedown', () => {
+            circles.forEach(c => c.el.classList.add('cursor-clicking'));
+        });
+        document.addEventListener('mouseup', () => {
+            circles.forEach(c => c.el.classList.remove('cursor-clicking'));
+        });
+
+        // Hover effects on interactive elements
+        document.addEventListener('mouseover', (e) => {
+            if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
+                circles.forEach(c => c.el.classList.add('cursor-hovering'));
+            }
+        });
+        document.addEventListener('mouseout', (e) => {
+            if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
+                circles.forEach(c => c.el.classList.remove('cursor-hovering'));
+            }
+        });
+
+        // Animate trailing effect
+        function animateCursor() {
+            let x = mouseX;
+            let y = mouseY;
+
+            circles.forEach((circle) => {
+                circle.x += (x - circle.x) * 0.25;
+                circle.y += (y - circle.y) * 0.25;
+
+                circle.el.style.left = circle.x + 'px';
+                circle.el.style.top = circle.y + 'px';
+
+                x = circle.x;
+                y = circle.y;
+            });
+
+            requestAnimationFrame(animateCursor);
+        }
+        animateCursor();
     </script>
     <script src="theme.js"></script>
     <script src="auth.js"></script>
diff --git a/supply-chain.html b/supply-chain.html
index 9b500f1e..89f474b5 100644
--- a/supply-chain.html
+++ b/supply-chain.html
@@ -40,6 +40,7 @@
             --shadow: rgba(0, 0, 0, 0.4);
             --accent-blue: #818cf8;
         }
+
         /* ================= THEME VARIABLES ================= */
         :root {
             /* existing light mode colors (unchanged) */
@@ -50,34 +51,34 @@
             --heading: #2c3e50;
         }
 
-            /* ================= THEME VARIABLES ================= */
-            :root {
-                /* existing light mode colors (unchanged) */
-                --bg-gradient: linear-gradient(135deg, #4877b8 0%, #0e745e 100%);
-                --card-bg: rgba(210, 204, 212, 0.95);
-                --header-bg: rgba(190, 208, 212, 0.95);
-                --text-main: #333;
-                --heading: #2c3e50;
-            }
+        /* ================= THEME VARIABLES ================= */
+        :root {
+            /* existing light mode colors (unchanged) */
+            --bg-gradient: linear-gradient(135deg, #4877b8 0%, #0e745e 100%);
+            --card-bg: rgba(210, 204, 212, 0.95);
+            --header-bg: rgba(190, 208, 212, 0.95);
+            --text-main: #333;
+            --heading: #2c3e50;
+        }
 
-            /* Enhanced dark mode – only affects when data-theme="dark" */
-            [data-theme="dark"] {
-                --bg-gradient: linear-gradient(135deg, #020617 0%, #0b1120 40%, #022c22 100%);
-                --card-bg: rgba(15, 23, 42, 0.92);
-                --header-bg: rgba(15, 23, 42, 0.98);
-                --text-main: #e5e7eb;
-                --heading: #f9fafb;
-            }
+        /* Enhanced dark mode – only affects when data-theme="dark" */
+        [data-theme="dark"] {
+            --bg-gradient: linear-gradient(135deg, #020617 0%, #0b1120 40%, #022c22 100%);
+            --card-bg: rgba(15, 23, 42, 0.92);
+            --header-bg: rgba(15, 23, 42, 0.98);
+            --text-main: #e5e7eb;
+            --heading: #f9fafb;
+        }
+
+        body {
+            font-family: 'Open Sans', sans-serif;
+            line-height: 1.6;
+            min-height: 100vh;
+            background: var(--bg-gradient);
+            color: var(--text-main);
+            transition: background 0.4s ease, color 0.3s ease;
+        }
 
-            body {
-                font-family: 'Open Sans', sans-serif;
-                line-height: 1.6;
-                min-height: 100vh;
-                background: var(--bg-gradient);
-                color: var(--text-main);
-                transition: background 0.4s ease, color 0.3s ease;
-            }
-        
 
         .header,
         .supply-chain-flow,
@@ -149,54 +150,45 @@
             box-shadow: 0 10px 30px rgba(15, 23, 42, 0.8);
         }
 
-        /* Theme toggle button – fixed to support icon + text */
-.theme-toggle {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-
-    min-width: 56px;
-    height: 56px;
-    padding: 0 14px;
-
-    border-radius: 50px;
-    border: none;
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: initial !important;
-    font-weight: 600;
-
-    z-index: 1200;
-    background: #111827;
-    color: #f9fafb;
-
-    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.8);
-    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
-}
-.theme-toggle i {
-    font-size: 2.2rem !important;    /* increase icon size */
-    line-height: 1;
-}
-.theme-toggle {
-    width: 56px !important;
-    height: 56px !important;
-    padding: 0 !important;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.theme-toggle span {
-    display: none;
-}
+
+        .theme-toggle i {
+            color: #fbbf24 !important;
+            /* Vibrant Sun Yellow */
+            font-weight: 700;
+            font-size: 0.95rem;
+            text-transform: capitalize;
+        }
+
+        .theme-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 22px;
+            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
+            /* Premium Indigo */
+            border: 1px solid rgba(255, 255, 255, 0.15) !important;
+            border-radius: 999px !important;
+            /* Standardized Pill Shape */
+            cursor: pointer;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+            /* Atmospheric Blue Glow */
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 1100;
+        }
+
+        .theme-toggle span {
+            color: #fbbf24 !important;
+            /* Vibrant Sun Yellow */
+            font-weight: 700;
+            font-size: 0.95rem;
+            text-transform: capitalize;
+        }
 
 
         .theme-toggle:hover {
-            transform: scale(1.08);
-            box-shadow: 0 14px 35px rgba(15, 23, 42, 0.9);
+            transform: scale(1.08) translateY(-2px);
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
+            background: linear-gradient(135deg, #312e81 0%, #3730a3 100%) !important;
         }
 
         [data-theme="dark"] .theme-toggle {
@@ -488,14 +480,16 @@
         }
 
         .progress-bar {
-    width: 100%;
-    height: 18px; /* increased height for text visibility */
-    background: #e9ecef;
-    border-radius: 8px;
-    margin: 15px 0;
-    overflow: hidden;
-    position: relative; /* IMPORTANT */
-}
+            width: 100%;
+            height: 18px;
+            /* increased height for text visibility */
+            background: #e9ecef;
+            border-radius: 8px;
+            margin: 15px 0;
+            overflow: hidden;
+            position: relative;
+            /* IMPORTANT */
+        }
 
         .progress-fill {
             height: 100%;
@@ -503,20 +497,22 @@
             border-radius: 3px;
             transition: width 0.3s ease;
         }
+
         .progress-fill {
-    position: relative; /* ADD THIS LINE */
-}
-
-.progress-text {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 11px;
-    font-weight: 700;
-    color: white;
-    pointer-events: none;
-}
+            position: relative;
+            /* ADD THIS LINE */
+        }
+
+        .progress-text {
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 11px;
+            font-weight: 700;
+            color: white;
+            pointer-events: none;
+        }
 
         .metrics-row {
             display: grid;
@@ -602,51 +598,52 @@
                 grid-template-columns: 1fr;
             }
         }
+
         /* --- Cursor Trail Container --- */
-.circle-container {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 999999;
-}
-
-/* --- Individual Trail Circles --- */
-.cursor-circle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #ff8c00;
-  box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
-  transform: translate(-50%, -50%);
-  will-change: transform;
-  mix-blend-mode: screen;
-  transition: transform 0.1s ease-out;
-}
-
-/* --- The Leading "Head" Circle --- */
-.cursor-circle:first-child {
-  width: 14px;
-  height: 14px;
-  background-color: #ffcc00;
-  box-shadow:
-    0 0 20px #ff8c00,
-    0 0 40px rgba(255, 140, 0, 0.5);
-}
-
-/* --- Interaction States --- */
-.cursor-clicking {
-  transform: translate(-50%, -50%) scale(2.5) !important;
-  background-color: #ffffff !important;
-  box-shadow: 0 0 30px #ffffff !important;
-}
-
-.cursor-hovering {
-  transform: translate(-50%, -50%) scale(1.8);
-  background-color: #22c55e; /* AgriTech green */
-  box-shadow: 0 0 20px #22c55e;
-}
+        .circle-container {
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 999999;
+        }
 
+        /* --- Individual Trail Circles --- */
+        .cursor-circle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #ff8c00;
+            box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
+            transform: translate(-50%, -50%);
+            will-change: transform;
+            mix-blend-mode: screen;
+            transition: transform 0.1s ease-out;
+        }
+
+        /* --- The Leading "Head" Circle --- */
+        .cursor-circle:first-child {
+            width: 14px;
+            height: 14px;
+            background-color: #ffcc00;
+            box-shadow:
+                0 0 20px #ff8c00,
+                0 0 40px rgba(255, 140, 0, 0.5);
+        }
+
+        /* --- Interaction States --- */
+        .cursor-clicking {
+            transform: translate(-50%, -50%) scale(2.5) !important;
+            background-color: #ffffff !important;
+            box-shadow: 0 0 30px #ffffff !important;
+        }
+
+        .cursor-hovering {
+            transform: translate(-50%, -50%) scale(1.8);
+            background-color: #22c55e;
+            /* AgriTech green */
+            box-shadow: 0 0 20px #22c55e;
+        }
     </style>
     <link rel="stylesheet" href="style.css">
 </head>
@@ -656,9 +653,9 @@
         <a href="index.html" class="nav-back">
             <i class="fas fa-arrow-left"></i> Back to Home
         </a>
-        <button class="theme-toggle" id="theme-toggle">
-            <i class="fas fa-moon moon-icon"></i>
-            <i class="fas fa-sun sun-icon"></i>
+        <button class="theme-toggle" id="themeToggleHub">
+            <i class="fas fa-sun" id="hubThemeIcon"></i>
+            <span id="hubThemeText">Light</span>
         </button>
     </div>
 
@@ -770,10 +767,10 @@ <h2><i class="fas fa-map-marked-alt"></i> Live Shipment Tracking</h2>
                     <p><strong>To:</strong> Delhi Market</p>
                     <p><strong>Product:</strong> Fresh Vegetables</p>
                     <div class="progress-bar">
-    <div class="progress-fill" style="width: 65%">
-        <span class="progress-text">65%</span>
-    </div>
-</div>
+                        <div class="progress-fill" style="width: 65%">
+                            <span class="progress-text">65%</span>
+                        </div>
+                    </div>
                     <p><small>ETA: Tomorrow 10:00 AM</small></p>
                 </div>
 
@@ -786,10 +783,10 @@ <h2><i class="fas fa-map-marked-alt"></i> Live Shipment Tracking</h2>
                     <p><strong>To:</strong> Mumbai Market</p>
                     <p><strong>Product:</strong> Fruits & Grains</p>
                     <div class="progress-bar">
-    <div class="progress-fill" style="width: 100%">
-        <span class="progress-text">100%</span>
-    </div>
-</div>
+                        <div class="progress-fill" style="width: 100%">
+                            <span class="progress-text">100%</span>
+                        </div>
+                    </div>
                     <p><small>Delivered: Today 08:30 AM</small></p>
                 </div>
 
@@ -801,11 +798,11 @@ <h2><i class="fas fa-map-marked-alt"></i> Live Shipment Tracking</h2>
                     <p><strong>From:</strong> Rajasthan Farms</p>
                     <p><strong>To:</strong> Jaipur Market</p>
                     <p><strong>Product:</strong> Pulses & Grains</p>
-                   <div class="progress-bar">
-    <div class="progress-fill" style="width: 25%">
-        <span class="progress-text">25%</span>
-    </div>
-</div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: 25%">
+                            <span class="progress-text">25%</span>
+                        </div>
+                    </div>
                     <p><small>Scheduled: Tomorrow 06:00 AM</small></p>
                 </div>
 
@@ -818,10 +815,10 @@ <h2><i class="fas fa-map-marked-alt"></i> Live Shipment Tracking</h2>
                     <p><strong>To:</strong> Bangalore Market</p>
                     <p><strong>Product:</strong> Rice & Spices</p>
                     <div class="progress-bar">
-    <div class="progress-fill" style="width: 80%">
-        <span class="progress-text">80%</span>
-    </div>
-</div>
+                        <div class="progress-fill" style="width: 80%">
+                            <span class="progress-text">80%</span>
+                        </div>
+                    </div>
                     <p><small>ETA: Tonight 11:00 PM</small></p>
                 </div>
             </div>
@@ -835,8 +832,8 @@ <h2>Optimize Your Supply Chain Today</h2>
             <a href="#" class="cta-button">Contact Support</a>
         </div>
     </div>
-     <!-- Cursor Trail -->
-<div class="circle-container" id="cursorTrail"></div>
+    <!-- Cursor Trail -->
+    <div class="circle-container" id="cursorTrail"></div>
 
     <script>
         // 1. Theme Toggle Logic
@@ -876,21 +873,21 @@ <h2>Optimize Your Supply Chain Today</h2>
 
             // Progress Bars
             const progressBars = document.querySelectorAll('.progress-fill');
-progressBars.forEach((bar, index) => {
-    const width = bar.style.width;
-    
-    // Set percentage text dynamically
-    const textEl = bar.querySelector('.progress-text');
-    if (textEl) {
-        textEl.textContent = width;
-    }
-
-    // Animate progress
-    bar.style.width = '0%';
-    setTimeout(() => {
-        bar.style.width = width;
-    }, index * 200);
-});
+            progressBars.forEach((bar, index) => {
+                const width = bar.style.width;
+
+                // Set percentage text dynamically
+                const textEl = bar.querySelector('.progress-text');
+                if (textEl) {
+                    textEl.textContent = width;
+                }
+
+                // Animate progress
+                bar.style.width = '0%';
+                setTimeout(() => {
+                    bar.style.width = width;
+                }, index * 200);
+            });
 
             // Card Entrance
             const cards = document.querySelectorAll('.service-card, .shipment-card');
@@ -916,13 +913,13 @@ <h2>Optimize Your Supply Chain Today</h2>
                     const currentWidth = parseInt(progressBar.style.width) || 0;
                     if (currentWidth < 100) {
                         const newWidth = Math.min(100, currentWidth + Math.floor(Math.random() * 10 + 5)) + '%';
-progressBar.style.width = newWidth;
+                        progressBar.style.width = newWidth;
 
-// Update percentage text dynamically
-const textEl = progressBar.querySelector('.progress-text');
-if (textEl) {
-    textEl.textContent = newWidth;
-}
+                        // Update percentage text dynamically
+                        const textEl = progressBar.querySelector('.progress-text');
+                        if (textEl) {
+                            textEl.textContent = newWidth;
+                        }
                     }
                 }
             }
@@ -930,130 +927,161 @@ <h2>Optimize Your Supply Chain Today</h2>
 
         setInterval(simulateShipmentUpdate, 15000);
         // --- Cursor Trailing Effect ---
-const container = document.getElementById('cursorTrail');
-const circleCount = 12;
-const circles = [];
-
-let mouseX = 0;
-let mouseY = 0;
-
-// Create circles
-for (let i = 0; i < circleCount; i++) {
-    const circle = document.createElement('div');
-    circle.classList.add('cursor-circle');
-    container.appendChild(circle);
-    circles.push({ el: circle, x: 0, y: 0 });
-}
-
-// Mouse move
-document.addEventListener('mousemove', (e) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-});
-
-// Click effects
-document.addEventListener('mousedown', () => {
-    circles.forEach(c => c.el.classList.add('cursor-clicking'));
-});
-document.addEventListener('mouseup', () => {
-    circles.forEach(c => c.el.classList.remove('cursor-clicking'));
-});
-
-// Hover effects on interactive elements
-document.addEventListener('mouseover', (e) => {
-    if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
-        circles.forEach(c => c.el.classList.add('cursor-hovering'));
-    }
-});
-document.addEventListener('mouseout', (e) => {
-    if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
-        circles.forEach(c => c.el.classList.remove('cursor-hovering'));
-    }
-});
-
-// Animate trailing effect
-function animateCursor() {
-    let x = mouseX;
-    let y = mouseY;
-
-    circles.forEach((circle) => {
-        circle.x += (x - circle.x) * 0.25;
-        circle.y += (y - circle.y) * 0.25;
-
-        circle.el.style.left = circle.x + 'px';
-        circle.el.style.top = circle.y + 'px';
-
-        x = circle.x;
-        y = circle.y;
-    });
-
-    requestAnimationFrame(animateCursor);
-}
-animateCursor();
+        const container = document.getElementById('cursorTrail');
+        const circleCount = 12;
+        const circles = [];
+
+        let mouseX = 0;
+        let mouseY = 0;
+
+        // Create circles
+        for (let i = 0; i < circleCount; i++) {
+            const circle = document.createElement('div');
+            circle.classList.add('cursor-circle');
+            container.appendChild(circle);
+            circles.push({ el: circle, x: 0, y: 0 });
+        }
 
+        // Mouse move
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+        });
+
+        // Click effects
+        document.addEventListener('mousedown', () => {
+            circles.forEach(c => c.el.classList.add('cursor-clicking'));
+        });
+        document.addEventListener('mouseup', () => {
+            circles.forEach(c => c.el.classList.remove('cursor-clicking'));
+        });
+
+        // Hover effects on interactive elements
+        document.addEventListener('mouseover', (e) => {
+            if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
+                circles.forEach(c => c.el.classList.add('cursor-hovering'));
+            }
+        });
+        document.addEventListener('mouseout', (e) => {
+            if (e.target.closest('a, button, .cta-button, .service-card, .shipment-card')) {
+                circles.forEach(c => c.el.classList.remove('cursor-hovering'));
+            }
+        });
+
+        // Animate trailing effect
+        function animateCursor() {
+            let x = mouseX;
+            let y = mouseY;
+
+            circles.forEach((circle) => {
+                circle.x += (x - circle.x) * 0.25;
+                circle.y += (y - circle.y) * 0.25;
+
+                circle.el.style.left = circle.x + 'px';
+                circle.el.style.top = circle.y + 'px';
+
+                x = circle.x;
+                y = circle.y;
+            });
+
+            requestAnimationFrame(animateCursor);
+        }
+        animateCursor();
+
+    </script>
+    <!-- ===== Universal Back To Top Button (All Pages) ===== -->
+    <style>
+        #globalBackToTop {
+            position: fixed;
+            bottom: 25px;
+            /* prevents overlap with chatbot/floating icons */
+            right: 25px;
+            z-index: 9999;
+            display: none;
+            background: #2ecc71;
+            color: #ffffff;
+            border: none;
+            border-radius: 50%;
+            width: 52px;
+            height: 52px;
+            font-size: 22px;
+            font-weight: bold;
+            cursor: pointer;
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+            transition: opacity 0.3s ease, transform 0.2s ease;
+        }
+
+        #globalBackToTop:hover {
+            transform: scale(1.12);
+            background: #27ae60;
+        }
+
+        @media (max-width: 768px) {
+            #globalBackToTop {
+                bottom: 50px;
+                /* better spacing on mobile */
+                right: 18px;
+                width: 48px;
+                height: 48px;
+                font-size: 20px;
+            }
+        }
+    </style>
+
+    <button id="globalBackToTop" title="Back to Top">↑</button>
+
+    <script>
+        (function () {
+            const btn = document.getElementById("globalBackToTop");
+
+            // Show button after scrolling down
+            window.addEventListener("scroll", function () {
+                if (window.scrollY > 300) {
+                    btn.style.display = "block";
+                } else {
+                    btn.style.display = "none";
+                }
+            });
+
+            // Smooth scroll to top on click
+            btn.addEventListener("click", function () {
+                window.scrollTo({
+                    top: 0,
+                    behavior: "smooth"
+                });
+            });
+        })();
+
+        /* ============================================================
+         FEATURE: Animated Theme Toggle (Word Swap Logic)
+         ============================================================ */
+        (function () {
+            const hubToggle = document.getElementById("themeToggleHub");
+            const hubIcon = document.getElementById("hubThemeIcon");
+            const hubText = document.getElementById("hubThemeText");
+
+            if (hubToggle) {
+                hubToggle.addEventListener("click", () => {
+                    const currentTheme = document.documentElement.getAttribute("data-theme");
+                    const newTheme = currentTheme === "light" ? "dark" : "light";
+
+                    // Toggle Theme and Persist
+                    document.documentElement.setAttribute("data-theme", newTheme);
+                    localStorage.setItem("agritech-theme", newTheme);
+
+                    // Requirement: Word & Icon Swap Logic
+                    if (newTheme === "light") {
+                        hubIcon.className = "fas fa-moon";
+                        hubText.innerText = "Dark"; // Showing current target action
+                    } else {
+                        hubIcon.className = "fas fa-sun";
+                        hubText.innerText = "Light"; // Showing current target action
+                    }
+                });
+            }
+        })();
     </script>
-<!-- ===== Universal Back To Top Button (All Pages) ===== -->
-<style>
-  #globalBackToTop {
-    position: fixed;
-    bottom: 25px; /* prevents overlap with chatbot/floating icons */
-    right: 25px;
-    z-index: 9999;
-    display: none;
-    background: #2ecc71;
-    color: #ffffff;
-    border: none;
-    border-radius: 50%;
-    width: 52px;
-    height: 52px;
-    font-size: 22px;
-    font-weight: bold;
-    cursor: pointer;
-    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
-    transition: opacity 0.3s ease, transform 0.2s ease;
-  }
-
-  #globalBackToTop:hover {
-    transform: scale(1.12);
-    background: #27ae60;
-  }
-
-  @media (max-width: 768px) {
-    #globalBackToTop {
-      bottom: 50px; /* better spacing on mobile */
-      right: 18px;
-      width: 48px;
-      height: 48px;
-      font-size: 20px;
-    }
-  }
-</style>
-
-<button id="globalBackToTop" title="Back to Top">↑</button>
-
-<script>
-  (function () {
-    const btn = document.getElementById("globalBackToTop");
-
-    // Show button after scrolling down
-    window.addEventListener("scroll", function () {
-      if (window.scrollY > 300) {
-        btn.style.display = "block";
-      } else {
-        btn.style.display = "none";
-      }
-    });
-
-    // Smooth scroll to top on click
-    btn.addEventListener("click", function () {
-      window.scrollTo({
-        top: 0,
-        behavior: "smooth"
-      });
-    });
-  })();
-</script>
-<!-- ===== End Back To Top Button ===== -->
+    <!-- ===== End Back To Top Button ===== -->
 
 </body>