diff --git a/index.html b/index.html
index 6b3d4a3..17ed3d7 100644
--- a/index.html
+++ b/index.html
@@ -367,6 +367,109 @@ <h5 class="card-Header">JavaScript Mini Projects</h5>
         </div>
       </div>
     </section>
+    <style>
+      /* Section spacing */
+#challengeSection {
+  padding: 2rem 0;
+}
+
+/* Bootstrap row gap fix */
+.challengeContainer {
+  row-gap: 1.5rem; /* vertical spacing between rows */
+}
+
+/* Card styles */
+.challengeContainer .card {
+  box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
+  border: none;
+  border-radius: 15px;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  height: 100%;
+  word-wrap: break-word;   /* prevent long words from breaking layout */
+  overflow-wrap: break-word;
+}
+
+/* Card hover */
+.challengeContainer .card:hover {
+  transform: translateY(-3px) scale(1.01);
+  box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
+}
+
+/* Card top container */
+.card-TopContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;   /* makes sure text + icons don’t overlap */
+  gap: 8px;
+}
+
+/* Header */
+.card-Header {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 0;
+  flex: 1 1 auto;
+  min-width: 120px;
+}
+
+/* Difficulty badge */
+.card-Level {
+  font-size: 12px;
+  padding: 4px 20px;
+  border-radius: 17px;
+  font-weight: 700;
+  margin: 0 7px 0 0;
+  white-space: nowrap; /* keeps badge text on one line */
+}
+.medium-Col {
+  background-color: #fff3cd;
+  color: #a88825;
+}
+.hard-Col {
+  background-color: #f8d7da;
+  color: #7d1c1c;
+}
+
+/* Participation info */
+.card-Participate {
+  font-size: 13px;
+  color: #666;
+  margin: 6px 0;
+  opacity: 0.9;
+  line-height: 1.4;
+}
+
+/* Description text */
+.card-Text {
+  font-size: 14px;
+  opacity: 0.85;
+  text-align: justify;
+  line-height: 1.6;
+  hyphens: auto;  /* breaks long words cleanly */
+}
+
+/* Button */
+.card-CTAButton {
+  display: flex;
+  justify-content: flex-end;
+}
+.card-Btn {
+  text-decoration: none;
+  font-size: 13px;
+  padding: 8px 28px;
+  border-radius: 5px;
+  background-color: #2563eb;
+  color: white;
+  font-weight: 700;
+  transition: all 0.2s ease-in-out;
+}
+.card-Btn:hover {
+  background-color: #1d4ed8;
+  box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
+}
+
+    </style>
     <!-- ================================ Challenge Section End Here ================================ -->
 
     <!-- ================================ Leaderboard Section Starts Here ================================ -->
diff --git a/styles/main.css b/styles/main.css
index b552c8a..2644a1b 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -12,7 +12,7 @@ html {
 }
 
 /* =================== Navbar Styles Start Here ================== */
-Improvement-UI-Challenges
+
 .navbar {
   background-color: #ffffff;
 }
