Update website content and styling across multiple pages and services

css/overview-cards.css

@@ -0,0 +1,104 @@
+/* Overview Cards for Service Pages */
+.overview-cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin: 2.5rem auto;
+    max-width: 1200px;
+}
+
+.overview-card {
+    background: rgba(20, 30, 50, 0.6);
+    border: 1px solid rgba(82, 238, 245, 0.2);
+    border-radius: 16px;
+    padding: 2.5rem 2rem;
+    text-align: center;
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+.overview-card:hover {
+    transform: translateY(-10px);
+    border-color: rgba(82, 238, 245, 0.5);
+    box-shadow: 
+        0 20px 40px rgba(0, 0, 0, 0.4),
+        0 0 30px rgba(82, 238, 245, 0.2);
+}
+
+.overview-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(82, 238, 245, 0.1), transparent);
+    transition: left 0.6s ease;
+}
+
+.overview-card:hover::before {
+    left: 100%;
+}
+
+.overview-card h3 {
+    font-size: 1.8rem;
+    color: #52eef5;
+    margin-bottom: 1.5rem;
+    position: relative;
+    padding-bottom: 12px;
+}
+
+.overview-card h3::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 2px;
+    background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2));
+    border-radius: 2px;
+    box-shadow: 0 0 8px rgba(82, 238, 245, 0.5);
+}
+
+.overview-card p {
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.7;
+    font-size: 1.2rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .overview-cards-container {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .overview-cards-container {
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 1rem;
+    }
+      .overview-card {
+        padding: 2rem 1.5rem;
+    }
+    
+    .overview-card h3 {
+        font-size: 1.6rem;
+    }
+    
+    .overview-card p {
+        font-size: 1.1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .overview-cards-container {
+        grid-template-columns: 1fr;
+    }
+}