services images updated

src/app/globals.css

@@ -2512,6 +2512,12 @@ body {
   margin-bottom: 40px;
 }
 
+@media (max-width: 991px) {
+  .work-process-section .shape-1 {
+    display: none;
+  }
+}
+
 .gt-btn.style5 {
   display: inline-flex;
   align-items: center;
@@ -2630,7 +2636,7 @@ body {
 }
 
 .card-3 {
-  bottom: 60%;
+  bottom: 20%;
   left: 0;
 }
 
@@ -2647,7 +2653,7 @@ body {
 }
 
 .card-6 {
-  bottom: 20%;
+  bottom: 60%;
   right: 0;
 }
 
@@ -2657,11 +2663,11 @@ body {
 }
 
 /* Mirror Number for right cards */
-.card-6 .number,
+/* .card-6 .number,
 .card-7 .number {
   left: auto;
   right: -15px;
-}
+} */
 
 @media (max-width: 1399px) {
   .work-process-thumb {
@@ -2671,22 +2677,22 @@ body {
 }
 
 @media (max-width: 1199px) {
-  .work-process-wrapper.style2 {
+  /* .work-process-wrapper.style2 {
     padding: 80px 40px;
-  }
+  } */
 
   .work-process-content .section-title .title {
     font-size: 36px;
   }
 
   .work-process-thumb {
-    margin-top: 50px;
+    /* margin-top: 50px; */
     scale: 1;
     height: auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
-    padding: 20px;
+    /* padding: 20px; */
   }
 
   .work-process-thumb::before,
@@ -4160,11 +4166,29 @@ body {
 
 @media (max-width: 1199px) {
   .about-two__img {
-    float: none;
+    /* float: none; */
     margin-bottom: 50px;
   }
 }
 
+@media (max-width: 1199px) {
+
+  .about-two__shape {
+    display: none;
+  }
+
+  .about-two{
+    margin: 0px 0px;
+  }
+
+}
+
+@media (max-width: 1199px) and (min-width: 992px) {
+  .about-two__img {
+    right: 170px;
+  }
+}
+
 .about-two__content {
   position: relative;
 }
@@ -4303,9 +4327,45 @@ body {
 }
 
 .about-two__list li span {
-  font-size: 45px;
-  color: var(--pelocis-black, #1a1f2b);
-  transition: all 300ms ease;
+  display: none;
+}
+
+.about-two__list__icon-box {
+  position: relative;
+  width: 70px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.about-two__list__circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  animation: rotate 15s linear infinite;
+}
+
+.about-two__list__icon {
+  position: relative;
+  z-index: 1;
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 [class^="icon-"],
@@ -4900,7 +4960,7 @@ body {
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(var(--pelocis-black-rgb, 34, 34, 34), 0.94);
+  /* background-color: rgba(var(--pelocis-black-rgb, 34, 34, 34), 0.94); */
 }
 
 .history-two .container {
@@ -5237,7 +5297,7 @@ body {
 .about-three__card__icon {
   width: 87px;
   height: 87px;
-  background-color: var(--pelocis-gray, #F5F2EF);
+  background-color: #1a1f2b;
   border-radius: 50%;
   display: flex;
   align-items: center;

src/components/about/Results.tsx

@@ -13,7 +13,7 @@ const ResultsSection = () => {
                                     <h6 className="sec-title__tagline">Discover Our Process</h6>
                                     <h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
                                 </div>
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                <img src="/assets/images/services/deliver/element.webp" alt="" className="sec-title__text-shape" />
                                 <p>
                                     Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
                                 </p>
@@ -55,11 +55,11 @@ const ResultsSection = () => {
                     <div className="col-lg-6">
                         <div className="image-area-wrapper p-relative">
                             <div className="main-image">
-                                <img src="/assets/img-app/about/about-img5.png" alt="Business Meeting" />
+                                <img src="/assets/images/services/deliver/big-img.webp" alt="Business Meeting" />
                             </div>
                             <div className="circular-image">
                                 <div className="inner-circle">
-                                    <img src="/assets/img-app/about/about-img5.png" alt="Profile" />
+                                    <img src="/assets/images/services/deliver/small-img.webp" alt="Profile" />
                                 </div>
                             </div>
                         </div>

src/components/careers/ServiceSection.tsx

@@ -54,7 +54,7 @@ const ServiceSection2 = () => {
             ></div> */}
             <div
                 className="service-three__shape"
-                style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}
+                style={{ backgroundImage: "url(/assets/images/services/service/bottom-left.webp)" }}
             ></div>
             <div className="container">
                 <div className="sec-title-wrapper text-center wow fadeInUp" data-wow-delay=".3s">
@@ -63,11 +63,11 @@ const ServiceSection2 = () => {
                         <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
                         <h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3>
                     </div>
-                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                    <img src="/assets/images/services/service/element-small.webp" alt="" className="sec-title__text-shape" />
                 </div>
 
                 <div className="row">
-                    {services.map((service, index) => (
+                    {services.slice(0, 6).map((service, index) => (
                         <div
                             key={index}
                             className="col-lg-4 col-md-6 wow fadeInUp"
@@ -77,7 +77,7 @@ const ServiceSection2 = () => {
                             <div className="service-three__item text-center">
                                 <div className="service-three__item__content">
                                     <div className="service-three__item__icon">
-                                        <span className={service.icon}></span>
+                                        <img src={service.icon} alt="icon" width="55" height="40" />
                                     </div>
                                     <h3 className="service-three__item__title">
                                         <Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>

src/components/careers/WorkProcessSection.tsx

@@ -49,19 +49,20 @@ const WorkProcessSection2 = () => {
                 <a href="#">
                     <img
                         className="rotate360"
-                        src="/assets/imgs/shapes/shape-10.png"
+                        src="/assets/images/services/journey/element-1.webp"
                         alt="shape"
+                        style={{ opacity: 0.5 }}
                     />
                 </a>
             </div>
             <div className="container">
                 <div className="work-process-wrapper style2">
                     <div className="shape1 d-none d-xxl-block">
-                        <img src="/assets/imgs/shapes/shape-10.png" />
+                        <img src="/assets/images/services/journey/element-2.webp" />
                     </div>
-                    <div className="shape2 d-none d-xxl-block">
+                    {/* <div className="shape2 d-none d-xxl-block">
                         <img src="/assets/imgs/shapes/shape-10.png" />
-                    </div>
+                    </div> */}
 
                     <div className="row gy-5 gx-70 align-items-center">
                         <div className="col-xl-5">
@@ -72,7 +73,7 @@ const WorkProcessSection2 = () => {
                                         <h6 className="sec-title__tagline">digital transformation journey</h6>
                                         <h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3>
                                     </div>
-                                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                    {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
                                 </div>
                                 <p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
                                     Our process begins with consultation and strategy development, where we understand your vision and create a customized plan aligned with your goals. We then move into design and development, combining creativity and technology to build functional and visually appealing solutions. Next, we implement and optimize the strategy to ensure efficiency, performance, and measurable impact. After thorough testing, we launch your project smoothly with a focus on quality and reliability. Finally, we provide ongoing support, continuous analysis, and client feedback integration to ensure long-term growth and sustained digital success.
@@ -84,7 +85,7 @@ const WorkProcessSection2 = () => {
                             <div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
                                 <div className="thumb2_1">
                                     <img
-                                        src="/assets/img-app/home/section8/left.webp"
+                                        src="/assets/images/services/journey/centre-img.webp"
                                         style={{ filter: "none", maxWidth: "100%" }}
                                         alt="thumb"
                                     />

src/components/common/SectionTitle.tsx

@@ -26,13 +26,13 @@ const SectionTitle: React.FC<SectionTitleProps> = ({
                     dangerouslySetInnerHTML={{ __html: title }}
                 />
             </div>
-            {showShape && (
+            {/* {showShape && (
                 <img
                     src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png"
                     alt=""
                     className="sec-title__text-shape"
                 />
-            )}
+            )} */}
         </div>
     );
 };

src/components/home/AboutTwo.tsx

@@ -7,14 +7,15 @@ const AboutTwo = () => {
         <section className="about-two">
             <div className="about-two__shape"></div>
             <img
-                src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-two-about-shape-1.png"
+                src="/assets/images/services/why/left-element.webp"
                 alt="shape"
                 className="about-two__shape__two"
             />
             <img
-                src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-two-about-shape-2.png"
+                src="/assets/images/services/why/right-element.webp"
                 alt="shape"
                 className="about-two__shape__three"
+                style={{ opacity: 0.4 }}
             />
             <div className="container">
                 <div className="row align-items-center">
@@ -41,21 +42,30 @@ const AboutTwo = () => {
                             </p> */}
                             <ul className="about-two__list">
                                 <li>
-                                    <span className="icon-social-care"></span>
+                                    <div className="about-two__list__icon-box">
+                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img src="/assets/images/services/why/icon-1.webp" alt="icon" className="about-two__list__icon" />
+                                    </div>
                                     <div className="about-two__list__content">
                                         <h3 className="about-two__list__title">Latest Technology</h3>
                                         <p className="about-two__list__text">Harness advanced tech for top-notch web, app, and digital projects.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <span className="icon-social-care"></span>
+                                    <div className="about-two__list__icon-box">
+                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img src="/assets/images/services/why/icon-2.webp" alt="icon" className="about-two__list__icon" />
+                                    </div>
                                     <div className="about-two__list__content">
                                         <h4 className="about-two__list__title">Certified Experts</h4>
                                         <p className="about-two__list__text">Trust our certified team for expert guidance in all digital realms.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <span className="icon-social-care"></span>
+                                    <div className="about-two__list__icon-box">
+                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img src="/assets/images/services/why/icon-3.webp" alt="icon" className="about-two__list__icon" />
+                                    </div>
                                     <div className="about-two__list__content">
                                         <h4 className="about-two__list__title">Get Reasonable Price</h4>
                                         <p className="about-two__list__text">Get value-driven solutions at prices tailored for your business needs.</p>

src/components/home/home-1/FeaturesSection.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 interface FeatureItem {
     title: string;
     desc: string;
-    icon: React.ReactNode;
+    icon: string;
     image: string;
     imageAlt: string;
     defaultActive?: boolean;
@@ -55,26 +55,26 @@ const features: FeatureItem[] = [
     {
         title: "Comprehensive digital development",
         desc: "Expert web, app development and e-commerce solutions.",
-        icon: <IdeaIcon />,
-        image: "/assets/img-app/about/about-img2.png",
-        imageAlt: "Versatile Latest Technology",
+        icon: "/assets/images/services/feature/comprehensive.png",
+        image: "/assets/images/services/feature/1-1.webp",
+        imageAlt: "Comprehensive Digital Development",
         delay: 0,
     },
     {
         title: "Strategic online growth solutions",
         desc: "Strategic SEO and digital marketing for growth.",
-        icon: <GrowthIcon />,
-        image: "/assets/img-app/about/about-img4.png",
-        imageAlt: "Business Planning Strategies",
+        icon: "/assets/images/services/feature/strategic.png",
+        image: "/assets/images/services/feature/1-2.webp",
+        imageAlt: "Strategic Online Growth Solutions",
         defaultActive: true,
         delay: 200,
     },
     {
         title: "Creative design and branding excellence",
         desc: "Creative graphic design and branding strategy services.",
-        icon: <TeamIcon />,
-        image: "/assets/img-app/about/about-img1.png",
-        imageAlt: "Professional Team Members",
+        icon: "/assets/images/services/feature/creative.png",
+        image: "/assets/images/services/feature/1-3.webp",
+        imageAlt: "Creative Design and Branding Excellence",
         delay: 400,
     },
 ];
@@ -140,7 +140,13 @@ const FeaturesSection = () => {
                                 <div className="fo-hover-card">
                                     {/* Circle icon badge above the hover card */}
                                     <div className="fo-hover-icon">
-                                        {feature.icon}
+                                        <Image
+                                            src={feature.icon}
+                                            alt={feature.title}
+                                            width={50}
+                                            height={50}
+                                            style={{ objectFit: "contain" }}
+                                        />
                                     </div>
                                     <h3 className="fo-hover-title">{feature.title}</h3>
                                     {/* <Link href="#" className="fo-hover-btn">
@@ -170,7 +176,13 @@ const FeaturesSection = () => {
                                             />
                                         </div>
                                         <div className="fo-card-icon">
-                                            {feature.icon}
+                                            <Image
+                                                src={feature.icon}
+                                                alt={feature.title}
+                                                width={50}
+                                                height={50}
+                                                style={{ objectFit: "contain" }}
+                                            />
                                         </div>
                                     </div>
                                 </div>

src/components/home/home-1/ServiceThreeSlider.tsx

@@ -39,7 +39,7 @@ const ServiceThreeSlider = () => {
 
                 <div className="swiper service-active-1">
                     <div className="swiper-wrapper">
-                        {services.map((service, index) => (
+                        {services.slice(0, 6).map((service, index) => (
                             <div key={index} className="swiper-slide">
                                 <div className="service-three__item text-center">
                                     <div className="service-three__item__content">

src/components/home/home-2/WorkProcessSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const WorkProcessSection = () => (
-    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}>
+    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/images/services/process/bg.webp)" }}>
         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
         <div className="small-container">
             <div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s">
@@ -15,14 +15,14 @@ const WorkProcessSection = () => (
             </div>
             <div className="row g-4">
                 {[
-                    { num: 1, title: "Our Mission", icon: "icon-4.png", desc: "Empowering businesses with innovative digital growth solutions."},
-                    { num: 2, title: "Our Vision", icon: "icon-5.png", desc: "Redefining digital innovation for a connected, efficient future."},
-                    { num: 3, title: "Our Values", icon: "icon-6.png", desc: "Redefining digital innovation for a connected, efficient future."}
+                    { num: 1, title: "Our Mission", icon: "our-mission.webp", desc: "Empowering businesses with innovative digital growth solutions."},
+                    { num: 2, title: "Our Vision", icon: "our-vision.webp", desc: "Redefining digital innovation for a connected, efficient future."},
+                    { num: 3, title: "Our Values", icon: "our-values.webp", desc: "Redefining digital innovation for a connected, efficient future."}
                 ].map((proc, i) => (
                     <div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
                         <div className="work-process-box text-center">
                             <div className="icon-box p-relative">
-                                <img src={`/assets/imgs/icon/${proc.icon}`} alt="img" />
+                                <img src={`/assets/images/services/process/${proc.icon}`} alt="img" />
                                 <span>{proc.num}</span>
                             </div>
                             <div className="content">

src/components/home/home-3/ChooseSection.tsx

@@ -2,26 +2,26 @@ import React from "react";
 import SectionTitle from "@/components/common/SectionTitle";
 
 const ChooseSection = () => (
-    <section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg-2.png)" }}>
-        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-49.png)" }}></div>
+    <section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/images/services/choose/bg.webp)" }}>
+        <div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-1.webp)", opacity: 0.3 }}></div>
         <div className="small-container">
             <div className="row">
                 <div className="col-xxl-6 col-xl-6 col-lg-6">
                     <div className="choose-3-image-area p-relative">
-                        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
-                        <figure className="image w-img pr-100">
-                            <img src="/assets/imgs/resources/choose-2.jpg" alt="" />
+                        <div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-2.webp)" }}></div>
+                        <figure className="image w-img">
+                            <img src="/assets/images/services/choose/grid.webp" alt="" />
                         </figure>
-                        <div className="image-3-area">
+                        {/* <div className="image-3-area">
                             <div className="image-3 p-relative">
                                 <img src="/assets/imgs/about/about-2.jpg" alt="" />
-                                {/* <div className="play-btn">
+                                <div className="play-btn">
                                     <div className="video_player_btn">
                                         <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                                     </div>
-                                </div> */}
+                                </div>
                             </div>
-                        </div>
+                        </div> */}
                         <h1>Metatron</h1>
                     </div>
                 </div>

src/components/services-digital-solutions/ServiceDetails.tsx

@@ -70,7 +70,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                     <div className="col-md-12 col-lg-8">
                         <div className="service-details__content">
                             <div className="service-details__thumbnail">
-                                <img src={service.image} alt={service.title} />
+                                <img src={service.bigImage} alt={service.title} />
                             </div>
 
                             {service.content && (

src/components/web-development-service/style.css

@@ -326,7 +326,7 @@ h2,
   left: 0px;
   opacity: 0;
   visibility: hidden;
-  border: 1px solid #e2a475;
+  border: 1px solid #3779b9;
   background-position: center center;
   transition: opacity 0.5s ease-in-out;
   z-index: -1;
@@ -351,7 +351,7 @@ h2,
 .service-one .service-card__shape {
   width: 218px;
   height: 80px;
-  background-color: #e2a475;
+  background-color: #3779b9;
   clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
   position: absolute;
   top: 0px;

src/types/index.ts

@@ -4,6 +4,7 @@ export interface ServiceType {
     image?: string;
     bannerLeftImage?: string;
     bannerRightImage?: string;
+    bigImage?: string;
     title: string;
     description: string;
     slug?: string;

src/utils/data.ts

@@ -537,11 +537,12 @@ export const ourServices = [
         id: 1,
         title: "Website Development",
         slug: "web-development",
-        icon: "fa-solid fa-code",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-1.webp",
+        image: "/assets/images/services/service/img-1.webp",
+        bigImage: "/assets/images/services/service/web.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
-        description: "Business tailored design, management & support services Business for free.",
+        description: "Business-tailored website design, development, management, and ongoing support services to grow your brand online effectively.",
         content: `
             <h2 class="service-details__content-title">Website Development at Metatroncube: Crafting Digital Masterpieces</h2>
             <p class="service-details__text">In the digital age, a website is more than just a digital footprint; it’s a powerful tool that encapsulates the essence of your brand, the voice of your business, and the gateway to connect with a global audience. At Metatroncube Software Solutions, we understand that each website is a unique blend of art and functionality, an opportunity to impress, engage, and convert your visitors into loyal customers.</p>
@@ -820,8 +821,9 @@ Robust Security</li>
         id: 2,
         title: "Mobile Application Development",
         slug: "mobile-application-development",
-        icon: "fa-solid fa-mobile-screen",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-2.webp",
+        image: "/assets/images/services/service/img-2.webp",
+        bigImage: "/assets/images/services/service/app.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-app-development.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-app-dev.webp",
         description: "High-performance, scalable mobile apps tailored to your business needs across Android, iOS, and cross-platform technologies.",
@@ -927,8 +929,9 @@ Robust Security</li>
         id: 3,
         title: "Graphic Designing",
         slug: "graphic-designing-company",
-        icon: "fa-solid fa-paintbrush",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-3.webp",
+        image: "/assets/images/services/service/img-3.webp",
+        bigImage: "/assets/images/services/service/graphic.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-graphic-design.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-graphic.webp",
         description: "Elevate your brand with Metatroncube's comprehensive graphic design services—from logos and branding to UI/UX and packaging design.",
@@ -1033,8 +1036,9 @@ Robust Security</li>
         id: 4,
         title: "UI / UX Designing",
         slug: "ui-ux-designing",
-        icon: "fa-solid fa-pen-ruler",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-4.webp",
+        image: "/assets/images/services/service/img-4.webp",
+        bigImage: "/assets/images/services/service/ui.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-ui-ux.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-ui-ux.webp",
         description: "Elevate your digital presence with intuitive, user-centered design that delights users and drives engagement.",
@@ -1142,8 +1146,9 @@ Robust Security</li>
         id: 5,
         title: "SEO & Content Writing",
         slug: "search-engine-optimization-seo-content-writing",
-        icon: "fa-solid fa-magnifying-glass-chart",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-5.webp",
+        image: "/assets/images/services/service/img-5.webp",
+        bigImage: "/assets/images/services/service/seo.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-seo-content.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-seo.webp",
         description: "Transform your online presence with strategic SEO and compelling content that ranks, engages, and converts.",
@@ -1248,8 +1253,9 @@ Robust Security</li>
         id: 6,
         title: "Digital Marketing",
         slug: "digital-marketing-agency-in-canada",
-        icon: "fa-solid fa-bullseye",
-        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        icon: "/assets/images/services/service/icon-6.webp",
+        image: "/assets/images/services/service/img-6.webp",
+        bigImage: "/assets/images/services/service/digital.webp",
         bannerLeftImage: "/assets/images/innerbanner/left/left-digital-marketing.webp",
         bannerRightImage: "/assets/images/innerbanner/right/right-digital.webp",
         description: "Transform your digital presence with data-driven strategies that captivate Canadian audiences and drive measurable growth.",