From 2f4164263f09113172358cd6a2edddf437e3492d Mon Sep 17 00:00:00 2001
From: Shruti <shrutinarsulwar@gmail.com>
Date: Sun, 31 May 2026 13:30:20 +0530
Subject: [PATCH 1/4] responsiveness of footer for mobile vide updated

---
 src/theme/Footer/Layout/enhanced-footer.css | 1932 +++----------------
 src/theme/Footer/Layout/index.tsx           |    6 +-
 2 files changed, 260 insertions(+), 1678 deletions(-)

diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css
index 97386f34..43e4c982 100644
--- a/src/theme/Footer/Layout/enhanced-footer.css
+++ b/src/theme/Footer/Layout/enhanced-footer.css
@@ -9,178 +9,86 @@
 
 /* Keyframe Animations */
 @keyframes linkPulse {
-
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
-  }
-
-  50% {
-    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
-  }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
+  50% { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); }
 }
 
 @keyframes iconBounce {
-
-  0%,
-  100% {
-    transform: scale(1) rotate(0deg);
-  }
-
-  50% {
-    transform: scale(1.1) rotate(5deg);
-  }
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.1) rotate(5deg); }
 }
 
 @keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-
-  100% {
-    background-position: 200% 0;
-  }
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
 @keyframes statGlow {
-
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
-  }
-
-  50% {
-    box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1);
-  }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
+  50% { box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1); }
 }
 
 @keyframes numberPulse {
-
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.02);
-  }
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
 }
 
 .enhanced-footer {
-  font-family:
-    "Inter",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif !important;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
   background: #ffffff !important;
   color: #111111 !important;
   position: relative;
   overflow: hidden;
+  width: 100%;
 }
 
 /* Override ALL possible Docusaurus and theme styles with maximum specificity */
 .enhanced-footer,
 .enhanced-footer *,
-.enhanced-footer h1,
-.enhanced-footer h2,
-.enhanced-footer h3,
-.enhanced-footer h4,
-.enhanced-footer h5,
-.enhanced-footer h6,
-.enhanced-footer p,
-.enhanced-footer span,
-.enhanced-footer div,
-.enhanced-footer a,
-.enhanced-footer li,
-.enhanced-footer ul,
-.enhanced-footer button,
-.enhanced-footer input,
-[data-theme="dark"] .enhanced-footer,
-[data-theme="light"] .enhanced-footer,
-html[data-theme="dark"] .enhanced-footer,
-html[data-theme="light"] .enhanced-footer,
-[data-theme="dark"] .enhanced-footer *,
-[data-theme="light"] .enhanced-footer *,
-[data-theme="dark"] .enhanced-footer h1,
-[data-theme="dark"] .enhanced-footer h2,
-[data-theme="dark"] .enhanced-footer h3,
-[data-theme="dark"] .enhanced-footer h4,
-[data-theme="dark"] .enhanced-footer h5,
-[data-theme="dark"] .enhanced-footer h6,
-[data-theme="dark"] .enhanced-footer p,
-[data-theme="dark"] .enhanced-footer span,
-[data-theme="dark"] .enhanced-footer div,
-[data-theme="dark"] .enhanced-footer a,
-[data-theme="dark"] .enhanced-footer li,
-[data-theme="dark"] .enhanced-footer ul,
-[data-theme="dark"] .enhanced-footer button,
-[data-theme="dark"] .enhanced-footer input,
-[data-theme="light"] .enhanced-footer h1,
-[data-theme="light"] .enhanced-footer h2,
-[data-theme="light"] .enhanced-footer h3,
-[data-theme="light"] .enhanced-footer h4,
-[data-theme="light"] .enhanced-footer h5,
-[data-theme="light"] .enhanced-footer h6,
-[data-theme="light"] .enhanced-footer p,
-[data-theme="light"] .enhanced-footer span,
-[data-theme="light"] .enhanced-footer div,
-[data-theme="light"] .enhanced-footer a,
-[data-theme="light"] .enhanced-footer li,
-[data-theme="light"] .enhanced-footer ul,
-[data-theme="light"] .enhanced-footer button,
-[data-theme="light"] .enhanced-footer input,
-html[data-theme="dark"] .enhanced-footer *,
-html[data-theme="light"] .enhanced-footer * {
-  background-color: inherit !important;
-  color: inherit !important;
-}
-
-/* Force the main footer background and colors to never change */
+.enhanced-footer h1, .enhanced-footer h2, .enhanced-footer h3, .enhanced-footer h4, .enhanced-footer h5, .enhanced-footer h6,
+.enhanced-footer p, .enhanced-footer span, .enhanced-footer div, .enhanced-footer a, .enhanced-footer li, .enhanced-footer ul,
+.enhanced-footer button, .enhanced-footer input,
+[data-theme="dark"] .enhanced-footer, [data-theme="light"] .enhanced-footer,
+html[data-theme="dark"] .enhanced-footer, html[data-theme="light"] .enhanced-footer,
+[data-theme="dark"] .enhanced-footer *, [data-theme="light"] .enhanced-footer *,
+[data-theme="dark"] .enhanced-footer h1, [data-theme="dark"] .enhanced-footer h2, [data-theme="dark"] .enhanced-footer h3,
+[data-theme="dark"] .enhanced-footer h4, [data-theme="dark"] .enhanced-footer h5, [data-theme="dark"] .enhanced-footer h6,
+[data-theme="dark"] .enhanced-footer p, [data-theme="dark"] .enhanced-footer span, [data-theme="dark"] .enhanced-footer div,
+[data-theme="dark"] .enhanced-footer a, [data-theme="dark"] .enhanced-footer li, [data-theme="dark"] .enhanced-footer ul,
+[data-theme="dark"] .enhanced-footer button, [data-theme="dark"] .enhanced-footer input,
+[data-theme="light"] .enhanced-footer h1, [data-theme="light"] .enhanced-footer h2, [data-theme="light"] .enhanced-footer h3,
+[data-theme="light"] .enhanced-footer h4, [data-theme="light"] .enhanced-footer h5, [data-theme="light"] .enhanced-footer h6,
+[data-theme="light"] .enhanced-footer p, [data-theme="light"] .enhanced-footer span, [data-theme="light"] .enhanced-footer div,
+[data-theme="light"] .enhanced-footer a, [data-theme="light"] .enhanced-footer li, [data-theme="light"] .enhanced-footer ul,
+[data-theme="light"] .enhanced-footer button, [data-theme="light"] .enhanced-footer input,
+html[data-theme="dark"] .enhanced-footer *, html[data-theme="light"] .enhanced-footer * {
+  background-color: inherit;
+  color: inherit;
+}
+
 .enhanced-footer.dark-theme,
 .enhanced-footer.light-theme {
   background: #ffffff !important;
   color: #111111 !important;
 }
 
-/* Absolute protection against any theme changes */
 [data-theme="dark"] .enhanced-footer.dark-theme,
-html[data-theme="dark"] .enhanced-footer.dark-theme {
-  background: #ffffff !important;
-  color: #111111 !important;
-}
-
+html[data-theme="dark"] .enhanced-footer.dark-theme,
 [data-theme="light"] .enhanced-footer.light-theme,
 html[data-theme="light"] .enhanced-footer.light-theme {
   background: #ffffff !important;
   color: #111111 !important;
 }
 