@@ -25,7 +25,7 @@ Improvement-UI-Challenges
 
 .navbar-brand:hover {
   color: #2563eb;
-nav {
+  nav {
     position: fixed;
     top: 0;
     width: 100%;
@@ -33,131 +33,124 @@ nav {
     background-color: #ffffff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
+  }
 
-.navbar .container .navbar-nav{
+  .navbar .container .navbar-nav {
     width: 80%;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     gap: 1rem;
-}
-.nav .container,
-.navbar {
+  }
+  .nav .container,
+  .navbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
-}
+  }
 
-.container .navbar-brand {
+  .container .navbar-brand {
     font-size: 2.1rem;
     font-weight: 900;
     color: #2563eb;
     text-shadow: 2px 2px 5px rgba(37, 99, 235, 0.5),
-                 2px 2px 8px rgba(0, 0, 0, 0.3),
-                 1px 1px 3px rgba(255, 255, 255, 0.6);
+      2px 2px 8px rgba(0, 0, 0, 0.3), 1px 1px 3px rgba(255, 255, 255, 0.6);
     display: inline-block;
     transform: scale(0.9);
     animation: scaleUp 1s ease forwards;
     transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
-}
+  }
 
-/* Hover effect for desktop */
-.container .navbar-brand:hover {
+  /* Hover effect for desktop */
+  .container .navbar-brand:hover {
     transform: scale(1.1);
     color: #1d4ed8;
     text-shadow: 3px 3px 6px rgba(37, 99, 235, 0.7),
-                 3px 3px 10px rgba(0, 0, 0, 0.4),
-                 1px 1px 4px rgba(255, 255, 255, 0.7);
-}
+      3px 3px 10px rgba(0, 0, 0, 0.4), 1px 1px 4px rgba(255, 255, 255, 0.7);
+  }
 
-@keyframes scaleUp {
+  @keyframes scaleUp {
     to {
-        transform: scale(1);
+      transform: scale(1);
     }
- main
-}
-
+  }
 
-.navbar-brand span {
-  color: #1e2c44;
-}
+  .navbar-brand span {
+    color: #1e2c44;
+  }
 
- Improvement-UI-Challenges
-/* added gap in nav links */
-.navbar-nav {
-  display: flex;
-  gap: 1rem;
-}
-/* added shadow box and hover effact in nav-links */
-.nav-item a {
-  color: #1e2c44;
-  /* adding box hover effact */
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 1rem;
-  padding: 0.75rem 0.75rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
-  transition: all 0.3s ease-in-out;
-}
-.nav-item a:hover {
-  background: linear-gradient(90deg, #1e2c44 40%, #2563eb 100%);
-  border-color: #2563eb;
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 8px 20px rgba(33, 136, 56, 0.4);
-  color: white;
-  font-size: 1.1rem;
-
-.nav-item a {
+  /* added gap in nav links */
+  .navbar-nav {
+    display: flex;
+    gap: 1rem;
+  }
+  /* added shadow box and hover effact in nav-links */
+  .nav-item a {
     color: #1e2c44;
+    /* adding box hover effact */
     text-decoration: none;
     font-weight: 700;
     font-size: 1rem;
     padding: 0.75rem 0.75rem;
-    position: relative;
-}
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
+    transition: all 0.3s ease-in-out;
+  }
+  .nav-item a:hover {
+    background: linear-gradient(90deg, #1e2c44 40%, #2563eb 100%);
+    border-color: #2563eb;
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 8px 20px rgba(33, 136, 56, 0.4);
+    color: white;
+    font-size: 1.1rem;
+
+    .nav-item a {
+      color: #1e2c44;
+      text-decoration: none;
+      font-weight: 700;
+      font-size: 1rem;
+      padding: 0.75rem 0.75rem;
+      position: relative;
+    }
 
-.nav-item a:hover {
-    color: #2563eb;
-    animation: underline-slide 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
-}
+    .nav-item a:hover {
+      color: #2563eb;
+      animation: underline-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
 
-.nav-item a:hover::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 6px;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
-    border-radius: 2px;
-    animation: underline-slide 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
- main
-}
+    .nav-item a:hover::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 6px;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+      border-radius: 2px;
+      animation: underline-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
 
-@keyframes underline-slide {
-    from {
+    @keyframes underline-slide {
+      from {
         width: 0;
         opacity: 0.5;
-    }
-    to {
+      }
+      to {
         width: 100%;
         opacity: 1;
+      }
     }
-}
 
-/* Hamburger menu hidden by default */
-.nav-toggle-label {
-    display: none;
-}
-
-/* ================== Mobile Styles ================== */
-@media (max-width: 768px) {
+    /* Hamburger menu hidden by default */
+    .nav-toggle-label {
+      display: none;
+    }
 
-    /* Navbar links hidden initially */
-    .navbar .container .navbar-nav{
+    /* ================== Mobile Styles ================== */
+    @media (max-width: 768px) {
+      /* Navbar links hidden initially */
+      .navbar .container .navbar-nav {
         display: none;
         position: fixed;
         top: 0;
@@ -169,1016 +162,980 @@ nav {
         align-items: center;
         background-color: #ffffff;
         z-index: 999;
-    }
-    .navbar .container .navbar-brand {
+      }
+      .navbar .container .navbar-brand {
         margin-left: 1rem;
-    }
+      }
 
-    /* Show menu when checkbox is checked */
-    #nav-toggle:checked ~ .navbar-nav {
+      /* Show menu when checkbox is checked */
+      #nav-toggle:checked ~ .navbar-nav {
         display: flex;
-    }
+      }
 
-    /* Hamburger toggle visible on mobile */
-    .nav-toggle-label {
+      /* Hamburger toggle visible on mobile */
+      .nav-toggle-label {
         display: block;
         cursor: pointer;
         font-size: 1.8rem;
         color: #2563eb;
         z-index: 1000;
-    }
+      }
 
-    /* Close icon hidden initially */
-    .close-icon {
+      /* Close icon hidden initially */
+      .close-icon {
         display: none;
-    }
+      }
 
-    /* Toggle hamburger and close icons */
-    #nav-toggle:checked + .nav-toggle-label .menu-icon {
+      /* Toggle hamburger and close icons */
+      #nav-toggle:checked + .nav-toggle-label .menu-icon {
         display: none;
-    }
-    #nav-toggle:checked + .nav-toggle-label .close-icon {
+      }
+      #nav-toggle:checked + .nav-toggle-label .close-icon {
         display: inline-block;
+      }
     }
+    /* ================== Navbar Styles End Here ================== */
 
-}
-/* ================== Navbar Styles End Here ================== */
-
-/* ================== Hero Styles Start Here ================== */
-.heroSection {
-  margin-top: 56px;
-  background-color: #f8fafc;
-  padding: 2rem 0;
-}
-
-.heroSection-Container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.gssoc-logo {
-  height: 14px;
-  width: 17px;
-}
+    /* ================== Hero Styles Start Here ================== */
+    .heroSection {
+      margin-top: 56px;
+      background-color: #f8fafc;
+      padding: 2rem 0;
+    }
 
-.gssocContainer {
-  display: flex;
-  align-items: center;
-  max-width: 150px;
-  justify-content: center;
-  border-radius: 36px;
-  padding: 3px 0;
-  color: white;
-  background: #e0ecfa;
-  margin: 1rem 0;
-}
+    .heroSection-Container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-.gssocContainer p {
-  margin-bottom: 0;
-  display: inline-block;
-  font-size: 12px;
-  color: #81a6d3;
-}
+    .gssoc-logo {
+      height: 14px;
+      width: 17px;
+    }
 
-.shinning-effect {
-  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/450% 100%;
-  animation: shiningEff 2.5s infinite;
-}
+    .gssocContainer {
+      display: flex;
+      align-items: center;
+      max-width: 150px;
+      justify-content: center;
+      border-radius: 36px;
+      padding: 3px 0;
+      color: white;
+      background: #e0ecfa;
+      margin: 1rem 0;
+    }
 
-@keyframes shiningEff {
-  100% {
-    mask-position: left;
-  }
-}
+    .gssocContainer p {
+      margin-bottom: 0;
+      display: inline-block;
+      font-size: 12px;
+      color: #81a6d3;
+    }
 
-.heroDescription {
-  margin-bottom: 1.2rem;
-}
+    .shinning-effect {
+      mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/450% 100%;
+      animation: shiningEff 2.5s infinite;
+    }
 
-.heroSection-Left h1 {
-  color: black;
-  font-size: 58px;
-  font-weight: 900;
-  margin: 1rem 0;
-}
+    @keyframes shiningEff {
+      100% {
+        mask-position: left;
+      }
+    }
 
-.blueCol {
-  color: #2563eb;
-}
+    .heroDescription {
+      margin-bottom: 1.2rem;
+    }
 
-.heroSection-Left p {
-  color: #7e7f88;
-  text-align: justify;
-  font-size: 14px;
-  hyphens: auto;
-}
+    .heroSection-Left h1 {
+      color: black;
+      font-size: 58px;
+      font-weight: 900;
+      margin: 1rem 0;
+    }
 
-.ctaBtn-Container {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 10px;
-}
+    .blueCol {
+      color: #2563eb;
+    }
 
-.heroSectionBtn {
-  text-align: center;
-  padding: 7px 60px !important;
-  border-radius: 40px !important;
-  background: #2563eb !important;
-  color: white !important;
- Improvement-UI-Challenges
-  transition: all 0.2s ease-in-out;
-}
+    .heroSection-Left p {
+      color: #7e7f88;
+      text-align: justify;
+      font-size: 14px;
+      hyphens: auto;
+    }
 
-.heroSectionBtn:hover {
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  background-color: #0b5ed7;
-}
+    .ctaBtn-Container {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      gap: 10px;
+    }
 
-.heroSectionBtn i {
-  font-size: 14px;
-  margin-right: 5px;
+    .heroSectionBtn {
+      text-align: center;
+      padding: 7px 60px !important;
+      border-radius: 40px !important;
+      background: #2563eb !important;
+      color: white !important;
 
-  border: 1px solid #2563eb !important;
-  transition: all 0.3s ease-in-out;
-  font-weight: 600;
-  cursor: pointer;
-}
+      transition: all 0.2s ease-in-out;
+    }
 
-.heroSectionBtn:hover {
-  background: #ffffff !important;
-  box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3);
-  transform: translateY(-2px);
-  color:#2563eb !important;
-}
+    .heroSectionBtn:hover {
+      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+      background-color: #0b5ed7;
+    }
 
-.heroSectionBtnOutline {
-  text-align: center;
-  padding: 7px 60px !important;
-  border-radius: 40px !important;
-  background: white !important;
-  color: #2563eb !important;
-  border: 1px solid #2563eb !important;
-  transition: all 0.3s ease-in-out;
-  font-weight: 600;
-  cursor: pointer;
-}
+    .heroSectionBtn i {
+      font-size: 14px;
+      margin-right: 5px;
 
-.heroSectionBtnOutline:hover {
-  background: #2563eb !important;
-  color: white !important;
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
-  transform: translateY(-2px);
-}
-.heroSectionBtn i,
-.heroSectionBtnOutline i {
-  font-size: 14px;
-  margin-right: 5px;
-  transition: transform 0.2s ease-in-out;
-}
+      border: 1px solid #2563eb !important;
+      transition: all 0.3s ease-in-out;
+      font-weight: 600;
+      cursor: pointer;
+    }
 
-.heroSectionBtn:hover i,
-.heroSectionBtnOutline:hover i {
-  transform: translateX(3px);
- main
-}
+    .heroSectionBtn:hover {
+      background: #ffffff !important;
+      box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3);
+      transform: translateY(-2px);
+      color: #2563eb !important;
+    }
 
-/* ================== Hero Styles End Here ================== */
+    .heroSectionBtnOutline {
+      text-align: center;
+      padding: 7px 60px !important;
+      border-radius: 40px !important;
+      background: white !important;
+      color: #2563eb !important;
+      border: 1px solid #2563eb !important;
+      transition: all 0.3s ease-in-out;
+      font-weight: 600;
+      cursor: pointer;
+    }
 
-/* ================== Challenge Styles Start Here ================== */
-#challengeSection {
-  padding: 2rem 0;
-}
+    .heroSectionBtnOutline:hover {
+      background: #2563eb !important;
+      color: white !important;
+      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+      transform: translateY(-2px);
+    }
+    .heroSectionBtn i,
+    .heroSectionBtnOutline i {
+      font-size: 14px;
+      margin-right: 5px;
+      transition: transform 0.2s ease-in-out;
+    }
 
