From ed838cf65e122cf24fb1ac3615272c0f93149cbb Mon Sep 17 00:00:00 2001
From: Dishika18 <vaishkiyardishika@gmail.com>
Date: Mon, 21 Oct 2024 20:59:45 +0530
Subject: [PATCH] Improved Footer Section

---
 about.html | 177 ++++++++++++++++++++++++++------
 faq.html   | 102 ++++++++++++++-----
 learn.html | 219 ++++++++++++++++++++++++++++++++++------
 styles.css | 291 +++++++++++++++++++++++++++++++++++++----------------
 4 files changed, 616 insertions(+), 173 deletions(-)

diff --git a/about.html b/about.html
index e1e073e..d6fea6b 100644
--- a/about.html
+++ b/about.html
@@ -32,11 +32,6 @@
             text-align: center;
             color: #2C3E50;
         }
-        p {
-            line-height: 1.6;
-            margin-bottom: 20px;
-            text-align: justify;
-        }
         a {
             color: #3498DB;
             text-decoration: none;
@@ -76,43 +71,159 @@
         .card p{
             color: black;
         }
+        .title{
+            color: white;
+        }
+        .container h2{
+            color: beige;
+        }
+        .dark-theme .card h3{
+            color: black;
+        }
+        /* Footer section */
+        footer {
+            background: linear-gradient(135deg, #1c1c1c, #333);
+            color: #e6e6e6;
+            padding: 20px 0;
+            position: relative;
+            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+            border-top-left-radius: 40px;
+            border-top-right-radius: 40px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
         .footer-content {
             display: flex;
-            justify-content: space-between;
-            padding: 20px;
-            background: #2C3E50;
-            color: #fff;
-            border-radius: 0 0 8px 8px;
+            justify-content: space-around;
+            align-items: flex-start;
+            padding: 40px 20px;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 2;
         }
+
         .footer-section {
             flex: 1;
-            padding: 10px;
+            margin: 15px;
+            min-width: 250px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 20px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .footer-section:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
         }
+
         .footer-section h3 {
-            margin-bottom: 15px;
-            font-size: 18px;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            color: #ffffff;
+            background: linear-gradient(45deg, #007bff, #ff7bff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 700;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }
+
+        .footer-section p,
+        .footer-section ul {
+            font-size: 1rem;
+            color: #ccc;
+        }
+
+        .footer-section ul {
+            list-style-type: none;
+            padding: 0;
         }
+
+        .footer-section ul li {
+            margin: 8px 0;
+        }
+
         .footer-section a {
-            color: #3498DB;
+            color: #e6e6e6;
+            text-decoration: none;
+            position: relative;
+            transition: color 0.3s ease, background 0.3s ease;
+        }
+
+        .footer-section a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, #007bff, #ff7bff);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.4s ease;
+        }
+
+        .footer-section a:hover::after {
+            transform: scaleX(1);
+        }
+
+        .footer-section a:hover {
+            color: #ff7bff;
         }
+
         .footer-bottom {
-            background: #1A252F;
-            color: #fff;
             text-align: center;
-            padding: 10px 0;
+            padding: 20px 0;
+            background-color: #151515;
+            font-size: 0.9rem;
+            position: relative;
+            z-index: 2;
         }
+
         .footer-bottom p {
-            text-align: center;
+            margin: 0;
+            color: #aaa;
+        }
 
+        .social {
+            margin-top: 20px;
         }
-        .title{
-            color: white;
+
+        .social a {
+            color: #fff;
+            font-size: 1.5rem;
+            margin-right: 15px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
+            display: inline-block;
+            text-align: center;
+            padding: 10px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
         }
-        .container h2{
-            color: beige;
+
+        .social a:hover {
+            color: #ff7bff;
+            transform: scale(1.3);
+            box-shadow: 0 0 15px rgba(255, 123, 255, 0.7);
         }
-        .dark-theme .card h3{
-            color: black;
+
+        @media (max-width: 768px) {
+            .footer-content {
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+            }
+
+            .footer-section {
+                margin-bottom: 20px;
+            }
+
+            .social a {
+                margin-right: 10px;
+            }
         }
     </style>
 
@@ -189,10 +300,12 @@ <h2>Contact Us</h2>
         <div class="footer-content">
             <div class="footer-section about">
                 <h3>Math 4 Python</h3>
-                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through interactive lessons with real-time feedback.</p>
-                <p><i class="fas fa-envelope"></i> contact@math4python.com</p>
-                <p><i class="fas fa-phone"></i> +123 456 7890</p>
+                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through
+                    interactive lessons with real-time feedback.</p>
+                <p><span class="fas fa-envelope"></span> contact@math4python.com</p>
+                <p><span class="fas fa-phone"></span> +123 456 7890</p>
             </div>
+
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -203,14 +316,16 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
+
             <div class="footer-section social">
                 <h3>Follow Us</h3>
-                <a href="#"><i class="fab fa-facebook"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-linkedin"></i></a>
-                <a href="#"><i class="fab fa-github"></i></a>
+                <a href="#"><span class="fab fa-facebook"></span></a>
+                <a href="#"><span class="fab fa-twitter"></span></a>
+                <a href="#"><span class="fab fa-linkedin"></span></a>
+                <a href="#"><span class="fab fa-github"></span></a>
             </div>
         </div>
+
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>
diff --git a/faq.html b/faq.html
index df20ae8..42aa16a 100644
--- a/faq.html
+++ b/faq.html
@@ -15,35 +15,61 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
     <style>
+        /* Footer section */
         footer {
-            background-color: #333;
-            color: #fff;
+            background: linear-gradient(135deg, #1c1c1c, #333);
+            color: #e6e6e6;
             padding: 20px 0;
+            position: relative;
+            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+            border-top-left-radius: 40px;
+            border-top-right-radius: 40px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
         .footer-content {
             display: flex;
             justify-content: space-around;
             align-items: flex-start;
-            padding: 20px;
+            padding: 40px 20px;
             flex-wrap: wrap;
-            /* Ensures wrapping on smaller screens */
+            position: relative;
+            z-index: 2;
         }
 
         .footer-section {
             flex: 1;
-            margin: 10px;
+            margin: 15px;
             min-width: 250px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 20px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .footer-section:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
         }
 
         .footer-section h3 {
-            font-size: 1.5rem;
-            margin-bottom: 10px;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            color: #ffffff;
+            background: linear-gradient(45deg, #007bff, #ff7bff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 700;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
         }
 
         .footer-section p,
         .footer-section ul {
             font-size: 1rem;
+            color: #ccc;
         }
 
         .footer-section ul {
@@ -52,40 +78,73 @@
         }
 
         .footer-section ul li {
-            margin: 5px 0;
+            margin: 8px 0;
         }
 
         .footer-section a {
-            color: #fff;
+            color: #e6e6e6;
             text-decoration: none;
+            position: relative;
+            transition: color 0.3s ease, background 0.3s ease;
+        }
+
+        .footer-section a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, #007bff, #ff7bff);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.4s ease;
+        }
+
+        .footer-section a:hover::after {
+            transform: scaleX(1);
         }
 
         .footer-section a:hover {
-            text-decoration: underline;
+            color: #ff7bff;
         }
 
         .footer-bottom {
             text-align: center;
-            padding: 10px 0;
-            background-color: #222;
+            padding: 20px 0;
+            background-color: #151515;
             font-size: 0.9rem;
+            position: relative;
+            z-index: 2;
         }
 
         .footer-bottom p {
             margin: 0;
+            color: #aaa;
+        }
+
+        .social {
+            margin-top: 20px;
         }
 
         .social a {
             color: #fff;
-            font-size: 1.2rem;
-            margin-right: 10px;
+            font-size: 1.5rem;
+            margin-right: 15px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
+            display: inline-block;
+            text-align: center;
+            padding: 10px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
         }
 
         .social a:hover {
-            color: #007bff;
+            color: #ff7bff;
+            transform: scale(1.3);
+            box-shadow: 0 0 15px rgba(255, 123, 255, 0.7);
         }
 
-        /* Responsive Design */
         @media (max-width: 768px) {
             .footer-content {
                 flex-direction: column;
@@ -98,16 +157,9 @@
             }
 
             .social a {
-                margin-right: 15px;
+                margin-right: 10px;
             }
         }
-
-        .footer-section h3 {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 15px;
-            color: #ffffff;
-        }
     </style>
 </head>
 
@@ -322,4 +374,4 @@ <h3>Follow Us</h3>
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/learn.html b/learn.html
index e352dbb..57982b9 100644
--- a/learn.html
+++ b/learn.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,14 +10,165 @@
     <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
-    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" ></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js" ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
     <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap"
+        rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <style>
+        /* Footer section */
+        footer {
+            background: linear-gradient(135deg, #1c1c1c, #333);
+            color: #e6e6e6;
+            padding: 20px 0;
+            position: relative;
+            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+            border-top-left-radius: 40px;
+            border-top-right-radius: 40px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .footer-content {
+            display: flex;
+            justify-content: space-around;
+            align-items: flex-start;
+            padding: 40px 20px;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 2;
+        }
+
+        .footer-section {
+            flex: 1;
+            margin: 15px;
+            min-width: 250px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 20px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .footer-section:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .footer-section h3 {
+            font-size: 2rem;
+            margin-bottom: 20px;
+            color: #ffffff;
+            background: linear-gradient(45deg, #007bff, #ff7bff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 700;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }
+
+        .footer-section p,
+        .footer-section ul {
+            font-size: 1rem;
+            color: #ccc;
+        }
+
+        .footer-section ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .footer-section ul li {
+            margin: 8px 0;
+        }
+
+        .footer-section a {
+            color: #e6e6e6;
+            text-decoration: none;
+            position: relative;
+            transition: color 0.3s ease, background 0.3s ease;
+        }
+
+        .footer-section a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, #007bff, #ff7bff);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.4s ease;
+        }
+
+        .footer-section a:hover::after {
+            transform: scaleX(1);
+        }
+
+        .footer-section a:hover {
+            color: #ff7bff;
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding: 20px 0;
+            background-color: #151515;
+            font-size: 0.9rem;
+            position: relative;
+            z-index: 2;
+        }
+
+        .footer-bottom p {
+            margin: 0;
+            color: #aaa;
+        }
+
+        .social {
+            margin-top: 20px;
+        }
+
+        .social a {
+            color: #fff;
+            font-size: 1.5rem;
+            margin-right: 15px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
+            display: inline-block;
+            text-align: center;
+            padding: 10px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .social a:hover {
+            color: #ff7bff;
+            transform: scale(1.3);
+            box-shadow: 0 0 15px rgba(255, 123, 255, 0.7);
+        }
+
+        @media (max-width: 768px) {
+            .footer-content {
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+            }
+
+            .footer-section {
+                margin-bottom: 20px;
+            }
+
+            .social a {
+                margin-right: 10px;
+            }
+        }
+    </style>
 </head>
+
 <body id="learn" onload="showEditor('Untitled')">
     <div class="navbar">
         <h1 class="title">MathPyLearn</h1>
@@ -42,7 +194,7 @@ <h1 class="title">MathPyLearn</h1>
             </button>
         </div>
     </div>
-    
+
     <div class="content">
         <h2>Python Lessons</h2>
         <p>Welcome to the Python lessons! Choose a lesson below to get started.</p>
@@ -68,22 +220,22 @@ <h2>Python Lessons</h2>
             <div class="editor-area">
                 <div id="editor-container">
                     <div id="editor-controls">
-                      
+
                         <button id="reset-code" class="btn reset-btn">
                             <i class="fas fa-redo"></i> Reset Code
-                          </button> <br>
+                        </button> <br>
                         <!-- <button id="copy-code">
                             <i class="fas fa-copy"></i> Copy Code
                         </button> -->
-                         <button id="copy-code" class="btn copy-btn">
-        <i class="fas fa-copy"></i> Copy Code
-      </button>
-      <br>
+                        <button id="copy-code" class="btn copy-btn">
+                            <i class="fas fa-copy"></i> Copy Code
+                        </button>
+                        <br>
                         <p id="copy-message" style="display: none; color: black;">Copied!</p>
                     </div>
                     <h2 style="color: black;">Code Input :</h2>
                     <div id="editor"></div>
-                    
+
                     <h2 style="color: black;">Output :</h2>
                     <div id="terminal-container">
                         <div id="terminal"></div>
@@ -94,24 +246,29 @@ <h2 style="color: black;">Output :</h2>
                     <button id="clear-button" onclick="clearTerminal()">Clear Terminal</button>
                     <br>
                     <br>
-                    
-                   
-        <div class="progress-container">
-            <h3>Lesson Progress</h3>
-            <div class="progress-bar">
-                <div id="lesson-progress" class="progress"></div>
+                    <div class="progress-container">
+                        <h3>Lesson Progress</h3>
+                        <div class="progress-bar">
+                            <div id="lesson-progress" class="progress"></div>
+                        </div>
+                        <button id="lesson-reset-btn" class="reset-btn">Reset Progress</button>
+                    </div>
+                </div>
             </div>
-            <button id="lesson-reset-btn" class="reset-btn">Reset Progress</button>
+
         </div>
     </div>
+
     <footer>
         <div class="footer-content">
             <div class="footer-section about">
                 <h3>Math 4 Python</h3>
-                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through interactive lessons with real-time feedback.</p>
-                <p><i class="fas fa-envelope"></i> contact@math4python.com</p>
-                <p><i class="fas fa-phone"></i> +123 456 7890</p>
+                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through
+                    interactive lessons with real-time feedback.</p>
+                <p><span class="fas fa-envelope"></span> contact@math4python.com</p>
+                <p><span class="fas fa-phone"></span> +123 456 7890</p>
             </div>
+
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -122,23 +279,26 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
+
             <div class="footer-section social">
                 <h3>Follow Us</h3>
-                <a href="#"><i class="fab fa-facebook"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-linkedin"></i></a>
-                <a href="#"><i class="fab fa-github"></i></a>
+                <a href="#"><span class="fab fa-facebook"></span></a>
+                <a href="#"><span class="fab fa-twitter"></span></a>
+                <a href="#"><span class="fab fa-linkedin"></span></a>
+                <a href="#"><span class="fab fa-github"></span></a>
             </div>
         </div>
+
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>
     </footer>
+    
     <button onclick="topFunction()" id="nav-top"><i class="material-icons">arrow_upward</i></button>
     <script src="script.js"></script>
     <script>
         let mybutton = document.getElementById("nav-top");
-        window.onscroll = function() {scrollFunction()};
+        window.onscroll = function () { scrollFunction() };
         function scrollFunction() {
             if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                 mybutton.style.display = "block";
@@ -154,4 +314,5 @@ <h3>Follow Us</h3>
         }
     </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 581640f..94c3339 100644
--- a/styles.css
+++ b/styles.css
@@ -3,8 +3,10 @@ body {
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #eef2f7; /* Softer, modern background */
-    color: white; /* Darker text */
+    background-color: #eef2f7;
+    /* Softer, modern background */
+    color: white;
+    /* Darker text */
     transition: background-color 0.3s ease, color 0.3s ease;
     line-height: 1.6;
 }
@@ -16,7 +18,8 @@ body {
     justify-content: space-between;
     align-items: center;
     padding: 15px 30px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for a floating effect */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    /* Soft shadow for a floating effect */
     position: sticky;
     top: 0;
     z-index: 1000;
@@ -25,7 +28,8 @@ body {
 .navbar .nav-links {
     display: flex;
     gap: 20px;
-    flex-grow: 1; /* Ensures links take up available space */
+    flex-grow: 1;
+    /* Ensures links take up available space */
 }
 
 #theme-toggle {
@@ -52,29 +56,30 @@ body {
 
 .navbar a {
     width: 7em;
-  position: relative;
-  height: 3.5em;
-  border: 3px ridge #149CEA;
-  outline: none;
-  background-color: transparent;
-  color: white;
-  transition: 1s;
-  border-radius: 0.3em;
-  font-size: 16px;
-  font-weight: bold;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  font-family: Georgia, 'Times New Roman', Times, serif;
-  font-size: large;
-
-}
-
-  .navbar a:hover::before, .navbar a:hover::after {
+    position: relative;
+    height: 3.5em;
+    border: 3px ridge #149CEA;
+    outline: none;
+    background-color: transparent;
+    color: white;
+    transition: 1s;
+    border-radius: 0.3em;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: large;
+
+}
+
+.navbar a:hover::before,
+.navbar a:hover::after {
     transform: scale(0)
-  }
+}
 
 .navbar a:hover {
     box-shadow: inset 0px 0px 25px #1479EA;
@@ -88,7 +93,8 @@ body {
 
 /* Theme Toggle Alignment Fix */
 .theme-toggle {
-    margin-left: auto; /* Pushes the toggle button to the far right */
+    margin-left: auto;
+    /* Pushes the toggle button to the far right */
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -113,21 +119,34 @@ body {
     margin: 0 auto;
     background-color: #fff;
     border-radius: 12px;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Stronger shadow for modern look */
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    /* Stronger shadow for modern look */
     transition: background-color 0.3s ease;
-    animation: fadeIn 1.2s ease-in-out; /* Smooth content load animation */
+    animation: fadeIn 1.2s ease-in-out;
+    /* Smooth content load animation */
     margin-bottom: 35px;
     color: black;
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
     color: black;
-    font-weight: 700; /* Bolder titles */
+    font-weight: 700;
+    /* Bolder titles */
 }
 
 h1 {
@@ -147,7 +166,8 @@ h2 {
 }
 
 .feature {
-    background: linear-gradient(135deg, #fff, #f0f4f8); /* Subtle gradient */
+    background: linear-gradient(135deg, #fff, #f0f4f8);
+    /* Subtle gradient */
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
@@ -157,7 +177,8 @@ h2 {
 
 .feature:hover {
     transform: translateY(-8px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Lift on hover */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    /* Lift on hover */
 }
 
 .feature h3 {
@@ -229,7 +250,8 @@ h2 {
 }
 
 /* Button Styles */
-#run-button, #clear-button {
+#run-button,
+#clear-button {
     padding: 12px 24px;
     background-color: #007bff;
     color: white;
@@ -244,7 +266,8 @@ h2 {
     background-color: #dc3545;
 }
 
-#run-button:hover, #clear-button:hover {
+#run-button:hover,
+#clear-button:hover {
     transform: scale(1.05);
 }
 
@@ -254,8 +277,10 @@ h2 {
 
 /* Dark Theme */
 body.dark-theme {
-    background-color: #1b1b1b; /* Darker background */
-    color: #e0e0e0; /* Light text */
+    background-color: #1b1b1b;
+    /* Darker background */
+    color: #e0e0e0;
+    /* Light text */
 }
 
 body.dark-theme .navbar {
@@ -309,11 +334,13 @@ body.dark-theme .cta-button {
         grid-template-columns: 1fr;
     }
 
-    .learn-container, .challenge-container {
+    .learn-container,
+    .challenge-container {
         flex-direction: column;
     }
 
-    .lesson-list, #challenge-list {
+    .lesson-list,
+    #challenge-list {
         flex: none;
         width: 100%;
     }
@@ -322,7 +349,8 @@ body.dark-theme .cta-button {
         flex-direction: column;
     }
 
-    #editor, #terminal-container {
+    #editor,
+    #terminal-container {
         width: 100%;
     }
 }
@@ -408,7 +436,8 @@ a.clicked {
     font-weight: bold;
 }
 
-.accordion:hover, .accordion.active {
+.accordion:hover,
+.accordion.active {
     background-color: #e0e0e0;
 }
 
@@ -461,87 +490,173 @@ body.dark-theme .accordion.active {
         width: 100%;
     }
 }
+
+body.dark-theme .cta-button:hover {
+    background-color: #0056b3;
+}
+
+#nav-top {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: #0056b3;
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 70px;
+    font-size: 18px;
+}
+
+#nav-top:hover {
+    background-color: #555;
+}
+
+/* Footer section */
 footer {
-    background-color: #333;
-    color: #fff;
+    background: linear-gradient(135deg, #1c1c1c, #333);
+    color: #e6e6e6;
     padding: 20px 0;
-    text-align: center;
+    position: relative;
+    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .footer-content {
     display: flex;
-    justify-content: space-between;
-    max-width: 1200px;
-    margin: auto;
+    justify-content: space-around;
+    align-items: flex-start;
+    padding: 40px 20px;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: 2;
 }
 
 .footer-section {
     flex: 1;
-    margin: 0 20px;
+    margin: 15px;
+    min-width: 250px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    padding: 20px;
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 
-.footer-section h3 {
-    margin-bottom: 15px;
-    font-size: 1.2em;
+.footer-section:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
-.footer-section p {
-    font-size: 0.9em;
-    line-height: 1.6;
+.footer-section h3 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #ffffff;
+    background: linear-gradient(45deg, #007bff, #ff7bff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+    border-bottom: 2px solid #007bff;
+    padding-bottom: 10px;
+}
+
+.footer-section p,
+.footer-section ul {
+    font-size: 1rem;
+    color: #ccc;
 }
 
 .footer-section ul {
-    list-style: none;
+    list-style-type: none;
     padding: 0;
 }
 
 .footer-section ul li {
-    margin: 10px 0;
+    margin: 8px 0;
 }
 
-.footer-section ul li a {
-    color: #fff;
+.footer-section a {
+    color: #e6e6e6;
     text-decoration: none;
+    position: relative;
+    transition: color 0.3s ease, background 0.3s ease;
 }
 
-.footer-section ul li a:hover {
-    color: #ffcc00;
+.footer-section a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, #007bff, #ff7bff);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s ease;
 }
 
-.footer-section.social a {
-    margin: 0 10px;
-    color: #fff;
-    font-size: 1.5em;
+.footer-section a:hover::after {
+    transform: scaleX(1);
+}
+
+.footer-section a:hover {
+    color: #ff7bff;
 }
 
 .footer-bottom {
-    margin-top: 30px;
-    font-size: 0.8em;
+    text-align: center;
+    padding: 20px 0;
+    background-color: #151515;
+    font-size: 0.9rem;
+    position: relative;
+    z-index: 2;
 }
 
 .footer-bottom p {
     margin: 0;
+    color: #aaa;
 }
-body.dark-theme .cta-button:hover {
-    background-color: #0056b3;
+
+.social {
+    margin-top: 20px;
 }
 
-#nav-top {
-    display: none; 
-    position: fixed; 
-    bottom: 20px; 
-    right: 30px; 
-    z-index: 99; 
-    border: none; 
-    outline: none; 
-    background-color: #0056b3; 
-    color: white; 
-    cursor: pointer;
+.social a {
+    color: #fff;
+    font-size: 1.5rem;
+    margin-right: 15px;
+    transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
+    display: inline-block;
+    text-align: center;
     padding: 10px;
-    border-radius: 70px; 
-    font-size: 18px; 
-  }
-  
-  #nav-top:hover {
-    background-color: #555; 
-  }
\ No newline at end of file
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.social a:hover {
+    color: #ff7bff;
+    transform: scale(1.3);
+    box-shadow: 0 0 15px rgba(255, 123, 255, 0.7);
+}
+
+@media (max-width: 768px) {
+    .footer-content {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .footer-section {
+        margin-bottom: 20px;
+    }
+
+    .social a {
+        margin-right: 10px;
+    }
+}