Started the Rework

app/styles/container.css

@@ -33,3 +33,37 @@
 .conversation-container.collapsed {
     margin-left: 30vw; /* Same as the width of the left-panel */
 }
+
+/* container.css */
+
+/* Overlay styles for Documentation and FAQ */
+.overlay {
+    position: fixed; /* Fixed positioning for overlay */
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    z-index: 1000; /* Ensure it is above other content */
+    display: none; /* Hidden by default */
+    align-items: center;
+    justify-content: center;
+    color: white; /* Text color for better readability */
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+/* Show overlay when active */
+.overlay.active {
+    display: flex;
+}
+
+/* Specific styling for Documentation overlay */
+.overlay.documentation {
+    /* Add specific styles for Documentation overlay if needed */
+}
+
+/* Specific styling for FAQ overlay */
+.overlay.faq {
+    /* Add specific styles for FAQ overlay if needed */
+}

app/styles/faq.css

@@ -0,0 +1,6 @@
+.faq-background{
+    width: 100vw;
+    height: 100vh;
+    color: white;
+    background-color: white;
+}

app/styles/header.css

@@ -10,7 +10,6 @@ header {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     font-family: var(--font-family);
-    height: 5vh;
 }
 
 header li {