diff --git a/style.css b/style.css
index bd78d61..7f8fe78 100644
--- a/style.css
+++ b/style.css
@@ -1,19 +1,29 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+/* Reset & Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
-/* Navbar Styling */
+
+body {
+  background: #f9fafc;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Navbar */
 .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
-  border-bottom: 1px solid #1e88e5;
   padding: 0 50px;
-  background-color: #2196f3;
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
-  position: relative;
+  background:linear-gradient(120deg, #1e3c72,  #6dd5ed); 
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 4px 10px rgba(33, 150, 243, 0.25);
 }
 
 .logo {
@@ -23,20 +33,20 @@
 
 .logo img {
   height: 40px;
-  cursor: pointer;
 }
 
 .logo a {
+  margin-left: 10px;
   text-decoration: none;
-  color: #ffffff;
-  font-weight: 700;
+  color: #fff;
   font-size: 20px;
-  margin-left: 10px;
+  font-weight: 700;
 }
 
 .navbar-function {
   display: flex;
   align-items: center;
+  gap: 30px;
 }
 
 .nav-elements {
@@ -45,545 +55,271 @@
 }
 
 .nav-elements a {
-  font-size: 14px;
   text-decoration: none;
-  color: #ffffff;
-  transition: color 0.3s ease;
+  color: #fff;
+  font-weight: 500;
+  font-size: 15px;
+  transition: 0.3s;
 }
 
 .nav-elements a:hover {
-  color: #bbdefb;
+  color: #dfefff;
 }
 
 .nav-buttons {
   display: flex;
-  gap: 20px;
-  align-items: center;
+  gap: 12px;
 }
 
 .btn-1, .btn-2 {
   padding: 8px 16px;
   font-size: 14px;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
+  transition: 0.3s;
   border: none;
-  margin-left: 10px;
 }
 
 .btn-1 {
-  background-color: #ffffff;
-  color: #2196f3;
+  background: #fff;
+  color: #1a5e96;
 }
 
 .btn-1:hover {
-  background-color: #bbdefb;
-  color: #1565c0;
+  background: #e3f2fd;
 }
 
 .btn-2 {
-  background-color: transparent;
-  border: 2px solid #ffffff;
-  color: #ffffff;
+  border: 2px solid #fff;
+  background: transparent;
+  color: #fff;
 }
 
 .btn-2:hover {
-  background-color: #ffffff;
-  color: #2196f3;
-}
-
-.gitstatus {
-  margin-left: 20px;
+  background: #fff;
+  color: #115892;
 }
 
 .gitstatus a i {
   font-size: 20px;
-  color: #ffffff;
+  color: #fff;
+  transition: 0.3s;
 }
 
 .gitstatus a i:hover {
   transform: scale(1.2);
-  transition: 0.5s ease-in-out;
   color: #bbdefb;
 }
 
+/* Mobile Menu */
 .menu-toggle {
   display: none;
   cursor: pointer;
-  width: 30px;
-  height: 30px;
-  position: relative;
-  margin-left: 20px;
+  flex-direction: column;
+  gap: 5px;
 }
 
 .menu-toggle span {
-  display: block;
   width: 25px;
   height: 2px;
-  background-color: #ffffff;
-  position: absolute;
-  left: 0;
-  transition: all 0.3s ease-in-out;
-}
-
-.menu-toggle span:nth-child(1) {
-  top: 6px;
-}
-
-.menu-toggle span:nth-child(2) {
-  top: 14px;
-}
-
-.menu-toggle span:nth-child(3) {
-  top: 22px;
+  background: #fff;
+  transition: 0.3s;
 }
 
 @media (max-width: 768px) {
-  .navbar {
-      padding: 0 20px;
-  }
-
-  .nav-elements, .nav-buttons {
-      display: none;
+  .nav-elements, .nav-buttons, .gitstatus {
+    display: none;
   }
 
   .menu-toggle {
-      display: block;
-  }
-
-  .navbar-function {
-      flex-direction: column;
-      align-items: flex-start;
-      position: absolute;
-      top: 64px;
-      left: 0;
-      width: 100%;
-      background-color: #2196f3;
-      padding: 20px;
-      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
-      display: none;
+    display: flex;
   }
 
   .navbar-function.active {
-      display: flex;
+    display: flex;
+    flex-direction: column;
+    background: #115892;
+    position: absolute;
+    top: 64px;
+    left: 0;
+    width: 100%;
+    padding: 20px;
+    gap: 15px;
   }
 
   .navbar-function.active .nav-elements,
-  .navbar-function.active .nav-buttons {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 15px;
-  }
-
+  .navbar-function.active .nav-buttons,
   .navbar-function.active .gitstatus {
-      margin-top: 15px;
-      margin-left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
   }
+}
 
-  .menu-toggle.active span:nth-child(1) {
-      transform: translateY(8px) rotate(45deg);
-  }
+/* Cards Section */
+h2 {
+  text-align: center;
+  margin: 40px 0 20px;
+  font-size: 2rem;
+  color: #222;
+}
 
-  .menu-toggle.active span:nth-child(2) {
-      opacity: 0;
-  }
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 25px;
+  padding: 0;
+  list-style: none;
+}
 
-  .menu-toggle.active span:nth-child(3) {
-      transform: translateY(-8px) rotate(-45deg);
-  }
+.list li {
+  background: #ffffff;
+  border-radius: 12px;
+  width: 320px;
+  overflow: hidden;
+  box-shadow: 0px 6px 16px rgba(0,0,0,0.1);
+  transition: 0.3s;
 }
 
-@media (max-width: 480px) {
-  .navbar {
-      padding: 0 10px;
-  }
+.list li:hover {
+  transform: translateY(-5px);
+  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
+}
 
-  .logo img {
-      height: 30px;
-  }
+.list li img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
 
-  .btn-1, .btn-2 {
-      padding: 6px 12px;
-      font-size: 12px;
-  }
+.list li p {
+  padding: 15px;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
 
-  .gitstatus a i {
-      font-size: 18px;
-  }
+.tags {
+  display: inline-block;
+  margin: 0 15px 15px;
+  padding: 6px 12px;
+  background: linear-gradient(120deg,  #1e3c72, #6dd5ed);
+  color: #fff;
+  border-radius: 5px;
+  font-size: 0.9rem;
 }
 
-/* General Styles */
-h2 {
-    font-size: 2.4rem;
-    position: relative;
-    font-weight: 600;
-    margin-top: 2.4rem;
-    text-align: center;
-    color: black;
-  }
-  
-  ul {
-    padding: 0;
-  }
-  
-  .list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  .list li {
-    background-color: #fff;
-    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
-    margin: 20px;
-    border-radius: 25px;
-    width: 350px;
-    overflow: hidden;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .list li:hover {
-    transform: scale(1.05);
-    box-shadow: 0px 0 0px 4px #9f9b9b;
-  }
-  
-  .list li img {
-    display: block;
-    object-fit: cover;
-    border-radius: 25px;
-    height: 200px;
-    width: 100%;
-  }
-  
-  .list li p {
-    padding: 1.6rem;
-    font-size: 1.6rem;
-    font-weight: 600;
-  }
-  
-  .list li .tags {
-    background-color: #34a0e9;
-    text-align: center;
-    color: #fff;
-    font-weight: 500;
-    padding: 10px 15px;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  }
-  
-  .links-container {
-    padding: 1.5rem;
-    margin-top: 2.4rem;
-  }
-  
-  .links-container a {
-    color: #fff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.8rem;
-    text-decoration: none;
-    height: 35px;
-    width: 35px;
-    transition: transform 0.3s ease;
-  }
-  
-  .links-container a.blue {
-    background-color: #34a0e9;
-  }
-  
-  .links-container a.youtube {
-    background-color: #ea0000;
-  }
-  
-  .links-container a:hover {
-    transform: scale(1.2);
-  }
-  
-  /* Button */
-  .btn-sub {
-    padding: 12px 30px;
-    background-color: black;
-    border: 1px solid black;
-    color: white;
-    text-transform: uppercase;
-    border-radius: 30px;
-    text-decoration: none;
-    display: inline-block;
-  }
-  
-  .scroll-up-btn {
-    all: unset;
-    position: fixed;
-    bottom: 35px;
-    right: 40px;
-    height: 50px;
-    width: 50px;
-    background-color: #34a0e9;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-  
-  .scroll-up-btn .arrow-up {
-    width: 26px;
-    height: 26px;
-    border-left: 3px solid #f9f9f9;
-    border-bottom: 3px solid #f9f9f9;
-    transform: rotate(135deg);
-    margin-bottom: -9px;
-    pointer-events: none;
-  }
-  
-  /* Accordion for FAQs */
-  .faq-section {
-    margin: 40px 0;
-  }
-  
-  .accordion {
-    background-color: #34a0e9;
-    color: white;
-    cursor: pointer;
-    padding: 15px;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 1.6rem;
-    transition: background-color 0.3s ease;
-  }
-  
-  .accordion:hover {
-    background-color: #2c8acc;
-  }
-  
-  .panel {
-    max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
-  }
-  
-  .faq .accordion.active + .panel {
-    display: block;
-    padding: 15px;
-  }
-  
-  /* Media Queries for Responsiveness */
-  @media (max-width: 768px) {
-    .list li {
-      width: 300px;
-    }
-  
-    .faq-section {
-      padding: 0 20px;
-    }
-  
-    .panel {
-      padding: 10px;
-    }
-  
-    .accordion {
-      font-size: 1.4rem;
-      padding: 12px;
-    }
-  }
-  
-  @media (max-width: 576px) {
-    h2 {
-      font-size: 2rem;
-    }
-  
-    .list li {
-      width: 100%;
-      margin: 10px 0;
-    }
-  
-    .list li img {
-      height: 180px;
-    }
-  
-    .panel {
-      font-size: 1.2rem;
-    }
-  
-    .accordion {
-      font-size: 1.2rem;
-      padding: 10px;
-    }
-  
-    .scroll-up-btn {
-      height: 40px;
-      width: 40px;
-    }
-  
-    .scroll-up-btn .arrow-up {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  
+/* FAQ */
+.faq-section {
+  max-width: 900px;
+  margin: 60px auto;
+  padding: 0 20px;
+}
 
-  .faq-section {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  h2 {
-    text-align: center;
-    font-size: 2rem;
-    margin-bottom: 20px;
-  }
-  
-  /* Accordion button styles */
-  .accordion {
-    background-color: #007BFF;
-    color: #fff;
-    cursor: pointer;
-    padding: 15px;
-    width: 100%;
-    text-align: left;
-    border: none;
-    outline: none;
-    transition: background-color 0.3s ease;
-    font-size: 1.1rem;
-    margin-bottom: 10px;
-    border-radius: 5px;
-  }
-  
-  .accordion:hover {
-    background-color: #0056b3;
-  }
-  
-  .panel {
-    padding: 0 18px;
-    background-color: #f1f1f1;
-    display: none;
-    overflow: hidden;
-    border-radius: 5px;
-    margin-bottom: 10px;
-  }
-  
-  .panel p {
-    padding: 15px;
-    margin: 0;
-    line-height: 1.6;
-  }
-  
-  /* Responsive styling */
-  @media (max-width: 768px) {
-    h2 {
-      font-size: 1.5rem;
-    }
-  
-    .faq-section {
-      padding: 10px;
-    }
-  
-    .accordion {
-      font-size: 1rem;
-      padding: 12px;
-    }
-  
-    .panel p {
-      font-size: 0.9rem;
-    }
-  }
+.accordion {
+  background:linear-gradient(120deg, #1e3c72 , #6dd5ed);
+  color: #fff;
+  padding: 14px;
+  border: none;
+  border-radius: 6px;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.accordion:hover {
+  background: #1565c0;
+}
+
+.panel {
+  display: none;
+  background: #f9f9f9;
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 10px;
+  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
+}
+
+/* Footer */
+.footer {
+  background: linear-gradient(90deg, #1e3c72,  #6dd5ed);
+  color: #fff;
+  padding: 40px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.footer-section {
+  flex: 1;
+  min-width: 220px;
+  margin: 10px;
+}
+
+.footer-section h1 {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  border-bottom: 2px solid #fff;
+  padding-bottom: 5px;
+}
+
+.footer-list {
+  list-style: none;
+}
+
+.footer-list li {
+  margin-bottom: 8px;
+}
+
+.footer-list a {
+  text-decoration: none;
+  color: #fff;
+  transition: 0.3s;
+}
+
+.footer-list a:hover {
+  color: #f1c40f;
+}
+
+.sub input {
+  padding: 8px;
+  border-radius: 5px;
+  border: none;
+  margin-right: 5px;
+  width: 70%;
+}
+
+.sub .btn-sub {
+  padding: 8px 15px;
+  background: #f1c40f;
+  border-radius: 5px;
+  cursor: pointer;
+  border: none;
+  transition: 0.3s;
+}
+
+.sub .btn-sub:hover {
+  background: #d4ac0d;
+}
+
+.socials a {
+  font-size: 1.4rem;
+  margin-right: 10px;
+  color: #fff;
+  transition: 0.3s;
+}
 
+.socials a:hover {
+  color: #f1c40f;
+}
 
+@media (max-width: 768px) {
   .footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
-    background-color: #007BFF;
-    color: white;
-    flex-wrap: wrap; /* Ensures items wrap on smaller screens */
-  }
-  
-  .footer-section {
-    flex: 1; /* Makes all sections flexible */
-    margin: 10px;
-    min-width: 250px; /* Ensures sections don't get too narrow */
-  }
-  
-  .footer-section h1 {
-    font-size: 1.5rem;
-    margin-bottom: 15px;
-    border-bottom: 2px solid #fff;
-    padding-bottom: 10px;
-  }
-  
-  .footer-list {
-    list-style-type: none;
-  }
-  
-  .footer-list li {
-    margin-bottom: 10px;
-  }
-  
-  .footer-list a {
-    color: white;
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-  
-  .footer-list a:hover {
-    color: #f1c40f; /* Hover effect */
-  }
-  
-  .sub input {
-    padding: 10px;
-    width: 70%;
-    margin-right: 5px;
-    border: none;
-    border-radius: 5px;
-  }
-  
-  .sub .btn-sub {
-    padding: 10px 15px;
-    background-color: #f1c40f;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  
-  .sub .btn-sub:hover {
-    background-color: #d4ac0d;
-  }
-  
-  .socials a {
-    color: white;
-    margin-right: 10px;
-    font-size: 1.5rem;
-  }
-  
-  .socials a:hover {
-    color: #f1c40f;
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
   }
-  
-  /* Responsive Styling */
-  @media (max-width: 768px) {
-    .footer {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-  
-    .footer-section {
-      margin: 20px 0;
-    }
-  
-    .sub input {
-      width: 100%;
-      margin-bottom: 10px;
-    }
-  
-    .sub .btn-sub {
-      width: 100%;
-    }
-  }  
\ No newline at end of file
+}