diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css
index 8495cb6d..5a475af1 100644
--- a/src/components/blogCarousel/blogCarousel.css
+++ b/src/components/blogCarousel/blogCarousel.css
@@ -1,88 +1,91 @@
-/* Blog Carousel Card Styles - Matching Blog Page Design */
-
-/* Article Card */
+/* ── Article Card ─────────────────────────────────────── */
 .article-card {
-  background: white;
+  background: #ffffff;
   border-radius: 20px;
   overflow: hidden;
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.35s ease;
   position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(147, 51, 234, 0.3);
   height: 100%;
   display: flex;
   flex-direction: column;
+  cursor: pointer;
+}
+
+/* ── Hover: lift + purple glow ── */
+.article-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 48px rgba(147, 51, 234, 0.22),
+    0 4px 12px rgba(147, 51, 234, 0.15);
+  border-color: rgba(147, 51, 234, 0.8);
 }
 
+/* ── Dark mode base ── */
 [data-theme="dark"] .article-card {
-  background: #242526;
-  border: 1px solid rgba(74, 85, 104, 0.3);
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.4),
-    0 1px 3px rgba(0, 0, 0, 0.3);
+  background: #1e1f20;
+  border: 1px solid rgba(192, 132, 252, 0.2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
 }
 
+[data-theme="dark"] .article-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 48px rgba(192, 132, 252, 0.28),
+    0 4px 12px rgba(192, 132, 252, 0.18);
+  border-color: rgba(192, 132, 252, 0.8);
+}
+
+/* ── Subtle overlay on hover ── */
 .article-card::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.02) 0%,
-    rgba(168, 85, 247, 0.02) 100%
-  );
+  inset: 0;
+  background: linear-gradient(135deg,
+      rgba(147, 51, 234, 0.04) 0%,
+      rgba(217, 70, 239, 0.04) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
+  z-index: 0;
 }
 
 .article-card:hover::before {
   opacity: 1;
 }
 
+/* ── Category badge ── */
 .card-category {
   position: absolute;
-  top: 20px;
-  left: 20px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 255, 255, 0.9) 100%
-  );
+  top: 14px;
+  left: 14px;
+  background: rgba(255, 255, 255, 0.92);
   color: #6366f1;
-  padding: 8px 16px;
+  padding: 5px 13px;
   border-radius: 25px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   z-index: 2;
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(99, 102, 241, 0.1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.25s ease;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
 }
 
 [data-theme="dark"] .card-category {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.9) 100%
-  );
+  background: rgba(30, 31, 32, 0.92);
   color: #a78bfa;
-  border: 1px solid rgba(167, 139, 250, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(167, 139, 250, 0.25);
 }
 
 .article-card:hover .card-category {
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   color: white;
-  transform: scale(1.05);
+  border-color: transparent;
+  transform: scale(1.04);
 }
 
 [data-theme="dark"] .article-card:hover .card-category {
@@ -90,6 +93,7 @@
   color: #1a202c;
 }
 
+/* ── Card image ── */
 .card-image {
   height: 200px;
   overflow: hidden;
@@ -98,24 +102,19 @@
   flex-shrink: 0;
 }
 
-.card-image::before {
+.card-image::after {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
+  inset: 0;
+  background: linear-gradient(to bottom,
+      transparent 50%,
+      rgba(99, 102, 241, 0.08) 100%);
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.35s ease;
   z-index: 1;
 }
 
-.article-card:hover .card-image::before {
+.article-card:hover .card-image::after {
   opacity: 1;
 }
 
@@ -123,43 +122,38 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  filter: brightness(1) saturate(1);
+  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    filter 0.45s ease;
 }
 
 .article-card:hover .card-image img {
-  transform: scale(1.08);
-  filter: brightness(1.1) saturate(1.2);
+  transform: scale(1.07);
+  filter: brightness(1.06) saturate(1.15);
 }
 
+/* ── Card content ── */
 .card-content {
-  padding: 24px;
+  padding: 20px 22px 18px;
   position: relative;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(248, 250, 252, 0.95) 100%
-  );
+  z-index: 1;
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: #ffffff;
 }
 
 [data-theme="dark"] .card-content {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.95) 100%
-  );
+  background: #1e1f20;
 }
 
