Update app.py

app.py

@@ -14,12 +14,13 @@ st.set_page_config(
 st.markdown("""
 <style>
 body {
-    background-image: url('https://images.unsplash.com/photo-1581091012184-7d0dca5a5d1e?auto=format&fit=crop&w=1920&q=80');
+    background-image: url('https://images.unsplash.com/photo-1633113210877-2dbb0fd770f5?auto=format&fit=crop&w=1920&q=80');
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
     font-family: 'Segoe UI', sans-serif;
     color: #333;
+    animation: fade-in 2s ease-out;
 }
 .sidebar .sidebar-content {
     background-color: rgba(255, 255, 255, 0.75);
@@ -31,18 +32,19 @@ body {
 .hero {
     text-align: center;
     padding: 5rem 2rem;
-    background: linear-gradient(135deg, rgba(102,126,234,0.9), rgba(118,75,162,0.9));
+    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(70,70,70,0.7));
     border-radius: 24px;
     color: white;
     margin-bottom: 3rem;
     box-shadow: 0 20px 40px rgba(0,0,0,0.1);
     animation: fade-in 2s ease-out;
+    position: relative;
 }
 .hero h1 {
     font-size: 3.75em;
     font-weight: 700;
     margin-bottom: 0.3em;
-    animation: slide-in-top 1s ease-out;
+    animation: glow-text 2s infinite alternate;
 }
 .hero p {
     font-size: 1.3em;
@@ -50,6 +52,15 @@ body {
     margin-top: 0.5em;
     animation: slide-in-bottom 1.2s ease-out;
 }
+.hero img.logo {
+    width: 120px;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
 .section {
     background: rgba(255, 255, 255, 0.85);
     border-radius: 20px;
@@ -72,7 +83,7 @@ ul, ol {
     text-align: center;
     padding: 3rem;
     border-radius: 20px;
-    background: linear-gradient(to right, #ff416c, #ff4b2b);
+    background: linear-gradient(to right, #00c6ff, #0072ff);
     color: white;
     margin-top: 3rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -98,12 +109,17 @@ ul, ol {
   0% { transform: translateY(100px); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
 }
+@keyframes glow-text {
+  from { text-shadow: 0 0 5px #fff, 0 0 10px #92faff, 0 0 20px #00ffe5; }
+  to { text-shadow: 0 0 10px #fff, 0 0 20px #00f2ff, 0 0 30px #00f2ff; }
+}
 </style>
 """, unsafe_allow_html=True)
 
 # --- Hero Section ---
 st.markdown("""
 <div class="hero">
+    <img src="https://cdn-icons-png.flaticon.com/512/3062/3062634.png" class="logo" alt="logo">
     <h1>GestureGuru</h1>
     <p>AI for Sign Language Understanding & Accessibility</p>
 </div>
@@ -143,3 +159,4 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
+