Home responsive updated

app/about-us/AboutClient.js

@@ -164,9 +164,9 @@ export default function Home() {
               <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">
-                    <figure className="image image-1"><img src="/assets/images/about-us/section3/top.webp" alt="Why choose us" /></figure>
+                    <figure className="image image-1-new "><img src="/assets/images/about-us/section3/top.webp" className="new-image-about" alt="Why choose us" /></figure>
-                    <figure className="image image-2"><img src="/assets/images/about-us/section3/bottom.webp" alt="Why choose us" /></figure>
+                    <figure className="image image-2-new"><img src="/assets/images/about-us/section3/bottom.webp" alt="Why choose us" /></figure>
-                    <div className="icon-box"><img src="/assets/images/about-us/section3/icon.webp" alt="Why choose us" /></div>
+                    <div className="icon-box my-icon"><img src="/assets/images/about-us/section3/icon.webp" className="new-image-about2" alt="Why choose us" /></div>
                   </div>
                 </div>
               </div>
@@ -230,7 +230,7 @@ export default function Home() {
                         <figure className="image">
                           <img src={member.image} alt={member.name} />
                         </figure>
-                        <ul className="social-links clearfix">
+                        {/* <ul className="social-links clearfix">
                           {member.socials.map((social, idx) => (
                             <li key={idx}>
                               <Link href={social.link}>
@@ -238,7 +238,7 @@ export default function Home() {
                               </Link>
                             </li>
                           ))}
-                        </ul>
+                        </ul> */}
                       </div>
 
                       <div className="lower-content">

components/ContactFloat.js

@@ -10,11 +10,6 @@ export default function ContactFloat() {
 
   /** Contact actions */
   const extraIcons = [
-    {
-      href: "mailto:bloor@rapharehab.ca",
-      src: "/assets/images/icons/mail.png",
-      label: "Mail",
-    },
     {
       href: "tel:647-722-3434",
       src: "/assets/images/icons/call.png",
@@ -25,10 +20,15 @@ export default function ContactFloat() {
       src: "/assets/images/chat.png",
       label: "Chat",
     },
-    {
+        {
-      action: () => setShowSocial((prev) => !prev), // 👈 NEW: share toggle
+      href: "https://www.instagram.com/elrapharehab/",
-      src: "/assets/images/share.png",
+      src: "/assets/images/insta.png",
-      label: "Share",
+      label: "Instagram",
+    },
+        {
+      href: "https://www.facebook.com/ELRaphaRehabCenter/",
+      src: "/assets/images/fb.png",
+      label: "Facebook",  
     },
   ];
 
@@ -159,7 +159,6 @@ export default function ContactFloat() {
         </button>
       </div>
 
-      {/* 👉 Right side floating Social Icons (only when Share clicked) */}
       {showSocial && (
         <div
           style={{
@@ -201,13 +200,11 @@ export default function ContactFloat() {
         </div>
       )}
 
-      {/* Chat Form Sidebar */}
       {showChat && <ChatForm onClose={() => setShowChat(false)} />}
     </>
   );
 }
 
-/** Contact Form Sidebar */
 function ChatForm({ onClose }) {
   const [formData, setFormData] = useState({
     username: "",

components/layout/header/Header2.js

@@ -22,7 +22,7 @@ export default function Header2({
             <ul className="info-list clearfix">
               <li>
                 <img
-                  src="/assets/images/icons/call.png"
+                  src="/assets/images/call.png"
                   alt="Phone"
                   style={{ marginRight: "8px" }}
                   className="red-icon"
@@ -31,9 +31,9 @@ export default function Header2({
               </li>
               <li>
                 <img
-                  src="/assets/images/icons/mail.png"
+                  src="/assets/images/mail.png"
                   alt="Mail"
-                  style={{ marginRight: "8px" }}
+                  style={{ marginRight: "8px", marginLeft: "8px" }}
                   className="red-icon"
                 />
                 <Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>

components/sections/home/AreaOfInjury.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import Link from "next/link"
+import Link from "next/link";
 import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
+
 export default function AreaOfInjury() {
     const teamMembers = [
         { name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
@@ -14,7 +15,7 @@ export default function AreaOfInjury() {
     ];
 
     return (
-        <section className="team-section sec-pad centred  bg-color-1">
+        <section className="team-section sec-pad centred bg-color-1">
             <div className="pattern-layer">
                 <div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/shape/shape-13.webp)' }}></div>
                 <div className="pattern-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-14.webp)' }}></div>
@@ -28,14 +29,14 @@ export default function AreaOfInjury() {
                 <div className="sec-title-2 mb_50">
                     <span className="sub-title-1 text-white">Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke.</span>
                     <h2 className='h3-white' style={{ fontWeight: "bold" }}>
-                       Area Of Injury
+                        Area Of Injury
                     </h2>
                 </div>
                 <div className="row clearfix">
                     {areaOfInjuryData.slice(0, 8).map((area, index) => (
-                        <div key={index} className="col-lg-3 col-md-6 col-6 team-block">
+                        <div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex">
-                            <div className="team-block-one wow fadeInUp animated" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
+                            <div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
-                                <div className="inner-box">
+                                <div className="inner-box d-flex flex-column flex-grow-1">
                                     <div className="image-box">
                                         <figure className="image">
                                             <img src={area.image} alt={area.title.toUpperCase()} />
@@ -47,7 +48,7 @@ export default function AreaOfInjury() {
                                             <li><Link href="/#"><i className="icon-7"></i></Link></li>
                                         </ul> */}
                                     </div>
-                                    <div className="lower-content">
+                                    <div className="lower-content mt-auto">
                                         <h3><Link href={`/area-of-injury/${area.slug}`}>{area.title}</Link></h3>
                                         {/* <span className="designation">{member.role}</span> */}
                                     </div>
@@ -65,4 +66,3 @@ export default function AreaOfInjury() {
         </section>
     );
 };
-

components/sections/home/FaqSection.js

@@ -31,7 +31,7 @@ export default function FaqSection() {
                 <div className="row clearfix d-flex align-items-center">
                      <div className="col-xl-6 col-lg-12 col-sm-12 image-column">
                         <div className="image_block_three">
-                            <div className="image-box">
+                            <div className="image-box new-icon-box-faq">
                                 <div className="image-shape">
                                     <div className="shape-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div>
                                     <div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
@@ -39,8 +39,8 @@ export default function FaqSection() {
                                     <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"><img src="/assets/images/home/why-trust-us/trust-right.webp" alt="Laser Theraphy | Rapharehab" /></figure>
+                                <figure className="image image-1 image-new-align"><img src="/assets/images/home/why-trust-us/trust-right.webp" alt="Laser Theraphy | Rapharehab" /></figure>
-                                <figure className="image image-2"><img src="/assets/images/home/why-trust-us/trust-left.webp" alt="exercise-programming" /></figure>
+                                <figure className="image image-2 imge-new-element"><img src="/assets/images/home/why-trust-us/trust-left.webp" alt="exercise-programming" /></figure>
                                 <div className="icon-box"><img src="/assets/images/home/why-trust-us/icon.webp" alt="Laser Theraphy | Rapharehab" /></div>
                             </div>
                         </div>

components/sections/home/ServicesSection.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 export default function ServicesSection() {
     return (
-        <section className="team-section sec-pad centred  bg-color-1">
+        <section className="team-section sec-pad centred bg-color-1">
             <div className="pattern-layer">
                 <div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/top-right.webp)' }}></div>
                 <div className="pattern-2" style={{ backgroundImage: 'url(/assets/images/home/our-services/bottom-left.webp)' }}></div>
@@ -15,34 +15,43 @@ export default function ServicesSection() {
                     <h2>Our Services</h2>
                 </div>
                 <div className="row clearfix">
-                    {
+                    {servicesList?.slice(0, 8)?.map((service, index) => (
-                        servicesList?.slice(0, 6)?.map((service, index) => {
+                        <div className="col-lg-3 col-md-4 col-sm-12 service-block d-flex" key={index}>
-                            return (
+                            <div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="00ms" data-wow-duration="1500ms">
-                                <div className="col-lg-4 col-md-6 col-sm-12 service-block" key={index}>
+                                <div className="inner-box d-flex flex-column flex-grow-1">
-                                    <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
+                                    <div className="image-box">
-                                        <div className="inner-box">
+                                        <figure className="image">
-                                            <div className="image-box">
+                                            <Link href={`/etobicoke-treatment-service/${service.slug}`}>
-                                                <figure className="image"><Link href={`/etobicoke-treatment-service/${service.slug}`}><img src={service?.image} alt={service.alt} /></Link></figure>
+                                                <img src={service?.image} alt={service.alt} />
-
+                                            </Link>
-                                            </div>
+                                        </figure>
-                                            <div className="lower-content">
+                                    </div>
-                                                <div className="icon-box"><img src={service?.icon} alt="" /></div>
+                                    <div className="lower-content-new">
-                                                <h3 className='text-start'>
+                                        <div className="icon-box-new">
-                                                    <Link href={`/etobicoke-treatment-service/${service.slug}`}>
+                                            <img src={service?.icon} alt="" />
-                                                        {service?.title}
-                                                        {/* {service?.title?.length > 25
-                                                            ? service.title.slice(0, 25) + "..."
-                                                            : service.title} */}
-                                                    </Link>
-                                                </h3>
-                                                <p className='text-start'>{service?.shortDescription}</p>
-                                            </div>
                                         </div>
+                                        <h3 className='text-start'>
+                                            <Link href={`/etobicoke-treatment-service/${service.slug}`}>
+                                                {service?.title}
+                                            </Link>
+                                        </h3>
+                                        <p 
+                                            className='text-start' 
+                                            style={{
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                display: '-webkit-box',
+                                                WebkitLineClamp: 2,
+                                                WebkitBoxOrient: 'vertical',
+                                            }}
+                                        >
+                                            {service?.shortDescription}
+                                        </p>
                                     </div>
                                 </div>
-                            )
+                            </div>
-                        })
+                        </div>
-                    }
+                    ))}
                     <div className='col-12 text-center'>
                         <div className="btn-box">
                             <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new"><span>View All Services</span></Link>

components/sections/home2/Features.js

@@ -9,7 +9,7 @@ export default function Features() {
           <div className="inner-container">
             <div className="row clearfix">
 
-              <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
+              <div className="col-lg-3 col-md-3 col-sm-12 col-6 feature-block">
                 <div className="feature-block-two">
                   <div className="inner-box">
                     <div className="icon-box">
@@ -21,7 +21,7 @@ export default function Features() {
                 </div>
               </div>
 
-              <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
+              <div className="col-lg-3 col-md-3 col-sm-12 col-6 feature-block">
                 <div className="feature-block-two">
                   <div className="inner-box">
                     <div className="icon-box">
@@ -33,7 +33,7 @@ export default function Features() {
                 </div>
               </div>
 
-              <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
+              <div className="col-lg-3 col-md-3 col-sm-12 col-6 feature-block">
                 <div className="feature-block-two">
                   <div className="inner-box">
                     <div className="icon-box">
@@ -45,7 +45,7 @@ export default function Features() {
                 </div>
               </div>
 
-              <div className="col-lg-3 col-md-6 col-sm-12 feature-block">
+              <div className="col-lg-3 col-md-3 col-sm-12 col-6 feature-block">
                 <div className="feature-block-two">
                   <div className="inner-box">
                     <div className="icon-box">

components/sections/home2/MobileBanner.js

@@ -66,13 +66,13 @@ export default function MobileBanner() {
         {
             id: 0,
             variant: 'topToBottom',
-            bgImage: '/assets/images/banner/mobile-banner/1.jpg',
+            bgImage: '/assets/images/banner/mobile-banner/1.webp',
             hideContent: true
         },
         {
             id: 1,
             variant: 'bottomToTop',
-            bgImage: '/assets/images/banner/mobile-banner/2.jpg',
+            bgImage: '/assets/images/banner/mobile-banner/2.webp',
             upperText: 'Care That Heals Gently',
             title: 'Relaxing',
             titleSpan: 'Massage',
@@ -86,7 +86,7 @@ export default function MobileBanner() {
         {
             id: 2,
             variant: 'leftToRight',
-            bgImage: '/assets/images/banner/mobile-banner/3.jpg',
+            bgImage: '/assets/images/banner/mobile-banner/3.webp',
             upperText: 'Wellness Near You Always',
             title: 'Trusted',
             titleSpan: 'Physio',
@@ -100,7 +100,7 @@ export default function MobileBanner() {
         {
             id: 3,
             variant: 'rightToLeft',
-            bgImage: '/assets/images/banner/mobile-banner/4.jpg',
+            bgImage: '/assets/images/banner/mobile-banner/4.webp',
             upperText: 'Healing With Caring Hands',
             title: 'Holistic',
             titleSpan: 'Wellness',

public/assets/css/module-css/about.css

@@ -344,11 +344,26 @@
   transform: rotate(-15deg);
 }
 
+.image_block_three .image-box .image-2-new{
+  position: absolute;
+  left: -10px;
+  top: 60px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
+  border-radius: 20px;
+  transform: rotate(-15deg);
+}
+
 .image_block_three .image-box .image-2 img{
   width: 100%;
   border-radius: 20px;
 }
 
+.image_block_three .image-box .image-2-new img{
+  width: 100%;
+  border-radius: 20px;
+}
+
 .image_block_three .image-box .icon-box{
   position: absolute;
   display: inline-block;
@@ -457,12 +472,38 @@
 /** RESPONSIVE-CSS **/
 
 
-@media only screen and (max-width: 1200px){
+@media only screen and (max-width: 1024px){
 
+  .image_block_one .image-box .text-box{
+    left: 0px;
+  }
 
+  .image_block_one .image-box{
+    margin-bottom: 30px;
+  }
+
+  .image_block_three .image-box{
+    margin-bottom: 30px;
+  }
+
+  .image_block_three .image-box .icon-box{
+    bottom: 0px;
+  }
+
+  .imge-new-element img{
+
+      display: none;
+
+  }
+
+  .image-new-align{
+
+    position: relative;
+    left: -140px;
+    top: -30px;
+  }
 
 }
-
 @media only screen and (max-width: 991px){
 
   .image_block_one .image-box .text-box{
@@ -539,6 +580,16 @@
     margin-top: 30px;
   }
 
+    .image_block_three .image-box .image-2-new{
+    position: relative;
+    left: 0px;
+    top: 0px;
+    transform: rotate(0deg);
+    max-width: 306px;
+    margin: 0 auto;
+    margin-top: 30px;
+  }
+
   .image_block_three .image-box{
     padding: 0px;
   }
@@ -557,7 +608,17 @@
 
 }
 
-@media only screen and (max-width: 599px){
+@media only screen and (max-width: 1024px){
+
+.image_block_three .image-box .image-2-new{
+  position: absolute;
+  left: -10px;
+  top: 60px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
+  border-radius: 20px;
+  transform: rotate(-15deg);
+}
 
 }
 
@@ -585,6 +646,26 @@
 
 }
 
+@media only screen and (max-width: 426px) {
+
+.new-icon-box-faq{
+
+  display: none !important;
+
+}
+
+}
+
+@media only screen and (max-width: 500px) {
+
+  .image-new-align{
+
+    left: -0px !important;
+
+  }
+
+}
+
 
 
 

public/assets/css/module-css/feature.css

@@ -190,7 +190,7 @@
 
 @media only screen and (max-width: 1024px) {
   .feature-block-two .inner-box h3 a {
-    font-size: 25px;
+    font-size: 21px;
     display: inline-block;
     color: var(--title-color);
   }
@@ -209,7 +209,16 @@
 
 }
 
-@media only screen and (max-width: 599px) {}
+@media only screen and (max-width: 768px) {
+
+  .feature-block-two .inner-box h3 a {
+    font-size: 13px !important;
+    line-height: 20px;
+    display: inline-block;
+    color: var(--title-color);
+  }
+
+}
 
 @media only screen and (max-width: 499px) {
   .feature-block-one .inner-box {

public/assets/css/module-css/funfact.css

@@ -110,4 +110,20 @@
 
 @media only screen and (max-width: 599px) {}
 
-@media only screen and (max-width: 499px) {}
+@media only screen and (max-width: 426px) {
+
+.funfact-block-one .inner-box .text-new{
+  position: relative;
+  display: block;
+  text-align: center;
+  font-size: 13px;
+  line-height: 26px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #bc0000;
+  border-radius: 8px;
+  padding: 12px 15px;
+}
+
+
+}

public/assets/css/module-css/service.css

@@ -51,6 +51,17 @@
   min-height: 285px;
 }
 
+.service-block-one .inner-box .lower-content-new {
+  position: relative;
+  display: block;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0px 0px 20px 20px;
+  padding: 20px 20px 20px 50px;
+  transition: all 500ms ease;
+  overflow: visible; 
+  min-height: 150px;
+}
+
 .service-block-one .inner-box .lower-content2{
   position: relative;
   display: block;
@@ -83,6 +94,30 @@
   z-index: 10;
 }
 
+.service-block-one .inner-box .lower-content-new .icon-box-new {
+  position: absolute;
+  left: -13px;
+  bottom: 40px;
+  width: 50px;
+  height: 50px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 20px;
+  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 img {
+
+  width: 30px;
+  height: 30px;
+
+}
+
 .service-block-one .inner-box .lower-content .icon-box img {
 
   width: 70px;
@@ -94,6 +129,17 @@
   bottom: 183px;
 }
 
+.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 .icon-box:before {
   position: absolute;
   content: '';
@@ -114,12 +160,34 @@
   margin-bottom: 15px;
 }
 
+.service-block-one .inner-box .lower-content-new h3 {
+  position: relative;
+  display: block;
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
 .service-block-one .inner-box .lower-content h3 a {
   display: inline-block;
   color: var(--title-color);
   transition: color 300ms ease;
 }
 
+.service-block-one .inner-box .lower-content-new h3 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 22px;
+  line-height: 28px;
+
+}
+
+.service-block-one .inner-box .lower-content-new h3 a:hover {
+  color: var(--theme-color);
+}
+
 .service-block-one .inner-box .lower-content h3 a:hover {
   color: var(--theme-color);
 }
@@ -235,24 +303,88 @@
 
 /** RESPONSIVE-CSS **/
 
-
 @media only screen and (max-width: 1200px){
 
-
+.service-block-one .inner-box .lower-content-new h3 a {
+  display: inline-block;
+  color: var(--title-color);
+  transition: color 300ms ease;
+  font-size: 23px !important;
+  line-height: 28px !important;
+}
 
 }
 
-@media only screen and (max-width: 991px){
+
+@media only screen and (max-width: 1024px){
+
+  .service-block-one .inner-box .lower-content-new{
+
+          min-height: 125px !important;
+        padding: 20px 20px 20px 50px !important;
+
+}
+
+.service-block-one .inner-box .lower-content h3 a {
+
+  font-size: 24px;
+  line-height: 30px;
+
+}
+
+.service-block-one .inner-box .lower-content-new h3 a {
+
+  font-size: 20px !important;
+  line-height: 22px !important;
+
+}
+
+
+
+.text-start{
+
+  font-size: 14px;
+  line-height: 20px;
+
+}
+
+}
+
+@media only screen and (max-width: 992px){
 
  .service-style-two .pattern-layer{
   display: none;
  }
 
+ .service-block-one .inner-box .lower-content h3 a {
+
+  font-size: 22px !important;
+  line-height: 30px !important;
+
 }
 
-@media only screen and (max-width: 767px){
+ .service-block-one .inner-box .lower-content-new h3 a {
 
-  
+  font-size: 17px !important;
+  line-height: 30px !important;
+
+}
+
+.text-start{
+
+  font-size: 13px !important;
+  line-height: 22px !important;
+
+}
+
+}
+
+@media only screen and (max-width: 1200px){
+
+      .service-block-one .inner-box .lower-content-new {
+    min-height: 119px !important;
+    padding:20px 20px 20px 50px !important;
+  }
 
 }
 
@@ -270,47 +402,50 @@
     min-height: 315px;
     padding:40px 31px 40px 105px;
   }
+
+    .service-block-one .inner-box .lower-content-new {
+    min-height: 124px !important;
+    padding:20px 20px 20px 50px !important;
+  }
+
+  .service-block-one .inner-box .lower-content-new h3 a {
+
+  font-size: 17px !important;
+  line-height: 20px !important;
+
+}
 }
 
 
 
+/*  */
 
+@media (max-width: 1200px) and (min-width: 768px) {
+  .service-block-one .inner-box .lower-content {
+    min-height: 350px;
+    padding:20px 31px 30px 105px;
+  }
+}
 
+@media (min-width: 992px) and (max-width: 992px) {
+  .default-sidebar .widget-title h3 {
+    font-size: 30px !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 992px) {
+  .service-block-one .inner-box .lower-content h3 {
+    font-size: 22px;
+  }
+}
 
+@media (min-width: 1200px) and (max-width: 1200px) {
+  .new-height {
+    min-height: 255px !important;
+  }
+}
 
-
+@media (min-width: 768px) and (max-width: 768px) {
-
+  .new-height {
-
+    min-height: 284px !important;
-
+  }
-
+}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

public/assets/css/module-css/solutions.css

@@ -44,6 +44,13 @@
   overflow: hidden;
 }
 
+.image_block_two .image-box .image-1-new{
+  position: relative;
+  display: block;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
 .image_block_two .image-box:hover .image-1 img{
   transform: scale(1.1);
 }
@@ -58,6 +65,16 @@
   filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
 }
 
+.image_block_two .image-box .image-2-new{
+  position: absolute;
+  left: -50px;
+  bottom: 0px;
+  background: #fff;
+  padding: 10px;
+  border-radius: 20px;
+  filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
+}
+
 .image_block_two .image-box .icon-box{
   position: absolute;
   display: inline-block;
@@ -108,6 +125,40 @@
   left: 0px;
  }
 
+  .image_block_two .image-box .image-2-new{
+  left: 0px;
+ }
+
+}
+
+@media only screen and (max-width: 1024px){
+
+.image_block_two .image-box .image-1-new{
+  position: relative;
+  display: block;
+  border-radius: 20px;
+  overflow: hidden;
+  top: -86px !important;
+}
+
+.image_block_two .image-box .image-2-new{
+  position: absolute;
+  left: 14px !important;
+  bottom: -86px !important;
+  background: #fff;
+  padding: 10px;
+  border-radius: 20px;
+  filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
+}
+
+.image_block_two .image-box .my-icon{
+
+  position: absolute;
+  left: 300px;
+  top: 97px;
+
+}
+
 }
 
 @media only screen and (max-width: 991px){
@@ -118,12 +169,38 @@
 
 }
 
-@media only screen and (max-width: 767px){
+@media only screen and (max-width: 768px){
 
   .solutions-section{
     padding: 70px 0px 70px 0px;
   }
 
+      .image_block_two .image-box .image-1-new {
+        position: relative;
+        display: block;
+        border-radius: 20px;
+        overflow: hidden;
+        top: 10px !important;
+    }
+
+        .image_block_two .image-box .image-2-new {
+        position: absolute;
+        left: 14px !important;
+        bottom: -36px !important;
+        background: #fff;
+        padding: 10px;
+        border-radius: 20px;
+        filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
+    }
+
+    .image_block_two .image-box .my-icon{
+
+  position: absolute;
+  left: 300px;
+  top: 180px;
+
+}
+
 }
 
 @media only screen and (max-width: 767px) {
@@ -132,6 +209,30 @@
   }
 }
 
+@media only screen and (max-width: 500px){
+
+  .image_block_two .image-box .image-2-new{
+
+    display: none;
+
+  }
+
+  .image_block_two .image-box .image-1-new{
+
+    left: -15px;
+
+  }
+
+      .image_block_two .image-box .my-icon{
+
+  position: absolute;
+  left: 250px;
+  top: 290px;
+
+}
+
+}
+
 
 @media only screen and (max-width: 599px){
   .image_block_two .image-box{
@@ -142,6 +243,11 @@
     position: relative;
     margin-top: 30px;
   }
+
+    .image_block_two .image-box .image-2-new{
+    position: relative;
+    margin-top: 30px;
+  }
 }
 
 @media only screen and (max-width: 499px){

public/assets/css/module-css/team.css

@@ -33,7 +33,7 @@
 .team-block-one .inner-box .image-box .image:before{
   position: absolute;
   content: '';
-  background: rgba(24, 27, 62, 0.6);
+  /* background: rgba(24, 27, 62, 0.6); */
   width: 100%;
   height: 100%;
   left: 0px;
@@ -303,7 +303,11 @@
 
 @media only screen and (max-width: 1200px){
 
+.team-block-one .inner-box .lower-content .designation {
 
+  font-size: 14px;
+
+}
 
 }
 

public/assets/css/style.css

@@ -1076,9 +1076,9 @@
    height: auto;
  }
 
- .red-icon {
+ /* .red-icon {
   filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(7476%) hue-rotate(356deg) brightness(94%) contrast(108%);
-}
+} */
 
 
  .header-top .top-inner .info-list li a {
@@ -3470,6 +3470,32 @@
      /* display: block; */
      /* margin-top: 8px; */
    }
+ }
+
+  @media (max-width:1360px) {
+
+   .header-style-two .header-top .top-inner {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding-left: 25px;
+   padding-right: 25px;
+   position: relative;
+ }
+  
+ }
+
+ @media (max-width:1200px) {
+
+   .header-style-two .header-top .top-inner {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding-left: 25px;
+   padding-right: 25px;
+   position: relative;
+ }
+  
  }
 
  @media (max-width: 1024px) and (min-width: 769px) {
@@ -3481,6 +3507,7 @@
      padding-left: 0px !important;
      padding-right: 0px !important;
      position: relative;
+     justify-content: center;
      /* Needed for flex children alignment */
    }
 

utils/constant.utils.js

@@ -66,8 +66,8 @@ export const teamMembers = [
         name: "Jo-Anne",
         designation: "Diet & Nutrition Consultant",
         bannerImage: "/assets/images/our-team/details/our-team-details-banner-2.webp",
-        image: "/assets/images/our-team/Jo-Anne.png",
+        image: "/assets/images/our-team/Jo-Ann.webp",
-        imageDetail: "/assets/images/our-team/Jo-Anne.png",
+        imageDetail: "/assets/images/our-team/details/img-2.webp",
         metaTitle: "Jo-Anne - Diet & Nutrition Consultant | Rapha Rehab",
         metaDis: "Meet Jo-Anne, a Diet & Nutrition Consultant with over 45 years of experience in hospitals, consulting, and online internationally since Covid.",
         description: "Jo-Anne has over 45 years of diet and nutrition experience in hospitals, her consulting business, and since Covid, on-line internationally. Growing up, Jo-Anne saw the health burden of extra body weight for a family member and then for herself in her early twenties. This inspired her to go into the field of diet and nutrition. Jo-Anne graduated in 1979 with a college honors diploma in Dietary from the Northern Alberta Institute of Technology (NAIT) in Edmonton, Alberta, Canada. And since has strived to encourage others and to foster her own healthy eating active lifestyle. Her personalized healthy active lifestyle approach can work for anyone because it is adaptable to individual needs and preferences. No one-size-fits-all, each person is different, and that’s why your program is customized to suit you plus you get supportive accountability to keep you going. Look, Feel, Move, & Think Better with Winning Healthy Lifestyle Programs. Get Results that last so you look, feel, move and think your best, have more energy, prevent premature aging, reduce serious health risks like diabetes and heart disease and truly enhance your overall quality of life. Discover which program works best for you and your goals, start with a free no obligation consultation. Call Jo-Anne at 832-273-2131.",