diff --git a/app/page.js b/app/page.js
index 7a4d0b8..d849240 100644
--- a/app/page.js
+++ b/app/page.js
@@ -15,6 +15,7 @@ import TeamTwo from "@/components/sections/home1/Team"
 import AreaOfInjury from "@/components/sections/home/AreaOfInjury"
 import News from "@/components/sections/home1/News"
 import Funfacts from "@/components/sections/home1/Funfacts"
+import MobileServices from "@/components/sections/home/MobileServicesSection"
 
 export default function Home() {
 
@@ -24,8 +25,16 @@ export default function Home() {
                 <Banner />
                 <Features />
                 <AboutSection />
-                <ProcessSection />
-                <ServicesSection />
+                {/* <ProcessSection /> */}
+                {/* Desktop View */}
+                <div className="d-none d-md-block">
+                    <ServicesSection />
+                </div>
+
+                {/* Mobile View */}
+                <div className="d-block d-md-none">
+                    <MobileServices />
+                </div>
                 <FaqSection />
                 <AreaOfInjury />
                 <WhyChooseUsSection />
diff --git a/components/sections/home/AreaOfInjury.js b/components/sections/home/AreaOfInjury.js
index 4f8d684..20ea2f0 100644
--- a/components/sections/home/AreaOfInjury.js
+++ b/components/sections/home/AreaOfInjury.js
@@ -13,7 +13,7 @@ export default function AreaOfInjury() {
     ];
 
     return (
-        <section className="team-section sec-pad centred">
+        <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.png)' }}></div>
                 <div className="pattern-2" style={{ backgroundImage: 'url(assets/images/shape/shape-14.png)' }}></div>
@@ -32,7 +32,7 @@ export default function AreaOfInjury() {
                 </div>
                 <div className="row clearfix">
                     {teamMembers.map((member, index) => (
-                        <div key={index} className="col-lg-3 col-md-6 col-sm-12 team-block">
+                        <div key={index} className="col-lg-3 col-md-6 col-6 team-block">
                             <div className="team-block-one wow fadeInUp animated" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
                                 <div className="inner-box">
                                     <div className="image-box">
@@ -46,7 +46,7 @@ export default function AreaOfInjury() {
                                     </div>
                                     <div className="lower-content">
                                         <h3><Link href="team-details">{member.name}</Link></h3>
-                                        <span className="designation">{member.role}</span>
+                                        {/* <span className="designation">{member.role}</span> */}
                                     </div>
                                 </div>
                             </div>
diff --git a/components/sections/home/FaqSection.js b/components/sections/home/FaqSection.js
index d6834da..e63126b 100644
--- a/components/sections/home/FaqSection.js
+++ b/components/sections/home/FaqSection.js
@@ -21,15 +21,31 @@ export default function FaqSection() {
         }
     }
     return (
-        <section className="faq-section sec-pad bg-color-1">
-            <figure className="image-layer"><img src="assets/images/resource/faq-1.png" alt="" /></figure>
+        <section className="faq-section sec-pad">
+            {/* <figure className="image-layer"><img src="assets/images/resource/faq-1.png" alt="" /></figure> */}
             <div className="auto-container">
                 <div className="sec-title centred mb_50">
                     <span className="sub-title">Discover Who We Are</span>
                     <h2>Why Patients Trust Us</h2>
                 </div>
-                <div className="row clearfix">
-                    <div className="col-xl-7 col-lg-12 col-md-12 offset-xl-5 content-column">
+                <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-shape">
+                                    <div className="shape-1 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-8.png)' }}></div>
+                                    <div className="shape-2" style={{ backgroundImage: 'url(assets/images/shape/shape-33.png)' }}></div>
+                                    <div className="shape-3" style={{ backgroundImage: 'url(assets/images/shape/shape-7.png)' }}></div>
+                                    <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.png)' }}></div>
+                                </div>
+                                <figure className="image image-1"><img src="assets/images/resource/about-2.jpg" alt="" /></figure>
+                                <figure className="image image-2"><img src="assets/images/resource/about-3.jpg" alt="" /></figure>
+                                <div className="icon-box"><i className="icon-14"></i></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-6 col-lg-12 col-md-12 content-column">
                         <div className="content-box">
 
                             <ul className="accordion-box">
@@ -40,7 +56,7 @@ export default function FaqSection() {
                                     </div>
                                     <div className={isActive.key == 1 ? "acc-content current" : "acc-content"}>
                                         <div className="content">
-                                            <div className="text"><p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke. Our registered physiotherapists provide trusted care including physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, massage, and acupuncture. We also offer osteopathy, custom braces, orthotics, pain management, workplace injury rehab, naturopathy, and home care services.</p>
+                                            <div className="text"><p>Welcome to Rapha Rehab Physiotherapy & Massage Therapy Clinic in Etobicoke. We provide trusted care through physiotherapy, sports injury rehab, pelvic floor therapy, chiropractic care, massage, acupuncture, osteopathy, orthotics, braces, pain management, workplace injury rehab, naturopathy, and home care services.</p>
                                             </div>
                                         </div>
                                         <div className="btn-box mt-3">
@@ -82,7 +98,7 @@ export default function FaqSection() {
                                             <div className="text"><p>Physiotherapy etobicoke is a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients.</p>
                                             </div>
                                         </div>
-                                          <div className="btn-box mt-3">
+                                        <div className="btn-box mt-3">
                                             <Link href="/contact" className="theme-btn btn-one"><span>Book Appointment</span></Link>
                                         </div>
                                     </div>
@@ -90,14 +106,15 @@ export default function FaqSection() {
                             </ul>
                         </div>
                     </div>
-                    <div className="col-lg-6 col-md-12 col-sm-12 image-column">
+                   
+                    {/* <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                         <div className="image_block_four">
                             <div className="image-box ml_30">
                                 <div className="image-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-22.png)' }}></div>
 
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section>
diff --git a/components/sections/home/MobileServicesSection.js b/components/sections/home/MobileServicesSection.js
new file mode 100644
index 0000000..29b4a32
--- /dev/null
+++ b/components/sections/home/MobileServicesSection.js
@@ -0,0 +1,73 @@
+import Link from "next/link"
+
+
+export default function MobileServices() {
+    return (
+        <>
+            <section className="feature-section sec-pad bg-color-1">
+                <div className="auto-container">
+                    <div className="sec-title mb_50 centred">
+                        <span className="sub-title">Our Services</span>
+                        <h2>We Offer For You Medical & <br />Saving Lives</h2>
+                    </div>
+                    <div className="row clearfix">
+                        <div className="col-lg-3 col-md-6 col-6 feature-block">
+                            <div className="feature-block-one">
+                                <div className="inner-box text-center">
+                                    <div className="icon-box"><i className="icon-9"></i></div>
+                                    <h3><Link href="/">Qualified Doctor</Link></h3>
+                                    <div className="btn-box">
+                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                                    </div>
+                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6 col-6 feature-block">
+                            <div className="feature-block-one">
+                                <div className="inner-box text-center">
+                                    <div className="icon-box"><i className="icon-10"></i></div>
+                                    <h3><Link href="/">Emergency Help</Link></h3>
+                                    <div className="btn-box">
+                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                                    </div>
+                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6 col-6 feature-block">
+                            <div className="feature-block-one">
+                                <div className="inner-box text-center">
+                                    <div className="icon-box"><i className="icon-11"></i></div>
+                                    <h3><Link href="/">Modern Equipment</Link></h3>
+                                    <div className="btn-box">
+                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                                    </div>
+                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6 col-6 feature-block">
+                            <div className="feature-block-one">
+                                <div className="inner-box text-center">
+                                    <div className="icon-box"><i className="icon-12"></i></div>
+                                    <h3><Link href="/">Family Medicine</Link></h3>
+                                    <div className="btn-box">
+                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                                    </div>
+                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='col-12 text-center'>
+                            <div className="btn-box">
+                                <Link href="index-2" className="theme-btn btn-one"><span>View All Services</span></Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
diff --git a/components/sections/home/ServicesSection.js b/components/sections/home/ServicesSection.js
index a7936a1..aa1dfe9 100644
--- a/components/sections/home/ServicesSection.js
+++ b/components/sections/home/ServicesSection.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 export default function ServicesSection() {
     return (
-        <section className="service-section sec-pad">
+        <section className="service-section sec-pad bg-color-1">
             <div className="auto-container">
                 <div className="sec-title mb_50 centred">
                     <span className="sub-title">Our Services</span>
diff --git a/public/assets/css/module-css/about.css b/public/assets/css/module-css/about.css
index 389f693..d3e240e 100644
--- a/public/assets/css/module-css/about.css
+++ b/public/assets/css/module-css/about.css
@@ -200,7 +200,7 @@
 }
 
 .about-style-two .content_block_one .content-box .list-style-one li:before{
-  background: #F4F3F8;
+  background: #ffe6e6;
 }
 
 .content_block_one .content-box .lower-box{
diff --git a/public/assets/css/module-css/banner.css b/public/assets/css/module-css/banner.css
index f9648e2..cf524df 100644
--- a/public/assets/css/module-css/banner.css
+++ b/public/assets/css/module-css/banner.css
@@ -132,7 +132,7 @@
 .banner-carousel .swiper-slide:before{
   position: absolute;
   content: '';
-  background: #EBF5FF;
+  background: #f9d6d6;
   width: 100%;
   height: 100%;
   left: 0px;
diff --git a/public/assets/css/module-css/blog-details.css b/public/assets/css/module-css/blog-details.css
index b1a97e6..013f092 100644
--- a/public/assets/css/module-css/blog-details.css
+++ b/public/assets/css/module-css/blog-details.css
@@ -48,7 +48,7 @@
 .blog-details-content blockquote{
   position: relative;
   display: block;
-  background: #F4F3F8;
+  background: #ffe6e6;
   border-radius: 20px;
   padding: 40px;
   margin: 0px 0px 30px 0px;
@@ -117,7 +117,7 @@
   font-size: 16px;
   line-height: 29px;
   color: var(--title-color);
-  background: #F4F3F8;
+  background: #ffe6e6;
   border-radius: 5px;
   padding: 10px 15px;
   text-align: center;
@@ -200,7 +200,7 @@
   font-size: 16px;
   line-height: 29px;
   color: var(--title-color);
-  background: #F4F3F8;
+  background: #ffe6e6;
   border-radius: 5px;
   padding: 5px 20px;
   z-index: 1;
diff --git a/public/assets/css/module-css/chooseus.css b/public/assets/css/module-css/chooseus.css
index b2f1944..28317a2 100644
--- a/public/assets/css/module-css/chooseus.css
+++ b/public/assets/css/module-css/chooseus.css
@@ -4,7 +4,7 @@
 .chooseus-section{
   position: relative;
   padding: 114px 0px 160px 0px;
-  background-color: #0E1136;
+  background-color: #bc0000;
 }
 
 .chooseus-section .bg-layer{
@@ -95,7 +95,7 @@
 }
 
 .chooseus-style-two .chooseus-block-one .inner-box h3{
-  color: #0E1136;
+  color: #bc0000;
 }
 
 .chooseus-style-two .chooseus-block-one .inner-box p{
diff --git a/public/assets/css/module-css/cta.css b/public/assets/css/module-css/cta.css
index a9ab19f..cead50d 100644
--- a/public/assets/css/module-css/cta.css
+++ b/public/assets/css/module-css/cta.css
@@ -10,7 +10,7 @@
 .cta-section .bg-layer:before{
   position: absolute;
   content: '';
-  background: #0E1136;
+  background: #bc0000;
   width: 100%;
   height: 100%;
   left: 0px;
diff --git a/public/assets/css/module-css/feature.css b/public/assets/css/module-css/feature.css
index 6133154..646ec00 100644
--- a/public/assets/css/module-css/feature.css
+++ b/public/assets/css/module-css/feature.css
@@ -12,7 +12,7 @@
   box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   overflow: hidden;
-  padding: 34px 25px 30px 23px;
+  padding: 25px;
   z-index: 1;
   margin-bottom: 30px;
   transition: all 500ms ease;
@@ -45,7 +45,7 @@
   background: rgba(249, 49, 59, 0.05);
   text-align: center;
   border-radius: 50%;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   transition: all 500ms ease;
 }
 
@@ -56,10 +56,10 @@
 .feature-block-one .inner-box h3{
   position: relative;
   display: block;
-  font-size: 26px;
-  line-height: 36px;
+  font-size: 20px;
+  line-height: 26px;
   font-weight: 600;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .feature-block-one .inner-box h3 a{
@@ -211,6 +211,24 @@
 }
 
 @media only screen and (max-width: 499px){
+  .feature-block-one .inner-box{
+  position: relative;
+  display: block;
+  background: #fff;
+  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  overflow: hidden;
+  padding: 15px;
+  z-index: 1;
+  margin-bottom: 20px;
+  transition: all 500ms ease;
+}
+
+.feature-block-one .inner-box h3{
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 10px;
+}
 
 
 }
diff --git a/public/assets/css/module-css/funfact.css b/public/assets/css/module-css/funfact.css
index 37ae818..9b4d9b2 100644
--- a/public/assets/css/module-css/funfact.css
+++ b/public/assets/css/module-css/funfact.css
@@ -21,7 +21,7 @@
   line-height: 65px;
   font-weight: 600;
   margin-bottom: 15px;
-  color: #0E1136;
+  color: #bc0000;
 }
 
 .funfact-block-one .inner-box .count-outer .symble{
@@ -37,7 +37,7 @@
   line-height: 26px;
   font-weight: 500;
   color: var(--secondary-color);
-  background: #F4F3F8;
+  background: #ffe6e6;
   border-radius: 8px;
   padding: 12px 15px;
 }
diff --git a/public/assets/css/module-css/gallery.css b/public/assets/css/module-css/gallery.css
index 2af14f5..78f3034 100644
--- a/public/assets/css/module-css/gallery.css
+++ b/public/assets/css/module-css/gallery.css
@@ -30,7 +30,7 @@
   position: relative;
   display: block;
   overflow: hidden;
-  background: #0E1136;
+  background: #bc0000;
   border-radius: 10px;
 }
 
diff --git a/public/assets/css/module-css/page-title.css b/public/assets/css/module-css/page-title.css
index 28cb1e5..1b23efb 100644
--- a/public/assets/css/module-css/page-title.css
+++ b/public/assets/css/module-css/page-title.css
@@ -19,7 +19,7 @@
 .page-title .bg-layer:before{
   position: absolute;
   content: '';
-  background: #0E1136;
+  background: #bc0000;
   width: 100%;
   height: 100%;
   left: 0px;
diff --git a/public/assets/css/module-css/service.css b/public/assets/css/module-css/service.css
index 0891946..86391e1 100644
--- a/public/assets/css/module-css/service.css
+++ b/public/assets/css/module-css/service.css
@@ -105,7 +105,7 @@
 
 .service-style-two{
   position: relative;
-  background: #0E1136;
+  background: #bc0000;
 }
 
 .service-style-two .service-block-one .inner-box{
diff --git a/public/assets/css/module-css/sidebar.css b/public/assets/css/module-css/sidebar.css
index 2b6ba7a..5a8f087 100644
--- a/public/assets/css/module-css/sidebar.css
+++ b/public/assets/css/module-css/sidebar.css
@@ -92,7 +92,7 @@
   border-radius: 10px;
   font-size: 22px;
   font-weight: 500;
-  color: #0E1136;
+  color: #bc0000;
   padding: 10px 60px 10px 40px;
 }
 
@@ -129,7 +129,7 @@
   font-size: 16px;
   line-height: 29px;
   color: var(--title-color);
-  background: #F4F3F8;
+  background: #ffe6e6;
   border-radius: 5px;
   padding: 10px 15px;
   text-align: center;
diff --git a/public/assets/css/module-css/subscribe.css b/public/assets/css/module-css/subscribe.css
index a7658aa..fba602e 100644
--- a/public/assets/css/module-css/subscribe.css
+++ b/public/assets/css/module-css/subscribe.css
@@ -50,7 +50,7 @@
   display: block;
   width: 100%;
   height: 66px;
-  background: #F4F3F8;
+  background: #ffe6e6;
   border: 1px solid rgba(14, 17, 54, 0.05);
   border-radius: 30px;
   font-size: 16px;
@@ -76,7 +76,7 @@
 .subscribe-section:before{
   position: absolute;
   content: '';
-  background: #0E1136;
+  background: #bc0000;
   width: 100%;
   height: 50%;
   left: 0px;
diff --git a/public/assets/css/module-css/team.css b/public/assets/css/module-css/team.css
index 7fad9f0..1c42c28 100644
--- a/public/assets/css/module-css/team.css
+++ b/public/assets/css/module-css/team.css
@@ -89,7 +89,7 @@
 }
 
 .team-block-one .inner-box .lower-content{
-  padding: 30px 15px;
+  padding: 15px 15px 0px 15px;
 }
 
 @media screen and (min-width: 768px) and (max-width: 1024px) {
@@ -321,6 +321,13 @@
 
 @media only screen and (max-width: 499px){
 
+.team-block-one .inner-box .lower-content{
+  padding: 5px 5px 0px 5px;
+}
+.team-block-one .inner-box .lower-content h3{
+  font-size: 16px;
+  margin-bottom: 0px;
+}
 
 }
 
diff --git a/public/assets/css/module-css/video.css b/public/assets/css/module-css/video.css
index 971a5cb..60bd177 100644
--- a/public/assets/css/module-css/video.css
+++ b/public/assets/css/module-css/video.css
@@ -10,7 +10,7 @@
 .video-section .bg-layer:before{
   position: absolute;
   content: '';
-  background: #0E1136;
+  background: #bc0000;
   width: 100%;
   height: 100%;
   left: 0px;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a816416..420e062 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -119,7 +119,7 @@
   --crimson-color: #DC143C;
   --orange-color: #FFA500;
   --text-color: #676767;
-  --title-color: #0E1136;
+  --title-color: #bc0000;
 }
 
 
@@ -260,7 +260,7 @@ h1,h2,h3,h4,h5,h6{
   top: 0;
   width: 100%;
   z-index: 9999999;
-  background: #0E1136;
+  background: #bc0000;
 }
 
 .preloader-close{
@@ -451,7 +451,7 @@ img {
 
 .theme-btn.btn-two:hover,
 .theme-btn.btn-one:hover{
-  background: #0E1136;
+  background: #bc0000;
 }
 
 .theme-btn:before, .theme-btn:after {
@@ -464,7 +464,7 @@ img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: #0E1136;
+  background: #bc0000;
   transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transform-origin: center;
   transform: scale(0) rotate(0);
@@ -526,7 +526,7 @@ img {
 }
 
 .theme-btn.btn-three{
-  color: #0E1136 !important;
+  color: #bc0000 !important;
   border: 1px solid #e5e5e5;
   box-shadow: none;
   background: #fff;
@@ -857,7 +857,7 @@ img {
 .header-top{
   position: relative;
   width: 100%;
-  background: #0E1136;
+  background: #bc0000;
   padding: 15.5px 0px;
 }
 
@@ -1128,7 +1128,7 @@ img {
   font-family: var(--soleil);
   letter-spacing: 0.8px;
   opacity:1;
-  color: #0E1136;
+  color: #bc0000;
   z-index:1;
   -webkit-transition:all 500ms ease;
   -moz-transition:all 500ms ease;
@@ -1169,7 +1169,7 @@ img {
   margin-top: 15px;
   z-index:100;
   display:none;
-  background: #0E1136;
+  background: #bc0000;
   opacity: 0;
   visibility: hidden;
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
@@ -1254,7 +1254,7 @@ img {
   left:100%;
   top:0%;
   margin-top: 15px;
-  background: #0E1136;
+  background: #bc0000;
   width:230px;
   z-index:100;
   display:none;
@@ -1837,7 +1837,7 @@ button.ltr {
 }
 
 .bg-color-1{
-  background-color: #F4F3F8;
+  background-color: #ffe6e6;
 }
 
 .list-style-one li{
@@ -1845,7 +1845,7 @@ button.ltr {
   display: block;
   font-size: 16px;
   line-height: 26px;
-  color: #0E1136;
+  color: #bc0000;
   font-weight: 500;
   padding-left: 40px;
   margin-bottom: 17px;
@@ -1855,7 +1855,7 @@ button.ltr {
   display: block;
   font-size: 16px;
   line-height: 26px;
-  color: #0E1136;
+  color: #bc0000;
   font-weight: 500;
   padding-left: 10px;
   margin-bottom: 17px;
@@ -1971,7 +1971,7 @@ button.ltr {
 
 .main-footer{
   position: relative;
-  background: #0E1136;
+  background: #bc0000;
 }
 
 .main-footer .widget-section{
@@ -2113,7 +2113,7 @@ button.ltr {
   bottom: -223px;
   width: 544px;
   height: 544px;
-  background: #181B3E;
+  background: #a80303;
   border-radius: 50%;
   -webkit-animation: zoom-fade 8s infinite linear;
   animation: zoom-fade 8s infinite linear;
@@ -2360,11 +2360,11 @@ button.ltr {
   position: relative;
   display: inline-block;
   font-size: 20px;
-  color: #0E1136;
+  color: #bc0000;
   width: 48px;
   height: 48px;
   line-height: 52px;
-  background: #F4F3F8;
+  background: #ffe6e6;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
@@ -2491,7 +2491,7 @@ button.ltr {
 }
 
 .header-style-three .menu-right-content li{
-  background: #F4F3F8;
+  background: #ffe6e6;
 }
 
 .sticky-header .logo-box{
@@ -2644,6 +2644,19 @@ button.ltr {
 
   
 
+  .sec-title h2{
+    font-size: 26px;
+    line-height: 34px;
+  }
+
+  .sec-pad{
+    padding: 30px 0px;
+  }
+
+  .sec-pad-2{
+    padding: 30px 0px;
+  }
+
 
 }
 blockquote {
@@ -2661,11 +2674,119 @@ blockquote {
 }
 
 
-
-
-
-
-
+.theme-btn-2{
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 600;
+  font-family: var(--soleil);
+  color: #fff !important;
+  text-align: center;
+  border-radius: 40px;
+  z-index: 1;
+  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
+  transition: all 500ms ease;
+}
+
+.theme-btn-2.btn-one{
+  background: var(--theme-color);
+}
+
+.theme-btn-2.btn-two{
+  background: var(--secondary-color);
+}
+
+.theme-btn-2.btn-two:hover,
+.theme-btn-2.btn-one:hover{
+  background: #bc0000;
+}
+
+.theme-btn-2:before, .theme-btn-2:after {
+  content: "";
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #bc0000;
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform-origin: center;
+  transform: scale(0) rotate(0);
+  z-index: -1;
+}
+
+.theme-btn-2:hover:before {
+  border-radius: 0;
+  transform: scale(1) rotate(-180deg);
+}
+
+.theme-btn-2:hover:after {
+  border-radius: 0;
+  transform: scale(1) rotate(180deg);
+}
+
+.theme-btn-2:after {
+  background: #0E1D40;
+}
+
+.theme-btn-2 span{
+  position: relative;
+  display: inline-block;
+  padding: 6px 12px 6px 12px;
+}
+
+.theme-btn-2 span:before{
+  position: absolute;
+  content: '';
+  background: var(--theme-color);
+  width: 30px;
+  height: 30px;
+  left: -5px;
+  top: -5px;
+  border-radius: 50%;
+  transform: scale(0,0);
+  transition: all 500ms ease;
+}
+
+.theme-btn-2:hover span:before{
+  transform: scale(1,1);
+}
+
+.theme-btn-2 span:after{
+  position: absolute;
+  content: '';
+  background: var(--theme-color);
+  width: 30px;
+  height: 30px;
+  right: -5px;
+  bottom: -5px;
+  border-radius: 50%;
+  transform: scale(0,0);
+  transition: all 500ms ease;
+}
+
+.theme-btn-2:hover span:after{
+  transform: scale(1,1);
+}
+
+
+
+
+@media(max-width: 500px) {
+  .theme-btn-2{
+  font-size: 12px;
+  line-height: 22px;
+}
+.row{
+  --bs-gutter-x: 20px;
+}
+}