update

gnx-react/public/styles/pages/_support-center.scss

@@ -192,14 +192,84 @@
   &__features {
     margin-top: 4rem;
 
+    .row {
+      row-gap: 1.5rem !important;
+
+      @media (min-width: 768px) {
+        row-gap: 2rem !important;
+      }
+
+      @media (min-width: 992px) {
+        row-gap: 2.5rem !important;
+      }
+    }
+
+    // Ensure all columns have the same height
+    [class*="col-"] {
+      display: flex;
+      flex-direction: column;
+    }
+
     .feature-item {
       text-align: center;
-      padding: 2rem;
+      padding: 2rem 1.5rem;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 12px;
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       transition: all 0.3s ease;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      text-decoration: none;
+      color: inherit;
+      flex: 1;
+      min-height: 200px;
+
+      // Ensure consistent sizing on all screens
+      @media (max-width: 575px) {
+        min-height: 180px;
+        padding: 1.5rem 1rem;
+      }
+
+      @media (min-width: 576px) and (max-width: 767px) {
+        min-height: 190px;
+      }
+
+      @media (min-width: 768px) and (max-width: 991px) {
+        min-height: 200px;
+      }
+
+      @media (min-width: 992px) {
+        min-height: 210px;
+      }
+
+      &.link-item {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: none;
+          color: inherit;
+        }
+      }
+
+      &.clickable {
+        cursor: pointer;
+        
+        &:hover {
+          transform: translateY(-8px) scale(1.02);
+          background: rgba(255, 255, 255, 0.12);
+          border-color: rgba(218, 165, 32, 0.5);
+          box-shadow: 0 10px 30px rgba(218, 165, 32, 0.2);
+        }
+
+        &:active {
+          transform: translateY(-6px) scale(1.01);
+        }
+      }
 
       &:hover {
         transform: translateY(-5px);
@@ -210,7 +280,8 @@
       .feature-icon {
         width: 70px;
         height: 70px;
-        margin: 0 auto 1.5rem;
+        margin: 0 0 1.5rem 0;
+        flex-shrink: 0;
         background: linear-gradient(135deg, var(--enterprise-gold), #d4af37);
         border-radius: 50%;
         display: flex;
@@ -218,19 +289,37 @@
         justify-content: center;
         font-size: 1.8rem;
         color: #0f172a;
+        transition: all 0.3s ease;
+
+        @media (max-width: 575px) {
+          width: 60px;
+          height: 60px;
+          font-size: 1.5rem;
+          margin-bottom: 1rem;
+        }
       }
 
       h3 {
         font-size: 1.25rem;
         color: #ffffff;
-        margin-bottom: 0.5rem;
+        margin: 0 0 0.5rem 0;
         font-weight: 600;
+        line-height: 1.3;
+
+        @media (max-width: 575px) {
+          font-size: 1.1rem;
+        }
       }
 
       p {
         color: rgba(255, 255, 255, 0.7);
         margin: 0;
         font-size: 0.95rem;
+        line-height: 1.5;
+
+        @media (max-width: 575px) {
+          font-size: 0.9rem;
+        }
       }
     }
   }