Update style.css

style.css

@@ -16,11 +16,12 @@
   align-items: center;
   justify-content: center;
   color: #fff;
+  padding: 20px;
 }
 
 .welcome-container {
   display: flex;
-  width: 90%;
+  width: 100%;
   max-width: 1100px;
   background: rgba(255,255,255,0.1);
   backdrop-filter: blur(18px);
@@ -32,25 +33,25 @@
 /* LEFT HERO */
 .welcome-left {
   flex: 1;
-  padding: 70px 60px;
+  padding: clamp(40px, 6vw, 70px) clamp(30px, 5vw, 60px);
   position: relative;
 }
 
 .welcome-left h1 {
-  font-size: 3.2rem;
+  font-size: clamp(2.2rem, 5vw, 3.2rem);
   font-weight: 900;
 }
 
 .welcome-left h2 {
   margin: 15px 0;
-  font-size: 1.5rem;
+  font-size: clamp(1.2rem, 3vw, 1.5rem);
   font-weight: 600;
 }
 
 .welcome-left p {
   max-width: 420px;
   line-height: 1.7;
-  font-size: 1.05rem;
+  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
 }
 
 .glow-circle {
@@ -66,9 +67,10 @@
 /* LOGIN CARD */
 .login-card {
   width: 380px;
+  max-width: 100%;
   background: white;
   color: #0f172a;
-  padding: 45px 35px;
+  padding: clamp(30px, 4vw, 45px) clamp(25px, 4vw, 35px);
 }
 
 .login-card h3 {
@@ -131,14 +133,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 18px 30px;
+  padding: clamp(14px, 3vw, 18px) clamp(18px, 4vw, 30px);
   background: rgba(255,255,255,0.8);
   backdrop-filter: blur(12px);
   box-shadow: 0 8px 25px rgba(0,0,0,0.08);
 }
 
 .logo {
-  font-size: 1.3rem;
+  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
   font-weight: 800;
   color: #2563eb;
 }
@@ -156,11 +158,11 @@
 /* HERO */
 .hero {
   text-align: center;
-  padding: 90px 20px;
+  padding: clamp(60px, 8vw, 90px) 20px;
 }
 
 .hero h1 {
-  font-size: 3rem;
+  font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 900;
   color: #2563eb;
   margin-bottom: 15px;
@@ -170,15 +172,17 @@
   max-width: 650px;
   margin: 0 auto 50px;
   color: #475569;
-  font-size: 1.1rem;
+  font-size: clamp(1rem, 2.5vw, 1.1rem);
 }
 
+/* FEATURES */
 .feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 25px;
   max-width: 900px;
   margin: auto;
+  padding: 0 10px;
 }
 
 .feature-card {
@@ -197,10 +201,10 @@
 /* VOICE BUTTON */
 .voice-button {
   position: fixed;
-  bottom: 30px;
-  left: 30px;
-  width: 70px;
-  height: 70px;
+  bottom: clamp(20px, 4vw, 30px);
+  left: clamp(15px, 4vw, 30px);
+  width: clamp(60px, 10vw, 70px);
+  height: clamp(60px, 10vw, 70px);
   border-radius: 50%;
   border: none;
   background: linear-gradient(135deg, #22c55e, #06b6d4);
@@ -210,7 +214,9 @@
   box-shadow: 0 20px 40px rgba(6,182,212,0.5);
 }
 
-/* MOBILE */
+/* =========================
+   STACKING FOR SMALL SCREENS
+========================= */
 @media (max-width: 900px) {
   .welcome-container {
     flex-direction: column;
@@ -220,7 +226,14 @@
     text-align: center;
   }
 
-  .login-card {
-    width: 100%;
+  .welcome-left p {
+    margin: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .logout-btn {
+    padding: 7px 14px;
+    font-size: 0.85rem;
   }
 }