- Improvement-UI-Challenges
-.challengeContainer .card {
-  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-  border: none;
-  transition: all 0.2s ease-in-out;
-  border-radius: 15px;
-  margin: 15px 0;
-}
+    .heroSectionBtn:hover i,
+    .heroSectionBtnOutline:hover i {
+      transform: translateX(3px);
+    }
 
-.challengeContainer .card:hover {
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
+    /* ================== Hero Styles End Here ================== */
 
-.challengeContainer .card:hover {
-  transform: translateY(-2px);
+    /* ================== Challenge Styles Start Here ================== */
+    /**#challengeSection {
+      padding: 2rem 0;
+    }
 
-.challengeContainer .card{
-    box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
-    border: none;
-    transition: all 0.2s ease-in-out;
-    border-radius: 15px;
-    margin: 15px 0;
-    transition: transform 0.2s ease-in-out;
-}
+    .challengeContainer .card {
+      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      border-radius: 15px;
+      margin: 15px 0;
+    }
 
-.challengeContainer .card:hover {
-    transform: translateY(-3px) scale(1);
-    box-shadow: 0 0 18px rgba(37,99,235,0.45);
- main
-}
+    .challengeContainer .card:hover {
+      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    }
 
-.card-TopContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+    .challengeContainer .card:hover {
+      transform: translateY(-2px);
+    }
+    .challengeContainer .card {
+      box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      border-radius: 15px;
+      margin: 15px 0;
+      transition: transform 0.2s ease-in-out;
+    }
 
-.card-Header {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 0;
-}
+    .challengeContainer .card:hover {
+      transform: translateY(-3px) scale(1);
+      box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
+    }
 
-.card-Level {
-<<<<<<< HEAD
-    margin-bottom: 0;
-    font-size: 10px;
-    padding: 4px 20px;
-    border-radius: 17px;
-    background: #d5edda;
-    color: #1a7071;
-    font-weight: 700;
-    /*Added margin to improve UI layout*/
-    margin-right:7px;
-
-=======
-  margin-bottom: 0;
-  font-size: 12px;
-  padding: 4px 25px;
-  border-radius: 17px;
-  background: #d5edda;
-  color: #1a7071;
-  font-weight: 700;
->>>>>>> d904e21b9c29665707b13f66d6d579d726cf4d51
-}
+    .card-TopContainer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
 
-.medium-Col {
-  background-color: #fff3cd;
-  color: #a88825;
-}
+    .card-Header {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 0;
+    }
 
-.hard-Col {
-  background-color: #f8d7da;
-  color: #7d1c1c;
-}
+    .card-Level {
+      margin-bottom: 0;
+      font-size: 10px;
+      padding: 4px 20px;
+      border-radius: 17px;
+      background: #d5edda;
+      color: #1a7071;
+      font-weight: 700;
+      /*Added margin to improve UI layout*/
+    /** margin-right: 7px;
+
+      margin-bottom: 0;
+      font-size: 12px;
+      padding: 4px 25px;
+      border-radius: 17px;
+      background: #d5edda;
+      color: #1a7071;
+      font-weight: 700;
+    }
 
-.card-Participate {
-  font-size: 13px;
-  color: #8b8b8b;
-  margin-bottom: 8px;
-  margin-top: 1px;
-  opacity: 0.9;
-}
+    .medium-Col {
+      background-color: #fff3cd;
+      color: #a88825;
+    }
 
-.card-Text {
-  font-size: 14px;
-  opacity: 0.8;
-  text-align: justify;
-  hyphens: auto;
-}
+    .hard-Col {
+      background-color: #f8d7da;
+      color: #7d1c1c;
+    }
 
-.card-CTAButton {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-}
+    .card-Participate {
+      font-size: 13px;
+      color: #8b8b8b;
+      margin-bottom: 8px;
+      margin-top: 1px;
+      opacity: 0.9;
+    }
 
-.card-Btn {
-  text-decoration: none;
-  font-size: 13px;
-  padding: 8px 36px;
-  border-radius: 5px;
-  background-color: #2563eb;
-  color: white;
-  border: none;
-  transition: all 0.2s ease-in-out;
-  font-weight: 700;
-}
+    .card-Text {
+      font-size: 14px;
+      opacity: 0.8;
+      text-align: justify;
+      hyphens: auto;
+    }
 
-.card-Btn:hover {
- Improvement-UI-Challenges
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  background-color: #0b5ed7;
+    .card-CTAButton {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+    }
 
-    box-shadow: #83aafe 0px 3px 8px;
-    background-color: #1d4ed8;
- main
-}
+    .card-Btn {
+      text-decoration: none;
+      font-size: 13px;
+      padding: 8px 36px;
+      border-radius: 5px;
+      background-color: #2563eb;
+      color: white;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      font-weight: 700;
+    }
 
-/* ================== Challenge Styles End Here ================== */
+    .card-Btn:hover {
+      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+      background-color: #0b5ed7;
 
-/* ================== Leaderboard Styles Starts Here ================== */
- Improvement-UI-Challenges
-#leaderboardSection {
-  padding: 2rem 0;
-  background-color: #f8fafc;
-}
+      box-shadow: #83aafe 0px 3px 8px;
+      background-color: #1d4ed8;
+    }**/
 
-.owl-carousel .card {
-  border: none;
-  background: transparent;
-}
+    /* ================== Challenge Styles End Here ================== */
 
+    /* ================== Leaderboard Styles Starts Here ================== */
 
+    #leaderboardSection {
+      padding: 2rem 0;
+      background-color: #f8fafc;
+    }
 
