diff --git a/Website/css/styles.css b/Website/css/styles.css
index cdc30383f..1de4debbd 100644
--- a/Website/css/styles.css
+++ b/Website/css/styles.css
@@ -1,263 +1,318 @@
 /* General fade-in animation */
 .fade-in {
-  opacity: 0;
-  animation: fadeIn 1s ease-in-out forwards;
+    opacity: 0;
+    animation: fadeIn 1s ease-in-out forwards;
 }
 
 ::-webkit-scrollbar {
-  width: 7.5px;
+    width: 7.5px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #c5d8eb8d;
-  border-radius: 4px;
+    background: #c5d8eb8d;
+    border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(45deg, rgb(0, 87, 208), #002a95);
-  border-radius: 10px;
-  text-shadow: 2px 2px 5px #004cff;
-  border: 1.5px solid rgba(0, 34, 255, 0.479);
-  transition: background 0.9s ease-in-out;
+    background: linear-gradient(45deg, rgb(0, 87, 208), #002a95);
+    border-radius: 10px;
+    text-shadow: 2px 2px 5px #004cff;
+    border: 1.5px solid rgba(0, 34, 255, 0.479);
+    transition: background 0.9s ease-in-out;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(45deg, rgb(0, 54, 171), #0268a8);
+    background: linear-gradient(45deg, rgb(0, 54, 171), #0268a8);
 }
 
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 /* Slide-In Animations */
 @keyframes slide-in-right {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
 .slide-in-right {
-  animation: slide-in-right 0.5s ease-out;
+    animation: slide-in-right 0.5s ease-out;
 }
 
 /* Ensure full height of the body and remove margin/padding */
 html,
 body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-  background-color: #0a0a2e;
-  font-family: 'Arial', sans-serif;
-  display: flex;
-  flex-direction: column;
+    background-color: #0a0a2e;
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    margin-top: 60px;
 }
 
-header {
-  background-color: #121245;
-  padding: 10px 20px;
-  animation: fadeIn 1s ease-in-out;
-}
+
 
 .navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    /* Ensure the navbar is above other content */
+    background-color: #121245;
+    /* Add a background color to the navbar */
+    padding: 10px 20px;
+    /* Add padding to the navbar */
+    box-sizing: border-box;
+    /* Ensure padding is included in the width */
 }
 
+.nav-links {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 10px 20px;
+}
+
+.nav-links li {
+    margin: 0 10px;
+}
+
+.nav-icons {
+
+    display: flex;
+    align-items: center;
+}
+
+.nav-icons li {
+    margin-left: 10px;
+}
+
+.line {
+    display: none;
+    /* Hide the hamburger menu by default */
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+        /* Hide the nav links on small screens */
+    }
+
+    .line {
+        display: block;
+        /* Show the hamburger menu on small screens */
+    }
+}
+
+
+
+
+
 .logo-container {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
 }
 
 .logo-container img {
-  filter: brightness(1) invert(1);
+    filter: brightness(1) invert(1);
 }
 
 a.logo-container {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .logo-icon {
-  width: 30px;
-  height: 30px;
-  margin-right: 10px;
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
 }
 
 .logo-text {
-  font-size: 18px;
-  font-weight: bold;
-  color: #f1f1f1;
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
 }
 
 .brand-name {
-  font-size: 1.5em;
-  color: #f1f1f1;
-  margin-left: 10px;
+    font-size: 1.5em;
+    color: #f1f1f1;
+    margin-left: 10px;
 }
 
 .nav-links {
-  list-style: none;
-  display: flex;
-  flex-grow: 1;
-  justify-content: flex-end;
-  gap: 50px;
-  margin-left: 20px;
-  right: 10px;
+    list-style: none;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    gap: 50px;
+    margin-left: 20px;
+    right: 10px;
 }
 
 .line {
-  display: none;
-  flex-direction: column;
-  cursor: pointer;
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
 }
 
 .line div {
-  width: 25px;
-  height: 3px;
-  background-color: #fff;
-  margin: 4px 0;
-  transition: 0.4s;
+    width: 25px;
+    height: 3px;
+    background-color: #fff;
+    margin: 4px 0;
+    transition: 0.4s;
 }
 
 /* Hamburger Active State */
 .change .bar1 {
-  transform: rotate(-45deg) translate(-10px, 8px);
+    transform: rotate(-45deg) translate(-10px, 8px);
 }
 
 .change .bar2 {
-  opacity: 0;
+    opacity: 0;
 }
 
 .change .bar3 {
-  transform: rotate(45deg) translate(-5px, -6px);
+    transform: rotate(45deg) translate(-5px, -6px);
 }
 
 .nav-icons {
-  display: flex;
-  gap: 20px;
+    display: flex;
+    gap: 20px;
 }
 
 /* Responsive */
 @media (max-width: 1024px) {
-  .nav-links {
-    flex-direction: column;
-    align-items: center;
-    position: absolute;
-    padding: 10px;
-    top: 40px;
-    right: 0;
-    gap: 10px;
-    width: 100%;
-    background-color: #13034f;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-20px);
-    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-  }
+    .nav-links {
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        padding: 10px;
+        top: 40px;
+        right: 0;
+        gap: 10px;
+        width: 100%;
+        background-color: #13034f;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-20px);
+        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+    }
 
-  .nav-links.active {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
+    .nav-links.active {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
 
-  .nav-links li {
-    margin: 10px 0;
-  }
+    .nav-links li {
+        margin: 10px 0;
+    }
 
-  .line {
-    display: flex;
-  }
+    .line {
+        display: flex;
+    }
 }
 
 /* Hover Effect for Navigation Links */
 .nav-links a {
-  text-decoration: none;
-  color: #f1f1f1;
-  font-weight: bold;
-  position: relative;
-  white-space: nowrap;
-  transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out; 
+    text-decoration: none;
+    color: #f1f1f1;
+    font-weight: bold;
+    position: relative;
+    white-space: nowrap;
+    transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
 }
 
 .nav-links a:hover {
-  color: yellow; /* Yellow color on hover */
-  transform: scale(1.1); 
-  text-shadow: 0 0 10px yellow, 0 0 20px yellow;
+    color: yellow;
+    /* Yellow color on hover */
+    transform: scale(1.1);
+    text-shadow: 0 0 10px yellow, 0 0 20px yellow;
 }
 
 .nav-links a img {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  filter: brightness(0) invert(1);
-  margin-top: -5px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    filter: brightness(0) invert(1);
+    margin-top: -5px;
 }
 
 /* Dropdown */
 .dropdown {
-  float: left;
-  overflow: hidden;
+    float: left;
+    overflow: hidden;
 }
 
 .dropbtn {
-  font-size: 16px;
-  border: none;
-  outline: none;
-  color: white;
-  font-weight: bold;
-  background-color: inherit;
-  font-family: inherit;
-  margin: 0;
-  cursor: pointer;
+    font-size: 16px;
+    border: none;
+    outline: none;
+    color: white;
+    font-weight: bold;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+    cursor: pointer;
 }
 
 .dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f0f4f8;
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
+    display: none;
+    position: absolute;
+    background-color: #f0f4f8;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
 }
 
 .dark-mode .dropdown-content {
-  background-color: #170179;
+    background-color: #170179;
 }
 
 .dropdown-content a {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-  text-align: left;
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
 }
 
 /* Hover Effect for Dropdown Items */
 .dropdown-content a:hover {
-  color: #0066cc; 
+    color: #0066cc;
 }
 
 .dropdown:hover .dropdown-content {
-  display: block;
+    display: block;
 }
 
 .show {
-  display: block;
+    display: block;
 }
 
 
@@ -272,7 +327,7 @@ main {
 .welcome-section {
     text-align: center;
     margin-bottom: 30px;
-    color:white;
+    color: white;
 }
 
 
@@ -280,16 +335,17 @@ h2 {
     font-size: 2em;
     margin-bottom: 20px;
     animation: slideInRight 1s ease-in-out;
-    color:white;
+    color: white;
 }
 
 p {
     font-size: 1.2em;
     line-height: 1.6;
-    color:white;
+    color: white;
 }
+
 .dark-mode p {
-    color:black;
+    color: black;
 }
 
 button#toggle-stats {
@@ -324,7 +380,7 @@ button#toggle-stats:hover {
 }
 
 .stat-card {
-    background-color:#121245; 
+    background-color: #121245;
     /* background: linear-gradient(130deg, #473eed, #04004c); */
     padding: 20px;
     border-radius: 8px;
@@ -371,25 +427,27 @@ button#toggle-stats:hover {
 .stat-card:hover h3 {
     color: #ffffff;
 }
+
 .stat-card:hover p {
     color: yellow;
     font-weight: 500;
 
 }
 
-.stat-card:hover .stat-icon 
-{
+.stat-card:hover .stat-icon {
     color: white;
     text-shadow: 1px 1px 2px rgb(233, 0, 202), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
     color: rgb(255, 213, 98);
 
 }
+
 div {
     box-sizing: border-box;
     overflow: hidden;
 }
 
-.languages, .milestones {
+.languages,
+.milestones {
     padding: 10px;
     margin: 10px;
     word-wrap: break-word;
@@ -434,7 +492,7 @@ div {
 }
 
 #languages:hover {
-    background-color: #0D6EFD; 
+    background-color: #0D6EFD;
 }
 
 #language-list {
@@ -457,7 +515,7 @@ div {
 }
 
 #language-list li:hover {
-    color: #0D6EFD; 
+    color: #0D6EFD;
 }
 
 .progress-bar-container {
@@ -485,7 +543,7 @@ div {
 }
 
 .progress-bar-container:hover .progress-bar {
-    width: 320px; 
+    width: 320px;
 }
 
 #milestone {
@@ -512,7 +570,7 @@ div {
 }
 
 #milestone:hover {
-    background-color: #0D6EFD; 
+    background-color: #0D6EFD;
 }
 
 .chart-container {
@@ -539,19 +597,22 @@ div {
 }
 
 .legend span:hover {
-    transform: scale(1.1); 
+    transform: scale(1.1);
 }
 
 @media (max-width: 560px) {
     .chart-container {
         width: 120px;
     }
+
     .legend span {
         width: 170px;
     }
+
     .progress-bar-container {
         width: 200px;
     }
+
     .progress-bar {
         width: 200px;
     }
@@ -569,7 +630,7 @@ div {
 }
 
 .legend span::before:hover {
-    transform: rotate(45deg); 
+    transform: rotate(45deg);
 }
 
 button#toggle-languages {
@@ -597,6 +658,7 @@ button#toggle-languages:hover {
     padding: 0 20px;
     animation: fadeIn 1s ease-in-out;
 }
+
 #model-list {
     margin: 20px auto;
     max-width: 1200px;
@@ -615,6 +677,7 @@ button#toggle-languages:hover {
     margin-bottom: 100px;
     animation: slideInRight 1s ease-in-out;
 }
+
 #directories {
     display: flex;
     flex-wrap: wrap;
@@ -639,10 +702,12 @@ button#toggle-languages:hover {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     animation: fadeIn 1s ease-in-out;
 }
-.card h3{
-    color:white;
+
+.card h3 {
+    color: white;
 }
-.card-languages{
+
+.card-languages {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
@@ -656,12 +721,12 @@ button#toggle-languages:hover {
     margin-bottom: 20px;
 }
 
-.card-languages h3{
+.card-languages h3 {
     text-align: center;
     animation: fadeIn 1s ease-in-out;
 }
 
-.card-languages:hover{
+.card-languages:hover {
     transform: translateY(-10px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
@@ -698,6 +763,7 @@ button#toggle-languages:hover {
         max-width: 100%;
     }
 }
+
 #contributors {
     padding: 40px;
     background-color: #0a0a2e;
@@ -715,20 +781,26 @@ button#toggle-languages:hover {
 #contributors-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px; /* Reduced space between contributors */
+    gap: 20px;
+    /* Reduced space between contributors */
     justify-content: center;
-    padding: 20px; /* Padding around the grid */
-    background: linear-gradient(135deg, #121245, #121245); /* Subtle gradient background */
-    height: 600px; /* Fixed height for the grid */
-    overflow-y: auto; /* Enable vertical scrolling */
+    padding: 20px;
+    /* Padding around the grid */
+    background: linear-gradient(135deg, #121245, #121245);
+    /* Subtle gradient background */
+    height: 600px;
+    /* Fixed height for the grid */
+    overflow-y: auto;
+    /* Enable vertical scrolling */
     animation: slideInRight 1s ease-in-out;
 }
+
 #contributors-grid::-webkit-scrollbar {
     width: 10px;
 }
 
 #contributors-grid::-webkit-scrollbar-thumb {
-    background-color:#d60311;
+    background-color: #d60311;
     border-radius: 10px;
 }
 
@@ -739,63 +811,92 @@ button#toggle-languages:hover {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    max-width: 180px; /* Adjusted width for better visuals */
-    border: none; /* Remove default border */
-    border-radius: 15px; /* More rounded corners */
+    max-width: 180px;
+    /* Adjusted width for better visuals */
+    border: none;
+    /* Remove default border */
+    border-radius: 15px;
+    /* More rounded corners */
     padding: 15px;
-    background: #0b0b38; /* Darker background for the card */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
-    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
+    background: #0b0b38;
+    /* Darker background for the card */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* Enhanced shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    /* Smooth transition effects */
     animation: slideInRight 1s ease-in-out;
 }
 
 .contributor:hover {
-    transform: translateY(-8px); /* Slight lift effect on hover */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+    transform: translateY(-8px);
+    /* Slight lift effect on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    /* Stronger shadow on hover */
 }
 
 /* Styling for contributor's image */
 .contributor-image {
-    width: 110px; /* Adjusted size */
-    height: 110px; /* Adjusted size */
-    border-radius: 50%; /* Circular image */
-    object-fit: cover; /* Ensure image covers area without distortion */
-    border: 3px solid #0366d6; /* Border around the image */
-    transition: border-color 0.3s ease; /* Smooth border color change */
+    width: 110px;
+    /* Adjusted size */
+    height: 110px;
+    /* Adjusted size */
+    border-radius: 50%;
+    /* Circular image */
+    object-fit: cover;
+    /* Ensure image covers area without distortion */
+    border: 3px solid #0366d6;
+    /* Border around the image */
+    transition: border-color 0.3s ease;
+    /* Smooth border color change */
 }
 
 .contributor-image:hover {
-    border-color: #024c8c; /* Darker border color on hover */
+    border-color: #024c8c;
+    /* Darker border color on hover */
 }
 
 /* Styling for the contributor's name link */
 .contributor-info {
-    margin-top: 10px; /* Adjusted space between image and link */
+    margin-top: 10px;
+    /* Adjusted space between image and link */
 }
 
 .contributor-name {
     text-decoration: none;
-    color: #0366d6; /* GitHub blue color */
-    font-size: 14px; /* Slightly smaller font size */
-    font-weight: bold; /* Bold font */
-    background:  #add3ff;
-    padding: 8px 12px; /* Adjusted padding around the link */
-    border-radius: 20px; /* Rounded button shape */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for button */
-    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition effects */
+    color: #0366d6;
+    /* GitHub blue color */
+    font-size: 14px;
+    /* Slightly smaller font size */
+    font-weight: bold;
+    /* Bold font */
+    background: #add3ff;
+    padding: 8px 12px;
+    /* Adjusted padding around the link */
+    border-radius: 20px;
+    /* Rounded button shape */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Subtle shadow for button */
+    transition: background 0.3s ease, color 0.3s ease;
+    /* Smooth transition effects */
 }
 
 .contributor-name:hover {
-    background: #0366d6; /* Darker background on hover */
-    color: #ffffff; /* White text color on hover */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+    background: #0366d6;
+    /* Darker background on hover */
+    color: #ffffff;
+    /* White text color on hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    /* Stronger shadow on hover */
 }
 
 /* Styling for the heading with class 'contri-heading' */
 .contri-heading {
-    font-size: 2.5rem; /* Increase font size */
-    font-weight: 900; /* Bold font weight */
-    color: white; /* Dark color for better contrast */
+    font-size: 2.5rem;
+    /* Increase font size */
+    font-weight: 900;
+    /* Bold font weight */
+    color: white;
+    /* Dark color for better contrast */
     animation: fadeIn 1s ease-in-out;
 }
 
@@ -831,7 +932,8 @@ button#toggle-languages:hover {
     width: 400px;
     z-index: 1000;
     transition: all 0.3s ease;
-    max-height: 600px; /* Adjust as needed */
+    max-height: 600px;
+    /* Adjust as needed */
     overflow: hidden;
     animation: fadeIn 1s ease-in-out;
 }
@@ -844,9 +946,11 @@ button#toggle-languages:hover {
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(-7px);
     }
+
     100% {
         transform: translateY(0);
     }
@@ -877,7 +981,8 @@ button#toggle-languages:hover {
 }
 
 /* Hided tooltip on touch devices */
-@media (hover: none) and (pointer: coarse), (max-width: 767px) {
+@media (hover: none) and (pointer: coarse),
+(max-width: 767px) {
     .tooltip {
         display: none;
     }
@@ -968,9 +1073,12 @@ button#toggle-languages:hover {
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
+
 #question-list {
-    max-height: 200px; /* Adjust height as needed */
-    overflow-y: auto;  /* Enable vertical scrolling */
+    max-height: 200px;
+    /* Adjust height as needed */
+    overflow-y: auto;
+    /* Enable vertical scrolling */
     padding: 10px;
     border: 1px solid #ccc;
 }
@@ -1008,38 +1116,39 @@ button#toggle-languages:hover {
     background-color: #40486b;
 }
 
- /* Styles for the go to top button */
+/* Styles for the go to top button */
 
- #scroll-top-btn {
+#scroll-top-btn {
     position: fixed;
     bottom: 34px;
     left: 20px;
-    display: none; 
+    display: none;
     border: none;
     background: none;
     border-radius: 50%;
     padding: 10px;
     font-size: 24px;
-    height: 45px; 
-    width: 45px; 
+    height: 45px;
+    width: 45px;
     cursor: pointer;
     z-index: 1000;
     transition: background-color 0.3s ease;
 }
 
 .dark-mode #scroll-top-btn svg {
-    pointer-events: none; 
-    height: 45px; 
-    width: 45px; 
-    fill: rgb(0, 12, 150); 
-    
+    pointer-events: none;
+    height: 45px;
+    width: 45px;
+    fill: rgb(0, 12, 150);
+
 }
+
 #scroll-top-btn svg {
-    pointer-events: none; 
-    height: 45px; 
-    width: 45px; 
-    fill: rgb(255, 255, 255); 
-    
+    pointer-events: none;
+    height: 45px;
+    width: 45px;
+    fill: rgb(255, 255, 255);
+
 }
 
 
@@ -1111,6 +1220,7 @@ button#toggle-languages:hover {
         grid-template-columns: 1fr;
     }
 }