-/* Force all text elements to maintain their colors based on theme */
-.enhanced-footer.dark-theme h1,
-.enhanced-footer.dark-theme h2,
-.enhanced-footer.dark-theme h3,
-.enhanced-footer.dark-theme h4,
-.enhanced-footer.dark-theme h5,
-.enhanced-footer.dark-theme h6,
-.enhanced-footer.light-theme h1,
-.enhanced-footer.light-theme h2,
-.enhanced-footer.light-theme h3,
-.enhanced-footer.light-theme h4,
-.enhanced-footer.light-theme h5,
-.enhanced-footer.light-theme h6 {
+.enhanced-footer.dark-theme h1, .enhanced-footer.dark-theme h2, .enhanced-footer.dark-theme h3,
+.enhanced-footer.dark-theme h4, .enhanced-footer.dark-theme h5, .enhanced-footer.dark-theme h6,
+.enhanced-footer.light-theme h1, .enhanced-footer.light-theme h2, .enhanced-footer.light-theme h3,
+.enhanced-footer.light-theme h4, .enhanced-footer.light-theme h5, .enhanced-footer.light-theme h6 {
   color: #111111 !important;
 }
 
-.enhanced-footer.dark-theme p,
-.enhanced-footer.dark-theme span,
-.enhanced-footer.dark-theme div,
-.enhanced-footer.dark-theme li,
-.enhanced-footer.light-theme p,
-.enhanced-footer.light-theme span,
-.enhanced-footer.light-theme div,
-.enhanced-footer.light-theme li {
+.enhanced-footer.dark-theme p, .enhanced-footer.dark-theme span, .enhanced-footer.dark-theme div, .enhanced-footer.dark-theme li,
+.enhanced-footer.light-theme p, .enhanced-footer.light-theme span, .enhanced-footer.light-theme div, .enhanced-footer.light-theme li {
   color: #111111 !important;
 }
 
@@ -194,17 +102,10 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   color: #000000 !important;
 }
 
-/* Specific protection for footer elements */
 .enhanced-footer.dark-theme .footer-brand-title,
-.enhanced-footer.light-theme .footer-brand-title {
-  color: #111111 !important;
-}
-
+.enhanced-footer.light-theme .footer-brand-title,
 .enhanced-footer.dark-theme .footer-column-title,
-.enhanced-footer.light-theme .footer-column-title {
-  color: #111111 !important;
-}
-
+.enhanced-footer.light-theme .footer-column-title,
 .enhanced-footer.dark-theme .footer-link,
 .enhanced-footer.light-theme .footer-link {
   color: #111111 !important;
@@ -216,10 +117,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 }
 
 [data-theme="dark"] .enhanced-footer .footer-copyright,
-[data-theme="light"] .enhanced-footer .footer-copyright {
-  color: #111111 !important;
-}
-
+[data-theme="light"] .enhanced-footer .footer-copyright,
 [data-theme="dark"] .enhanced-footer .legal-link,
 [data-theme="light"] .enhanced-footer .legal-link {
   color: #111111 !important;
@@ -230,113 +128,45 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   color: #000000 !important;
 }
 
-/* Add animated background pattern */
-.enhanced-footer::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: none;
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* Additional floating particles */
-.enhanced-footer::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: none;
-  opacity: 0;
-  pointer-events: none;
-}
-
-@keyframes backgroundShift {
-
-  0%,
-  100% {
-    opacity: 1;
-    transform: translateX(0px) translateY(0px) scale(1);
-  }
-
-  25% {
-    opacity: 0.8;
-    transform: translateX(30px) translateY(-20px) scale(1.02);
-  }
-
-  50% {
-    opacity: 0.9;
-    transform: translateX(-10px) translateY(30px) scale(0.98);
-  }
-
-  75% {
-    opacity: 0.85;
-    transform: translateX(-25px) translateY(-15px) scale(1.01);
-  }
-}
-
-@keyframes particleFloat {
-  0% {
-    transform: translateY(0px) translateX(0px);
-  }
-
-  33% {
-    transform: translateY(-10px) translateX(10px);
-  }
-
-  66% {
-    transform: translateY(5px) translateX(-5px);
-  }
-
-  100% {
-    transform: translateY(0px) translateX(0px);
-  }
-}
-
-/* NO THEME OVERRIDES - FOOTER STAYS THE SAME ALWAYS */
-
-.container {
+/* Scoped Utility Container */
+.enhanced-footer .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 /* Footer Hero Section */
-.footer-hero {
-  padding: 40px 0 30px;
+.enhanced-footer .footer-hero {
+  padding: 30px 0 20px !important; /* Reduced vertical padding */
   position: relative;
   background: #ffffff !important;
   color: #111111 !important;
 }
 
-.footer-hero-content {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: clamp(40px, 7vw, 120px);
-  row-gap: 18px;
-  margin-bottom: 30px;
+.enhanced-footer .footer-hero-content {
+  display: flex !important;
+  flex-direction: column !important; /* Stack items tightly */
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  row-gap: 16px !important; /* This directly controls the space between title and buttons */
+  margin-bottom: 15px !important;
   text-align: left;
 }
 
-.footer-logo-section {
-  margin-bottom: 16px;
+.enhanced-footer .footer-logo-section {
+  margin-bottom: 4px !important; /* Shrink margin below the logo */
 }
 
-.footer-logo {
+.enhanced-footer .footer-logo {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
 }
 
-.logo-container {
+.enhanced-footer .logo-container {
   width: 44px;
   height: 44px;
   background: #111111;
@@ -344,46 +174,19 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow:
-    0 4px 16px rgba(17, 17, 17, 0.16),
-    0 0 0 1px rgba(17, 17, 17, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.16), 0 0 0 1px rgba(17, 17, 17, 0.08);
   position: relative;
   transition: all 0.3s ease;
   cursor: pointer;
 }
 
-.logo-container::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 16px;
-  padding: 1px;
-  background: rgba(255, 255, 255, 0.12);
-  opacity: 0.25;
-}
-
-.logo-container:hover::before {
-  opacity: 0.35;
-}
-
-.logo-container:hover {
-  transform: translateY(-2px) scale(1.05);
-  box-shadow:
-    0 12px 40px rgba(17, 17, 17, 0.18),
-    0 0 0 1px rgba(17, 17, 17, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.24);
-}
-
-.footer-logo-img {
+.enhanced-footer .footer-logo-img {
   width: 24px;
   height: 24px;
   border-radius: 6px;
-  filter: brightness(1.1) contrast(1.1);
 }
 
-/* Brand Header Styling */
-.footer-brand-header {
+.enhanced-footer .footer-brand-header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -391,33 +194,29 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   margin-top: 8px;
 }
 
-.footer-hero-left {
+.enhanced-footer .footer-hero-left {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  flex: 1 1 520px;
+  gap: 8px !important; /* Reduce gap between logo and "Collaboration first..." */
+  flex: 0 1 auto !important; /* Prevent it from expanding artificially */
   min-width: 0;
 }
 
-.footer-hero-right {
+.enhanced-footer .footer-hero-right {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-  margin-left: auto;
+  justify-content: flex-start !important; /* Pull to the left alongside text */
+  flex: 0 1 auto !important;
+  margin-left: 0 !important; /* Remove desktop auto-margin offset pushing it away */
+  width: 100%;
 }
 
-.footer-cta-buttons {
+.enhanced-footer .footer-cta-buttons {
   display: flex;
   gap: 12px;
   align-items: center;
 }
-
-.footer-cta-buttons .btn {
-  gap: 8px;
-}
-
-.btn {
+.enhanced-footer .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -429,468 +228,93 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   white-space: nowrap;
 }
 
-.footer-brand-title {
+.enhanced-footer .footer-brand-title {
   font-size: 28px;
   font-weight: 700;
   color: #111111 !important;
-  -webkit-background-clip: initial;
-  -webkit-text-fill-color: #111111 !important;
-  background: none !important;
-  background-clip: initial;
   letter-spacing: -1px;
   margin: 0;
-  font-family:
-    "Inter",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-}
-
-.footer-trust-badge {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-}
-
-.trust-stars {
-  display: flex;
-  gap: 1px;
-}
-
-.trust-stars .star {
-  font-size: 14px;
-  color: #fbbf24;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  animation: starGlow 2s ease-in-out infinite alternate;
-}
-
-.trust-stars .star:nth-child(1) {
-  animation-delay: 0s;
-}
-
-.trust-stars .star:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.trust-stars .star:nth-child(3) {
-  animation-delay: 0.2s;
-}
-
-.trust-stars .star:nth-child(4) {
-  animation-delay: 0.3s;
-}
-
-.trust-stars .star:nth-child(5) {
-  animation-delay: 0.4s;
-}
-
-.trust-text {
-  font-size: 12px;
-  color: #111111;
-  font-weight: 500;
-  text-align: center;
 }
 
-@keyframes starGlow {
-  0% {
-    opacity: 0.8;
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-.footer-rating {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  transition: all 0.3s ease;
-}
-
-.footer-rating:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(102, 126, 234, 0.3);
-  transform: translateY(-1px);
-}
-
-.stars {
-  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-size: 18px;
-  letter-spacing: 2px;
-  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
-  animation: starGlow 3s ease-in-out infinite;
-}
-
-@keyframes starGlow {
-
-  0%,
-  100% {
-    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
-  }
-
-  50% {
-    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6));
-  }
-}
-
-.rating-text {
-  font-size: 13px;
-  color: #111111;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.footer-hero-text h1 {
+.enhanced-footer .footer-hero-text h1 {
   font-size: 32px;
   font-weight: 900;
   color: #111111 !important;
-  -webkit-background-clip: initial;
-  -webkit-text-fill-color: #111111 !important;
-  background: none !important;
-  background-clip: initial;
   margin: 0 0 16px 0;
   line-height: 1.1;
   letter-spacing: -0.03em;
   max-width: 600px;
-  text-shadow: none;
-  position: relative;
-  animation: none;
-}
-
-.footer-hero-text p {
-  font-size: 16px;
-  color: #111111 !important;
-  line-height: 1.6;
-  max-width: 680px;
-  margin: 0;
-  font-weight: 500;
-  text-shadow: none;
-  opacity: 0.82;
-}
-
-@media (max-width: 880px) {
-  .footer-hero-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    row-gap: 12px;
-  }
-
-  .footer-hero-right {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    margin-top: 12px;
-  }
-
-  .footer-hero-left {
-    width: 100%;
-  }
-}
-
-/* Stats Section */
-.footer-stats {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-top: 30px;
-  margin-bottom: 36px;
-  /* extra separation from footer links */
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 20px 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(20px);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  cursor: help;
-}
-
-.stat-item::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent);
-  transition: left 0.6s ease;
-}
-
-/* Subtle hover effects for stat boxes - informative but not clickable */
-.stat-item:hover {
-  transform: translateY(-4px) scale(1.02);
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(102, 126, 234, 0.3);
-  box-shadow:
-    0 12px 30px rgba(0, 0, 0, 0.2),
-    0 4px 15px rgba(102, 126, 234, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  cursor: default;
-}
-
-.stat-item:hover::before {
-  left: 100%;
-}
-
-.stat-item:focus {
-  outline: none;
-  animation: statGlow 2s infinite;
-}
-
-.stat-item:focus-visible {
-  outline: 2px solid rgba(102, 126, 234, 0.6);
-  outline-offset: 2px;
-}
-
-.stat-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  transition: all 0.3s ease;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-}
-
-.stat-icon svg {
-  width: 28px;
-  height: 28px;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-}
-
-.stat-item:hover .stat-icon {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
-  filter: brightness(1.1) saturate(1.2);
-}
-
-.stat-icon-learners {
-  background: #111111;
-  color: white;
-}
-
-.stat-icon-tutorials {
-  background: #374151;
-  color: white;
-}
-
-.stat-icon-success {
-  background: #6b7280;
-  color: white;
-}
-
-.stat-icon-support {
-  background: #9ca3af;
-  color: white;
-}
-
-.stat-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.stat-number {
-  font-size: 28px;
-  font-weight: 900;
-  background: none;
-  -webkit-background-clip: initial;
-  -webkit-text-fill-color: #111111;
-  background-clip: initial;
-  color: #111111;
-  line-height: 1;
-  text-shadow: none;
-  transition: all 0.3s ease;
-}
-
-.stat-item:hover .stat-number {
-  transform: scale(1.05);
-  background: none;
-  -webkit-background-clip: initial;
-  -webkit-text-fill-color: #111111;
-  background-clip: initial;
-  color: #111111;
-  text-shadow: none;
-}
-
-.stat-label {
-  font-size: 13px;
-  color: #111111;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  transition: color 0.3s ease;
-}
-
-.stat-item:hover .stat-label {
-  color: #111111;
-  text-shadow: none;
 }
 
-/* Links Section */
-.footer-links-section {
+/* Links Grid System Section */
+.enhanced-footer .footer-links-section {
   padding: 56px 0;
-  /* more padding above and below the divider */
   background: #ffffff;
   border-top: 1px solid rgba(17, 17, 17, 0.08);
 }
 
-.footer-links-grid {
+.enhanced-footer .footer-links-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1.2fr;
   gap: 40px;
   align-items: start;
-  /* prevent equal-height stretch; use content height */
 }
 
-.footer-column {
+.enhanced-footer .footer-column {
   display: flex;
   flex-direction: column;
   padding: 24px;
   border-radius: 16px;
   background: #ffffff;
   border: 1px solid rgba(17, 17, 17, 0.08);
-  backdrop-filter: none;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  overflow: visible;
   align-self: start;
-  /* prevent stretching to tallest column height */
-}
-
-.footer-column::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: none;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  pointer-events: none;
-}
-
-.footer-column:hover::before {
-  opacity: 1;
 }
 
-.footer-column:hover {
+.enhanced-footer .footer-column:hover {
   background: #f9fafb;
   border-color: rgba(17, 17, 17, 0.12);
   transform: translateY(-4px);
-  box-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.08),
-    0 6px 20px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
 }
 
-.footer-column-title {
+.enhanced-footer .footer-column-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 18px;
-  /* slightly bigger to stand out */
   font-weight: 700;
   color: #111111;
   margin-bottom: 20px;
-  letter-spacing: -0.01em;
-  text-shadow: none;
 }
 
-.footer-icon {
+.enhanced-footer .footer-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  line-height: 0;
-  color: currentColor;
-}
-
-.footer-icon svg {
-  width: 100%;
-  height: 100%;
-  fill: none !important;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
 }
 
-.column-icon {
+.enhanced-footer .column-icon {
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  color: #111111;
+  display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  color: #111111;
-}
-
-.column-icon .footer-icon {
-  width: 12px;
-  height: 12px;
-}
-
-.resources-icon {
-  background: #111111;
-}
-
-.company-icon {
-  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
-}
-
-.support-icon {
-  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
-}
-
-.newsletter-icon {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 }
 
-.footer-links {
+.enhanced-footer .footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
-  /* increased vertical spacing for clarity */
-  overflow: visible;
 }
 
-.footer-link {
+.enhanced-footer .footer-link {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -900,244 +324,62 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   font-weight: 500;
   padding: 14px 24px 14px 18px;
   border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  position: relative;
+  transition: all 0.3s ease;
   margin: 8px 0;
-  /* increased vertical breathing room per link */
   border: 1px solid rgba(17, 17, 17, 0.08);
-  overflow: visible;
-  backdrop-filter: none;
   background: #ffffff;
   white-space: nowrap;
-  /* keep items like "Contact Us" on one line */
-}
-
-.footer-link::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 100%;
-  background: linear-gradient(135deg,
-      rgba(102, 126, 234, 0.15) 0%,
-      rgba(118, 75, 162, 0.15) 50%,
-      rgba(240, 147, 251, 0.15) 100%);
-  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border-radius: 12px;
-  z-index: 0;
-}
-
-.footer-link::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 100%;
-  background: linear-gradient(90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent);
-  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border-radius: 12px;
-  z-index: 1;
-  text-decoration: none;
-}
-
-.footer-link:hover::before {
-  width: 100%;
 }
 
-.footer-link:hover::after {
-  width: 100%;
+.enhanced-footer .footer-link:hover {
+  background: #f9fafb;
+  transform: translateX(6px);
 }
 
-.footer-link:hover {
-  color: #111111;
-  background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.12);
-  transform: translateX(6px) translateY(-2px) scale(1.01);
-  box-shadow:
-    0 8px 25px rgba(0, 0, 0, 0.08),
-    0 4px 15px rgba(0, 0, 0, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  backdrop-filter: none;
-  text-decoration: none;
-}
-
-.footer-link:hover span:not(.link-icon):not(.link-badge) {
-  color: #111111;
-  text-shadow: none;
-}
-
-.footer-link:active {
-  transform: translateX(6px) translateY(-1px) scale(0.98);
-  transition: all 0.1s ease;
-}
-
-.footer-link:focus {
-  outline: none;
-  border-color: rgba(17, 17, 17, 0.18);
-  box-shadow:
-    0 0 0 3px rgba(17, 17, 17, 0.08),
-    0 8px 25px rgba(0, 0, 0, 0.08);
-  animation: linkPulse 2s infinite;
-}
-
-.footer-link:focus-visible {
-  outline: 2px solid rgba(17, 17, 17, 0.18);
-  outline-offset: 2px;
-}
-
-.link-icon {
-  width: 16px;
-  height: 16px;
-  opacity: 0.7;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  z-index: 2;
-  position: relative;
-  color: #111111;
-}
-
-.footer-link:hover .link-icon {
-  opacity: 1;
-  color: #111111;
-  transform: scale(1.12) translateZ(0);
-  text-decoration: none;
-}
-
-.link-badge {
+.enhanced-footer .link-badge {
   display: inline-flex;
-  /* ensure consistent sizing */
   align-items: center;
   justify-content: center;
   height: 28px;
-  /* consistent badge height */
-  color: #111111;
   font-size: 11px;
   font-weight: 600;
   padding: 0 10px;
-  /* horizontal padding only to keep size consistent */
-  color: #111111;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
   margin-left: auto;
-  margin-right: 4px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  position: relative;
-  z-index: 2;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   white-space: nowrap;
-  flex-shrink: 0;
-  min-width: fit-content;
 }
 
-.link-badge.popular {
-  background: #111111;
-  color: white;
-}
-
-.footer-link:hover .link-badge.popular {
-  background: #374151;
-  transform: scale(1.05) translateY(-1px);
-  box-shadow: 0 3px 12px rgba(17, 17, 17, 0.18);
-}
-
-.link-badge.new {
-  background: #111111;
-  color: white;
-}
-
-.footer-link:hover .link-badge.new {
-  background: #374151;
-  transform: scale(1.1) translateY(-1px);
-  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.18);
-}
-
-.link-badge.hot {
-  background: #111111;
-  color: white;
-}
-
-.footer-link:hover .link-badge.hot {
-  background: #374151;
-  transform: scale(1.1) translateY(-1px);
-  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.18);
-}
-
-.link-badge.hiring {
-  background: #111111;
-  color: white;
-}
-
-.footer-link:hover .link-badge.hiring {
-  background: #374151;
-  transform: scale(1.1) translateY(-1px);
-  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.18);
-}
-
-.link-badge.active {
-  background: #111111;
-  color: white;
-}
-
-.footer-link:hover .link-badge.active {
-  background: #374151;
-  transform: scale(1.1) translateY(-1px);
-  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.18);
-}
-
-/* Newsletter Column */
-.newsletter-column {
+/* Newsletter Components */
+.enhanced-footer .newsletter-column {
   background: #ffffff;
   padding: 24px;
   border-radius: 16px;
   border: 1px solid rgba(17, 17, 17, 0.08);
-  backdrop-filter: none;
 }
 
-.newsletter-description {
+.enhanced-footer .newsletter-description {
   color: #111111;
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 20px;
 }
 
-.newsletter-form {
+.enhanced-footer .newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin-bottom: 16px;
 }
 
-.newsletter-input {
+.enhanced-footer .newsletter-input {
   padding: 14px 18px;
-  /* increased for easier tapping */
   border: 1px solid rgba(17, 17, 17, 0.12);
   border-radius: 10px;
   background: #ffffff;
   color: #111111;
   font-size: 14px;
-  font-weight: 400;
-  backdrop-filter: none;
-  transition: all 0.3s ease;
-}
-
-.newsletter-input:focus {
-  outline: none;
-  border-color: #111111;
-  background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
 }
 
-.newsletter-input::placeholder {
-  color: #6b7280;
-}
-
-.newsletter-button {
+.enhanced-footer .newsletter-button {
   padding: 16px 28px;
-  /* slightly larger for touch */
   background: #111111;
   color: white;
   border: none;
@@ -1145,156 +387,28 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.16);
-  position: relative;
-  overflow: hidden;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.newsletter-button::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: none;
-  transition: left 0.6s ease;
+  transition: all 0.4s ease;
 }
 
-.newsletter-button:hover::before {
-  left: 100%;
-}
-
-.newsletter-button:hover {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.18);
-}
-
-.newsletter-button:active {
-  transform: translateY(0) scale(0.98);
-}
-
-.newsletter-button.subscribed {
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-  cursor: default;
-  animation: successPulse 0.6s ease-out;
-}
-
-@keyframes successPulse {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.05);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.newsletter-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-
-.newsletter-stats {
+.enhanced-footer .newsletter-stats {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 24px;
+  margin-top: 12px;
 }
 
-.newsletter-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: #111111;
-  font-weight: 400;
-}
-
-.newsletter-stat-icon {
-  width: 14px;
-  height: 14px;
-  color: #111111;
-}
-
-/* Quick Links Section */
-.quick-links-section {
-  margin-top: 24px;
-}
-
-/* Newsletter-specific quick links styling */
-.newsletter-quick-links {
+.enhanced-footer .newsletter-quick-links {
   margin-top: 28px;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 12px;
   padding: 18px 0 0 0;
-  box-shadow: none;
 }
 
-.newsletter-quick-links .quick-links-title {
-  color: #111111;
-  font-size: 13px;
-  margin-bottom: 12px;
-  font-weight: 700;
-  letter-spacing: 0.7px;
-  text-align: left;
-}
-
-.newsletter-quick-links .quick-links-list {
-  gap: 10px;
-}
-
-.newsletter-quick-links .quick-link {
-  background: #ffffff;
-  border: 1px solid rgba(17, 17, 17, 0.08);
-  border-radius: 8px;
-  color: #111111;
-  font-size: 13px;
-  padding: 10px 14px;
-  margin-bottom: 0;
-  box-shadow: none;
-  transition:
-    background 0.2s,
-    color 0.2s;
-}
-
-.newsletter-quick-links .quick-link:hover {
-  background: #f9fafb;
-  color: #111111;
-}
-
-.quick-links-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #111111;
-  margin-bottom: 16px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.links-icon {
-  width: 14px;
-  height: 14px;
-  color: #111111;
-}
-
-.quick-links-list {
+.enhanced-footer .quick-links-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.quick-link {
+.enhanced-footer .quick-link {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1305,106 +419,41 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   color: #111111;
   text-decoration: none;
   font-size: 13px;
-  font-weight: 500;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-.quick-link::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: none;
-  transition: left 0.6s ease;
-}
-
-.quick-link::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  background: none;
-  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 10px;
+  transition: all 0.4s ease;
 }
 
-.quick-link:hover::before {
-  left: 100%;
-}
-
-.quick-link:hover::after {
-  width: 100%;
-}
-
-.quick-link:hover {
+.enhanced-footer .quick-link:hover {
   background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.12);
-  color: #111111;
-  transform: translateY(-3px) translateX(2px);
-  box-shadow:
-    0 8px 25px rgba(0, 0, 0, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.04);
-  text-decoration: none;
+  transform: translateY(-3px);
 }
 
-.quick-link-icon {
-  width: 14px;
-  height: 14px;
-  opacity: 0.8;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
-  position: relative;
-  color: #111111;
-}
-
-.quick-link:hover .quick-link-icon {
-  opacity: 1;
-  color: #111111;
-  transform: scale(1.12);
-}
-
-/* Bottom Section */
-.footer-bottom {
+/* Bottom Copyright and Legal Row */
+.enhanced-footer .footer-bottom {
   padding: 16px 0;
   border-top: 1px solid rgba(17, 17, 17, 0.08);
   background: #ffffff;
-  backdrop-filter: none;
 }
 
-.footer-bottom-content {
+.enhanced-footer .footer-bottom-content {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 24px;
-  padding: 0 16px;
 }
 
-.footer-bottom-left {
+.enhanced-footer .footer-bottom-left {
   display: flex;
   align-items: center;
   gap: 24px;
 }
 
-.social-label {
-  font-size: 14px;
-  color: #111111;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.footer-social-links {
+.enhanced-footer .footer-social-links {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
-.social-link {
+.enhanced-footer .social-link {
   width: 48px;
   height: 48px;
   border-radius: 14px;
@@ -1412,681 +461,218 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   align-items: center;
   justify-content: center;
   color: #111111;
-  text-decoration: none;
   border: 1px solid rgba(17, 17, 17, 0.1);
   background: #ffffff;
-  backdrop-filter: none;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-.social-link::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: none;
-  transition: left 0.6s ease;
-}
-
-.social-link:hover::before {
-  left: 100%;
-}
-
-.social-link svg {
-  width: 22px;
-  height: 22px;
-  transition: all 0.3s ease;
-  filter: none;
+  transition: all 0.4s ease;
 }
 
-.social-link:hover {
-  transform: translateY(-4px) scale(1.05);
-  color: #111111;
-  border-color: rgba(17, 17, 17, 0.15);
-  background: #f9fafb;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
-}
-
-.social-link:hover svg {
-  transform: scale(1.1);
-}
-
-.social-link.github:hover {
-  background: #ffffff;
-  border-color: rgba(17, 17, 17, 0.15);
-  color: #111111;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
-}
-
-.social-link.twitter:hover {
-  background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.15);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
-}
-
-.social-link.instagram:hover {
-  background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.15);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
-}
-
-.social-link.linkedin:hover {
+.enhanced-footer .social-link:hover {
+  transform: translateY(-4px);
   background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.15);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
 }
 
-.footer-bottom-center {
-  display: flex;
-  justify-content: center;
-}
-
-.footer-legal-links {
+.enhanced-footer .footer-legal-links {
   display: flex;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap;
-  justify-content: center;
 }
 
-.legal-link {
+.enhanced-footer .legal-link {
   color: #111111;
   text-decoration: none !important;
   font-size: 14px;
   font-weight: 500;
   padding: 10px 16px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  backdrop-filter: none;
-}
-
-.legal-link::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 100%;
-  background: none;
-  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  z-index: 0;
-}
-
-.legal-link:hover::before {
-  width: 100%;
 }
 
-.legal-link:hover {
-  color: #111111;
-  background: #f9fafb;
-  border-color: rgba(17, 17, 17, 0.12);
-  transform: translateY(-2px) scale(1.02);
-  box-shadow:
-    0 6px 20px rgba(0, 0, 0, 0.08),
-    0 2px 8px rgba(0, 0, 0, 0.04);
-  text-decoration: none;
-}
-
-.legal-link:focus {
-  outline: none;
-  border-color: rgba(17, 17, 17, 0.18);
-  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
-}
-
-.footer-bottom-right {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.footer-copyright {
+.enhanced-footer .footer-copyright {
   text-align: right;
   color: #111111;
   font-size: 14px;
-  line-height: 1.6;
-  font-weight: 500;
-}
-
-.newsletter-input.input-error {
-  border-color: #e53e3e;
-}
-
-.error-text {
-  margin-top: 4px;
-  font-size: 0.85rem;
-  color: #e53e3e;
 }
 
-/* Target common text elements and links inside the footer */
-.enhanced-footer h1,
-.enhanced-footer h2,
-.enhanced-footer h3,
-.enhanced-footer h4,
-.enhanced-footer .newsletter-stat,
-.enhanced-footer .toast-message,
-.enhanced-footer .error-text {
-  color: #111111;
-}
+/* ==========================================================================
+   CLEAN RESPONSIVE MEDIA QUERIES (ISOLATED & UN-TRAFFICKED)
+   ========================================================================== */
 
-.enhanced-footer .stat-label,
-.enhanced-footer .stat-number,
-.enhanced-footer .footer-column-title,
-.enhanced-footer .footer-link,
-.enhanced-footer .quick-link,
-.enhanced-footer .legal-link,
-.enhanced-footer .newsletter-description,
-.enhanced-footer .newsletter-stat,
-.enhanced-footer .newsletter-input,
-.enhanced-footer .newsletter-button,
-.enhanced-footer .footer-copyright,
-.enhanced-footer .social-label {
-  color: #111111 !important;
-  -webkit-text-fill-color: #111111 !important;
-}
-
-/* Responsive Design */
 @media (max-width: 1200px) {
-  .footer-links-grid {
+  .enhanced-footer .footer-links-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 32px;
-    margin-top: 30px;
-    margin-bottom: 36px;
-    /* extra separation from footer links */
-
-    .newsletter-column {
-      grid-column: span 2;
-    }
   }
-
-  @media (max-width: 1024px) {
-    .footer-hero-text h1 {
-      font-size: 32px;
-    }
-
-    .footer-stats {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 20px;
-    }
-
-    .footer-links-grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 28px;
-    }
-
-    .newsletter-column {
-      grid-column: span 2;
-      margin-top: 20px;
-    }
+  .enhanced-footer .newsletter-column {
+    grid-column: span 2;
   }
+}
 
-  @media (max-width: 768px) {
-    .container {
-      padding: 0 16px;
-    }
-
-    .footer-hero {
-      padding: 40px 0 30px;
-    }
-
-    .footer-hero-text h1 {
-      font-size: 28px;
-      margin-bottom: 12px;
-    }
-
-    .footer-hero-text p {
-      font-size: 15px;
-      line-height: 1.6;
-    }
-
-    .footer-stats {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 16px;
-      margin-top: 30px;
-    }
-
-    .stat-item {
-      padding: 20px 12px;
-    }
-
-    .stat-number {
-      font-size: 22px;
-    }
-
-    .stat-label {
-      font-size: 11px;
-    }
-
-    .footer-links-section {
-      padding: 40px 0;
-    }
-
-    .footer-links-grid {
-      grid-template-columns: 1fr;
-      gap: 24px;
-    }
-
-    .footer-column {
-      background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      padding: 24px;
-      backdrop-filter: blur(20px);
-      transition: all 0.3s ease;
-      overflow: visible;
-    }
-
-    .footer-column:hover {
-      background: rgba(255, 255, 255, 0.08);
-      border-color: rgba(255, 255, 255, 0.15);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-    }
-
-    .footer-column-title {
-      text-align: center;
-      margin-bottom: 20px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .footer-links {
-      gap: 8px;
-    }
-
-    .footer-link {
-      width: 100%;
-      justify-content: flex-start;
-      background: rgba(255, 255, 255, 0.02);
-      border: 1px solid rgba(255, 255, 255, 0.05);
-      border-radius: 10px;
-      margin: 0;
-      white-space: nowrap;
-      /* mobile-friendly single line; content fits */
-      text-decoration: none;
-    }
-
-    .footer-link:hover {
-      background: rgba(255, 255, 255, 0.08);
-      border-color: rgba(255, 255, 255, 0.15);
-      transform: translateX(4px);
-    }
-
-    .newsletter-column {
-      padding: 24px;
-      grid-column: span 1;
-      margin-top: 0;
-      background: rgba(255, 255, 255, 0.03);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-      border-radius: 16px;
-      backdrop-filter: blur(20px);
-    }
-
-    .footer-bottom-content {
-      grid-template-columns: 1fr;
-      gap: 16px;
-      text-align: center;
-      padding: 0 12px;
-    }
-
-    .footer-bottom {
-      padding: 12px 0;
-    }
-
-    .footer-bottom-left {
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-
-    .footer-legal-links {
-      gap: 16px;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .footer-bottom-right {
-      justify-content: center;
-    }
-
-    .footer-copyright {
-      text-align: center;
-    }
-
-    /* Improve touch targets on mobile */
-    .footer-link {
-      padding: 14px 18px;
-      margin: 4px 0;
-      font-size: 15px;
-    }
-
-    /* Optimize hover effects for mobile */
-    .footer-link:hover {
-      transform: translateX(4px) translateY(-1px) scale(1.01);
-      box-shadow:
-        0 6px 20px rgba(0, 0, 0, 0.15),
-        0 3px 10px rgba(102, 126, 234, 0.1);
-    }
-
-    .footer-link:hover .link-icon {
-      transform: scale(1.2) rotate(8deg);
-    }
-
-    /* Reduce animations on mobile for better performance */
-    .footer-link:hover span:not(.link-icon):not(.link-badge) {
-      animation: none;
-      background: #ffffff;
-      -webkit-background-clip: initial;
-      -webkit-text-fill-color: initial;
-      background-clip: initial;
-    }
-
-    .social-link {
-      width: 52px;
-      height: 52px;
-    }
-
-    .newsletter-button {
-      padding: 18px 24px;
-      /* larger CTA for mobile */
-      font-size: 15px;
-    }
-
-    .newsletter-input {
-      padding: 16px 18px;
-      font-size: 15px;
-      width: 100%;
-    }
+@media (max-width: 1024px) {
+  .enhanced-footer .footer-hero-text h1 {
+    font-size: 32px;
   }
-
-  @media (max-width: 480px) {
-    .footer-hero {
-      padding: 32px 0 24px;
-    }
-
-    .footer-hero-text h1 {
-      font-size: 24px;
-      line-height: 1.3;
-    }
-
-    .footer-stats {
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
-      margin-top: 24px;
-    }
-
-    .stat-item {
-      padding: 16px 8px;
-    }
-
-    .stat-number {
-      font-size: 18px;
-    }
-
-    .stat-label {
-      font-size: 10px;
-    }
-
-    .footer-links-section {
-      padding: 32px 0;
-    }
-
-    .footer-legal-links {
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .social-label {
-      display: none;
-    }
-
-    .footer-column {
-      padding: 20px;
-      border-radius: 12px;
-      overflow: visible;
-    }
-
-    .footer-column-title {
-      font-size: 1.1rem;
-      margin-bottom: 16px;
-    }
-
-    .footer-link {
-      padding: 12px 20px 12px 16px;
-      font-size: 14px;
-      border-radius: 8px;
-      overflow: visible;
-    }
-
-    .newsletter-column {
-      padding: 20px;
-      border-radius: 12px;
-    }
-
-    .newsletter-form {
-      gap: 10px;
-    }
-
-    .newsletter-button {
-      padding: 16px 20px;
-      /* slightly larger for very small screens */
-      font-size: 14px;
-      width: 100%;
-    }
-
-    .newsletter-input {
-      padding: 14px 16px;
-      font-size: 14px;
-      width: 100%;
-    }
-
-    .quick-links-list {
-      gap: 8px;
-    }
-
-    .quick-link {
-      padding: 10px 12px;
-      font-size: 12px;
-    }
-
-    /* Reduce animations on small screens for better performance */
-    .enhanced-footer::before,
-    .enhanced-footer::after {
-      animation-duration: 40s;
-    }
-
-    /* Mobile-optimized stat item hover effects */
-    .stat-item:hover {
-      transform: translateY(-2px) scale(1.01);
-      box-shadow:
-        0 8px 20px rgba(0, 0, 0, 0.15),
-        0 2px 8px rgba(102, 126, 234, 0.1);
-    }
-
-    .stat-item:hover .stat-icon {
-      transform: scale(1.05) rotate(3deg);
-    }
-
-    .stat-item:hover .stat-number {
-      transform: scale(1.02);
-    }
-
-    .footer-link:hover {
-      transform: translateX(2px);
-    }
+  .enhanced-footer .footer-links-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 28px;
   }
-
-  /* Animation */
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  .enhanced-footer .newsletter-column {
+    grid-column: span 2;
+    margin-top: 20px;
   }
+}
 
-  .enhanced-footer * {
-    animation: fadeInUp 0.6s ease-out;
+@media (max-width: 880px) {
+  .enhanced-footer .footer-hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 12px;
   }
-
-  .stat-item:nth-child(1) {
-    animation-delay: 0.1s;
+  .enhanced-footer .footer-hero-right {
+    width: 100%;
+    justify-content: flex-start;
+    margin-top: 12px;
   }
-
-  .stat-item:nth-child(2) {
-    animation-delay: 0.2s;
+  .enhanced-footer .footer-hero-left {
+    width: 100%;
   }
+}
 
-  .stat-item:nth-child(3) {
-    animation-delay: 0.3s;
+@media (max-width: 768px) {
+  .enhanced-footer .container {
+    padding: 0 16px;
   }
-
-  .stat-item:nth-child(4) {
-    animation-delay: 0.4s;
+  .enhanced-footer .footer-hero {
+    padding: 30px 0 20px !important;
   }
-
-  /* Toast Notification Styles */
-  .newsletter-toast {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 9999;
-    animation: slideIn 0.3s ease-out;
-    isolation: isolate;
+  .enhanced-footer .footer-hero-text h1 {
+    font-size: 26px;
+    margin-bottom: 12px;
   }
-
-  .toast-content {
-    display: flex;
-    align-items: center;
-    background: #ffffff !important;
-    /* solid white */
-    border-radius: 8px;
-    padding: 16px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    border-left: 4px solid #4caf50;
-    max-width: 350px;
-    opacity: 1 !important;
+  .enhanced-footer .footer-links-section {
+    padding: 40px 0;
   }
-
-  .toast-icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 12px;
-    color: #111111;
+  .enhanced-footer .footer-links-grid {
+    grid-template-columns: 1fr !important;
+    gap: 24px;
+  }
+  .enhanced-footer .footer-column {
+    padding: 24px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .enhanced-footer .newsletter-column {
+    grid-column: span 1 !important;
+  }
+  .enhanced-footer .footer-bottom-content {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    text-align: center;
+  }
+  .enhanced-footer .footer-bottom-left, 
+  .enhanced-footer .footer-legal-links, 
+  .enhanced-footer .footer-bottom-right {
+    justify-content: center;
   }
+  .enhanced-footer .footer-copyright {
+    text-align: center;
+  }
+  .enhanced-footer .footer-link {
+    white-space: normal;
+  }
+}
 
-  .toast-message h4 {
-    margin: 0 0 4px 0;
-    font-size: 16px;
-    color: #2c3e50;
+/* Micro-responsive fixes targeting screens down to Mobile S (320px) */
+@media (max-width: 480px) {
+  .enhanced-footer .footer-hero {
+    padding: 20px 0 12px !important;
+  }
+  
+  .enhanced-footer .footer-hero-content {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    row-gap: 12px !important;
+    margin-bottom: 12px !important;
+    text-align: center !important;
   }
 
-  .toast-message p {
-    margin: 0;
-    font-size: 14px;
-    color: #7f8c8d;
+  .enhanced-footer .footer-logo-section {
+    margin-bottom: 4px !important;
   }
 
-  .toast-close {
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    margin-left: 16px;
-    color: #95a5a6;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
+  .enhanced-footer .footer-logo {
+    justify-content: center !important;
+    gap: 8px !important;
   }
 
-  .toast-close:hover {
-    background: #f8f9fa;
-    color: #2c3e50;
+  .enhanced-footer .logo-container {
+    width: 36px !important;
+    height: 36px !important;
   }
 
-  @keyframes slideIn {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
+  .enhanced-footer .footer-logo-img {
+    width: 20px !important;
+    height: 20px !important;
+  }
 
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
+  .enhanced-footer .footer-brand-title {
+    font-size: 20px !important;
   }
 
-  @media (max-width: 768px) {
-    .newsletter-toast {
-      bottom: 10px;
-      right: 10px;
-      left: 10px;
-    }
+  .enhanced-footer .footer-hero-text h1 {
+    font-size: 19px !important;
+    line-height: 1.3 !important;
+    margin-bottom: 8px !important;
+  }
 
-    .toast-content {
-      max-width: none;
-    }
+  .enhanced-footer .footer-hero-right {
+    width: 100% !important;
+    margin-left: 0 !important;
+    justify-content: center !important;
   }
 
-  /* Force solid white for heading text that use background-clip gradients (excluding stat-number) */
-  .enhanced-footer h1,
-  .enhanced-footer h2,
-  .enhanced-footer h3,
-  .enhanced-footer h4,
-  .enhanced-footer h5,
-  .enhanced-footer h6 {
-    color: #111111 !important;
-    -webkit-text-fill-color: #111111 !important;
-    /* Safari/Chrome */
-    -webkit-background-clip: initial !important;
-    background-clip: initial !important;
-    background-image: none !important;
-    background: none !important;
-    text-shadow: none !important;
+  .enhanced-footer .footer-cta-buttons {
+    flex-direction: column !important;
+    width: 100% !important;
+    gap: 8px !important;
+    padding: 0 4px !important;
+    box-sizing: border-box !important;
   }
 
-  /* Ensure regular text and links stay black as well */
-  .enhanced-footer,
-  .enhanced-footer p,
-  .enhanced-footer span,
-  .enhanced-footer a,
-  .enhanced-footer .stat-label,
-  .enhanced-footer .newsletter-description,
-  .enhanced-footer .newsletter-stat,
-  .enhanced-footer .footer-link,
-  .enhanced-footer .quick-link,
-  .enhanced-footer .legal-link {
-    color: #111111 !important;
-    -webkit-text-fill-color: #111111 !important;
+  .enhanced-footer .btn {
+    width: 100% !important;
+    padding: 12px 16px !important;
+    box-sizing: border-box !important;
+    white-space: normal !important;
+    justify-content: center !important;
   }
 
-  .enhanced-footer .footer-hero {
-    background: #ffffff !important;
-    color: #111111 !important;
+  .enhanced-footer .footer-legal-links {
+    flex-direction: column !important;
+    gap: 12px !important;
+    align-items: center !important;
   }
 
-  .enhanced-footer .footer-brand-name,
-  .enhanced-footer .footer-brand-title,
-  .enhanced-footer .footer-hero-text h1,
-  .enhanced-footer .footer-hero-text p {
-    color: #111111 !important;
-    -webkit-background-clip: initial !important;
-    background-clip: initial !important;
-    -webkit-text-fill-color: #111111 !important;
-    text-shadow: none !important;
+  .enhanced-footer .social-label {
+    display: none !important;
   }
 }
 
+/* Toast Component Styles */
+.newsletter-toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+}
+
+.toast-content {
+  display: flex;
+  align-items: center;
+  background: #ffffff !important;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  border-left: 4px solid #4caf50;
+}
\ No newline at end of file
diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index a436b134..50e12566 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -267,10 +267,7 @@ export default function FooterLayout(): ReactNode {
                 </li>
                 <li>
                   <Link to="/careers" className="footer-link">
-                    <FooterIcon
-                      icon={BriefcaseBusiness}
-                      className="link-icon"
-                    />
+                    <FooterIcon icon={BriefcaseBusiness} className="link-icon" />
                     Careers
                     <span className="link-badge hiring">We're Hiring!</span>
                   </Link>
@@ -289,7 +286,6 @@ export default function FooterLayout(): ReactNode {
                 </li>
               </ul>
             </div>
-
             {/* Support Column */}
             <div className="footer-column">
               <h3 className="footer-column-title">

From 425618a57f1056453134d2c0c55053060b66b034 Mon Sep 17 00:00:00 2001
From: Shruti <shrutinarsulwar@gmail.com>
Date: Sun, 31 May 2026 13:58:16 +0530
Subject: [PATCH 2/4] responsiveness of humburger menu is updated

---
 src/pages/dashboard/dashboard.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css
index 0a7b26f0..26a961cc 100644
--- a/src/pages/dashboard/dashboard.css
+++ b/src/pages/dashboard/dashboard.css
@@ -671,12 +671,13 @@
     display: none;
   }
 
-  .dashboard-menu-btn {
-    display: block;
+  .dashboard-menu-btn,
+  .dashboard-mobile-menu {
+    display: none !important;
   }
 
   .dashboard-main-content {
-    padding: 80px 20px 40px;
+    padding: 24px 20px 40px;
   }
 
   .dashboard-home-container {
@@ -750,7 +751,7 @@
 
 @media (max-width: 768px) {
   .dashboard-main-content {
-    padding: 80px 16px 40px;
+    padding: 24px 16px 40px;
   }
 
   .dashboard-stat-card {

From 1f5e855a92d4dcb6f9fd5dc17187f434e6082e72 Mon Sep 17 00:00:00 2001
From: Shruti <shrutinarsulwar@gmail.com>
Date: Sun, 31 May 2026 14:11:18 +0530
Subject: [PATCH 3/4] responsiveness of humburger menu is updated and
 readability of file improved

---
 docusaurus.config.ts                        | 19 +++++++
 src/theme/Footer/Layout/enhanced-footer.css | 60 ++++++++++++---------
 2 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d63eafb4..a77525e5 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -159,9 +159,28 @@ const config: Config = {
           position: "left",
         },
         {
+          type: "dropdown",
           to: "/dashboard",
           html: '<span class="nav-emoji">📊</span> Dashboard',
           position: "left",
+          items: [
+            {
+              label: "🏠 Home",
+              to: "/dashboard",
+            },
+            {
+              label: "💬 Discuss",
+              to: "/dashboard#discuss",
+            },
+            {
+              label: "🏆 Leaderboard",
+              to: "/dashboard#leaderboard",
+            },
+            {
+              label: "🎁 Giveaway",
+              to: "/dashboard/giveaway",
+            },
+          ],
         },
         {
           to: "/our-sponsors/",
diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css
index 43e4c982..401971bd 100644
--- a/src/theme/Footer/Layout/enhanced-footer.css
+++ b/src/theme/Footer/Layout/enhanced-footer.css
@@ -1,3 +1,4 @@
+
 /* Enhanced Footer Styles - COMPLETELY ISOLATED FROM THEME CHANGES */
 
 /* Theme-aware footer styles */
@@ -137,9 +138,11 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   box-sizing: border-box;
 }
 
-/* Footer Hero Section */
+/* ==========================================================================
+   FOOTER HERO SECTION (OPTIMIZED FLEX BOX LAYOUT)
+   ========================================================================== */
 .enhanced-footer .footer-hero {
-  padding: 30px 0 20px !important; /* Reduced vertical padding */
+  padding: 30px 0 20px !important;
   position: relative;
   background: #ffffff !important;
   color: #111111 !important;
@@ -147,16 +150,16 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 
 .enhanced-footer .footer-hero-content {
   display: flex !important;
-  flex-direction: column !important; /* Stack items tightly */
+  flex-direction: column !important;
   align-items: flex-start !important;
   justify-content: flex-start !important;
-  row-gap: 16px !important; /* This directly controls the space between title and buttons */
+  row-gap: 16px !important; /* Fixed the massive whitespace gap */
   margin-bottom: 15px !important;
   text-align: left;
 }
 
 .enhanced-footer .footer-logo-section {
-  margin-bottom: 4px !important; /* Shrink margin below the logo */
+  margin-bottom: 4px !important;
 }
 
 .enhanced-footer .footer-logo {
@@ -197,17 +200,17 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 .enhanced-footer .footer-hero-left {
   display: flex;
   flex-direction: column;
-  gap: 8px !important; /* Reduce gap between logo and "Collaboration first..." */
-  flex: 0 1 auto !important; /* Prevent it from expanding artificially */
+  gap: 8px !important;
+  flex: 0 1 auto !important;
   min-width: 0;
 }
 
 .enhanced-footer .footer-hero-right {
   display: flex;
   align-items: center;
-  justify-content: flex-start !important; /* Pull to the left alongside text */
+  justify-content: flex-start !important;
   flex: 0 1 auto !important;
-  margin-left: 0 !important; /* Remove desktop auto-margin offset pushing it away */
+  margin-left: 0 !important;
   width: 100%;
 }
 
@@ -216,6 +219,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   gap: 12px;
   align-items: center;
 }
+
 .enhanced-footer .btn {
   display: inline-flex;
   align-items: center;
@@ -246,7 +250,9 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   max-width: 600px;
 }
 
-/* Links Grid System Section */
+/* ==========================================================================
+   LINKS SECTION & GRID COLUMNS
+   ========================================================================== */
 .enhanced-footer .footer-links-section {
   padding: 56px 0;
   background: #ffffff;
@@ -348,7 +354,9 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   white-space: nowrap;
 }
 
-/* Newsletter Components */
+/* ==========================================================================
+   NEWSLETTER COLUMN & FORM COMPONENT STYLES
+   ========================================================================== */
 .enhanced-footer .newsletter-column {
   background: #ffffff;
   padding: 24px;
@@ -427,7 +435,9 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   transform: translateY(-3px);
 }
 
-/* Bottom Copyright and Legal Row */
+/* ==========================================================================
+   BOTTOM SECTION & LEGAL DATA
+   ========================================================================== */
 .enhanced-footer .footer-bottom {
   padding: 16px 0;
   border-top: 1px solid rgba(17, 17, 17, 0.08);
@@ -493,7 +503,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 }
 
 /* ==========================================================================
-   CLEAN RESPONSIVE MEDIA QUERIES (ISOLATED & UN-TRAFFICKED)
+   ISOLATED MEDIA QUERIES & RESPONSIVE COMPRESSION
    ========================================================================== */
 
 @media (max-width: 1200px) {
@@ -522,18 +532,18 @@ html[data-theme="light"] .enhanced-footer.light-theme {
 
 @media (max-width: 880px) {
   .enhanced-footer .footer-hero-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    row-gap: 12px;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    row-gap: 12px !important;
   }
   .enhanced-footer .footer-hero-right {
-    width: 100%;
-    justify-content: flex-start;
-    margin-top: 12px;
+    width: 100% !important;
+    justify-content: flex-start !important;
+    margin-top: 12px !important;
   }
   .enhanced-footer .footer-hero-left {
-    width: 100%;
+    width: 100% !important;
   }
 }
 
@@ -581,7 +591,7 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   }
 }
 
-/* Micro-responsive fixes targeting screens down to Mobile S (320px) */
+/* Specific micro-fixes down to 320px frame sizes */
 @media (max-width: 480px) {
   .enhanced-footer .footer-hero {
     padding: 20px 0 12px !important;
@@ -659,7 +669,9 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   }
 }
 
-/* Toast Component Styles */
+/* ==========================================================================
+   TOAST NOTIFICATION INJECTION RULES
+   ========================================================================== */
 .newsletter-toast {
   position: fixed;
   bottom: 20px;
@@ -675,4 +687,4 @@ html[data-theme="light"] .enhanced-footer.light-theme {
   padding: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   border-left: 4px solid #4caf50;
-}
\ No newline at end of file
+}

From e9edf7dc608897974c5ba34edc618a4f0c1b97e7 Mon Sep 17 00:00:00 2001
From: Shruti Narsulwar <shrutinarsulwar@gmail.com>
Date: Tue, 2 Jun 2026 19:58:00 +0530
Subject: [PATCH 4/4] Refactor FooterIcon component for better readability

---
 src/theme/Footer/Layout/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index 50e12566..8796d16e 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -267,7 +267,10 @@ export default function FooterLayout(): ReactNode {
                 </li>
                 <li>
                   <Link to="/careers" className="footer-link">
-                    <FooterIcon icon={BriefcaseBusiness} className="link-icon" />
+                    <FooterIcon
+                      icon={BriefcaseBusiness}
+                      className="link-icon"
+                    />
                     Careers
                     <span className="link-badge hiring">We're Hiring!</span>
                   </Link>