-.leaderboard-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;        
-  background: linear-gradient(135deg, #e0f0ff, #f9f9ff);
-  padding: 2rem;
-  text-align: center;
-  font-family: 'Poppins', sans-serif;
-}
+    .owl-carousel .card {
+      border: none;
+      background: transparent;
+    }
 
-/* ===== Heading Section ===== */
-#leaderboardSection h2 {
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: center;
-  margin-bottom: 0.5rem;
-  color: #111827;
-}
+    .leaderboard-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #e0f0ff, #f9f9ff);
+      padding: 2rem;
+      text-align: center;
+      font-family: "Poppins", sans-serif;
+    }
 
-#leaderboardSection h2 span {
-  color: #2563eb;
-  font-weight: 700;
-}
+    /* ===== Heading Section ===== */
+    #leaderboardSection h2 {
+      font-size: 2.4rem;
+      font-weight: normal;
+      text-align: center;
+      margin-bottom: 0.5rem;
+      color: #111827;
+    }
 
- main
-.secHeader {
-  text-align: center;
-  font-size: 2rem;
-  font-weight: 600;
- Improvement-UI-Challenges
-}
+    #leaderboardSection h2 span {
+      color: #2563eb;
+      font-weight: 700;
+    }
 
-.secHeader span {
-  color: #2563eb;
+    main .secHeader {
+      text-align: center;
+      font-size: 2rem;
+      font-weight: 600;
+    }
 
-  color: #131212b1;
-}
+    .secHeader span {
+      color: #2563eb;
 
-#leaderboardSection p {
-  font-size: 1rem;
-  color: #374151;
-  max-width: 600px;
-  margin: 0 auto 2rem auto;
-  line-height: 1.6;
-}
+      color: #131212b1;
+    }
 
-/* ===== Leaderboard Container ===== */
-.leaderboard-list {
-  max-width: 650px;
-  width: 100%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  background: rgba(255, 255, 255, 0.65);
-  backdrop-filter: blur(14px);
-  padding: 2rem;
-  border-radius: 22px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
+    #leaderboardSection p {
+      font-size: 1rem;
+      color: #374151;
+      max-width: 600px;
+      margin: 0 auto 2rem auto;
+      line-height: 1.6;
+    }
 
-.leaderboard-list:hover {
-  transform: scale(1.01);
-  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
- main
-}
+    /* ===== Leaderboard Container ===== */
+    .leaderboard-list {
+      max-width: 650px;
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      background: rgba(255, 255, 255, 0.65);
+      backdrop-filter: blur(14px);
+      padding: 2rem;
+      border-radius: 22px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
 
-.leaderboard-Para {
-  text-align: center;
-  opacity: 0.8;
-Improvement-UI-Challenges
-}
+    .leaderboard-list:hover {
+      transform: scale(1.01);
+      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
+    }
 
-.leaderboard-Img {
-  width: 100px !important;
-  border: 5px solid #e0ecfa;
-  border-radius: 100%;
-}
+    .leaderboard-Para {
+      text-align: center;
+      opacity: 0.8;
+    }
 
-.userName {
-  opacity: 0.9;
-  font-weight: 700;
-}
+    .leaderboard-Img {
+      width: 100px !important;
+      border: 5px solid #e0ecfa;
+      border-radius: 100%;
+    }
 
-.leaderBoard-userContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    .userName {
+      opacity: 0.9;
+      font-weight: 700;
+    }
 
-.leaderBoard-Container {
-  text-align: center;
-}
+    .leaderBoard-userContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-.leaderBoard-Container h5 {
-  font-size: 24px;
-  margin: 1rem 0;
-}
+    .leaderBoard-Container {
+      text-align: center;
+    }
 
-.leaderboradUser-RankContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-}
+    .leaderBoard-Container h5 {
+      font-size: 24px;
+      margin: 1rem 0;
+    }
 
-.leaderboradUser-RankContainer p {
-  margin-bottom: 0;
-  padding: 10px 30px;
-  border-radius: 10px;
-  background: #0000ff;
-  color: white;
-  font-weight: 700;
-  border: none;
-  font-size: 13px;
-}
+    .leaderboradUser-RankContainer {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }
 
-.rankPosition {
-  padding: 10px 40px !important;
-}
+    .leaderboradUser-RankContainer p {
+      margin-bottom: 0;
+      padding: 10px 30px;
+      border-radius: 10px;
+      background: #0000ff;
+      color: white;
+      font-weight: 700;
+      border: none;
+      font-size: 13px;
+    }
 
-.rankPoints {
-  background-color: skyblue !important;
-  color: darkblue !important;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-}
+    .rankPosition {
+      padding: 10px 40px !important;
+    }
 
-.rankPoints:hover {
-  background-color: #0000ff !important;
-  color: white !important;
-}
+    .rankPoints {
+      background-color: skyblue !important;
+      color: darkblue !important;
+      transition: all 0.3s ease-in-out;
+      cursor: pointer;
+    }
 
-.leaderBoard-Container:hover .leaderboard-Img,
-.leaderBoard-Container:hover .rankPoints,
-.leaderBoard-Container:hover .rankPosition {
-  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450% 100%;
-  -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450%
-    100%;
-  animation: rankList 2.5s infinite;
-  -webkit-animation: rankList 2.5s infinite;
-}
+    .rankPoints:hover {
+      background-color: #0000ff !important;
+      color: white !important;
+    }
 
-@keyframes rankList {
-  100% {
-    mask-position: left;
-    -webkit-mask-position: left;
-  }
+    .leaderBoard-Container:hover .leaderboard-Img,
+    .leaderBoard-Container:hover .rankPoints,
+    .leaderBoard-Container:hover .rankPosition {
+      mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 450% 100%;
+      -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right /
+        450% 100%;
+      animation: rankList 2.5s infinite;
+      -webkit-animation: rankList 2.5s infinite;
+    }
 
-  color: #131212b1;
-  width: 50%;
-  font-size: 1.2rem;
-}
+    @keyframes rankList {
+      100% {
+        mask-position: left;
+        -webkit-mask-position: left;
+      }
 
-/* ===== Rows ===== */
-.leaderboard-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-  padding: 1rem 1.5rem;
-  border-radius: 15px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-  position: relative;
-  overflow: hidden;
-}
+      color: #131212b1;
+      width: 50%;
+      font-size: 1.2rem;
+    }
 
