diff --git a/Website/Feedback.html b/Website/Feedback.html
index a2de0423f..dcf9611a4 100644
--- a/Website/Feedback.html
+++ b/Website/Feedback.html
@@ -3,73 +3,335 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Feedback Form</title>
-    <link rel="stylesheet" href="css/feedback.css" />
+    <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>Feedback</title>
+    <!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
+    <link rel="stylesheet" href="css/Feedback.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;
+      }
+
+    </style>
 </head>
-<body>
-
-    <div class="feedback-container">
-        <h2>Feedback Form</h2>
-        <p>We appreciate your feedback! Please rate us and leave a comment.</p>
-
-        <form id="feedbackForm" action="#" method="post" onsubmit="return handleSubmit(event);">
-            <label for="name">Name</label>
-            <input type="text" id="name" name="name" required>
-
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" required>
-
-            <label for="message">Message</label>
-            <textarea id="message" name="message" rows="5" required></textarea>
-
-            <label class="rate-label">Rate Us:</label>
-            <div class="star-rating">
-                <input type="radio" id="star1" name="rating" value="1" />
-                <label for="star1" title="1 star">★</label>
-                <input type="radio" id="star2" name="rating" value="2" />
-                <label for="star2" title="2 stars">★</label>
-                <input type="radio" id="star3" name="rating" value="3" />
-                <label for="star3" title="3 stars">★</label>
-                <input type="radio" id="star4" name="rating" value="4" />
-                <label for="star4" title="4 stars">★</label>
-                <input type="radio" id="star5" name="rating" value="5" />
-                <label for="star5" title="5 stars">★</label>
-            </div>
+<body class="dark-mode">
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
             
-            <button type="submit">Send Feedback</button>
-        </form>
-        
-        <!-- Back to Home Button -->
-        <button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
+        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>
 
-    <script>
-        function handleSubmit(event) {
-            event.preventDefault(); // Prevent the default form submission
+                <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>
+            </div>
+            </ul>
+            <div class="line" id="line">
+                <div class="bar1"></div>
+                <div class="bar2"></div>
+                <div class="bar3"></div>
+            </div>
+        </nav>
+    </header>
 
-            // You can add logic here to process the form data as needed
-            // For example, you could send the data to a server using AJAX
+    <main>
+        <div class="contact-container">
+            <h2>Feedback form</h2>
+            <p>We appreciate your feedback! Please rate us and leave a comment.</p>
+    
+            <form action="#" method="post">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required>
+    
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+    
+                <label for="message">Message</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+                <label class="rate-label">Rate Us</label>
+                <div class="star-rating">
+                    <input type="radio" id="star1" name="rating" value="1" />
+                    <label for="star1" title="1 star">★</label>
+                    <input type="radio" id="star2" name="rating" value="2" />
+                    <label for="star2" title="2 stars">★</label>
+                    <input type="radio" id="star3" name="rating" value="3" />
+                    <label for="star3" title="3 stars">★</label>
+                    <input type="radio" id="star4" name="rating" value="4" />
+                    <label for="star4" title="4 stars">★</label>
+                    <input type="radio" id="star5" name="rating" value="5" />
+                    <label for="star5" title="5 stars">★</label>
+                </div>
+                <button type="submit">Send Feedback</button>
+            </form>
             
-            // After processing, redirect to the home page
-            window.location.href = 'index.html';
-            return false; // Prevent any additional form submission
-        }
+            <!-- Back to Home Button -->
+            <button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
+        </div>
+    </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>
 
-        // Highlight stars logic
-        const stars = document.querySelectorAll('.star-rating input');
-
-        stars.forEach(star => {
-            star.addEventListener('change', () => {
-                // Reset all stars to gray
-                stars.forEach(s => s.nextElementSibling.style.color = '#ddd');
-                
-                // Highlight checked star and all stars to the left
-                for (let i = 0; i < star.value; i++) {
-                    stars[i].nextElementSibling.style.color = 'gold';
-                }
-            });
-        });
+    <!-- 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">
+        <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="#"><i class="fa-brands fa-facebook"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+                <a href="#"><i class="fa-brands fa-github"></i></a>
+                <a href="#"><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>
+    </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>
+        function changeImage(image) {
+          document.getElementById('repoImage').src = image;
+        }
+      </script>
 </body>
 </html>
