diff --git a/api/campaign.js b/api/campaign.js
index 0d3307f..d1daf8a 100644
--- a/api/campaign.js
+++ b/api/campaign.js
@@ -251,7 +251,6 @@ const Campaign = [
         sImgS: sImgS7,
         description: "We help reunite you with your spouse, children, and parents in the U.S. quickly and safely.",
         category: "Family",
-        sImgS: sImgS2,
         cSimg: cSimg3,
         descriptiondetail: `
             <p>Reuniting with family members in the United States is one of the most meaningful and emotional aspects of immigration law. For many, the ability to bring a spouse, children, parents, or siblings to live together in the US represents not just a legal milestone, but a deeply personal achievement that shapes the future of entire families. Our legal team is dedicated to helping US citizens and lawful permanent residents navigate the complex and often lengthy family immigration process with clarity and confidence. We assist with preparing and filing family-based petitions, such as Form I-130, managing consular processing, and pursuing adjustment of status applications. We also handle challenging cases that involve inadmissibility waivers, prior visa denials, or documentation complications, ensuring that every step of the process is handled with precision and care. Whether it’s bringing a spouse from overseas, reuniting with children, or securing visas for elderly parents, our mission is to bridge distances and make family unity a reality.</p>
diff --git a/api/service.js b/api/service.js
index 3ce6f20..212a872 100644
--- a/api/service.js
+++ b/api/service.js
@@ -26,6 +26,11 @@ import develop1 from '/public/images/service/develop/img-1.jpg'
 import develop2 from '/public/images/service/develop/img-2.jpg'
 import develop3 from '/public/images/service/develop/img-3.jpg'
 
+import iconImg1 from '/public/images/home/banner/icons/family-immigration.webp'
+import iconImg2 from '/public/images/home/banner/icons/employment-visa.webp'
+import iconImg3 from '/public/images/home/banner/icons/deportation-defense.webp'
+import iconImg4 from '/public/images/home/banner/icons/citizenship-services.webp'
+
 
 
 
@@ -37,7 +42,7 @@ const Services = [
         slug: 'family-immigration',
         description: 'Reunite with loved ones via green cards, fiancé visas, and petitions from filing to processing.',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-credit',
+        iconImg: iconImg1,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -49,7 +54,7 @@ const Services = [
         description: 'Build your U.S. career with H-1B, L-1, O-1, EB visas, expert support for professionals, investors.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-job',
+        iconImg: iconImg2,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -61,7 +66,7 @@ const Services = [
         description: 'Protect your stay with removal cancellation, asylum claims, and strong representation.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-team-work',
+        iconImg: iconImg3,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -73,7 +78,7 @@ const Services = [
         description: 'Achieve citizenship with naturalization help, test, and guidance on residency requirements.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-bus',
+        iconImg: iconImg4,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
diff --git a/components/Features/Features.js b/components/Features/Features.js
index 96ab13a..d4c10dd 100644
--- a/components/Features/Features.js
+++ b/components/Features/Features.js
@@ -5,6 +5,7 @@ import "slick-carousel/slick/slick-theme.css";
 import Link from 'next/link'
 import SectionTitle from "../SectionTitle/SectionTitle";
 import Services from '../../api/service'
+import Image from "next/image";
 
 
 const settings = {
@@ -74,8 +75,14 @@ const Features = (props) => {
                             <div className="grid" key={srv}>
                                 <div className="wpo-service-item">
                                     <div className="wpo-service-text">
-                                        <div className="service-icon">
-                                            <i className={`fi ${service.icon}`}></i>
+                                        
+                                          <div className="service-icon">
+                                            <Image
+                                                src={service.iconImg}
+                                                alt={service.sTitle}
+                                                width={50}
+                                                height={50}
+                                            />
                                         </div>
                                         {/* <h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2> */}
                                         <h2 className="text-white">{service.sTitle}</h2>
diff --git a/components/FunFactVideo/FunFactVideo.js b/components/FunFactVideo/FunFactVideo.js
index f680274..4511943 100644
--- a/components/FunFactVideo/FunFactVideo.js
+++ b/components/FunFactVideo/FunFactVideo.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import VideoModal from '../ModalVideo/VideoModal';
-import fImg from '/public/images/funfact3.jpg'
+import videoImg from '/public/images/home/video.webp'
 import Image from 'next/image';
 
 const FunFactVideo = (props) => {
     return (
         <div className="funfact-video mt-0">
-            <Image src={fImg} alt="" />
+            <Image src={videoImg} alt="" />
             <VideoModal />
         </div>
     )
diff --git a/components/ServiceSection/ServiceSection.js b/components/ServiceSection/ServiceSection.js
index ed701ef..6669e5c 100644
--- a/components/ServiceSection/ServiceSection.js
+++ b/components/ServiceSection/ServiceSection.js
@@ -79,7 +79,11 @@ const ServiceSection = (props) => {
                                             <div className="features-dot">
                                                 <div className="dots"></div>
                                             </div>
-                                            <i className={feature.icon}></i>
+                                            <img
+                                            src={feature.img.src}
+                                            alt={`${feature.title} icon`}
+                                            className="feature-img"
+                                        />
                                         </div>
                                         <div className="feature-text">
                                             {/* <h2>
diff --git a/components/Testimonial/Testimonial.js b/components/Testimonial/Testimonial.js
index 58d3e67..16d4394 100644
--- a/components/Testimonial/Testimonial.js
+++ b/components/Testimonial/Testimonial.js
@@ -10,7 +10,7 @@ import thumb1 from '/public/images/testimonial/thumb1.png'
 import thumb2 from '/public/images/testimonial/thumb2.png'
 import thumb3 from '/public/images/testimonial/thumb3.png'
 import Image from 'next/image';
-import testimonialImage from '/public/images/about.png'
+import testiImage from '/public/images/home/quotes.webp'
 
 
 
@@ -58,7 +58,7 @@ const Testimonial = (props) => {
                                     <div className="left-slide">
 
                                         <div className="testimonial-img">
-                                            <Image src={testimonialImage} alt="" />
+                                            <Image src={testiImage} alt="" />
                                         </div>
 
                                     </div>
diff --git a/components/about/about.js b/components/about/about.js
index d44cd80..a70e909 100644
--- a/components/about/about.js
+++ b/components/about/about.js
@@ -11,7 +11,7 @@ const About = (props) => {
                     <div className="row align-items-center">
                         <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                             <div className="wpo-about-img">
-                                <Image src={props.abimg} alt="" />
+                                <Image src={props.introImg} alt="" />
                                 <div className="wpo-about-img-text">
                                     <h4>1998</h4>
 
diff --git a/components/hero/hero.js b/components/hero/hero.js
index a7bdd71..3af1a0e 100644
--- a/components/hero/hero.js
+++ b/components/hero/hero.js
@@ -22,18 +22,18 @@ const Hero = () => {
                 <div className="hero-wrapper">
                     <Slider {...settings}>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-1.jpg'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-1.webp'})` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Family Immigration Assistance</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Reuniting loved ones, one case at a time.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/about" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
@@ -41,54 +41,54 @@ const Hero = () => {
                         </div>
 
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-2.jpg'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-2.webp'})` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Employment & Work Visa Solutions</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Your career deserves a global gateway.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/our-approach" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-3.jpg'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-3.webp'})` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Investor & Business Immigration</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Building futures through business opportunities.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/services" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-4.jpg'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-4.webp'})` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Deportation Defense & Legal Representation</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Fighting for your right to stay.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/contact" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
diff --git a/pages/index.js b/pages/index.js
index 36c2074..1d88d08 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,7 +13,7 @@ import BlogSection from '../components/BlogSection/BlogSection';
 import InstagramSection from '../components/InstagramSection/InstagramSection';
 import Donors from '../components/Donors/Donors';
 import PartnerSection from '../components/PartnerSection/PartnerSection';
