Update src/style.css

src/style.css

@@ -41,7 +41,7 @@ p, li {
   100% { background-position: 0% 50%; }
 }
 
-/* === Cards === */
+/* === Cards with Animated Border === */
 .stat-cards {
   display: flex;
   justify-content: space-between;
@@ -49,23 +49,55 @@ p, li {
   margin: 2rem 0;
   flex-wrap: wrap;
 }
+
+.card-container {
+  position: relative;
+  width: 100%;
+  max-width: 260px;
+  height: 240px;
+}
+
+.card-background {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  background: linear-gradient(270deg, #36BA01, #004c97, #36BA01);
+  background-size: 400% 400%;
+  animation: gradientMove 5s ease infinite;
+  border-radius: 16px;
+  z-index: 0;
+  transition: transform 0.4s ease;
+}
+
+.card-background:hover {
+  transform: scale(1.07);
+}
+
 .stat-card {
-  flex: 1;
-  min-width: 220px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #f1fdf9, #ffffff);
   padding: 1.5rem;
   border-radius: 16px;
   box-shadow: 0 6px 18px rgba(0,0,0,0.06);
   text-align: center;
   transition: transform 0.3s ease;
-  position: relative;
+  z-index: 1;
 }
+
 .stat-card:hover {
-  transform: scale(1.03);
+  transform: scale(0.99);
 }
+
 .stat-icon {
   font-size: 30px;
   margin-bottom: 0.4rem;
+  color: #004c97;
 }
 .stat-label {
   color: #666;
@@ -76,6 +108,7 @@ p, li {
   font-weight: bold;
   color: #004c97;
 }
+
 .stat-change {
   font-size: 0.9rem;
   font-weight: 500;