Update website content and styling across multiple pages and services

css/04-hero-sections.css

@@ -36,7 +36,8 @@
     position: relative;
     z-index: 20;
     flex: 1;
-    max-width: 800px;
+    width: 100%; /* Full width */
+    max-width: 1200px; /* Increased max-width to accommodate typewriter */
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -82,6 +83,10 @@
 /* ===== HERO TYPEWRITER SECTION ===== */
 .hero-typewriter-section {
     margin: 0.2rem 0;
+    width: 100%; /* Full width */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .hero-subheading {
@@ -93,17 +98,18 @@
 }
 
 .typewriter-container {
-    font-size: 3rem;
+    font-size: 4.5rem;
     color: #52eef5;
     font-weight: 100;
     text-align: center;
-    min-height: 3.8rem;
-    min-width: 90%;
+    min-height: 4.8rem; /* Increased to accommodate larger font size */
+    width: 100%; /* Full width container */
+    max-width: 100%; /* Ensure it doesn't exceed viewport width */
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.4rem;
-    padding: 0.2rem 1rem;
+    padding: 0.2rem 0; /* Reduced horizontal padding */
     line-height: 1.0;
 }
 
@@ -120,6 +126,8 @@
 .typewriter-text {
     display: inline-block;
     position: relative;
+    white-space: normal; /* Allow text to wrap if needed */
+    overflow-wrap: break-word; /* Break words to prevent overflow */
 }
 
 .cursor {