Fix icon hover colors, text alignment, and UI improvements

css/pages.css

@@ -313,11 +313,25 @@
 
 .values-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
     margin-top: 3rem;
 }
 
+@media (min-width: 768px) {
+    .values-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.75rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .values-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2rem;
+    }
+}
+
 .value-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -372,11 +386,25 @@
 
 .team-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
     margin-top: 3rem;
 }
 
+@media (min-width: 768px) {
+    .team-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.75rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .team-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 2rem;
+    }
+}
+
 .team-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -1561,11 +1589,18 @@
     background: linear-gradient(135deg, rgba(15, 39, 68, 0.8), rgba(10, 22, 40, 0.9));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
-    padding: 3rem;
+    padding: 3rem 3.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 3rem;
+    gap: 2.5rem;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.newsletter-card:hover {
+    border-color: rgba(0, 245, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 245, 255, 0.1);
 }
 
 .newsletter-content {
@@ -1583,6 +1618,8 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    box-shadow: 0 8px 24px rgba(0, 245, 255, 0.2);
+    animation: float 3s ease-in-out infinite;
 }
 
 .newsletter-icon i {
@@ -1590,46 +1627,60 @@
     color: var(--text-white);
 }
 
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+}
+
 .newsletter-text h3 {
     color: var(--text-white);
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
+    font-size: 1.6rem;
+    margin-bottom: 0.6rem;
+    font-weight: 700;
 }
 
 .newsletter-text p {
     color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.5;
 }
 
 .newsletter-form {
     flex: 1;
-    max-width: 500px;
+    max-width: 450px;
+    min-width: 350px;
 }
 
 .newsletter-input-group {
     display: flex;
+    align-items: center;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 30px;
-    padding: 0.25rem;
+    padding: 0.4rem 0.4rem;
     transition: all 0.3s ease;
+    gap: 0.5rem;
 }
 
 .newsletter-input-group:focus-within {
     border-color: var(--accent-cyan);
     background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
 }
 
 .newsletter-input-group input {
     flex: 1;
     border: none;
-    padding: 1rem 1.5rem;
+    padding: 0.9rem 1.5rem;
     font-size: 1rem;
     background: transparent;
     color: var(--text-white);
+    min-width: 0;
 }
 
 .newsletter-input-group input::placeholder {
     color: var(--text-muted);
+    opacity: 0.8;
 }
 
 .newsletter-input-group input:focus {
@@ -1637,15 +1688,31 @@
 }
 
 .newsletter-input-group .btn {
-    padding: 1rem 2rem;
+    padding: 0.9rem 2.2rem;
     white-space: nowrap;
+    flex-shrink: 0;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    background: linear-gradient(135deg, #3b82f6, #0ea5e9);
+    border: none;
+    transition: all 0.3s ease;
+}
+
+.newsletter-input-group .btn:hover {
+    background: linear-gradient(135deg, #2563eb, #0284c7);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(3, 102, 214, 0.3);
 }
 
 .newsletter-note {
     color: var(--text-muted);
-    font-size: 0.8rem;
-    margin-top: 0.75rem;
+    font-size: 0.75rem;
+    margin-top: 0.8rem;
     text-align: right;
+    opacity: 0.9;
+    letter-spacing: 0.3px;
 }
 
 /* ========================
@@ -2149,6 +2216,8 @@
     .newsletter-card {
         flex-direction: column;
         text-align: center;
+        padding: 2rem;
+        gap: 1.5rem;
     }
     
     .newsletter-content {
@@ -2157,6 +2226,21 @@
     
     .newsletter-form {
         max-width: 100%;
+        min-width: 100%;
+    }
+    
+    .newsletter-input-group {
+        flex-wrap: wrap;
+    }
+    
+    .newsletter-input-group input {
+        padding: 0.8rem 1.2rem;
+        font-size: 0.95rem;
+    }
+    
+    .newsletter-input-group .btn {
+        padding: 0.8rem 1.8rem;
+        font-size: 0.95rem;
     }
     
     .newsletter-note {