diff --git a/Website/css/Feedback.css b/Website/css/Feedback.css
index f00ed7119..db94947f6 100644
--- a/Website/css/Feedback.css
+++ b/Website/css/Feedback.css
@@ -1,35 +1,2096 @@
-/* General Styles */
-body {
-    font-family: Arial, sans-serif;
-    background-color: #160457;
-    color: #99d6dd;
+/* General fade-in animation */
+.fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-in-out forwards;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 7.5px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    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;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, rgb(0, 54, 171), #0268a8);
+  }
+  
+  @keyframes fadeIn {
+    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;
+    }
+  }
+  
+  .slide-in-right {
+    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;
+  }
+  
+  body {
+    background-color: #0a0a2e;
+    font-family: 'Arial', sans-serif;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+  }
+  
+  header {
+    background-color: #121245;
+    padding: 10px 20px;
+    animation: fadeIn 1s ease-in-out;
+  }
+  
+  .navbar {
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    height: 100vh;
-}
+  }
+  
+  .logo-container {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+  }
+  
+  .logo-container img {
+    filter: brightness(1) invert(1);
+  }
+  
+  a.logo-container {
+    text-decoration: none;
+  }
+  
+  .logo-icon {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+  }
+  
+  .logo-text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
+  }
+  
+  .brand-name {
+    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;
+  }
+  
+  .line {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+  }
+  
+  .line div {
+    width: 25px;
+    height: 3px;
+    background-color: #fff;
+    margin: 4px 0;
+    transition: 0.4s;
+  }
+  
+  /* Hamburger Active State */
+  .change .bar1 {
+    transform: rotate(-45deg) translate(-10px, 8px);
+  }
+  
+  .change .bar2 {
+    opacity: 0;
+  }
+  
+  .change .bar3 {
+    transform: rotate(45deg) translate(-5px, -6px);
+  }
+  
+  .nav-icons {
+    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.active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+  
+    .nav-links li {
+      margin: 10px 0;
+    }
+  
+    .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; 
+  }
+  
+  .nav-links a:hover {
+    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;
+  }
+  
+  /* Dropdown */
+  .dropdown {
+    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;
+  }
+  
+  .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;
+  }
+  
+  .dark-mode .dropdown-content {
+    background-color: #170179;
+  }
+  
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  /* Hover Effect for Dropdown Items */
+  .dropdown-content a:hover {
+    color: #0066cc; 
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .show {
+    display: block;
+  }
+  
+  
+ 
+  
+  .welcome-section {
+      text-align: center;
+      margin-bottom: 30px;
+      color:white;
+  }
+  
+  
+  h2 {
+      font-size: 2em;
+      margin-bottom: 20px;
+      animation: slideInRight 1s ease-in-out;
+      color:white;
+  }
+  
+  p {
+      font-size: 1.2em;
+      line-height: 1.6;
+      color:white;
+  }
+  button#toggle-stats {
+      display: block;
+      margin: 0 auto 20px auto;
+      padding: 10px 20px;
+      font-size: 1.1em;
+      background-color: #1a1a5e;
+      /* Dark blue button */
+      color: #f1f1f1;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  button#toggle-stats:hover {
+      background-color: #2a2a7e;
+  }
+  
+  #statistics-cards {
+      display: none;
+      text-align: center;
+      animation: slideInRight 0.3s ease-in-out;
+  }
+  
+  .stats-grid {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      flex-wrap: wrap;
+  }
+  
+  .stat-card {
+      background-color:#121245; 
+      /* background: linear-gradient(130deg, #473eed, #04004c); */
+      padding: 20px;
+      border-radius: 8px;
+      width: 150px;
+      text-align: center;
+      margin-bottom: 20px;
+      color: #fff;
+      text-shadow: 0.5px 0.5px 1px rgb(0, 10, 150), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
+      transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
+      animation: slideInRight 0.3s ease-in-out;
+  }
+  
+  .stat-card:hover {
+      /* background-color: #1a1d29; */
+      background: linear-gradient(135deg, #090293, #040054);
+      /* background: linear-gradient(135deg, #473eed, #04004c); */
+      transform: scale(1.05);
+      text-shadow: 1px 1px 2px rgb(233, 0, 202), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
+      cursor: pointer;
+  }
+  
+  
+  .stat-card h3 {
+      font-size: 1.2em;
+      margin-bottom: 10px;
+  }
+  
+  .stat-card p {
+      font-size: 18px;
+      color: rgb(243, 206, 1);
+      text-shadow: none;
+      font-weight: 500;
+  }
+  
+  .stat-icon {
+      font-size: 2.7em;
+      margin-bottom: 10px;
+      color: rgb(255, 255, 255);
+      text-shadow: none;
+      transition: all 0.3s ease-in-out;
+  }
+  
+  
+  .stat-card:hover h3 {
+      color: #ffffff;
+  }
+  .stat-card:hover p {
+      color: yellow;
+      font-weight: 500;
+  
+  }
+  
+  .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);
+  
+  }
+  
+  .language-and-milestone {
+      display: flex;
+      gap: 20px;
+      justify-content: center;
+      align-items: center;
+      animation: slide-in-right 0.5s ease-in-out;
+      flex-wrap: wrap;
+  }
+  
+  .text-base {
+      text-align: left;
+      font-size: 16px;
+  }
+  
+  #languages {
+      text-align: center;
+      margin-bottom: 30px;
+      width: 500px;
+      background-color: #121245;
+      padding: 10px 20px;
+      border-radius: 15px;
+      height: 340px;
+      color: white;
+      animation: slideInRight 0.3s ease-in-out;
+      transition: background-color 0.3s ease;
+  }
+  
+  #languages:hover {
+      background-color: #0D6EFD; 
+  }
+  
+  #language-list {
+      list-style: none;
+      text-align: center;
+      width: 100%;
+      padding: 0px;
+  }
+  
+  #language-list li {
+      padding: 10px 0px;
+      display: flex;
+      width: 100%;
+      gap: 20px;
+      border-bottom: 2px solid white;
+      justify-content: space-between;
+      font-size: 16px;
+      font-weight: 600;
+      transition: color 0.3s ease;
+  }
+  
+  #language-list li:hover {
+      color: #0D6EFD; 
+  }
+  
+  .progress-bar-container {
+      background-color: whitesmoke;
+      border-radius: 8px;
+      overflow: hidden;
+      width: 300px;
+      height: 20px;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  .progress-bar {
+      height: 20px;
+      background-color: #0D6EFD;
+      width: 300px;
+      text-align: left;
+      display: flex;
+      flex-wrap: nowrap;
+      font-size: 12px;
+      justify-content: center;
+      align-items: center;
+      color: white;
+      animation: fadeIn 1s ease-in-out;
+      transition: width 0.3s ease;
+  }
+  
+  .progress-bar-container:hover .progress-bar {
+      width: 320px; 
+  }
+  
+  #milestone {
+      text-align: center;
+      margin-bottom: 30px;
+      width: 500px;
+      background-color: #121245;
+      padding: 10px 20px;
+      border-radius: 15px;
+      height: 340px;
+      color: white;
+      animation: slideInRight 1s ease-in-out;
+      transition: background-color 0.3s ease;
+  }
+  
+  #milestone:hover {
+      background-color: #0D6EFD; 
+  }
+  
+  .chart-container {
+      display: flex;
+      align-items: center;
+      width: 150px;
+      margin: 50px 20px;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  .legend {
+      display: flex;
+      flex-direction: column;
+      margin-left: 20px;
+      font-size: 14px;
+  }
+  
+  .legend span {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      width: 300px;
+      transition: transform 0.3s ease;
+  }
+  
+  .legend span:hover {
+      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;
+      }
+  }
+  
+  .legend span::before {
+      content: '';
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: transform 0.3s ease;
+  }
+  
+  .legend span::before:hover {
+      transform: rotate(45deg); 
+  }
+  
+  button#toggle-languages {
+      display: block;
+      margin: 20px auto;
+      padding: 10px 20px;
+      font-size: 1.1em;
+      background-color: #1a1a5e;
+      /* Dark blue button */
+      color: #f0f0f0;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  button#toggle-languages:hover {
+      background-color: #2a2a7e;
+      /* Lighter blue on hover */
+  }
+  
+  #repo-list {
+      margin: 20px auto;
+      max-width: 1200px;
+      padding: 0 20px;
+      animation: fadeIn 1s ease-in-out;
+  }
+  #model-list {
+      margin: 20px auto;
+      max-width: 1200px;
+      padding: 0 20px;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  #subdirectories {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 20px;
+      list-style-type: none;
+      padding: 0;
+      margin-top: 50px;
+      margin-bottom: 100px;
+      animation: slideInRight 1s ease-in-out;
+  }
+  #directories {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 20px;
+      list-style-type: none;
+      padding: 0;
+      margin-top: 50px;
+      margin-bottom: 100px;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  .card {
+      background: #121245;
+      /* border: 1px solid #ddd; */
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      flex: 1 1 calc(33.333% - 20px);
+      max-width: calc(33.333% - 20px);
+      padding: 20px;
+      box-sizing: border-box;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      animation: fadeIn 1s ease-in-out;
+  }
+  .card h3{
+      color:white;
+  }
+  .card-languages{
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      flex: 1 1 calc(100% - 20px);
+      padding: 20px;
+      box-sizing: border-box;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      font-size: clamp(0.375rem, 0.2159rem + 1.2727vw, 1.25rem);
+      max-width: 100%;
+      margin-bottom: 20px;
+  }
+  
+  .card-languages h3{
+      text-align: center;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  .card-languages:hover{
+      transform: translateY(-10px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card .btn-view-repo {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      color: white;
+      background-color: #1a1a5e;
+      text-decoration: none;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+  }
+  
+  .card .btn-view-repo:hover {
+      background-color: #2a2a7e;
+  }
+  
+  @media (max-width: 768px) {
+      .card {
+          flex: 1 1 calc(50% - 20px);
+          max-width: calc(50% - 20px);
+      }
+  }
+  
+  @media (max-width: 480px) {
+      .card {
+          flex: 1 1 100%;
+          max-width: 100%;
+      }
+  }
+  #contributors {
+      padding: 40px;
+      background-color: #0a0a2e;
+      text-align: center;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  #contributors h2 {
+      font-size: 28px;
+      margin-bottom: 20px;
+      color: white;
+  }
+  
+  /* Container for contributors grid */
+  #contributors-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px; /* Reduced space between contributors */
+      justify-content: center;
+      padding: 20px; /* Padding around the grid */
+      background: linear-gradient(135deg, #121245, #121245); /* Subtle gradient background */
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  /* Styling for individual contributor div */
+  .contributor {
+      display: flex;
+      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 */
+      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 */
+      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 */
+  }
+  
+  /* 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 */
+  }
+  
+  .contributor-image: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 */
+  }
+  
+  .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 */
+  }
+  
+  .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 */
+  }
+  
+  /* 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 */
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  
+  /* Chatbot button */
+  .chatbot-button {
+      position: fixed;
+      bottom: 25px;
+      right: 35px;
+      border: none;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 24px;
+      z-index: 100;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  /* Chatbox */
+  .chatbot {
+      display: none;
+      flex-direction: column;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      position: fixed;
+      bottom: 35px;
+      right: 55px;
+      width: 400px;
+      z-index: 1000;
+      transition: all 0.3s ease;
+      max-height: 600px; /* Adjust as needed */
+      overflow: hidden;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  .floating {
+      animation: floating 3s ease-in-out infinite;
+  }
+  
+  @keyframes floating {
+      0% {
+          transform: translateY(0);
+      }
+      50% {
+          transform: translateY(-7px);
+      }
+      100% {
+          transform: translateY(0);
+      }
+  }
+  
+  .tooltip {
+      visibility: hidden;
+      background-color: #0D6EFD;
+      color: white;
+      text-align: center;
+      border-radius: 10px;
+      padding: 9px;
+      font-size: 15px;
+      position: absolute;
+      bottom: 70px;
+      right: -130px;
+      transform: translateX(-50%);
+      width: 270px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      z-index: 1;
+      opacity: 0;
+      transition: opacity 0.3s;
+  }
+  
+  .chatbot-button:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+  }
+  
+  /* Hided tooltip on touch devices */
+  @media (hover: none) and (pointer: coarse), (max-width: 767px) {
+      .tooltip {
+          display: none;
+      }
+  }
+  
+  .chatbot.active {
+      display: flex;
+      margin-right: -18px;
+      margin-bottom: 50px;
+  }
+  
+  .chatbot-header {
+      background-color: #1a1a5e;
+      color: rgb(255, 250, 250);
+      padding: 15px;
+      border-radius: 8px 8px 0 0;
+      font-size: 16px;
+      font-weight: bold;
+      position: relative;
+  }
+  
+  .chatbot-header .close-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      cursor: pointer;
+      font-size: 20px;
+  }
+  
+  .chatbot-messages {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 10px;
+      animation: fadeIn 1s ease-in-out;
+  }
+  
+  .message {
+      margin-bottom: 10px;
+  }
+  
+  .message.bot {
+      text-align: left;
+  }
+  
+  .message.user {
+      text-align: right;
+  }
+  
+  .message .message-text {
+      display: inline-block;
+      padding: 10px;
+      border-radius: 10px;
+      max-width: 80%;
+  }
+  
+  .message.bot .message-text {
+      background-color: #d1d0d0;
+  }
+  
+  .message.user .message-text {
+      background-color: #1a1a5e;
+      color: rgb(254, 252, 252);
+      word-wrap: break-word;
+  }
+  
+  .chatbot-questions {
+      padding: 15px;
+      background-color: #f4f1f1;
+  }
+  
+  .chatbot-questions p {
+      font-size: 14px;
+      margin-bottom: 10px;
+  }
+  
+  .chatbot-questions ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+  }
+  
+  .chatbot-questions li {
+      background-color: #e8e5e5;
+      padding: 10px 15px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+  }
+  #question-list {
+      max-height: 200px; /* Adjust height as needed */
+      overflow-y: auto;  /* Enable vertical scrolling */
+      padding: 10px;
+      border: 1px solid #ccc;
+  }
+  
+  .chatbot-questions li:hover {
+      background-color: #2f3a57;
+      color: rgb(255, 255, 255);
+  }
+  
+  .chatbot-input-container {
+      display: flex;
+      padding: 15px;
+      background-color: #f9f9f9;
+      border-top: 1px solid #0f0a0a;
+  }
+  
+  .chatbot-input-container input {
+      flex-grow: 1;
+      padding: 8px;
+      border: 1px solid #f8f2f2;
+      border-radius: 8px;
+  }
+  
+  .chatbot-input-container button {
+      padding: 8px 15px;
+      margin-left: 10px;
+      border: none;
+      background-color: #2f3a57;
+      color: rgb(252, 251, 251);
+      border-radius: 8px;
+      cursor: pointer;
+  }
+  
+  .chatbot-input-container button:hover {
+      background-color: #40486b;
+  }
+  
+   /* Styles for the go to top button */
+  
+   #scroll-top-btn {
+      position: fixed;
+      bottom: 34px;
+      left: 20px;
+      display: none; 
+      border: none;
+      background: none;
+      border-radius: 50%;
+      padding: 10px;
+      font-size: 24px;
+      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); 
+      
+  }
+  #scroll-top-btn svg {
+      pointer-events: none; 
+      height: 45px; 
+      width: 45px; 
+      fill: rgb(255, 255, 255); 
+      
+  }
+  
+  
+  /* Milestones Progress Section */
+  #milestones-progress {
+      margin: 50px 0;
+      padding: 20px;
+  }
+  
+  #milestones-progress h2 {
+      text-align: center;
+      font-size: 2em;
+      margin-bottom: 20px;
+      /* color: white; */
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  .milestones-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+      gap: 20px;
+  }
+  
+  .milestone-card {
+      background-color: #121245;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      border-left: 5px solid #054ffd;
+      transition: transform 0.3s ease;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  .milestone-card:hover {
+      transform: translateY(-5px);
+  }
+  
+  .milestone-card h3 {
+      color: white;
+      font-size: 1.25em;
+      margin-bottom: 10px;
+  }
+  
+  .milestone-card p {
+      color: white;
+      font-size: 0.9em;
+      margin-bottom: 15px;
+      line-height: 1.5;
+  }
+  
+  .milestone-progress-bar {
+      background-color: rgb(116, 243, 209);
+      border-radius: 5px;
+      overflow: hidden;
+      margin-bottom: 10px;
+      height: 8px;
+      animation: slideInRight 1s ease-in-out;
+  }
+  
+  .progress {
+      height: 100%;
+      background-color: #0366d6;
+      transition: width 0.4s ease;
+  }
+  
+  /* Optional: Media Query for Responsive Design */
+  @media (max-width: 600px) {
+      .milestones-grid {
+          grid-template-columns: 1fr;
+      }
+  }
+  .side-icons {
+      position: fixed;
+      right: 20px;
+      top: 30%;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    
+    .icon-content {
+      position: relative;
+    }
+    
+    .icon-content a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      color: #4d4d4d;
+      background-color: #fff;
+      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+      overflow: hidden;
+      text-decoration: none;
+      position: relative;
+    }
+    
+    .icon-content a i {
+      font-size: 24px;
+      position: relative;
+      z-index: 2;
+    }
+    
+    .icon-content a .filled {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+      transition: transform 0.3s ease-in-out;
+      transform: scaleY(0);
+      transform-origin: bottom;
+      z-index: 1;
+    }
+    
+    .icon-content a:hover .filled {
+      transform: scaleY(1);
+    }
+    
+    .icon-content a:hover i {
+      color: #fff;
+    }
+    
+    .icon-content a[data-social="facebook"] .filled {
+      background-color: #3b5998;
+    }
+    
+    .icon-content a[data-social="linkedin"] .filled {
+      background-color: #0077b5;
+    }
+    
+    .icon-content a[data-social="twitter"] .filled {
+      background-color: #1da1f2;
+    }
+    
+    .icon-content a[data-social="youtube"] .filled {
+      background-color: #ff0000;
+    }
+    
+    .icon-content a[data-social="github"] .filled {
+      background-color: #24292e;
+    }
+    
+    .icon-content a:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    
+    body.dark-mode .side-icons .icon-content a {
+      background-color: #121245;
+      color: #ddd;
+    }
+    
+    body.dark-mode .side-icons .icon-content a:hover .filled {
+      background-color: #444;
+    }
+    
+    body.dark-mode .side-icons .icon-content a:hover i {
+      color: #fff;
+    }
+  
+    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 {
+      background-color: #0077b5;
+    }
+    
+    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 {
+      background-color: #ff0000;
+    }
+    
+    body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
+      background-color: #444c56;
+    }
+    
+    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; 
+  }
+  
+  .dark-mode .nav-links a {
+      color:#fff;
+  }
+  
+  .dark-mode h2{
+      color:black;
+  }
+  .dark-mode .card h3{
+      color:black;
+  }
+  .dark-mode .welcome-section span{
+      color:rgb(3, 3, 122);
+  }
+  .dark-mode .welcome-section p{
+      color:black;
+  }
+  .dark-mode .highlight {
+      color: black; 
+  }
+  
+  .dark-mode .stat-card {
+      background-color: #050066; 
+  }
+  .dark-mode .contri-heading{
+      color:black;
+  }
+  
+  
+  #toggle-dark-mode {
+      background: none;
+      border: none;
+      color: #f1f1f1;
+      cursor: pointer;
+      font-size: 1.2em;
+      transition: color 0.3s ease;
+  }
+  .dark-mode #languages{
+      background-color: #fff;
+      color: black;
+  }
+  .dark-mode #milestone{
+      background-color: #fff;
+      color:black;
+  }
+  .dark-mode .card{
+      background-color: #fff;
+  }
+  .dark-mode #milestone{
+      background-color: #fff;
+      color:black;
+  }
+  .dark-mode #contributors{
+      background-color: #f9f9f9;
+  }
+  .dark-mode #contributors h2{
+      color: #333;
+  }
+  .dark-mode #contributors-grid{
+      background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
+  }
+  
+  .dark-mode .contributor-github {
+      background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
+      color: #0366d6;
+  }
+  .dark-mode .contributor{
+      background: #ffffff;
+  }
+  
+  .dark-mode #milestones-progress h2 {
+      color: black;
+  }
+  
+  .dark-mode .milestone-card {
+      background-color: white;
+  }
+  .dark-mode .milestone-card h3{
+      color:black;
+  }
+  .dark-mode .milestone-card p{
+      color:black;
+  }
+  .testimonial-section {
+      background-color: #111151;
+      padding: 60px 20px;
+      text-align: center;
+      color: #fff;
+  }
+  
+  .testimonial-section h2 {
+      font-size: 2.5em;
+      margin-bottom: 50px;
+  }
+  
+  .testimonials-container {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+  }
+  
+  .testimonial {
+      max-width: 350px;
+      margin: 20px;
+      background-color: #111151;
+      padding: 30px;
+      border-radius: 10px;
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+      text-align: center;
+      transition: background-color 0.3s, box-shadow 0.3s;
+  }
+  
+  .testimonial img {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      margin-bottom: 20px;
+  }
+  
+  .testimonial p {
+      font-size: 1.3em;
+      line-height: 1.6;
+      margin-bottom: 25px;
+  }
+  
+  .testimonial h3 {
+      font-size: 1.2em;
+      font-weight: bold;
+      color: #ffd700;
+  }
+  
+  /* 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 */
+  }
+  
+  .testimonial:hover p,
+  .testimonial:hover h3 {
+      color: #111151; /* Ensure text is visible against new background */
+  }
+  
+  /* Light Mode for Testimonial Section */
+  .dark-mode .testimonial-section {
+      background-color: #f9f9f9;
+      color: #333;
+  }
+  
+  .blue-mode .text-white-light-mode{
+      color: black !important;
+  }
+  
+  .dark-mode .testimonial {
+      background-color: #fff;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .dark-mode .testimonial p {
+      color: #555;
+  }
+  
+  .dark-mode .testimonial h3 {
+      color: #555;
+  }
+  
+  .light-mode .testimonial img {
+      border: 2px solid #ddd;
+  }
+  
+  /* Hover effect for dark mode */
+  .dark-mode .testimonial:hover {
+      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 */
+  }
+  
+  body {
+      font-family: Arial, sans-serif;
+      background-color: #0a0266;
+      color: #333;
+  }
+  
+  .code-of-conduct {
+      margin: 20px;
+      padding: 40px;
+      background-color: #01043b;
+      border: 2px solid #6ae6fc;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  }
+  
+  h1 {
+      text-align: center;
+      color: #4866ee;
+      text-transform: uppercase;
+  }
+  
+  .rule {
+      margin: 10px 0;
+      padding: 30px;
+      background-color: #0915c3;
+      border-radius: 8px;
+      border-left: 8px solid #fa6508;
+      position: relative;
+  }
+  
+  .rule-number {
+      font-size: 24px;
+      font-weight: bold;
+      color: #03f4fd;
+      position: absolute;
+      top: 10px;
+      left: -30px;
+      background-color: #0366d6;
+      border-radius: 50%;
+      padding: 5px 10px;
+  }
+  
+  .back-button {
+      margin-top: 20px;
+      text-align: center;
+  }
+  
+  .back-button a {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: #0b07f3;
+      color: white;
+      text-decoration: none;
+      border-radius: 5px;
+      font-weight: bold;
+  }
+  
+  .back-button a:hover {
+      background-color: #05c6fc;
+  }
+  
+  .code-of-conduct-button {
+      text-align: center;
+      margin-top: 20px;
+  }
+  
+  .code-of-conduct-button a {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: #2505f5;
+      color: white;
+      text-decoration: none;
+      border-radius: 5px;
+      font-weight: bold;
+  }
+  
+  .code-of-conduct-button a:hover {
+      background-color: #0acbf7;
+  }
+  
+  /* Section Styles */
+  .github-section {
+      background-color: #050066;
+      padding: 50px;
+      color: white;
+      text-align: center;
+  }
+  
+  .github-section h2 {
+      font-size: 2rem;
+      margin-bottom: 10px;
+  }
+  
+  .github-section p {
+      font-size: 1.2rem;
+      margin-bottom: 40px;
+  }
+  
+  /* Container layout */
+  .github-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  
+  /* Repository Buttons */
+  .github-buttons {
+      width: 30%;
+  }
+  
+  .github-buttons button {
+      display: block;
+      width: 80%;
+      padding: 25px;
+      margin-bottom: 30px;
+      background-color: #48d4f0; 
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+      border-radius: 5px;
+      font-weight: bold;
+      transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  /* Button hover effect */
+  .github-buttons button:hover {
+      background-color: #ffeb3b; 
+      color: #03404a; 
+      box-shadow: 0 0 15px #ffeb3b; 
+      font-weight: bold;
+  }
+  
+  
+  /* Image Display */
+  .github-image {
+      width: 65%;
+  }
+  
+  .github-image img {
+      width: 100%;
+      border-radius: 8px;
+      transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
+  }
+  
+  .github-image img:hover {
+      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8); 
+      transform: translateY(-5px); 
+  }
+  
+  /* Dark Mode Styles */
+  
+  .dark-mode .github-section{
+      background-color: #8397fa;
+  }
+  
+  /*Update the twitter icon to its real one */
+   .fa.fa-twitter::before{
+      content:"𝕏";
+  }
+  
+  /* Light Mode Styles */
+  body.light-mode {
+      background-color: #f4f4f4; /* Light background */
+      color: #333; /* Dark text */
+  }
+  
+  .light-mode .dropdown-content {
+      background-color: #fff; /* Light dropdown background */
+  }
+  
+  .light-mode .text-black-light-mode, .light-mode .card h3{
+      color: #333 !important; 
+  }
+  
+  .light-mode p{
+      color: white;
+  }
+  
+  .light-mode #scroll-top-btn svg {
+      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 */
+  }
+  
+  .light-mode .side-icons .icon-content a:hover .filled {
+      background-color: #ddd; /* Light hover effect */
+  }
+  
+  .light-mode .highlight {
+      color: #333; /* Highlight color */
+  }
+  
+  /* Dark Mode Styles */
+  body.dark-mode {
+      background-color: #121212; /* Dark background */
+      color: #f1f1f1; /* Light text */
+  }
+  
+  .dark-mode .dropdown-content {
+      background-color: #1c1c1c; /* Dark dropdown background */
+  }
+  
+  .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 */
+  }
+  
+  .dark-mode .side-icons .icon-content a {
+      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 */
+  }
+  
+  .dark-mode .highlight {
+      color: #f1f1f1; /* Highlight color */
+  }
+  
+  /* Blue Mode Styles */
+  body.blue-mode {
+      background-color: #121245; /* Dark blue background */
+      color: #f1f1f1; /* Light text */
+  }
+  
+  .blue-mode .dropdown-content {
+      background-color: #121245; /* Blue dropdown background */
+  }
+  
+  .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 */
+  }
+  
+  .blue-mode .side-icons .icon-content a {
+      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 */
+  }
+  
+  .blue-mode .highlight {
+      color: #fff; /* Highlight color */
+  }
+  
+  /* Additional Styles for Cards and Sections */
+  .light-mode .card, 
+  .dark-mode .card, 
+  .blue-mode .card {
+      background-color: #fff; /* Default card background for light mode */
+  }
+  
+  .dark-mode .card {
+      background-color: #1f1f1f; /* Dark card background */
+  }
+  
+  .blue-mode .card {
+      background-color: #121245; /* Blue card background */
+  }
+  
+  /* Testimonial Section Styles */
+  .light-mode .testimonial-section{
+      color: white;
+  }
+  .light-mode .text-black-light-mode{
+      color: black;
+  }
+  .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 */
+  }
+  
+  .blue-mode .testimonial-section {
+      background-color: #f9f9f9; /* Blue testimonial section */
+  }
+  
+  /* Additional styling for testimonials */
+  .light-mode .testimonial, 
+  .dark-mode .testimonial, 
+  .blue-mode .testimonial {
+      background-color: #fff; /* Default testimonial background for light mode */
+  }
+  
+  .dark-mode .testimonial {
+      background-color: #222; /* Dark testimonial background */
+  }
+  
+  .blue-mode .testimonial {
+      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 */
+  }
+  
+  .dark-mode #toggle-dark-mode {
+      /* background-color: #444; Dark button background */
+      color: #f1f1f1; /* Light text */
+  }
+  
+  .blue-mode #toggle-dark-mode {
+      /* background-color: #170179; Dark blue button background */
+      color: #f1f1f1; /* Light text */
+  }
+  
+  /* Card Styles */
+  .light-mode .card {
+      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 */
+  }
+  
+  .blue-mode .card {
+      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 */
+  }
+  
+  .dark-mode .section-header {
+      color: #f1f1f1; /* Light text for section headers */
+  }
+  
+  .blue-mode .section-header {
+      color: #f1f1f1; /* Light text for section headers */
+  }
+  
+  /* Links Styles */
+  .light-mode a {
+      /* color: #007bff; Blue link color */
+  }
+  
+  .dark-mode a {
+      color: #1e90ff; /* Lighter blue link color */
+  }
+  
+  .blue-mode a {
+      color: #f1f1f1; /* Light text color for links */
+  }
+  
+  /* Hover Effects for Links */
+  .light-mode a:hover {
+      text-decoration: underline; /* Underline on hover */
+  }
+  
+  .dark-mode a:hover {
+      color: #00aaff; /* Change link color on hover */
+  }
+  
+  .blue-mode a:hover {
+      color: #ddd; /* Change link color on hover */
+  }
+  
+  /* Footer Styles */
+  .light-mode .footer {
+      background-color: #0a0266;
+      z-index: -1;
+  }
+  
+  .light-mode .footer-bar {
+      z-index: -1;
+      width: 100%;
+      text-align: center;
+      background-color: #0a0266;
+  }
+  
+  .dark-mode .footer-bar a {
+      color: white;
+  }
+  
+  .light-mode .footer-bar a {
+      color: white;
+  }
+  
+  .footer {
+      padding: 5rem 1rem;
+      position: relative;
+      display: grid;
+      grid-template-columns: 400px repeat(3, 1fr);
+      gap: 2rem;
+  }
+  
+  .footer-col img {
+      width: 4rem;
+      height: 4rem;
+  }
+  
+  .footer-p {
+      opacity: 0.7;
+      margin-bottom: 2rem;
+  }
+  
+  .footer-social {
+      display: flex;
+      align-items: center;
+      
+  }
+  
+  .footer-social i {
+      color: white;
+      font-size: 1.25rem;
+      margin-right: 1rem;
+      opacity: 0.7;
+      border: 2px solid white;
+      border-radius: 100%;
+      padding: 0.6rem;
+      transition: background-color 0.3s ease 0s;
+  }
+  
+  .footer-social i:hover {
+      opacity: 1;
+      background-color: #35373b;
+  }
+  
+  .h46 {
+      margin-bottom: 2rem;
+      font-size: 1.2rem;
+      font-weight: 500;
+      color: white;
+  }
+  
+  .footer-col-main {
+      margin-top: -1rem;
+  }
+  
+  .footer-col-main a {
+      display: block;
+      margin-bottom: 1rem;
+      color: white;
+      opacity: 0.7;
+      text-decoration: none;
+      transition: opacity 0.3s ease 0s;
+  }
+  
+  .footer-col-main a:hover {
+      opacity: 1;
+  }
+  
+  .footer-bar {
+      margin: auto;
+      padding: 1rem;
+      font-size: 0.8rem;
+      color: white;
+  }
+  
+  .footer-bar a {
+      text-decoration: none;
+  }
+  
+  /* footer responsive */
+  @media (max-width: 900px) {
+      .footer {
+          grid-template-columns: 1fr 200px;
+      }
+  }
+  
+  /* Responsive Design Adjustments */
+  @media (max-width: 768px) {
+      .card {
+          margin: 10px; /* Margin adjustments for mobile */
+      }
+  
+      #toggle-dark-mode {
+          width: 100%; /* Full width button on mobile */
+          font-size: 1em; /* Adjust font size */
+      }
+  }
+  
+  /* Form Styles */
+  .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 */
+  }
+  
+  .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 */
+  }
+  
+  .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 */
+  }
+  
+  /* Button Styles */
+  .light-mode button,
+  .light-mode .btn {
+      /* background-color: #007bff; Primary button color */
+      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 */
+  }
+  
+  .dark-mode button,
+  .dark-mode .btn {
+      /* background-color: #444; Dark button color */
+      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 */
+  }
+  
+  /* Hover Effects for Buttons */
+  .light-mode button:hover,
+  .light-mode .btn:hover {
+      background-color: #0056b3; /* Darker blue on hover */
+  }
+  
+  .dark-mode button:hover,
+  .dark-mode .btn:hover {
+      background-color: #555; /* Lighter dark on hover */
+  }
+  
+  .blue-mode button:hover,
+  .blue-mode .btn: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 */
+  }
+  
+  .dark-mode .alert {
+      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 */
+  }
+  
+  /* Table Styles */
+  .light-mode table {
+      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 */
+  }
+  
+  .dark-mode table {
+      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 */
+  }
+  
+  .blue-mode table {
+      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 */
+  }
+  
+  /* 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 */
+      }
+  
+      .light-mode table,
+      .dark-mode table,
+      .blue-mode table {
+          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 */
+      }
+  }
+  
+  /* Miscellaneous Styles */
+  .light-mode .tooltip {
+      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 */
+  }
+  
+  .blue-mode .tooltip {
+      background-color: #170179; /* Dark blue background for tooltips */
+      color: #f1f1f1; /* Light text */
+  }
+  
+  
+  main {
+    max-width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+    display: flex;
+    flex-direction: column; 
+      padding: 20px;
+      flex: 1;
+      animation: fadeIn 1s ease-in-out;
+     
+  }
+  
+  
+  .welcome-section {
+      text-align: center;
+      margin-bottom: 30px;
+      color:white;
+  }
+  
+  
+  h2 {
+      font-size: 2em;
+      margin-bottom: 20px;
+      animation: slideInRight 1s ease-in-out;
+      color:white;
+  }
+  
+  p {
+      font-size: 1.2em;
+      line-height: 1.6;
+      color:white;
+  }
+  .dark-mode p {
+      color:rgb(252, 251, 251);
+  }
+  
+  button#toggle-stats {
+      display: block;
+      margin: 0 auto 20px auto;
+      padding: 10px 20px;
+      font-size: 1.1em;
+      background-color: #1a1a5e;
+      /* Dark blue button */
+      color: #f1f1f1;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      animation: slideInRight 1s ease-in-out;
+  }
 
