Fix mobile layout for footer component

Add media query to improve footer layout on mobile devices.

Author: nancy-verma780

src/css/custom.css

@@ -2265,4 +2265,24 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
 
 /* =====================================================
    END SECTION 15
-   ===================================================== */
+   ===================================================== */
+
+
+/* Fix mobile layout for the footer component (#1675) */
+@media (max-width: 768px) {
+  .footer {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    text-align: center !important;
+  }
+  .footer__links {
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 1.5rem !important;
+  }
+  .footer__col {
+    margin-bottom: 1rem !important;
+    text-align: center !important;
+  }
+}