diff --git a/src/app/globals.css b/src/app/globals.css
index bc50f1e..c4cb2a6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -268,6 +268,15 @@ body.section-overlay-open .app-shell {
   }
 }
 
+@keyframes flutter-bottomsheet-exit {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
 @keyframes flutter-scrim-enter {
   0% {
     opacity: 0;
@@ -277,15 +286,24 @@ body.section-overlay-open .app-shell {
   }
 }
 
+@keyframes flutter-scrim-exit {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .flutter-sheet-surface {
   animation: flutter-bottomsheet-enter 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
   will-change: transform;
 }
 
 .flutter-sheet-surface-exit {
-  transform: translate3d(0, 100%, 0) !important;
-  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1) !important;
+  animation: flutter-bottomsheet-exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
   will-change: transform;
+  pointer-events: none;
 }
 
 .flutter-scrim {
@@ -295,9 +313,10 @@ body.section-overlay-open .app-shell {
 }
 
 .flutter-scrim-exit {
-  opacity: 0 !important;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1) !important;
+  background-color: rgba(0, 0, 0, 0.54) !important;
+  animation: flutter-scrim-exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
   will-change: opacity;
+  pointer-events: none;
 }
 
 /* ── Section Overlay Slide-in Panel (Exact Flutter Najm Matching: 350ms in, 200ms out, easeInOut) ── */
diff --git a/src/app/questions-list/[slug]/answer-pace-sheet.tsx b/src/app/questions-list/[slug]/answer-pace-sheet.tsx
index 11d8b46..f95e9a2 100644
--- a/src/app/questions-list/[slug]/answer-pace-sheet.tsx
+++ b/src/app/questions-list/[slug]/answer-pace-sheet.tsx
@@ -55,12 +55,9 @@ export default function AnswerPaceSheet({
     setIsOpen(false);
   };
 
-  if (!isOpen) {
-    return null;
-  }
-
   return (
     <InformationSheet
+      isOpen={isOpen}
       icon="play"
       title={title}
       description={description}
diff --git a/src/app/questions-list/sections-request.tsx b/src/app/questions-list/sections-request.tsx
index dbdb660..194e32e 100644
--- a/src/app/questions-list/sections-request.tsx
+++ b/src/app/questions-list/sections-request.tsx
@@ -77,15 +77,12 @@ export default function SectionsRequest({
     controlledOnClose?.();
   };
 
-  if (!isSheetOpen) {
-    return null;
-  }
-
   const termsTitle = t["terms & conditions"] || "Terms & Conditions";
   const gotItLabel = t["Got it"] || "Got it";
 
   return (
     <InformationSheet
+      isOpen={isSheetOpen}
       icon={null}
       showCloseButton={false}
       title={({ close }) => (
diff --git a/src/components/Componentes/currency-sheet.tsx b/src/components/Componentes/currency-sheet.tsx
index 73bb1a4..22d00ad 100644
--- a/src/components/Componentes/currency-sheet.tsx
+++ b/src/components/Componentes/currency-sheet.tsx
@@ -24,29 +24,65 @@ export function CurrencySheet({
   title,
 }: CurrencySheetProps) {
   const { dictionary: t, locale } = useI18n();
+  const [isRendered, setIsRendered] = useState(isOpen);
   const [isClosing, setIsClosing] = useState(false);
+  const isClosingRef = useRef(false);
   const [searchQuery, setSearchQuery] = useState("");
   const listRef = useRef<HTMLDivElement>(null);
   const sheetRef = useRef<HTMLElement>(null);
+  const isMountedRef = useRef(true);
+  const prevIsOpenRef = useRef(isOpen);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
 
   const isRtl = locale === "fa" || locale === "ar" || locale === "ur";
   const defaultTitle = isRtl ? "انتخاب ارز" : "Select Currency";
   const sheetTitle = title || defaultTitle;
 
   const closeSheet = useCallback(() => {
+    if (isClosingRef.current) return;
+    isClosingRef.current = true;
     setIsClosing(true);
-    window.setTimeout(() => {
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      if (isMountedRef.current) {
+        setIsRendered(false);
+        setIsClosing(false);
+        isClosingRef.current = false;
+        setSearchQuery("");
+      }
       onClose();
-      setIsClosing(false);
-      setSearchQuery("");
     }, EXIT_ANIMATION_MS);
   }, [onClose]);
 
-  useSheetScrollLock(isOpen && !isClosing, { onBack: closeSheet });
+  // When isOpen changes from outside
+  useEffect(() => {
+    if (prevIsOpenRef.current !== isOpen) {
+      prevIsOpenRef.current = isOpen;
+      if (isOpen) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        isClosingRef.current = false;
+        setIsClosing(false);
+        setIsRendered(true);
+      } else if (!isClosingRef.current && isRendered) {
+        closeSheet();
+      }
+    }
+  }, [isOpen, isRendered, closeSheet]);
+
+  useSheetScrollLock(isRendered, { onBack: closeSheet });
 
   // Escape key handler
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isRendered) return;
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         closeSheet();
@@ -54,7 +90,7 @@ export function CurrencySheet({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, closeSheet]);
+  }, [isRendered, closeSheet]);
 
   const filteredCurrencies = useMemo(() => {
     const q = searchQuery.toLowerCase().trim();
@@ -87,7 +123,7 @@ export function CurrencySheet({
         ? "لم يتم العثور على عملات"
         : "No currencies found";
 
-  if (!isOpen && !isClosing) return null;
+  if (!isRendered) return null;
 
   return createPortal(
     <div
diff --git a/src/components/Componentes/help-modal.tsx b/src/components/Componentes/help-modal.tsx
index 24e0927..d3c660b 100644
--- a/src/components/Componentes/help-modal.tsx
+++ b/src/components/Componentes/help-modal.tsx
@@ -26,23 +26,52 @@ export function HelpModal({
 }: HelpModalProps) {
   const { dictionary: t } = useI18n();
   const [mounted, setMounted] = useState(false);
+  const [isRendered, setIsRendered] = useState(isOpen);
   const [isClosing, setIsClosing] = useState(false);
+  const isClosingRef = useRef(false);
   const isMountedRef = useRef(true);
+  const prevIsOpenRef = useRef(isOpen);
+  const timerRef = useRef<number | null>(null);
 
   useEffect(() => {
     isMountedRef.current = true;
     setMounted(true);
     return () => {
       isMountedRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
 
-  // When isOpen changes from outside, reset isClosing
+  const closeSheet = useCallback(() => {
+    if (isClosingRef.current) return;
+    isClosingRef.current = true;
+    setIsClosing(true);
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      if (isMountedRef.current) {
+        setIsRendered(false);
+        setIsClosing(false);
+        isClosingRef.current = false;
+      }
+      onClose();
+    }, EXIT_ANIMATION_MS);
+  }, [onClose]);
+
+  // When isOpen changes from outside
   useEffect(() => {
-    if (isOpen) {
-      setIsClosing(false);
+    if (prevIsOpenRef.current !== isOpen) {
+      prevIsOpenRef.current = isOpen;
+      if (isOpen) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        isClosingRef.current = false;
+        setIsClosing(false);
+        setIsRendered(true);
+      } else if (!isClosingRef.current && isRendered) {
+        closeSheet();
+      }
     }
-  }, [isOpen]);
+  }, [isOpen, isRendered, closeSheet]);
 
   const resolvedTitle = "Tips";
   const resolvedDescription =
@@ -53,22 +82,11 @@ export function HelpModal({
     "Psychologically, this practice fosters a sense of empathy and contentment, which can reduce financial stress. Socially, lending strengthens neighborhood bonds and creates support networks that can lead to economic opportunities. This hadith encourages believers to lend dough, bread, and fire to increase their sustenance.";
   const resolvedButtonText = buttonText ?? t["Got it"] ?? "Got it";
 
-  const closeSheet = useCallback(() => {
-    if (isClosing) return;
-    setIsClosing(true);
-    window.setTimeout(() => {
-      if (isMountedRef.current) {
-        setIsClosing(false);
-      }
-      onClose();
-    }, EXIT_ANIMATION_MS);
-  }, [isClosing, onClose]);
-
-  useHardwareBackHandler(closeSheet, isOpen && !isClosing);
+  useHardwareBackHandler(closeSheet, isRendered && !isClosing);
 
   // Lock body scroll
   useEffect(() => {
-    if (!isOpen || !mounted) return;
+    if (!isRendered || !mounted) return;
     const previousBodyOverflow = document.body.style.overflow;
     const previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = "hidden";
@@ -77,9 +95,9 @@ export function HelpModal({
       document.body.style.overflow = previousBodyOverflow;
       document.documentElement.style.overflow = previousHtmlOverflow;
     };
-  }, [isOpen, mounted]);
+  }, [isRendered, mounted]);
 
-  if (!isOpen || !mounted) return null;
+  if (!isRendered || !mounted) return null;
 
   return createPortal(
     <div
diff --git a/src/components/Componentes/information-sheet.tsx b/src/components/Componentes/information-sheet.tsx
index ca28a68..6308367 100644
--- a/src/components/Componentes/information-sheet.tsx
+++ b/src/components/Componentes/information-sheet.tsx
@@ -3,6 +3,7 @@
 import Image, { type StaticImageData } from "next/image";
 import type { HTMLAttributes, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import Button from "./button";
 import { LoadingSkeleton } from "./loading-skeleton";
 import { LoadingThreeDot } from "./loading-three-dot";
@@ -41,6 +42,7 @@ export type InformationSheetProps = Omit<
   HTMLAttributes<HTMLDivElement>,
   "children" | "title"
 > & {
+  isOpen?: boolean;
   icon?: InformationSheetIcon | null;
   title?: ReactNode | ((controls: { close: () => void }) => ReactNode);
   description?: ReactNode;
@@ -182,6 +184,7 @@ function resolveIcon(icon: InformationSheetIcon | null | undefined) {
 }
 
 export function InformationSheet({
+  isOpen = true,
   icon,
   title,
   description,
@@ -200,36 +203,63 @@ export function InformationSheet({
     locale === "ur" ||
     locale === "he" ||
     locale === "ks";
-  const [isVisible, setIsVisible] = useState(true);
+  const [mounted, setMounted] = useState(false);
+  const [isRendered, setIsRendered] = useState(isOpen);
   const [isClosing, setIsClosing] = useState(false);
+  const isClosingRef = useRef(false);
   const isMountedRef = useRef(true);
+  const prevIsOpenRef = useRef(isOpen);
+  const timerRef = useRef<number | null>(null);
 
   useEffect(() => {
     isMountedRef.current = true;
+    setMounted(true);
     return () => {
       isMountedRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
 
-  const resolvedIcon = resolveIcon(icon);
   const closeSheet = useCallback(() => {
-    if (isClosing) {
+    if (isClosingRef.current) {
       return;
     }
 
+    isClosingRef.current = true;
     setIsClosing(true);
-    window.setTimeout(() => {
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
       if (isMountedRef.current) {
-        setIsVisible(false);
+        setIsRendered(false);
+        setIsClosing(false);
+        isClosingRef.current = false;
       }
       onClose?.();
     }, EXIT_ANIMATION_MS);
-  }, [isClosing, onClose]);
+  }, [onClose]);
+
+  // Synchronize external isOpen prop changes safely without bounce
+  useEffect(() => {
+    if (prevIsOpenRef.current !== isOpen) {
+      prevIsOpenRef.current = isOpen;
+      if (isOpen) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        isClosingRef.current = false;
+        setIsClosing(false);
+        setIsRendered(true);
+      } else if (!isClosingRef.current && isRendered) {
+        closeSheet();
+      }
+    }
+  }, [isOpen, isRendered, closeSheet]);
+
+  const resolvedIcon = resolveIcon(icon);
 
   useHardwareBackHandler(() => {
     closeSheet();
     return true;
-  }, isVisible && !isClosing);
+  }, isRendered && !isClosing);
 
   const controls = { close: closeSheet };
   const resolvedTitle = typeof title === "function" ? title(controls) : title;
@@ -243,7 +273,7 @@ export function InformationSheet({
     );
 
   useEffect(() => {
-    if (!isVisible) {
+    if (!isRendered) {
       return;
     }
 
@@ -257,13 +287,13 @@ export function InformationSheet({
       document.body.style.overflow = previousBodyOverflow;
       document.documentElement.style.overflow = previousHtmlOverflow;
     };
-  }, [isVisible]);
+  }, [isRendered]);
 
-  if (!isVisible) {
+  if (!isRendered || !mounted) {
     return null;
   }
 
-  return (
+  const content = (
     <div
       className={[
         "fixed inset-0 z-50 flex items-end justify-center overflow-y-auto",
@@ -396,6 +426,8 @@ export function InformationSheet({
       </section>
     </div>
   );
+
+  return createPortal(content, document.body);
 }
 
 export default InformationSheet;
diff --git a/src/components/Componentes/question-birthplace.tsx b/src/components/Componentes/question-birthplace.tsx
index b700121..26fe3a1 100644
--- a/src/components/Componentes/question-birthplace.tsx
+++ b/src/components/Componentes/question-birthplace.tsx
@@ -249,7 +249,7 @@ export function QuestionBirthplace({
     setIsClosing(false);
   }, [disabled]);
 
-  useSheetScrollLock(isOpen && !isClosing, { onBack: closeSheet });
+  useSheetScrollLock(isOpen, { onBack: closeSheet });
 
   // Handle escape key
   useEffect(() => {
diff --git a/src/components/Componentes/question-date-sheet.tsx b/src/components/Componentes/question-date-sheet.tsx
index eb84f27..8075f61 100644
--- a/src/components/Componentes/question-date-sheet.tsx
+++ b/src/components/Componentes/question-date-sheet.tsx
@@ -181,7 +181,7 @@ export function QuestionDateSheet({
     window.setTimeout(onClose, EXIT_ANIMATION_MS);
   }, [onClose]);
 
-  useSheetScrollLock(!isClosing, { onBack: closeSheet });
+  useSheetScrollLock(true, { onBack: closeSheet });
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
diff --git a/src/components/Componentes/question-phone.tsx b/src/components/Componentes/question-phone.tsx
index 86b35b3..a1e7bee 100644
--- a/src/components/Componentes/question-phone.tsx
+++ b/src/components/Componentes/question-phone.tsx
@@ -586,7 +586,7 @@ export function QuestionPhone({
     );
   }, [countryList, searchQuery]);
 
-  useSheetScrollLock(isOpen && !isClosing, { onBack: closeSheet });
+  useSheetScrollLock(isOpen, { onBack: closeSheet });
 
   useEffect(() => {
     if (!isOpen) return;
diff --git a/src/components/Componentes/question-sheet.tsx b/src/components/Componentes/question-sheet.tsx
index e51ee0c..3787a08 100644
--- a/src/components/Componentes/question-sheet.tsx
+++ b/src/components/Componentes/question-sheet.tsx
@@ -81,7 +81,7 @@ export function QuestionSheet({ question, disabled }: QuestionSheetProps) {
     setIsClosing(false);
   }, [disabled, selectedList]);
 
-  useSheetScrollLock(isOpen && !isClosing, { onBack: closeSheet });
+  useSheetScrollLock(isOpen, { onBack: closeSheet });
 
   // Handle escape key
   useEffect(() => {
diff --git a/src/components/Componentes/support-sheet.tsx b/src/components/Componentes/support-sheet.tsx
index f87c492..2d3df09 100644
--- a/src/components/Componentes/support-sheet.tsx
+++ b/src/components/Componentes/support-sheet.tsx
@@ -17,40 +17,58 @@ export type SupportSheetProps = {
 export function SupportSheet({ isOpen, onClose }: SupportSheetProps) {
   const { dictionary: t } = useI18n();
   const [mounted, setMounted] = useState(false);
+  const [isRendered, setIsRendered] = useState(isOpen);
   const [isClosing, setIsClosing] = useState(false);
+  const isClosingRef = useRef(false);
   const isMountedRef = useRef(true);
+  const prevIsOpenRef = useRef(isOpen);
+  const timerRef = useRef<number | null>(null);
 
   useEffect(() => {
     isMountedRef.current = true;
     setMounted(true);
     return () => {
       isMountedRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
 
-  // When isOpen changes from outside, reset isClosing
-  useEffect(() => {
-    if (isOpen) {
-      setIsClosing(false);
-    }
-  }, [isOpen]);
-
   const closeSheet = useCallback(() => {
-    if (isClosing) return;
+    if (isClosingRef.current) return;
+    isClosingRef.current = true;
     setIsClosing(true);
-    window.setTimeout(() => {
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
       if (isMountedRef.current) {
+        setIsRendered(false);
         setIsClosing(false);
+        isClosingRef.current = false;
       }
       onClose();
     }, EXIT_ANIMATION_MS);
-  }, [isClosing, onClose]);
+  }, [onClose]);
+
+  // When isOpen changes from outside
+  useEffect(() => {
+    if (prevIsOpenRef.current !== isOpen) {
+      prevIsOpenRef.current = isOpen;
+      if (isOpen) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        isClosingRef.current = false;
+        setIsClosing(false);
+        setIsRendered(true);
+      } else if (!isClosingRef.current && isRendered) {
+        closeSheet();
+      }
+    }
+  }, [isOpen, isRendered, closeSheet]);
 
-  useHardwareBackHandler(closeSheet, isOpen && !isClosing);
+  useHardwareBackHandler(closeSheet, isRendered && !isClosing);
 
   // Lock body scroll
   useEffect(() => {
-    if (!isOpen || !mounted) return;
+    if (!isRendered || !mounted) return;
     const previousBodyOverflow = document.body.style.overflow;
     const previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = "hidden";
@@ -59,7 +77,7 @@ export function SupportSheet({ isOpen, onClose }: SupportSheetProps) {
       document.body.style.overflow = previousBodyOverflow;
       document.documentElement.style.overflow = previousHtmlOverflow;
     };
-  }, [isOpen, mounted]);
+  }, [isRendered, mounted]);
 
   const handleSupportContact = () => {
     if (typeof window !== "undefined" && "HabibApp" in window) {
@@ -84,7 +102,7 @@ export function SupportSheet({ isOpen, onClose }: SupportSheetProps) {
     closeSheet();
   };
 
-  if (!isOpen || !mounted) return null;
+  if (!isRendered || !mounted) return null;
 
   return createPortal(
     <div
diff --git a/src/components/Componentes/test-completed-sheet.tsx b/src/components/Componentes/test-completed-sheet.tsx
index 8634641..d16d9b4 100644
--- a/src/components/Componentes/test-completed-sheet.tsx
+++ b/src/components/Componentes/test-completed-sheet.tsx
@@ -19,10 +19,6 @@ export function TestCompletedSheet({
 }: TestCompletedSheetProps) {
   const { dictionary: t, locale } = useI18n();
 
-  if (!isOpen) {
-    return null;
-  }
-
   const isFa = locale === "fa";
 
   const sheetTitle =
@@ -39,6 +35,7 @@ export function TestCompletedSheet({
 
   return (
     <InformationSheet
+      isOpen={isOpen}
       icon="check"
       title={sheetTitle}
       description={
diff --git a/src/components/Componentes/test-exit-sheet.tsx b/src/components/Componentes/test-exit-sheet.tsx
index e408075..e96cc32 100644
--- a/src/components/Componentes/test-exit-sheet.tsx
+++ b/src/components/Componentes/test-exit-sheet.tsx
@@ -19,10 +19,6 @@ export function TestExitSheet({
 }: TestExitSheetProps) {
   const { dictionary: t, locale } = useI18n();
 
-  if (!isOpen) {
-    return null;
-  }
-
   const isFa = locale === "fa";
 
   const tr = t as Record<string, string>;
@@ -50,6 +46,7 @@ export function TestExitSheet({
 
   return (
     <InformationSheet
+      isOpen={isOpen}
       icon="warning"
       title={title}
       description={
diff --git a/src/components/Componentes/test-questions-flow.tsx b/src/components/Componentes/test-questions-flow.tsx
index 59ebb77..2da2016 100644
--- a/src/components/Componentes/test-questions-flow.tsx
+++ b/src/components/Componentes/test-questions-flow.tsx
@@ -131,7 +131,9 @@ export default function TestQuestionsFlow({
     if (typeof window !== "undefined") {
       try {
         window.localStorage.removeItem("marriage:tests:personality_test:draft");
-        window.localStorage.removeItem("marriage:tests:glasser_5_needs_test:draft");
+        window.localStorage.removeItem(
+          "marriage:tests:glasser_5_needs_test:draft",
+        );
       } catch {}
     }
     setAnswers({});
@@ -190,8 +192,12 @@ export default function TestQuestionsFlow({
       }
       if (typeof window !== "undefined") {
         try {
-          window.localStorage.removeItem("marriage:tests:personality_test:draft");
-          window.localStorage.removeItem("marriage:tests:glasser_5_needs_test:draft");
+          window.localStorage.removeItem(
+            "marriage:tests:personality_test:draft",
+          );
+          window.localStorage.removeItem(
+            "marriage:tests:glasser_5_needs_test:draft",
+          );
         } catch {}
       }
       if (onClose) {
@@ -287,22 +293,24 @@ export default function TestQuestionsFlow({
                   key={q.id}
                   aria-hidden={offset !== 0}
                   className={[
-                    "absolute inset-0 flex flex-col overflow-y-auto pt-4 pb-2 transition-transform duration-250 ease-[cubic-bezier(0.25,1,0.5,1)]",
-                    offset === 0 ? "pointer-events-auto" : "pointer-events-none",
+                    "absolute inset-0 flex flex-col overflow-y-auto pt-2 pb-4 transition-transform duration-250 ease-[cubic-bezier(0.25,1,0.5,1)]",
+                    offset === 0
+                      ? "pointer-events-auto"
+                      : "pointer-events-none",
                   ].join(" ")}
                   style={{
                     transform: `translate3d(${offset * 100}%, 0, 0)`,
                   }}
                 >
                   {/* Question Title */}
-                  <h2
-                    className="text-[17px] sm:text-[18px] font-bold text-[#1F2024] leading-[1.6] text-center px-3 mb-2 flex items-center justify-center shrink-0 min-h-[90px] sm:min-h-[100px]"
-                  >
-                    <span className="w-full">{q.text}</span>
-                  </h2>
+                  <div className="w-full min-h-[100px] sm:min-h-[120px] flex items-center justify-center my-3 sm:my-4 shrink-0 px-2">
+                    <h2 className="text-[17px] sm:text-[18px] font-bold text-[#1F2024] leading-[1.6] text-center w-full">
+                      {q.text}
+                    </h2>
+                  </div>
 
                   {/* Answer Options Stack */}
-                  <div className="flex-1 flex flex-col justify-center gap-3.5 my-auto pb-3">
+                  <div className="w-full flex flex-col gap-3 pb-3">
                     {options.map((option) => {
                       const isSelected = qSelectedValue === option.value;
 
@@ -422,4 +430,3 @@ export default function TestQuestionsFlow({
     </>
   );
 }
-