From d748cd15f68bc14da90491d06fec2d43031f74e7 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Thu, 16 Oct 2025 20:34:12 +0530
Subject: [PATCH] Responsive table updated on mobile view

---
 app/about-us/AboutClient.js                   |  2 +-
 app/payment-insurance/PaymentInsurence.js     | 51 ++++++-------
 app/shortcodes/ShortcodesClient.js            |  4 +-
 public/assets/css/module-css/blog-details.css |  4 +-
 public/assets/css/style.css                   | 72 +++++++++++++++++--
 utils/Rehabilitation.utils.js                 |  2 +-
 6 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/app/about-us/AboutClient.js b/app/about-us/AboutClient.js
index a589899..6f57d1b 100644
--- a/app/about-us/AboutClient.js
+++ b/app/about-us/AboutClient.js
@@ -202,7 +202,7 @@ export default function Home() {
           <div className="row align-items-center flex-row-reverse">
             {/* RIGHT IMAGE / LEFT CONTENT */}
             <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
-              <div className="image_block_two pl_30">
+              <div className="image_block_two pl_30 pb_30">
                 <div className="image-box">
                   <figure className="image image-1-new "><img src="/assets/images/about-us/section3/top.webp" className="new-image-about" alt="Physiotherapy at Rapharehab" /></figure>
                   <figure className="image image-2-new"><img src="/assets/images/about-us/section3/bottom.webp" alt="Physiotherapy at Rapharehab" /></figure>
diff --git a/app/payment-insurance/PaymentInsurence.js b/app/payment-insurance/PaymentInsurence.js
index b21528e..ad82b1c 100644
--- a/app/payment-insurance/PaymentInsurence.js
+++ b/app/payment-insurance/PaymentInsurence.js
@@ -43,7 +43,7 @@ export default function RefugeeIFHP() {
                             </div>
 
                             <div className="mb_30">
-                                <p>
+                                <p className="mb-3">
                                     At Rapha Rehab, we make it easy for refugees and refugee
                                     claimants to access physiotherapy using Canada’s Interim
                                     Federal Health Program (IFHP). We handle the paperwork, explain
@@ -95,7 +95,7 @@ export default function RefugeeIFHP() {
                                         schedule set out in the grid
                                     </li>
                                 </ul>
-                                <p className="mt-3">
+                                <p className="mt-3 mb-3">
                                     We arrange any prior approval the grid requires before
                                     treatment begins.
                                 </p>
@@ -412,7 +412,7 @@ export default function RefugeeIFHP() {
                                     <div className="mb_30 mt-5">
                                         <h3 className="mb-2">How Billing & Payments Work</h3>
                                         <div className="table-responsive billing-table">
-                                            <table className="table table-bordered mt-3">
+                                            <table className="table table-bordered mt-3 billing-responsive-table">
                                                 <thead>
                                                     <tr>
                                                         <th>Step</th>
@@ -422,50 +422,45 @@ export default function RefugeeIFHP() {
                                                 </thead>
                                                 <tbody>
                                                     <tr>
-                                                        <td>1. Check Coverage</td>
-                                                        <td>
-                                                            Bring your insurance card or policy details. We’ll confirm
-                                                            your coverage.
+                                                        <td data-label="Step">1. Check Coverage</td>
+                                                        <td data-label="For General Patients">
+                                                            Bring your insurance card or policy details. We’ll confirm your coverage.
                                                         </td>
-                                                        <td>
-                                                            Bring your IFHP eligibility document (with UCI number) and a
-                                                            doctor’s referral.
+                                                        <td data-label="For Refugee Patients">
+                                                            Bring your IFHP eligibility document (with UCI number) and a doctor’s referral.
                                                         </td>
                                                     </tr>
                                                     <tr>
-                                                        <td>2. Verification</td>
-                                                        <td>
-                                                            We confirm benefits with your private insurer, WSIB, or auto
-                                                            insurance.
+                                                        <td data-label="Step">2. Verification</td>
+                                                        <td data-label="For General Patients">
+                                                            We confirm benefits with your private insurer, WSIB, or auto insurance.
                                                         </td>
-                                                        <td>
-                                                            We verify IFHP eligibility and confirm coverage with Medavie
-                                                            Blue Cross.
+                                                        <td data-label="For Refugee Patients">
+                                                            We verify IFHP eligibility and confirm coverage with Medavie Blue Cross.
                                                         </td>
                                                     </tr>
                                                     <tr>
-                                                        <td>3. Direct Billing</td>
-                                                        <td>
+                                                        <td data-label="Step">3. Direct Billing</td>
+                                                        <td data-label="For General Patients">
                                                             We directly bill many insurers, WSIB, and auto insurers.
                                                         </td>
-                                                        <td>
+                                                        <td data-label="For Refugee Patients">
                                                             We bill Medavie Blue Cross directly for covered services.
                                                         </td>
                                                     </tr>
                                                     <tr>
-                                                        <td>4. Out-of-Pocket Costs</td>
-                                                        <td>
-                                                            If your plan doesn’t fully cover a service, we’ll explain
-                                                            the cost upfront.
+                                                        <td data-label="Step">4. Out-of-Pocket Costs</td>
+                                                        <td data-label="For General Patients">
+                                                            If your plan doesn’t fully cover a service, we’ll explain the cost upfront.
                                                         </td>
-                                                        <td>
-                                                            If a service isn’t covered, we’ll let you know in advance so
-                                                            there are no surprises.
+                                                        <td data-label="For Refugee Patients">
+                                                            If a service isn’t covered, we’ll let you know in advance so there are no surprises.
                                                         </td>
                                                     </tr>
                                                 </tbody>
                                             </table>
                                         </div>
+
                                     </div>
 
                                     <div className="mb_30 mt-4">
@@ -525,7 +520,7 @@ export default function RefugeeIFHP() {
                                             Our team will review your insurance or IFHP eligibility and guide
                                             you through every step of the process.
                                         </p>
-                                        <div className="btn-box mt-4 mb-4">
+                                        <div className="btn-box mt-3 mb-4">
                                             <Link href="/contact" className="theme-btn btn-one"><span>Contact Us to Check Your Coverage</span></Link>
                                         </div>
 
diff --git a/app/shortcodes/ShortcodesClient.js b/app/shortcodes/ShortcodesClient.js
index d15af8e..7494485 100644
--- a/app/shortcodes/ShortcodesClient.js
+++ b/app/shortcodes/ShortcodesClient.js
@@ -410,7 +410,7 @@ export default function Home() {
                     <div className="row align-items-center flex-row-reverse">
                         {/* RIGHT IMAGE / LEFT CONTENT */}
                         <div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
-                            <div className="image_block_two pl_30">
+                            <div className="image_block_two pl_30 pb_30">
                                 <div className="image-box raw-image">
                                     <figure className="image image-1-ho raw "><img src="/assets/images/shortcodes/back.webp" alt="Why choose nanocare" /></figure>
                                     <figure className="image image-2"><img src="/assets/images/shortcodes/front.webp" alt="Why choose nanocare" /></figure>
@@ -541,7 +541,7 @@ export default function Home() {
                 </div>
             </section>
 
-            <section className="funfact-section centred">
+            <section className="funfact-section centred mt-3">
                 <div className="auto-container">
                     <div className="inner-container">
                         <div className="row clearfix">
diff --git a/public/assets/css/module-css/blog-details.css b/public/assets/css/module-css/blog-details.css
index d74f379..f65b3af 100644
--- a/public/assets/css/module-css/blog-details.css
+++ b/public/assets/css/module-css/blog-details.css
@@ -296,7 +296,7 @@
 @media only screen and (max-width: 426px) and (min-width: 200px) {
   
   .blog-details-content blockquote p{
-  font-size: 18px !important;
+  font-size: 14px !important;
   line-height: 34px;
   font-style: italic;
   margin-bottom: 20px;
@@ -305,7 +305,7 @@
 
 .blog-details-content blockquote h4{
   display: block;
-  font-size: 18px !important;
+  font-size: 14px !important;
   line-height: 32px;
   font-weight: 500;
   margin-bottom: 5px;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a901bd4..ccd02c2 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3264,7 +3264,7 @@
  @media only screen and (max-width: 499px) {
 
    .sec-title-1 h2 {
-     font-size: 26px;
+     font-size: 26px !important;
      line-height: 34px;
    }
  }
@@ -3567,14 +3567,63 @@
    font-weight: 700;
  }
 
+ /* ✅ Table Base Styles */
+.billing-responsive-table {
+  width: 100%;
+  border: 1px solid #101A30;
+  border-collapse: collapse;
+}
+
+.billing-responsive-table th,
+.billing-responsive-table td {
+  border: 1px solid #101A30;
+  padding: 8px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.billing-responsive-table thead {
+  background-color: #f8f9fa;
+}
+
+/* ✅ Responsive Stack for Small Screens */
+@media (max-width: 576px) {
+  .billing-responsive-table thead {
+    display: none;
+  }
+
+  .billing-responsive-table,
+  .billing-responsive-table tbody,
+  .billing-responsive-table tr,
+  .billing-responsive-table td {
+    display: block;
+    width: 100%;
+  }
+
+
+  .billing-responsive-table td {
+    position: relative;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .billing-responsive-table td::before {
+    content: attr(data-label);
+    display: block;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+}
+
+
  .custom-table {
-      border: 1px solid #000;
+      border: 1px solid #101A30;
       border-collapse: collapse;
       width: 100%;
     }
     .custom-table th,
     .custom-table td {
-      border: 1px solid #000;
+      border: 1px solid #101A30;
       padding: 8px;
       text-align: left;
       vertical-align: middle;
@@ -3704,7 +3753,7 @@
 
  @media (max-width: 768px) {
    .service-details-content h2 {
-     font-size: 38px !important;
+     font-size: 30px !important;
    }
  }
 
@@ -3783,4 +3832,19 @@
 
  .pagination-wrapper .pagination li a:hover img {
    filter: brightness(0) invert(1);
+ }
+
+ @media only screen and (max-width: 426px) and  (min-width : 200px) {
+  
+   .list-style-one li {
+   position: relative;
+   display: block;
+   font-size: 14px !important;
+   line-height: 26px !important;
+   color: #101A30;
+   font-weight: 500;
+   padding-left: 40px;
+   margin-bottom: 17px;
+ }
+
  }
\ No newline at end of file
diff --git a/utils/Rehabilitation.utils.js b/utils/Rehabilitation.utils.js
index 013478b..f342a13 100644
--- a/utils/Rehabilitation.utils.js
+++ b/utils/Rehabilitation.utils.js
@@ -344,7 +344,7 @@ physiotherapy and rehabilitation to treat neurological conditions such as:</h5>
 <div class="text-box">
   <h5 class="mb-2">Neurological Physiotherapy treatment will help:</h5>
   <div class="content-one mb_30">
-    <div style="display: flex; gap: 40px;">
+    <div style="display: flex;">
       
       <!-- First Column -->
       <ul class="list-style-one mt-3" style="padding-left: 30px; list-style-type: disc; margin: 0;">