diff --git a/index.html b/index.html
index e6170561..cb3f40a8 100644
--- a/index.html
+++ b/index.html
@@ -25,11 +25,14 @@
       </div>
       <div class="navbar-right">
         <a href="pages/githubbadge.html" class="navbar-link">Github-Badge</a>
-        <a href="#" class="navbar-link">Tools</a>
-        <a href="pages/events.html" class="navbar-link">Events</a>
-        <a href="pages/blog.html" class="navbar-link">Learn</a>
         <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
         class="navbar-link">Add Profile</a>
+        <a href="#" class="navbar-link">Tools</a>
+        <a href="./pages/events.html" class="navbar-link">Events</a>
+        <a href="pages/blog.html" class="navbar-link">Learn</a>
+        <a href="./pages/compare.html" class="navbar-link">Compare</a>
+
+       
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
@@ -50,9 +53,9 @@
     <div class="mobile-menu" id="mobile-menu">
       <a href="pages/githubbadge.html" class="navbar-links">Github-Badge</a>
       <a href="#" class="navbar-links">Tools</a>
-      <a href="pages/events.html" class="navbar-links">Events</a>
+      <a href="/events.html" class="navbar-links">Events</a>
       <a href="pages/blog.html" class="navbar-links">Blog</a>
-      <a href="#" class="navbar-links">Add Profile</a>
+      <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="navbar-links">Add Profile</a>
       <a href="pages/blog.html" class="navbar-links">Learn</a>
   </div>
 
diff --git a/pages/blog.html b/pages/blog.html
index 841728e4..7feacc9f 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -15,36 +15,37 @@
 </head>
 <body>
     <!-- Navbar -->
-    <nav class="navbar">
-        <a href="../index.html" style="text-decoration: none; color: #333;">
-          <div class="navbar-left" onclick="window.location.href=`../index.html`">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-             <span class="navbar-text">Recode Hive</span>
-        </div>
-        </a>
+	<nav class="navbar">
+        <a class="navbar-left" style="color: #333 !important;text-decoration: none;" href="../index.html">
+          <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+          <span class="navbar-text">Recode Hive</span>
+		</a>
         <div class="navbar-right">
-			<a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-            <a href="#" class="navbar-link">Tools</a>
-            <a href="events.html" class="navbar-link">Events</a>
-			<a href="#" class="navbar-link">Learn</a>
-            <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
-			class="navbar-link">Add Profile</a>
-            <div class="toggle-switch">
-                <input type="checkbox" id="theme-toggle">
-                <label for="theme-toggle">
-                  <div class="switch-button">
-                    <span class="material-icons sun-icon">wb_sunny</span>
-                    <span class="material-icons moon-icon">brightness_2</span>
-                  </div>
-                </label>
+          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+          <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
+          class="navbar-link">Add Profile</a>
+          <a href="#" class="navbar-link">Tools</a>
+          <a href="events.html" class="navbar-link">Events</a>
+          <a href="blog.html" class="navbar-link">Learn</a>
+          <a href="compare.html" class="navbar-link">Compare</a>
+  
+         
+          <div class="toggle-switch">
+            <input type="checkbox" id="theme-toggle">
+            <label for="theme-toggle">
+              <div class="switch-button">
+                <span class="material-icons sun-icon">wb_sunny</span>
+                <span class="material-icons moon-icon">brightness_2</span>
               </div>
+            </label>
+          </div>
+        </div>
+        <div class="hamburger" id="hamburger">
+          <div></div>
+          <div></div>
+          <div></div>
         </div>
-		<div class="hamburger" id="hamburger">
-			<div></div>
-			<div></div>
-			<div></div>
-		  </div>
-    </nav>
+      </nav> 
 	<div class="mobile-menu" id="mobile-menu">
 		<a href="events.html" class="navbar-links">Events</a>
             <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
diff --git a/pages/compare.html b/pages/compare.html
new file mode 100644
index 00000000..53ccf913
--- /dev/null
+++ b/pages/compare.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Awesome GitHub Profile READMEs</title>
+    <link rel="shortcut icon" href="assets/recode-hive.png" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="../styles/styles.css" />
+    <link rel="stylesheet" href="../styles/compare.css" />
+    <link rel="stylesheet" href="../styles/hamburger.css" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+  </head>
+  <body>
+    <nav class="navbar">
+      <a class="navbar-left" style="color: #333 !important;text-decoration: none;" href="../index.html">
+        <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+        <span class="navbar-text">Recode Hive</span>
+      </a>
+      <div class="navbar-right">
+        <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+        <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
+        class="navbar-link">Add Profile</a>
+        <a href="#" class="navbar-link">Tools</a>
+        <a href="events.html" class="navbar-link">Events</a>
+        <a href="blog.html" class="navbar-link">Learn</a>
+        <a href="compare.html" class="navbar-link">Compare</a>
+
+       
+        <div class="toggle-switch">
+          <input type="checkbox" id="theme-toggle">
+          <label for="theme-toggle">
+            <div class="switch-button">
+              <span class="material-icons sun-icon">wb_sunny</span>
+              <span class="material-icons moon-icon">brightness_2</span>
+            </div>
+          </label>
+        </div>
+      </div>
+      <div class="hamburger" id="hamburger">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </nav> 
+    <div class="mobile-menu" id="mobile-menu">
+      <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
+        <a href="#" class="navbar-links">Tools</a>
+        <a href="events.html" class="navbar-links">Events</a>
+        <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
+        <a href="blog.html" class="navbar-links">Learn</a>
+        <a href="blog.html" class="navbar-links">Blog</a>
+        <a href="#" class="navbar-links">Add Profile</a>
+    </div>
+
+    <div class="container">
+        <h1>GitHub Contributor Comparison</h1>
+        
+        <div class="form-group">
+            <label for="contributorSelect1">Contributor 1:</label>
+            <select id="contributorSelect1" class="select">
+                <option value="">Select Contributor 1</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label for="contributorSelect2">Contributor 2:</label>
+            <select id="contributorSelect2" class="select">
+                <option value="">Select Contributor 2</option>
+            </select>
+        </div>
+
+        <button id="submitBtn" class="button">Submit</button>
+
+        <div id="comparisonTable" class="comparison hidden">
+            <h2>Contributor Comparison</h2>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Attribute</th>
+                        <th>Contributor 1</th>
+                        <th>Contributor 2</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Login</td>
+                        <td id="login1"></td>
+                        <td id="login2"></td>
+                    </tr>
+                    <tr>
+                        <td>Name</td>
+                        <td id="name1"></td>
+                        <td id="name2"></td>
+                    </tr>
+                    <tr>
+                        <td>Bio</td>
+                        <td id="bio1"></td>
+                        <td id="bio2"></td>
+                    </tr>
+                    <tr>
+                        <td>Location</td>
+                        <td id="location1"></td>
+                        <td id="location2"></td>
+                    </tr>
+                    <tr>
+                        <td>Public Repos</td>
+                        <td id="repos1"></td>
+                        <td id="repos2"></td>
+                    </tr>
+                    <tr>
+                        <td>Followers</td>
+                        <td id="followers1"></td>
+                        <td id="followers2"></td>
+                    </tr>
+                    <tr>
+                        <td>Following</td>
+                        <td id="following1"></td>
+                        <td id="following2"></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <footer id="Contact" class="footer-2">
+      <div class="footer-container">
+        <div class="footer-content">
+          <div class="footer-info">
+            <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
+          </div>
+    
+          <div class="footer-links">
+            <div class="footer-section">
+             <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
+             <div>
+              <a href="help.html" class="footer-link">Contact Us</a>
+              <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
+             </div>
+            </div>
+            <div class="footer-section">
+              <h6 class="footer-heading">GET INVOLVED</h6>
+              <div>
+                <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
+                <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
+              </div>
+            </div>
+          </div>
+    
+          <div class="footer-description">
+            <h5>
+              We focus on quality content for the right people at the right time⏱️. What we are trying to do is help you to brand personal skills through GitHub readme.md, So we listing the best profiles & opportunity to list your profile to the world 🌎.
+            </h5>
+            <a href="exploremore.html" class="footer-button">Explore</a>
+          </div>
+        </div>
+      </div>
+    
+      <div class="footer-bottom">
+        <div class="footer-container">
+          <p class="footer-copyright">
+            &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Scroll to top -->
+    <button id="scrollToTop" aria-label="Scroll to top">
+      <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
+        <path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/>
+      </svg>
+    </button>
+
+
+    
+    <script src="../scripts/ScrollToTop.js"></script>
+    <script src="../scripts/dark-mode.js"></script>
+    <script src="../scripts/compare.js"></script>
+    <script src="../scripts/hamburger.js"></script>
+
+  </body>
+</html>
diff --git a/pages/events.html b/pages/events.html
index a3b6834d..f4eed5d9 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -12,11 +12,9 @@
 </head>
 <body>
     <nav class="navbar">
-        <a href="../index.html" style="text-decoration: none; color: #333;">
-          <div class="navbar-left" onclick="window.location.href=`../index.html`">
+        <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
             <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
              <span class="navbar-text">Recode Hive</span>
-        </div>
         </a>
         <div class="navbar-right">
           <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
@@ -52,13 +50,13 @@
     <div class="container">
         <h1 class="main-heading">Events Timeline</h1>
         
-        <div class="timeline">
+        <div style="position: relative;" class="timeline">
             <!-- Event 1 -->
-            <div class="timeline-item">
+            <div class="timeline-item" style="position: relative;">
                 <div class="timeline-content">
                   <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/A7PchMiBeN4?si=2WnNqY6FwuCrLjQr" frameborder="0" allowfullscreen></iframe>
-                </div>
+                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/AtoVNe1mVUA?start=792" frameborder="0" allowfullscreen></iframe>
+                  </div>
                 
                     <h2 class="event-title">GitHub Profile Review Live Session</h2>
                     <p class="event-date">Date: 18 Jul 2024</p>
@@ -69,14 +67,15 @@ <h2 class="event-title">GitHub Profile Review Live Session</h2>
                       </p>
                     <a href="#" class="event-link">Learn More</a>
                 </div>
-            </div>
+                <div class="line scroll-animate " id="scroll1"></div>
 
+            </div>
             <!-- Event 2 -->
             <div class="timeline-item">
                 <div class="timeline-content">
                   <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/A7PchMiBeN4?si=2WnNqY6FwuCrLjQr" frameborder="0" allowfullscreen></iframe>
-                </div>
+                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/Rm2lT9j6VxQ?start=522" frameborder="0" allowfullscreen></iframe>
+                  </div>
                     <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
                     <p class="event-date">Date: 21 Jul 2024</p>
                     <p class="event-description">Session Highlights:
@@ -84,16 +83,25 @@ <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
                       💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
                     <a href="#" class="event-link">Learn More</a>
                 </div>
+                <div class="line1 scroll-animate" id="scroll2"></div>
+
             </div>
 
             <!-- Event 3 -->
             <div class="timeline-item">
-                <div class="timeline-content">
-                    <h2 class="event-title">Upcoming Events</h2>
-                    <p class="event-date">Date: TBA</p>
-                    <p class="event-description">Upcoming Events Will Be Add In Future .</p>
-                    <a href="#" class="event-link">Learn More</a>
+              <div class="timeline-content">
+                <div class="banner">
+                  <iframe width="100%" height="315" src="https://www.youtube.com/embed/rNF66FCLmYM?start=90" frameborder="0" allowfullscreen></iframe>
                 </div>