-.leaderboard-row:hover {
-  transform: translateY(-4px) scale(1.02);
-  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
-}
+    /* ===== Rows ===== */
+    .leaderboard-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #fff;
+      padding: 1rem 1.5rem;
+      border-radius: 15px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      transition: transform 0.25s ease, box-shadow 0.25s ease;
+      position: relative;
+      overflow: hidden;
+    }
 
-/* Gradient glow border effect */
-.leaderboard-row::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 15px;
-  padding: 2px;
-  background: linear-gradient(90deg, #6a11cb, #2575fc, #6a11cb);
-  background-size: 300% 300%;
-  -webkit-mask: 
-    linear-gradient(#fff 0 0) content-box, 
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: destination-out;
-          mask-composite: exclude;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  animation: gradientMove 5s linear infinite;
-  z-index: 0;
-}
+    .leaderboard-row:hover {
+      transform: translateY(-4px) scale(1.02);
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
+    }
 
-.leaderboard-row:hover::before {
-  opacity: 1;
-}
+    /* Gradient glow border effect */
+    .leaderboard-row::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 15px;
+      padding: 2px;
+      background: linear-gradient(90deg, #6a11cb, #2575fc, #6a11cb);
+      background-size: 300% 300%;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: destination-out;
+      mask-composite: exclude;
+      opacity: 0;
+      transition: opacity 0.4s ease;
+      animation: gradientMove 5s linear infinite;
+      z-index: 0;
+    }
 
-/* Keep content always above */
-.leaderboard-row > * {
-  position: relative;
-  z-index: 1;
-}
+    .leaderboard-row:hover::before {
+      opacity: 1;
+    }
 
-@keyframes gradientMove {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
+    /* Keep content always above */
+    .leaderboard-row * {
+      position: relative;
+      z-index: 1;
+    }
 
-/* ===== Rank Badges ===== */
-.leaderboard-row .rank {
-  font-size: 1.4rem;
-  font-weight: bold;
-  width: 60px;
-  text-align: center;
-  color: #111827;
-  transition: transform 0.3s ease;
-}
+    @keyframes gradientMove {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
 
-.leaderboard-row:hover .rank {
-  transform: scale(1.2);
-}
+    /* ===== Rank Badges ===== */
+    .leaderboard-row .rank {
+      font-size: 1.4rem;
+      font-weight: bold;
+      width: 60px;
+      text-align: center;
+      color: #111827;
+      transition: transform 0.3s ease;
+    }
 
-/* ===== Top 3 Special Honors ===== */
-.leaderboard-row.rank-1 {
-  background: linear-gradient(135deg, #fff8dc, #fff);
-  border: 2px solid #FFD700;
-  box-shadow: 0 0 20px rgba(255,215,0,0.5);
-}
-.leaderboard-row.rank-1 .rank {
-  color: #FFD700;
-  text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
-}
-.leaderboard-row.rank-1 .leaderboard-Img {
-  border: 3px solid #FFD700;
-}
+    .leaderboard-row:hover .rank {
+      transform: scale(1.2);
+    }
 
-.leaderboard-row.rank-2 {
-  background: linear-gradient(135deg, #f0f0f0, #fff);
-  border: 2px solid #C0C0C0;
-  box-shadow: 0 0 20px rgba(192,192,192,0.5);
-}
-.leaderboard-row.rank-2 .rank {
-  color: #C0C0C0;
-  text-shadow: 0 0 10px rgba(192, 192, 192, 0.9);
-}
-.leaderboard-row.rank-2 .leaderboard-Img {
-  border: 3px solid #C0C0C0;
-}
+    /* ===== Top 3 Special Honors ===== */
+    .leaderboard-row.rank-1 {
+      background: linear-gradient(135deg, #fff8dc, #fff);
+      border: 2px solid #ffd700;
+      box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+    }
+    .leaderboard-row.rank-1 .rank {
+      color: #ffd700;
+      text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
+    }
+    .leaderboard-row.rank-1 .leaderboard-Img {
+      border: 3px solid #ffd700;
+    }
 
-.leaderboard-row.rank-3 {
-  background: linear-gradient(135deg, #fff5f0, #fff);
-  border: 2px solid #CD7F32;
-  box-shadow: 0 0 20px rgba(205,127,50,0.5);
-}
-.leaderboard-row.rank-3 .rank {
-  color: #CD7F32;
-  text-shadow: 0 0 10px rgba(205, 127, 50, 0.9);
-}
-.leaderboard-row.rank-3 .leaderboard-Img {
-  border: 3px solid #CD7F32;
-}
+    .leaderboard-row.rank-2 {
+      background: linear-gradient(135deg, #f0f0f0, #fff);
+      border: 2px solid #c0c0c0;
+      box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
+    }
+    .leaderboard-row.rank-2 .rank {
+      color: #c0c0c0;
+      text-shadow: 0 0 10px rgba(192, 192, 192, 0.9);
+    }
+    .leaderboard-row.rank-2 .leaderboard-Img {
+      border: 3px solid #c0c0c0;
+    }
 
-/* ===== Avatar ===== */
-.leaderboard-row .leaderboard-Img {
-  width: 65px;
-  height: 65px;
-  margin: 0 15px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 3px solid transparent;
-  background: linear-gradient(white, white) padding-box,
-              linear-gradient(45deg, #6a11cb, #2575fc) border-box;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
+    .leaderboard-row.rank-3 {
+      background: linear-gradient(135deg, #fff5f0, #fff);
+      border: 2px solid #cd7f32;
+      box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
+    }
+    .leaderboard-row.rank-3 .rank {
+      color: #cd7f32;
+      text-shadow: 0 0 10px rgba(205, 127, 50, 0.9);
+    }
+    .leaderboard-row.rank-3 .leaderboard-Img {
+      border: 3px solid #cd7f32;
+    }
 
-.leaderboard-row:hover .leaderboard-Img {
-  transform: rotate(5deg) scale(1.12);
-  box-shadow: 0 0 12px rgba(37,117,252,0.4);
-}
+    /* ===== Avatar ===== */
+    .leaderboard-row .leaderboard-Img {
+      width: 65px;
+      height: 65px;
+      margin: 0 15px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid transparent;
+      background: linear-gradient(white, white) padding-box,
+        linear-gradient(45deg, #6a11cb, #2575fc) border-box;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
 
-/* ===== Username ===== */
-.leaderboard-row .userName {
-  flex: 1;
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: #1f2937;
-  transition: color 0.3s ease;
-}
+    .leaderboard-row:hover .leaderboard-Img {
+      transform: rotate(5deg) scale(1.12);
+      box-shadow: 0 0 12px rgba(37, 117, 252, 0.4);
+    }
 
-.leaderboard-row:hover .userName {
-  color: #2563eb;
-}
+    /* ===== Username ===== */
+    .leaderboard-row .userName {
+      flex: 1;
+      font-size: 1.15rem;
+      font-weight: 600;
+      color: #1f2937;
+      transition: color 0.3s ease;
+    }
 
-/* ===== Points ===== */
-.leaderboard-row .points {
-  font-weight: bold;
-  font-size: 1.1rem;
-  color: #2563eb;
-  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
-}
+    .leaderboard-row:hover .userName {
+      color: #2563eb;
+    }
 
-.leaderboard-row:hover .points {
-  transform: scale(1.12);
-  color: #1d4ed8;
-  text-shadow: 0 0 6px rgba(29,78,216,0.4);
- main
-}
+    /* ===== Points ===== */
+    .leaderboard-row .points {
+      font-weight: bold;
+      font-size: 1.1rem;
+      color: #2563eb;
+      transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
+    }
 
+    .leaderboard-row:hover .points {
+      transform: scale(1.12);
+      color: #1d4ed8;
+      text-shadow: 0 0 6px rgba(29, 78, 216, 0.4);
+    }
 
+    /* ================== Leaderboard Styles End Here ================== */
 
-/* ================== Leaderboard Styles End Here ================== */
+    /* ================== About Styles Start Here ================== */
+    #aboutSection {
+      padding: 2rem 0;
 
-/* ================== About Styles Start Here ================== */
-#aboutSection {
- Improvement-UI-Challenges
-  padding: 2rem 0;
+      padding: 4rem 1rem;
+      background: linear-gradient(135deg, #f9fafb, #f3f4f6);
+    }
 
-  padding: 4rem 1rem;
-  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
-}
+    /* Heading */
+    #aboutSection .secHeader {
+      font-size: 2.2rem;
+      margin-bottom: 1.5rem;
+      font-weight: 700;
+      text-align: center;
+      line-height: 1.3;
+    }
 
-/* Heading */
-#aboutSection .secHeader {
-  font-size: 2.2rem;
-  margin-bottom: 1.5rem;
-  font-weight: 700;
-  text-align: center;
-  line-height: 1.3;
- main
-}
+    #aboutSection .secHeader span {
+      color: #2563eb; /* Blue for "About" */
+      font-weight: 700; /* Bold */
+    }
 
-#aboutSection .secHeader span {
-  color: #2563eb;   /* Blue for "About" */
-  font-weight: 700; /* Bold */
-}
+    #aboutSection .secHeader {
+      color: #111827; /* Black for "CodeClip" */
+    }
 
-#aboutSection .secHeader {
-  color: #111827;   /* Black for "CodeClip" */
-}
+    /* Container */
+    .aboutContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-/* Container */
-.aboutContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    .aboutContainer .col-10 {
+      opacity: 0.8;
+      text-align: center;
+
+      opacity: 0.9;
+      text-align: center;
+      max-width: 850px;
+      line-height: 1.7;
+      font-size: 1.05rem;
+      color: #374151;
+      margin: 0 auto;
+    }
 
-.aboutContainer .col-10 {
- Improvement-UI-Challenges
-  opacity: 0.8;
-  text-align: center;
+    /* Paragraphs */
+    .aboutContainer .col-10 p {
+      margin-bottom: 1.8rem;
+    }
 
-  opacity: 0.9;
-  text-align: center;
-  max-width: 850px;
-  line-height: 1.7;
-  font-size: 1.05rem;
-  color: #374151;
-  margin: 0 auto;
-}
+    .aboutContainer .col-10 strong {
+      color: #111827;
+      font-weight: 700;
+    }
 
-/* Paragraphs */
-.aboutContainer .col-10 p {
-  margin-bottom: 1.8rem;
- main
-}
+    /* CTA Container */
+    .ctaBtn {
+      text-align: center;
+      margin-top: 1.5rem;
+    }
 
-.aboutContainer .col-10 strong {
-  color: #111827;
-  font-weight: 700;
-}
+    /* CTA Button */
+    .aboutCTA-Btn {
+      text-decoration: none;
+      font-weight: 700;
+      margin-top: 1.5rem;
 
-/* CTA Container */
-.ctaBtn {
-  text-align: center;
-  margin-top: 1.5rem;
-}
+      box-shadow: 0 0 18px 0 rgba(19, 117, 216, 0.25);
 
-/* CTA Button */
-.aboutCTA-Btn {
- Improvement-UI-Challenges
- Improvement-UI-Challenges
-  text-decoration: none;
-  font-weight: 700;
-  margin-top: 1.5rem;
+      position: relative;
 
+      display: inline-block;
+      padding: 0.85rem 2rem;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #1d4ed8;
+      background-color: #fff;
+      border-radius: 30px;
+      border: 1px solid #2563eb;
+      cursor: pointer;
+      text-decoration: none;
 
-  box-shadow: 0 0 18px 0 rgba(19, 117, 216, 0.25);
-  main
-  position: relative;
- main
-  display: inline-block;
-  padding: 0.85rem 2rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #1d4ed8;
-  background-color: #fff;
-  border-radius: 30px;
-  border: 1px solid #2563eb;
-  cursor: pointer;
-  text-decoration: none;
- Improvement-UI-Challenges
-  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
-  transition: all 0.3s ease;
+      box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
+      transition: all 0.3s ease;
 
-  overflow: hidden;
-  z-index: 1;
- Improvement-UI-Challenges
-  transition: color 0.3s ease, transform 0.3s ease;
- main
+      overflow: hidden;
+      z-index: 1;
 
-  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
- main
-}
+      transition: color 0.3s ease, transform 0.3s ease;
 
-/* Hover Effect */
-.aboutCTA-Btn:hover {
-  color: #fff;
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
-}
+      transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    }
 
-.aboutCTA-Btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: #2563eb;
-  transition: left 0.4s ease;
-  z-index: -1;
-  border-radius: inherit;
-}
+    /* Hover Effect */
+    .aboutCTA-Btn:hover {
+      color: #fff;
+      transform: translateY(-3px);
+      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
+    }
 
-.aboutCTA-Btn:hover::before {
-  left: 0;
-}
- Improvement-UI-Challenges
-@keyframes pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.03);
-  }
-}
+    .aboutCTA-Btn::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: #2563eb;
+      transition: left 0.4s ease;
+      z-index: -1;
+      border-radius: inherit;
+    }
 
-/* ================== About Styles End Here ================== */
+    .aboutCTA-Btn:hover::before {
+      left: 0;
+    }
 
-/* --- Footer Redesign --- */
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.03);
+      }
+    }
 