+
 .side-icons {
     position: fixed;
     right: 20px;
@@ -1118,13 +1228,13 @@ button#toggle-languages:hover {
     display: flex;
     flex-direction: column;
     gap: 15px;
-  }
-  
-  .icon-content {
+}
+
+.icon-content {
     position: relative;
-  }
-  
-  .icon-content a {
+}
+
+.icon-content a {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1137,15 +1247,15 @@ button#toggle-languages:hover {
     overflow: hidden;
     text-decoration: none;
     position: relative;
-  }
-  
-  .icon-content a i {
+}
+
+.icon-content a i {
     font-size: 24px;
     position: relative;
     z-index: 2;
-  }
-  
-  .icon-content a .filled {
+}
+
+.icon-content a .filled {
     position: absolute;
     top: 0;
     left: 0;
@@ -1156,108 +1266,113 @@ button#toggle-languages:hover {
     transform: scaleY(0);
     transform-origin: bottom;
     z-index: 1;
-  }
-  
-  .icon-content a:hover .filled {
+}
+
+.icon-content a:hover .filled {
     transform: scaleY(1);
-  }
-  
-  .icon-content a:hover i {
+}
+
+.icon-content a:hover i {
     color: #fff;
-  }
-  
-  .icon-content a[data-social="facebook"] .filled {
+}
+
+.icon-content a[data-social="facebook"] .filled {
     background-color: #3b5998;
-  }
-  
-  .icon-content a[data-social="linkedin"] .filled {
+}
+
+.icon-content a[data-social="linkedin"] .filled {
     background-color: #0077b5;
-  }
-  
-  .icon-content a[data-social="twitter"] .filled {
+}
+
+.icon-content a[data-social="twitter"] .filled {
     background-color: #1da1f2;
-  }
-  
-  .icon-content a[data-social="youtube"] .filled {
+}
+
+.icon-content a[data-social="youtube"] .filled {
     background-color: #ff0000;
-  }
-  
-  .icon-content a[data-social="github"] .filled {
+}
+
+.icon-content a[data-social="github"] .filled {
     background-color: #24292e;
-  }
-  
-  .icon-content a:hover {
+}
+
+.icon-content a:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  body.dark-mode .side-icons .icon-content a {
+}
+
+body.dark-mode .side-icons .icon-content a {
     background-color: #121245;
     color: #ddd;
-  }
-  
-  body.dark-mode .side-icons .icon-content a:hover .filled {
+}
+
+body.dark-mode .side-icons .icon-content a:hover .filled {
     background-color: #444;
-  }
-  
-  body.dark-mode .side-icons .icon-content a:hover i {
+}
+
+body.dark-mode .side-icons .icon-content a:hover i {
     color: #fff;
-  }
+}
 
-  body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
+body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
     background-color: #3b5998;
-  }
-  
-  body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
+}
+
+body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
     background-color: #0077b5;
-  }
-  
-  body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
+}
+
+body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
     background-color: #1da1f2;
-  }
-  
-  body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled {
+}
+
+body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled {
     background-color: #ff0000;
-  }
-  
-  body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
+}
+
+body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
     background-color: #444c56;
-  }
-  
-  body.dark-mode .side-icons .icon-content a:hover {
+}
+
+body.dark-mode .side-icons .icon-content a:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
-  }
-  
+}
+
 
 /* Dark Mode Styles */
 body.dark-mode {
-    background-color:#f4f4f4; 
+    background-color: #f4f4f4;
 }
 
 .dark-mode .nav-links a {
-    color:#fff;
+    color: #fff;
 }
 