-import abimg from '/public/images/about.jpg'
+import introImg from '/public/images/home/expert-immigration-guidance.webp'
 import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
 import Footer from '../components/footer/Footer';
 import Scrollbar from '../components/scrollbar/scrollbar';
@@ -24,7 +24,7 @@ const HomePage = () => {
             <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
             <Hero />
             <Features sClass={'wpo-service-section-s2'} />
-            <About abimg={abimg} abClass={'wpo-about-section-s2'}/>
+            <About introImg={introImg} abClass={'wpo-about-section-s2'}/>
             <ServiceSection />
             <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
             <ServiceSectionS2 />
diff --git a/public/images/home/banner/banner-1.webp b/public/images/home/banner/banner-1.webp
new file mode 100644
index 0000000..0922f7e
Binary files /dev/null and b/public/images/home/banner/banner-1.webp differ
diff --git a/public/images/home/banner/banner-2.webp b/public/images/home/banner/banner-2.webp
new file mode 100644
index 0000000..ef4b468
Binary files /dev/null and b/public/images/home/banner/banner-2.webp differ
diff --git a/public/images/home/banner/banner-3.webp b/public/images/home/banner/banner-3.webp
new file mode 100644
index 0000000..4bc3d12
Binary files /dev/null and b/public/images/home/banner/banner-3.webp differ
diff --git a/public/images/home/banner/banner-4.webp b/public/images/home/banner/banner-4.webp
new file mode 100644
index 0000000..04d40d3
Binary files /dev/null and b/public/images/home/banner/banner-4.webp differ
diff --git a/public/images/home/banner/icons/citizenship-services.webp b/public/images/home/banner/icons/citizenship-services.webp
new file mode 100644
index 0000000..eb7d398
Binary files /dev/null and b/public/images/home/banner/icons/citizenship-services.webp differ
diff --git a/public/images/home/banner/icons/deportation-defense.webp b/public/images/home/banner/icons/deportation-defense.webp
new file mode 100644
index 0000000..4661d30
Binary files /dev/null and b/public/images/home/banner/icons/deportation-defense.webp differ
diff --git a/public/images/home/banner/icons/employment-visa.webp b/public/images/home/banner/icons/employment-visa.webp
new file mode 100644
index 0000000..a34cb53
Binary files /dev/null and b/public/images/home/banner/icons/employment-visa.webp differ
diff --git a/public/images/home/banner/icons/family-immigration.webp b/public/images/home/banner/icons/family-immigration.webp
new file mode 100644
index 0000000..c7fb842
Binary files /dev/null and b/public/images/home/banner/icons/family-immigration.webp differ
diff --git a/public/images/home/expert-immigration-guidance.webp b/public/images/home/expert-immigration-guidance.webp
new file mode 100644
index 0000000..106b875
Binary files /dev/null and b/public/images/home/expert-immigration-guidance.webp differ
diff --git a/public/images/home/icons/expert-preparation.webp b/public/images/home/icons/expert-preparation.webp
new file mode 100644
index 0000000..4d0ff96
Binary files /dev/null and b/public/images/home/icons/expert-preparation.webp differ
diff --git a/public/images/home/icons/ongoing-support.webp b/public/images/home/icons/ongoing-support.webp
new file mode 100644
index 0000000..737b59f
Binary files /dev/null and b/public/images/home/icons/ongoing-support.webp differ
diff --git a/public/images/home/icons/strategic-planning.webp b/public/images/home/icons/strategic-planning.webp
new file mode 100644
index 0000000..520826d
Binary files /dev/null and b/public/images/home/icons/strategic-planning.webp differ
diff --git a/public/images/home/quotes.webp b/public/images/home/quotes.webp
new file mode 100644
index 0000000..7afb435
Binary files /dev/null and b/public/images/home/quotes.webp differ
diff --git a/public/images/home/section-3/business-1.webp b/public/images/home/section-3/business-1.webp
new file mode 100644
index 0000000..ddfbaa4
Binary files /dev/null and b/public/images/home/section-3/business-1.webp differ
diff --git a/public/images/home/section-3/business-2.webp b/public/images/home/section-3/business-2.webp
new file mode 100644
index 0000000..12b34a0
Binary files /dev/null and b/public/images/home/section-3/business-2.webp differ
diff --git a/public/images/home/section-3/business-3.webp b/public/images/home/section-3/business-3.webp
new file mode 100644
index 0000000..c8f4599
Binary files /dev/null and b/public/images/home/section-3/business-3.webp differ
diff --git a/public/images/home/section-3/citizenship-services-1.webp b/public/images/home/section-3/citizenship-services-1.webp
new file mode 100644
index 0000000..1664ce5
Binary files /dev/null and b/public/images/home/section-3/citizenship-services-1.webp differ
diff --git a/public/images/home/section-3/citizenship-services-2.webp b/public/images/home/section-3/citizenship-services-2.webp
new file mode 100644
index 0000000..5f55c00
Binary files /dev/null and b/public/images/home/section-3/citizenship-services-2.webp differ
diff --git a/public/images/home/section-3/citizenship-services-3.webp b/public/images/home/section-3/citizenship-services-3.webp
new file mode 100644
index 0000000..f23bc36
Binary files /dev/null and b/public/images/home/section-3/citizenship-services-3.webp differ
diff --git a/public/images/home/section-3/emergency-relief-1.webp b/public/images/home/section-3/emergency-relief-1.webp
new file mode 100644
index 0000000..201dc9c
Binary files /dev/null and b/public/images/home/section-3/emergency-relief-1.webp differ
diff --git a/public/images/home/section-3/emergency-relief-2.webp b/public/images/home/section-3/emergency-relief-2.webp
new file mode 100644
index 0000000..e22c961
Binary files /dev/null and b/public/images/home/section-3/emergency-relief-2.webp differ
diff --git a/public/images/home/section-3/emergency-relief-3.webp b/public/images/home/section-3/emergency-relief-3.webp
new file mode 100644
index 0000000..a18db0f
Binary files /dev/null and b/public/images/home/section-3/emergency-relief-3.webp differ
diff --git a/public/images/home/section-3/family-1.webp b/public/images/home/section-3/family-1.webp
new file mode 100644
index 0000000..bf23cfd
Binary files /dev/null and b/public/images/home/section-3/family-1.webp differ
diff --git a/public/images/home/section-3/family-2.webp b/public/images/home/section-3/family-2.webp
new file mode 100644
index 0000000..fc4c09f
Binary files /dev/null and b/public/images/home/section-3/family-2.webp differ
diff --git a/public/images/home/section-3/family-3.webp b/public/images/home/section-3/family-3.webp
new file mode 100644
index 0000000..59da5a1
Binary files /dev/null and b/public/images/home/section-3/family-3.webp differ
diff --git a/public/images/home/section-3/removal-defense-1.webp b/public/images/home/section-3/removal-defense-1.webp
new file mode 100644
index 0000000..d2dedec
Binary files /dev/null and b/public/images/home/section-3/removal-defense-1.webp differ
diff --git a/public/images/home/section-3/removal-defense-2.webp b/public/images/home/section-3/removal-defense-2.webp
new file mode 100644
index 0000000..dc5f953
Binary files /dev/null and b/public/images/home/section-3/removal-defense-2.webp differ
diff --git a/public/images/home/section-3/removal-defense-3.webp b/public/images/home/section-3/removal-defense-3.webp
new file mode 100644
index 0000000..c46e6b6
Binary files /dev/null and b/public/images/home/section-3/removal-defense-3.webp differ
diff --git a/public/images/home/video.webp b/public/images/home/video.webp
new file mode 100644
index 0000000..3339cea
Binary files /dev/null and b/public/images/home/video.webp differ
diff --git a/styles/sass/page/_home-style-3.scss b/styles/sass/page/_home-style-3.scss
index 9d6abad..e6c9636 100644
--- a/styles/sass/page/_home-style-3.scss
+++ b/styles/sass/page/_home-style-3.scss
@@ -1,309 +1,205 @@
 /*======================================
 6. Home-style-3
- =======================================*/
+=======================================*/
 
 /* 6.1 wpo-features-s2 */
-
 .wpo-features-s2 {
-    .features-wrap {
-        .feature-item {
-            padding: 44px 50px;
-            background: #d73a3e3d;
-            // box-shadow: 0px 2px 10px rgba(0, 18, 52, 0.15);
-            border-radius: 20px;
-            text-align: center;
+  .features-wrap {
+    .feature-item {
+      padding: 44px 50px;
+      background: rgba(215, 58, 62, 0.24); // #d73a3e3d
+      border-radius: 20px;
+      text-align: center;
 
-            @media(max-width:1199px) {
-                padding: 44px 30px;
-            }
+      @media (max-width: 1199px) {
+        padding: 44px 30px;
+      }
 
-            @media(max-width:991px) {
-                margin-bottom: 30px;
-            }
+      @media (max-width: 991px) {
+        margin-bottom: 30px;
+      }
 
-            .icon {
-                width: 130px;
-                height: 130px;
-                line-height: 130px;
-                border: 1px solid $theme-primary-color;
-                margin: auto;
-                border-radius: 50%;
-                margin-bottom: 30px;
-                position: relative;
-
-                .fi {
-                    &:before {
-                        font-size: 60px;
-                        background: $theme-primary-color-gradient;
-                        -webkit-background-clip: text;
-                        -webkit-text-fill-color: transparent;
-                    }
-                }
-            }
-
-            .feature-text {
-
-                h2 {
-                    font-weight: 450;
-                    font-size: 30px;
-                    line-height: 38px;
-                    text-align: center;
-
-                    a {
-                        color: $dark-gray;
-
-                        &:hover {
-                            color: $theme-primary-color;
-                        }
-                    }
-                }
-
-                p {
-                    margin-bottom: 0;
-                }
-            }
-        }
-    }
-
-    .features-dot {
-        width: 100%;
-        height: 100%;
-        left: 56%;
-        top: 8%;
-    }
-
-    .icon i.fi {
-        position: absolute;
-        left: 32px;
-        top: 0;
-    }
-
-    .dots {
-        width: 15px;
-        height: 15px;
-        background: $theme-primary-color-gradient;
+      .icon {
+        width: 130px;
+        height: 130px;
+        border: 1px solid $theme-primary-color;
+        margin: auto;
         border-radius: 50%;
-        left: 25px;
-        top: 0;
+        margin-bottom: 30px;
         position: relative;
 
+        // Flexbox center for image
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff; // optional — keeps circle filled
+
+        .feature-img {
+          width: 60px; // adjust as needed
+          height: 60px;
+          object-fit: contain;
+          display: block;
+        }
+      }
+
+      .feature-text {
+        h2 {
+          font-weight: 450;
+          font-size: 30px;
+          line-height: 38px;
+          text-align: center;
+
+          a {
+            color: $dark-gray;
+            text-decoration: none;
+
+            &:hover {
+              color: $theme-primary-color;
+            }
+          }
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+      }
     }
+  }
 
-    .features-content h2 {
-        font-size: 22px;
-        font-weight: 600;
-        margin-bottom: 15px;
-        margin-top: 10px;
-    }
-
-    .features-dot:nth-child(1) {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-        -webkit-animation: features-dot_1 2s infinite linear;
-        -moz-animation: features-dot_1 2s infinite linear;
-        -o-animation: features-dot_1 2s infinite linear;
-        animation: features-dot_1 2s infinite linear;
-        -webkit-animation-play-state: paused;
-        -moz-animation-play-state: paused;
-        -o-animation-play-state: paused;
-        animation-play-state: paused;
-    }
-
-    .feature-item .features-wrapper:hover .features-dot:nth-child(1) {
-        -webkit-animation-play-state: running;
-        -moz-animation-play-state: running;
-        -o-animation-play-state: running;
-        animation-play-state: running;
-    }
-
-
-    @-webkit-keyframes features-dot_1 {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @-moz-keyframes features-dot_1 {
-        0% {
-            -moz-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -moz-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @-o-keyframes features-dot_1 {
-        0% {
-            -o-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -o-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @keyframes features-dot_1 {
-        0% {
-            -webkit-transform: rotate(0deg);
-            -moz-transform: rotate(0deg);
-            -o-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(360deg);
-            -moz-transform: rotate(360deg);
-            -o-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @-webkit-keyframes features-dot_2 {
-        0% {
-            -webkit-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
-    @-moz-keyframes features-dot_2 {
-        0% {
-            -moz-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -moz-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
-    @-o-keyframes features-dot_2 {
-        0% {
-            -o-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -o-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
-    @keyframes features-dot_2 {
-        0% {
-            -webkit-transform: rotate(180deg);
-            -moz-transform: rotate(180deg);
-            -o-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(540deg);
-            -moz-transform: rotate(540deg);
-            -o-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
+ .features-dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;  // same size as icon
+  height: 100%;
+  transform-origin: center center; // rotate around center
 }
 
+  .dots {
+    width: 15px;
+    height: 15px;
+    background: $theme-primary-color-gradient;
+    border-radius: 50%;
+    left: 25px;
+    top: 0;
+    position: relative;
+  }
+
+  .features-content {
+    h2 {
+      font-size: 22px;
+      font-weight: 600;
+      margin-bottom: 15px;
+      margin-top: 10px;
+    }
+  }
+
+  .features-dot:nth-child(1) {
+    transform: rotate(0deg);
+    animation: features-dot_1 2s infinite linear;
+    animation-play-state: paused;
+  }
+
+  .feature-item .features-wrapper:hover .features-dot:nth-child(1) {
+    animation-play-state: running;
+  }
+
+  @keyframes features-dot_1 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes features-dot_2 {
+    0% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(540deg);
+    }
+  }
+}
 
 /* 6.2 wpo-about-section-s3 */
-
 .wpo-about-section-s3 {
-    @media(max-width:991px) {
-        padding-top: 70px;
+  @media (max-width: 991px) {
+    padding-top: 70px;
+  }
+
+  @media (max-width: 575px) {
+    padding-top: 50px;
+  }
+
+  .wpo-about-wrap {
+    .wpo-about-img {
+      padding: 0;
+      border: 0;
+      margin-left: -80px;
+
+      @media (max-width: 991px) {
+        margin-left: 0;
+      }
+
+      .wpo-about-img-text {
+        display: none;
+      }
     }
 
-    @media(max-width:575px) {
-        padding-top: 50px;
-    }
-
-    .wpo-about-wrap {
-        .wpo-about-img {
-            padding: 0;
-            border: 0;
-            margin-left: -80px;
-
-            @media(max-width:991px) {
-                margin-left: 0;
-            }
-
-            .wpo-about-img-text{
-                display: none;
-            }
-        }
-
-        .wpo-about-text {
-            @media(max-width:991px) {
-                margin-top: 30px;
-            }
-        }
+    .wpo-about-text {
+      @media (max-width: 991px) {
+        margin-top: 30px;
+      }
     }
+  }
 }
 
-
 /* 6.3 wpo-fun-fact-section-s3 */
-
-.funfact-wrap-sec{
-    .funfact-video{
-        display: none;
-    }
+.funfact-wrap-sec {
+  .funfact-video {
+    display: none;
+  }
 }
 
 .wpo-fun-fact-section-s3 {
-    padding-bottom: 0;
-    background: linear-gradient(90deg, #c12026 11.32%, #c12026 95.28%);
+  padding-bottom: 0;
+  background: linear-gradient(90deg, #c12026 11.32%, #c12026 95.28%);
+  position: relative;
 
-    &:before {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background: url(/images/particale.png) no-repeat center center;
-        background-size: cover;
-    }
-
-    .wpo-fun-fact-wrap {
-        .wpo-fun-fact-grids {
-            padding: 80px 0 70px;
-
-            @media(max-width:1199px){
-                padding: 50px 0 40px;
-            }
-            .grid+.grid:before {
-                background: $white;
-            }
-        } 
+  &:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: url(/images/particale.png) no-repeat center center;
+    background-size: cover;
+  }
+
+  .wpo-fun-fact-wrap {
+    .wpo-fun-fact-grids {
+      padding: 80px 0 70px;
+
+      @media (max-width: 1199px) {
+        padding: 50px 0 40px;
+      }
+
+      .grid + .grid:before {
+        background: $white;
+      }
     }
+  }
 }
 
-/* 6.4 wpo-campaign-area-s3  */
-
+/* 6.4 wpo-campaign-area-s3 */
 .wpo-campaign-area-s3 {
-     margin: 0;
-    .shape-left,
-    .shape-right {
-        display: none;
-    }
-}
\ No newline at end of file
+  margin: 0;
+
+  .shape-left,
+  .shape-right {
+    display: none;
+  }
+}
diff --git a/utils/constant.utils.js b/utils/constant.utils.js
index e68811d..6f35e19 100644
--- a/utils/constant.utils.js
+++ b/utils/constant.utils.js
@@ -26,24 +26,27 @@ import develop1 from '/public/images/service/develop/img-1.jpg'
 import develop2 from '/public/images/service/develop/img-2.jpg'
 import develop3 from '/public/images/service/develop/img-3.jpg'
 
+import iconImg1 from '/public/images/home/icons/strategic-planning.webp'
+import iconImg2 from '/public/images/home/icons/expert-preparation.webp'
+import iconImg3 from '/public/images/home/icons/ongoing-support.webp'
 
 export const featuresData = [
   {
-    icon: "fi flaticon-charity",
+    img: iconImg1,
     title: "Strategic Planning",
     link: "/team",
     description:
       "We create custom legal strategies based on immigration law, policy changes, and your needs."
   },
   {
-    icon: "fi flaticon-conference-1",
+    img: iconImg2,
     title: "Expert Preparation",
     link: "/campaign",
     description:
       "Careful document preparation, evidence gathering, and filing to boost your application success."
   },
   {
-    icon: "fi flaticon-community",
+    img: iconImg3,
     title: "Ongoing Support",
     link: "/volunteer",
     description:
@@ -51,7 +54,6 @@ export const featuresData = [
   }
 ];
 
-
 export const TabServices = [
   {
     sTitle: "Reunite With Loved Ones",
@@ -257,4 +259,5 @@ export const MissionVision = [
     ssImg1: sSingleimg1,
     ssImg2: sSingleimg2,
   },
-]
\ No newline at end of file
+]
+