+                  <h2 class="event-title">GitHub Profile Review Live Session : #3</h2>
+                  <p class="event-date">Date: 7 Aug 2024</p>
+                  <p class="event-description">Session Highlights:
+                    🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
+                    💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
+                  <a href="#" class="event-link">Learn More</a>
+              </div>
+                <div class="line scroll-animate" id="scroll3"></div>
+
             </div>
 
             <!-- Add more event containers as needed -->
@@ -145,6 +153,64 @@ <h5>
     <script src="../scripts/script.js"></script>
     <script src="../scripts/dark-mode.js"></script>
 	  <script src="../scripts/hamburger.js"></script>
+    <script>
+
+      function active(){
+          const contentDiv = document.getElementById('scroll1');
+          contentDiv.style.height='103%'
+      }
+      function active1(){
+          const contentDiv = document.getElementById('scroll2');
+          contentDiv.style.height='100%'
+      }
+      function active2(){
+          const contentDiv = document.getElementById('scroll3');
+          contentDiv.style.height='108%'
+      }
+      document.addEventListener('DOMContentLoaded', () => {
+        const contentDiv = document.getElementById('scroll1');
+        const contentDiv1 = document.getElementById('scroll2');
+        const contentDiv2 = document.getElementById('scroll3');
 
+        contentDiv.style.height='0%'
+
+          contentDiv1.style.height='0%'
+          contentDiv2.style.height='0%'
+
+        // Function to call when the content div comes into view
+        function handleIntersection(entries, observer) {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              // Call your function here
+              if(entry.target.id=="scroll1"){
+                  active();
+              } if(entry.target.id=="scroll2"){
+                  active1()
+              } if(entry.target.id=="scroll3"){
+                active2()
+              }
+  
+              // Optionally, stop observing after the first intersection
+              observer.unobserve(entry.target);
+            }
+          });
+        }
+  
+        // Create an Intersection Observer instance
+        const observer = new IntersectionObserver(handleIntersection, {
+          root: null, // Use the viewport as the root
+          rootMargin: '-200px',
+          threshold: 0.1 // Trigger when 10% of the target is visible
+        });
+  
+        // Start observing the target element
+        observer.observe(contentDiv);
+        observer.observe(contentDiv1);
+        observer.observe(contentDiv2);
+
+        // Example function to call when content div is in view
+      
+      });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/exploremore.html b/pages/exploremore.html
index 7db21e71..6e24368f 100644
--- a/pages/exploremore.html
+++ b/pages/exploremore.html
@@ -18,34 +18,37 @@
 </head>
 
 <body>
-    <nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`../index.html`">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-          <span class="navbar-text">Recode Hive</span>
-        </div>
-        <div class="navbar-right">
-          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-          <a href="#" class="navbar-link">Tools</a>
-          <a href="events.html" class="navbar-link">Events</a>
-          <a href="blog.html" class="navbar-link">Learn</a>
-          <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
-          class="navbar-link">Add Profile</a>
-          <div class="toggle-switch">
-            <input type="checkbox" id="theme-toggle">
-            <label for="theme-toggle">
-              <div class="switch-button">
-                <span class="material-icons sun-icon">wb_sunny</span>
-                <span class="material-icons moon-icon">brightness_2</span>
-              </div>
-            </label>
-          </div>
-        </div>
-        <div class="hamburger" id="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
+  <nav class="navbar">
+    <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
+      <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+      <span class="navbar-text">Recode Hive</span>
+    </a>
+    <div class="navbar-right">
+      <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+      <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
+      class="navbar-link">Add Profile</a>
+      <a href="#" class="navbar-link">Tools</a>
+      <a href="events.html" class="navbar-link">Events</a>
+      <a href="blog.html" class="navbar-link">Learn</a>
+      <a href="compare.html" class="navbar-link">Compare</a>
+
+     
+      <div class="toggle-switch">
+        <input type="checkbox" id="theme-toggle">
+        <label for="theme-toggle">
+          <div class="switch-button">
+            <span class="material-icons sun-icon">wb_sunny</span>
+            <span class="material-icons moon-icon">brightness_2</span>
           </div>
-      </nav>
+        </label>
+      </div>
+    </div>
+    <div class="hamburger" id="hamburger">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </nav> 
       <div class="mobile-menu" id="mobile-menu">
         <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
           <a href="#" class="navbar-links">Tools</a>
diff --git a/pages/githubbadge.html b/pages/githubbadge.html
index 9a58b860..03b786fb 100644
--- a/pages/githubbadge.html
+++ b/pages/githubbadge.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">
@@ -14,49 +15,67 @@
             background-color: #f4f4f4;
             color: #333;
         }
