From 78bbf9e9f936c8c195d834fae6bc89e26047de59 Mon Sep 17 00:00:00 2001
From: Jayam Srivastava <jayamsrivastava99@gmail.com>
Date: Mon, 25 May 2026 21:01:50 +0530
Subject: [PATCH] fix alignment to centre on homepage in the FAQs section

---
 src/components/faqs/faqs.tsx |  9 ++++----
 src/css/custom.css           | 42 ++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx
index a4e2b293..f9ac5610 100644
--- a/src/components/faqs/faqs.tsx
+++ b/src/components/faqs/faqs.tsx
@@ -86,6 +86,7 @@ const FAQs: React.FC = () => {
             <p
               className={`mx-auto mt-3 max-w-3xl text-base ${isDark ? "text-gray-400" : "text-gray-600"
                 }`}
+              style={{ textAlign: "center" }}
             >
               Find answers to the most common questions about recode hive.
             </p>
@@ -116,8 +117,8 @@ const FAQs: React.FC = () => {
                   >
                     <button
                       className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between gap-4 p-4 text-left text-base font-semibold transition-all duration-300 focus:outline-none md:p-5 ${isDark
-                          ? "text-gray-100 hover:text-indigo-300"
-                          : "text-gray-800 hover:text-indigo-700"
+                        ? "text-gray-100 hover:text-indigo-300"
+                        : "text-gray-800 hover:text-indigo-700"
                         }`}
                       style={{
                         background: isDark
@@ -205,8 +206,8 @@ const FAQs: React.FC = () => {
                   >
                     <button
                       className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between gap-4 p-4 text-left text-base font-semibold transition-all duration-300 focus:outline-none md:p-5 ${isDark
-                          ? "text-gray-100 hover:text-indigo-300"
-                          : "text-gray-800 hover:text-indigo-700"
+                        ? "text-gray-100 hover:text-indigo-300"
+                        : "text-gray-800 hover:text-indigo-700"
                         }`}
                       style={{
                         background: isDark
diff --git a/src/css/custom.css b/src/css/custom.css
index cd898991..77e7398f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -398,7 +398,37 @@ html[data-theme="dark"] .menu__link--active::after {
   white-space: nowrap;
 }
 
+/* Center FAQ subtitle under the main FAQ heading */
+
+.mb-10.text-center {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  text-align: center !important;
+}
+
+/* Ensure the FAQ section container is centered and uses the intended max-width */
+.relative .mx-auto.max-w-6xl {
+  margin-left: auto !important;
+  margin-right: auto !important;
+  width: 100% !important;
+  max-width: 1100px !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.mb-10.text-center {
+  justify-content: center !important;
+}
+
+.mb-10.text-center>p,
+.mb-10.text-center p.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
 .navbar__items {
+
   display: flex;
   align-items: center;
   gap: 0.3rem !important;
@@ -406,6 +436,18 @@ html[data-theme="dark"] .menu__link--active::after {
   padding: 0 !important;
 }
 
+.mb-10.text-center>p.mx-auto.max-w-3xl {
+  align-self: center !important;
+  text-align: center !important;
+  width: 100% !important;
+  max-width: 900px !important;
+  box-sizing: border-box !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
 /* ======== SECTION 7 : Adjust individual navbar items ==========*/
 .navbar__items>.navbar__item {
   padding: 0.2rem 0.3rem !important;