diff --git a/style.css b/style.css
index 2bbd5b8..129db37 100644
--- a/style.css
+++ b/style.css
@@ -1,192 +1,341 @@
 :root {
-  --primary: #2563eb;
-  --primary-hover: #1d4ed8;
-  --text: #1e293b;
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --text: #1a202c;
   --muted: #64748b;
   --border: #94a3b8;
   --bg: #f8fafc;
   --input-bg: #fff;
+  --accent: #667eea;
 }
 
 body.dark {
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
+  --primary: #667eea;
+  --primary-hover: #5a67d8;
   --text: #f5f5f5;
   --muted: #cbd5e1;
-  --border: #64748b;
-  --bg: #121212;
-  --input-bg: #1e1e1e;
+  --border: #4a5568;
+  --bg: #1a202c;
+  --input-bg: #2d3748;
+  --accent: #667eea;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
-  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
   color: var(--text);
-  background-color: var(--bg);
+  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
   margin: 0;
   padding: 1rem;
   transition: background-color 0.3s ease, color 0.3s ease;
+  min-height: 100vh;
 }
 
 .main-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.5rem;
-  max-width: 1100px;
+  gap: 2rem;
+  max-width: 1400px;
   margin: 0 auto;
+  background: transparent;
 }
 
 .form-section, .preview-section {
-  background-color: var(--input-bg);
-  color: var(--text);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  padding: 2rem;
   min-width: 320px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+body.dark .form-section,
+body.dark .preview-section {
+  background: rgba(45, 55, 72, 0.95);
+  color: var(--text);
+  border: 1px solid rgba(102, 126, 234, 0.2);
 }
 
 .form-section {
-  flex: 1 1 350px;
-  max-width: 450px;
+  flex: 1 1 400px;
+  max-width: 500px;
 }
 
 .preview-section {
-  flex: 2 1 500px;
-  font-size: 13px;
+  flex: 2 1 600px;
+  font-size: 14px;
+  background: white;
+  color: white;
+}
+
+body.dark .preview-section {
+  background: white;
+  color: white;
+}
+
+.form-section h2 {
+  color: var(--accent);
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  text-align: center;
 }
 
 .form-group {
-  margin-bottom: 1.2rem;
+  margin-bottom: 1.5rem;
 }
 
 label {
   display: block;
-  margin-bottom: 0.4rem;
-  font-weight: 500;
-  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 0.95rem;
   color: var(--text);
 }
 
 input, textarea {
-  width: 90%;
-  padding: 0.5rem 0.7rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 13px;
-  margin-bottom: 0.4rem;
+  width: calc(100% - 32px);
+  max-width: 450px;
+  padding: 12px 16px;
+  border: 2px solid var(--border);
+  border-radius: 12px;
+  font-size: 14px;
+  margin: 0 auto 0.5rem auto;
   background-color: var(--input-bg);
   color: var(--text);
-  transition: border 0.2s ease;
+  transition: all 0.3s ease;
+  font-family: inherit;
+  display: block;
 }
 
 input:focus, textarea:focus {
-  border-color: var(--primary);
-  outline: 2px solid rgba(37, 99, 235, 0.2);
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
 }
 
 textarea {
-  min-height: 80px;
+  min-height: 100px;
+  resize: vertical;
 }
 
 .add-btn, .download-btn {
-  background-color: var(--primary);
-  color: #fff;
+  background: linear-gradient(135deg, var(--accent) 0%, var(--primary-hover) 100%);
+  color: white;
   border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  font-size: 13px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
   margin-top: 0.5rem;
+  margin-right: 0.5rem;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 .add-btn:hover, .download-btn:hover {
-  background-color: var(--primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
 .education-inputs, .experience-inputs, .certifications-inputs, .project-input {
-  margin-bottom: 0.8rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.8rem;
-  background-color: var(--bg);
+  margin-bottom: 1rem;
+  border: 2px solid var(--border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: rgba(102, 126, 234, 0.05);
+  transition: all 0.3s ease;
+}
+
+.education-inputs:hover, .experience-inputs:hover, 
+.certifications-inputs:hover, .project-input:hover {
+  border-color: var(--accent);
+  background: rgba(102, 126, 234, 0.08);
+}
+
+.education-inputs input, 
+.experience-inputs input, 
+.experience-inputs textarea,
+.certifications-inputs input, 
+.certifications-inputs textarea,
+.project-input input, 
+.project-input textarea,
+.skills-grid input,
+.skills-grid textarea {
+  width: 100%;
+  max-width: none;
+  margin: 0 0 0.5rem 0;
 }
 
 .skills-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.8rem;
-  margin-bottom: 0.8rem;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
-.skills-grid div {
+.skills-grid > div {
   margin-bottom: 0.5rem;
 }
 
 .skills-grid label {
-  font-size: 0.85rem;
-  margin-bottom: 0.3rem;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
 }
 
-.header h1 {
-  font-size: 1.4rem;
-  color: var(--primary);
-  margin-bottom: 0.3rem;
+/* Preview Section Styles */
+.header {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 2px solid #667eea;
+}
+
+.preview-section .header h1 {
+  font-size: 2.5rem;
+  color: #667eea;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
 }
 
 .contact-info {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  color: var(--muted);
-  font-size: 12px;
-  margin-bottom: 0.8rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  color: #4a5568;
+  font-size: 14px;
+  margin-bottom: 0;
+}
+
+.contact-info span {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.preview-section .contact-info a {
+  color: #667eea;
+  text-decoration: none;
+}
+
+.preview-section .contact-info a:hover {
+  text-decoration: underline;
 }
 
 .section {
+  margin-bottom: 1.5rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.preview-section .section h2 {
+  font-size: 1.25rem;
+  color: #667eea;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 0.5rem;
   margin-bottom: 1rem;
+  font-weight: 700;
 }
 
-.section h2 {
-  font-size: 1rem;
-  color: var(--primary);
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 0.2rem;
-  margin-bottom: 0.5rem;
+.preview-section .section p {
+  color: #4a5568;
+  line-height: 1.7;
+  margin-bottom: 1rem;
 }
 
 ul {
-  padding-left: 1.2rem;
-  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  margin: 0.8rem 0;
+  list-style: none;
 }
 
-ul li {
-  margin-bottom: 0.3rem;
+.preview-section ul li {
+  margin-bottom: 1rem;
   position: relative;
+  color: #2d3748;
+  line-height: 1.6;
 }
 
-ul li::before {
+.preview-section ul li::before {
   content: "•";
-  color: var(--primary);
+  color: #667eea;
+  font-weight: bold;
   position: absolute;
+  left: -1.5rem;
+  top: 0;
+}
+
+.preview-section ul li strong {
+  color: #2d3748;
+  font-weight: 600;
+}
+
+ul li ul {
+  margin-top: 0.5rem;
+  padding-left: 1.2rem;
+}
+
+.preview-section ul li ul li {
+  margin-bottom: 0.3rem;
+  font-size: 0.95rem;
+  color: #4a5568;
+}
+
+.preview-section ul li ul li::before {
+  content: "◦";
+  color: #667eea;
   left: -1.2rem;
 }
 
-.project-links a {
-  color: var(--primary);
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-top: 0.8rem;
+}
+
+.skills-grid > div {
+  margin-bottom: 0.8rem;
+}
+
+.preview-section .skills-grid strong {
+  color: #2d3748;
+  font-weight: 600;
+}
+
+.preview-section .skills-grid span {
+  color: #4a5568;
+}
+
+.project-links {
+  margin: 0.5rem 0;
+}
+
+.preview-section .project-links a {
+  color: #667eea;
   text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  margin-right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.preview-section .project-links a::before {
+  content: "🔗";
   font-size: 12px;
-  margin-right: 0.8rem;
 }
 
-.project-links a::before {
-  content: "🌐";
-  margin-right: 0.3rem;
+.preview-section .project-links a:hover {
+  text-decoration: underline;
 }
 
 .fade-in {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   will-change: opacity, transform;
 }
@@ -196,211 +345,160 @@ ul li::before {
   transform: translateY(0);
 }
 
-.scroll-up-btn {
+#themeToggle {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
-  z-index: 999;
-  padding: 6px 12px;
+  top: 20px;
+  right: 20px;
+  background: rgba(102, 126, 234, 0.9);
+  backdrop-filter: blur(10px);
+  border: none;
+  font-size: 24px;
   cursor: pointer;
-  border: 2px solid var(--border);
-  background-color: var(--input-bg);
-  color: var(--text);
-  border-radius: 20%;
+  z-index: 1000;
+  color: white;
+  padding: 12px;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
-
-@media (max-width: 900px) {
-  .main-container {
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0 0.5rem;
-  }
-
-  .form-section, .preview-section {
-    max-width: 100%;
-    min-width: 0;
-    padding: 1rem;
-  }
-
-  .skills-grid {
-    grid-template-columns: 1fr;
-  }
+#themeToggle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }
 
 .footer-actions {
   display: flex;
   justify-content: center;
-  gap: 16px;
-  padding: 16px;
-  border-top: 1px solid var(--border);
-  background-color: var(--input-bg);
-  position: absolute;
-  bottom: 0;
-  z-index: 100;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+  background: transparent;
+  margin-top: 2rem;
 }
 
 .btn-refresh,
 .btn-autofill {
-  background-color: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  padding: 10px 16px;
-  border-radius: 8px;
-  font-family: 'Inter', sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-family: inherit;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 .btn-refresh:hover,
 .btn-autofill:hover {
-  background-color: var(--input-bg);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-.btn-refresh:active,
-.btn-autofill:active {
-  transform: scale(0.98);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
-#themeToggle {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  z-index: 999;
-  padding: 6px 12px;
-  cursor: pointer;
-  border: none;
-  background-color: var(--input-bg);
-  color: var(--text);
-  border-radius: 4px;
-}
-#themeToggle {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  font-size: 32px; /* Increased size */
-  cursor: pointer;
-  z-index: 1000;
-  color: inherit;
-  transition: transform 0.2s ease;
-}
-
-html, body {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-}
-
-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Responsive Footer */
-
 .footer {
-  background-color: #f1f1f1;
+
+  background: rgba(26, 32, 44, 0.95);
+  color: #f5f5f5;
+  margin-top: 3rem;
+  padding: 2rem 0;
+  text-align: center;
+  border-top: 1px solid rgba(102, 126, 234, 0.3);
 }
 
 .footer-link {
-  color: #b21d1d;
+  color: #667eea;
   text-decoration: none;
 }
 
-body.dark .footer {
-  background-color: #1a1a1a;  
-  color: #eee;
-  border-top: 1px solid #444; 
-  box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05); 
-}
-
-body.dark .footer-link {
-  color: #ffcc00; 
-}
-
-.improve-btn {
-  margin-top: 8px;
-  background: none;
-  border: none;
-  color: #007BFF;
-  cursor: pointer;
-  font-size: 14px;
+.footer-link:hover {
   text-decoration: underline;
-  display: inline-block;
-}
-
-.suggestion-box {
-  margin-top: 10px;
-  font-size: 14px;
-  color: green;
-  background: #e9fbe9;
-  padding: 10px;
-  border-left: 4px solid green;
-  border-radius: 4px;
-  display: none;
 }
 
-.suggestion-box.loading {
-  color: gray;
-  font-style: italic;
-  display: block;
-}
 
+ 
 
-
-@media(max-width:768px){
-  footer{
-    flex-direction: column;
-    text-align:center;
-    align-items:center;
-    padding: 1rem;
-    gap:1.5rem;
-  }
-#themeToggle i.fa-sun {
-  color: #FFD700 !important;
-}
 .char-count {
-  font-size: 0.75rem; 
-  color: var(--muted); 
+  font-size: 0.8rem;
+  color: var(--muted);
   display: block;
-  margin-top: -0.2rem; 
-  text-align: right; 
-  padding-right: 0.7rem; 
+  margin-top: -0.3rem;
+  text-align: right;
+  padding-right: 0.7rem;
 }
 
 .error-message {
-  color: #dc2626;
-  font-size: 0.8rem;
-  margin-top: -0.2rem;
+  color: #f56565;
+  font-size: 0.85rem;
+  margin-top: -0.3rem;
   margin-bottom: 0.5rem;
   display: block;
+  font-weight: 500;
 }
 
-@media print {
-  .no-print{
-  display: none !important;
- }
-}
-}
-/* Highlight the section being dragged */
+/* Drag and Drop Styles */
 .section.dragging {
-  opacity: 0.5;
-  background-color: #f0f0f0;
-  border: 2px dashed #007bff;
+  opacity: 0.6;
+  background-color: rgba(102, 126, 234, 0.1);
+  border: 2px dashed #667eea;
   cursor: grabbing;
   transform: scale(1.02);
   transition: all 0.2s ease-in-out;
 }
 
-/* animate section positions */
-.section {
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+/* Responsive Design */
+@media (max-width: 900px) {
+  .main-container {
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 0 0.5rem;
+  }
+
+  .form-section, .preview-section {
+    max-width: 100%;
+    min-width: 0;
+    padding: 1.5rem;
+  }
+
+  .skills-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-info {
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .preview-section .header h1 {
+    font-size: 2rem;
+  }
 }
+
+@media (max-width: 768px) {
+  .footer {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    padding: 1.5rem;
+    gap: 1rem;
+  }
+
+  #themeToggle {
+    font-size: 20px;
+    padding: 10px;
+  }
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+  
+  .preview-section {
+    box-shadow: none;
+    border: none;
+    background: white;
+  }
+}
\ No newline at end of file