-/* Feedback Form Container */
-.feedback-container {
-    background-color: rgb(4, 9, 85);
+/* Contact Form Container */
+.contact-container {
+    background-color: #0b065f; /* Darker blue for form background */
     padding: 40px;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(243, 246, 246, 0.1);
+    box-shadow: 0 0 10px rgba(243, 246, 246, 0.2);
     max-width: 500px;
     width: 100%;
     text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.contact-container:hover {
+    transform: scale(1.02);
+    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6); /* White hover shadow */
 }
 
-.feedback-container h2 {
+.contact-container h2 {
     margin-bottom: 20px;
     font-size: 24px;
+    color: #ffffff; /* White title for contrast */
 }
 
-.feedback-container p {
+.contact-container p {
     margin-bottom: 30px;
-    color: #0bc1f9;
+    color: #0bc1f9; /* Light blue for the paragraph text */
 }
 
 /* Form Styles */
@@ -38,68 +2099,66 @@ form {
     flex-direction: column;
 }
 
-/* Label Styles */
 label {
     text-align: left;
     margin-bottom: 5px;
-    color: #8fe8f4;
+    color: #8fe8f4; /* Lighter text color for labels */
 }
 
-/* Input and Textarea Styles */
 input[type="text"],
 input[type="email"],
-textarea {
-    padding: 10px;
+.contact-container textarea {
+    padding: 12px;
     margin-bottom: 15px;
     border-radius: 5px;
     border: 1px solid #ccc;
     font-size: 16px;
     width: 100%;
     box-sizing: border-box;
+    background-color: #110769; /* Darker blue text field background */
+    color: #ffffff; /* White text in the fields */
+    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
-textarea {
-    resize: vertical;
-}
-
-/* Star Rating Styles */
-.star-rating {
-    display: flex; /* Use flexbox for alignment */
-    justify-content: center; /* Center the stars */
-    margin-bottom: 15px; /* Space below the rating */
-}
-
-.star-rating input {
-    display: none; /* Hide the radio inputs */
+input[type="text"]:hover,
+input[type="email"]:hover,
+.contact-container textarea:hover {
+    background-color: #0d0891; /* Slightly lighter blue on hover */
+    border-color: #0bc1f9; /* Lighter blue border on hover */
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* White shadow on hover */
 }
 
-.star-rating label {
-    font-size: 30px; /* Adjust size of the stars */
-    color: #ddd; /* Default star color */
-    cursor: pointer; /* Change cursor on hover */
-    transition: color 0.3s; /* Smooth color transition */
+input[type="text"]:focus,
+input[type="email"]:focus,
+.contact-container textarea:focus {
+    background-color: #0d0891; /* Lighter blue background when focused */
+    border-color: #05d1fa; /* Light blue border on focus */
+    outline: none;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Stronger white shadow when focused */
 }
 
-/* Highlight stars when hovered */
-.star-rating label:hover,
-.star-rating label:hover ~ label {
-    color: gold; /* Color for hovered stars */
+textarea {
+    resize: vertical;
 }
 
-/* Button Styles */
-button {
-    background-color: #416f77;
+.contact-container button {
+    margin-top: 20px;
+    background-color: #5048eb;
     color: white;
-    padding: 12px;
+    padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
-    transition: background-color 0.3s ease;
+    
+    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
 }
 
-button:hover {
+.contact-container button:hover {
     background-color: #05d1fa;
+    color: #08044c; /* Darker blue text on hover */
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* White hover shadow on button */
 }
 
 /* Back to Home Button Styles */
@@ -112,17 +2171,45 @@ button:hover {
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
 }
 
 .back-button:hover {
     background-color: #06fdfd;
+    color: #08044c;
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* White hover shadow */
+}
+
+.star-rating {
+    display: inline-flex;
+    direction: rtl; /* Makes stars clickable from right to left */
+    font-size: 30px;
+    color: #ddd;
+    cursor: pointer;
+    justify-content: center;
+    gap: 30px;
+}
+
+.star-rating input {
+    display: none; /* Hide the radio buttons */
+}
+
+.star-rating label {
+    color: #ddd;
+    transition: color 0.3s ease;
+}
+
+.star-rating label:hover,
+.star-rating label:hover ~ label {
+    color: gold;
+}
+
+.star-rating input:checked ~ label {
+    color: gold;
 }
 
-/* Rate Us label styles */
-.rate-label {
-    text-align: center; /* Center the text */
-    font-size: 20px; /* Adjust font size as needed */
-    margin-bottom: 10px; /* Space below the label */
-    color: #8fe8f4; /* Set the label color */
+.star-rating input:checked + label:hover,
+.star-rating input:checked + label:hover ~ label {
+    color: gold;
 }
diff --git a/Website/css/styles.css b/Website/css/styles.css
index 2215eb105..2c8896d33 100644
--- a/Website/css/styles.css
+++ b/Website/css/styles.css
@@ -2023,3 +2023,4 @@ body.blue-mode {
     background-color: #170179; /* Dark blue background for tooltips */
     color: #f1f1f1; /* Light text */
 }
+
