diff --git a/footer.css b/footer.css
index 7ccc199d..5572cf32 100644
--- a/footer.css
+++ b/footer.css
@@ -1,14 +1,36 @@
 /* General styles for the footer */
 footer {
   background-color: #f7f7f7; /* Light gray background */
-  padding: 30px 15px;
+  /* padding: 30px 15px; */
   text-align: center;
   color: #000;
   font-family: Arial, sans-serif;
+  height: auto;
+  width: 100vw;
+  /* border: 1px solid black; */
+  height: 100vh;
+  margin: 0;
+}
+
+.dark-change{
+  color:white !important;
+  background-color: black;
+}
+
+.footer-content {
+  display: flex;
+  /* justify-content: space-between; Use space-between for horizontal alignment */
+  justify-content: space-evenly;
+  align-items: flex-start;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eaeaea;
+  /* border:1px solid black; */
+  width:100%;
 }
 
 .footer-section {
   flex: 1;
+  /* border:1px solid black; */
   margin: 0 15px;
 }
 
@@ -16,123 +38,75 @@ footer {
   margin-bottom: 15px;
   color: #000;
   font-size: 18px;
-  font-weight: bold;
-  position: relative;
-  transition: text-shadow 0.3s ease, color 0.3s ease;
-    background-color: #f7f7f7; /* Light gray background */
-    /* padding: 30px 15px; */
-    text-align: center;
-    color: #000;
-    font-family: Arial, sans-serif;
-    height: auto;
-    width: 100vw;
-    /* border: 1px solid black; */
-    height: 20vh;
-    margin: 0;
-}
-
-.dark-change{
-    color:white !important;
-    background-color: black;
-}
-
-
-.footer-content {
-    display: flex;
-    justify-content: space-between; /* Use space-between for horizontal alignment */
-   align-items: flex-strt;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #eaeaea;
-    /* border:1px solid black; */
-    width:100%;
+  font-weight: 600;
 }
 
 .footer-section p {
   color: #666;
   font-size: 14px;
 }
+
+/* Quick Links styling */
 .footer-section ul {
-  display: flex;                  /* Arrange items in a row */
-  justify-content: center;         /* Center-align the links */
-  gap: 30px;                       /* Space between each link */
-  list-style: none;                /* Remove bullet points */
-  padding: 0;                      /* Remove padding for cleaner alignment */
-  margin: 20px 0;                  /* Add vertical spacing around the links */
+  list-style: none;
+  padding: 0;
+  display: flex; /* Change to flex for horizontal layout */
+  flex-wrap: wrap; /* Allow wrapping */
+  justify-content: space-between; /* Space items evenly */
+}
+
+.footer-section ul li {
+  margin: 0 10px; /* Horizontal margin between links */
 }
 
 .footer-section ul li a {
   text-decoration: none;
-  color: #00FFFF;                  /* Set link color */
-  font-size: 14px;                 /* Adjust font size */
-  transition: color 0.3s;          /* Smooth transition on hover */
+  color: #000;
+  font-size: 14px;
+  transition: color 0.3s ease;
 }
 
 /* Hover effect on links */
