Update app.py

app.py

@@ -1,16 +1,19 @@
 import streamlit as st
 
-# Custom CSS for styling and animations
 st.markdown(
     """
     <style>
+        body {
+            background-color: #f9f9f9; /* Light, soft background */
+            font-family: 'Arial', sans-serif;
+        }
         @keyframes fadeIn {
             0% { opacity: 0; transform: translateY(-20px); }
             100% { opacity: 1; transform: translateY(0); }
         }
         .title {
             text-align: center;
-            color: #2c3e50;
+            color: #2c3e50; /* Deep gray-blue */
             font-size: 3rem;
             font-weight: bold;
             animation: fadeIn 1s ease-in-out;
@@ -19,14 +22,18 @@ st.markdown(
             text-align: center;
             font-style: italic;
             font-size: 1.2rem;
-            color: #7f8c8d;
+            color: #7f8c8d; /* Soft gray */
             animation: fadeIn 1.5s ease-in-out;
         }
         .about {
             font-size: 1.1rem;
             text-align: justify;
             line-height: 1.8;
-            color: #34495e;
+            color: #34495e; /* Muted gray */
+            background: #ffffff; /* White card-style background */
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             animation: fadeIn 2s ease-in-out;
         }
         .image-container {
@@ -37,6 +44,10 @@ st.markdown(
         .image-container img {
             border-radius: 15px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease-in-out;
+        }
+        .image-container img:hover {
+            transform: scale(1.05); /* Subtle zoom effect on hover */
         }
     </style>
     """,
@@ -48,7 +59,7 @@ st.markdown("<div class='title'>Natural Language Processing</div>", unsafe_allow
 
 # Caption with animation
 st.markdown(
-    "<div class='caption'>***Unlock the Power of Language: Bridging Communication Between Humans and Machines with NLP!***</div>",
+    "<div class='caption'>Unlock the Power of Language: Bridging Communication Between Humans and Machines with NLP!</div>",
     unsafe_allow_html=True,
 )