18042026 index query

includes/stats_banner.php

@@ -19,13 +19,82 @@
     </div>
   </div>
   <style>
-  .stats-inner1 {
-            max-width: 1100px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 0;
-            position: relative;
-            z-index: 2;
-        }
-        </style>
+    .stats-bar {
+      width: 100%;
+      padding: 50px 0;
+      position: relative;
+    }
+
+    .stats-inner1 {
+      max-width: 1100px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 30px;
+      position: relative;
+      z-index: 2;
+    }
+
+    .stat-item {
+      text-align: center;
+      transition: transform 0.3s ease;
+    }
+
+    .stat-num {
+      font-size: clamp(40px, 6vw, 70px);
+      font-weight: 900;
+      color: #111;
+      line-height: 1;
+      margin-bottom: 8px;
+      font-family: "Manrope", sans-serif;
+      letter-spacing: -2px;
+    }
+
+    .stat-num span {
+      font-size: 0.5em;
+      color: #E31E24;
+      margin-left: 5px;
+      vertical-align: middle;
+    }
+
+    .stat-lbl {
+      font-size: clamp(13px, 1.5vw, 16px);
+      font-weight: 700;
+      color: #64748B;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+    }
+
+    /* Tablet Scale (1024px) */
+    @media (max-width: 1024px) {
+      .stats-inner1 {
+        max-width: 90%;
+        gap: 20px;
+      }
+    }
+
+    /* Mobile Stack (767px) */
+    @media (max-width: 767px) {
+      .stats-bar {
+        padding: 40px 0;
+      }
+      .stats-inner1 {
+        grid-template-columns: 1fr;
+        gap: 45px;
+      }
+      .stat-num {
+        font-size: 56px; /* Explicit size for mobile for clarity */
+      }
+    }
+
+    /* Small Phone Scaling (480px) */
+    @media (max-width: 480px) {
+      .stat-num {
+        font-size: 44px;
+      }
+      .stat-lbl {
+        font-size: 11px;
+        letter-spacing: 1px;
+      }
+    }
+  </style>