Update app.py

app.py

@@ -37,62 +37,110 @@ def get_rag_model():
 # Custom CSS for styling
 def load_css():
     st.markdown("""
-        <style>
-        .stApp {
-            background: linear-gradient(135deg, #ff9a8b, #ff6a88);  /* Warm sunset gradient */
-        }
-        .stHeader {
-            color: #1a1a2e;  /* Dark blue-gray for headers */
-            font-size: 2.5rem;
-            font-weight: bold;
-        }
-        .stForm {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        .stButton button {
-            background-color: #6b48ff;  /* Rich purple */
-            color: white;
-            border-radius: 5px;
-            padding: 10px 20px;
-            font-size: 1rem;
-            border: none;
-        }
-        .stButton button:hover {
-            background-color: #5439cc;  /* Darker purple on hover */
-        }
-        .stMarkdown h3 {
-            color: #1a1a2e;  /* Matching dark blue-gray */
-            margin-top: 20px;
-        }
-        .st-emotion-cache-13k62yr {
-            position: absolute;
-            background: white;
-            color: white;
-            inset: 0px;
-            color-scheme: dark;
-            overflow: hidden;
-        }
-        .stExpander {
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        .stDataFrame {
-            border-radius: 10px;
-        }
-        /* Custom color for results */
-        .stMarkdown p, .stMarkdown ul, .stMarkdown ol {
-            color: rgb(26, 26, 46);  /* Darker blue-gray for text */
-        }
-        .stMarkdown a {
-            color: #6b48ff;  /* Matching purple for links */
-        }
-        </style>
-        """, unsafe_allow_html=True)
-
+    <style>
+    /* App Background */
+    .stApp {
+        background: #f8f9fa; /* Light gray background */
+    }
+
+    /* Header Styling */
+    .stHeader {
+        color: #2c3e50; /* Dark blue-gray */
+        font-size: 2.5rem;
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 20px;
+    }
+
+    /* Form Styling */
+    .stForm {
+        background: white;
+        padding: 25px;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        margin: 20px auto;
+        max-width: 800px;
+    }
+
+    /* Button Styling */
+    .stButton button {
+        background-color: #3498db; /* Blue */
+        color: white;
+        border-radius: 8px;
+        padding: 12px 24px;
+        font-size: 1rem;
+        border: none;
+        transition: background-color 0.3s ease;
+    }
+    .stButton button:hover {
+        background-color: #2980b9; /* Darker blue on hover */
+    }
+
+    /* Markdown Headers */
+    .stMarkdown h3 {
+        color: #2c3e50; /* Dark blue-gray */
+        margin-top: 20px;
+        font-size: 1.8rem;
+        font-weight: 600;
+    }
+
+    /* Expander Styling */
+    .stExpander {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        margin: 20px 0;
+    }
+    .stExpander .stMarkdown {
+        padding: 15px;
+    }
+
+    /* DataFrame Styling */
+    .stDataFrame {
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Custom Color for Results */
+    .stMarkdown p, .stMarkdown ul, .stMarkdown ol {
+        color: rgb(1, 27, 29); /* Custom color for results */
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+    .stMarkdown a {
+        color: #3498db; /* Blue for links */
+        text-decoration: none;
+        font-weight: 500;
+    }
+    .stMarkdown a:hover {
+        text-decoration: underline;
+    }
+
+    /* Spinner Styling */
+    .stSpinner {
+        color: #3498db; /* Blue spinner */
+    }
+
+    /* Hero Section Styling */
+    .hero {
+        text-align: center;
+        padding: 50px 20px;
+        background: linear-gradient(135deg, #3498db, #2980b9); /* Blue gradient */
+        color: white;
+        border-radius: 12px;
+        margin-bottom: 30px;
+    }
+    .hero h1 {
+        font-size: 3rem;
+        font-weight: 700;
+        margin-bottom: 10px;
+    }
+    .hero p {
+        font-size: 1.2rem;
+        opacity: 0.9;
+    }
+    </style>
+    """, unsafe_allow_html=True)
 # Streamlit app
 def main():
     # Load custom CSS