+    /* ================== About Styles End Here ================== */
 
-/* Responsive */
-@media (max-width: 768px) {
-  #aboutSection {
-    padding: 3rem 1rem;
-  }
+    /* --- Footer Redesign --- */
 
-  #aboutSection .secHeader {
-    font-size: 1.8rem;
-  }
+    /* Responsive */
+    @media (max-width: 768px) {
+      #aboutSection {
+        padding: 3rem 1rem;
+      }
 
-  .aboutContainer .col-10 {
-    font-size: 1rem;
-    line-height: 1.6;
-  }
+      #aboutSection .secHeader {
+        font-size: 1.8rem;
+      }
 
-  .aboutCTA-Btn {
-    padding: 0.7rem 1.5rem;
-    font-size: 0.95rem;
-  }
-}
-/* ================== About Styles End Here ================== */
+      .aboutContainer .col-10 {
+        font-size: 1rem;
+        line-height: 1.6;
+      }
 
-/* ================== Footer Styles Start Here ================== */
+      .aboutCTA-Btn {
+        padding: 0.7rem 1.5rem;
+        font-size: 0.95rem;
+      }
+    }
+    /* ================== About Styles End Here ================== */
 
- main
-.footer-contact-btn {
-  width: 150px;
-  min-width: 100px;
-  max-width: 170px;
-  font-size: 0.97rem;
- Improvement-UI-Challenges
-  padding: 0.45em 0;
-  border-radius: 8px;
-  gap: 0.4em;
-}
-.footer-contact-btn:hover {
-  background: linear-gradient(90deg, #1e2c44 60%, #2563eb 100%);
-  color: #fff;
-  box-shadow: 0 4px 20px rgba(30, 44, 68, 0.15);
-  transform: translateY(-2px) scale(1.03);
+    /* ================== Footer Styles Start Here ================== */
 
-  padding: 0.5em 1.2em;
-  border-radius: 9999px;
-  background: #fff;
-  color: #2563eb;
-  border: 2px solid #2563eb;
-  font-weight: 500;
-  gap: 0.4em;
-  box-shadow: 0 0 0 transparent;
-  transition: all 0.3s ease;
-}
-.footer-contact-btn:hover {
-  background: #2563eb;
-  color: #fff;
-  box-shadow: 0 0 12px rgba(37,99,235,0.45);
-  transform: translateY(-2px) scale(1.04);
- main
-}
-.footer-contact-btn i {
-  font-size: 1em;
-  margin-right: 0.4em;
-}
+    main .footer-contact-btn {
+      width: 150px;
+      min-width: 100px;
+      max-width: 170px;
+      font-size: 0.97rem;
 
-/* Footer Container */
-footer {
- Improvement-UI-Challenges
-  padding-top: 2.5rem;
-  padding-bottom: 1.5rem;
-  background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
-  border-top: 1.5px solid #e5e7eb;
-  box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
+      padding: 0.45em 0;
+      border-radius: 8px;
+      gap: 0.4em;
+    }
+    .footer-contact-btn:hover {
+      background: linear-gradient(90deg, #1e2c44 60%, #2563eb 100%);
+      color: #fff;
+      box-shadow: 0 4px 20px rgba(30, 44, 68, 0.15);
+      transform: translateY(-2px) scale(1.03);
+
+      padding: 0.5em 1.2em;
+      border-radius: 9999px;
+      background: #fff;
+      color: #2563eb;
+      border: 2px solid #2563eb;
+      font-weight: 500;
+      gap: 0.4em;
+      box-shadow: 0 0 0 transparent;
+      transition: all 0.3s ease;
+    }
+    .footer-contact-btn:hover {
+      background: #2563eb;
+      color: #fff;
+      box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
+      transform: translateY(-2px) scale(1.04);
+    }
+    .footer-contact-btn i {
+      font-size: 1em;
+      margin-right: 0.4em;
+    }
 
-  padding: 2.5rem 0 1.5rem;
-  background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
-  border-top: 1.5px solid #e5e7eb;
-  box-shadow: 0 -2px 16px rgba(30,44,68,0.06);
- main
-}
-footer .container {
-  max-width: 1200px;
-}
-footer .row.align-items-start {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
- Improvement-UI-Challenges
-  gap: 0;
-  row-gap: 2.5rem;
-}
+    /* Footer Container */
+    footer {
+      padding-top: 2.5rem;
+      padding-bottom: 1.5rem;
+      background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
+      border-top: 1.5px solid #e5e7eb;
+      box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
+
+      padding: 2.5rem 0 1.5rem;
+      background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
+      border-top: 1.5px solid #e5e7eb;
+      box-shadow: 0 -2px 16px rgba(30, 44, 68, 0.06);
+    }
+    footer .container {
+      max-width: 1200px;
+    }
+    footer .row.align-items-start {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+
+      gap: 0;
+      row-gap: 2.5rem;
+    }
 
-  row-gap: 2.5rem;
-}
+    row-gap: 2.5rem;
+  }
 
