Update app.py

app.py

@@ -134,6 +134,69 @@ st.markdown("""
             margin: 0 auto;
             padding: 2rem;
         }
+@keyframes gradientShift {
+        0% {background-position: 0% 50%;}
+        50% {background-position: 100% 50%;}
+        100% {background-position: 0% 50%;}
+    }
+    .modern-header {
+        padding: 3rem 2rem;
+        margin-bottom: 2.5rem;
+        border-radius: 12px;
+        text-align: center;
+        background: linear-gradient(135deg, #2b5876 0%, #4e4376 50%, #1f1c2c 100%);
+        background-size: 300% 300%;
+        animation: gradientShift 12s ease infinite;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+        position: relative;
+        overflow: hidden;
+        color: white;
+    }
+    .modern-header::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 75% 30%, rgba(255,255,255,0.1) 0%, transparent 40%);
+    }
+    .header-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        position: relative;
+        background: linear-gradient(90deg, #fff, #c9d6ff);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .header-subtitle {
+        font-size: 1.2rem;
+        opacity: 0.9;
+        margin-bottom: 1.5rem;
+        position: relative;
+    }
+    .badge-container {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+    .header-badge {
+        padding: 0.6rem 1.2rem;
+        background: rgba(255,255,255,0.15);
+        backdrop-filter: blur(5px);
+        border-radius: 24px;
+        border: 1px solid rgba(255,255,255,0.2);
+        font-size: 0.9rem;
+        transition: all 0.3s ease;
+    }
+    .header-badge:hover {
+        background: rgba(255,255,255,0.25);
+        transform: translateY(-2px);
+    }
         .header {
             text-align: center;
             padding: 2rem;
@@ -177,19 +240,17 @@ st.markdown("""
 
 def main():
     # Professional Header Section
-    with st.container():
-        st.markdown('<div class="header">', unsafe_allow_html=True)
-        st.title("📝 AI-Powered Requirement Analysis System")
-        st.markdown("""
-            <div style="margin: 1.5rem 0;">
-                <div style="font-size: 1.2rem; color: #4a4a4a;">Automated Requirement Classification, Defect Detection & Optimization</div>
-                <div style="display: flex; justify-content: center; gap: 1rem; margin: 1rem 0;">
-                    <div style="padding: 0.5rem 1rem; background: #f0f2f6;color: #4a4a4a; border-radius: 20px;">Team: Sadia, Areeba, Rabbia, Tesmia</div>
-                    <div style="padding: 0.5rem 1rem; background: #f0f2f6; color: #4a4a4a;border-radius: 20px;">Mistral + Groq API</div>
-                </div>
-            </div>
-        """, unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
+    <div class="modern-header">
+       <h1 class="header-title">⚡ AI-Powered Requirement Analysis</h1>
+       <p class="header-subtitle">Automated Classification • Defect Detection • Quality Optimization</p>
+    
+       <div class="badge-container">
+          <div class="header-badge">🚀 Team: Sadia, Areeba, Rabbia, Tesmia</div>
+          <div class="header-badge">🧠 Powered by Mistral + Groq</div>
+          <div class="header-badge">🎯 Computer Science Project</div>
+       </div>
+    </div>
+""", unsafe_allow_html=True)
 
     # Input Section
     with st.container():