Removed unnecessary empty spacing from hero and footer sections

Author: parulpaliwal01

web-app/css/styles.css

@@ -96,7 +96,7 @@ body {
     color: var(--text-color);
     line-height: 1.6;
     transition: background-color var(--motion-duration) ease, color var(--motion-duration) ease;
-    padding-bottom: 6rem;
+    /* padding-bottom: 6rem; */
 }
 
 #main-content {
@@ -232,14 +232,15 @@ body {
 /* ═══════════════════════════════════════
    HERO SECTION
 ═══════════════════════════════════════ */
-.hero-section {
+/* .hero-section {
     position: relative;
     padding: 9rem 0;
     min-height: 520px;
     text-align: center;
     overflow: hidden;
     background: var(--hero-green-nav-bg);
-}
+} */
+
 
 /* Canvas fills the full hero */
 #boardCanvas {
@@ -433,6 +434,7 @@ body {
     z-index: 2;
     max-width: 800px;
     margin: 0 auto;
+    padding-top: 15px;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -1639,7 +1641,7 @@ body {
 /* Footer */
 .footer {
     background: var(--surface-color);
-    padding: 1rem 0;
+    padding: 0rem 0;
     text-align: center;
     border-top: 1px solid var(--border-color);
     position: fixed;

web-app/index.html

@@ -611,7 +611,7 @@ <h1>
 
     <main id="main-content" tabindex="-1">
         <!-- Hero Section -->
-        <section class="hero-section" aria-label="Welcome">
+        <!-- <section class="hero-section" aria-label="Welcome"> -->
             <div class="hero-background color-bends-container" aria-hidden="true"></div>
             <div class="hero-code-snippets" aria-hidden="true">
                 <span class="code-snippet snippet-one">score += 1</span>
@@ -673,7 +673,7 @@ <h2 class="hero-title">Learn Python the Fun Way!</h2>
                     </button>
                 </div>
             </div>
-        </section>
+        <!-- </section> -->
 
         <!-- ── Projects Grid ──────────────────────────────────────── -->
         <section class="projects-section" aria-label="Projects">