- main
-.footer-logo-col,
-.footer-links-col,
-.footer-contact-col-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 220px;
-  flex: 1 1 0;
-  padding: 0 1rem;
-}
-.footer-links-col,
-.footer-contact-col-main {
-  border-left: 1.5px solid #e5e7eb;
-}
-.footer-logo-col {
-  border-right: 2px solid #e5e7eb;
-  min-height: 140px;
- Improvement-UI-Challenges
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-@media (max-width: 991px) {
+  main .footer-logo-col,
+  .footer-links-col,
+  .footer-contact-col-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 220px;
+    flex: 1 1 0;
+    padding: 0 1rem;
+  }
+  .footer-links-col,
+  .footer-contact-col-main {
+    border-left: 1.5px solid #e5e7eb;
+  }
   .footer-logo-col {
-    border-right: none;
-    min-height: unset;
+    border-right: 2px solid #e5e7eb;
+    min-height: 140px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  @media (max-width: 991px) {
+    .footer-logo-col {
+      border-right: none;
+      min-height: unset;
+    }
+  }
+  .footer-logo,
+  .footer-desc {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
   }
-}
-.footer-logo,
-.footer-desc {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  main
-}
 
-.footer-logo {
-  font-size: 2.3rem;
-  font-weight: bolder;
-  color: #2563eb;
-  margin-bottom: 0.3rem;
-  letter-spacing: 1px;
- Improvement-UI-Challenges
+  .footer-logo {
+    font-size: 2.3rem;
+    font-weight: bolder;
+    color: #2563eb;
+    margin-bottom: 0.3rem;
+    letter-spacing: 1px;
 
-  text-align: center;
- main
-}
-.footer-desc {
-  font-size: 1rem;
-  color: #4a5568;
-  opacity: 0.85;
-  margin-top: 0.3rem;
- Improvement-UI-Challenges
-  max-width: 320px;
-  padding-right: 1.5rem;
+    text-align: center;
+  }
+  .footer-desc {
+    font-size: 1rem;
+    color: #4a5568;
+    opacity: 0.85;
+    margin-top: 0.3rem;
 
-  line-height: 1.6;
-  max-width: 380px;
-  text-align: center;
-  padding: 0 1.5rem;
- main
-}
+    max-width: 320px;
+    padding-right: 1.5rem;
 
-.footer-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-  color: #1e2c44;
- Improvement-UI-Challenges
-  letter-spacing: 0.5px;
-  text-align: center;
-}
-.footer-contact-links {
-  margin-top: 0;
+    line-height: 1.6;
+    max-width: 380px;
+    text-align: center;
+    padding: 0 1.5rem;
+  }
 
-  text-align: center;
-  letter-spacing: 0.5px;
-}
-.footer-contact-col-main .footer-title,.imp-links  {
-  font-size: 1.45rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 1.1rem;
-  position: relative;
-}
-.footer-contact-col-main .footer-title::after ,.imp-links::after {
-  content: '';
-  display: block;
-  width: 55%;
-  height: 3px;
-  background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
-  border-radius: 2px;
-  margin: 0.4rem auto 0 auto;
- main
-}
+  .footer-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 0.7rem;
+    color: #1e2c44;
 
