fix alignment to centre on homepage in the FAQs section

Author: hrx01-dev

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

src/css/custom.css

@@ -398,14 +398,56 @@ 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;
   margin: 0 !important;
   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;