+/* ── Title ── */
 .card-title {
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 700;
-  color: #1e293b;
-  margin: 0 0 12px 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
+  color: #0f172a;
+  margin: 0 0 10px 0;
+  line-height: 1.35;
+  letter-spacing: -0.015em;
   transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -168,7 +162,7 @@
 }
 
 .article-card:hover .card-title {
-  color: #6366f1;
+  color: #9333ea;
 }
 
 [data-theme="dark"] .card-title {
@@ -193,16 +187,16 @@
   color: #a78bfa;
 }
 
+/* ── Description ── */
 .card-description {
-  font-size: 14px;
+  font-size: 13.5px;
   color: #64748b;
-  line-height: 1.6;
-  margin: 0 0 20px 0;
+  line-height: 1.65;
+  margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-weight: 400;
   flex: 1;
 }
 
@@ -210,39 +204,44 @@
   color: #94a3b8;
 }
 
+/* ── Meta row ── */
 .card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+  margin-bottom: 14px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
   position: relative;
-  gap: 12px;
+  gap: 10px;
 }
 
 [data-theme="dark"] .card-meta {
-  border-bottom-color: rgba(74, 85, 104, 0.3);
+  border-bottom-color: rgba(74, 85, 104, 0.25);
 }
 
-.card-meta::before {
+/* Animated underline on hover */
+.card-meta::after {
   content: "";
   position: absolute;
   bottom: -1px;
   left: 0;
-  width: 40px;
+  width: 0;
   height: 2px;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 1px;
-  opacity: 0;
-  transition: all 0.3s ease;
+  background: linear-gradient(90deg, #9333ea 0%, #c084fc 100%);
+  border-radius: 2px;
+  transition: width 0.35s ease;
 }
 
-.article-card:hover .card-meta::before {
-  opacity: 1;
-  width: 60px;
+.article-card:hover .card-meta::after {
+  width: 52px;
 }
 
+[data-theme="dark"] .card-meta::after {
+  background: linear-gradient(90deg, #c084fc 0%, #d946ef 100%);
+}
+
+/* ── Author ── */
 .card-author {
   display: flex;
   align-items: center;
@@ -257,6 +256,7 @@
   height: 28px;
   flex-shrink: 0;
 }
+
 /* 
 .author-avatar-image {
   width: 100%;
@@ -378,17 +378,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 12px;
   color: white;
-  font-weight: 600;
+  font-weight: 700;
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
   flex-shrink: 0;
-  transition: all 0.3s ease;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
 }
 
-.author-avatar:hover {
+.article-card:hover .author-avatar {
   transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
 }
 
 .author-name {
@@ -401,7 +401,7 @@
   transition: color 0.2s ease;
 }
 
-.author-name:hover {
+.article-card:hover .author-name {
   color: #6366f1;
 }
 
@@ -458,43 +458,45 @@
 }
 
 [data-theme="dark"] .author-name {
-  color: #cbd5e1;
+  color: #94a3b8;
 }
 
-[data-theme="dark"] .author-name:hover {
+[data-theme="dark"] .article-card:hover .author-name {
   color: #a78bfa;
 }
 
+/* ── Read time pill ── */
 .card-read-time {
   font-size: 11px;
-  color: #94a3b8;
-  font-weight: 500;
-  background: rgba(148, 163, 184, 0.1);
-  padding: 4px 8px;
-  border-radius: 12px;
+  color: #6366f1;
+  font-weight: 600;
+  background: rgba(99, 102, 241, 0.08);
+  padding: 3px 10px;
+  border-radius: 20px;
   flex-shrink: 0;
+  border: 1px solid rgba(99, 102, 241, 0.15);
 }
 
 [data-theme="dark"] .card-read-time {
-  color: #64748b;
-  background: rgba(100, 116, 139, 0.2);
+  color: #a78bfa;
+  background: rgba(167, 139, 250, 0.1);
+  border-color: rgba(167, 139, 250, 0.2);
 }
 
+/* ── Read more button ── */
 .card-read-more {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  align-self: flex-start;
+  /* ← fixes full-width stretch */
   color: #6366f1;
   text-decoration: none;
   font-size: 13px;
   font-weight: 700;
-  padding: 10px 16px;
+  padding: 9px 18px;
   border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(139, 92, 246, 0.1) 100%
-  );
+  background: rgba(99, 102, 241, 0.08);
   border: 1px solid rgba(99, 102, 241, 0.2);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
@@ -505,69 +507,90 @@
 .card-read-more::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  transition: left 0.3s ease;
-  z-index: -1;
+  inset: 0;
+  background: linear-gradient(135deg, #9333ea 0%, #d946ef 100%);
+  transform: translateX(-101%);
+  transition: transform 0.3s ease;
+  z-index: 0;
+}
+
+.card-read-more span {
+  position: relative;
+  z-index: 1;
 }
 
 .card-read-more:hover {
   color: white;
+  border-color: transparent;
+  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
 }
 
 .card-read-more:hover::before {
-  left: 0;
+  transform: translateX(0);
 }
 
 [data-theme="dark"] .card-read-more {
-  color: #a78bfa;
-  background: linear-gradient(
-    135deg,
-    rgba(167, 139, 250, 0.1) 0%,
-    rgba(192, 132, 252, 0.1) 100%
-  );
-  border-color: rgba(167, 139, 250, 0.2);
+  color: #c084fc;
+  background: rgba(192, 132, 252, 0.08);
+  border-color: rgba(192, 132, 252, 0.2);
+}
+
+[data-theme="dark"] .card-read-more::before {
+  background: linear-gradient(135deg, #c084fc 0%, #d946ef 100%);
 }
 
 [data-theme="dark"] .card-read-more:hover {
   color: white;
 }
 
-/* Responsive adjustments for carousel cards */
+/* ── Blog carousel section ── */
+.blog-carousel-section {
+  background: linear-gradient(160deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
+  padding: 48px 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .blog-carousel-section {
+  background: linear-gradient(160deg, #131314 0%, #18181b 50%, #1a1f2e 100%);
+}
+
+/* ── Focus state ── */
+.article-card:focus-within {
+  outline: 2px solid #6366f1;
+  outline-offset: 4px;
+  border-radius: 24px;
+}
+
+/* ── Responsive ── */
 @media (max-width: 768px) {
   .card-image {
     height: 160px;
   }
 
   .card-content {
-    padding: 20px;
+    padding: 16px 18px 14px;
   }
 
   .card-title {
-    font-size: 16px;
-    margin-bottom: 10px;
+    font-size: 15px;
   }
 
   .card-description {
-    font-size: 13px;
-    margin-bottom: 16px;
+    font-size: 12.5px;
     -webkit-line-clamp: 2;
   }
 
   .card-meta {
-    margin-bottom: 12px;
-    padding-bottom: 12px;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
   }
 
   .author-avatar {
     width: 24px;
     height: 24px;
-    font-size: 12px;
+    font-size: 10px;
   }
 
   .author-name {
@@ -576,16 +599,15 @@
 
   .card-read-time {
     font-size: 10px;
-    padding: 3px 6px;
   }
 
   .card-read-more {
     font-size: 12px;
-    padding: 8px 12px;
+    padding: 7px 14px;
   }
 }
 
-/* Smooth page transitions */
+/* ── Page transitions ── */
 .page-transition-enter {
   opacity: 0;
   transform: translateY(20px);
@@ -594,9 +616,7 @@
 .page-transition-enter-active {
   opacity: 1;
   transform: translateY(0);
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.6s ease-out;
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
 
 .page-transition-exit {
@@ -607,35 +627,5 @@
 .page-transition-exit-active {
   opacity: 0;
   transform: translateY(-20px);
-  transition:
-    opacity 0.4s ease-in,
-    transform 0.4s ease-in;
-}
-
-/* Blog Carousel Section Enhancements */
-.blog-carousel-section {
-  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
-  padding: 5px;
-  position: relative;
-  overflow: hidden;
-}
-
-[data-theme="dark"] .blog-carousel-section {
-  background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%);
-}
-
-/* Enhanced Focus States */
-.article-card:focus-within {
-  outline: 2px solid #6366f1;
-  outline-offset: 4px;
-  border-radius: 24px;
-}
-
-/* Smooth Link Transitions */
-a[href*="/blog/"] {
-  transition: all 0.3s ease;
-}
-
-a[href*="/blog/"]:hover {
-  text-decoration: none;
-}
+  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
+}
\ No newline at end of file
diff --git a/src/components/blogCarousel/blogCarousel.tsx b/src/components/blogCarousel/blogCarousel.tsx
index c63a55be..ae78ed59 100644
--- a/src/components/blogCarousel/blogCarousel.tsx
+++ b/src/components/blogCarousel/blogCarousel.tsx
@@ -9,11 +9,11 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "../ui/carousel";
-import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import BlogCard from "./blogCard";
 import blogs from "../../database/blogs";
 import Autoplay from "embla-carousel-autoplay";
+import Link from "@docusaurus/Link";
 import "./blogCarousel.css";
 
 export function BlogCarousel() {
@@ -34,6 +34,25 @@ export function BlogCarousel() {
 
   return (
     <div className="max-w-8xl mx-auto w-full px-4">
+      {/* Section Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+            From the Blog
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Latest articles from our contributors
+          </p>
+        </div>
+        <Link
+          to="/blog"
+          className="flex items-center gap-1.5 text-sm font-medium text-indigo-600 border border-indigo-200 px-4 py-2 rounded-lg hover:bg-indigo-50 transition-all dark:text-indigo-400 dark:border-indigo-800 dark:hover:bg-indigo-950"
+          style={{ textDecoration: "none" }}
+        >
+          View all →
+        </Link>
+      </div>
+
       <Carousel
         setApi={setApi}
         className="w-full"
@@ -49,7 +68,7 @@ export function BlogCarousel() {
         ]}
       >
         <CarouselContent className="my-10">
-          {blogs.map((blog, index) => (
+          {blogs.map((blog) => (
             <CarouselItem
               key={blog.id}
               className="basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
@@ -67,27 +86,29 @@ export function BlogCarousel() {
           ))}
         </CarouselContent>
 
-        {/* Enhanced Carousel controls */}
+        {/* Carousel Controls */}
         <div className="mt-8 flex items-center justify-center gap-4">
-          <CarouselPrevious className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
-          <div className="flex gap-2">
+          <CarouselPrevious className="static h-10 w-10 translate-y-0 border border-indigo-200 transition-all duration-300 hover:scale-110 hover:border-indigo-400 dark:border-indigo-800 dark:hover:border-indigo-600" />
+
+          {/* Dot indicators */}
+          <div className="flex items-center gap-2">
             {Array.from({ length: count }).map((_, index) => (
-              <Button
+              <button
                 key={index}
-                variant="ghost"
-                size="sm"
-                className={`h-3 w-3 rounded-full p-0 transition-all duration-300 ${
+                onClick={() => api?.scrollTo(index)}
+                aria-label={`Go to slide ${index + 1}`}
+                className={`h-2 rounded-full transition-all duration-300 ${
                   current === index + 1
-                    ? "scale-125 bg-gradient-to-r from-blue-500 to-purple-500"
-                    : "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
+                    ? "w-5 bg-indigo-500"
+                    : "w-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                 }`}
-                onClick={() => api?.scrollTo(index)}
               />
             ))}
           </div>
-          <CarouselNext className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
+
+          <CarouselNext className="static h-10 w-10 translate-y-0 border border-indigo-200 transition-all duration-300 hover:scale-110 hover:border-indigo-400 dark:border-indigo-800 dark:hover:border-indigo-600" />
         </div>
       </Carousel>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 1cfc23a9..84e0fb51 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -50,28 +50,28 @@
   transition: all 0.25s ease-in-out;
 }
 
-/* Force high visibility for active sidebar items - Green Theme */
+/* Force high visibility for active sidebar items - Blue Theme */
 .menu__link--active {
-  background-color: #ecfdf5;
-  /* Light green background */
-  color: #2f855a;
-  /* Strong green text */
+  background-color: #eff6ff;
+  /* Light blue background */
+  color: #1d4ed8;
+  /* Strong blue text */
   font-weight: bold;
   position: relative;
-  box-shadow: 0 2px 8px rgba(56, 161, 105, 0.2);
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
 }
 
 /* Make the active icon stand out in the sidebar */
 .menu__link--active .categoryIcon,
 .menu__link--active .linkIcon {
-  color: #38a169;
+  color: #2563eb;
 }
 
 /* Make active text bold and larger */
 .menu__link--active span {
   font-weight: 700;
-  color: #2f855a;
-  /* Strong green color */
+  color: #1d4ed8;
+  /* Strong blue color */
   font-size: 1.05em;
 }
 
@@ -79,14 +79,14 @@
 
 /* Style the existing dot for active pages */
 a.menu__link.menu__link--active div span:first-child {
-  background-color: #38a169 !important;
-  /* Green dot */
+  background-color: #2563eb !important;
+  /* Blue dot */
   opacity: 1 !important;
   width: 8px !important;
   height: 8px !important;
-  box-shadow: 0 0 6px #38a169 !important;
+  box-shadow: 0 0 6px #2563eb !important;
   /* Add glow effect */
-  animation: breatheGreen 2s infinite;
+  animation: breatheBlue 2s infinite;
 }
 
 /* Add arrow indicator to the right */
@@ -96,12 +96,12 @@ a.menu__link.menu__link--active div span:first-child {
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
-  color: #38a169;
+  color: #2563eb;
   font-weight: bold;
 }
 
 /* Breathing animation for active indicators */
-@keyframes breatheGreen {
+@keyframes breatheBlue {
   0% {
     opacity: 0.7;
     transform: translateY(-50%) scale(1);
@@ -121,7 +121,7 @@ a.menu__link.menu__link--active div span:first-child {
 /* ================= SECTION 4: CUSTOM SIDEBAR CATEGORY THEMES ================= */
 
 /* GitHub theme */
-.custom-sidebar-github > .menu__list-item-collapsible > .menu__link {
+.custom-sidebar-github>.menu__list-item-collapsible>.menu__link {
   background: linear-gradient(135deg, #24292e, #586069);
   color: white;
   border-radius: 8px;
@@ -130,7 +130,7 @@ a.menu__link.menu__link--active div span:first-child {
 }
 
 /* Python theme */
-.custom-sidebar-python > .menu__list-item-collapsible > .menu__link {
+.custom-sidebar-python>.menu__list-item-collapsible>.menu__link {
   background: linear-gradient(135deg, #3776ab, #ffd43b);
   color: white;
   border-radius: 8px;
@@ -139,7 +139,7 @@ a.menu__link.menu__link--active div span:first-child {
 }
 
 /* SQL theme */
-.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link {
+.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link {
   background: linear-gradient(135deg, #336791, #4479a1);
   color: white;
   border-radius: 8px;
@@ -148,7 +148,7 @@ a.menu__link.menu__link--active div span:first-child {
 }
 
 /* Technical theme */
-.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link {
+.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link {
   background: linear-gradient(135deg, #ff6b6b, #ee5a24);
   color: white;
   border-radius: 8px;
@@ -157,9 +157,9 @@ a.menu__link.menu__link--active div span:first-child {
 }
 
 /* Custom subcategory styling */
-.custom-sidebar-setup > .menu__list-item-collapsible > .menu__link,
-.custom-sidebar-basics > .menu__list-item-collapsible > .menu__link,
-.custom-sidebar-maintainer > .menu__list-item-collapsible > .menu__link {
+.custom-sidebar-setup>.menu__list-item-collapsible>.menu__link,
+.custom-sidebar-basics>.menu__list-item-collapsible>.menu__link,
+.custom-sidebar-maintainer>.menu__list-item-collapsible>.menu__link {
   background: rgba(36, 41, 46, 0.1);
   border-left: 3px solid #24292e;
   padding-left: 16px;
@@ -167,12 +167,12 @@ a.menu__link.menu__link--active div span:first-child {
 }
 
 /* Hover effects for all custom categories */
-.custom-sidebar-github > .menu__list-item-collapsible > .menu__link:hover,
-.custom-sidebar-python > .menu__list-item-collapsible > .menu__link:hover,
-.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link:hover,
-.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link:hover,
-.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link:hover,
-.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link:hover {
+.custom-sidebar-github>.menu__list-item-collapsible>.menu__link:hover,
+.custom-sidebar-python>.menu__list-item-collapsible>.menu__link:hover,
+.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link:hover,
+.custom-sidebar-nextjs>.menu__list-item-collapsible>.menu__link:hover,
+.custom-sidebar-gsa>.menu__list-item-collapsible>.menu__link:hover,
+.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link:hover {
   transform: translateX(4px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
@@ -182,24 +182,24 @@ a.menu__link.menu__link--active div span:first-child {
 
 /* Dark mode styles for active items */
 html[data-theme="dark"] .menu__link--active {
-  background-color: rgba(72, 187, 120, 0.15);
-  color: #9ae6b4;
+  background-color: rgba(96, 165, 250, 0.15);
+  color: #93c5fd;
 }
 
 /* Dark mode text color */
 html[data-theme="dark"] .menu__link--active span {
-  color: #9ae6b4;
+  color: #93c5fd;
 }
 
 /* Dark mode dot styling */
 html[data-theme="dark"] a.menu__link.menu__link--active div span:first-child {
-  background-color: #9ae6b4 !important;
-  box-shadow: 0 0 8px #68d391 !important;
+  background-color: #93c5fd !important;
+  box-shadow: 0 0 8px #60a5fa !important;
 }
 
 /* Dark mode indicator colors */
 html[data-theme="dark"] .menu__link--active::after {
-  color: #68d391;
+  color: #60a5fa;
 }
 
 /* Navbar styling and alignment */
@@ -251,7 +251,7 @@ html[data-theme="dark"] .menu__link--active::after {
 }
 
 /* ======== SECTION 7 : Adjust individual navbar items ==========*/
-.navbar__items > .navbar__item {
+.navbar__items>.navbar__item {
   padding: 0.2rem 0.3rem !important;
   margin: 0 !important;
 }
@@ -282,6 +282,7 @@ html[data-theme="dark"] .menu__link--active::after {
 
 /* Ensure dropdowns are visible on big screens */
 @media (min-width: 1300px) {
+
   .navbar__item.dropdown,
   .navbar__item:has(.dropdown-content) {
     position: relative !important;
@@ -355,13 +356,13 @@ html[data-theme="dark"] .menu__link--active::after {
 }
 
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #1d4ed8;
+  --ifm-color-primary-dark: #1e40af;
+  --ifm-color-primary-darker: #1e3a8a;
+  --ifm-color-primary-darkest: #172554;
+  --ifm-color-primary-light: #2563eb;
+  --ifm-color-primary-lighter: #3b82f6;
+  --ifm-color-primary-lightest: #60a5fa;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-transition-fast: 150ms;
@@ -416,13 +417,13 @@ body {
 }
 
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #60a5fa;
+  --ifm-color-primary-dark: #3b82f6;
+  --ifm-color-primary-darker: #2563eb;
+  --ifm-color-primary-darkest: #1d4ed8;
+  --ifm-color-primary-light: #93c5fd;
+  --ifm-color-primary-lighter: #bfdbfe;
+  --ifm-color-primary-lightest: #dbeafe;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   /* Global dark theme tokens used across feature pages (courses, broadcasts, sponsors, etc.) */
@@ -456,6 +457,7 @@ body {
 
 /* =====  SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */
 @media (min-width: 1300px) {
+
   /* Better spacing for desktop navbar */
   .navbar__inner {
     max-width: 1400px;
@@ -480,10 +482,7 @@ body {
   * Hide all navbar items on small screens except the toggle, brand,
   * and the Clerk auth control.
   */
-  .navbar__items
-    .navbar__item:not(.navbar__toggle):not(.navbar__brand):not(
-      :has(#clerk-auth-navbar)
-    ) {
+  .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) {
     display: none !important;
   }
 
@@ -688,8 +687,8 @@ body {
 }
 
 /* Prevent grid content from forcing overflow in the dropdown rows */
-.dropdown__menu .grid > .col-span-2,
-.dropdown-content .grid > .col-span-2 {
+.dropdown__menu .grid>.col-span-2,
+.dropdown-content .grid>.col-span-2 {
   min-width: 0 !important;
   /* allow the icon column to shrink inside the 3-col grid */
 }
@@ -712,8 +711,8 @@ body {
 }
 
 /* Add breathing room between the left label and the vertical separator */
-.dropdown__menu .grid > .border-r.col-span-1,
-.dropdown-content .grid > .border-r.col-span-1 {
+.dropdown__menu .grid>.border-r.col-span-1,
+.dropdown-content .grid>.border-r.col-span-1 {
   padding-right: 0.5rem !important;
 }
 
@@ -874,11 +873,9 @@ html.theme-light .text-gray-900 {
 
 /* Ensure the specific block is forced light in light mode */
 html[data-theme="light"] .interview-prep-page .technical-outer {
-  background-image: linear-gradient(
-    135deg,
-    #eff6ff 0%,
-    #f8fafc 100%
-  ) !important;
+  background-image: linear-gradient(135deg,
+      #eff6ff 0%,
+      #f8fafc 100%) !important;
   background-color: #ffffff !important;
   -webkit-backdrop-filter: none !important;
   backdrop-filter: none !important;
@@ -889,11 +886,9 @@ html[data-theme="light"] .interview-prep-page .technical-outer {
 
 /* Companies tab: use white gradients in light mode and remove overlays */
 [data-theme="light"] .company-outer {
-  background-image: linear-gradient(
-    135deg,
-    #ffffff 0%,
-    #f8fafc 100%
-  ) !important;
+  background-image: linear-gradient(135deg,
+      #ffffff 0%,
+      #f8fafc 100%) !important;
   background-color: #ffffff !important;
   color: #0f172a !important;
   isolation: isolate !important;
@@ -903,7 +898,7 @@ html[data-theme="light"] .interview-prep-page .technical-outer {
 }
 
 /* hide the subtle pattern overlay added inside the component */
-[data-theme="light"] .company-outer > .absolute.inset-0,
+[data-theme="light"] .company-outer>.absolute.inset-0,
 [data-theme="light"] .company-outer .absolute.inset-0.opacity-5 {
   display: none !important;
   background: none !important;
@@ -987,14 +982,12 @@ html {
 /* ===== FOOTER BACKGROUND PROTECTION ===== */
 /* Ensure footer maintains its gradient background in dark mode */
 [data-theme="dark"] .enhanced-footer {
-  background: linear-gradient(
-    135deg,
-    #0f0f23 0%,
-    #1a1a2e 25%,
-    #16213e 50%,
-    #0f3460 75%,
-    #533483 100%
-  ) !important;
+  background: linear-gradient(135deg,
+      #0f0f23 0%,
+      #1a1a2e 25%,
+      #16213e 50%,
+      #0f3460 75%,
+      #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
@@ -1010,22 +1003,17 @@ html {
 
 /* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */
 /* Override the exact problematic global rule with same specificity */
-[data-theme="dark"]
-  body:not(:has(.community-page))
-  .enhanced-footer
-  .container {
+[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer .container {
   background-color: transparent !important;
 }
 
 [data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer {
-  background: linear-gradient(
-    135deg,
-    #0f0f23 0%,
-    #1a1a2e 25%,
-    #16213e 50%,
-    #0f3460 75%,
-    #533483 100%
-  ) !important;
+  background: linear-gradient(135deg,
+      #0f0f23 0%,
+      #1a1a2e 25%,
+      #16213e 50%,
+      #0f3460 75%,
+      #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
@@ -1047,15 +1035,14 @@ html {
 
 /* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR AS THERE IS ONE ON THE NAVBAR ===== */
 @media (max-width: 1200px) {
+
   /* Aggressively hide theme toggle in mobile sidebar */
-  .navbar-sidebar__brand
-    button:not(.navbar-sidebar__close):not([class*="close"]),
+  .navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]),
   .navbar-sidebar__brand .colorModeToggle,
   .navbar-sidebar .colorModeToggle,
   .navbar-sidebar__brand button[class*="colorModeToggle"],
   .navbar-sidebar button[class*="colorModeToggle"],
-  .navbar-sidebar__brand
-    .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
+  .navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
   .navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
   .navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close),
   .navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close),
@@ -1127,6 +1114,7 @@ html {
 
 /* Mobile-only visibility & spacing fixes for Tutorials icons (320–768px) */
 @media screen and (max-width: 768px) {
+
   /* Ensure the label + icons row inside Docs dropdown uses the full width */
   .navbar-sidebar .grid,
   .navbar-sidebar .dropdown__menu .grid,
@@ -1139,12 +1127,12 @@ html {
   }
 
   /* So the icon column doesn't get clipped in the 3-col layout */
-  .navbar-sidebar .grid > .col-span-2 {
+  .navbar-sidebar .grid>.col-span-2 {
     min-width: 0 !important;
   }
 
   /* Tighten label space and drop the border on very small screens */
-  .navbar-sidebar .grid > .border-r.col-span-1 {
+  .navbar-sidebar .grid>.border-r.col-span-1 {
     border-right: 0 !important;
     padding-right: 0.25rem !important;
     font-weight: 600;
@@ -1189,7 +1177,7 @@ html {
   }
 
   /* Add vertical space between Tutorials, Courses, Interview Prep blocks */
-  .navbar-sidebar .dropdown__menu > .grid {
+  .navbar-sidebar .dropdown__menu>.grid {
     padding: 1rem 0 !important;
     margin: 1rem 0 !important;
   }
@@ -1489,7 +1477,7 @@ html {
   flex-shrink: 0;
 }
 
-.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut > * {
+.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut>* {
   min-width: 0 !important;
   height: auto !important;
   padding: 0 !important;
@@ -1630,8 +1618,8 @@ html {
   padding-right: var(--ifm-navbar-padding-horizontal) !important;
 }
 
-.navbar > .container,
-.navbar > .container-fluid {
+.navbar>.container,
+.navbar>.container-fluid {
   max-width: none !important;
   width: 100% !important;
   padding: 0 !important;
@@ -1677,16 +1665,12 @@ main {
   right: 0;
   bottom: 0;
   background:
-    radial-gradient(
-      circle at 20% 30%,
+    radial-gradient(circle at 20% 30%,
       rgba(99, 102, 241, 0.08) 0%,
-      transparent 40%
-    ),
-    radial-gradient(
-      circle at 80% 70%,
+      transparent 40%),
+    radial-gradient(circle at 80% 70%,
       rgba(168, 85, 247, 0.06) 0%,
-      transparent 45%
-    );
+      transparent 45%);
   pointer-events: none;
 }
 
@@ -1738,7 +1722,7 @@ a {
 
 /* ================= MISCELLANEOUS ================= */
 /* Fix Home icon alignment with text in breadcrumbs [Docs] */
-.theme-doc-breadcrumbs a.breadcrumbs__link > svg {
+.theme-doc-breadcrumbs a.breadcrumbs__link>svg {
   display: inline-block;
 }
 
@@ -1853,11 +1837,9 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 {
 
 /* Companies: force white/near-white surface in light mode for .company-outer */
 html[data-theme="light"] .company-outer {
-  background-image: linear-gradient(
-    135deg,
-    #ffffff 0%,
-    #f8fafc 100%
-  ) !important;
+  background-image: linear-gradient(135deg,
+      #ffffff 0%,
+      #f8fafc 100%) !important;
   background-color: #ffffff !important;
   -webkit-backdrop-filter: none !important;
   backdrop-filter: none !important;
@@ -1901,11 +1883,9 @@ html[data-theme="light"] a.company-tab-link {
 /* If any Tailwind gradient utility still applies, remove it for these containers in light mode */
 html[data-theme="light"] .company-outer.bg-gradient-to-br,
 html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
-  background-image: linear-gradient(
-    135deg,
-    #ffffff 0%,
-    #f8fafc 100%
-  ) !important;
+  background-image: linear-gradient(135deg,
+      #ffffff 0%,
+      #f8fafc 100%) !important;
   background-color: #ffffff !important;
   -webkit-backdrop-filter: none !important;
   backdrop-filter: none !important;
@@ -1940,7 +1920,7 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
 /* Issue #980: Fix inconsistent padding and margins across sections */
 
 /* Standard section spacing: 2rem vertical, 1.5rem horizontal on smaller screens */
-main > div:not(.m-0) {
+main>div:not(.m-0) {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
@@ -1952,7 +1932,7 @@ main > div:not(.m-0) {
 
 /* Responsive: reduce spacing on mobile devices */
 @media (max-width: 768px) {
-  main > div:not(.m-0) {
+  main>div:not(.m-0) {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
   }