diff --git a/index.html b/index.html
index de28f59..a7ef392 100644
--- a/index.html
+++ b/index.html
@@ -237,15 +237,17 @@ <h2>Projects</h2>
           </ul>
         </div>
 
-        
-      </div> <!-- /resume-sections -->
-      <div class="footer-actions no-print">
-          <button class="btn-refresh" onclick="clearAndReload()">🔄 Refresh Resume</button>
-          <br />
-          <button class="btn-autofill" onclick="autofillResume()">✍️ Autofill Resume</button>
-        </div>
-    </div> <!-- /preview-section -->
-  </div> <!-- /main-container -->
+</div> <!-- /resume-sections -->
+
+<div class="footer-actions no-print">
+  <button class="btn-refresh" onclick="clearAndReload()">🔄 Refresh Resume</button>
+  <br />
+  <button class="btn-autofill" onclick="autofillResume()">✍️ Autofill Resume</button>
+</div>
+
+</div> <!-- /preview-section -->
+</div> <!-- /main-container -->
+
 
   <footer style="margin-top: 2rem; padding: 1rem 0; text-align: center; font-size: 0.9rem;" class="footer">
   <div class="foot">
diff --git a/style.css b/style.css
index 6f925d5..93fdcb3 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,39 @@
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.container,
+.main,
+.section,
+.wrapper {
+  max-width: 100%;
+  overflow-x: hidden;
+
+
+}
+
+html, body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+img, table, pre, code, iframe {
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+
+
+
 :root {
   --primary: #2563eb;
   --primary-hover: #1d4ed8;
@@ -24,8 +60,11 @@ body {
   color: var(--text);
   background-color: var(--bg);
   margin: 0;
-  padding: 1rem;
+  
   transition: background-color 0.3s ease, color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 
 .main-container {
@@ -34,15 +73,23 @@ body {
   gap: 1.5rem;
   max-width: 1100px;
   margin: 0 auto;
+  width: 100%;
+
+
 }
 
 .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;
-  min-width: 320px;
+
+
+  flex: 1 1 400px; 
+  min-width: 300px; 
+  padding: 1rem;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+
+
+  
 }
 
 .form-section {
@@ -68,7 +115,7 @@ label {
 }
 
 input, textarea {
-  width: 90%;
+  /* width: 90%; */
   padding: 0.5rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -77,6 +124,9 @@ input, textarea {
   background-color: var(--input-bg);
   color: var(--text);
   transition: border 0.2s ease;
+   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 input:focus, textarea:focus {
@@ -228,18 +278,64 @@ ul li::before {
   }
 }
 
+
 .footer-actions {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 2rem 1rem;
+  background: #f9f9f9;
+  color: #333;
+  font-size: 0.95rem;
+  border-top: 1px solid #ddd;
+  margin-top: 2rem;
+}
+
+.footer-actions .footer-buttons {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
   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;
 }
 
+.footer-actions button {
+  padding: 12px 24px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  /* background-color: white;  */
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.footer-actions button:hover {
+  /* background-color: #f0f0f0; */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.footer-info {
+  text-align: center;
+}
+
+.footer-links {
+  margin-top: 0.5rem;
+}
+
+.footer-links a {
+  margin: 0 0.5rem;
+  text-decoration: none;
+  color: #0073e6;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+
+
+
 .btn-refresh,
 .btn-autofill {
   background-color: var(--bg);
@@ -304,10 +400,61 @@ main {
   flex-direction: column;
 }
 
-/* Responsive Footer */
 
+/* Resume action buttons container */
+.resume-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+/* Resume action buttons */
+.btn-refresh,
+.btn-autofill {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  transition: background-color 0.3s ease;
+}
+
+.btn-refresh:hover,
+.btn-autofill:hover {
+  background-color: #0056b3;
+}
+
+/* Footer actions styled as normal div */
+.footer-actions {
+  background-color: #f1f1f1;
+  padding: 20px;
+  text-align: center;
+  margin-top: 30px;
+  border-top: 1px solid #ccc;
+}
+
+.footer-links {
+  margin-top: 10px;
+}
+
+.footer-links a {
+  margin: 0 10px;
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: #007bff;
+}
+
+/* Light/Dark mode support for footer */
 .footer {
-  background-color: #f1f1f1; /* light mode background */
+  background-color: #f1f1f1;
   color: #333;
 }
 
@@ -317,14 +464,26 @@ main {
 }
 
 body.dark .footer {
-  background-color: #1a1a1a;  /* darker shade for footer in dark mode */
+  background-color: #1a1a1a;
   color: #eee;
-  border-top: 1px solid #444;  /* subtle top border */
-  box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05); /* soft top glow effect */
+  border-top: 1px solid #444;
+  box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05);
 }
 
 body.dark .footer-link {
-  color: #ffcc00; /* dark yellow for better contrast */
+  color: #ffcc00;
+}
+
+
+/* Hide footer area in print mode */
+.no-print {
+  display: block;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
 }
 
 
@@ -377,3 +536,109 @@ body.dark .footer-link {
 .section {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
+
+
+
+
+@media (width<=40rem){
+  #themeToggle{
+    font-size: 20px; 
+  padding: 4px;
+  
+  }
+}
+
+
+
+@media (max-width: 640px) {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-size: 14.5px;
+    padding: 1rem;
+    margin: 0;
+    overflow-x: hidden;
+  }
+
+  .form-section,
+  .preview-section,
+  .main-container {
+    padding: 1rem;
+    margin: 0 auto;
+    gap: 1rem;
+  }
+
+  .header h1 {
+    font-size: 1.3rem;
+    margin-bottom: 0.6rem;
+  }
+
+  .section h2 {
+    font-size: 1rem;
+  }
+
+  .skills-grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+
+  footer {
+    padding: 1rem 1.2rem;
+    font-size: 1rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.2rem;
+  }
+
+  .footer-right {
+    margin-right: 0;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .btn-refresh,
+  .btn-autofill {
+    padding: 12px 20px;
+    font-size: 15px;
+    border-radius: 8px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .footer-actions {
+    padding: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .footer-actions button {
+    font-size: 14px;
+    padding: 8px 16px;
+    margin: 6px 0;
+    width: 80%;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+