+
         .container {
             max-width: 1200px;
             margin: auto;
             padding: 20px;
             /* background: #fff; */
             border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
-        h1, h2 {
+
+        h1,
+        h2 {
             color: #333;
         }
+
         table {
             width: 100%;
             border-collapse: collapse;
             margin-bottom: 20px;
         }
-        table, th, td {
+
+        table,
+        th,
+        td {
             border: 1px solid #ddd;
         }
-        th, td {
+
+        th,
+        td {
             padding: 10px;
             text-align: center;
         }
+
         img {
             max-width: 100%;
             height: auto;
         }
+
         .center {
             text-align: center;
         }
+
         @media (max-width: 768px) {
             .table-wrapper {
                 overflow-x: auto;
                 display: block;
             }
-            table, th, td {
+
+            table,
+            th,
+            td {
                 display: block;
                 width: 100%;
             }
-            th, td {
+
+            th,
+            td {
                 box-sizing: border-box;
                 padding: 10px;
             }
+
             td {
                 border: none;
                 border-bottom: 1px solid #ddd;
@@ -64,6 +83,7 @@
                 padding-left: 50%;
                 text-align: right;
             }
+
             td::before {
                 content: attr(data-label);
                 position: absolute;
@@ -75,234 +95,245 @@
             }
         }
 
-        
-    #scrollToTop {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      background-color: black;
-      color: white;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-      transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    #scrollToTop:hover{
-      background-color: rgb(62, 62, 62);
-    }
-
-    #scrollToTop.show {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    #scrollToTop .arrow-icon {
-      fill: white;
-      width: 24px;
-      height: 24px;
-      transition: transform 0.3s;
-    }
-
-    #scrollToTop:hover {
-      transform: translateY(-5px); /* Move button up on hover */
-    }
-
-    #scrollToTop:hover .arrow-icon {
-      transform: translateY(-2px); /* Move arrow up on hover */
-    }
-
-    body.dark-mode #scrollToTop {
-      background-color: white;
-      color: black;
-    }
-
-    body.dark-mode #scrollToTop:hover {
-      background-color: rgba(182, 182, 182, 0.999);
-    }
-
-    body.dark-mode #scrollToTop .arrow-icon {
-      fill: black;
-    }
-
-    html {
-      scroll-behavior: smooth;
-    }
-
-    .navbar-links {
-    margin-left: 20px;
-    text-decoration: none;
-    color: #fff;
-  }
-
-  .hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-    transition: transform 0.6s ease;
-  }
-
-  .hamburger div {
-    width: 25px;
-    height: 2px;
-    background-color: #000000;
-    margin: 4px;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-  }
-
-  .hamburger.active div:nth-child(1) {
-    transform: translateY(6px) rotate(45deg);
-  }
-
-  .hamburger.active div:nth-child(2) {
-      opacity: 0;
-  }
-
-  .hamburger.active div:nth-child(3) {
-      transform: translateY(-6px) rotate(-45deg);
-  }
-
-  .mobile-menu {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    background-color: #ffffff;
-    width: 100%;
-    position: absolute;
-    top: 52px;
-    left: 0;
-    opacity: 0;
-    z-index: 999;
-    transform: translateY(-20px);
-    transition: transform 0.5s ease, opacity 0.3s ease;
-  }
-
-
-  .mobile-menu a {
-    padding: 10px;
-    width: 100%;
-    text-align: center;
-    /* border-bottom: 1px solid #444; */
-    color: #000000;
-    text-decoration: none;
-  }
-
-  .mobile-menu.show {
-    display: flex;
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .mobile-menu a:hover {
-    text-decoration: underline;
-  }
-
-  
-  body.dark-mode .hamburger div {
-    background-color: white;
-  }
-
-  body.dark-mode .mobile-menu a {
-    color: white;
-  }
-
-  body:not(.dark-mode) .badges-icons-light {
-    display: none !important;
-  }
-  body.dark-mode .badges-icons-dark {
-    /* color: white; */
-    display: none !important;
-  }
-  body:not(.dark-mode) .badges-icons-dark {
-    display: inline !important;
-  }
-
-  body.dark-mode .mobile-menu {
-    background-color: #333;
-    color: #f0f0f0;
-  }
-
-
-  @media (max-width: 768px) {
-    .navbar-right {
-      display: none !important;
-    }
-
-    .hamburger {
-      display: flex;
-    }
-
-    .side-icons {
-        flex-direction: column;
-        margin-top: 35px;
-    }
-
-  }
-  </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
-    rel="stylesheet"
-  />
-
-  <link rel="stylesheet" href="../styles/styles.css">
-  <link rel="stylesheet" href="../styles/githubbadge.css" />
+
+        #scrollToTop {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background-color: black;
+            color: white;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        #scrollToTop:hover {
+            background-color: rgb(62, 62, 62);
+        }
+
+        #scrollToTop.show {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        #scrollToTop .arrow-icon {
+            fill: white;
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s;
+        }
+
+        #scrollToTop:hover {
+            transform: translateY(-5px);
+            /* Move button up on hover */
+        }
+
+        #scrollToTop:hover .arrow-icon {
+            transform: translateY(-2px);
+            /* Move arrow up on hover */
+        }
+
+        body.dark-mode #scrollToTop {
+            background-color: white;
+            color: black;
+        }
+
+        body.dark-mode #scrollToTop:hover {
+            background-color: rgba(182, 182, 182, 0.999);
+        }
+
+        body.dark-mode #scrollToTop .arrow-icon {
+            fill: black;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        .navbar-links {
+            margin-left: 20px;
+            text-decoration: none;
+            color: #fff;
+        }
+
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            cursor: pointer;
+            transition: transform 0.6s ease;
+        }
+
+        .hamburger div {
+            width: 25px;
+            height: 2px;
+            background-color: #000000;
+            margin: 4px;
+            transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+
+        .hamburger.active div:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+        }
+
+        .hamburger.active div:nth-child(2) {
+            opacity: 0;
+        }
+
+        .hamburger.active div:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+        }
+
+        .mobile-menu {
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            background-color: #ffffff;
+            width: 100%;
+            position: absolute;
+            top: 52px;
+            left: 0;
+            opacity: 0;
+            z-index: 999;
+            transform: translateY(-20px);
+            transition: transform 0.5s ease, opacity 0.3s ease;
+        }
+
+
+        .mobile-menu a {
+            padding: 10px;
+            width: 100%;
+            text-align: center;
+            /* border-bottom: 1px solid #444; */
+            color: #000000;
+            text-decoration: none;
+        }
+
+        .mobile-menu.show {
+            display: flex;
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .mobile-menu a:hover {
+            text-decoration: underline;
+        }
+
+
+        body.dark-mode .hamburger div {
+            background-color: white;
+        }
+
+        body.dark-mode .mobile-menu a {
+            color: white;
+        }
+
+        body:not(.dark-mode) .badges-icons-light {
+            display: none !important;
+        }
+
+        body.dark-mode .badges-icons-dark {
+            /* color: white; */
+            display: none !important;
+        }
+
+        body:not(.dark-mode) .badges-icons-dark {
+            display: inline !important;
+        }
+
+        body.dark-mode .mobile-menu {
+            background-color: #333;
+            color: #f0f0f0;
+        }
+
+
+        @media screen and (max-width: 768px) {
+            .navbar-right {
+                display: none !important;
+            }
+
+            .hamburger {
+                display: flex;
+            }
+
+            .side-icons {
+                flex-direction: column;
+                margin-top: 35px;
+            }
+
+            .ways-content {
+                padding: 0 !important;
+            }
+        }
+    </style>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+
+    <link rel="stylesheet" href="../styles/styles.css">
+    <link rel="stylesheet" href="../styles/githubbadge.css" />
 
 </head>
+
 <body>
     <nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`../index.html`">
+        <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
             <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
           <span class="navbar-text">Recode Hive</span>
-        </div>
+        </a>
         <div class="navbar-right">
-          <a href="#" class="navbar-link">Github-Badge</a>
-          <a href="#" class="navbar-link">Tools</a>
-        <a href="events.html" class="navbar-link">Events</a>
-        <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
-        class="navbar-link">Add Profile</a>
-        <a href="blog.html" class="navbar-link">Learn</a>
-          <div class="toggle-switch">
-            <input type="checkbox" id="theme-toggle">
-            <label for="theme-toggle">
-              <div class="switch-button">
-                <span class="material-icons sun-icon">wb_sunny</span>
-                <span class="material-icons moon-icon">brightness_2</span>
-              </div>
-            </label>
-          </div>
+            <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+            <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
+                class="navbar-link">Add Profile</a>
+            <a href="#" class="navbar-link">Tools</a>
+            <a href="events.html" class="navbar-link">Events</a>
+            <a href="blog.html" class="navbar-link">Learn</a>
+            <a href="compare.html" class="navbar-link">Compare</a>
+
+
+            <div class="toggle-switch">
+                <input type="checkbox" id="theme-toggle">
+                <label for="theme-toggle">
+                    <div class="switch-button">
+                        <span class="material-icons sun-icon">wb_sunny</span>
+                        <span class="material-icons moon-icon">brightness_2</span>
+                    </div>
+                </label>
+            </div>
         </div>
         <div class="hamburger" id="hamburger">
             <div></div>
             <div></div>
             <div></div>
         </div>
-      </nav>
-      <div class="mobile-menu" id="mobile-menu">
-		<a href="#" class="navbar-links">Github-Badge</a>
-          <a href="#" class="navbar-links">Tools</a>
+    </nav>
+    <div class="mobile-menu" id="mobile-menu">
+        <a href="#" class="navbar-links">Github-Badge</a>
+        <a href="#" class="navbar-links">Tools</a>
         <a href="events.html" class="navbar-links">Events</a>
         <a href="blog.html" class="navbar-links">Blog</a>
-        <a href="#" class="navbar-links">Add Profile</a>
+        <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
+            class="navbar-links">Add Profile</a>
         <a href="blog.html" class="navbar-links">Learn</a>
-	</div>
-    
+    </div>
+
     <div class="container">
         <div class="center">
             <div style="display: flex;flex-direction: column;align-items: center;">
 
                 <h1>🏆 GitHub Achievements 🏆</h1>
-                <img src="https://user-images.githubusercontent.com/65187002/172940015-d9d072e7-c47d-4ddd-83f6-8e7717a721b8.png" class="lightmodeimg" height="100" width="100" alt="Achievements Banner">
-                <img src="https://user-images.githubusercontent.com/65187002/172940773-7ef23b63-3356-4634-9e52-34f2676e2854.png" height="100" class="darkmodeimg" width="100" alt="Achievements Preview">
-                <h1 >Github</h1>
+                <img src="https://user-images.githubusercontent.com/65187002/172940015-d9d072e7-c47d-4ddd-83f6-8e7717a721b8.png"
+                    class="lightmodeimg" height="100" width="100" alt="Achievements Banner">
+                <img src="https://user-images.githubusercontent.com/65187002/172940773-7ef23b63-3356-4634-9e52-34f2676e2854.png"
+                    height="100" class="darkmodeimg" width="100" alt="Achievements Preview">
+                <h1>Github</h1>
             </div>
         </div>
 
@@ -319,7 +350,8 @@ <h2>📃 Achievement List 📃</h2>
             </thead>
             <tbody>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60px" alt="Starstruck"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                            width="60px" alt="Starstruck"></td>
                     <td>Starstruck</td>
                     <td>Created a repository that has many stars</td>
                     <td>
@@ -334,10 +366,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60px" alt="Starstruck Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Bronze.png" width="60px" alt="Starstruck Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Silver.png" width="60px" alt="Starstruck Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Gold.png" width="60px" alt="Starstruck Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                            width="60px" alt="Starstruck Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Bronze.png"
+                                            width="60px" alt="Starstruck Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Silver.png"
+                                            width="60px" alt="Starstruck Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Gold.png"
+                                            width="60px" alt="Starstruck Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>16</td>
@@ -350,7 +386,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                            width="60px" alt="Quickdraw"></td>
                     <td>Quickdraw</td>
                     <td>Gitty up!<br>(closed an issue / pull request within 5 minutes of opening)</td>
                     <td>
@@ -362,7 +399,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                            width="60px" alt="Quickdraw Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -372,9 +410,12 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png" width="60px" alt="Pair Extraordinaire"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
+                            width="60px" alt="Pair Extraordinaire"></td>
                     <td>Pair Extraordinaire</td>
-                    <td><a href="https://docs.github.com/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors">Coauthored</a> commits on merged pull request</td>
+                    <td><a
+                            href="https://docs.github.com/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors">Coauthored</a>
+                        commits on merged pull request</td>
                     <td>
                         <table>
                             <thead>
@@ -387,10 +428,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png" width="60px" alt="Pair Extraordinaire Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png" width="60px" alt="Pair Extraordinaire Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png" width="60px" alt="Pair Extraordinaire Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png" width="60px" alt="Pair Extraordinaire Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
+                                            width="60px" alt="Pair Extraordinaire Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png"
+                                            width="60px" alt="Pair Extraordinaire Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png"
+                                            width="60px" alt="Pair Extraordinaire Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png"
+                                            width="60px" alt="Pair Extraordinaire Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -403,7 +448,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png" width="60px" alt="Pull Shark"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
+                            width="60px" alt="Pull Shark"></td>
                     <td>Pull Shark</td>
                     <td>Opened a pull request that has been merged</td>
                     <td>
@@ -418,10 +464,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png" width="60px" alt="Pull Shark Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png" width="60px" alt="Pull Shark Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png" width="60px" alt="Pull Shark Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png" width="60px" alt="Pull Shark Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
+                                            width="60px" alt="Pull Shark Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png"
+                                            width="60px" alt="Pull Shark Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png"
+                                            width="60px" alt="Pull Shark Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png"
+                                            width="60px" alt="Pull Shark Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>2</td>
@@ -434,7 +484,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png" width="60px" alt="Galaxy Brain"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
+                            width="60px" alt="Galaxy Brain"></td>
                     <td>Galaxy Brain</td>
                     <td>Answered a discussion<br>(got an accepted answer)</td>
                     <td>
@@ -449,10 +500,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png" width="60px" alt="Galaxy Brain Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png" width="60px" alt="Galaxy Brain Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png" width="60px" alt="Galaxy Brain Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png" width="60px" alt="Galaxy Brain Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
+                                            width="60px" alt="Galaxy Brain Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png"
+                                            width="60px" alt="Galaxy Brain Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png"
+                                            width="60px" alt="Galaxy Brain Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png"
+                                            width="60px" alt="Galaxy Brain Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>2</td>
@@ -465,7 +520,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png" width="60px" alt="YOLO"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
+                            width="60px" alt="YOLO"></td>
                     <td>YOLO</td>
                     <td>Merged a pull request without a review</td>
                     <td>
@@ -477,7 +533,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png" width="60px" alt="YOLO Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
+                                            width="60px" alt="YOLO Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -487,9 +544,11 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png" width="60px" alt="Public Sponsor"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
+                            width="60px" alt="Public Sponsor"></td>
                     <td>Public Sponsor</td>
-                    <td>Sponsored an open source contributor through <a href="https://github.com/sponsors">GitHub Sponsors</a></td>
+                    <td>Sponsored an open source contributor through <a href="https://github.com/sponsors">GitHub
+                            Sponsors</a></td>
                     <td>
                         <table>
                             <thead>
@@ -499,7 +558,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png" width="60px" alt="Public Sponsor Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
+                                            width="60px" alt="Public Sponsor Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -511,44 +571,30 @@ <h2>📃 Achievement List 📃</h2>
                 <!-- Repeat similar blocks for other achievements -->
             </tbody>
         </table>
-        
-        
+
+
         <h2>👋 Achievement Skin Tone 👋</h2>
         <p>Some achievements' appearance depends on your Emoji Skin Tone Preference.</p>
-        <p>You can change your preferred Skin Tone by going to <a href="https://github.com/settings/appearance">appearance settings</a>.</p>
-      <div style="width: 100%;overflow-x: scroll;">
-
-        <div class="table-container">
-            <div class="header">
-                <div class="cell" style="flex: 0.4;">Badge</div>
-                <div class="cell">Name</div>
-                <div class="cell">Skin Tone Versions</div>
-            </div>
-            <div class="rows">
-                <div class="row">
-                    <div class="cell" ><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60" alt="Starstruck"></div>
-
-                    <div class="cell">Starstruck</div>
-                    <div class="cell">
-                        <div class="inner-table">
-                            <div class="header"  style="min-width: 100%;">
-                                <div class="cell">👋</div>
-                                <div class="cell">👋🏻</div>
-                                <div class="cell">👋🏼</div>
-                                <div class="cell">👋🏽</div>
-                                <div class="cell">👋🏾</div>
-                                <div class="cell">👋🏿</div>
-                            </div>
-                            <div class="rows">
-                                <div class="row" style="min-width: 100%;">
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60" alt="Skin Tone 1"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png" width="60" alt="Skin Tone 2"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png" width="60" alt="Skin Tone 3"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png" width="60" alt="Skin Tone 4"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png" width="60" alt="Skin Tone 5"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png" width="60" alt="Skin Tone 6"></div>
-                                </div>
-                                <div class="row"  style="min-width: 100%;">
+        <p>You can change your preferred Skin Tone by going to <a
+                href="https://github.com/settings/appearance">appearance settings</a>.</p>
+        <div style="width: 100%;overflow-x: scroll;">
+
+            <div class="table-container">
+                <div class="header">
+                    <div class="cell" style="flex: 0.4;">Badge</div>
+                    <div class="cell">Name</div>
+                    <div class="cell">Skin Tone Versions</div>
+                </div>
+                <div class="rows">
+                    <div class="row">
+                        <div class="cell"><img
+                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                width="60" alt="Starstruck"></div>
+
+                        <div class="cell">Starstruck</div>
+                        <div class="cell">
+                            <div class="inner-table">
+                                <div class="header" style="min-width: 100%;">
                                     <div class="cell">👋</div>
                                     <div class="cell">👋🏻</div>
                                     <div class="cell">👋🏼</div>
@@ -556,33 +602,47 @@ <h2>👋 Achievement Skin Tone 👋</h2>
                                     <div class="cell">👋🏾</div>
                                     <div class="cell">👋🏿</div>
                                 </div>
+                                <div class="rows">
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                                width="60" alt="Skin Tone 1"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
+                                                width="60" alt="Skin Tone 2"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
+                                                width="60" alt="Skin Tone 3"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
+                                                width="60" alt="Skin Tone 4"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
+                                                width="60" alt="Skin Tone 5"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
+                                                width="60" alt="Skin Tone 6"></div>
+                                    </div>
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell">👋</div>
+                                        <div class="cell">👋🏻</div>
+                                        <div class="cell">👋🏼</div>
+                                        <div class="cell">👋🏽</div>
+                                        <div class="cell">👋🏾</div>
+                                        <div class="cell">👋🏿</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="row" >
-                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw"></div>
-                    <div class="cell">Quickdraw</div>
-                    <div class="cell">
-                        <div class="inner-table">
-                            <div class="header"  style="min-width: 100%;">
-                                <div class="cell">👋</div>
-                                <div class="cell">👋🏻</div>
-                                <div class="cell">👋🏼</div>
-                                <div class="cell">👋🏽</div>
-                                <div class="cell">👋🏾</div>
-                                <div class="cell">👋🏿</div>
-                            </div>
-                            <div class="rows">
-                                <div class="row"  style="min-width: 100%;">
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw Skin Tone 1"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png" width="60px" alt="Quickdraw Skin Tone 2"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png" width="60px" alt="Quickdraw Skin Tone 3"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png" width="60px" alt="Quickdraw Skin Tone 4"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png" width="60px" alt="Quickdraw Skin Tone 5"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png" width="60px" alt="Quickdraw Skin Tone 6"></div>
-                                </div>
-                                <div class="row" style="min-width: 100%;">
+                    <div class="row">
+                        <div class="cell"><img
+                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                width="60px" alt="Quickdraw"></div>
+                        <div class="cell">Quickdraw</div>
+                        <div class="cell">
+                            <div class="inner-table">
+                                <div class="header" style="min-width: 100%;">
                                     <div class="cell">👋</div>
                                     <div class="cell">👋🏻</div>
                                     <div class="cell">👋🏼</div>
@@ -590,18 +650,47 @@ <h2>👋 Achievement Skin Tone 👋</h2>
                                     <div class="cell">👋🏾</div>
                                     <div class="cell">👋🏿</div>
                                 </div>
+                                <div class="rows">
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                                width="60px" alt="Quickdraw Skin Tone 1"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
+                                                width="60px" alt="Quickdraw Skin Tone 2"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
+                                                width="60px" alt="Quickdraw Skin Tone 3"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
+                                                width="60px" alt="Quickdraw Skin Tone 4"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
+                                                width="60px" alt="Quickdraw Skin Tone 5"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
+                                                width="60px" alt="Quickdraw Skin Tone 6"></div>
+                                    </div>
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell">👋</div>
+                                        <div class="cell">👋🏻</div>
+                                        <div class="cell">👋🏼</div>
+                                        <div class="cell">👋🏽</div>
+                                        <div class="cell">👋🏾</div>
+                                        <div class="cell">👋🏿</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Repeat similar blocks for other achievements -->
                 </div>
-                <!-- Repeat similar blocks for other achievements -->
             </div>
+
         </div>
-        
-      </div>  
-        
+
         <h2>✨ Highlights Badges ✨</h2>
-        
+
         <table>
             <thead>
                 <tr>
@@ -613,43 +702,59 @@ <h2>✨ Highlights Badges ✨</h2>
             <tbody>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_DarkMode.svg" alt="Pro Dark Mode"  id="pro-dark" class="badges-icons-dark" >
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_LightMode.svg" alt="Pro Light Mode" id="pro-light" class="badges-icons-light" >
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_DarkMode.svg"
+                            alt="Pro Dark Mode" id="pro-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_LightMode.svg"
+                            alt="Pro Light Mode" id="pro-light" class="badges-icons-light">
                     </td>
                     <td>Pro</td>
-                    <td>Use <a href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-pro">GitHub Pro</a></td>
+                    <td>Use <a
+                            href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-pro">GitHub
+                            Pro</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_DarkMode.svg" alt="Developer Program Member Dark Mode"  id="developer-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_LightMode.svg" alt="Developer Program Member Light Mode" id="developer-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_DarkMode.svg"
+                            alt="Developer Program Member Dark Mode" id="developer-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_LightMode.svg"
+                            alt="Developer Program Member Light Mode" id="developer-light" class="badges-icons-light">
                     </td>
                     <td>Developer Program Member</td>
-                    <td>Be a registered member of the <a href="https://docs.github.com/en/developers/overview/github-developer-program">GitHub Developer Program</a></td>
+                    <td>Be a registered member of the <a
+                            href="https://docs.github.com/en/developers/overview/github-developer-program">GitHub
+                            Developer Program</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_DarkMode.svg" alt="Security Bug Bounty Hunter Dark Mode"  id="security-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_LightMode.svg" alt="Security Bug Bounty Hunter Light Mode" id="security-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_DarkMode.svg"
+                            alt="Security Bug Bounty Hunter Dark Mode" id="security-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_LightMode.svg"
+                            alt="Security Bug Bounty Hunter Light Mode" id="security-light" class="badges-icons-light">
                     </td>
                     <td>Security Bug Bounty Hunter</td>
-                    <td>Helped out hunting down security vulnerabilities at <a href="https://bounty.github.com/">GitHub Security</a></td>
+                    <td>Helped out hunting down security vulnerabilities at <a href="https://bounty.github.com/">GitHub
+                            Security</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_DarkMode.svg" alt="GitHub Campus Expert Dark Mode"  id="campus-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_LightMode.svg" alt="GitHub Campus Expert Light Mode" id="campus-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_DarkMode.svg"
+                            alt="GitHub Campus Expert Dark Mode" id="campus-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_LightMode.svg"
+                            alt="GitHub Campus Expert Light Mode" id="campus-light" class="badges-icons-light">
                     </td>
                     <td>GitHub Campus Expert</td>
                     <td>Participate in the <a href="https://education.github.com/experts">GitHub Campus Program</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_DarkMode.svg" alt="Security Advisory Credit Dark Mode"  id="advisory-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_LightMode.svg" alt="Security Advisory Credit Light Mode" id="advisory-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_DarkMode.svg"
+                            alt="Security Advisory Credit Dark Mode" id="advisory-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_LightMode.svg"
+                            alt="Security Advisory Credit Light Mode" id="advisory-light" class="badges-icons-light">
                     </td>
                     <td>Security advisory credit</td>
-                    <td>Have your security advisory submitted to the <a href="https://github.com/advisories">GitHub Advisory Database</a> accepted</td>
+                    <td>Have your security advisory submitted to the <a href="https://github.com/advisories">GitHub
+                            Advisory Database</a> accepted</td>
                 </tr>
             </tbody>
         </table>
@@ -665,9 +770,12 @@ <h2>❌ Badges no longer earnable ❌ </h2>
             </thead>
             <tbody>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png" alt="Mars 2020 Contributor" width="60px"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
+                            alt="Mars 2020 Contributor" width="60px"></td>
                     <td>Mars 2020 Contributor</td>
-                    <td>Contributed code to a repository used in the <a href="https://github.com/readme/featured/nasa-ingenuity-helicopter">Mars 2020 Helicopter Mission</a></td>
+                    <td>Contributed code to a repository used in the <a
+                            href="https://github.com/readme/featured/nasa-ingenuity-helicopter">Mars 2020 Helicopter
+                            Mission</a></td>
                     <td>
                         <table>
                             <thead>
@@ -677,7 +785,8 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png" width="60px" alt="Mars 2020 Contributor Badge"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
+                                            width="60px" alt="Mars 2020 Contributor Badge"></td>
                                 </tr>
                                 <tr>
                                     <td align="center">1</td>
@@ -687,9 +796,11 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png" alt="Arctic Code Vault Contributor" width="60px"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
+                            alt="Arctic Code Vault Contributor" width="60px"></td>
                     <td>Arctic Code Vault Contributor</td>
-                    <td>Contributed code to a repository in the <a href="https://archiveprogram.github.com/">2020 GitHub Archive Program</a></td>
+                    <td>Contributed code to a repository in the <a href="https://archiveprogram.github.com/">2020 GitHub
+                            Archive Program</a></td>
                     <td>
                         <table>
                             <thead>
@@ -699,7 +810,8 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png" width="60px" alt="Arctic Code Vault Contributor Badge"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
+                                            width="60px" alt="Arctic Code Vault Contributor Badge"></td>
                                 </tr>
                                 <tr>
                                     <td align="center">1</td>
@@ -710,139 +822,209 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                 </tr>
             </tbody>
         </table>
-       
-    
-        
+
+
+
     </div>
     <h1 style="text-align: center;">ℹ️ More Information ℹ️</h1>
 
-    <h4 style="text-align: center;">You can find more information about GitHub Badges under this <a href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile#displaying-badges-on-your-profile">link</a>.</h4>
+    <h4 style="text-align: center;">You can find more information about GitHub Badges under this <a
+            href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile#displaying-badges-on-your-profile">link</a>.
+    </h4>
 
     <br>
     <div class="certificate">
-        <div class="certificate-left" >
-          <h1 style="font-size: 50px;margin-bottom: 0px !important;">Showcase your expertise with GitHub Certifications</h1>
-          <p>Getting GitHub certified is a resounding endorsement that validates your skills, credibility, trust, and knowledge of the technologies and developer tools that are used by more than 100 million developers worldwide.</p>
+        <div class="certificate-left">
+            <h1 style="font-size: 50px;margin-bottom: 0px !important;">Showcase your expertise with GitHub
+                Certifications</h1>
+            <p>Getting GitHub certified is a resounding endorsement that validates your skills, credibility, trust, and
+                knowledge of the technologies and developer tools that are used by more than 100 million developers
+                worldwide.</p>
         </div>
         <div>
-          <img src="https://images.ctfassets.net/wfutmusr1t3h/6eWM76bx8skN2B4Jpvkcil/3ccdafea4229f02802abbd9fc6634a3b/Certifiedtocat_full__2_.svg?w=1280&q=75">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/6eWM76bx8skN2B4Jpvkcil/3ccdafea4229f02802abbd9fc6634a3b/Certifiedtocat_full__2_.svg?w=1280&q=75">
         </div>
     </div>
     <div class="ways">
-      <div class="ways1">
-          <img src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
-          <div class="ways-content">
-            <h1>GitHub Foundations</h1>
-            <p>Highlight your understanding of the foundational topics and concepts of collaborating, contributing, and working on GitHub. This exam covers collaboration, GitHub products, Git basics, and working within GitHub repositories.</p>
-            <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Foundations exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-          </div>
-      </div>
-      <div class="ways2">
-        <img src="https://images.ctfassets.net/wfutmusr1t3h/7xYtTWmQ24xRlS68Do9qiG/a785c50083a579f2530863c230198e98/actions-river-image__1_.png?w=1280&q=75"></img>
-        <div class="ways-content">
-          <h1>GitHub Actions</h1>
-          <p>Certify your proficiency in automating workflows and accelerating development with GitHub Actions. Test your skills in streamlining workflows, automating tasks, and optimizing software pipelines, including CI/CD—all within customizable workflows.</p>
-          <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Actions exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Foundations</h1>
+                <p>Highlight your understanding of the foundational topics and concepts of collaborating, contributing,
+                    and working on GitHub. This exam covers collaboration, GitHub products, Git basics, and working
+                    within GitHub repositories.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Foundations
+                    exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways2">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/7xYtTWmQ24xRlS68Do9qiG/a785c50083a579f2530863c230198e98/actions-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Actions</h1>
+                <p>Certify your proficiency in automating workflows and accelerating development with GitHub Actions.
+                    Test your skills in streamlining workflows, automating tasks, and optimizing software pipelines,
+                    including CI/CD—all within customizable workflows.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Actions exam
+                    <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Advanced Security</h1>
+                <p>Highlight your code security knowledge with the GitHub Advanced Security certification. Validate your
+                    expertise in vulnerability identification, workflow security, and robust security
+                    implementation—elevating software integrity standards.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Advanced
+                    Security exam <!-- --> <svg aria-hidden="true" role="presentation"
+                        xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+                        viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways2">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/KdVTNopvz0GZy60xzXCq0/86148a36ddf27ea1d22226f0113b8711/admin-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Administration</h1>
+                <p>Certify your ability to optimize and manage a healthy GitHub environment with the GitHub Admin exam.
+                    Highlight your expertise in repository management, workflow optimization, and efficient
+                    collaboration to support successful projects on GitHub.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Administration
+                    exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/16DNDZjBQxyxijON2ciyMQ/291420cd4a3a38eaaee04c44da6aca80/gh-copilot__1_.jpg?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Copilot</h1>
+                <p>The GitHub Copilot certification exam evaluates your skill in using the AI-driven code completion
+                    tool in various programming languages, certifying your capability to optimize software development
+                    workflows efficiently.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Coming Soon! Join the waitlist now for
+                    priority access<!-- --> <svg aria-hidden="true" role="presentation"
+                        xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+                        viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+            </div>
         </div>
-    </div>
-    <div class="ways1">
-      <img src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
-      <div class="ways-content">
-        <h1>GitHub Advanced Security</h1>
-        <p>Highlight your code security knowledge with the GitHub Advanced Security certification. Validate your expertise in vulnerability identification, workflow security, and robust security implementation—elevating software integrity standards.</p>
-        <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Advanced Security exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-      </div>
-  </div>
-  <div class="ways2">
-    <img src="https://images.ctfassets.net/wfutmusr1t3h/KdVTNopvz0GZy60xzXCq0/86148a36ddf27ea1d22226f0113b8711/admin-river-image__1_.png?w=1280&q=75"></img>
-    <div class="ways-content">
-      <h1>GitHub Administration</h1>
-      <p>Certify your ability to optimize and manage a healthy GitHub environment with the GitHub Admin exam. Highlight your expertise in repository management, workflow optimization, and efficient collaboration to support successful projects on GitHub.</p>
-      <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Administration exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-    </div>
-  </div>
-  <div class="ways1">
-    <img src="https://images.ctfassets.net/wfutmusr1t3h/16DNDZjBQxyxijON2ciyMQ/291420cd4a3a38eaaee04c44da6aca80/gh-copilot__1_.jpg?w=1280&q=75"></img>
-    <div class="ways-content">
-      <h1>GitHub Copilot</h1>
-      <p>The GitHub Copilot certification exam evaluates your skill in using the AI-driven code completion tool in various programming languages, certifying your capability to optimize software development workflows efficiently.</p>
-      <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Coming Soon! Join the waitlist now for priority access<!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-    </div>
-  </div>
     </div>
     <footer id="Contact" class="footer-2">
         <div class="footer-container">
-          <div class="footer-content">
-            <div class="footer-info">
-              <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
-            </div>
-      
-            <div class="footer-links">
-              <div class="footer-section">
-               <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
-               <div>
-                <a href="help.html" class="footer-link">Contact Us</a>
-                <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
-               </div>
-              </div>
-              <div class="footer-section">
-                <h6 class="footer-heading">GET INVOLVED</h6>
-                <div>
-                  <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
-                  <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
+            <div class="footer-content">
+                <div class="footer-info">
+                    <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
+                </div>
+
+                <div class="footer-links">
+                    <div class="footer-section">
+                        <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
+                        <div>
+                            <a href="help.html" class="footer-link">Contact Us</a>
+                            <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md"
+                                class="footer-link">Code of Conduct</a>
+                        </div>
+                    </div>
+                    <div class="footer-section">
+                        <h6 class="footer-heading">GET INVOLVED</h6>
+                        <div>
+                            <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
+                                class="footer-link">Add Your Profile</a>
+                            <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization"
+                                class="footer-link">Join the Organization</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="footer-description">
+                    <h5>
+                        We focus on quality content to the right people at the right time⏱️. Recode Hive will help you
+                        with updates on what’s happening in the tech industry💻. We focus on everything starting from
+                        How To’s to Data Science.
+                    </h5>
+                    <a href="exploremore.html" class="footer-button">Explore</a>
                 </div>
-              </div>
-            </div>
-      
-            <div class="footer-description">
-              <h5>
-                We focus on quality content to the right people at the right time⏱️. Recode Hive will help you with updates on what’s happening in the tech industry💻. We focus on everything starting from How To’s to Data Science.
-              </h5>
-              <a href="exploremore.html" class="footer-button">Explore</a>
             </div>
-          </div>
         </div>
-      
+
         <div class="footer-bottom">
-          <div class="footer-container">
-            <p class="footer-copyright">
-              &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
-            </p>
-          </div>
+            <div class="footer-container">
+                <p class="footer-copyright">
+                    &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+                </p>
+            </div>
         </div>
-      </footer>
+    </footer>
 
-      <!-- Scroll to top -->
+    <!-- Scroll to top -->
     <button id="scrollToTop" aria-label="Scroll to top">
         <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
-          <path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/>
+            <path
+                d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z" />
         </svg>
-      </button>
-  
+    </button>
+
     <script src="../scripts/ScrollToTop.js"></script>
     <script src="../scripts/dark-mode.js"></script>
-      <script>
-        document.addEventListener("DOMContentLoaded", function() {
-    const hamburger = document.getElementById("hamburger");
-    const mobileMenu = document.getElementById("mobile-menu");
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const hamburger = document.getElementById("hamburger");
+            const mobileMenu = document.getElementById("mobile-menu");
 
-    hamburger.addEventListener("click", function() {
-        hamburger.classList.toggle("active");
-        if (mobileMenu.classList.contains("show")) {
-            mobileMenu.classList.remove("show");
-            setTimeout(() => mobileMenu.style.display = "none", 300);
-        } else {
-            mobileMenu.style.display = "flex";
-            setTimeout(() => mobileMenu.classList.add("show"), 10);
-        }
-    });
-});
+            hamburger.addEventListener("click", function () {
+                hamburger.classList.toggle("active");
+                if (mobileMenu.classList.contains("show")) {
+                    mobileMenu.classList.remove("show");
+                    setTimeout(() => mobileMenu.style.display = "none", 300);
+                } else {
+                    mobileMenu.style.display = "flex";
+                    setTimeout(() => mobileMenu.classList.add("show"), 10);
+                }
+            });
+        });
 
 
-      </script>
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/pages/help.html b/pages/help.html
index 30cbabeb..fab220a9 100644
--- a/pages/help.html
+++ b/pages/help.html
@@ -12,6 +12,7 @@
     />
     <link rel="stylesheet" href="../styles/styles.css" />
     <link rel="stylesheet" href="../styles/help.css" />