-.dark-mode h2{
-    color:black;
+.dark-mode h2 {
+    color: black;
 }
-.dark-mode .card h3{
-    color:black;
+
+.dark-mode .card h3 {
+    color: black;
 }
-.dark-mode .welcome-section span{
-    color:rgb(3, 3, 122);
+
+.dark-mode .welcome-section span {
+    color: rgb(3, 3, 122);
 }
-.dark-mode .welcome-section p{
-    color:black;
+
+.dark-mode .welcome-section p {
+    color: black;
 }
+
 .dark-mode .highlight {
-    color: black; 
+    color: black;
 }
 
 .dark-mode .stat-card {
-    background-color: #050066; 
+    background-color: #050066;
 }
-.dark-mode .contri-heading{
-    color:black;
+
+.dark-mode .contri-heading {
+    color: black;
 }
 
 
@@ -1269,28 +1384,35 @@ body.dark-mode {
     font-size: 1.2em;
     transition: color 0.3s ease;
 }
-.dark-mode #languages{
+
+.dark-mode #languages {
     background-color: #fff;
     color: black;
 }
-.dark-mode #milestone{
+
+.dark-mode #milestone {
     background-color: #fff;
-    color:black;
+    color: black;
 }
-.dark-mode .card{
+
+.dark-mode .card {
     background-color: #fff;
 }
-.dark-mode #milestone{
+
+.dark-mode #milestone {
     background-color: #fff;
-    color:black;
+    color: black;
 }
-.dark-mode #contributors{
+
+.dark-mode #contributors {
     background-color: #f9f9f9;
 }
-.dark-mode #contributors h2{
+
+.dark-mode #contributors h2 {
     color: #333;
 }
-.dark-mode #contributors-grid{
+
+.dark-mode #contributors-grid {
     background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
 }
 
@@ -1298,7 +1420,8 @@ body.dark-mode {
     background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
     color: #0366d6;
 }
