diff --git a/api/service.js b/api/service.js
index 03f0473..9e50692 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'
+
 
 
 
@@ -38,7 +43,7 @@ const Services = [
         description: 'Reunite with loved ones through marriage-based green cards, fiancé visas, and family preference petitions. We handle every step from petition filing to consular processing.',
         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-credit',
+        iconImg: iconImg1,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -50,7 +55,7 @@ const Services = [
         description: 'Secure your career in America with H-1B, L-1, O-1 visas, or permanent residency through EB-1, EB-2, and EB-3 categories. Expert guidance for professionals and 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,
     },
@@ -62,7 +67,7 @@ const Services = [
         description: 'Protect your right to remain in America. Our aggressive defense strategies include cancellation of removal, asylum claims, and appellate 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,
     },
@@ -74,7 +79,7 @@ const Services = [
         description: 'Complete your American journey with naturalization guidance, citizenship test preparation, and assistance with complex 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 9f646a7..c150ea3 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,9 +75,16 @@ 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>
                                         <p>
                                             {service.description.length > 100
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 d183c00..af46e0f 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 4eb2a9f..24a61c4 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 276f965..23c4a20 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
+]
+