+    <link rel="stylesheet" href="../styles/hamburger.css" />
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
@@ -19,17 +20,20 @@
   </head>
   <body>
     <nav class="navbar">
-      <div class="navbar-left" onclick="window.location.href=`../index.html`">
+      <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
         <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
         <span class="navbar-text">Recode Hive</span>
-      </div>
+      </a>
       <div class="navbar-right">
         <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+        <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
+        class="navbar-link">Add Profile</a>
         <a href="#" class="navbar-link">Tools</a>
         <a href="events.html" class="navbar-link">Events</a>
         <a href="blog.html" class="navbar-link">Learn</a>
-        <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" 
-        class="navbar-link">Add Profile</a>
+        <a href="compare.html" class="navbar-link">Compare</a>
+
+       
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
@@ -40,8 +44,20 @@
           </label>
         </div>
       </div>
-
+      <div class="hamburger" id="hamburger">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </nav> 
+    <div class="mobile-menu" id="mobile-menu">
+      <a href="#" class="navbar-links">Github-Badge</a>
+            <a href="#" class="navbar-links">Tools</a>
+          <a href="events.html" class="navbar-links">Events</a>
+          <a href="blog.html" class="navbar-links">Blog</a>
+          <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="navbar-links">Add Profile</a>
+          <a href="blog.html" class="navbar-links">Learn</a>
+    </div>
 
     <h1 style="font-size: 40px;text-align: center;">Help</h1>
    <div class="main-container">
