Fix icon hover colors, text alignment, and UI improvements

css/style.css

@@ -35,8 +35,8 @@
     
     /* Typography */
     --font-primary: 'DM Sans', sans-serif;
-    --font-display: 'Playfair Display', serif;
-    --font-heading: 'Playfair Display', serif;
+    --font-display: 'Space Grotesk', sans-serif;
+    --font-heading: 'Space Grotesk', sans-serif;
 
     /* Spacing */
     --spacing-xs: 0.25rem;
@@ -173,7 +173,7 @@ button {
 
 input, textarea, select {
     font-family: inherit;
-    font-size: inherit;
+    font-size: 16px;
     padding: 0.75rem 1rem;
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md);
@@ -401,13 +401,26 @@ select {
     width: 100%;
     z-index: var(--z-sticky);
     background: transparent;
-    transition: var(--transition-base);
+    transition: background-color 0.3s ease, padding 0.3s ease, var(--transition-base);
 }
 
 .header.scrolled {
     background: rgba(10, 22, 40, 0.95);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-lg);
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+/* Premium UI - let header start transparent */
+body.premium-ui .header {
+    background: transparent;
+    border-bottom: none;
+}
+
+body.premium-ui .header.scrolled {
+    background: rgba(14, 30, 52, 0.94);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }
 
 .nav {
@@ -416,6 +429,12 @@ select {
     justify-content: space-between;
     padding: var(--spacing-md) 0;
     height: 80px;
+    transition: height 0.3s ease, padding 0.3s ease;
+}
+
+.header.scrolled .nav {
+    height: 60px;
+    padding: 10px 0;
 }
 
 .nav-logo {
@@ -430,6 +449,21 @@ select {
     width: auto;
 }
 
+/* Logo Styling */
+.logo-image {
+    display: block;
+    height: 44px;
+    width: auto;
+    max-width: none;
+    object-fit: contain;
+    transition: height 0.3s ease;
+}
+
+/* Scale logo on scroll */
+.header.scrolled .logo-image {
+    height: 36px;
+}
+
 .logo-text {
     font-size: 1.75rem;
     font-weight: 700;
@@ -459,6 +493,7 @@ select {
     font-weight: 500;
     font-size: 0.9375rem;
     padding: var(--spacing-sm) 0;
+    min-height: 44px;
     position: relative;
     display: flex;
     align-items: center;
@@ -526,7 +561,7 @@ select {
 }
 
 .dropdown-menu li a:hover {
-    background: rgba(0, 245, 255, 0.1);
+    background: rgba(14, 165, 233, 0.1);
     color: var(--accent);
 }
 
@@ -862,8 +897,21 @@ select {
 
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-xl);
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+}
+
+@media (min-width: 768px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-xl);
+    }
+}
+
+@media (min-width: 1024px) {
+    .stats-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 
 .stat-item {
@@ -923,8 +971,21 @@ select {
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-xl);
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+}
+
+@media (min-width: 768px) {
+    .services-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-xl);
+    }
+}
+
+@media (min-width: 1024px) {
+    .services-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 
 .service-card {
@@ -1180,10 +1241,17 @@ select {
 /* Process Flow */
 .process-flow {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr;
     gap: var(--spacing-lg);
 }
 
+@media (min-width: 768px) {
+    .process-flow {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-lg);
+    }
+}
+
 .process-step {
     background: rgba(255, 255, 255, 0.03);
     border-radius: var(--radius-xl);
@@ -1745,14 +1813,10 @@ select {
 .footer-logo {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.625rem;
     margin-bottom: var(--spacing-md);
-    margin-left: auto;
-    margin-right: auto;
     text-decoration: none;
     line-height: 1;
-    width: 100%;
 }
 
 .footer-logo img {
@@ -1760,7 +1824,6 @@ select {
     height: 60px;
     width: auto;
     max-width: 220px;
-    margin: 0 auto;
 }
 
 .footer-logo .logo-text {