-.dark-mode .contributor{
+
+.dark-mode .contributor {
     background: #ffffff;
 }
 
@@ -1309,12 +1432,15 @@ body.dark-mode {
 .dark-mode .milestone-card {
     background-color: white;
 }
-.dark-mode .milestone-card h3{
-    color:black;
+
+.dark-mode .milestone-card h3 {
+    color: black;
 }
-.dark-mode .milestone-card p{
-    color:black;
+
+.dark-mode .milestone-card p {
+    color: black;
 }
+
 .testimonial-section {
     background-color: #111151;
     padding: 60px 20px;
@@ -1365,14 +1491,18 @@ body.dark-mode {
 
 /* Hover effect */
 .testimonial:hover {
-    background-color: #ffd700; /* Change to a contrasting color */
-    color: #111151; /* Change text color */
-    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); /* Brighter shadow */
+    background-color: #ffd700;
+    /* Change to a contrasting color */
+    color: #111151;
+    /* Change text color */
+    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
+    /* Brighter shadow */
 }
 
 .testimonial:hover p,
 .testimonial:hover h3 {
-    color: #111151; /* Ensure text is visible against new background */
+    color: #111151;
+    /* Ensure text is visible against new background */
 }
 
 /* Light Mode for Testimonial Section */
@@ -1381,7 +1511,7 @@ body.dark-mode {
     color: #333;
 }
 
-.blue-mode .text-white-light-mode{
+.blue-mode .text-white-light-mode {
     color: black !important;
 }
 
@@ -1404,14 +1534,16 @@ body.dark-mode {
 
 /* Hover effect for dark mode */
 .dark-mode .testimonial:hover {
-    background-color: #555; /* A darker color for light mode */
+    background-color: #555;
+    /* A darker color for light mode */
     color: #fff;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
 
 .dark-mode .testimonial:hover p,
 .dark-mode .testimonial:hover h3 {
-    color: #fff; /* Ensure text remains visible */
+    color: #fff;
+    /* Ensure text remains visible */
 }
 
 body {
@@ -1426,7 +1558,7 @@ body {
     background-color: #01043b;
     border: 2px solid #6ae6fc;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
@@ -1529,7 +1661,7 @@ h1 {
     width: 80%;
     padding: 25px;
     margin-bottom: 30px;
-    background-color: #48d4f0; 
+    background-color: #48d4f0;
     color: white;
     border: none;
     cursor: pointer;
@@ -1541,9 +1673,9 @@ h1 {
 
 /* Button hover effect */
 .github-buttons button:hover {
-    background-color: #ffeb3b; 
-    color: #03404a; 
-    box-shadow: 0 0 15px #ffeb3b; 
+    background-color: #ffeb3b;
+    color: #03404a;
+    box-shadow: 0 0 15px #ffeb3b;
     font-weight: bold;
 }
 
@@ -1560,214 +1692,268 @@ h1 {
 }
 
 .github-image img:hover {
-    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8); 
-    transform: translateY(-5px); 
+    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8);
+    transform: translateY(-5px);
 }
 
 /* Dark Mode Styles */
 
-.dark-mode .github-section{
+.dark-mode .github-section {
     background-color: #8397fa;
 }
 
 /*Update the twitter icon to its real one */
- .fa.fa-twitter::before{
-	content:"𝕏";
+.fa.fa-twitter::before {
+    content: "𝕏";
 }
 
 /* Light Mode Styles */
 body.light-mode {
-    background-color: #f4f4f4; /* Light background */
-    color: #333; /* Dark text */
+    background-color: #f4f4f4;
+    /* Light background */
+    color: #333;
+    /* Dark text */
 }
 
 .light-mode .dropdown-content {
-    background-color: #fff; /* Light dropdown background */
+    background-color: #fff;
+    /* Light dropdown background */
 }
 
-.light-mode .text-black-light-mode, .light-mode .card h3{
-    color: #333 !important; 
+.light-mode .text-black-light-mode,
+.light-mode .card h3 {
+    color: #333 !important;
 }
 
-.light-mode p{
+.light-mode p {
     color: white;
 }
 
 .light-mode #scroll-top-btn svg {
-    fill: rgb(0, 0, 150); /* Adjust SVG color */
+    fill: rgb(0, 0, 150);
+    /* Adjust SVG color */
 }
 
 .light-mode .side-icons .icon-content a {
-    background-color: #fff; /* White background for icons */
-    color: #333; /* Dark text color */
+    background-color: #fff;
+    /* White background for icons */
+    color: #333;
+    /* Dark text color */
 }
 
 .light-mode .side-icons .icon-content a:hover .filled {
-    background-color: #ddd; /* Light hover effect */
+    background-color: #ddd;
+    /* Light hover effect */
 }
 
 .light-mode .highlight {
-    color: #333; /* Highlight color */
+    color: #333;
+    /* Highlight color */
 }
 
 /* Dark Mode Styles */
 body.dark-mode {
-    background-color: #121212; /* Dark background */
-    color: #f1f1f1; /* Light text */
+    background-color: #121212;
+    /* Dark background */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 .dark-mode .dropdown-content {
-    background-color: #1c1c1c; /* Dark dropdown background */
+    background-color: #1c1c1c;
+    /* Dark dropdown background */
 }
 
-.dark-mode p, .dark-mode h2, .dark-mode .card h3 {
-    color: #f1f1f1; /* Light text color */
+.dark-mode p,
+.dark-mode h2,
+.dark-mode .card h3 {
+    color: #f1f1f1;
+    /* Light text color */
 }
 
 .dark-mode #scroll-top-btn svg {
-    fill: rgb(255, 255, 255); /* Adjust SVG color */
+    fill: rgb(255, 255, 255);
+    /* Adjust SVG color */
 }
 
 .dark-mode .side-icons .icon-content a {
-    background-color: #1f1f1f; /* Dark background for icons */
-    color: #f1f1f1; /* Light text color */
+    background-color: #1f1f1f;
+    /* Dark background for icons */
+    color: #f1f1f1;
+    /* Light text color */
 }
 
 .dark-mode .side-icons .icon-content a:hover .filled {
-    background-color: #444; /* Dark hover effect */
+    background-color: #444;
+    /* Dark hover effect */
 }
 
 .dark-mode .highlight {
-    color: #f1f1f1; /* Highlight color */
+    color: #f1f1f1;
+    /* Highlight color */
 }
 
 /* Blue Mode Styles */
 body.blue-mode {
-    background-color: #170179; /* Dark blue background */
-    color: #f1f1f1; /* Light text */
+    background-color: #170179;
+    /* Dark blue background */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 .blue-mode .dropdown-content {
-    background-color: #121245; /* Blue dropdown background */
+    background-color: #121245;
+    /* Blue dropdown background */
 }
 
-.blue-mode p, .blue-mode h2, .blue-mode .card h3 {
-    color: #fff; /* Light text color */
+.blue-mode p,
+.blue-mode h2,
+.blue-mode .card h3 {
+    color: #fff;
+    /* Light text color */
 }
 
 .blue-mode #scroll-top-btn svg {
-    fill: rgb(0, 12, 150); /* SVG color for blue mode */
+    fill: rgb(0, 12, 150);
+    /* SVG color for blue mode */
 }
 
 .blue-mode .side-icons .icon-content a {
-    background-color: #121245; /* Dark blue background for icons */
-    color: #ddd; /* Light text color */
+    background-color: #121245;
+    /* Dark blue background for icons */
+    color: #ddd;
+    /* Light text color */
 }
 
 .blue-mode .side-icons .icon-content a:hover .filled {
-    background-color: #444; /* Dark hover effect */
+    background-color: #444;
+    /* Dark hover effect */
 }
 
 .blue-mode .highlight {
-    color: #fff; /* Highlight color */
+    color: #fff;
+    /* Highlight color */
 }
 
 /* Additional Styles for Cards and Sections */
-.light-mode .card, 
-.dark-mode .card, 
+.light-mode .card,
+.dark-mode .card,
 .blue-mode .card {
-    background-color: #fff; /* Default card background for light mode */
+    background-color: #fff;
+    /* Default card background for light mode */
 }
 
 .dark-mode .card {
-    background-color: #1f1f1f; /* Dark card background */
+    background-color: #1f1f1f;
+    /* Dark card background */
 }
 
 .blue-mode .card {
-    background-color: #121245; /* Blue card background */
+    background-color: #121245;
+    /* Blue card background */
 }
 
 /* Testimonial Section Styles */
-.light-mode .testimonial-section{
+.light-mode .testimonial-section {
     color: white;
 }
-.light-mode .text-black-light-mode{
+
+.light-mode .text-black-light-mode {
     color: black;
 }
-.dark-mode .text-black-light-mode{
+
+.dark-mode .text-black-light-mode {
     color: white !important;
 }
+
 .dark-mode .testimonial-section,
 .blue-mode .testimonial-section {
     color: #333;
 }
 
 .dark-mode .testimonial-section {
-    background-color: #333; /* Dark testimonial section */
+    background-color: #333;
+    /* Dark testimonial section */
 }
 
 .blue-mode .testimonial-section {
-    background-color: #f9f9f9; /* Blue testimonial section */
+    background-color: #f9f9f9;
+    /* Blue testimonial section */
 }
 
 /* Additional styling for testimonials */
-.light-mode .testimonial, 
-.dark-mode .testimonial, 
+.light-mode .testimonial,
+.dark-mode .testimonial,
 .blue-mode .testimonial {
-    background-color: #fff; /* Default testimonial background for light mode */
+    background-color: #fff;
+    /* Default testimonial background for light mode */
 }
 
 .dark-mode .testimonial {
-    background-color: #222; /* Dark testimonial background */
+    background-color: #222;
+    /* Dark testimonial background */
 }
 
 .blue-mode .testimonial {
-    background-color: #170179; /* Blue testimonial background */
+    background-color: #170179;
+    /* Blue testimonial background */
 }
 
 /* Button Styles */
 .light-mode #toggle-dark-mode {
     /* background-color: #007bff; Blue button background for light mode */
-    color: #fff; /* White text */
+    color: #fff;
+    /* White text */
 }
 
 .dark-mode #toggle-dark-mode {
     /* background-color: #444; Dark button background */
-    color: #f1f1f1; /* Light text */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 .blue-mode #toggle-dark-mode {
     /* background-color: #170179; Dark blue button background */
-    color: #f1f1f1; /* Light text */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 /* Card Styles */
 .light-mode .card {
-    background-color: #ffffff; /* White card background */
-    border: 1px solid #ddd; /* Light border */
+    background-color: #ffffff;
+    /* White card background */
+    border: 1px solid #ddd;
+    /* Light border */
 }
 
 .dark-mode .card {
-    background-color: #1e1e1e; /* Dark gray card background */
-    border: 1px solid #333; /* Darker border */
+    background-color: #1e1e1e;
+    /* Dark gray card background */
+    border: 1px solid #333;
+    /* Darker border */
 }
 
 .blue-mode .card {
-    background-color: #121245; /* Blue card background */
-    border: 1px solid #0f0f2e; /* Darker blue border */
+    background-color: #121245;
+    /* Blue card background */
+    border: 1px solid #0f0f2e;
+    /* Darker blue border */
 }
 
 /* Section Headers */
 .light-mode .section-header {
-    color: #333; /* Dark text for section headers */
+    color: #333;
+    /* Dark text for section headers */
 }
 
 .dark-mode .section-header {
-    color: #f1f1f1; /* Light text for section headers */
+    color: #f1f1f1;
+    /* Light text for section headers */
 }
 
 .blue-mode .section-header {
-    color: #f1f1f1; /* Light text for section headers */
+    color: #f1f1f1;
+    /* Light text for section headers */
 }
 
 /* Links Styles */
@@ -1777,31 +1963,38 @@ body.blue-mode {
 }
 
 .dark-mode a {
-    color: #1e90ff; /* Lighter blue link color */
+    color: #1e90ff;
+    /* Lighter blue link color */
 }
+
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
     .twitter-logo {
-        filter: invert(1); /* Inverts the colors, making a dark logo appear light */
+        filter: invert(1);
+        /* Inverts the colors, making a dark logo appear light */
     }
 }
 
 
 .blue-mode a {
-    color: #f1f1f1; /* Light text color for links */
+    color: #f1f1f1;
+    /* Light text color for links */
 }
 
 /* Hover Effects for Links */
 .light-mode a:hover {
-    text-decoration: underline; /* Underline on hover */
+    text-decoration: underline;
+    /* Underline on hover */
 }
 
 .dark-mode a:hover {
-    color: #00aaff; /* Change link color on hover */
+    color: #00aaff;
+    /* Change link color on hover */
 }
 
 .blue-mode a:hover {
-    color: #ddd; /* Change link color on hover */
+    color: #ddd;
+    /* Change link color on hover */
 }
 
 /* Footer Styles */
@@ -1846,7 +2039,7 @@ body.blue-mode {
 .footer-social {
     display: flex;
     align-items: center;
-    
+
 }
 
 .footer-social i {
@@ -1910,12 +2103,15 @@ body.blue-mode {
 /* Responsive Design Adjustments */
 @media (max-width: 768px) {
     .card {
-        margin: 10px; /* Margin adjustments for mobile */
+        margin: 10px;
+        /* Margin adjustments for mobile */
     }
 
     #toggle-dark-mode {
-        width: 100%; /* Full width button on mobile */
-        font-size: 1em; /* Adjust font size */
+        width: 100%;
+        /* Full width button on mobile */
+        font-size: 1em;
+        /* Adjust font size */
     }
 }
 
@@ -1923,154 +2119,203 @@ body.blue-mode {
 .light-mode input,
 .light-mode textarea,
 .light-mode select {
-    background-color: #fff; /* White background for input fields */
-    color: #333; /* Dark text */
-    border: 1px solid #ccc; /* Light border */
-    padding: 10px; /* Padding for comfort */
+    background-color: #fff;
+    /* White background for input fields */
+    color: #333;
+    /* Dark text */
+    border: 1px solid #ccc;
+    /* Light border */
+    padding: 10px;
+    /* Padding for comfort */
 }
 
 .dark-mode input,
 .dark-mode textarea,
 .dark-mode select {
-    background-color: #2c2c2c; /* Dark background for input fields */
-    color: #f1f1f1; /* Light text */
-    border: 1px solid #555; /* Dark border */
+    background-color: #2c2c2c;
+    /* Dark background for input fields */
+    color: #f1f1f1;
+    /* Light text */
+    border: 1px solid #555;
+    /* Dark border */
 }
 
 .blue-mode input,
 .blue-mode textarea,
 .blue-mode select {
-    background-color: #121245; /* Dark blue background for input fields */
-    color: #fff; /* Light text */
-    border: 1px solid #444; /* Darker blue border */
+    background-color: #121245;
+    /* Dark blue background for input fields */
+    color: #fff;
+    /* Light text */
+    border: 1px solid #444;
+    /* Darker blue border */
 }
 
 /* Button Styles */
 .light-mode button,
 .light-mode .btn {
     /* background-color: #007bff; Primary button color */
-    color: #fff; /* White text */
-    border: none; /* No border */
+    color: #fff;
+    /* White text */
+    border: none;
+    /* No border */
     /* padding: 10px 15px; Padding */
-    cursor: pointer; /* Pointer cursor */
-    transition: background-color 0.3s ease; /* Transition for hover effect */
+    cursor: pointer;
+    /* Pointer cursor */
+    transition: background-color 0.3s ease;
+    /* Transition for hover effect */
 }
 
 .dark-mode button,
 .dark-mode .btn {
     /* background-color: #444; Dark button color */
-    color: #f1f1f1; /* Light text */
-    border: none; /* No border */
+    color: #f1f1f1;
+    /* Light text */
+    border: none;
+    /* No border */
 }
 
 .blue-mode button,
 .blue-mode .btn {
     /* background-color: #170179; Dark blue button color */
-    color: #f1f1f1; /* Light text */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 /* Hover Effects for Buttons */
 .light-mode button:hover,
 .light-mode .btn:hover {
-    background-color: #0056b3; /* Darker blue on hover */
+    background-color: #0056b3;
+    /* Darker blue on hover */
 }
 
 .dark-mode button:hover,
 .dark-mode .btn:hover {
-    background-color: #555; /* Lighter dark on hover */
+    background-color: #555;
+    /* Lighter dark on hover */
 }
 
 .blue-mode button:hover,
 .blue-mode .btn:hover {
-    background-color: #0f0f2e; /* Lighter blue on hover */
+    background-color: #0f0f2e;
+    /* Lighter blue on hover */
 }
 
 /* Alert Styles */
 .light-mode .alert {
-    background-color: #dff0d8; /* Light green for success */
-    color: #3c763d; /* Dark green text */
+    background-color: #dff0d8;
+    /* Light green for success */
+    color: #3c763d;
+    /* Dark green text */
 }
 
 .dark-mode .alert {
-    background-color: #d9534f; /* Red for danger */
-    color: #f1f1f1; /* Light text */
+    background-color: #d9534f;
+    /* Red for danger */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 .blue-mode .alert {
-    background-color: #f0f4f8; /* Light blue for info */
-    color: #31708f; /* Dark blue text */
+    background-color: #f0f4f8;
+    /* Light blue for info */
+    color: #31708f;
+    /* Dark blue text */
 }
 
 /* Table Styles */
 .light-mode table {
-    width: 100%; /* Full width */
-    border-collapse: collapse; /* Remove space between cells */
+    width: 100%;
+    /* Full width */
+    border-collapse: collapse;
+    /* Remove space between cells */
 }
 
 .light-mode th,
 .light-mode td {
-    border: 1px solid #ddd; /* Light border for cells */
-    padding: 8px; /* Padding for cells */
+    border: 1px solid #ddd;
+    /* Light border for cells */
+    padding: 8px;
+    /* Padding for cells */
 }
 
 .dark-mode table {
-    width: 100%; /* Full width */
-    border-collapse: collapse; /* Remove space between cells */
+    width: 100%;
+    /* Full width */
+    border-collapse: collapse;
+    /* Remove space between cells */
 }
 
 .dark-mode th,
 .dark-mode td {
-    border: 1px solid #444; /* Darker border for cells */
-    padding: 8px; /* Padding for cells */
+    border: 1px solid #444;
+    /* Darker border for cells */
+    padding: 8px;
+    /* Padding for cells */
 }
 
 .blue-mode table {
-    width: 100%; /* Full width */
-    border-collapse: collapse; /* Remove space between cells */
+    width: 100%;
+    /* Full width */
+    border-collapse: collapse;
+    /* Remove space between cells */
 }
 
 .blue-mode th,
 .blue-mode td {
-    border: 1px solid #444; /* Darker border for cells */
-    padding: 8px; /* Padding for cells */
+    border: 1px solid #444;
+    /* Darker border for cells */
+    padding: 8px;
+    /* Padding for cells */
 }
 
 /* Responsive Adjustments */
 @media (max-width: 768px) {
+
     .light-mode .alert,
     .dark-mode .alert,
     .blue-mode .alert {
-        font-size: 0.9em; /* Slightly smaller font for alerts on mobile */
+        font-size: 0.9em;
+        /* Slightly smaller font for alerts on mobile */
     }
 
     .light-mode table,
     .dark-mode table,
     .blue-mode table {
-        font-size: 0.9em; /* Smaller font for tables on mobile */
+        font-size: 0.9em;
+        /* Smaller font for tables on mobile */
     }
 
     .light-mode button,
     .dark-mode button,
     .blue-mode button {
-        width: 100%; /* Full width buttons on mobile */
-        padding: 12px; /* Increased padding */
-        font-size: 1em; /* Adjust font size */
+        width: 100%;
+        /* Full width buttons on mobile */
+        padding: 12px;
+        /* Increased padding */
+        font-size: 1em;
+        /* Adjust font size */
     }
 }
 
 /* Miscellaneous Styles */
 .light-mode .tooltip {
-    background-color: #f9f9f9; /* Light background for tooltips */
-    color: #333; /* Dark text */
+    background-color: #f9f9f9;
+    /* Light background for tooltips */
+    color: #333;
+    /* Dark text */
 }
 
 .dark-mode .tooltip {
-    background-color: #222; /* Dark background for tooltips */
-    color: #f1f1f1; /* Light text */
+    background-color: #222;
+    /* Dark background for tooltips */
+    color: #f1f1f1;
+    /* Light text */
 }
 
 .blue-mode .tooltip {
-    background-color: #170179; /* Dark blue background for tooltips */
-    color: #f1f1f1; /* Light text */
-}
-
+    background-color: #170179;
+    /* Dark blue background for tooltips */
+    color: #f1f1f1;
+    /* Light text */
+}
\ No newline at end of file
diff --git a/Website/index.html b/Website/index.html
index de4c8ab48..c41a3af34 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -1,760 +1,760 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <meta name="title" content="Machine Learning Repositories">
-    <meta name="description"
-        content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community">
-    <meta name="keywords"
-        content="machine learning, machine learning repositories, machine learning repos, machine learning recode hive, recode hive, recode hive ml repos, recode give ml, ml, ml repositories, github repositories ml, machine learning github repositories">
-    <meta name="robots" content="index, follow">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="language" content="English">
-    <meta name="revisit-after" content="1 days">
-    <meta name="author" content="Recode Hive">
-    <meta property="og:type" content="website" />
-    <!-- <meta property="og:url" content="url" /> define URL when deployed -->
-    <meta property="og:description"
-        content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community" />
-    <title>Machine Learning Repositories</title>
-    <!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
-    <link rel="stylesheet" href="css/styles.css" />
-    <link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="title" content="Machine Learning Repositories">
+  <meta name="description"
+    content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community">
+  <meta name="keywords"
+    content="machine learning, machine learning repositories, machine learning repos, machine learning recode hive, recode hive, recode hive ml repos, recode give ml, ml, ml repositories, github repositories ml, machine learning github repositories">
+  <meta name="robots" content="index, follow">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="language" content="English">
+  <meta name="revisit-after" content="1 days">
+  <meta name="author" content="Recode Hive">
+  <meta property="og:type" content="website" />
+  <!-- <meta property="og:url" content="url" /> define URL when deployed -->
+  <meta property="og:description"
+    content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community" />
+  <title>Machine Learning Repositories</title>
+  <!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
     #progress-container {
-    position: fixed ;
-    top: 0px;
-    left: 0;
-    width: 100%;
-    height: 15px;
-    z-index: 99990;
-    /* background: #f3f3f3; */
-}
-
-#progress-bar {
-    height: 53%;
-    width: 0;
-    background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
-    box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
-    transition: width 0.09s ease-in-out;
-    border-radius: 10px;
-}
-.repo {
-        background-color: #f9f9f9;
-        padding: 20px;
-        margin: 15px;
-        border-radius: 12px;
-        width: 250px; 
-        text-align: center;
-        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        animation: fadeInUp 1.2s ease-in-out;
-      }
-      .repo a {
-        text-decoration: none;
-      }
-      .repo:hover {
-        transform: translateY(-10px);
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
-      }
-      .repo img {
-        max-width: 100%;
-        border-radius: 8px;
-        transition: transform 0.3s ease;
-      }
-      .repo:hover img {
-        transform: scale(1.05);
-      }
-      .repo-title {
-        font-size: 1.4em;
-        margin-top: 15px;
-        margin-bottom: 10px;
-        color: #333;
-      }
-      .repo-description {
-        font-size: 1em;
-        color: #777;
-      }
-      .paragraph {
-        font-size: 1.2em;
-        line-height: 1.8em;
-        margin-bottom: 30px;
-        color: #ffffff;
-        text-align: center;
-        animation: fadeInUp 1.2s ease-in-out;
-      }
-      .repo-section {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        margin-bottom: 30px;
-      }
-      .dark-mode .content{
-        background-color: white;
-      }
-      .dark-mode .title{
-        color: #333;
-      }
-      .dark-mode .paragraph{
-        color: #555;
-      }
+      position: fixed;
+      top: 0px;
+      left: 0;
+      width: 100%;
+      height: 15px;
+      z-index: 99990;
+      /* background: #f3f3f3; */
+    }
 
-    </style>
+    #progress-bar {
+      height: 53%;
+      width: 0;
+      background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
+      box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+      transition: width 0.09s ease-in-out;
+      border-radius: 10px;
+    }
+
+    .repo {
+      background-color: #f9f9f9;
+      padding: 20px;
+      margin: 15px;
+      border-radius: 12px;
+      width: 250px;
+      text-align: center;
+      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      animation: fadeInUp 1.2s ease-in-out;
+    }
+
+    .repo a {
+      text-decoration: none;
+    }
+
+    .repo:hover {
+      transform: translateY(-10px);
+      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .repo img {
+      max-width: 100%;
+      border-radius: 8px;
+      transition: transform 0.3s ease;
+    }
+
+    .repo:hover img {
+      transform: scale(1.05);
+    }
+
+    .repo-title {
+      font-size: 1.4em;
+      margin-top: 15px;
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    .repo-description {
+      font-size: 1em;
+      color: #777;
+    }
+
+    .paragraph {
+      font-size: 1.2em;
+      line-height: 1.8em;
+      margin-bottom: 30px;
+      color: #ffffff;
+      text-align: center;
+      animation: fadeInUp 1.2s ease-in-out;
+    }
+
+    .repo-section {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+      margin-bottom: 30px;
+    }
+
+    .dark-mode .content {
+      background-color: white;
+    }
+
+    .dark-mode .title {
+      color: #333;
+    }
+
+    .dark-mode .paragraph {
+      color: #555;
+    }
+  </style>
 </head>
+
 <body class="dark-mode">
-    <div id="progress-container">
-        <div id="progress-bar"></div>
-      </div>
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
 
-      <script>
-            
-        window.addEventListener('scroll', function() {
-            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-            const scrolled = (winScroll / height) * 100;
-            document.getElementById('progress-bar').style.width = scrolled + '%';
-        });
-        </script>
-    <div class="loading-container" id="loading-animation">
-        <div class="loader"></div>
-    </div>
-    <header>
-        <nav class="navbar">
-            <a class="logo-container" href="/">
-                <img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
-                <span class="logo-text">Recode Hive</span>
+  <script>
+
+    window.addEventListener('scroll', function () {
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+  </script>
+  <div class="loading-container" id="loading-animation">
+    <div class="loader"></div>
+  </div>
+  <header>
+    <nav class="navbar">
+      <a class="logo-container" href="/">
+        <img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
+        <span class="logo-text">Recode Hive</span>
+      </a>
+      <ul class="nav-links">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+
+        <li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
+        <li><a href="organization.html">Organization</a></li>
+        <li><a href="faq.html">FAQ</a></li>
+        <li><a href="Feedback.html">Feedback</a></li>
+        <li><a href="contact.html">Contact</a></li>
+        <!-- Dropdown on navbar -->
+        <li class="dropdown">
+          <button id="dropdownButton" class="dropbtn">Know More</button>
+          <div id="dropdownMenu" class="dropdown-content">
+            <a href="https://github.com/recodehive">How we work?</a>
+            <a href="https://github.com/recodehive">Projects</a>
+            <a href="https://github.com/recodehive">Team</a>
+            <a href="https://github.com/recodehive">Code of Conduct</a>
+          </div>
+        </li>
+        <div class="nav-icons">
+          <li>
+            <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
+              <img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
             </a>
-            <ul class="nav-links">
-                <li><a href="index.html">Home</a></li>
-                <li><a href="about.html">About</a></li>
-
-                <li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
-                <li><a href="organization.html">Organization</a></li>
-                <li><a href="faq.html">FAQ</a></li>
-                <li><a href="Feedback.html">Feedback</a></li>
-                <li><a href="contact.html">Contact</a></li>
-                <!-- Dropdown on navbar -->
-                <li class="dropdown">
-                    <button id="dropdownButton" class="dropbtn">Know More</button>
-                        <div id="dropdownMenu" class="dropdown-content">
-                            <a href="https://github.com/recodehive">How we work?</a>
-                            <a href="https://github.com/recodehive">Projects</a>
-                            <a href="https://github.com/recodehive">Team</a>
-                            <a href="https://github.com/recodehive">Code of Conduct</a>
-                        </div>
-                </li>
-                <div class="nav-icons">
-                <li>
-                    <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
-                        <img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
-                    </a>
-                </li>
-                <li>
-                    <button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
-                        <i class="fas fa-moon"></i>
-                    </button>
-                </li>
+          </li>
+          <li>
+            <button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
+              <i class="fas fa-moon"></i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <div class="line" id="line">
+        <div class="bar1"></div>
+        <div class="bar2"></div>
+        <div class="bar3"></div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="welcome-section">
+      <h2 class="text-black-light-mode">Welcome to the <span>Machine Learning Repositories</span></h2>
+      <p class="text-black-light-mode">Explore a curated collection of diverse machine learning repositories available
+        on GitHub, presented by the RecodeHive community.</p>
+    </section>
+
+
+    <!-- Toggle button for Repository Statistics -->
+    <section>
+      <button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
+    </section>
+
+    <!-- Statistics Cards -->
+    <section id="statistics-cards">
+      <h2>Repository Statistics</h2>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <i class="fas fa-star stat-icon"></i>
+          <h3>Total Stars</h3>
+          <p id="total-stars">Loading...</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-code-branch stat-icon"></i>
+          <h3>Total Forks</h3>
+          <p id="total-forks">Loading...</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-exclamation-circle stat-icon"></i>
+          <h3>Open Issues</h3>
+          <p id="open-issues">Loading...</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-balance-scale stat-icon"></i>
+          <h3>License</h3>
+          <p id="license">Loading...</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-database stat-icon"></i>
+          <h3>Repository Size</h3>
+          <p id="repo-size">Loading...</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-code stat-icon"></i>
+          <h3>Most Used Language</h3>
+          <p id="most-used-language">Loading...</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Languages and Milestone-->
+
+    <section class="language-and-milestone">
+      <section id="languages">
+        <div class="text-base">Languages</div>
+        <ul id="language-list"></ul>
+      </section>
+      <section id="milestone">
+        <div class="text-base">Milestones Progress</div>
+        <div class="chart-container">
+          <canvas id="milestoneChart"></canvas>
+          <div class="legend">
+          </div>
+        </div>
+      </section>
+    </section>
+
+    <section id="repo-list">
+      <h2 class="text-black-light-mode">Repositories</h2>
+      <div class="paragraph">
+        <h3>Explore Our Models</h3>
+      </div>
+      <div class="repo-section">
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/OpenCV%20Projects" target="_blank">
+            <img src="./assets/Images/Opencv.png" alt="OpencvModels" />
+            <div class="repo-title">Open CV projects</div>
+            <div class="repo-description">
+              Real-time applications involving image processing, object detection, facial recognition, gesture
+              detection, and more.
             </div>
-            </ul>
-            <div class="line" id="line">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
+          </a>
+        </div>
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/NLP" target="_blank">
+            <img src="./assets/Images/NLP.png" alt="NLP Models" />
+            <div class="repo-title">NLP Models</div>
+            <div class="repo-description">
+              These models power applications such as chatbots, sentiment analysis, language translation, and text
+              summarization.
             </div>
-        </nav>
-    </header>
-
-    <main>
-        <section class="welcome-section">
-            <h2 class="text-black-light-mode">Welcome to the <span>Machine Learning Repositories</span></h2>
-            <p class="text-black-light-mode">Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
-        </section>
-
-
-        <!-- Toggle button for Repository Statistics -->
-        <section>
-            <button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
-        </section>
-
-        <!-- Statistics Cards -->
-        <section id="statistics-cards">
-            <h2>Repository Statistics</h2>
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <i class="fas fa-star stat-icon"></i>
-                    <h3>Total Stars</h3>
-                    <p id="total-stars">Loading...</p>
-                </div>
-                <div class="stat-card">
-                    <i class="fas fa-code-branch stat-icon"></i>
-                    <h3>Total Forks</h3>
-                    <p id="total-forks">Loading...</p>
-                </div>
-                <div class="stat-card">
-                    <i class="fas fa-exclamation-circle stat-icon"></i>
-                    <h3>Open Issues</h3>
-                    <p id="open-issues">Loading...</p>
-                </div>
-                <div class="stat-card">
-                    <i class="fas fa-balance-scale stat-icon"></i>
-                    <h3>License</h3>
-                    <p id="license">Loading...</p>
-                </div>
-                <div class="stat-card">
-                    <i class="fas fa-database stat-icon"></i>
-                    <h3>Repository Size</h3>
-                    <p id="repo-size">Loading...</p>
-                </div>
-                <div class="stat-card">
-                    <i class="fas fa-code stat-icon"></i>
-                    <h3>Most Used Language</h3>
-                    <p id="most-used-language">Loading...</p>
-                </div>
+          </a>
+        </div>
+
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Recommendation%20Models"
+            target="_blank">
+            <img src="./assets/Images/RecommendationModel.png" alt="Recommendation Models" />
+            <div class="repo-title">Recommendation Models</div>
+            <div class="repo-description">
+              Explore models that suggest products, services, or content to
+              users based on their preferences and behaviors.
             </div>
-        </section>
-
-        <!-- Languages and Milestone-->
-
-        <section class="language-and-milestone">
-            <section id="languages">
-                <div class="text-base">Languages</div>
-                <ul id="language-list"></ul>
-            </section>
-            <section id="milestone">
-                <div class="text-base">Milestones Progress</div>
-                <div class="chart-container">
-                    <canvas id="milestoneChart"></canvas>
-                    <div class="legend">
-                    </div>
-                </div>
-            </section>
-        </section>
-
-        <section id="repo-list">
-            <h2 class="text-black-light-mode">Repositories</h2>
-            <div class="paragraph">
-                <h3>Explore Our Models</h3>
-              </div>
-              <div class="repo-section">
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/OpenCV%20Projects"
-                    target="_blank"
-                  >
-                    <img
-                      src="./assets/Images/Opencv.png"
-                      alt="OpencvModels"
-                    />
-                    <div class="repo-title">Open CV projects</div>
-                    <div class="repo-description">
-                        Real-time applications involving image processing, object detection, facial recognition, gesture detection, and more.
-                    </div>
-                  </a>
-                </div>
-                <div class="repo">
-                    <a
-                      href="https://github.com/recodehive/machine-learning-repos/tree/main/NLP"
-                      target="_blank"
-                    >
-                      <img
-                        src="./assets/Images/NLP.png"
-                        alt="NLP Models"
-                      />
-                      <div class="repo-title">NLP Models</div>
-                      <div class="repo-description">
-                        These models power applications such as chatbots, sentiment analysis, language translation, and text summarization.
-                      </div>
-                    </a>
-                  </div> 
-
-                  <div class="repo">
-                    <a
-                      href="https://github.com/recodehive/machine-learning-repos/tree/main/Recommendation%20Models"
-                      target="_blank"
-                    >
-                      <img
-                        src="./assets/Images/RecommendationModel.png"
-                        alt="Recommendation Models"
-                      />
-                      <div class="repo-title">Recommendation Models</div>
-                      <div class="repo-description">
-                        Explore models that suggest products, services, or content to
-                        users based on their preferences and behaviors.
-                      </div>
-                    </a>
-                  </div>        
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/Prediction%20Models"
-                    target="_blank"
-                  >
-                    <img
-                      src="./assets/Images/PredictionModel.png"
-                      alt="Prediction Models"
-                    />
-                    <div class="repo-title">Prediction Models</div>
-                    <div class="repo-description">
-                      Dive into models that forecast future outcomes based on historical
-                      data, such as stock prices or weather patterns.
-                    </div>
-                  </a>
-                </div>
-        
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/Detection%20Models"
-                    target="_blank"
-                  >
-                    <img
-                      src="./assets/Images/DetectionModel.png"
-                      alt="Detection Models"
-                    />
-                    <div class="repo-title">Detection Models</div>
-                    <div class="repo-description">
-                      Browse models that identify objects, patterns, or anomalies in
-                      data, such as image or fraud detection.
-                    </div>
-                  </a>
-                </div>
-        
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/Data%20Analysis"
-                    target="_blank"
-                  >
-                    <img src="./assets/Images/DataAnalysis.png" alt="Data Analysis" />
-                    <div class="repo-title">Data Analysis</div>
-                    <div class="repo-description">
-                      Discover tools and models for analyzing datasets to extract
-                      meaningful insights and trends.
-                    </div>
-                  </a>
-                </div>
-        
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/Classification%20Models"
-                    target="_blank"
-                  >
-                    <img
-                      src="./assets/Images/ClassificationModel.png"
-                      alt="Classification Models"
-                    />
-                    <div class="repo-title">Classification Models</div>
-                    <div class="repo-description">
-                      Check out models that categorize data into predefined classes,
-                      like spam detection or sentiment analysis.
-                    </div>
-                  </a>
-                </div>
-        
-                <div class="repo">
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/tree/main/Algorithms%20and%20Deep%20Learning%20Models"
-                    target="_blank"
-                  >
-                    <img
-                      src="./assets/Images/DeepLearningModel.png"
-                      alt="Algorithms and Deep Learning"
-                    />
-                    <div class="repo-title">Algorithms and Deep Learning Models</div>
-                    <div class="repo-description">
-                      Explore complex models and algorithms that leverage neural
-                      networks and deep learning techniques.
-                    </div>
-                  </a>
-                </div>
-        
-                <div class="paragraph">
-                  <h3>Join the Community</h3>
-                  Add your machine learning project to our collection by raising an
-                  issue in our GitHub repository.
-                  <a
-                    href="https://github.com/recodehive/machine-learning-repos/issues"
-                    target="_blank"
-                    >Contribute Here</a
-                  >
-                </div>
-              </div>
+          </a>
+        </div>
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Prediction%20Models" target="_blank">
+            <img src="./assets/Images/PredictionModel.png" alt="Prediction Models" />
+            <div class="repo-title">Prediction Models</div>
+            <div class="repo-description">
+              Dive into models that forecast future outcomes based on historical
+              data, such as stock prices or weather patterns.
             </div>
-        
-        </section>
+          </a>
+        </div>
 
-        <section id="contributors">
-            <h1 class="contri-heading">Our Contributors</h1>
-            <div id="contributors-grid" class="contributors-grid" style="overflow-y: scroll;">
-                <!-- Contributors will be loaded here by JavaScript -->
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Detection%20Models" target="_blank">
+            <img src="./assets/Images/DetectionModel.png" alt="Detection Models" />
+            <div class="repo-title">Detection Models</div>
+            <div class="repo-description">
+              Browse models that identify objects, patterns, or anomalies in
+              data, such as image or fraud detection.
             </div>
-        </section>
-        <section id="milestones-progress">
-            <h2 class="text-black-light-mode">Milestones Progress</h2>
-            <div class="milestones-grid">
-                <div class="milestone-card">
-                    <h3>Algorithms and Deep Learning Models</h3>
-                    <p>This milestone enhances the website's performance and design by integrating advanced algorithms and Deep Learning models.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>34 closed / 34 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Classification Models</h3>
-                    <p>This Milestone focuses on improving the website's performance and design by implementing and optimizing various classification models.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>23 closed / 23 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Data Analysis</h3>
-                    <p>This milestone is dedicated to enhancing the website's performance and design through the integration and application of data analysis techniques.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>20 closed / 20 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>NLP Models</h3>
-                    <p>This milestone focuses on integrating NLP models to enhance website functionality and user interaction, improving performance and design through advanced natural language processing techniques.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 50%;"></div>
-                    </div>
-                    <p>5 closed / 10 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Computer Vision Models</h3>
-                    <p>This milestone focuses on integrating computer vision models to improve website performance and design by enabling advanced image and video analysis capabilities.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 50%;"></div>
-                    </div>
-                    <p>10 closed / 20 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Detection Models</h3>
-                    <p>This milestone involves improving the website's performance and design by implementing advanced detection models to enhance functionality and accuracy.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>34 closed / 34 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Prediction Models</h3>
-                    <p>This milestone aims to integrate advanced prediction models to boost website performance and user experience with cutting-edge algorithms and machine learning techniques.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>60 closed / 60 total</p>
-                </div>
-                <div class="milestone-card">
-                    <h3>Recommendation Models</h3>
-                    <p>This milestone focuses on integrating advanced recommendation models to improve website performance and deliver personalized user experiences.</p>
-                    <div class="milestone-progress-bar">
-                        <div class="progress" style="width: 100%;"></div>
-                    </div>
-                    <p>4 closed / 4 total</p>
-                </div>
+          </a>
+        </div>
+
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Data%20Analysis" target="_blank">
+            <img src="./assets/Images/DataAnalysis.png" alt="Data Analysis" />
+            <div class="repo-title">Data Analysis</div>
+            <div class="repo-description">
+              Discover tools and models for analyzing datasets to extract
+              meaningful insights and trends.
             </div>
-        </section>
-
-        
-
-        <section id="testimonials" class="testimonial-section">
-            <h2 class="text-white-light-mode">Testimonials</h2>
-            <h3 class="text-white-light-mode">Here's what our users are saying about their experince with Recodehive</h3>
-            <div class="testimonials-container">
-                <div class="testimonial">
-                    <img src="assets/Images/user1.png" alt="Alex Johnson">
-                    <p class="text-black-light-mode">"RecodeHive has been a game-changer for my projects. The curated repositories are top-notch, and the community support is unparalleled!"</p>
-                    <h3 class="text-black-light-mode">Alex Johnson</h3>
-                </div>
-                <div class="testimonial">
-                    <img src="assets/Images/user2.png" alt="Maria Garcia">
-                    <p class="text-black-light-mode">"I found exactly what I needed to advance my ML models. The resources provided by RecodeHive are simply the best."</p>
-                    <h3 class="text-black-light-mode">Maria Garcia</h3>
-                </div>
-                <div class="testimonial">
-                    <img src="assets/Images/user3.png" alt="John Doe">
-                    <p class="text-black-light-mode">"A fantastic platform for anyone serious about machine learning. The repositories are well-organized and easy to navigate."</p>
-                    <h3 class="text-black-light-mode">John Doe</h3>
-                </div>
+          </a>
+        </div>
+
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Classification%20Models"
+            target="_blank">
+            <img src="./assets/Images/ClassificationModel.png" alt="Classification Models" />
+            <div class="repo-title">Classification Models</div>
+            <div class="repo-description">
+              Check out models that categorize data into predefined classes,
+              like spam detection or sentiment analysis.
             </div>
-        </section>
-        
-
-<!-- GitHub Repositories Section -->
-<section class="github-section">
-    <h2>Here are some of our active GitHub repositories</h2>
-    <p>Everyone is welcome to come and contribute to our open source projects.</p>
-    
-    <div class="github-container">
-      <!-- Repository Buttons -->
-      <div class="github-buttons">
-        <button onclick="changeImage('assets/Images/awesome-github-profiles.png')">Awesome GitHub Profiles</button>
-        <button onclick="changeImage('assets/Images/machine-learning-repos.png')">Machine Learning Repo</button>
-        <button onclick="changeImage('assets/Images/scrape-ml.png')">Scrape ML</button>
-      </div>
-  
-      <!-- Image Display -->
-      <div class="github-image">
-        <img id="repoImage" src="assets/Images/recodehive.png" alt="GitHub Repository">
-      </div>
-    </div>
-  </section>
-  
-  <script>
-    function changeImage(image) {
-      document.getElementById('repoImage').src = image;
-    }
-  </script>
-  
+          </a>
+        </div>
 
+        <div class="repo">
+          <a href="https://github.com/recodehive/machine-learning-repos/tree/main/Algorithms%20and%20Deep%20Learning%20Models"
+            target="_blank">
+            <img src="./assets/Images/DeepLearningModel.png" alt="Algorithms and Deep Learning" />
+            <div class="repo-title">Algorithms and Deep Learning Models</div>
+            <div class="repo-description">
+              Explore complex models and algorithms that leverage neural
+              networks and deep learning techniques.
+            </div>
+          </a>
+        </div>
 
-    </main>
+        <div class="paragraph">
+          <h3>Join the Community</h3>
+          Add your machine learning project to our collection by raising an
+          issue in our GitHub repository.
+          <a href="https://github.com/recodehive/machine-learning-repos/issues" target="_blank">Contribute Here</a>
+        </div>
+      </div>
+      </div>
 
-    <!-- Chatbot Button -->
-    <div class="chatbot-button" id="chatbot-button">
-        <img src="assets/chatbot.png" height="50px" width="50px" id="chatbot-img" class="floating" alt="chatbot">
-        <div class="tooltip">Welcome to RecodeHive - Machine Learning Repos, How can we help you?</div>
-    </div>
+    </section>
 
-    <!-- Chatbox -->
-    <div class="chatbot" id="chatbot">
-        <div class="chatbot-header">
-            Recodehive's Chatbot
-            <span class="close-btn" id="close-chatbot">&times;</span>
+    <section id="contributors">
+      <h1 class="contri-heading">Our Contributors</h1>
+      <div id="contributors-grid" class="contributors-grid" style="overflow-y: scroll;">
+        <!-- Contributors will be loaded here by JavaScript -->
+      </div>
+    </section>
+    <section id="milestones-progress">
+      <h2 class="text-black-light-mode">Milestones Progress</h2>
+      <div class="milestones-grid">
+        <div class="milestone-card">
+          <h3>Algorithms and Deep Learning Models</h3>
+          <p>This milestone enhances the website's performance and design by integrating advanced algorithms and Deep
+            Learning models.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>34 closed / 34 total</p>
         </div>
-        <div class="chatbot-messages" id="chatbot-messages"></div>
-        <div class="chatbot-questions">
-            <p>Choose a question:</p>
-            <ul id="question-list">
-                <!-- Questions will be populated here -->
-            </ul>
+        <div class="milestone-card">
+          <h3>Classification Models</h3>
+          <p>This Milestone focuses on improving the website's performance and design by implementing and optimizing
+            various classification models.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>23 closed / 23 total</p>
         </div>
-        <div class="chatbot-input-container">
-            <input type="text" id="chatbot-input" placeholder="Type your message...">
-            <button id="chatbot-send">Send</button>
+        <div class="milestone-card">
+          <h3>Data Analysis</h3>
+          <p>This milestone is dedicated to enhancing the website's performance and design through the integration and
+            application of data analysis techniques.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>20 closed / 20 total</p>
         </div>
-    </div>
-
-    <!-- Scroll to Top Button -->
-    <button id="scroll-top-btn" title="Go to top">
-        <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512">
-            <path d="M256 512c70.684 0 134.695-28.658 181.019-74.981C483.342 390.695 512 326.691 512 256s-28.658-134.695-74.981-181.019C390.695 28.658 326.691 0 256 0S121.305 28.658 74.981 74.981C28.658 121.305 0 185.309 0 256s28.658 134.695 74.981 181.019C121.305 483.342 185.309 512 256 512zm-79.003-200.641c-30.983 17.861-46.316-6.963-29.012-25.063l88.741-101.046c16.129-16.136 22.426-16.136 38.563 0l88.741 101.046c17.18 18.187 2.203 42.867-29.02 25.063l-79.003-46.932-79.01 46.932z"/>
-        </svg>
-    </button>
-
-    
-    <!-- Side Icons -->
-    
-    <div class="side-icons">
-        <div class="icon-content">
-          <a href="https://www.facebook.com/recodehive" target="_blank" aria-label="Facebook" data-social="facebook">
-            <i class="fab fa-facebook-f"></i>
-            <div class="filled"></div>
-          </a>
+        <div class="milestone-card">
+          <h3>NLP Models</h3>
+          <p>This milestone focuses on integrating NLP models to enhance website functionality and user interaction,
+            improving performance and design through advanced natural language processing techniques.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 50%;"></div>
+          </div>
+          <p>5 closed / 10 total</p>
         </div>
-        <div class="icon-content">
-          <a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
-            <i class="fab fa-linkedin-in"></i>
-            <div class="filled"></div>
-          </a>
+        <div class="milestone-card">
+          <h3>Computer Vision Models</h3>
+          <p>This milestone focuses on integrating computer vision models to improve website performance and design by
+            enabling advanced image and video analysis capabilities.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 50%;"></div>
+          </div>
+          <p>10 closed / 20 total</p>
         </div>
-        <div class="icon-content">
-          <a href="https://twitter.com/sanjay_kv" target="_blank" aria-label="Twitter" data-social="twitter">
-           <i class="fa fa-twitter"></i>
-            <div class="filled"></div>
-          </a>
+        <div class="milestone-card">
+          <h3>Detection Models</h3>
+          <p>This milestone involves improving the website's performance and design by implementing advanced detection
+            models to enhance functionality and accuracy.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>34 closed / 34 total</p>
         </div>
-        <div class="icon-content">
-          <a href="https://youtube.com" target="_blank" aria-label="YouTube" data-social="youtube">
-            <i class="fab fa-youtube"></i>
-            <div class="filled"></div>
-          </a>
+        <div class="milestone-card">
+          <h3>Prediction Models</h3>
+          <p>This milestone aims to integrate advanced prediction models to boost website performance and user
+            experience with cutting-edge algorithms and machine learning techniques.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>60 closed / 60 total</p>
         </div>
-        <div class="icon-content">
-          <a href="https://github.com/recodehive" target="_blank" aria-label="GitHub" data-social="github">
-            <i class="fab fa-github"></i>
-            <div class="filled"></div>
-          </a>
+        <div class="milestone-card">
+          <h3>Recommendation Models</h3>
+          <p>This milestone focuses on integrating advanced recommendation models to improve website performance and
+            deliver personalized user experiences.</p>
+          <div class="milestone-progress-bar">
+            <div class="progress" style="width: 100%;"></div>
+          </div>
+          <p>4 closed / 4 total</p>
         </div>
       </div>
-   
+    </section>
 
-    <!-- new footer changes -->
-    <div class="footer">
 
 
-      <!-- visitor counter -->
-      <div class="visitor-counter">
-        <div>Visitor</div>
-        <div class="website-counter"></div>
+    <section id="testimonials" class="testimonial-section">
+      <h2 class="text-white-light-mode">Testimonials</h2>
+      <h3 class="text-white-light-mode">Here's what our users are saying about their experince with Recodehive</h3>
+      <div class="testimonials-container">
+        <div class="testimonial">
+          <img src="assets/Images/user1.png" alt="Alex Johnson">
+          <p class="text-black-light-mode">"RecodeHive has been a game-changer for my projects. The curated repositories
+            are top-notch, and the community support is unparalleled!"</p>
+          <h3 class="text-black-light-mode">Alex Johnson</h3>
+        </div>
+        <div class="testimonial">
+          <img src="assets/Images/user2.png" alt="Maria Garcia">
+          <p class="text-black-light-mode">"I found exactly what I needed to advance my ML models. The resources
+            provided by RecodeHive are simply the best."</p>
+          <h3 class="text-black-light-mode">Maria Garcia</h3>
+        </div>
+        <div class="testimonial">
+          <img src="assets/Images/user3.png" alt="John Doe">
+          <p class="text-black-light-mode">"A fantastic platform for anyone serious about machine learning. The
+            repositories are well-organized and easy to navigate."</p>
+          <h3 class="text-black-light-mode">John Doe</h3>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- GitHub Repositories Section -->
+    <section class="github-section">
+      <h2>Here are some of our active GitHub repositories</h2>
+      <p>Everyone is welcome to come and contribute to our open source projects.</p>
+
+      <div class="github-container">
+        <!-- Repository Buttons -->
+        <div class="github-buttons">
+          <button onclick="changeImage('assets/Images/awesome-github-profiles.png')">Awesome GitHub Profiles</button>
+          <button onclick="changeImage('assets/Images/machine-learning-repos.png')">Machine Learning Repo</button>
+          <button onclick="changeImage('assets/Images/scrape-ml.png')">Scrape ML</button>
+        </div>
+
+        <!-- Image Display -->
+        <div class="github-image">
+          <img id="repoImage" src="assets/Images/recodehive.png" alt="GitHub Repository">
+        </div>
       </div>
-      <style>
+    </section>
+
+    <script>
+      function changeImage(image) {
+        document.getElementById('repoImage').src = image;
+      }
+    </script>
+
+
+
+  </main>
+
+  <!-- Chatbot Button -->
+  <div class="chatbot-button" id="chatbot-button">
+    <img src="assets/chatbot.png" height="50px" width="50px" id="chatbot-img" class="floating" alt="chatbot">
+    <div class="tooltip">Welcome to RecodeHive - Machine Learning Repos, How can we help you?</div>
+  </div>
+
+  <!-- Chatbox -->
+  <div class="chatbot" id="chatbot">
+    <div class="chatbot-header">
+      Recodehive's Chatbot
+      <span class="close-btn" id="close-chatbot">&times;</span>
+    </div>
+    <div class="chatbot-messages" id="chatbot-messages"></div>
+    <div class="chatbot-questions">
+      <p>Choose a question:</p>
+      <ul id="question-list">
+        <!-- Questions will be populated here -->
+      </ul>
+    </div>
+    <div class="chatbot-input-container">
+      <input type="text" id="chatbot-input" placeholder="Type your message...">
+      <button id="chatbot-send">Send</button>
+    </div>
+  </div>
+
+  <!-- Scroll to Top Button -->
+  <button id="scroll-top-btn" title="Go to top">
+    <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
+      image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512">
+      <path
+        d="M256 512c70.684 0 134.695-28.658 181.019-74.981C483.342 390.695 512 326.691 512 256s-28.658-134.695-74.981-181.019C390.695 28.658 326.691 0 256 0S121.305 28.658 74.981 74.981C28.658 121.305 0 185.309 0 256s28.658 134.695 74.981 181.019C121.305 483.342 185.309 512 256 512zm-79.003-200.641c-30.983 17.861-46.316-6.963-29.012-25.063l88.741-101.046c16.129-16.136 22.426-16.136 38.563 0l88.741 101.046c17.18 18.187 2.203 42.867-29.02 25.063l-79.003-46.932-79.01 46.932z" />
+    </svg>
+  </button>
+
+
+  <!-- Side Icons -->
+
+  <div class="side-icons">
+    <div class="icon-content">
+      <a href="https://www.facebook.com/recodehive" target="_blank" aria-label="Facebook" data-social="facebook">
+        <i class="fab fa-facebook-f"></i>
+        <div class="filled"></div>
+      </a>
+    </div>
+    <div class="icon-content">
+      <a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
+        <i class="fab fa-linkedin-in"></i>
+        <div class="filled"></div>
+      </a>
+    </div>
+    <div class="icon-content">
+      <a href="https://twitter.com/sanjay_kv" target="_blank" aria-label="Twitter" data-social="twitter">
+        <i class="fa fa-twitter"></i>
+        <div class="filled"></div>
+      </a>
+    </div>
+    <div class="icon-content">
+      <a href="https://youtube.com" target="_blank" aria-label="YouTube" data-social="youtube">
+        <i class="fab fa-youtube"></i>
+        <div class="filled"></div>
+      </a>
+    </div>
+    <div class="icon-content">
+      <a href="https://github.com/recodehive" target="_blank" aria-label="GitHub" data-social="github">
+        <i class="fab fa-github"></i>
+        <div class="filled"></div>
+      </a>
+    </div>
+  </div>
+
+
+  <!-- new footer changes -->
+  <div class="footer">
+
+
+    <!-- visitor counter -->
+    <div class="visitor-counter">
+      <div>Visitor</div>
+      <div class="website-counter"></div>
+    </div>
+    <style>
+      .visitor-counter {
+        position: fixed;
+        top: 570px;
+        left: 10px;
+        background-color: rgba(255, 255, 255, 0.8);
+        /* Slightly opaque background for better visibility */
+        height: 100px;
+        width: 100px;
+        color: #333;
+        /* Darker text for better contrast */
+        font-weight: 700;
+        font-size: 18px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-radius: 12px;
+        /* Softer corners */
+        backdrop-filter: blur(10px);
+        /* Increased blur for a modern touch */
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
+          /* Slightly more pronounced shadow */
+          0 2px 4px rgba(0, 0, 0, 0.1);
+        z-index: 9999999999999;
+        transition: all 0.3s ease;
+        /* Smooth transition for hover effect */
+      }
+
+      .visitor-counter:hover {
+        transform: scale(1.05);
+        /* Slightly enlarge on hover */
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+        /* Enhance shadow on hover */
+      }
+
+      .visitor-counter div:first-child {
+        margin-bottom: 5px;
+        font-size: 14px;
+        /* Adjusted for clarity */
+        letter-spacing: 1px;
+        /* Increased spacing for readability */
+      }
+
+      .website-counter {
+        font-size: 24px;
+        font-family: 'Arial', sans-serif;
+        /* Consistent font family */
+      }
+
+      @media screen and (max-width: 768px) {
         .visitor-counter {
-          position: fixed;
-          top: 570px;
-          left: 10px;
-          background-color: rgba(255, 255, 255, 0.8); /* Slightly opaque background for better visibility */
           height: 100px;
           width: 100px;
-          color: #333; /* Darker text for better contrast */
-          font-weight: 700;
-          font-size: 18px;
-          text-align: center;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          border-radius: 12px; /* Softer corners */
-          backdrop-filter: blur(10px); /* Increased blur for a modern touch */
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), /* Slightly more pronounced shadow */
-                      0 2px 4px rgba(0, 0, 0, 0.1);
-          z-index: 9999999999999;
-          transition: all 0.3s ease; /* Smooth transition for hover effect */
-        }
-      
-        .visitor-counter:hover {
-          transform: scale(1.05); /* Slightly enlarge on hover */
-          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
+          font-size: 16px;
         }
-      
-        .visitor-counter div:first-child {
-          margin-bottom: 5px;
-          font-size: 14px; /* Adjusted for clarity */
-          letter-spacing: 1px; /* Increased spacing for readability */
-        }
-      
+
         .website-counter {
-          font-size: 24px;
-          font-family: 'Arial', sans-serif; /* Consistent font family */
-        }
-      
-        @media screen and (max-width: 768px) {
-          .visitor-counter {
-              height: 100px;
-              width: 100px;
-              font-size: 16px;
-          }
-      
-          .website-counter {
-              font-size: 20px;
-          }
-        }
-      
-        @media screen and (max-width: 480px) {
-          .visitor-counter {
-              height: 80px;
-              width: 80px;
-              font-size: 14px;
-          }
-      
-          .website-counter {
-              font-size: 18px;
-          }
-        }
-      
-        .dark-mode .visitor-counter div {
-          color: #f0f0f0; /* Lighter text for dark mode */
-        }
-      
-        .dark-mode .visitor-counter .website-counter {
-          color: #f0f0f0; /* Lighter color for consistency */
-        }
-      
-        .dark-mode .visitor-counter {
-          background-color: rgba(0, 0, 0, 0.7); /* Darker background for dark mode */
-          box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1),
-                      0 2px 4px rgba(255, 255, 255, 0.05);
+          font-size: 20px;
         }
-      
-      </style>
-      <script>
-         // Function to get the count from localStorage or initialize it
-       function getVisitorCount() {
-          return localStorage.getItem('visitorCount') || 0;
-        }
-      
-        // Function to increment and save the count
-        function incrementVisitorCount() {
-          let count = parseInt(getVisitorCount()) + 1;
-          localStorage.setItem('visitorCount', count);
-          return count;
+      }
+
+      @media screen and (max-width: 480px) {
+        .visitor-counter {
+          height: 80px;
+          width: 80px;
+          font-size: 14px;
         }
-      
-        // Function to display the count
-        function displayVisitorCount() {
-          const counterElement = document.querySelector('.website-counter');
-          const count = incrementVisitorCount();
-          counterElement.textContent = count;
+
+        .website-counter {
+          font-size: 18px;
         }
-      
-        // Call the display function when the page loads
-        document.addEventListener('DOMContentLoaded', displayVisitorCount);
-      </script>
+      }
 
+      .dark-mode .visitor-counter div {
+        color: #f0f0f0;
+        /* Lighter text for dark mode */
+      }
 
+      .dark-mode .visitor-counter .website-counter {
+        color: #f0f0f0;
+        /* Lighter color for consistency */
+      }
 
-        <div class="footer-col">
-            <img src="./assets/recode-hive.png" alt="">
-            <p class="footer-p">
+      .dark-mode .visitor-counter {
+        background-color: rgba(0, 0, 0, 0.7);
+        /* Darker background for dark mode */
+        box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1),
+          0 2px 4px rgba(255, 255, 255, 0.05);
+      }
+    </style>
+    <script>
+      // Function to get the count from localStorage or initialize it
+      function getVisitorCount() {
+        return localStorage.getItem('visitorCount') || 0;
+      }
 
-                Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.
+      // Function to increment and save the count
+      function incrementVisitorCount() {
+        let count = parseInt(getVisitorCount()) + 1;
+        localStorage.setItem('visitorCount', count);
+        return count;
+      }
 
-            </p>
-            <div class="footer-social">
-                <a href="https://www.facebook.com/recodehive"><i class="fa-brands fa-facebook"></i></a>
-                <a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
-                <a href="https://twitter.com/sanjay_kv"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.linkedin.com/in/sanjay-k-v/"><i class="fa-brands fa-linkedin"></i></a>
-                <a href="https://github.com/recodehive"><i class="fa-brands fa-github"></i></a>
-                <a href="https://youtube.com"><i class="fa-brands fa-youtube"></i></a>
-            </div>
-        </div>
-        <div class="footer-col-main">
-            <h4 class="h46">Company</h4>
-            <a href="#">Organisation</a>
-            <a href="#">Franchise</a>
-            <a href="#">Contribute</a>
-            <a href="#">Network</a>
-        </div>
-        <div class="footer-col-main">
-            <h4 class="h46">About Us</h4>
-            <a href="#">Blogs</a>
-            <a href="#">Security</a>
-            <a href="#">Careers</a>
-            <a href="#">FAQS</a>
-        </div>
-        <div class="footer-col-main">
-            <h4 class="h46">Contact</h4>
-            <a href="#">Terms & Conditions</a>
-            <a href="#">Contact Us</a>
-            <a href="#">Privacy Policy</a>
-            <a href="#">Feedback</a>
-        </div>
+      // Function to display the count
+      function displayVisitorCount() {
+        const counterElement = document.querySelector('.website-counter');
+        const count = incrementVisitorCount();
+        counterElement.textContent = count;
+      }
+
+      // Call the display function when the page loads
+      document.addEventListener('DOMContentLoaded', displayVisitorCount);
+    </script>
+
+
+
+    <div class="footer-col">
+      <img src="./assets/recode-hive.png" alt="">
+      <p class="footer-p">
+
+        Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and
+        discovery.
+
+      </p>
+      <div class="footer-social">
+        <a href="https://www.facebook.com/recodehive"><i class="fa-brands fa-facebook"></i></a>
+        <a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
+        <a href="https://twitter.com/sanjay_kv"><i class="fa-brands fa-square-x-twitter"></i></a>
+        <a href="https://www.linkedin.com/in/sanjay-k-v/"><i class="fa-brands fa-linkedin"></i></a>
+        <a href="https://github.com/recodehive"><i class="fa-brands fa-github"></i></a>
+        <a href="https://youtube.com"><i class="fa-brands fa-youtube"></i></a>
+      </div>
     </div>
-    <div class="footer-bar"> 
-        Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
-      
+    <div class="footer-col-main">
+      <h4 class="h46">Company</h4>
+      <a href="#">Organisation</a>
+      <a href="#">Franchise</a>
+      <a href="#">Contribute</a>
+      <a href="#">Network</a>
     </div>
+    <div class="footer-col-main">
+      <h4 class="h46">About Us</h4>
+      <a href="#">Blogs</a>
+      <a href="#">Security</a>
+      <a href="#">Careers</a>
+      <a href="#">FAQS</a>
+    </div>
+    <div class="footer-col-main">
+      <h4 class="h46">Contact</h4>
+      <a href="#">Terms & Conditions</a>
+      <a href="#">Contact Us</a>
+      <a href="#">Privacy Policy</a>
+      <a href="#">Feedback</a>
+    </div>
+  </div>
+  <div class="footer-bar">
+    Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
 
+  </div>
 
 
-    <script>
-        const year = new Date().getFullYear();
-        document.getElementById("year").textContent = year;
-    </script>
 
-    <script src="js/script.js"></script>
+  <script>
+    const year = new Date().getFullYear();
+    document.getElementById("year").textContent = year;
+  </script>
+
+  <script src="js/script.js"></script>
 
-    <script>
-        function changeImage(image) {
-          document.getElementById('repoImage').src = image;
-        }
-      </script>
+  <script>
+    function changeImage(image) {
+      document.getElementById('repoImage').src = image;
+    }
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file