-[data-theme="dark"] .footer-section ul li a:hover {
+.footer-section ul li a:hover {
   color: #f8c5c5;
 }
 
-[data-theme="dark"] .footer-section ul li a {
-  text-decoration: none;
-  color: white;
-  font-size: 14px;
-  transition: color 0.3s ease;
-}
 
 
 /* Subscribe form */
 .newsletter form {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
+  width:100%;
+  
 }
 
 .newsletter input[type="email"] {
   padding: 10px;
-  width: 70%;
+  width: 100%;
   border: 1px solid #ddd;
   border-radius: 5px;
-  margin-right: 10px;
+  /* margin-left: 5px; */
 }
 
-.newsletter button {
-    padding: 10px 20px;
-    background-color: #f8c5c5;
-    color: #000;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transform: translateY(-8px);
-    transition: background-color 0.3s ease;
+.newsletter .subscribe {
+   color:black;
+   border:none;
+   border-radius:5px;
+   cursor:pointer;
+   padding:10px 20px;
+   background-color: #f8c5c5;
+   transition: background-color 0.3s ease;
+   /* margin-left:100px; */
 }
 
 /* Hover effect on the subscribe button */
 .newsletter button:hover {
-  background-color: #e39a9a;
-}
-
-/* Footer bottom links */
-.footer-links-bottom {
-  display: flex;
-  justify-content: space-around;
-  padding: 15px 0;
-  background-color: #eaeaea;
-}
-
-.footer-links-bottom a {
-  text-decoration: none;
-  color: #00b894;
-  font-size: 14px;
-  margin: 0 10px;
-  transition: color 0.3s ease;
-}
-
-/* Hover effect on footer bottom links */
-.footer-links-bottom a:hover {
-  color: #0984e3;
-    background-color: #e59e9e; /* A darker shade for hover effect */
-   
+  /* A darker shade for hover effect */
+    background-color:#e59e9e;
 }
 
 /* Footer bottom section */
@@ -141,107 +115,37 @@ footer {
   padding-bottom: 10px; /* Add some bottom padding */
   background-color: #eaeaea; /* Background color for the footer bottom */
   text-align: center; /* Center the text */
+  margin-top: 20px; /* Add margin to prevent overlap */
+  /* border:5px solid red; */
+  color:white;
+  height:10rem;
 }
 
-.footer-bottom .social-icons {
-  margin: 10px 0;
-}
-
-.footer-bottom .social-icons a {
-  margin: 0 8px;
-  color: #000;
-  font-size: 20px;
-  transition: color 0.3s ease;
-  border-radius: 50%;
-}
-
-[data-theme="dark"] .footer-bottom{
-  background-color: #000327;
-  color:white !important;
-}
-
-/* Hover effect on social icons */
-.footer-bottom .social-icons a:hover {
-  color: #f8c5c5;
-  animation-name: spin;
-  animation-duration: 2500ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-.social-media {
-  display: flex;
-  justify-content: center; /* Center the icons horizontally */
-  gap: 15px; /* Adds space between each icon */
-  padding: 20px 0; /* Adds some padding above and below the icons */
-}
-
-.spaced-item {
-  font-size: 24px; /* Adjust icon size if necessary */
-  color: #333; /* Icon color */
-  transition: color 0.3s ease; /* Smooth color transition on hover */
-}
-
-.spaced-item:hover {
-  color: #007bff; /* Change color on hover */
-}
-
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg) scale(1.3);
-  }
-  to {
-    transform: rotate(360deg) scale(1.3);
-  }}
-
 .footer-bottom p {
-    margin: 0; /* Remove default margin */
-    color: #666; /* Dark gray color for the text */
-    font-size: 14px; /* Font size */
-    font-family: Arial, sans-serif; /* Font family */
+  margin-top:20px; /* Remove default margin */
+  color: #666; /* Dark gray color for the text */
+  font-size: 14px; /* Font size */
+  font-family: Arial, sans-serif; /* Font family */
 }
 
 /* Mobile view adjustments */
 @media (max-width: 768px) {
   .footer-content {
-    flex-direction: column;
-    align-items: center;
+      flex-direction: column;
+      align-items: center;
+  }
+  .footer-section ul {
+      flex-direction: column; /* Stack links vertically on smaller screens */
+  }
+  .footer-section ul li {
+      margin: 5px 0; /* Adjust margin for vertical alignment */
   }
-}
-  
-.newsletter input[type="email"],
-.newsletter button {
-  width: 100%;
-  margin-bottom: 10px;
-}
-/* Hover effect on the subscribe button */
-.newsletter button:hover {
-  background-color: #e39a9a;
-  transform: scale(1.05); /* Slightly enlarge the button */
-}
-/* Footer bottom section */
-.footer-bottom {
-  padding-top: 10px;
-  padding-bottom: 10px; /* Add some bottom padding */
-  background-color: #eaeaea; /* Background color for the footer bottom */
-  text-align: center; /* Center the text */
 }
 