-.footer-links {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-}
-.footer-links li {
- Improvement-UI-Challenges
-  margin: 0;
-  padding: 0;
+    letter-spacing: 0.5px;
+    text-align: center;
+  }
+  .footer-contact-links {
+    margin-top: 0;
 
- main
-  list-style: none;
-}
-.footer-links a {
-  color: #1e2c44;
-  text-decoration: none;
-  font-size: 1rem;
-  opacity: 0.85;
- Improvement-UI-Challenges
-  transition: color 0.2s, opacity 0.2s;
-  position: relative;
-  transition: color 0.3s ease, opacity 0.3s ease;
-}
-.footer-links a::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -3px;
-  width: 0;
-  height: 2px;
-  background: #2563eb;
-  transition: width 0.3s ease;
- main
-}
-.footer-links a:hover {
-  color: #2563eb;
-  opacity: 1;
- Improvement-UI-Challenges
-}
+    text-align: center;
+    letter-spacing: 0.5px;
+  }
+  .footer-contact-col-main .footer-title,
+  .imp-links {
+    font-size: 1.45rem;
+    font-weight: 700;
+    color: #2563eb;
+    margin-bottom: 1.1rem;
+    position: relative;
+  }
+  .footer-contact-col-main .footer-title::after,
+  .imp-links::after {
+    content: "";
+    display: block;
+    width: 55%;
+    height: 3px;
+    background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+    border-radius: 2px;
+    margin: 0.4rem auto 0 auto;
+  }
+
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+  }
+  .footer-links li {
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+  }
+  .footer-links a {
+    color: #1e2c44;
+    text-decoration: none;
+    font-size: 1rem;
+    opacity: 0.85;
 
+    transition: color 0.2s, opacity 0.2s;
+    position: relative;
+    transition: color 0.3s ease, opacity 0.3s ease;
+  }
+  .footer-links a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -3px;
+    width: 0;
+    height: 2px;
+    background: #2563eb;
+    transition: width 0.3s ease;
+  }
+  .footer-links a:hover {
+    color: #2563eb;
+    opacity: 1;
+  }
 }
 .footer-links a:hover::after {
   width: 100%;
@@ -1188,17 +1145,17 @@ footer .row.align-items-start {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1.8rem; 
+  gap: 1.8rem;
 }
-.open-issue{
-    margin-top: 10%;
+.open-issue {
+  margin-top: 10%;
 }
 /* First Row: Open Issue Button */
 .open-issue a {
   width: 180px;
   font-size: 1rem;
   padding: 0.7em 1.6em;
-  border-radius: 9999px; 
+  border-radius: 9999px;
   background: #fff;
   color: #2563eb;
   border: 1px solid #2563eb;
@@ -1206,14 +1163,13 @@ footer .row.align-items-start {
   box-shadow: 0 0 0 transparent;
   transition: all 0.3s ease;
   text-decoration: none;
-
 }
 
 .open-issue a:hover {
   background: #fff;
   color: #2563eb;
   transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 0 15px rgba(37,99,235,0.35);
+  box-shadow: 0 0 15px rgba(37, 99, 235, 0.35);
 }
 
 /* Second Row: Social Icons */
@@ -1235,19 +1191,18 @@ footer .row.align-items-start {
   font-size: 1.2rem;
   background: #fff;
   transition: all 0.3s ease;
-  box-shadow: 0 0 8px rgba(37,99,235,0.18);
+  box-shadow: 0 0 8px rgba(37, 99, 235, 0.18);
 }
 
 .contact-icons a:hover {
   background: #4077ec;
   color: #fff;
   transform: translateY(-3px) scale(1.08);
-  box-shadow: 0 0 18px rgba(37,99,235,0.45);
+  box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
 }
 
 /* Scroll to top button */
- main
-.scroll_to_top {
+main .scroll_to_top {
   position: fixed;
   bottom: 15px;
   right: 20px;
@@ -1261,7 +1216,7 @@ footer .row.align-items-start {
   color: #fff;
   border-radius: 50%;
   transition: all 0.3s ease;
- Improvement-UI-Challenges
+
   border-radius: 50%;
   text-decoration: none;
 }
@@ -1421,19 +1376,18 @@ footer .row.align-items-start {
   gap: 0.2rem;
 }
 @media (max-width: 768px) {
-
   text-decoration: none;
 }
 .scroll_to_top:hover {
-  background: linear-gradient(45deg, #2563eb , #0000ff);
+  background: linear-gradient(45deg, #2563eb, #0000ff);
   transform: translateY(-3px) scale(1.05);
 }
 
-.footer-line{
-    width: 100%;
-    height: 1px;
-    background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
-    margin: 1.5rem 0;
+.footer-line {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+  margin: 1.5rem 0;
 }
 
 #contactFooter {
@@ -1444,7 +1398,10 @@ footer .row.align-items-start {
 
 /* ===== Responsive ===== */
 @media (max-width: 991px) {
-  .footer-logo-col { border-right: none; min-height: unset; }
+  .footer-logo-col {
+    border-right: none;
+    min-height: unset;
+  }
   footer .row.align-items-start {
     flex-direction: column;
     align-items: center;
@@ -1462,18 +1419,21 @@ footer .row.align-items-start {
     align-items: center;
     text-align: center;
   }
-  .footer-contact-btn { margin: auto; }
-  .footer-links { margin-bottom: 2rem; }
+  .footer-contact-btn {
+    margin: auto;
+  }
+  .footer-links {
+    margin-bottom: 2rem;
+  }
 }
 
 @media (max-width: 768px) {
- main
-  .footer-contact-row {
+  main .footer-contact-row {
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
   }
- Improvement-UI-Challenges
+
   .footer-contact-col {
     gap: 0.2rem;
     margin-bottom: 0.5rem;
@@ -1525,15 +1485,13 @@ footer .row.align-items-start {
   font-weight: bold;
 }
 
-  .footer-contact-btn {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-  }
- main
-
-  .contact-icons a{
-    margin-top: 10%;
-  }
+.footer-contact-btn {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
-/* ================== Footer Styles End Here ================== */
\ No newline at end of file
+main .contact-icons a {
+  margin-top: 10%;
+}
+
+/* ================== Footer Styles End Here ================== */