From bda35cf65d91129504809f724a99dbb0d84adfc0 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Mon, 22 Sep 2025 22:48:24 +0530
Subject: [PATCH] Bttom popup icons updated

---
 app/payment-insurance/page.js              |  2 +-
 app/shortcodes/ShortcodesClient.js         |  4 +--
 app/what-to-expect/page.js                 |  2 +-
 components/ContactFloat.js                 | 17 ++++++++----
 public/assets/css/module-css/service.css   | 32 ++++++++++++++++++++++
 public/assets/css/module-css/solutions.css |  6 ++++
 6 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/app/payment-insurance/page.js b/app/payment-insurance/page.js
index ce887f2..1a781b0 100644
--- a/app/payment-insurance/page.js
+++ b/app/payment-insurance/page.js
@@ -35,7 +35,7 @@ export default function About() {
                             <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                                 <div className="image_block_two">
                                     <div className="image-box">
-                                        <figure className="image image-1-ho"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
+                                        <figure className="image image-1-new"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
                                         <figure className="image image-2-new"><img src="/assets/images/payment-insurance/front.webp" alt="Payment and Insurance" /></figure>
                                         <div className="icon-box cart-icon"><img src="/assets/images/payment-insurance/icon.webp" alt="Payment and Insurance" /></div>
                                     </div>
diff --git a/app/shortcodes/ShortcodesClient.js b/app/shortcodes/ShortcodesClient.js
index 3e4b4fa..80ee5e5 100644
--- a/app/shortcodes/ShortcodesClient.js
+++ b/app/shortcodes/ShortcodesClient.js
@@ -347,8 +347,8 @@ export default function Home() {
                         {/* 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-box x">
-                                    <figure className="image image-1-ho "><img src="/assets/images/shortcodes/back.webp" alt="Why choose nanocare" /></figure>
+                                <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>
                                     {/* <div className="icon-box"><img src="/assets/images/about-us/section3/icon.webp" alt="" /></div> */}
                                 </div>
diff --git a/app/what-to-expect/page.js b/app/what-to-expect/page.js
index 6b82ae0..bf0bb36 100644
--- a/app/what-to-expect/page.js
+++ b/app/what-to-expect/page.js
@@ -27,7 +27,7 @@ export default function About() {
                                             <div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
                                             <div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
                                         </div>
-                                        <figure className="image image-1-ho"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
+                                        <figure className="image image-1"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
                                         <figure className="image image-2"><img src="/assets/images/what-we-expect/left.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
                                         <div className="icon-box"><img src="/assets/images/what-we-expect/icon.webp" alt="What to Expect – Physiotherapy Etobicoke" /></div>
                                     </div>
diff --git a/components/ContactFloat.js b/components/ContactFloat.js
index 885a9f4..9faff71 100644
--- a/components/ContactFloat.js
+++ b/components/ContactFloat.js
@@ -14,27 +14,29 @@ export default function ContactFloat() {
       href: "tel:647-722-3434",
       src: "/assets/images/icons/call.png",
       label: "Call",
+      newTab: true, // 👈 added
     },
     {
       action: () => setShowChat(true),
       src: "/assets/images/chat.png",
       label: "Chat",
     },
-        {
+    {
       href: "https://www.instagram.com/elrapharehab/",
       src: "/assets/images/insta.png",
       label: "Instagram",
+      newTab: true,
     },
-        {
+    {
       href: "https://www.facebook.com/ELRaphaRehabCenter/",
       src: "/assets/images/fb.png",
-      label: "Facebook",  
+      label: "Facebook",
+      newTab: true,
     },
   ];
 
   /** Social media list shown on Share click */
   const socialIcons = [
-
     {
       href: "https://www.instagram.com/elrapharehab/",
       iconClass: "icon-4",
@@ -75,6 +77,8 @@ export default function ContactFloat() {
                   key={i}
                   href={icon.href}
                   aria-label={icon.label}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   style={{
                     background: "#102548",
                     borderRadius: "50%",
@@ -170,8 +174,9 @@ export default function ContactFloat() {
             flexDirection: "row",
             gap: "15px",
             zIndex: 9999,
-            background: "white", padding: "8px",
-            borderRadius: "50px"
+            background: "white",
+            padding: "8px",
+            borderRadius: "50px",
           }}
         >
           {socialIcons.map((icon, i) => (
diff --git a/public/assets/css/module-css/service.css b/public/assets/css/module-css/service.css
index 2e93af6..c834b6c 100644
--- a/public/assets/css/module-css/service.css
+++ b/public/assets/css/module-css/service.css
@@ -94,6 +94,23 @@
   z-index: 10;
 }
 
+.service-block-one .inner-box .lower-content-new .icon-box-new {
+  position: absolute;
+  left: -13px;
+  bottom: 40px;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  font-size: 60px;
+  color: #fff;
+  border-radius: 0px 10px 10px 0px;
+  background: #102548;
+  transition: all 500ms ease;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
 .service-block-one .inner-box .lower-content-new .icon-box-new {
   position: absolute;
   left: -13px;
@@ -129,6 +146,10 @@
   bottom: 183px;
 }
 
+.service-block-one .inner-box:hover .lower-content-new .icon-box-new {
+  bottom: 95px !important;
+}
+
 .service-block-one .inner-box .lower-content-new .icon-box-new:before {
   position: absolute;
   content: '';
@@ -151,6 +172,17 @@
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
 }
 
+.service-block-one .inner-box .lower-content-new .icon-box-new:before {
+  position: absolute;
+  content: '';
+  background: #102548; 
+  width: 12px;
+  height: 14px;
+  left: 0px;
+  bottom: -14px;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+}
+
 .service-block-one .inner-box .lower-content h3 {
   position: relative;
   display: block;
diff --git a/public/assets/css/module-css/solutions.css b/public/assets/css/module-css/solutions.css
index 0332719..66cec88 100644
--- a/public/assets/css/module-css/solutions.css
+++ b/public/assets/css/module-css/solutions.css
@@ -187,6 +187,12 @@
 
 }
 
+.image-box .raw-image .image .raw img{
+
+  display: none !important;
+
+}  
+
 }
 
 @media only screen and (max-width: 991px){