Update website content and styling across multiple pages and services

css/03-navigation-header.css

@@ -190,16 +190,17 @@
     background-color: #100732;
     border-radius: 8px;
     padding: 1rem;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 30px rgba(82, 238, 245, 0.15);
     z-index: 1;
     top: 100%;
-    left: 0;
+    left: 0; /* Align with parent menu item */
     margin-top: 0.5rem;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s;
-    padding-top: 0.8rem;
+    padding-top: 1rem;
+    overflow: visible; /* Allow content overflow */
 }
 
 .dropdown-menu::before {
@@ -211,28 +212,48 @@
     height: 0.5rem;
 }
 
+/* Add a visual connection between parent menu and dropdown */
+.dropdown-menu::after {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 25px; /* Position relative to parent menu item */
+    width: 16px;
+    height: 16px;
+    background-color: #100732;
+    transform: rotate(45deg);
+    z-index: -1;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
 .industries-dropdown {
-    grid-template-columns: repeat(3, 1fr);
-    min-width: 600px;
+    grid-template-columns: repeat(2, 1fr);
+    width: 700px;
+    max-width: calc(100vw - 40px); /* Prevent overflow outside viewport */
+    left: 0; /* Align with the parent menu item */
+    transform: none; /* Remove centering */
 }
 
 .services-dropdown {
     grid-template-columns: repeat(2, 1fr);
-    min-width: 450px;
+    width: 600px;
+    max-width: calc(100vw - 40px); /* Prevent overflow outside viewport */
+    left: 0; /* Align with the parent menu item */
+    transform: none; /* Remove centering */
 }
 
 .education-dropdown {
     grid-template-columns: 1fr;
-    min-width: 320px;
+    width: 400px;
+    max-width: calc(100vw - 40px); /* Prevent overflow outside viewport */
+    left: 0; /* Align with the parent menu item */
 }
 
-.dropdown:hover .industries-dropdown,
-.dropdown:hover .services-dropdown,
-.dropdown:hover .education-dropdown {
+.dropdown:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
     margin-top: 0;
+    transform: translateY(0);
     transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0s;
 }
 
@@ -244,39 +265,66 @@
     text-decoration: none;
     color: var(--fg);
     display: block;
-    padding: 0.5rem;
-    border-radius: 4px;
-    transition: background-color 0.3s ease;
+    padding: 0.4rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    margin: 0.1rem;
+}
+
+/* Add gap between grid items */
+.dropdown-menu {
+    gap: 0.5rem;
+    row-gap: 0.8rem;
 }
 
 .dropdown-menu a:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(82, 238, 245, 0.1);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown-menu a:hover .item-title {
+    color: #52eef5;
 }
 
 .dropdown-item-content {
     display: flex;
     align-items: center;
+    padding: 6px;
+    transition: all 0.2s ease;
+    border-radius: 6px;
 }
 
 .dropdown-icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 0.8rem;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.6rem;
     flex-shrink: 0;
 }
 
 .text-content {
     display: flex;
     flex-direction: column;
+    width: 100%;
+    overflow: visible; /* Allow text to be fully visible */
 }
 
 .item-title {
-    font-size: 1.15rem;
+    font-size: 1rem;
+    margin-bottom: 4px;
+    white-space: normal;
+    font-weight: 600;
+    color: #fff;
 }
 
 .item-description {
-    font-size: 0.95rem;
+    font-size: 0.8rem;
     opacity: 0.8;
+    line-height: 1.3;
+    /* Show full description, no truncation */
+    white-space: normal;
+    overflow: visible;
+    display: block;
 }
 
 .dropdown-menu h1,
@@ -335,6 +383,51 @@
     background: #52eef5;
 }
 
+/* ===== RESPONSIVE DROPDOWN ADJUSTMENTS ===== */
+@media (max-width: 1200px) {
+    .industries-dropdown {
+        grid-template-columns: repeat(2, 1fr);
+        width: 650px;
+    }
+    
+    .services-dropdown {
+        grid-template-columns: repeat(2, 1fr);
+        width: 550px;
+    }
+    
+    .item-description {
+        font-size: 0.75rem;
+    }
+}
+
+@media (max-width: 992px) {
+    .industries-dropdown {
+        grid-template-columns: repeat(2, 1fr);
+        width: 550px;
+    }
+    
+    .services-dropdown {
+        grid-template-columns: repeat(2, 1fr);
+        width: 500px;
+    }
+    
+    .education-dropdown {
+        width: 380px;
+    }
+    
+    /* For dropdowns near right edge of screen, push them left */
+    .dropdown:last-child .dropdown-menu,
+    .dropdown:nth-last-child(2) .dropdown-menu {
+        left: auto;
+        right: 0;
+    }
+    
+    /* Ensure dropdown content fits within its container */
+    .dropdown-item-content {
+        padding: 5px;
+    }
+}
+
 /* ===== MOBILE NAVIGATION ===== */
 @media (max-width: 768px) {
     .navbar {