From 73daea374c6c532da680029c08406a6525a3e664 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Tue, 17 Mar 2026 18:17:40 +0530
Subject: [PATCH] faq responsive updated

---
 src/app/globals.css                   | 52 +++++++++++++++++++++++++++
 src/components/faq/FaqPageSection.tsx | 10 +++---
 src/components/home/FaqFive.tsx       | 28 +++++++--------
 src/components/home/FaqFour.tsx       |  4 +--
 4 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4f647ff..aa2ef70 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17970,6 +17970,34 @@ h4.service-details__dynamic-content-erp {
     max-width: 520px !important;
   }
 
+  .faq-four .pelocis-stretch-element-inside-column{
+
+    margin-top: 30px !important;
+
+  }
+
+  .faq-four__image__icon {
+    width: 175px;
+    height: 175px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 91px !important;
+    top: 50%;
+}
+
+.faq-four__image2__icon {
+    width: 175px;
+    height: 175px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 84px !important;
+    top: 50%;
+}
+
   .careers-popup-optimized .form-panel {
     padding: 20px 35px 15px !important;
   }
@@ -18013,6 +18041,30 @@ h4.service-details__dynamic-content-erp {
     min-height: 50px !important;
   }
 
+    .faq-four__image__icon {
+    width: 175px;
+    height: 175px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 0px !important;
+    top: 50%;
+    font-size: 54px !important;
+}
+
+.faq-four__image2__icon {
+    width: 175px;
+    height: 175px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 0px !important;
+    top: 50%;
+    font-size: 54px !important;
+}
+
   .careers-popup-optimized .g-recaptcha-container {
     transform: scale(0.7) !important;
     margin: 0 !important;
diff --git a/src/components/faq/FaqPageSection.tsx b/src/components/faq/FaqPageSection.tsx
index 7ef2a6a..16d24b3 100644
--- a/src/components/faq/FaqPageSection.tsx
+++ b/src/components/faq/FaqPageSection.tsx
@@ -49,14 +49,14 @@ const FaqPageSection = () => {
         <section className="faq-page-section">
             <div className="container">
                 <div className="row align-items-center mb-60">
-                    <div className="col-lg-6">
+                    <div className="col-xl-6">
                         <div className="section-title-wrapper">
                             <div className="sec-title__shape"></div>
                             <h6 className="sec-title__tagline">Digital Mastery Unlocked</h6>
                             <h2 className="sec-title__title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
                         </div>
                     </div>
-                    <div className="col-lg-6">
+                    <div className="col-xl-6">
                         <div className="section-desc-wrapper">
                             <p className="section-desc" style={{ margin: 0, paddingLeft: '20px' }}>
                                 Welcome to Metatroncube’s FAQ page, where we delve into the intricacies of Web-App Development, the nuances of SEO, and the dynamics of Digital Marketing. Our goal is to address your queries and provide insightful answers that empower your digital journey, whether you’re navigating website design, mobile app development, or looking for effective digital marketing strategies.
@@ -68,7 +68,7 @@ const FaqPageSection = () => {
                 {/* Section 1: 3-Column with Image */}
                 <div className="row align-items-center">
                     {/* Left Side FAQs */}
-                    <div className="col-lg-4 col-md-12">
+                    <div className="col-xl-4 col-md-12">
                         <div className="faq-one__accordion pelocis-accrodion">
                             {leftFaqs.map((faq) => (
                                 <div key={faq.id} className={`accrodion ${activeLeftId === faq.id ? 'active' : ''}`}>
@@ -93,14 +93,14 @@ const FaqPageSection = () => {
                     </div>
 
                     {/* Center Image */}
-                    <div className="col-lg-4 col-md-12 text-center">
+                    <div className="col-xl-4 col-md-12 text-center">
                         <div className="faq-center-image-wrap">
                             <img src="/assets/images/faq/1.webp" alt="FAQ Center" className="main-faq-img" />
                         </div>
                     </div>
 
                     {/* Right Side FAQs */}
-                    <div className="col-lg-4 col-md-12">
+                    <div className="col-xl-4 col-md-12">
                         <div className="faq-one__accordion pelocis-accrodion">
                             {rightFaqs.map((faq) => (
                                 <div key={faq.id} className={`accrodion ${activeRightId === faq.id ? 'active' : ''}`}>
diff --git a/src/components/home/FaqFive.tsx b/src/components/home/FaqFive.tsx
index 55c4b2f..7c86a5f 100644
--- a/src/components/home/FaqFive.tsx
+++ b/src/components/home/FaqFive.tsx
@@ -35,20 +35,7 @@ const FaqFive = () => {
     return (
         <section className="faq-four section-space">
             <div className="container">
-                <div className="row">
-                    <div className="col-xl-6">
-                        <div className="pelocis-stretch-element-inside-column">
-                            <div className="faq-four__image2">
-                                <img
-                                    src="/assets/images/faq/3.webp"
-                                    alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
-                                />
-                                <div className="faq-four__image2__icon">
-                                    <i className="icon-faq">faq</i>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div className="row flex-xl-row-reverse">
                     <div className="col-xl-6">
                         <div className="faq-four__content">
                             <div className="faq-one__accordion pelocis-accrodion">
@@ -74,6 +61,19 @@ const FaqFive = () => {
                             </div>
                         </div>
                     </div>
+                    <div className="col-xl-6">
+                        <div className="pelocis-stretch-element-inside-column">
+                            <div className="faq-four__image2 text-center">
+                                <img
+                                    src="/assets/images/faq/3.webp"
+                                    alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
+                                />
+                                <div className="faq-four__image2__icon">
+                                    <i className="icon-faq">faq</i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
diff --git a/src/components/home/FaqFour.tsx b/src/components/home/FaqFour.tsx
index 04f6bf7..564bca4 100644
--- a/src/components/home/FaqFour.tsx
+++ b/src/components/home/FaqFour.tsx
@@ -78,12 +78,12 @@ const FaqFour = () => {
                     </div>
                     <div className="col-xl-6">
                         <div className="pelocis-stretch-element-inside-column">
-                            <div className="faq-four__image">
+                            <div className="faq-four__image text-center">
                                 <img
                                     src="/assets/images/faq/2.webp"
                                     alt="Get in touch with metatroncube"
                                 />
-                                <div className="faq-four__image__icon">
+                                <div className="faq-four__image__icon text-end">
                                     <i className="icon-faq">faq</i>
                                 </div>
                             </div>