diff --git a/scripts/compare.js b/scripts/compare.js
new file mode 100644
index 00000000..a7509457
--- /dev/null
+++ b/scripts/compare.js
@@ -0,0 +1,77 @@
+// this is  code which runs with pat and is more optimized because it is fetching api of 2 people at a time only
+
+document.addEventListener("DOMContentLoaded", function () {
+    let contributors = [];
+    const token = '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'; // Replace with your GitHub PAT
+
+    fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
+        .then((response) => response.json())
+        .then((data) => {
+            contributors = data.contributors;
+            
+            // Populate dropdowns with contributor names
+            const select1 = document.getElementById('contributorSelect1');
+            const select2 = document.getElementById('contributorSelect2');
+            
+            contributors.forEach((da) => {
+                const option = document.createElement('option');
+                option.value = da.login;
+                option.textContent = da.name || da.login;
+                
+                select1.appendChild(option.cloneNode(true));
+                select2.appendChild(option.cloneNode(true));
+            });
+        });
+
+    document.getElementById('submitBtn').addEventListener('click', function () {
+        const login1 = document.getElementById('contributorSelect1').value;
+        const login2 = document.getElementById('contributorSelect2').value;
+
+        if (login1 && login2 && login1 !== login2) {
+            Promise.all([
+                fetch(`https://api.github.com/users/${login1}`, {
+                    headers: {
+                        'Authorization': `token ${token}`
+                    }
+                }).then(response => response.json()),
+                fetch(`https://api.github.com/users/${login2}`, {
+                    headers: {
+                        'Authorization': `token ${token}`
+                    }
+                }).then(response => response.json())
+            ])
+            .then(([data1, data2]) => {
+                // Show the table
+                document.getElementById('comparisonTable').classList.remove('hidden');
+
+                // Fill the table with data
+                document.getElementById('login1').textContent = data1.login;
+                document.getElementById('login2').textContent = data2.login;
+
+                document.getElementById('name1').textContent = data1.name || 'N/A';
+                document.getElementById('name2').textContent = data2.name || 'N/A';
+
+                document.getElementById('bio1').textContent = data1.bio || 'N/A';
+                document.getElementById('bio2').textContent = data2.bio || 'N/A';
+
+                document.getElementById('location1').textContent = data1.location || 'N/A';
+                document.getElementById('location2').textContent = data2.location || 'N/A';
+
+                document.getElementById('repos1').textContent = data1.public_repos || 'N/A';
+                document.getElementById('repos2').textContent = data2.public_repos || 'N/A';
+
+                document.getElementById('followers1').textContent = data1.followers || 'N/A';
+                document.getElementById('followers2').textContent = data2.followers || 'N/A';
+
+                document.getElementById('following1').textContent = data1.following || 'N/A';
+                document.getElementById('following2').textContent = data2.following || 'N/A';
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        } else {
+            alert('Please select two different contributors.');
+        }
+    });
+});
+
diff --git a/styles/blog.css b/styles/blog.css
index eeebcc78..236d6a3f 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -5,6 +5,10 @@ body {
     padding: 0;
 }
 
+body img {
+    max-width: 100vw !important;
+}
+
 .blog-container {
     display: flex;
     flex-wrap: wrap;
@@ -107,6 +111,9 @@ body.dark-mode .blog-card .excerpt {
     .blog-card{
         width: 100%;
     }
+    .ways-content {
+        padding: 0 !important;
+    }
 }
 
 
@@ -142,6 +149,7 @@ body.dark-mode .blog-card .excerpt {
     font-size: 20px !important;
 }
 .ways img{
+    object-fit: contain !important;
     border-radius: 20px;
 }
 .ways1{
@@ -177,6 +185,7 @@ body.dark-mode .blog-card .excerpt {
 }
 @media only screen and (max-width:600px) {
     .ways img{
+        object-fit: inherit;
         scale: 0.60 !important;}
  }
 .ways a:hover{
diff --git a/styles/compare.css b/styles/compare.css
new file mode 100644
index 00000000..fc2afc6d
--- /dev/null
+++ b/styles/compare.css
@@ -0,0 +1,118 @@
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 41vh !important;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+}
+label{
+    font-size: 20px;
+}
+.form-group {
+    margin-bottom: 15px;
+}
+
+.label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+.button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.button:hover {
+    background-color: #45a049;
+}
+
+.comparison {
+    margin-top: 20px;
+}
+
+.comparison h2 {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    padding: 12px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+
+th {
+    background-color: #4CAF50;
+    color: white;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+.dark-mode tr:nth-child(even) {
+    background-color: #1a1717;
+}
+.hidden {
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+
+    .button {
+        font-size: 14px;
+    }
+}
+select{
+    background: transparent;
+  outline: none;
+  border: none;
+  border: solid 1px gray;
+  padding: 10px;
+  font-size: 20px;
+}
+.dark-mode select{
+    color: white;
+    background-color: black;
+}
\ No newline at end of file
diff --git a/styles/events.css b/styles/events.css
index e05f98d3..a7ebdc86 100644
--- a/styles/events.css
+++ b/styles/events.css
@@ -10,10 +10,11 @@
     position: absolute;
     width: 6px;
     background-color: #333;
-    top: 0;
+    top: 80px;
     bottom: 0;
     left: 50%;
     margin-left: -3px;
+    z-index: 1;
 }
 
 .timeline-item {
@@ -28,11 +29,12 @@
     position: absolute;
     width: 25px;
     height: 25px;
-    background-color: #333;
-    border: 4px solid #555;
+    background-color: #3b9cdd;
+    border: 4px solid #3b9cdd;
     border-radius: 50%;
-    z-index: 1;
+    z-index: 10000;
     top: 20px;
+
 }
 
 .timeline-item:nth-child(odd) {
@@ -165,7 +167,12 @@ body.dark-mode .navbar-text{
     .timeline::after {
         left: 31px;
     }
-
+    .line{
+left: 28px !important;
+    }
+    .line1{
+        right: 93.5% !important;
+    }
     .timeline-item {
         width: 100%;
         padding-left: 70px;
@@ -201,4 +208,24 @@ body.dark-mode .navbar-text{
     body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
         border-right-color: #444;
     }
-}
\ No newline at end of file
+}.line{
+    position: absolute;
+  left: 99.5%;
+  background-color: #d55353;
+  width: 6px;
+  top: 20px;
+  z-index: 1000;
+  /* height: 103% !important; */
+}
+.line1{
+    position: absolute;
+  right: 99.5%;
+  background-color: #d55353;
+  top: 25px;
+  width: 6px;
+  z-index: 1000;
+}
+.scroll-animate {
+    transition: all 1.5s ease-out;
+      background-color: #3b9cdd !important;
+  }
\ No newline at end of file
diff --git a/styles/githubbadge.css b/styles/githubbadge.css
index 960672ed..1f1ab941 100644
--- a/styles/githubbadge.css
+++ b/styles/githubbadge.css
@@ -220,6 +220,7 @@ body.theme-dark .center {
    font-size: 20px !important;
 }
 .ways img{
+  object-fit: contain;
    border-radius: 20px;
 }
 .ways1{
diff --git a/styles/hamburger.css b/styles/hamburger.css
index 21ad085c..6d571a6b 100644
--- a/styles/hamburger.css
+++ b/styles/hamburger.css
@@ -5,13 +5,14 @@
   }
 
   .hamburger {
-    display: none;
+    display: none ;
     flex-direction: column;
     cursor: pointer;
     transition: transform 0.6s ease;
   }
 
   .hamburger div {
+
     width: 25px;
     height: 2px;
     background-color: #000000;
@@ -82,6 +83,9 @@
 
 
   @media (max-width: 768px) {
+    .hamburger div {
+      display: block;
+    }
     .navbar-right {
       display: none;
     }
diff --git a/styles/styles.css b/styles/styles.css
index 9d47c1c1..b69d69c4 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,205 +1,217 @@
 body {
-    font-family: "Roboto", sans-serif;
-    background-color: #f0f0f0;
-    color: #333;
-    margin: 0;
-    padding: 0;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-  
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    text-align: center;
-  }
-  
-  .main-heading {
-    margin-bottom: 40px;
-  }
-  
-  .tags {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-  }
-  .views-likes{
-    display: flex;
-    justify-content: space-around;
+  font-family: "Roboto", sans-serif;
+  background-color: #f0f0f0;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+}
+
+.main-heading {
+  margin-bottom: 40px;
 }
-.like-red{
+
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.views-likes {
+  display: flex;
+  justify-content: space-around;
+}
+
+.like-red {
   color: red;
 }
-  .tag {
-    display: inline-block;
-    margin: 5px;
-    padding: 10px 15px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  .tag:hover{
-    background-color: #ebebeb;
-    
-  }
-  .search-bar {
-    margin-bottom: 20px;
-  }
-  
+
+.tag {
+  display: inline-block;
+  margin: 5px;
+  padding: 10px 15px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.tag:hover {
+  background-color: #ebebeb;
+
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
 .search-input {
-    width: 259px;
-    padding: 15px;
-    font-size: 16px;
-    border: 2px solid #ddd;
-    border-radius: 25px;
-    box-shadow: none;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease,all 0.3s;;
-  }
-  .search-input:focus{
-    width: 50%;
-    outline: none;
-    transition: all 0.3s;
-  }
-  
-  .search-input:hover,
-  .search-input:focus {
-    border-color: #aaa;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  
-  .profiles {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  .profile {
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    margin: 10px;
-    width: 250px;
-    padding: 15px;
-    margin-top: 30;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    animation: fadeIn 0.5s ease-out;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .profile:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  }
-  
-  .profile img {
-    max-width: 100%;
-    border-radius: 10px;
-  }
-  
-  .profile p {
-    color: #333;
-  }
-  
-  .grey-banner {
-    display: inline-block;
-    background: linear-gradient(135deg, #f0f0f0, #fff);
-    color: black;
-    padding: 10px 20px;
-    font-size: 16px;
-    border: none;
-    border-radius: 20px; 
-    text-align: center;
-    text-decoration: none;
-    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; 
-    cursor: pointer;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); 
-    margin: 20px auto;
-  }
+  width: 259px;
+  padding: 15px;
+  font-size: 16px;
+  border: 2px solid #ddd;
+  border-radius: 25px;
+  box-shadow: none;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, all 0.3s;
+  ;
+}
 
-  .grey-banner:hover {
-      background: linear-gradient(135deg, #e0e0e0, #f0f0f0); 
-      transform: translateY(-2px);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); 
-  }
+.search-input:focus {
+  width: 50%;
+  outline: none;
+  transition: all 0.3s;
+}
 
-  .grey-banner:active {
-      transform: translateY(0);
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); 
-  }
+.search-input:hover,
+.search-input:focus {
+  border-color: #aaa;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
 
-  body.dark-mode .grey-banner {
-      background: linear-gradient(135deg, #444, #555);
-      color: #fff;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); 
-  }
+.profiles {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 
-  body.dark-mode .grey-banner:hover {
-      background: linear-gradient(135deg, #333, #444);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5); 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
   }
 
-  body.dark-mode .grey-banner:active {
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
+  to {
+    opacity: 1;
   }
+}
 
-  /* Dark Mode Styles */
-  body.dark-mode {
-    background-color: #000000;
-    color: #f0f0f0;
-  }
-  
-  body.dark-mode .tag {
-    background-color: #555;
-    border-color: #444;
-    color: #fff;
-  }
-  body.dark-mode .tag:hover{
-    background-color: #3f3f3f;
-  }
-  body.dark-mode .search-input {
-    background-color: #555;
-    border-color: #444;
-    color: #fff;
-  }
-  
-  body.dark-mode .profile {
-    background-color: #444;
-    border-color: #555;
-  }
-  
-  body.dark-mode .profile p {
-    color: #f0f0f0;
-  }
-  
-  /* Switch Label */
-  .toggle-switch label {
-    position: relative;
-    top: 0px;
-    left: 7px;
-    width: 55px; /* Adjust width to fit switch button and icons */
-    height: 30px; /* Adjust height if needed */
-    background-color: #ccc;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 5px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.5s ease;
-  }
+.profile {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  margin: 10px;
+  width: 250px;
+  padding: 15px;
+  margin-top: 30;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease-out;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profile:hover {
+  transform: scale(1.05);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.profile img {
+  max-width: 100%;
+  border-radius: 10px;
+}
+
+.profile p {
+  color: #333;
+}
+
+.grey-banner {
+  display: inline-block;
+  background: linear-gradient(135deg, #f0f0f0, #fff);
+  color: black;
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 20px;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin: 20px auto;
+}
+
+.grey-banner:hover {
+  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
+}
+
+.grey-banner:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+body.dark-mode .grey-banner {
+  background: linear-gradient(135deg, #444, #555);
+  color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .grey-banner:hover {
+  background: linear-gradient(135deg, #333, #444);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+body.dark-mode .grey-banner:active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+/* Dark Mode Styles */
+body.dark-mode {
+  background-color: #000000;
+  color: #f0f0f0;
+}
+
+body.dark-mode .tag {
+  background-color: #555;
+  border-color: #444;
+  color: #fff;
+}
+
+body.dark-mode .tag:hover {
+  background-color: #3f3f3f;
+}
+
+body.dark-mode .search-input {
+  background-color: #555;
+  border-color: #444;
+  color: #fff;
+}
+
+body.dark-mode .profile {
+  background-color: #444;
+  border-color: #555;
+}
+
+body.dark-mode .profile p {
+  color: #f0f0f0;
+}
+
+/* Switch Label */
+.toggle-switch label {
+  position: relative;
+  top: 0px;
+  left: 7px;
+  width: 55px;
+  /* Adjust width to fit switch button and icons */
+  height: 30px;
+  /* Adjust height if needed */
+  background-color: #ccc;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
+}
 
 /* Styling for Vertical Scrollbar */
 
@@ -213,28 +225,28 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #383838; 
-  border-radius: 6px; 
-  border: 0.4px solid #eaeaeb; 
+  background-color: #383838;
+  border-radius: 6px;
+  border: 0.4px solid #eaeaeb;
   transition: background 0.6s ease-in-out;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #545454; 
+  background-color: #545454;
 }
 
 ::-webkit-scrollbar-button {
   background-color: #f1f1f1;
-  background-repeat: no-repeat;   
+  background-repeat: no-repeat;
   background-size: 120%;
 }
 
 ::-webkit-scrollbar-button:decrement {
-  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png");   
+  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png");
 }
 
 ::-webkit-scrollbar-button:increment {
-  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png"); 
+  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png");
 }
 
 /* Styling for Dark Mode */
@@ -249,14 +261,14 @@ body.dark-mode::-webkit-scrollbar-track {
 }
 
 body.dark-mode::-webkit-scrollbar-thumb {
-  background-color: #ffffff; 
-  border-radius: 6px; 
-  border: 0.4px solid #555; 
+  background-color: #ffffff;
+  border-radius: 6px;
+  border: 0.4px solid #555;
   transition: background 0.6s ease-in-out;
 }
 
 body.dark-mode::-webkit-scrollbar-thumb:hover {
-  background-color: #edfbff; 
+  background-color: #edfbff;
 }
 
 body.dark-mode ::-webkit-scrollbar-button {
@@ -292,10 +304,12 @@ body.dark-mode ::-webkit-scrollbar-button {
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
-.tag:hover{
+
+.tag:hover {
   background-color: #ebebeb;
-  
+
 }
+
 .search-bar {
   margin-bottom: 20px;
 }
@@ -326,6 +340,7 @@ body.dark-mode ::-webkit-scrollbar-button {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -364,14 +379,21 @@ body.dark-mode {
   color: #f0f0f0;
 }
 
+body.dark-mode h1,
+h2 {
+  color: #fff;
+}
+
 body.dark-mode .tag {
   background-color: #555;
   border-color: #444;
   color: #fff;
 }
-body.dark-mode .tag:hover{
+
+body.dark-mode .tag:hover {
   background-color: #3f3f3f;
 }
+
 body.dark-mode .search-input {
   background-color: #555;
   border-color: #444;
@@ -392,8 +414,10 @@ body.dark-mode .profile p {
   position: relative;
   top: 0px;
   left: 7px;
-  width: 55px; /* Adjust width to fit switch button and icons */
-  height: 30px; /* Adjust height if needed */
+  width: 55px;
+  /* Adjust width to fit switch button and icons */
+  height: 30px;
+  /* Adjust height if needed */
   background-color: #ccc;
   border-radius: 20px;
   display: flex;
@@ -430,19 +454,23 @@ body.dark-mode .profile p {
 
 /* Sun Icon */
 .sun-icon {
-    color: #f39c12;
-    left: 1px; /* Position from the left edge */
-    opacity: 1; /* Initially visible */
+  color: #f39c12;
+  left: 1px;
+  /* Position from the left edge */
+  opacity: 1;
+  /* Initially visible */
 }
 
 /* Moon Icon */
 .moon-icon {
-    color: #bdc3c7;
-    right: 1px; /* Position from the right edge */
-    opacity: 0; /* Initially hidden */
+  color: #bdc3c7;
+  right: 1px;
+  /* Position from the right edge */
+  opacity: 0;
+  /* Initially hidden */
 }
 
-/* Hide the checkbox itself */ 
+/* Hide the checkbox itself */
 #theme-toggle {
   opacity: 0;
   position: absolute;
@@ -452,21 +480,24 @@ body.dark-mode .profile p {
 
 
 /* Checkbox Checked State */
-#theme-toggle:checked + label {
-    background-color: #555;
+#theme-toggle:checked+label {
+  background-color: #555;
 }
 
-#theme-toggle:checked + label .sun-icon {
-    opacity: 0; /* Hide sun icon when checked */
+#theme-toggle:checked+label .sun-icon {
+  opacity: 0;
+  /* Hide sun icon when checked */
 }
 
-#theme-toggle:checked + label .moon-icon {
-    opacity: 1; /* Show moon icon when checked */
+#theme-toggle:checked+label .moon-icon {
+  opacity: 1;
+  /* Show moon icon when checked */
 }
 
-#theme-toggle:checked + label .switch-button {
-    transform: translateX(30px); /* Adjust to fit switch width */
-    background-color: black;
+#theme-toggle:checked+label .switch-button {
+  transform: translateX(30px);
+  /* Adjust to fit switch width */
+  background-color: black;
 }
 
 body.dark-mode .toggle-label {
@@ -479,7 +510,7 @@ body.dark-mode .toggle-label {
   align-items: center;
   padding: 10px 20px;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-left {
@@ -542,7 +573,7 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-2 {
-    background-color: #dedede;
+  background-color: #dedede;
   margin-top: 80px;
 }
 
@@ -560,32 +591,32 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-info {
-  flex: 0 1 200px; 
+  flex: 0 1 200px;
   margin-top: 2rem;
-  margin-right: 2rem; 
+  margin-right: 2rem;
 }
 
 .footer-links {
-  flex: 1 1 auto; 
+  flex: 1 1 auto;
   display: flex;
-  justify-content: flex-start; 
-  max-width: 500px; 
+  justify-content: flex-start;
+  max-width: 500px;
   gap: 50px;
 }
 
 .footer-description {
-  flex: 1 1 300px; 
-  max-width: 400px; 
+  flex: 1 1 300px;
+  max-width: 400px;
 }
 
 .footer-logo {
-  max-width: 100%;
+  max-width: 100% !important;
   height: auto;
   cursor: pointer;
 }
 
 .footer-section {
-  margin-right: 3rem; 
+  margin-right: 3rem;
 }
 
 .footer-heading {
@@ -612,7 +643,7 @@ body.dark-mode .navbar-link:hover {
   margin-bottom: 1rem;
 }
 
-.footer-link:hover{
+.footer-link:hover {
   display: inline-block;
   text-decoration: underline;
 }
@@ -652,13 +683,13 @@ body.dark-mode .footer-2 {
   background: #333;
 }
 
- body.dark-mode .footer-link{
+body.dark-mode .footer-link {
   color: #fff;
- }
+}
 
-body.dark-mode .footer-info img{
-  filter: brightness(0) invert(1) ;
-} 
+body.dark-mode .footer-info img {
+  filter: brightness(0) invert(1);
+}
 
 body.dark-mode .footer-button {
   background-color: #fff;
@@ -671,339 +702,384 @@ body.dark-mode .footer-button:hover {
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-.footer-content {
-  flex-direction: column;
-}
-.footer-links{
-  gap: 0px !important;
-}
-.footer-info{
-  width: 250px;
-  margin-bottom: 2rem;
-}
-.footer-links, .footer-description {
-  width: 100%;
-  margin-bottom: 2rem;
-}
+  .footer-content {
+    flex-direction: column;
+  }
 
-.footer-links {
-  flex-direction: column;
-  margin-bottom: 10px !important;
-}
+  .footer-links {
+    gap: 0px !important;
+  }
+
+  .footer-info {
+    width: 250px;
+    margin-bottom: 2rem;
+  }
 
+  .footer-links,
+  .footer-description {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
 
-.footer-section {
-  margin-right: 0;
-  /* margin-bottom: 1rem; */
-}
-.footer-heading{margin-top: 25px !important;}
-.footer-info{
-  flex: 0 1;
-  margin-bottom: 10px;
-}.footer-description{
-  flex: 1 1;
-  margin-bottom: 0px !important;
-}
+  .footer-links {
+    flex-direction: column;
+    margin-bottom: 10px !important;
+  }
+
+
+  .footer-section {
+    margin-right: 0;
+    /* margin-bottom: 1rem; */
+  }
+
+  .footer-heading {
+    margin-top: 25px !important;
+  }
+
+  .footer-info {
+    flex: 0 1;
+    margin-bottom: 10px;
+  }
+
+  .footer-description {
+    flex: 1 1;
+    margin-bottom: 0px !important;
+  }
 
 }
 
 .img-container {
-height: 250px; /* Set the height of the container */
-width: 100%; /* Adjust width if necessary */
-overflow: hidden;
-position: relative;
-scrollbar-width: none;
--ms-overflow-style: none;
+  height: 250px;
+  /* Set the height of the container */
+  width: 100%;
+  /* Adjust width if necessary */
+  overflow: hidden;
+  position: relative;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .img-container::-webkit-scrollbar {
-width: 0;
-height: 0;
+  width: 0;
+  height: 0;
 }
 
 .scroll-on-hover {
-height: 250px;
-width: 100%;
-overflow: hidden;
-position: relative;
+  height: 250px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
 }
 
 .scroll-on-hover img {
-transition: transform 1.5s ease-in-out;
+  transition: transform 1.5s ease-in-out;
 }
 
 .side-icons {
-position: fixed;
-right: 20px;
-top: 30%;
-display: flex;
-flex-direction: column;
-gap: 15px;
+  position: fixed;
+  right: 20px;
+  top: 30%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
 .icon-content {
-position: relative;
+  position: relative;
 }
 
 .icon-content a {
-display: flex;
-justify-content: center;
-align-items: center;
-width: 50px;
-height: 50px;
-border-radius: 50%;
-color: #4d4d4d; /* Default icon color */
-background-color: #fff;
-transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-overflow: hidden;
-text-decoration: none;
-position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  color: #4d4d4d;
+  /* Default icon color */
+  background-color: #fff;
+  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  overflow: hidden;
+  text-decoration: none;
+  position: relative;
 }
 
 .icon-content a i {
-font-size: 24px;
-position: relative;
-z-index: 2; /* Icons should be above the background fill */
+  font-size: 24px;
+  position: relative;
+  z-index: 2;
+  /* Icons should be above the background fill */
 }
 
 .icon-content a .filled {
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background-color: #000;
-transition: transform 0.3s ease-in-out;
-transform: scaleY(0); /* Hide the fill initially */
-transform-origin: bottom; /* Start the fill from the bottom */
-z-index: 1; /* Background fill should be below the icons */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  transition: transform 0.3s ease-in-out;
+  transform: scaleY(0);
+  /* Hide the fill initially */
+  transform-origin: bottom;
+  /* Start the fill from the bottom */
+  z-index: 1;
+  /* Background fill should be below the icons */
 }
 
 .icon-content a:hover .filled {
-transform: scaleY(1); /* Scale the fill to full height on hover */
+  transform: scaleY(1);
+  /* Scale the fill to full height on hover */
 }
 
 .icon-content a:hover i {
-color: #fff; /* Change icon color to white on hover */
+  color: #fff;
+  /* Change icon color to white on hover */
 }
 
 .icon-content a[data-social="facebook"] .filled {
-background-color: #3b5998;
+  background-color: #3b5998;
 }
 
 .icon-content a[data-social="linkedin"] .filled {
-background-color: #0077b5;
+  background-color: #0077b5;
 }
 
 .icon-content a[data-social="twitter"] .filled {
-background-color: #1da1f2;
+  background-color: #1da1f2;
 }
 
 .icon-content a[data-social="youtube"] .filled {
-background-color: #ff0000;
+  background-color: #ff0000;
 }
 
 .icon-content a[data-social="github"] .filled {
-background-color: #24292e;
+  background-color: #24292e;
 }
 
 /* Optional: add box-shadow on hover */
 .icon-content a:hover {
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 /* Dark mode styles */
 body.dark-mode .side-icons .icon-content a {
-background-color: #333; /* Dark background for icons in dark mode */
-color: #ddd; /* Light icon color in dark mode */
+  background-color: #333;
+  /* Dark background for icons in dark mode */
+  color: #ddd;
+  /* Light icon color in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a:hover .filled {
-background-color: #444; /* Slightly lighter dark mode background fill */
+  background-color: #444;
+  /* Slightly lighter dark mode background fill */
 }
 
 body.dark-mode .side-icons .icon-content a:hover i {
-color: #fff; /* White icon color on hover in dark mode */
+  color: #fff;
+  /* White icon color on hover in dark mode */
 }
 
 /* Dark mode background colors for different icons */
 body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
-background-color: #3b5998; /* Darker shade for Facebook in dark mode */
+  background-color: #3b5998;
+  /* Darker shade for Facebook in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
-background-color: #0077b5; /* Darker shade for LinkedIn in dark mode */
+  background-color: #0077b5;
+  /* Darker shade for LinkedIn in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
-background-color: #1da1f2; /* Darker shade for Twitter in dark mode */
+  background-color: #1da1f2;
+  /* Darker shade for Twitter in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled {
-background-color: #ff0000; /* Darker shade for YouTube in dark mode */
+  background-color: #ff0000;
+  /* Darker shade for YouTube in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
-background-color: #444c56; /* Darker shade for GitHub in dark mode */
+  background-color: #444c56;
+  /* Darker shade for GitHub in dark mode */
 }
 
 /* Optional: add box-shadow on hover in dark mode */
 body.dark-mode .side-icons .icon-content a:hover {
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Slightly stronger shadow in dark mode */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  /* Slightly stronger shadow in dark mode */
 }
 
 
 
 /* Base styles */
 body {
-font-family: Arial, sans-serif;
-background-color: #f4f4f4;
-color: #333;
-margin: 0;
-padding: 0;
-line-height: 1.6;
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
 }
 
 .wrapper {
-max-width: 1200px;
-margin: auto;
-padding: 20px;
-background: #fff;
-border-radius: 8px;
-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .title {
-text-align: center;
-font-size: 3em;
-font-weight: bold;
-color: #f67621;
-margin-bottom: 20px;
-text-decoration: underline;
-text-underline-offset: 8px;
+  text-align: center;
+  font-size: 3em;
+  font-weight: bold;
+  color: #f67621;
+  margin-bottom: 20px;
+  text-decoration: underline;
+  text-underline-offset: 8px;
 }
 
 /* Chrono component styles */
 .chrono {
-margin: 0 auto;
-width: 100%;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .event-container {
-display: flex;
-flex-direction: column;
-align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .event {
-background-color: #f67621;
-color: white;
-border-radius: 8px;
-margin: 20px 0;
-padding: 20px;
-max-width: 600px;
-text-align: center;
+  background-color: #f67621;
+  color: white;
+  border-radius: 8px;
+  margin: 20px 0;
+  padding: 20px;
+  max-width: 600px;
+  text-align: center;
 }
 
 .event img {
-width: 100%;
-max-width: 600px;
-height: auto;
-border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
 }
 
 .event figcaption {
-font-size: 2em;
-font-weight: bold;
-margin-top: 10px;
+  font-size: 2em;
+  font-weight: bold;
+  margin-top: 10px;
 }
 
 .event p {
-font-size: 1em;
-margin: 10px 0;
+  font-size: 1em;
+  margin: 10px 0;
 }
 
 .event .link {
-color: #fff;
-font-size: 1.2em;
-font-weight: bold;
-text-decoration: none;
-border-bottom: 2px solid #fff;
+  color: #fff;
+  font-size: 1.2em;
+  font-weight: bold;
+  text-decoration: none;
+  border-bottom: 2px solid #fff;
 }
 
 .event .link:hover {
-text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* Dark mode styles */
 body.theme-dark {
-background-color: #121212;
-color: #e0e0e0;
+  background-color: #121212;
+  color: #e0e0e0;
 }
 
 body.theme-dark .wrapper {
-background: #1e1e1e;
+  background: #1e1e1e;
 }
 
 body.theme-dark .title {
-color: #f67621;
+  color: #f67621;
 }
 
 body.theme-dark .event {
-background-color: #474747;
+  background-color: #474747;
 }
 
 body.theme-dark .event .link {
-color: #f67621;
-border-bottom: 2px solid #f67621;
+  color: #f67621;
+  border-bottom: 2px solid #f67621;
 }
 
-body.theme-dark .container{
-background-color: black !important;
+body.theme-dark .container {
+  background-color: black !important;
 }
+
 body.theme-dark .center {
-background-color: black !important;
+  background-color: black !important;
 }
+
 /* Light Mode Styles */
 .darkmodeimg {
-display: none;
+  display: none;
 }
 
 /* Dark Mode Styles */
 .dark-mode .darkmodeimg {
-display: block !important;
+  display: block !important;
 }
-.lightmodeimg{
-display: block;
+
+.lightmodeimg {
+  display: block;
 }
+
 .dark-mode .lightmodeimg {
-display: none !important;
+  display: none !important;
 }
-.dark-mode .container h1,.dark-mode .container h2{
-color: white !important;
+
+.dark-mode .container h1,
+.dark-mode .container h2 {
+  color: white !important;
 }
+
 .table-container {
-  width: 100% !important; /* Set width to 90% of the viewport width */
-  overflow-x: auto; /* Enable horizontal scrolling */
-  margin: 0 auto; /* Center the container */
+  width: 100% !important;
+  /* Set width to 90% of the viewport width */
+  overflow-x: auto;
+  /* Enable horizontal scrolling */
+  margin: 0 auto;
+  /* Center the container */
 }
 
-.header, .row {
+.header,
+.row {
   display: flex;
 
-  flex-wrap: wrap; /* Prevent wrapping */
+  flex-wrap: wrap;
+  /* Prevent wrapping */
 }
 
 .cell {
-  flex: auto; /* Allow cells to expand and fill the row */
+  flex: auto;
+  /* Allow cells to expand and fill the row */
   padding: 8px;
-  border: 1px solid #ddd; /* Add border */
-  text-align: left; /* Align text to the left */
+  border: 1px solid #ddd;
+  /* Add border */
+  text-align: left;
+  /* Align text to the left */
   /* min-width: 100px; */
 }
 
 .header {
-  background-color: #f2f2f2; /* Light gray background for header */
+  background-color: #f2f2f2;
+  /* Light gray background for header */
   font-weight: bold;
 }
 
@@ -1013,70 +1089,79 @@ color: white !important;
   width: 100%;
 }
 
-.inner-table .header, .inner-table .rows {
+.inner-table .header,
+.inner-table .rows {
   display: flex;
-  flex-wrap: wrap; /* Prevent wrapping */
+  flex-wrap: wrap;
+  /* Prevent wrapping */
 }
 
 .inner-table .header .cell {
   flex: auto !important;
-  background-color: #f2f2f2; /* Light gray background for inner table header */
+  background-color: #f2f2f2;
+  /* Light gray background for inner table header */
 }
 
 .inner-table .rows {
-  overflow-x: auto; /* Allow horizontal scrolling */
+  overflow-x: auto;
+  /* Allow horizontal scrolling */
 }
 
 .inner-table .row {
   display: flex;
-  flex-wrap: nowrap; /* Prevent wrapping */
+  flex-wrap: nowrap;
+  /* Prevent wrapping */
 }
 
 .inner-table .row .cell {
   flex: 1;
-  border: 1px solid #ddd; /* Add border */
+  border: 1px solid #ddd;
+  /* Add border */
 }
-.dark-mode .header,.dark-mode .cell{
-background-color: black !important;
+
+.dark-mode .header,
+.dark-mode .cell {
+  background-color: black !important;
 }
-body.dark-mode .side-icons  a{
-color: white !important;
+
+body.dark-mode .side-icons a {
+  color: white !important;
 }
 
 @media (max-width: 768px) {
-.side-icons {
-  width: 50px;
-  height: auto;
-  padding: 10px 0;
-  gap: 15px;
-}
+  .side-icons {
+    width: 50px;
+    height: auto;
+    padding: 10px 0;
+    gap: 15px;
+  }
 
-.icons {
-  width: 30px;
-  height: 30px;
-}
+  .icons {
+    width: 30px;
+    height: 30px;
+  }
 
-.side-icons a {
-  font-size: 18px;
-}
+  .side-icons a {
+    font-size: 18px;
+  }
 }
 
-@media (max-width: 425px){
-.side-icons {
-  width: 42px;
-  height: auto;
-  padding: 10px 0;
-  gap: 10px;
-}
+@media (max-width: 425px) {
+  .side-icons {
+    width: 42px;
+    height: auto;
+    padding: 10px 0;
+    gap: 10px;
+  }
 
-.icons {
-  width: 25px;
-  height: 25px;
-}
+  .icons {
+    width: 25px;
+    height: 25px;
+  }
 
-.side-icons a {
-  font-size: 16px;
-}
+  .side-icons a {
+    font-size: 16px;
+  }
 }
 
 #scrollToTop {
@@ -1101,7 +1186,7 @@ color: white !important;
 
 }
 
-#scrollToTop:hover{
+#scrollToTop:hover {
   background-color: #3e3e3e;
 }
 
@@ -1118,11 +1203,13 @@ color: white !important;
 }
 
 #scrollToTop:hover {
-  transform: translateY(-5px); /* Move button up on hover */
+  transform: translateY(-5px);
+  /* Move button up on hover */
 }
 
 #scrollToTop:hover .arrow-icon {
-  transform: translateY(-2px); /* Move arrow up on hover */
+  transform: translateY(-2px);
+  /* Move arrow up on hover */
 }
 
 body.dark-mode #scrollToTop {
@@ -1143,23 +1230,29 @@ html {
 }
 
 /* view count */
-a{
+a {
   text-decoration: none;
 }
 
-.dropdown{
+.dropdown {
   cursor: pointer;
   font-size: 1.5rem;
 }
 
 /* Modal Background */
 .modal1 {
-  display: none; /* Hidden by default */
-  position: absolute; /* Positioned relative to the parent */
-  z-index: 1000; /* Make sure it is above other content */
-  top:100px; /* Position below the caret */
-  left: 0; /* Align to the left of the parent */
-  width: 200px; /* Adjust width as needed */
+  display: none;
+  /* Hidden by default */
+  position: absolute;
+  /* Positioned relative to the parent */
+  z-index: 1000;
+  /* Make sure it is above other content */
+  top: 100px;
+  /* Position below the caret */
+  left: 0;
+  /* Align to the left of the parent */
+  width: 200px;
+  /* Adjust width as needed */
 }
 
 /* Modal Content */
@@ -1171,9 +1264,10 @@ a{
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   position: relative;
 }
-.modal-content p{
+
+.modal-content p {
   border-bottom: solid 1px gray;
-  padding-top: 0px ;
+  padding-top: 0px;
   cursor: pointer;
   padding-bottom: 5px;
   margin-top: 0px !important;
@@ -1187,4 +1281,4 @@ a{
   right: 10px;
   font-size: 20px;
   cursor: pointer;
-}
+}
\ No newline at end of file
