I've enhanced the Vision and Mission sections by adding detailed explanations that appear as tooltips when hovering over each section. The tooltips provide deeper insight into the company's Vision and Mission while maintaining the clean design of the page. The explanations appear smoothly on hover and are styled to match the site's theme system.

public/css/components.css

@@ -20,12 +20,21 @@
     margin: var(--spacing-xl) 0;
 }
 
-.mission-vision div {
+.mission-vision .tooltip-container {
     background: var(--bg-card);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.mission-vision .tooltip-container:hover {
+    transform: translateY(-5px);
+    border-color: var(--primary);
 }
 
 .mission-vision h3 {
@@ -33,6 +42,49 @@
     margin-bottom: var(--spacing-md);
 }
 
+/* Tooltip Styles */
+.tooltip-container {
+    position: relative;
+}
+
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg-card);
+    color: var(--text);
+    padding: var(--spacing-lg);
+    border-radius: var(--border-radius);
+    width: 300px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    text-align: left;
+    z-index: 100;
+    transition: opacity var(--transition-speed) ease,
+                visibility var(--transition-speed) ease;
+}
+
+.tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 10px 10px 0;
+    border-style: solid;
+    border-color: var(--bg-card) transparent transparent transparent;
+}
+
+.tooltip-container:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 /* Service Cards */
 .service-card {
     background: var(--bg-card);
@@ -45,8 +97,9 @@
 }
 
 .service-card:hover {
-    transform: translateY(-5px);
     border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
 }
 
 .service-card h3 {
@@ -63,6 +116,12 @@
     margin: var(--spacing-xl) 0;
 }
 
+.contact-info:hover {
+    border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
 .contact-info a {
     color: var(--primary);
     text-decoration: none;