UX adjustments to the contact buttons on main page

static/css/main.css

@@ -546,12 +546,12 @@ a:hover {
 .secondary-cards {
     display: grid;
     gap: 24px;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
 }
 
 .secondary-card {
     background: var(--card-background);
-    border: 1px solid var(--border);
+    border: 3px solid var(--text-primary);
     border-radius: 12px;
     padding: 24px;
     text-align: center;
@@ -565,8 +565,12 @@ a:hover {
 
 .secondary-card h4 {
     font-size: 1.1rem;
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
     margin-bottom: 0.5rem;
+    font-weight: 600;
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
 }
 
 .secondary-card p {
@@ -581,7 +585,7 @@ a:hover {
     background: transparent;
     color: var(--text-primary);
     text-decoration: none;
-    border: 1px solid var(--border);
+    border: 2px solid var(--text-primary);
     border-radius: 16px;
     font-weight: 500;
     font-size: 14px;
@@ -859,6 +863,32 @@ a:hover {
         grid-template-columns: 1fr;
     }
     
+    .secondary-cards {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+    
+    .secondary-actions {
+        margin: 3rem 0;
+        padding: 2rem;
+    }
+    
+    .secondary-actions h3 {
+        font-size: 2.5rem;
+    }
+    
+    .secondary-card {
+        padding: 24px;
+    }
+    
+    .secondary-card h4 {
+        font-size: 1.5rem;
+    }
+    
+    .secondary-card p {
+        font-size: 1.1rem;
+    }
+    
     .footer-content {
         grid-template-columns: 1fr;
         gap: 32px;