-.footer-bottom p {
-  margin: 0; /* Remove default margin */
-  color: #666; /* Dark gray color for the text */
-  font-size: 14px; /* Font size */
-  font-family: Arial, sans-serif; /* Font family */
+.footer-bottom .social-icons{
+  margin-top:20px;
 }
 
-/* Media Query for responsive design */
-@media (max-width: 768px) {
-  .footer-bottom p {
-    font-size: 12px; /* Adjust font size for smaller screens */
-  }
-}
-  
 .footer-bottom .social-icons a {
   margin: 0 8px;
   color: #000; /* Default color */
@@ -255,68 +159,41 @@ footer {
 }
 
 /* Specific hover colors for each icon */
-.footer-bottom .social-icons a:hover .fab.fa-facebook-f {
+.footer-bottom .social-icons .fab.fa-facebook-f:hover {
   color: #3b5998; /* Facebook Blue */
-  border: 2px solid #3b5998;
-  border-radius: 50%;
-  padding: 5px;
-  }
+}
 
 .footer-bottom .social-icons a:hover .fab.fa-twitter {
   color: #1da1f2; /* Twitter Blue */
-  border: 2px solid #1da1f2;
-  border-radius: 50%;
-  padding: 5px;
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-instagram {
   color: #e1306c; /* Instagram Red */
-  border: 2px solid #e1306c;
-  border-radius: 50%;
-  padding: 5px;
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-linkedin-in {
   color: #0077b5; /* LinkedIn Blue */
-  border: 2px solid #0077b5;
-  border-radius: 50%;
-  padding: 5px;
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-youtube {
   color: #ff0000; /* YouTube Red */
-  border: 2px solid #ff0000;
-  border-radius: 50%;
-  padding: 5px;
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-pinterest {
   color: #e60023; /* Pinterest Red */
-  border: 2px solid #e60023;
-  border-radius: 50%;
-  padding: 5px;
 }
 
 .footer-bottom .social-icons a:hover .fab.fa-snapchat-ghost {
-  color: #fffc00; /* Snapchat Yellow */
-  border: 2px solid #fffc00;
-  border-radius: 50%;
-  padding: 5px;
+   color: #fffc00;; /* Snapchat Yellow */
+   
 }
 
 .gridbox {
-  list-style: none;
-    padding: 0;
-    display: flex;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 10px;
-    /* margin-left: 96px; */
-    /* margin-top: 30px; */
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-content: flex-end;
-    justify-content: center;
-    align-items: flex-start;
+  list-style: none; /* Remove bullet points */
+  padding: 0; /* Remove default padding */
+  display: grid; /* Use grid for layout */
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
+  gap: 15px; /* Space between items */
 }
 
 .gridbox li {
@@ -334,55 +211,67 @@ footer {
 .gridbox a:hover {
   color: #f8c5c5; /* Change color on hover */
   text-decoration: underline; /* Add underline on hover */
-} 
+}
 
 
+
+
+.social-media a {
+  border:1px solid black;
+  color: black;
+  margin: 0 10px; /* Adjusts horizontal spacing between icons */
+}
+
 .social-media {
-    display: flex; /* Aligns icons in a row */
-    justify-content: center; /* Centers the icons */
+  display: flex; /* Aligns icons in a row */
+  justify-content: center; /* Centers the icons */
 }
 
 .social-media a {
-    margin: 0 10px; /* Adjusts horizontal spacing between icons */
-    color: #030202;/* Change color as needed */
-    text-decoration: none; /* Removes underline from links */
-}
-[data-theme="dark"] .social-media a {
   margin: 0 10px; /* Adjusts horizontal spacing between icons */
-  color: #fff;/* Change color as needed */
+  color: white; /* Change color as needed */
   text-decoration: none; /* Removes underline from links */
 }
 
 .social-media a:hover {
-    color: #007bff; /* Change color on hover */
+  color: #007bff; /* Change color on hover */
 }
 
 .share-section {
-    display: flex; /* Align buttons in a row */
-    justify-content: center; /* Center the buttons */
-    margin-top: 20px; /* Space above the buttons */
+  display: flex; /* Align buttons in a row */
+  justify-content: center; /* Center the buttons */
+  margin-top: 20px; /* Space above the buttons */
 }
 
 button {
-    background-color: #007bff; /* Blue background for buttons */
-    color: white; /* Text color */
-    border: none; /* Removes border */
-    border-radius: 5px; /* Rounds corners */
-    padding: 10px 20px; /* Padding for buttons */
-    margin: 0 10px; /* Space between buttons */
-    cursor: pointer; /* Changes cursor to pointer on hover */
-    transition: background-color 0.3s; /* Smooth transition for hover effect */
+  background-color: #007bff; /* Blue background for buttons */
+  color: white; /* Text color */
+  border: none; /* Removes border */
+  border-radius: 5px; /* Rounds corners */
+  padding: 10px 20px; /* Padding for buttons */
+  margin: 0 10px; /* Space between buttons */
+  cursor: pointer; /* Changes cursor to pointer on hover */
+  transition: background-color 0.3s; /* Smooth transition for hover effect */
 }
 
 button:hover {
-    background-color: #0056b3; /* Darker blue on hover */
+  background-color: #0056b3; /* Darker blue on hover */
 }
 
 
+.quick-links ul{
+  display:flex;
+  flex-direction: column;
+  max-width:25rem;
+} 
 
+.quick-links ul li{
+  margin-bottom:10px;
+}
 
-
-
+.footer-main-bottom{
+  
+}
 
 
 /* =========================================FOOTER DARK THEME=============================================*/
diff --git a/index.html b/index.html
index 7e2d621c..98ba2297 100644
--- a/index.html
+++ b/index.html
@@ -4740,27 +4740,28 @@ <h3 class="card-heading">Eigen Value and Vector Calculator</h3>
     <!--============================== End =========================================== -->
 
     <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
-
-    <div>
+    <div class="feedback-form">
 
         <section id="feedback">
             <div class="container">
                 <h2>We Value Your Feedback!</h2>
                 <p>Your input helps us improve our services. Please share your thoughts with us below.</p>
                 <form id="feedbackForm">
+
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                             oninput="this.setCustomValidity('')">
                     </div>
-    
+
+
                     <div class="form-group">
                         <label for="email">Email</label>
                         <input type="email" id="email" name="email" placeholder="Your Email" required>
                     </div>
 
-                  
+        
         <div class="form-group">
           <label for="rating"></label>
           
@@ -4777,12 +4778,36 @@ <h2>We Value Your Feedback!</h2>
             <label for="feedback-content">Your Feedback</label>
             <textarea id="feedback-content" name="feedback" rows="5" placeholder="Tell us about your experience..." required></textarea>
           </div>
+    
+        <style>
+            .stars {
+               
+                cursor: pointer;
+                font-size: 2rem;
+                color: gray;
+            }
+            .star {
+                transition: color 0.2s;
+            }
+            .star.selected {
+                color: gold;
+            }
+        </style>
         
        <script>document.addEventListener("DOMContentLoaded", () => {
         const stars = document.querySelectorAll(".star");
         const ratingValue = document.getElementById("rating-value");
         let selectedRating = 0;
-
+    
+        stars.forEach(star => {
+            star.addEventListener("mouseover", () => highlightStars(star.dataset.value));
+            star.addEventListener("mouseout", () => highlightStars(selectedRating));
+            star.addEventListener("click", () => {
+                selectedRating = star.dataset.value;
+                ratingValue.innerText = `Rating: ${selectedRating}`;
+            });
+        });
+    
         function highlightStars(rating) {
             stars.forEach(star => {
                 star.classList.toggle("selected", star.dataset.value <= rating);
@@ -4794,85 +4819,34 @@ <h2>We Value Your Feedback!</h2>
 
     </script>
 
+
+
                     <button type="submit">Submit Feedback</button>
                 </form>
             </div>
         </section>
     </div>
-    
-    <style>
-        .stars {
-            cursor: pointer;
-            font-size: 2rem;
-            color: gray;
-        }
-        .star {
-            transition: color 0.2s;
-        }
-        .star.selected {
-            color: gold;
-        }
-    </style>
-    
     <script>
-        // JavaScript for star rating interaction
-        document.addEventListener("DOMContentLoaded", () => {
-            const stars = document.querySelectorAll(".star");
-            const ratingValue = document.getElementById("rating-value");
-            let selectedRating = 0;
+        document.getElementById('feedbackForm').addEventListener('submit', function(event) {
+            // Prevent the default form submission behavior
+            event.preventDefault();
     
-            stars.forEach(star => {
-                star.addEventListener("mouseover", () => highlightStars(star.dataset.value));
-                star.addEventListener("mouseout", () => highlightStars(selectedRating));
-                star.addEventListener("click", () => {
-                    selectedRating = star.dataset.value;
-                    ratingValue.innerText = `Rating: ${selectedRating}`;
-                });
-            });
+            // Show an alert message
+            alert('Your feedback has been submitted! Thank you!');
     
-            function highlightStars(rating) {
-                stars.forEach(star => {
-                    star.classList.toggle("selected", star.dataset.value <= rating);
-                });
-            }
+            // clear the form fields after submission
+            document.getElementById('name').value = '';
+            document.getElementById('email').value = '';
+            document.getElementById('feedback').value = '';
+            document.getElementById('rating').selectedIndex = 0; // Reset the rating dropdown
+            document.getElementById("rating-value").innerText = "Rating: 0"; // Reset the rating display
+            // Reset star selection
+        const stars = document.querySelectorAll(".star");
+        stars.forEach(star => {
+            star.classList.remove("selected");
         });
-    </script>
-    
-    <script>
-        // JavaScript for form submission and clearing fields
-        document.addEventListener('DOMContentLoaded', function () {
-            document.getElementById('feedbackForm').addEventListener('submit', function(event) {
-                event.preventDefault();
-    
-                // Show an alert message
-                alert('Your feedback has been submitted! Thank you!');
-    
-                // Clear form fields after submission
-                const nameField = document.getElementById('name');
-                const emailField = document.getElementById('email');
-                const feedbackField = document.getElementById('userFeedback'); // Updated ID
-                const ratingValueDisplay = document.getElementById("rating-value");
-    
-                if (nameField && emailField && feedbackField && ratingValueDisplay) {
-                    nameField.value = '';
-                    emailField.value = '';
-                    feedbackField.value = ''; // Clear feedback field
-                    ratingValueDisplay.innerText = "Rating: 0";
-                    console.log('Form fields cleared');
-                } else {
-                    console.error('One or more form elements were not found.');
-                }
-    
-                // Reset star selection
-                const stars = document.querySelectorAll(".star");
-                stars.forEach(star => {
-                    star.classList.remove("selected");
-                });
-            });
         });
     </script>
-
-    
     <style>
         /* Feedback Form Section */
         #feedback {
@@ -4885,6 +4859,34 @@ <h2>We Value Your Feedback!</h2>
             color: black;
         }
 
+
+        /* Dark theme of the Fedback Section */
+        [data-theme="dark"] .feedback-form input,
+        [data-theme="dark"] .feedback-form textarea,
+        [data-theme="dark"] .form-group textarea
+        [data-theme="dark"] .form-group #feedback-content{
+            background-color:#000327;
+            color:white;
+        }
+        
+        [data-theme="dark"] #feedback{
+            background:#000327;
+            border-top:1px solid #333;
+        }
+
+        [data-theme="dark"] .dark-change{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+        [data-theme="dark"] .quickLinks{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+
+
+
         #feedback h2 {
             font-size: 2rem;
             margin-bottom: 10px;
@@ -4959,10 +4961,8 @@ <h2>We Value Your Feedback!</h2>
         }
     </style>
 
-    <!-- Footer -->
-    <footer>
+    <!-- <footer>
         <div class="footer-content">
-            <!-- Quick Links Section -->
             <div class="footer-section quick-links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -4973,12 +4973,10 @@ <h3>Quick Links</h3>
                     <li><a href="#">Contact</a></li>
                 </ul>
             </div>
-            <!-- About Us Section -->
-            <div class="footer-section about-us">
+            <div class="footer-section about-us" id="about">
                 <h3>About Us</h3>
                 <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
             </div>
-            <!-- Newsletter Section -->
             <div class="footer-section newsletter">
                 <h3>Subscribe to Our Newsletter</h3>
                 <form>
@@ -4988,6 +4986,7 @@ <h3>Subscribe to Our Newsletter</h3>
             </div>
         </div>
 
+    </footer>  -->
 
 
     <!-- Added FAQ Section -->
@@ -5021,6 +5020,59 @@ <h3 class="faq-question">Where can I find the source code?</h3>
         </div>
     </section>
     
+    <style>
+        /* FAQ Section Styling */
+        #faq {
+            background-color: #f8f8f8;
+            padding: 50px 20px;
+        }
+        
+        #faq h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+
+        /*Dark Mode theme styling adjustments*/
+        [data-theme="dark"] #faq,
+        [data-theme="dark"] #faq h2{
+            background-color:#000327;
+            color:white;
+        }
+
+        [data-theme="dark"] .faq-item h3,
+        [data-theme="dark"] .faq-item p{
+            color:white;
+        }
+        
+        .faq-item {
+            margin-bottom: 15px;
+            border-bottom: 1px solid #ccc;
+            padding: 15px 0;
+        }
+    
+        .faq-question {
+            cursor: pointer;
+            font-size: 1.2rem;
+            color: #333;
+            margin: 0;
+            padding: 10px;
+            transition: background 0.3s;
+        }
+    
+        .faq-question:hover {
+            background-color: #f0f0f0;
+        }
+    
+        .faq-answer {
+            display: none;
+            margin-top: 10px;
+            font-size: 1rem;
+            color: #666;
+        }
+        
+        </style>
+    
     <script>
         document.addEventListener('DOMContentLoaded', function () {
     const faqQuestions = document.querySelectorAll('.faq-question');
@@ -5054,216 +5106,57 @@ <h3 class="faq-question">Where can I find the source code?</h3>
     
     
 
+<!-- Footer -->
+<footer id="footer1">
+    <div class="footer-content">
+        <!-- Quick Links Section -->
+        <div class="footer-section quick-links">
+            <h3>Quick Links</h3>
+            <ul>
+                <li><a href="./index.html">Home</a></li>
+                <li><a href="chatbot.html">ChatBot</a></li>
+                <li><a href="./feedback.html">Feedback</a></li>
+                <li><a href="./faq.html">FAQ's</a></li>
+                <li><a href="./contact.html">Contact</a></li>
+            </ul>
+        </div>
 
-    <footer>
-        <div class="footer-content">
-            <!-- Quick Links Section -->
-            <div class="footer-section quick-links">
-                <h3>Quick Links</h3>
-                <ul>
-                    <li><a href="./index.html">Home</a></li>
-                    <li><a href="chatbot.html">ChatBot</a></li>
-                    <li><a href="./feedback.html">Feedback</a></li>
-                    <li><a href="./faq.html">FAQ's</a></li>
-                    <li><a href="./contact.html">Contact</a></li>
-                </ul>
-            </div>
-    
-            <!-- About Us Section -->
-            <div class="footer-section about-us">
-                <h3>About Us</h3>
-                <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
-            </div>
-    
-            <!-- Newsletter Section -->
-            <div class="footer-section newsletter">
-                <h3>Subscribe to Our Newsletter</h3>
-                <form>
-                    <input type="email" placeholder="Enter your email" required>
-                    <button type="submit" class="subscribe-btn">Subscribe</button>
-                </form>
-            </div>
-    
-            <!-- Social Media Section -->
-            <div class="follow-us">
-                <h3>Follow Us</h3>
-                <a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn Logo" />
-                </a>
-                <a href="https://x.com/be_rajeevkumar" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter Logo" />
-                </a>
-                <a href="https://github.com/beRajeevKumar" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" />
-                </a>
-            </div>
+        <!-- About Us Section -->
+        <div class="footer-section about-us">
+            <h3>About Us</h3>
+            <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
         </div>
-    
-        <!-- Share Button -->
-        <div class="share-section">
-            <button id="shareBtn" class="share-btn">Share Us</button>
+
+        <!-- Newsletter Section -->
+        <div class="footer-section newsletter">
+            <h3>Subscribe to Our Newsletter</h3>
+            <form>
+                <input type="email" placeholder="Enter your email" required>
+               <button type="submit" class="subscribe">Subscribe</button>
+               
+            </form>
         </div>
-    
-        <!-- Bottom Links Section -->
-        <ul class="gridbox">
-            <li><a href="#">Help Centre</a></li>
-            <li><a href="./welcometestimonials.html">Testimonials</a></li>
-            <li><a href="#">Account</a></li>
-            <li><a href="#">Media Centre</a></li>
-            <li><a href="./terms.html">Terms of Use</a></li>
-            <li><a href="./privacy.html">Privacy</a></li>
-            <li><a href="#">Cookie Preferences</a></li>
-            <li><a href="./contact.html">Contact Us</a></li>
-        </ul>
-    
-        <!-- Footer Bottom -->
-        <div class="footer-bottom">
-            <div class="social-icons">
-                <a href="#"><i class="fab fa-facebook-f"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-instagram"></i></a>
-                <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                <a href="#"><i class="fab fa-youtube"></i></a>
-                <a href="#"><i class="fab fa-pinterest"></i></a>
-                <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
-            </div>
-            <p>© 2024 Open Projects. All Rights Reserved.</p>
+
+        <div class="footer-section follow-us" id="footer-section">
+            <DIV>
+                <h3>Follow Us</h3>
+            <a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn Logo" />
+            </a>
+            <a href="https://x.com/be_rajeevkumar" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter Logo" />
+            </a>
+            <a href="https://github.com/beRajeevKumar" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" />
+            </a>
+            </DIV>
         </div>
-    </footer>
-    
-    <!-- Styles -->
-    <style>
-        /* Footer Section Styling */
-        footer {
-            background: #040423;
-            color: #eee;
-            padding: 20px;
-            font-family: Arial, sans-serif;
-        }
-    
-        .footer-content {
-            display: flex;
-            justify-content: space-between;
-            padding: 20px 0;
-        }
-    
-        .footer-section h3 {
-            color: #f8b400;
-        }
-    
-        .footer-section ul {
-            list-style: none;
-            padding: 0;
-        }
-    
-        .footer-section ul li a {
-            color: #ccc;
-            text-decoration: none;
-        }
-    
-        .footer-section ul li a:hover {
-            color: #f8b400;
-            transition: color 0.3s;
-        }
-    
-        /* Newsletter and Share Button */
-        .subscribe-btn, .share-btn {
-            background: linear-gradient(45deg, #ff7e5f, #feb47b);
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            cursor: pointer;
-            transition: background 0.3s, transform 0.3s;
-        }
-    
-        .subscribe-btn:hover, .share-btn:hover {
-            background: linear-gradient(45deg, #feb47b, #ff7e5f);
-            transform: scale(1.05);
-        }
-    
-        /* Follow Us Icons */
-        .follow-us a img {
-            width: 30px;
-            height: 30px;
-            margin: 0 10px;
-            transition: transform 0.3s;
-        }
-    
-        .follow-us a img:hover {
-            transform: scale(1.2);
-        }
-    
-        /* Social Icons */
-        .social-icons a {
-            color: #eee;
-            font-size: 20px;
-            margin-right: 15px;
-            transition: color 0.3s, transform 0.3s;
-        }
-    
-        .social-icons a:hover {
-            color: #f8b400;
-            transform: scale(1.1);
-        }
-    
-        /* Gridbox Links */
-        .gridbox {
-            display: flex;
-            justify-content: center;
-            padding: 20px 0;
-            list-style: none;
-        }
-    
-        .gridbox li {
-            margin: 0 10px;
-        }
-    
-        .gridbox a {
-            color: #ccc;
-            text-decoration: none;
-        }
-    
-        .gridbox a:hover {
-            color: #f8b400;
-        }
-    
-        /* Footer Bottom */
-        .footer-bottom {
-            text-align: center;
-            padding-top: 10px;
-            border-top: 1px solid #040423;
-        }
-    
-        .footer-bottom p {
-            color:#040423;
-        }
-    </style>
-    
-    <!-- Share Button Script -->
-    <script>
-        document.getElementById('shareBtn').addEventListener('click', function() {
-            if (navigator.share) {
-                navigator.share({
-                    title: 'Contact Us',
-                    text: 'Check out this Contact Us page!',
-                    url: window.location.href
-                }).then(() => {
-                    console.log('Thanks for sharing!');
-                }).catch((error) => {
-                    console.error('Error sharing:', error);
-                });
-            } else {
-                alert('Web Share API is not supported in your browser.');
-            }
-        });
-    </script>
-    
 
+    </div>
 
 
-    <!-- Bottom Links Section -->
-    <ul class="gridbox">
+     <!-- Bottom Links Section  -->
+<ul class="gridbox">
         <li><a href="#">Help Centre</a></li>
         <li><a href="./welcometestimonials.html">Testimonials</a></li>
         <li><a href="#">Account</a></li>
@@ -5272,25 +5165,37 @@ <h3>Follow Us</h3>
         <li><a href="./privacy.html">Privacy</a></li>
         <li><a href="#">Cookie Preferences</a></li>
         <li><a href="./contact.html">Contact Us</a></li>
-
-    </ul> 
-
+    </ul>
+    <!-- Share Section -->
+    <div class="share-section">
+        <button id="shareBtn">Share Us</button>
+    </div>
     <!-- Social Media Icons -->
-    <div class="social-media">
-        <a class="spaced-item" href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
-        <a class="spaced-item" href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
-        <a class="spaced-item" href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
-        <a class="spaced-item" href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>
-        <a class="spaced-item" href="https://www.pinterest.com" target="_blank"><i class="fab fa-pinterest"></i></a>
-        <a class="spaced-item" href="https://www.snapchat.com" target="_blank"><i class="fab fa-snapchat-ghost"></i></a>
-        <a class="spaced-item" href="https://www.github.com" target="_blank"><i class="fab fa-github"></i></a>
+    
+    <div class="footer-bottom" id="footer-bottom">
+        <div class="social-icons">
+            <a href="#"><i class="fab fa-facebook-f"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-linkedin-in"></i></a> 
+            <a href="#"><i class="fab fa-youtube"></i></a> 
+            <a href="#"><i class="fab fa-pinterest"></i></a> 
+            <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
+        </div>
+        <p>© 2024 Open Projects. All Rights Reserved. </p>
     </div>
 
-    <!-- Footer Bottom -->
-    <div class="footer-bottom">
-        <p>© 2024 Open Projects. All Rights Reserved.</p>
-    </div> 
+    <link rel="stylesheet" href="visi.css">
+<!-- ############### Footer ############### -->
+<!-- Footer Visitor Counter -->
+<div class="visitor-counter-container">
+    <div class="visitor-counter">
+        <div>Visitor Count: </div>
+        <div class="website-counter"></div>
+    </div>
+</div>
 
+<script src="visi.js"></script>
 </footer>
 
 
@@ -5312,6 +5217,21 @@ <h3>Follow Us</h3>
         }
     });
 </script>
+
+    <style>
+        .share-section {
+            text-align: center;
+        }
+        #shareBtn {
+            background-color: #f71257;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+
+        }
+    </style>
     
 
 
@@ -5344,6 +5264,289 @@ <h3>Follow Us</h3>
 
 <br /><br />
 
+ 
+
+  
+<style>
+
+body {
+font-family: Arial, sans-serif;
+height: auto;
+
+}
+
+/* Popup Styles */
+.popup {
+
+display: none; /* Hidden by default */
+position: fixed; /* Stay in place */
+left: 0;
+top: 0;
+width: 100%; /* Full width */
+height: 100%; /* Full height */
+background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+justify-content: center; /* Center the popup */
+align-items: center; /* Center the popup */
+z-index: 1000; /* Sit on top */
+
+}
+.source-code-btn {
+    background-color:#f02647 ;
+}
+.popup-content {
+
+background: linear-gradient(#f74b67, #e7d3d7), url(your-image-url.jpg);
+padding: 20px;
+border-radius: 5px;
+max-width: 400px;
+text-align: center;
+
+}
+
+/* Set poll options to stack vertically */
+#pollOptions {
+
+display: flex;
+flex-direction: column; /* Stack buttons vertically */
+align-items: center; /* Center the buttons */
+
+}
+
+.poll-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: #4CAF50; /* Green */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+
+}
+
+.poll-button:hover {
+
+background-color: #45a049; /* Darker green */
+
+}
+
+.poll-button.selected {
+
+background-color: #2196F3; /* Blue for selected */
+
+}
+
+/* New Vote Button Styles */
+.vote-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: #f44336; /* Red */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+
+}
+
+.vote-button:hover {
+
+background-color: #d32f2f; /* Darker red */
+
+}
+
+.uppercase {
+
+text-transform: uppercase;
+font-size: 15px;
+
+}
+
+        .popup-nl {
+  
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            justify-content: center;
+            align-items: center;
+            z-index: 1009;
+  
+        }
+  
+        .popup-content-nl {
+  
+            display: flex;
+            background-color: white;
+            border-radius: 10px;
+            max-width: 800px;
+            height: 450px;
+            width: 700px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  
+        }
+  
+        .close1-btn-nl {
+  
+            width: 20px;
+            cursor: pointer;
+            margin: 18px 10px;
+            position: absolute;
+            top: -4px;
+            right: 12px;
+            font-size: 18px;
+            font-weight: 800;
+  
+        }
+  
+        .popup-left-nl img {
+  
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+  
+        }
+  
+        .popup-right-nl {
+  
+            padding: 20px;
+            width: 50%;
+            display: flex;
+            flex-direction: column; 
+            align-items: center;
+            justify-content: center;
+  
+        }
+  
+        .popup-nl h1 {
+  
+            font-size: 24px;
+            background: linear-gradient(to right, #913700, #ff6000, #913700); 
+            -webkit-text-fill-color: transparent;
+            background-clip: text; 
+            -webkit-background-clip: text;
+            text-align: center;
+            margin-bottom: 12px;
+            margin-top: 35px;
+  
+        }
+  
+        .h2-nl{
+  
+            font-size: 18px;
+            margin-bottom: 8px;
+            text-align: center;
+            color: #333;
+  
+        }
+  
+        .pop_up-nl {
+  
+            margin-bottom: 15px;
+            font-weight: bold;
+            background: -webkit-linear-gradient(left, #007d39, #44f899, #005f2b);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-size: 12.7px;
+  
+        }
+  
+        .bold{
+  
+            font-size: 13.1px;
+  
+        }
+  
+        input[type="email"] {
+  
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 16px;
+            border: 1px solid #000000;
+            border-radius: 5px;
+            font-size: 14px;
+  
+        }
+  
+        .signup-btn1-nl {
+  
+            width: 100%;
+            height: 30px;
+            text-align: center;
+            background: linear-gradient(to right, #febd1b, #ffdb80, #febd1b);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+  
+        }
+  
+        .signup-btn1-nl:hover {
+  
+            background-color: #4682B4;
+  
+        }
+  
+        .no-thanks-nl {
+  
+            display: block;
+            margin-top: 10px;
+            color: #888;
+            text-decoration: none;
+            margin-bottom: 15px;
+  
+        }
+  
+        .no-thanks-nl:hover {
+  
+            color: #000000;
+            font-size: 14px;
+  
+        }
+  
+        .terms-nl {
+  
+            margin-top: 15px;
+            font-size: 10px;
+            color: #888;
+  
+        }
+  
+        .terms-nl a {
+  
+            display: inline;
+  
+        }
+  
+        .terms-nl a:hover {
+  
+            text-decoration: underline;
+  
+        }
+  
+        .popup-right-nl p {
+  
+            margin-top: 0;
+            margin-bottom: 10px;
+            text-align: center;
+  
+        }
+  
+  
+</style>
       <div id="popup-nl" class="popup-nl">
         <div class="popup-content-nl">
             <div class="popup-left-nl">