diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 20acd66..dba17da 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -1607,7 +1607,7 @@ only screen and (min-width: 576px) and (max-width: 767px) {
   position: relative;
   list-style: none;
   display: inline-block;
-  margin-inline-end: 30px;
+  margin-inline-end: 20px;
 }
 
 .main-menu ul li:last-child {
@@ -3957,10 +3957,10 @@ p.banner-text {
   background-position: left bottom;
 }
 
-.choose-section figure.image {
+/* .choose-section figure.image {
   position: relative;
   padding-top: 60px;
-}
+} */
 
 .choose-section .section-title {
   color: #fff;
@@ -4021,17 +4021,17 @@ p.banner-text {
 
 @media only screen and (max-width: 1400px) {
 
-  .choose-section .bg-image {
+  /* .choose-section .bg-image {
     display: none;
-  }
+  } */
 
-  .choose-section figure.image {
+  /* .choose-section figure.image {
     padding-right: 120px;
-  }
+  } */
 
 }
 
-@media only screen and (max-width: 1199px) {
+/* @media only screen and (max-width: 1199px) {
 
   .choose-section figure.image {
     display: none;
@@ -4039,7 +4039,7 @@ p.banner-text {
   }
 
 
-}
+} */
 
 /*----------------------------------------*/
 /*  TESTIMONIALS CSS START
diff --git a/public/assets/images/innerbanner/left/left-about.webp b/public/assets/images/innerbanner/left/left-about.webp
new file mode 100644
index 0000000..2aea9ce
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-about.webp differ
diff --git a/public/assets/images/innerbanner/left/left-app-development.webp b/public/assets/images/innerbanner/left/left-app-development.webp
new file mode 100644
index 0000000..c668096
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-app-development.webp differ
diff --git a/public/assets/images/innerbanner/left/left-blog-details.webp b/public/assets/images/innerbanner/left/left-blog-details.webp
new file mode 100644
index 0000000..3ed0622
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-blog-details.webp differ
diff --git a/public/assets/images/innerbanner/left/left-blog.webp b/public/assets/images/innerbanner/left/left-blog.webp
new file mode 100644
index 0000000..1092b00
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-blog.webp differ
diff --git a/public/assets/images/innerbanner/left/left-career.webp b/public/assets/images/innerbanner/left/left-career.webp
new file mode 100644
index 0000000..f35f01e
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-career.webp differ
diff --git a/public/assets/images/innerbanner/left/left-contact.webp b/public/assets/images/innerbanner/left/left-contact.webp
new file mode 100644
index 0000000..95d5516
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-contact.webp differ
diff --git a/public/assets/images/innerbanner/left/left-digital-marketing.webp b/public/assets/images/innerbanner/left/left-digital-marketing.webp
new file mode 100644
index 0000000..a69fe46
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-digital-marketing.webp differ
diff --git a/public/assets/images/innerbanner/left/left-faq.webp b/public/assets/images/innerbanner/left/left-faq.webp
new file mode 100644
index 0000000..3310c8b
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-faq.webp differ
diff --git a/public/assets/images/innerbanner/left/left-graphic-design.webp b/public/assets/images/innerbanner/left/left-graphic-design.webp
new file mode 100644
index 0000000..225a091
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-graphic-design.webp differ
diff --git a/public/assets/images/innerbanner/left/left-portfolio.webp b/public/assets/images/innerbanner/left/left-portfolio.webp
new file mode 100644
index 0000000..da32ea0
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-portfolio.webp differ
diff --git a/public/assets/images/innerbanner/left/left-seo-content.webp b/public/assets/images/innerbanner/left/left-seo-content.webp
new file mode 100644
index 0000000..f967a9b
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-seo-content.webp differ
diff --git a/public/assets/images/innerbanner/left/left-services.webp b/public/assets/images/innerbanner/left/left-services.webp
new file mode 100644
index 0000000..d05db57
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-services.webp differ
diff --git a/public/assets/images/innerbanner/left/left-ui-ux.webp b/public/assets/images/innerbanner/left/left-ui-ux.webp
new file mode 100644
index 0000000..133cfdd
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-ui-ux.webp differ
diff --git a/public/assets/images/innerbanner/left/left-web-development.webp b/public/assets/images/innerbanner/left/left-web-development.webp
new file mode 100644
index 0000000..e7f9c3a
Binary files /dev/null and b/public/assets/images/innerbanner/left/left-web-development.webp differ
diff --git a/public/assets/images/innerbanner/right/right-about.webp b/public/assets/images/innerbanner/right/right-about.webp
new file mode 100644
index 0000000..06087e6
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-about.webp differ
diff --git a/public/assets/images/innerbanner/right/right-app-dev.webp b/public/assets/images/innerbanner/right/right-app-dev.webp
new file mode 100644
index 0000000..bc8d903
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-app-dev.webp differ
diff --git a/public/assets/images/innerbanner/right/right-blog-details.webp b/public/assets/images/innerbanner/right/right-blog-details.webp
new file mode 100644
index 0000000..e3c3497
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-blog-details.webp differ
diff --git a/public/assets/images/innerbanner/right/right-blog.webp b/public/assets/images/innerbanner/right/right-blog.webp
new file mode 100644
index 0000000..a08ecd3
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-blog.webp differ
diff --git a/public/assets/images/innerbanner/right/right-careers.webp b/public/assets/images/innerbanner/right/right-careers.webp
new file mode 100644
index 0000000..5370e89
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-careers.webp differ
diff --git a/public/assets/images/innerbanner/right/right-contact.webp b/public/assets/images/innerbanner/right/right-contact.webp
new file mode 100644
index 0000000..cbd9bf0
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-contact.webp differ
diff --git a/public/assets/images/innerbanner/right/right-digital.webp b/public/assets/images/innerbanner/right/right-digital.webp
new file mode 100644
index 0000000..ef5b9fe
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-digital.webp differ
diff --git a/public/assets/images/innerbanner/right/right-faq.webp b/public/assets/images/innerbanner/right/right-faq.webp
new file mode 100644
index 0000000..ec906d2
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-faq.webp differ
diff --git a/public/assets/images/innerbanner/right/right-graphic.webp b/public/assets/images/innerbanner/right/right-graphic.webp
new file mode 100644
index 0000000..9330ebb
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-graphic.webp differ
diff --git a/public/assets/images/innerbanner/right/right-portfolio.webp b/public/assets/images/innerbanner/right/right-portfolio.webp
new file mode 100644
index 0000000..9498cbe
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-portfolio.webp differ
diff --git a/public/assets/images/innerbanner/right/right-seo.webp b/public/assets/images/innerbanner/right/right-seo.webp
new file mode 100644
index 0000000..5c67b24
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-seo.webp differ
diff --git a/public/assets/images/innerbanner/right/right-services.webp b/public/assets/images/innerbanner/right/right-services.webp
new file mode 100644
index 0000000..5d0b588
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-services.webp differ
diff --git a/public/assets/images/innerbanner/right/right-ui-ux.webp b/public/assets/images/innerbanner/right/right-ui-ux.webp
new file mode 100644
index 0000000..44cba90
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-ui-ux.webp differ
diff --git a/public/assets/images/innerbanner/right/right-web-dev.webp b/public/assets/images/innerbanner/right/right-web-dev.webp
new file mode 100644
index 0000000..4b481eb
Binary files /dev/null and b/public/assets/images/innerbanner/right/right-web-dev.webp differ
diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx
index 1d85262..d37427f 100644
--- a/src/app/about-us/page.tsx
+++ b/src/app/about-us/page.tsx
@@ -45,14 +45,18 @@ export default function Home2() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="About Us" />
+                <PageHeader
+                    title="About Us"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-about.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-about.webp"
+                />
                 {/* <FeaturesSection /> */}
                 <About2Section />
                 {/* <CounterAreaTwo /> */}
                 <CouterAreaThree />
                 {/* <IconCounterSection /> */}
                 <WhyChooseTwo />
-                
+
                 {/* <HelpFormSection /> */}
                 {/* <WhyChooseSection /> */}
                 {/* <WhyChooseUs /> */}
diff --git a/src/app/blog/[slug]/BlogDetailsClient.tsx b/src/app/blog/[slug]/BlogDetailsClient.tsx
index e291b8c..5c215e7 100644
--- a/src/app/blog/[slug]/BlogDetailsClient.tsx
+++ b/src/app/blog/[slug]/BlogDetailsClient.tsx
@@ -8,8 +8,12 @@ import InnerBanner from "@/components/common/InnerBanner";
 import { BlogType } from "@/types";
 import PageHeader from "@/components/common/PageHeader";
 
+import Link from "next/link";
+import { BlogData } from "@/utils/constant.utils";
+import BlogCard from "@/components/cards/BlogCard";
+
 interface BlogDetailsClientProps {
-    blog: BlogType | undefined;
+    blog: any | undefined;
 }
 
 export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
@@ -43,16 +47,82 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
         );
     }
 
+    // Date sorting for "All Blogs"
+    const sortedBlogs = [...BlogData].sort(
+        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    );
+
+    // Find a related blog (different from current, same category if possible, else just next one)
+    const relatedBlog = BlogData.find((b: any) => b.id !== blog.id && b.category === blog.category) ||
+        BlogData.find((b: any) => b.id !== blog.id) ||
+        BlogData[0];
+
     return (
         <>
             <Header1 />
             <main>
-                <PageHeader title="Blog Details" />
+                <PageHeader
+                    title="Blog Details"
+                    bannerLeftImage={blog.bannerLeftImage}
+                    bannerRightImage={blog.bannerRightImage}
+                />
 
                 <section className="blog-details-area section-space">
                     <div className="container">
-                        <div className="row justify-content-center">
-                            <div className="col-lg-10">
+                        <div className="row gutter-y-30 ">
+                            <div className="col-md-12 col-lg-4">
+                                <div className="service-sidebar">
+                                    <div className="service-sidebar__single">
+                                        <h3 className="service-sidebar__title">All Blogs</h3>
+                                        <ul className="list-unstyled service-sidebar__nav">
+                                            {sortedBlogs.map((item: any) => (
+                                                <li key={item.id} className={item.slug === blog.slug ? "active" : ""}>
+                                                    <Link href={`/blog/${item.slug}`}>
+                                                        {item.title}
+                                                        <i className="fa-solid fa-chevron-right"></i>
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+
+                                    {relatedBlog && (
+                                        <div className="service-sidebar__single">
+                                            <h3 className="service-sidebar__title">Related Blog</h3>
+                                            <div className="blog-sidebar__related">
+                                                <div className="blog-style-one relative overflow-hidden">
+                                                    <Link className="blog-image w-img block relative" href={`/blog/${relatedBlog.slug}`}>
+                                                        <img src={relatedBlog.image} alt={relatedBlog.title} />
+                                                        <span className="blog-category-tag">{relatedBlog.category}</span>
+                                                    </Link>
+                                                    <div className="blog-content">
+                                                        <div className="post-meta">
+                                                            <span className="p-relative">
+                                                                <i className="fa-solid fa-user"></i> By Admin
+                                                            </span>
+                                                            <span className="p-relative">
+                                                                <i className="fa-solid fa-calendar-days"></i> {relatedBlog.date}
+                                                            </span>
+                                                        </div>
+                                                        <hr />
+                                                        <h5 className="blog-title mb-30" style={{ fontSize: '18px' }}>
+                                                            <Link href={`/blog/${relatedBlog.slug}`}>{relatedBlog.title}</Link>
+                                                        </h5>
+                                                        <div className="blog-footer">
+                                                            <div className="blog-link-learn">
+                                                                <Link href={`/blog/${relatedBlog.slug}`} className="learn-more-link">
+                                                                    Learn More <span>+</span>
+                                                                </Link>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            <div className="col-md-12 col-lg-8">
                                 <div className="blog-details-content">
                                     <div className="blog-details-img mb-40">
                                         <img src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
@@ -80,7 +150,7 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
                                                 <h3 className="sec-title__title">Frequently Asked Questions</h3>
                                             </div>
                                             <div className="faq-one__accordion pelocis-accrodion">
-                                                {blog.faq.map((item, index) => (
+                                                {blog.faq.map((item: any, index: number) => (
                                                     <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
                                                         <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
                                                             <div className="accrodion-title__shape"></div>
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 0956837..5ce81e9 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -18,7 +18,11 @@ export default function BlogPage() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="Our Blog" />
+                <PageHeader
+                    title="Our Blog"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-blog.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-blog.webp"
+                />
                 {/* <div className="container section-space-top">
                     <SectionTitle
                         tagline="LATEST NEWS"
diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx
index 14baeb8..d25731d 100644
--- a/src/app/careers/page.tsx
+++ b/src/app/careers/page.tsx
@@ -28,12 +28,16 @@ export default function CareersPage() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="Careers" />
+                <PageHeader
+                    title="Careers"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-career.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-careers.webp"
+                />
                 <AboutService />
                 {/* <AboutOneSection /> */}
                 <AboutThree />
                 <WhyChooseUs />
-                <ProjectsSection/>
+                <ProjectsSection />
                 {/* <FaqVideoSection /> */}
                 {/* <ContactSection /> */}
                 {/* <FeaturesSection /> */}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index dec51cc..d63ae2b 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -24,7 +24,11 @@ export default function ContactPage() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="Contact Us" />
+                <PageHeader
+                    title="Contact Us"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-contact.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-contact.webp"
+                />
                 <ContactSection />
                 <MapSection />
             </main>
diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
index b62863e..a46dcc9 100644
--- a/src/app/faq/page.tsx
+++ b/src/app/faq/page.tsx
@@ -27,7 +27,11 @@ export default function FaqPage() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="FAQ" />
+                <PageHeader
+                    title="FAQ"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-faq.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-faq.webp"
+                />
                 <FaqPageSection />
                 <FaqFour />
                 <FaqFive />
diff --git a/src/app/globals.css b/src/app/globals.css
index a323c84..123dbae 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5328,8 +5328,8 @@ body {
      ═══════════════════════════════════════════════════════════ */
 .home-contact-one {
   background-color: var(--pelocis-black, #1a1f2b);
-  padding: 260px 0 112px;
-  position: relative;
+  padding: 80px 0 80px;
+  /* position: relative;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   -webkit-mask-repeat: no-repeat;
@@ -5337,10 +5337,10 @@ body {
   -webkit-mask-position: top center;
   mask-position: top center;
   -webkit-mask-size: cover;
-  mask-size: cover;
+  mask-size: cover; */
 }
 
-.home-contact-one__bg {
+/* .home-contact-one__bg {
   position: absolute;
   left: 0;
   top: 0;
@@ -5350,7 +5350,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   opacity: 0.05;
-}
+} */
 
 .home-contact-one .home-contact__card {
   padding: 32px;
@@ -5551,8 +5551,8 @@ body {
      ═══════════════════════════════════════════════════════════ */
 .home-contact-one {
   background-color: var(--pelocis-black, #1a1f2b);
-  padding: 260px 0 112px;
-  position: relative;
+  padding: 80px 0 80px;
+  /* position: relative;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   -webkit-mask-repeat: no-repeat;
@@ -5560,10 +5560,10 @@ body {
   -webkit-mask-position: top center;
   mask-position: top center;
   -webkit-mask-size: cover;
-  mask-size: cover;
+  mask-size: cover; */
 }
 
-.home-contact-one__bg {
+/* .home-contact-one__bg {
   position: absolute;
   left: 0;
   top: 0;
@@ -5573,7 +5573,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   opacity: 0.05;
-}
+} */
 
 .home-contact-one .home-contact__card {
   padding: 32px;
@@ -5785,8 +5785,8 @@ body {
      ═══════════════════════════════════════════════════════════ */
 .home-contact-one {
   background-color: var(--pelocis-black, #1a1f2b);
-  padding: 260px 0 112px;
-  position: relative;
+  padding: 80px 0 80px;
+  /* position: relative;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   -webkit-mask-repeat: no-repeat;
@@ -5794,10 +5794,10 @@ body {
   -webkit-mask-position: top center;
   mask-position: top center;
   -webkit-mask-size: cover;
-  mask-size: cover;
+  mask-size: cover; */
 }
 
-.home-contact-one__bg {
+/* .home-contact-one__bg {
   position: absolute;
   left: 0;
   top: 0;
@@ -5807,7 +5807,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   opacity: 0.05;
-}
+} */
 
 .home-contact-one .home-contact__card {
   padding: 32px;
@@ -6019,8 +6019,8 @@ body {
      ═══════════════════════════════════════════════════════════ */
 .home-contact-one {
   background-color: var(--pelocis-black, #1a1f2b);
-  padding: 260px 0 112px;
-  position: relative;
+  padding: 80px 0 80px;
+  /* position: relative;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 969' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 124.777L235.25 40.1068L470.5 101.505L939.5 0L1294 127.252H1607H1920V969H0V124.777Z'/></svg>");
   -webkit-mask-repeat: no-repeat;
@@ -6028,10 +6028,10 @@ body {
   -webkit-mask-position: top center;
   mask-position: top center;
   -webkit-mask-size: cover;
-  mask-size: cover;
+  mask-size: cover; */
 }
 
-.home-contact-one__bg {
+/* .home-contact-one__bg {
   position: absolute;
   left: 0;
   top: 0;
@@ -6041,7 +6041,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   opacity: 0.05;
-}
+} */
 
 .home-contact-one .home-contact__card {
   padding: 32px;
@@ -6255,7 +6255,7 @@ body {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%);
+  background: linear-gradient(90deg, #1a1f2b 0%, #3779b9 60%, #1a1f2b 100%) !important;
   opacity: 0.8;
   z-index: -1;
 }
@@ -6294,7 +6294,7 @@ body {
   position: absolute;
   left: -8px;
   bottom: 0px;
-  background-color: var(--pelocis-base, #3779b9);
+  background-color: var(--pelocis-base, #1a1f2b);
   height: 326px;
   width: 337px;
   clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%);
@@ -6367,6 +6367,7 @@ body {
   left: 20px;
   bottom: 20px;
   animation: zumpBottom 2s linear infinite;
+  opacity: 0.3;
 }
 
 @keyframes moveRight {
@@ -6432,20 +6433,18 @@ body {
 
 .faq-four__content {
   position: relative;
-  padding: 60px 0 60px;
+  /* padding: 60px 0 60px; */
 }
 
 .faq-four__image2 img {
-    min-height: 650px;
-    object-fit: cover;
-    max-width: 100%;
-    clip-path: polygon(
-        0 0,
-        100% 0,
-        88% 50%,
-        100% 100%,
-        0 100%
-    );
+  min-height: 650px;
+  object-fit: cover;
+  max-width: 100%;
+  clip-path: polygon(0 0,
+      100% 0,
+      88% 50%,
+      100% 100%,
+      0 100%);
 }
 
 .faq-four__image2__icon {
@@ -6481,6 +6480,7 @@ body {
   z-index: -1;
   animation: textRotate 15s linear 0s forwards infinite alternate;
 }
+
 /* .faq-four__content .sec-title {
   padding-bottom: 21px;
 } */
@@ -6532,7 +6532,7 @@ body {
   font-weight: 500;
   color: var(--pelocis-black, #1a1f2b);
   font-family: var(--pelocis-font);
-  font-size: 16px;
+  font-size: 18px !important;
   line-height: 25px;
   margin: 0;
   transition: all 500ms ease;
@@ -7842,7 +7842,7 @@ body {
   padding-top: 110px;
   padding-bottom: 120px;
   counter-reset: count;
-  background-color: var(--pelocis-gray, #F5F2EF);
+  /* background-color: var(--pelocis-gray, #F5F2EF); */
 }
 
 .projects-one__title {
@@ -8182,7 +8182,7 @@ body {
 
 .service-details__benefit__list li {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   gap: 12px;
   font-size: 15px;
   color: #64748b;
@@ -9297,7 +9297,7 @@ body {
 .faq-two .primary-btn-1-link {
   background: #3779b9;
   color: #fff;
-  padding: 18px 45px;
+  padding: 18px 35px;
   border-radius: 12px;
   font-weight: 700;
   border: none;
@@ -10518,6 +10518,15 @@ body {
   box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
 }
 
+@media (max-width: 424px) {
+  .contact-area .contact-info-item .icon {
+    width: 0px;
+    height: 0px;
+    margin-right: 20px;
+    font-size: 16px; 
+  }
+}
+
 .contact-area .contact-info-item:hover .icon {
   background: #3779b9;
   color: #fff;
@@ -11399,4 +11408,217 @@ body {
   margin-bottom: 0;
   font-size: 15px;
   line-height: 1.6;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FIX: Global Responsiveness & Overflow (requested breakpoints)
+   ═══════════════════════════════════════════════════════════ */
+
+/* Prevent horizontal overflow globally */
+html,
+body {
+  overflow-x: hidden !important;
+  width: 100%;
+  position: relative;
+}
+
+/* Base fixes for Hero and About */
+.banner-title {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.working-area {
+  transition: all 0.3s ease;
+}
+
+/* 1920px - 1600px */
+@media (max-width: 1920px) {
+  .large-container {
+    max-width: 1720px !important;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 1600px) {
+  .large-container {
+    max-width: 1550px !important;
+  }
+
+  h1.banner-title {
+    font-size: 56px !important;
+  }
+}
+
+/* 1540px */
+@media (max-width: 1540px) {
+  .large-container {
+    max-width: 1480px !important;
+  }
+
+  h1.banner-title {
+    font-size: 52px !important;
+  }
+}
+
+/* 1440px */
+@media (max-width: 1440px) {
+  .large-container {
+    max-width: 1380px !important;
+  }
+
+  h1.banner-title {
+    font-size: 50px !important;
+    line-height: 1.2 !important;
+  }
+}
+
+/* 1360px */
+@media (max-width: 1360px) {
+  .large-container {
+    max-width: 1300px !important;
+  }
+}
+
+/* 1200px */
+@media (max-width: 1200px) {
+  .large-container {
+    max-width: 1140px !important;
+  }
+
+  h1.banner-title {
+    font-size: 48px !important;
+  }
+
+  .about-us-image-area .working-area {
+    left: -20px !important;
+    top: 40px !important;
+  }
+}
+
+/* 1024px */
+@media (max-width: 1024px) {
+  .large-container {
+    max-width: 960px !important;
+  }
+
+  h1.banner-title {
+    font-size: 42px !important;
+  }
+}
+
+/* 992px */
+@media (max-width: 992px) {
+  .banner-main {
+    padding: 150px 0 !important;
+  }
+
+  h1.banner-title {
+    font-size: 38px !important;
+    line-height: 1.3 !important;
+  }
+
+  .banner-area {
+    padding-left: 20px !important;
+  }
+}
+
+/* 768px */
+@media (max-width: 768px) {
+  .banner-main {
+    padding: 100px 0 !important;
+  }
+
+  h1.banner-title {
+    font-size: 34px !important;
+  }
+
+  .about-us-image-area .working-area {
+    left: 0 !important;
+    top: 0 !important;
+    position: relative !important;
+    display: inline-block !important;
+    margin-bottom: 20px !important;
+  }
+
+  /* Inner page banner fixes */
+  .page-header__bg {
+    display: none !important;
+  }
+
+  .page-header__shape {
+    width: 30% !important;
+  }
+}
+
+/* 500px */
+@media (max-width: 500px) {
+  h1.banner-title {
+    font-size: 28px !important;
+    line-height: 1.2 !important;
+  }
+
+  .banner-sub-title {
+    font-size: 14px !important;
+    letter-spacing: 5px !important;
+    margin-left: 40px !important;
+  }
+
+  .banner-sub-title:before {
+    left: -40px !important;
+    width: 30px !important;
+  }
+}
+
+/* 425px */
+@media (max-width: 425px) {
+  h1.banner-title {
+    font-size: 26px !important;
+  }
+
+  .banner-btn-area {
+    flex-direction: column !important;
+    gap: 15px !important;
+  }
+}
+
+/* 375px */
+@media (max-width: 375px) {
+  h1.banner-title {
+    font-size: 24px !important;
+  }
+
+  .banner-area {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+}
+
+/* 320px */
+@media (max-width: 320px) {
+  h1.banner-title {
+    font-size: 22px !important;
+  }
+
+  .banner-main {
+    padding: 80px 0 !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header__bg {
+    display: none !important;
+  }
+
+  .page-header {
+
+    padding: 100px 0 !important;
+
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header__shape {
+    width: 30%;
+  }
 }
\ No newline at end of file
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index d2dc853..2ad8f2a 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -28,7 +28,11 @@ export default function PortfolioPage() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="Our Portfolio" />
+                <PageHeader
+                    title="Our Portfolio"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-portfolio.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-portfolio.webp"
+                />
                 <PortfolioSection />
             </main>
             <Footer1 />
diff --git a/src/app/services-digital-solutions/[slug]/page.tsx b/src/app/services-digital-solutions/[slug]/page.tsx
index d6ee4c3..3b7443e 100644
--- a/src/app/services-digital-solutions/[slug]/page.tsx
+++ b/src/app/services-digital-solutions/[slug]/page.tsx
@@ -25,7 +25,11 @@ export default async function ServiceDetailsPage({ params }: { params: Promise<{
         <>
             <Header1 />
             <main>
-                <PageHeader title={service.title} />
+                <PageHeader
+                    title={service.title}
+                    bannerLeftImage={service.bannerLeftImage}
+                    bannerRightImage={service.bannerRightImage}
+                />
                 <ServiceDetails service={service} />
             </main>
             <Footer1 />
diff --git a/src/app/services-digital-solutions/page.tsx b/src/app/services-digital-solutions/page.tsx
index 044bd5c..bf3610d 100644
--- a/src/app/services-digital-solutions/page.tsx
+++ b/src/app/services-digital-solutions/page.tsx
@@ -42,7 +42,11 @@ export default function Home3() {
         <>
             <Header1 />
             <main>
-                <PageHeader title="Our Services" />
+                <PageHeader
+                    title="Our Services"
+                    bannerLeftImage="/assets/images/innerbanner/left/left-services.webp"
+                    bannerRightImage="/assets/images/innerbanner/right/right-services.webp"
+                />
                 <FeaturesSection />
                 <ChooseSection />
                 {/* <HelpFormSection /> */}
diff --git a/src/app/website-development-service/page.tsx b/src/app/website-development-service/page.tsx
index 2513da2..be78ce1 100644
--- a/src/app/website-development-service/page.tsx
+++ b/src/app/website-development-service/page.tsx
@@ -12,9 +12,12 @@ import CaseStudies from "@/components/web-development-service/CaseStudies";
 import Testimonial from "@/components/web-development-service/Testimonial";
 import FAQ from "@/components/web-development-service/FAQ";
 import Pricing from "@/components/web-development-service/Pricing";
+import { ourServices } from "@/utils/data";
 import "@/components/web-development-service/style.css";
 
 export default function WebsiteDevelopmentService() {
+    const service = ourServices.find((s) => s.slug === "web-development");
+
     return (
         <MainLayout>
             <Hero />
@@ -28,7 +31,7 @@ export default function WebsiteDevelopmentService() {
             <CaseStudies />
             <Pricing />
             <Testimonial />
-            <FAQ />
+            <FAQ faqData={service?.faq} />
         </MainLayout>
     );
 }
diff --git a/src/components/cards/BlogCard.tsx b/src/components/cards/BlogCard.tsx
index d94195a..75739d7 100644
--- a/src/components/cards/BlogCard.tsx
+++ b/src/components/cards/BlogCard.tsx
@@ -29,12 +29,12 @@ const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
                 </div>
                 <div className="space20"></div>
                 <h4 className="vl-blog-1-title">
-                    <Link href="/blogs/single">{blog.title}</Link>
+                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
                 </h4>
                 <div className="space16"></div>
                 <p>{blog.description}</p>
                 <div className="vl-blog-1-icon">
-                    <Link href="/blogs/single">
+                    <Link href={`/blog/${blog.slug}`}>
                         <i className="fa-solid fa-arrow-right"></i>
                     </Link>
                 </div>
diff --git a/src/components/careers/FaqVideoSection.tsx b/src/components/careers/FaqVideoSection.tsx
index 05e2896..08fc564 100644
--- a/src/components/careers/FaqVideoSection.tsx
+++ b/src/components/careers/FaqVideoSection.tsx
@@ -157,7 +157,7 @@ const FaqVideoSection = () => {
                                             </select>
                                             {formErrors.service && <small className="faq-error">{formErrors.service}</small>}
                                         </div>
-                                        <div className="col-md-12 mb-20">
+                                        <div className="col-md-12 mb-20" style={{ overflow: "hidden" }}>
                                             <label className="faq-form-label">Write Message</label>
                                             <textarea
                                                 name="message"
@@ -204,7 +204,7 @@ const FaqVideoSection = () => {
                             <p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
                             <a
                                 href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05"
-                                className="primary-btn-1 mt-4"
+                                className="primary-btn-1 mt-4 mb-25"
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index 1784c36..4da6f4b 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -4,15 +4,20 @@ import React from 'react';
 interface PageHeaderProps {
     title: string;
     breadcrumbItems?: { name: string; href?: string }[];
+    bannerLeftImage?: string;
+    bannerRightImage?: string;
 }
 
-const PageHeader: React.FC<PageHeaderProps> = ({ title, breadcrumbItems }) => {
+const PageHeader: React.FC<PageHeaderProps> = ({ title, breadcrumbItems, bannerLeftImage, bannerRightImage }) => {
+    const defaultRightImage = "https://bracketweb.com/pelocishtml/assets/images/backgrounds/page-header-img-1.png";
+    const defaultLeftImage = "https://bracketweb.com/pelocishtml/assets/images/shapes/bannar-shape-2.png";
+
     return (
         <section className="page-header">
             <div className="page-header__bg">
                 <div
                     className="page-header__bg__img"
-                    style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/page-header-img-1.png)' }}
+                    style={{ backgroundImage: `url(${bannerRightImage || defaultRightImage})` }}
                 >
                 </div>
                 <div className="page-header__bg__shape-1">
@@ -38,7 +43,7 @@ const PageHeader: React.FC<PageHeaderProps> = ({ title, breadcrumbItems }) => {
             </div>
             <img
                 className="page-header__shape"
-                src="https://bracketweb.com/pelocishtml/assets/images/shapes/bannar-shape-2.png"
+                src={bannerLeftImage || defaultLeftImage}
                 alt="bannar-shape"
             />
         </section>
diff --git a/src/components/home/MedicalServices.tsx b/src/components/home/MedicalServices.tsx
index 1a46095..8f77f7b 100644
--- a/src/components/home/MedicalServices.tsx
+++ b/src/components/home/MedicalServices.tsx
@@ -15,14 +15,14 @@ const services = [
         title: "Mobile Application Development",
         text: "High-performance mobile apps for iOS and Android.",
         icon: "/assets/imgs/icon/icon-2.png",
-        link: "/services-digital-solutions/mobile-app-development",
+        link: "/services-digital-solutions/mobile-application-development",
     },
     {
         id: 2,
         title: "Graphic Designing",
         text: "Creative graphic design solutions for your brand.",
         icon: "/assets/imgs/icon/icon-3.png",
-        link: "/services-digital-solutions/graphic-designing",
+        link: "/services-digital-solutions/graphic-designing-company",
     },
     {
         id: 3,
@@ -36,14 +36,14 @@ const services = [
         title: "SEO & Content Writing",
         text: "Optimization and content that drives organic growth.",
         icon: "/assets/imgs/icon/icon-5.png",
-        link: "/services-digital-solutions/seo-content-writing",
+        link: "/services-digital-solutions/search-engine-optimization-seo-content-writing",
     },
     {
         id: 5,
         title: "Digital Marketing",
         text: "Strategic digital marketing to grow your online presence.",
         icon: "/assets/imgs/icon/icon-6.png",
-        link: "/services-digital-solutions/digital-marketing",
+        link: "/services-digital-solutions/digital-marketing-agency-in-canada",
     },
 ];
 
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 071067b..9ad47b6 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -10,7 +10,7 @@ const projectsData = [
         description: "5 Feb, 2025 | Full Time",
         image: "/assets/images/careers/web-dev.webp",
         category: "web",
-        link: "/service/website-development-company"
+        link: "/services-digital-solutions/web-development"
     },
     {
         id: 2,
@@ -18,7 +18,7 @@ const projectsData = [
         description: "5 Feb, 2025 | Full Time",
         image: "/assets/images/careers/seo.webp",
         category: "seo",
-        link: "/service/search-engine-optimization-seo-content-writing"
+        link: "/services-digital-solutions/search-engine-optimization-seo-content-writing"
     },
     {
         id: 3,
@@ -26,7 +26,7 @@ const projectsData = [
         description: "5 Feb, 2025 | Full Time",
         image: "/assets/images/careers/digi-marketing.webp",
         category: "dm",
-        link: "/service/digital-marketing-agency-in-canada"
+        link: "/services-digital-solutions/digital-marketing-agency-in-canada"
     }
 ];
 
diff --git a/src/components/home/home-1/AboutSection.tsx b/src/components/home/home-1/AboutSection.tsx
index 9bd3667..46da93d 100644
--- a/src/components/home/home-1/AboutSection.tsx
+++ b/src/components/home/home-1/AboutSection.tsx
@@ -4,9 +4,9 @@ const AboutSection = () => {
     return (
         <section className="about-us-section section-space p-relative">
             <div className="shape-area">
-                <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/bg-shape-1.png)" }}></div>
-                <div className="shape-2 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-7.png)" }}></div>
-                <div className="shape-3 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-8.png)" }}></div>
+                {/* <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/bg-shape-1.png)" }}></div> */}
+                {/* <div className="shape-2 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-7.png)" }}></div> */}
+                {/* <div className="shape-3 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-8.png)" }}></div> */}
             </div>
             <div className="small-container">
                 <div className="row g-4">
diff --git a/src/components/home/home-1/ServiceThreeSlider.tsx b/src/components/home/home-1/ServiceThreeSlider.tsx
index 8b5eaab..c0bbfe9 100644
--- a/src/components/home/home-1/ServiceThreeSlider.tsx
+++ b/src/components/home/home-1/ServiceThreeSlider.tsx
@@ -16,7 +16,7 @@ const ServiceThreeSlider = () => {
 
             <div className="small-container">
                 <div className="row align-items-end">
-                    <div className="col-xxl-10 col-xl-6">
+                    <div className="col-xxl-10 col-xl-12">
                         <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
                             <div className="sec-title sec-title--light">
                                 <div className="sec-title__shape"></div>
@@ -27,14 +27,14 @@ const ServiceThreeSlider = () => {
                             <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                         </div>
                     </div>
-                    <div className="col-xxl-2 col-xl-6">
+                    {/* <div className="col-xxl-2 col-xl-6">
                         <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
                             <div className="common-slider-navigation">
                                 <button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
                                 <button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
 
                 <div className="swiper service-active-1">
diff --git a/src/components/layout/Header1.tsx b/src/components/layout/Header1.tsx
index a161d26..fc90cbe 100644
--- a/src/components/layout/Header1.tsx
+++ b/src/components/layout/Header1.tsx
@@ -64,14 +64,14 @@ const Header1 = () => {
                                 <div className="header-shopping-cart my-auto">
                                     <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
                                 </div> */}
-                                <div className="header-action d-none d-xl-inline-flex gap-5">
+                                {/* <div className="header-action d-none d-xl-inline-flex gap-5">
                                     <div className="header-link">
                                         <Link className="primary-btn-1 btn-hover" href="/contact">
                                             GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                             <span className="btn-hover-span"></span>
                                         </Link>
                                     </div>
-                                </div>
+                                </div> */}
                                 <div className="header-action">
                                     <div className="header-link-1">
                                         <div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
@@ -82,7 +82,7 @@ const Header1 = () => {
                                     </div>
                                 </div>
                                 <div
-                                    className="header__hamburger d-xl-none my-auto"
+                                    className="header__hamburger d-lg-none my-auto"
                                     onClick={openOffcanvas}
                                 >
                                     <div className="sidebar__toggle">
diff --git a/src/components/layout/NavMenu.tsx b/src/components/layout/NavMenu.tsx
index 7955934..acf3eb7 100644
--- a/src/components/layout/NavMenu.tsx
+++ b/src/components/layout/NavMenu.tsx
@@ -8,11 +8,11 @@ const NavMenu = () => (
             <Link href="/services-digital-solutions">SERVICE <i className="fa-solid fa-angle-down ms-1"></i></Link>
             <ul className="submenu">
                 <li><Link href="/services-digital-solutions/web-development">WEBSITE DEVELOPMENT</Link></li>
-                <li><Link href="/services-digital-solutions/mobile-app-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
-                <li><Link href="/services-digital-solutions/graphic-designing">GRAPHIC DESIGNING</Link></li>
+                <li><Link href="/services-digital-solutions/mobile-application-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
+                <li><Link href="/services-digital-solutions/graphic-designing-company">GRAPHIC DESIGNING</Link></li>
                 <li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX DESIGNING</Link></li>
-                <li><Link href="/services-digital-solutions/seo-content-writing">SEO & CONTENT WRITING</Link></li>
-                <li><Link href="/services-digital-solutions/digital-marketing">DIGITAL MARKETING</Link></li>
+                <li><Link href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO & CONTENT WRITING</Link></li>
+                <li><Link href="/services-digital-solutions/digital-marketing-agency-in-canada">DIGITAL MARKETING</Link></li>
             </ul>
         </li>
         <li><Link href="/portfolio">PORTFOLIO</Link></li>
diff --git a/src/components/services-digital-solutions/ServiceDetails.tsx b/src/components/services-digital-solutions/ServiceDetails.tsx
index f33a224..916fd70 100644
--- a/src/components/services-digital-solutions/ServiceDetails.tsx
+++ b/src/components/services-digital-solutions/ServiceDetails.tsx
@@ -1,15 +1,22 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { ServiceType } from "@/types";
 import { ourServices } from "@/utils/data";
+import "@/components/web-development-service/style.css";
 
 interface ServiceDetailsProps {
     service: ServiceType;
 }
 
 const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(0);
+
+    const toggleAccordion = (index: number) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+
     useEffect(() => {
         const init = () => {
             if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
@@ -25,12 +32,12 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
         <section className="service-details section-space">
             <div className="container">
                 <div className="row gutter-y-30">
-                       <div className="col-md-12 col-lg-4">
+                    <div className="col-md-12 col-lg-4">
                         <div className="service-sidebar">
                             <div className="service-sidebar__single">
                                 <h3 className="service-sidebar__title">All Services</h3>
                                 <ul className="list-unstyled service-sidebar__nav">
-                                    {ourServices.map((item) => (
+                                    {ourServices.slice(0, 6).map((item) => (
                                         <li key={item.id} className={item.slug === service.slug ? "active" : ""}>
                                             <Link href={`/services-digital-solutions/${item.slug}`}>
                                                 {item.title}
@@ -65,8 +72,6 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                             <div className="service-details__thumbnail">
                                 <img src={service.image} alt={service.title} />
                             </div>
-                            <h3 className="service-details__title">{service.title}</h3>
-                            <p className="service-details__text">{service.description}</p>
 
                             {service.content && (
                                 <div
@@ -74,10 +79,41 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                                     dangerouslySetInnerHTML={{ __html: service.content }}
                                 />
                             )}
+
+                            {service.faq && service.faq.length > 0 && (
+                                <div className="service-details__faq-wrapper mt-40">
+                                    <div className="sec-title mb-40">
+                                        <div className="sec-title__shape"></div>
+                                        <h6 className="sec-title__tagline">Service FAQ</h6>
+                                        <h3 className="sec-title__title" style={{ fontSize: '34px' }}>Frequently Asked Questions</h3>
+                                    </div>
+                                    <div className="faq-one__accordion pelocis-accrodion">
+                                        {service.faq.map((item, index) => (
+                                            <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
+                                                <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
+                                                    <div className="accrodion-title__shape"></div>
+                                                    <div className="accrodion-title__icon">
+                                                        <i className="fa fa-check"></i>
+                                                    </div>
+                                                    <h4 style={{ fontSize: '24px' }}>
+                                                        {item.question}
+                                                        <i className="icon-right-arrow-white"></i>
+                                                    </h4>
+                                                </div>
+                                                <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
+                                                    <div className="inner">
+                                                        <p style={{ fontSize: '18px', color: '#444', lineHeight: '1.8' }} dangerouslySetInnerHTML={{ __html: item.answer }} />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     </div>
 
-                 
+
                 </div>
             </div>
 
diff --git a/src/components/web-development-service/FAQ.tsx b/src/components/web-development-service/FAQ.tsx
index 72dd088..0e7baa8 100644
--- a/src/components/web-development-service/FAQ.tsx
+++ b/src/components/web-development-service/FAQ.tsx
@@ -55,7 +55,7 @@ const AccordionItem = ({
     onToggle,
     align,
 }: {
-    faq: { q: string; a: string };
+    faq: { question: string; answer: string };
     isOpen: boolean;
     onToggle: () => void;
     align: "left" | "right";
@@ -64,7 +64,7 @@ const AccordionItem = ({
         className={`faqv2-item${isOpen ? " faqv2-item-open" : ""} faqv2-item-${align}`}
     >
         <button className="faqv2-question" onClick={onToggle} aria-expanded={isOpen}>
-            <span className="faqv2-q-text">{faq.q}</span>
+            <span className="faqv2-q-text">{faq.question}</span>
             <span className={`faqv2-icon${isOpen ? " faqv2-icon-open" : ""}`}>
                 <i className="fa-solid fa-chevron-down"></i>
             </span>
@@ -76,18 +76,26 @@ const AccordionItem = ({
                 padding: "0 20px 18px 20px",
             }}
         >
-            <p>{faq.a}</p>
+            <p>{faq.answer}</p>
         </div>
     </div>
 );
 
-const FAQ = () => {
+const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] }) => {
     const [openId, setOpenId] = useState<string | null>("left-0");
 
     const toggleFaq = (id: string) => {
         setOpenId(prev => prev === id ? null : id);
     };
 
+    // If no faqData provided, use empty arrays
+    const faqs = faqData || [];
+    const half = Math.ceil(faqs.length / 2);
+    const leftFAQs = faqs.slice(0, half);
+    const rightFAQs = faqs.slice(half);
+
+    if (faqs.length === 0) return null;
+
     return (
         <section className="ztc-faq-section sp1" id="faq">
             {/* Section Header */}
@@ -105,12 +113,6 @@ const FAQ = () => {
                             <GsapReveal y={20} delay={0.2}>
                                 <h2 className="text-anime-style-3 faqv2-title">Frequently Asked Questions</h2>
                             </GsapReveal>
-                            {/* <div className="space16"></div>
-                            <GsapReveal y={20} delay={0.3}>
-                                <p className="faqv2-desc" style={{ color: '#343a40' }}>
-                                    Everything you need to know about our IT services. Can&apos;t find the answer you&apos;re looking for? <Link href="/pages/contact" style={{ color: '#3779b9', fontWeight: 600 }}>Talk to our team.</Link>
-                                </p>
-                            </GsapReveal> */}
                         </div>
                     </div>
                 </div>
@@ -120,7 +122,7 @@ const FAQ = () => {
             <div className="container faqv2-grid" style={{ paddingTop: '20px' }}>
                 <div className="row align-items-start" style={{ rowGap: '32px' }}>
 
-                    {/* ===== LEFT: 5 FAQs ===== */}
+                    {/* ===== LEFT: FAQs ===== */}
                     <div className="col-lg-4 col-md-12 faqv2-col-left">
                         <div className="faqv2-accordion">
                             {leftFAQs.map((faq, idx) => (
@@ -146,6 +148,7 @@ const FAQ = () => {
                         </div>
                     </div>
 
+                    {/* ===== RIGHT: FAQs ===== */}
                     <div className="col-lg-4 col-md-12 faqv2-col-right">
                         <div className="faqv2-accordion">
                             {rightFAQs.map((faq, idx) => (
diff --git a/src/components/web-development-service/style.css b/src/components/web-development-service/style.css
index 0db104c..96ec807 100644
--- a/src/components/web-development-service/style.css
+++ b/src/components/web-development-service/style.css
@@ -187,35 +187,82 @@ h2,
 .heading2 h2,
 .heading1 h2,
 .consen-section-title h2,
-.vl-section-title {
-  font-size: var(--section-heading-size) !important;
+.vl-section-title,
+.service-details__content-title,
+/* Refined Service Details Spacing (Blog Match) */
+.service-details__title {
+  font-size: 34px;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.2;
+  margin-bottom: 25px;
 }
 
-h3,
-h4,
-.case-study-title h3 {
-  font-size: var(--subheading-size) !important;
+.service-details__dynamic-content {
+  font-size: 18px;
+  line-height: 1.8;
+  color: #475569;
 }
 
-h5,
-h6,
-.heading2 h5,
-.heading1 h5,
-.consen-section-title h5,
-.case-study-title h6 {
-  font-size: var(--small-text-size) !important;
+/* .service-details__dynamic-content p {
+  margin-top: 20px;
+  margin-bottom: 20px;
+} */
+
+.service-details__dynamic-content h3,
+.service-details__dynamic-content h4 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-top: 25px;
+  margin-bottom: 12px;
 }
 
-p,
-.consen-section-title p {
-  font-size: var(--body-size) !important;
+.service-details__dynamic-content ul,
+.service-details__dynamic-content ol {
+  margin-top: 15px;
+  margin-bottom: 15px;
 }
 
-.vl-btn1,
-.vl-btn2,
-.kf-demo-btn {
-  font-size: var(--btn-font-size) !important;
-  padding: var(--btn-padding) !important;
+/* Custom Service Details List */
+.service-details__benefit__list_custom {
+  list-style: none;
+  padding: 0;
+  margin: 15px 0;
+}
+
+.service-details__benefit__list_custom li {
+  display: flex !important;
+  align-items: flex-start !important;
+  gap: 12px;
+  margin-bottom: 12px !important;
+  line-height: 1.8;
+  font-size: 16px;
+  color: #475569;
+}
+
+.service-details__benefit__list_custom li i {
+  color: #3779b9;
+  font-size: 18px;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+
+.service-details__benefit__list_custom li .list-content {
+  flex: 1;
+}
+
+.service-details__benefit__list_custom li b {
+  color: #1a1f2b;
+  font-weight: 700;
+  font-size: 17px !important;
+  display: inline;
+  margin-right: 5px;
+}
+
+.service-details__benefit__list_custom li p {
+  margin: 0 !important;
+  display: inline;
 }
 
 /* Small text utility */
@@ -223,6 +270,204 @@ p,
   font-size: var(--small-text-size) !important;
 }
 
+/* Portfolio Cards Section (Pelocis Style) */
+.service-details__portfolio-cards {
+  display: flex;
+  gap: 30px;
+  margin-top: 40px;
+  margin-bottom: 50px;
+}
+
+@media (max-width: 991px) {
+  .service-details__portfolio-cards {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 767px) {
+  .service-details__portfolio-cards {
+    flex-direction: column;
+    gap: 30px;
+  }
+}
+
+.service-one .service-card {
+  flex: 1;
+  min-width: 300px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid #DDDDDD;
+  position: relative;
+  transition: all 500ms ease-in-out;
+  text-align: center;
+  background: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.service-one .service-card__inner {
+  position: relative;
+  width: 100%;
+  padding: 40px 30px;
+  transition: 0.5s ease-in-out;
+  z-index: 1;
+}
+
+.service-one .service-card__hover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
+  top: 0px;
+  left: 0px;
+  opacity: 0;
+  visibility: hidden;
+  border: 1px solid #e2a475;
+  background-position: center center;
+  transition: opacity 0.5s ease-in-out;
+  z-index: -1;
+}
+
+.service-one .service-card__hover::after {
+  background-color: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  content: "";
+  z-index: -1;
+}
+
+.service-one .service-card:hover .service-card__hover {
+  opacity: 1;
+  visibility: visible;
+}
+
+.service-one .service-card__shape {
+  width: 218px;
+  height: 80px;
+  background-color: #e2a475;
+  clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translateX(-50%) scaleY(0.6);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1;
+  transition: 500ms ease-in-out;
+}
+
+.service-one .service-card:hover .service-card__shape {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) scaleY(1);
+}
+
+.service-one .service-card__icon {
+  width: 76px;
+  height: 76px;
+  margin: 0 auto;
+  margin-bottom: 18px;
+  background-color: #3779b9;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 32px;
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  transition: all 500ms ease-in-out;
+}
+
+.service-one .service-card__icon::before {
+  content: "";
+  position: absolute;
+  right: -22px;
+  top: -22px;
+  width: 50%;
+  height: 50%;
+  background-color: #222222;
+  transform: rotate(41deg);
+  transition: all 500ms ease-in-out;
+  z-index: -1;
+}
+
+.service-one .service-card__icon::after {
+  content: "";
+  position: absolute;
+  left: -22px;
+  bottom: -22px;
+  width: 50%;
+  height: 50%;
+  background-color: #222222;
+  transform: rotate(41deg);
+  transition: all 500ms ease-in-out;
+  z-index: -1;
+}
+
+.service-one .service-card:hover .service-card__icon {
+  background-color: #222222;
+}
+
+.service-one .service-card:hover .service-card__icon::before,
+.service-one .service-card:hover .service-card__icon::after {
+  background-color: #3779b9;
+}
+
+.service-one .service-card__title {
+  font-size: 18px !important;
+  font-weight: 700;
+  line-height: 26px;
+  color: #0f172a;
+  margin-bottom: 10px !important;
+  margin-top: 0 !important;
+  z-index: 1;
+  position: relative;
+  transition: all 500ms ease;
+}
+
+.service-one .service-card__text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #475569;
+  margin-bottom: 12px !important;
+  z-index: 1;
+  position: relative;
+  transition: all 500ms ease;
+}
+
+.service-one .service-card__link {
+  font-size: 14px;
+  font-weight: 700;
+  color: #3779b9;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 500ms ease;
+  z-index: 1;
+  position: relative;
+}
+
+.service-one .service-card__link:hover {
+  color: #0f172a;
+}
+
+/* Typography Refinements */
+.service-details b {
+  font-size: 17px !important;
+}
+
 body,
 html {
   overflow-x: hidden !important;
diff --git a/src/types/index.ts b/src/types/index.ts
index 47cfa77..1272430 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,10 +2,13 @@ export interface ServiceType {
     id: number;
     icon: string;
     image?: string;
+    bannerLeftImage?: string;
+    bannerRightImage?: string;
     title: string;
     description: string;
     slug?: string;
     content?: string;
+    faq?: { question: string; answer: string }[];
 }
 
 export interface CaseStudyType {
@@ -28,6 +31,8 @@ export interface TestimonialType {
 export interface BlogType {
     id: number;
     image: string;
+    bannerLeftImage?: string;
+    bannerRightImage?: string;
     date: string;
     title: string;
     slug: string;
diff --git a/src/utils/data.ts b/src/utils/data.ts
index e418ee4..e4b7898 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -46,7 +46,7 @@ export const features2 = [
 ];
 
 export const services1: ServiceType[] = [
-   {
+    {
         id: 1,
         icon: '/assets/img-app/home/section3/android.webp',
         title: 'Android App Development',
@@ -302,6 +302,8 @@ export const blogs: BlogType[] = [
     {
         id: 1,
         image: '/assets/img/all-images/blog/blog-img1.png',
+        bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
         date: '03 March 2026',
         title: 'Mastering Digital Transformation: A Guide for Modern Enterprises',
         slug: 'mastering-digital-transformation',
@@ -315,6 +317,8 @@ export const blogs: BlogType[] = [
     {
         id: 2,
         image: '/assets/img/all-images/blog/blog-img2.png',
+        bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
         date: '02 March 2026',
         title: 'The Future of E-commerce: Trends to Watch in 2026',
         slug: 'future-of-ecommerce-2026',
@@ -328,6 +332,8 @@ export const blogs: BlogType[] = [
     {
         id: 3,
         image: '/assets/img/all-images/blog/blog-img17.png',
+        bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
         date: '01 March 2026',
         title: 'Elevating User Experiences through Design Thinking',
         slug: 'elevating-ux-design-thinking',
@@ -532,11 +538,241 @@ export const ourServices = [
         title: "Website Development",
         slug: "web-development",
         icon: "fa-solid fa-code",
-      image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <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>
+
+            <p class="service-details__text"><b>A website is not just an online destination; it’s a digital journey that starts with a single click.</b></p>
+
+            <p class="service-details__text">Our approach to website development goes beyond the technicalities of coding. We delve into the heart of your business, identifying and understanding your market, goals, and user needs. This allows us to create not just websites, but digital experiences that resonate with your audience, drive engagement, and foster growth.</p>
+
+            <p class="service-details__text">With a team of skilled developers, creative designers, and strategic thinkers, we harness the latest in web technologies and trends to develop websites that are not only visually stunning but also functionally robust. Whether you’re a startup looking to make your mark, a growing business ready to scale, or an established brand seeking to innovate, our comprehensive website development services are tailored to meet your specific needs.</p>
+
+            <h4 class="service-details__content-title">Our Approach to Website Development: A Blend of Innovation and User-Centric Design</h4>
+
+            <p class="service-details__text">At Metatroncube, our approach to website development is rooted in a deep understanding that each project is a unique endeavor with its own set of challenges and opportunities. We don’t just build websites; we craft digital experiences that resonate with your target audience and align with your business objectives.</p>
+
+                    <p> <b>Understanding Your Vision:</b> Our process begins with a comprehensive discussion to understand your vision, business goals, and the needs of your audience. This collaborative approach ensures that we’re not just service providers, but partners in your digital journey.</p>
+
+  <p> <b>Strategic Planning:</b> Once we have a clear understanding of your objectives, our team formulates a strategic plan. This includes defining the website’s structure, functionality, and overall aesthetic, ensuring that every element is purposefully designed to meet your business goals.</p>
+
+
+    <p> <b>Design and Development:</b> With a plan in place, our skilled designers and developers get to work. We blend creativity with technology, creating designs that are not only visually appealing but also user-friendly and accessible. Our developers then bring these designs to life, using the latest coding practices and technologies to ensure your website is fast, secure, and scalable.</p>
+
+
+      <p> <b>Testing and Optimization: </b> Quality is our top priority. We rigorously test your website across multiple devices and browsers, ensuring a seamless user experience. We also optimize for search engines (SEO) to improve your website’s visibility and reach.</p>
+
+
+        <p> <b>Launch and Beyond:</b> Launching your website is just the beginning. We offer ongoing support and maintenance, ensuring your site remains up-to-date and continues to perform at its best. We also provide analytics and insights to help you understand user behavior and make informed decisions for future enhancements.</p>
+
+
+          <p> <b>Feedback and Iteration: </b> Your feedback is crucial throughout the development process. We believe in continuous improvement and are always ready to iterate and refine the website based on your input and user data.</p>
+
+
+            <p class="service-details__text">At Metatroncube, we’re committed to delivering a website that not only looks great but also delivers results. Our approach combines the best of technology, design, and strategic thinking to create websites that not only meet but exceed expectations.</p>
+
+            <h4 class="service-details__content-title">Key Features of Our Website Development Services: Crafting Digital Excellence</h4>
+
+            <p class="service-details__text">At Metatroncube, our website development services are distinguished by a series of key features that ensure each project we undertake is not just completed but is transformed into a digital masterpiece. Here’s what sets our services a part:</p>
+
+
+             <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>1. Custom Design:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Tailored Aesthetics:</b> Every website we create is tailored to reflect your brand’s unique identity. Our designers work closely with you to ensure the visual elements resonate with your brand and appeal to your target audience.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>User Experience Focus:</b> We prioritize user experience (UX) in our designs, ensuring that navigation is intuitive and that the website is accessible to all users, thereby enhancing user engagement and satisfaction.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+                        <div class="service-details__benefit mt-0">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>2. Responsive and Mobile-Friendly:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Cross-Device Compatibility:</b> Understanding the importance of mobile traffic, we ensure your website looks great and functions seamlessly across all devices and screen sizes.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Speed Optimization:</b> We optimize for speed, reducing load times to improve user experience and boost SEO rankings.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+                                  <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>3. Advanced Technologies:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Cutting-Edge Solutions:</b> Our team stays abreast of the latest technological trends in web development, from advanced frontend frameworks to efficient backend solutions.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Scalability and Security:</b> We build websites that are not only robust and secure but also scalable, ensuring they can grow and evolve with your business.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            
+                                  <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>4. SEO-Optimized:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Visibility and Ranking:</b> Our development process includes SEO optimization to ensure your site ranks well on search engines, driving organic traffic and increasing visibility.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Content Strategy:</b> We assist in developing a content strategy that aligns with SEO best practices, ensuring your website’s content is relevant, engaging, and optimized for search engines.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+<div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>5. Comprehensive CMS Integration:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Easy Management:</b> We integrate powerful content management systems (CMS) to give you control over your content, allowing for easy updates and management.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Custom Features:</b> Depending on your needs, we can include custom features in the CMS, like e-commerce capabilities, blogs, or event calendars.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+                                                          <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="service-details__benefit__content">
+                            <p class="service-details__benefit__title"><b>6. Ongoing Support and Analytics:</b></p>
+                        
+                            <ul class="service-details__benefit__list_custom">
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Post-Launch Support:</b> Our relationship doesn’t end at launch. We provide ongoing support and maintenance to ensure your website remains up-to-date and performs optimally.</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <i class="fa-solid fa-circle-check"></i>
+                                    <div class="list-content">
+                                        <p><b>Data-Driven Insights:</b> We equip your site with analytics tools so you can monitor performance and user engagement, helping you make informed decisions for future growth.</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <p class="service-details__text">In summary, our website development services at Metatroncube are a blend of aesthetics, functionality, technology, and strategy. We commit to delivering a product that not only meets but exceeds your expectations, driving your business forward in the digital realm.</p>
+
+            <h4 class="service-details__title"><span style="color: #3779b9;">Our</span> Portfolio:</h4>
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-lightbulb"></i>
+                        </div>
+                        <h2 class="service-card__title">Innovative Web Solutions</h2>
+                        <p class="service-card__text">
+                            Customized digital experiences to elevate your brand.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-gears"></i>
+                        </div>
+                        <h2 class="service-card__title">Cutting-Edge Technology</h2>
+                        <p class="service-card__text">
+                            Leveraging the latest tech to create responsive, fast, and secure websites.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
@@ -546,183 +782,1145 @@ export const ourServices = [
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">Seamless Integration</h3>
+                            <p class="service-details__benefit__text">Streamline your online presence with effortlessly integrated web services.</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> 
+Customized Design</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Responsive Layouts</li>
+                                <li><i class="fa-solid fa-circle-check"></i> SEO-Optimized</li>
+                                <li><i class="fa-solid fa-circle-check"></i> 
+Robust Security</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
-        `
+        `,
+        faq: [
+            {
+                "question": "Is my website builder allowed on site?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to soft launch your business?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to turn visitors into contributors",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How can i find my app solutions?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            }
+        ]
     },
     {
         id: 2,
         title: "Mobile Application Development",
-        slug: "mobile-app-development",
-        icon: "fa-solid fa-mobile-screen-button",
-       image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
-        description: "Business tailored design, management & support services Business for free.",
+        slug: "mobile-application-development",
+        icon: "fa-solid fa-mobile-screen",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <h2 class="service-details__content-title">Application Development at Metatroncube: Crafting Digital Masterpieces</h2>
+            <p class="service-details__text">Step into the future of mobile technology with Metatroncube's Application Development Services. Our expertise spans across various platforms and technologies, ensuring we deliver high-performance, scalable, and engaging mobile applications tailored to your business needs. Whether you're looking for native solutions or cross-platform versatility, our skilled developers are adept at turning your concepts into reality.</p>
+
+            
+            <h4 class="service-details__content-title">Android Application Development</h4>
+            <p class="service-details__text">Enter the vast world of Android with custom apps designed to harness the full power of the most widely used mobile OS. We utilize the latest frameworks and tools to ensure your Android app is robust, user-friendly, and capable of standing out in the crowded Play Store.</p>
+
+            <h4 class="service-details__content-title">iOS Application Development</h4>
+            <p class="service-details__text">Immerse your users in the premium experience of iOS. Our developers craft sleek, intuitive applications that adhere to Apple's stringent design guidelines, providing an unmatched user experience that reflects the quality of the iOS ecosystem.</p>
+
+            <h4 class="service-details__content-title">Native Application Development</h4>
+            <p class="service-details__text">For optimal performance and seamless integration with device capabilities, go native. We build native apps for both Android and iOS, ensuring they run smoothly, utilize device features to the fullest, and provide a superior user experience.</p>
+
+            <h4 class="service-details__content-title">Cross-Platform Development with Flutter</h4>
+            <p class="service-details__text">Maximize your reach with cross-platform applications using Flutter. With a single codebase, we create beautiful, natively compiled applications for both mobile platforms, ensuring consistency and efficiency without compromising on quality or performance.</p>
+
+            <p class="service-details__text">By partnering with Metatroncube for your application development needs, you gain access to a team that's committed to innovation, quality, and delivering exceptional digital experiences. Let us help you navigate the mobile landscape with applications that elevate your brand and engage your users.</p>
+
+            <p class="service-details__text"><b>Code with Vision, Create with Precision – Crafting Mobile Experiences that Inspire.</b></p>
+
+
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-brands fa-android"></i>
+                        </div>
+                        <h2 class="service-card__title">Android App Excellence</h2>
+                        <p class="service-card__text">
+                            Navigate Android's versatility with apps that deliver. Our Android solutions merge market trends with user-centric design for standout Play Store presence.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-brands fa-apple"></i>
+                        </div>
+                        <h2 class="service-card__title">iOS Development Craftsmanship</h2>
+                        <p class="service-card__text">
+                            Experience the artistry of iOS apps. We build with precision, ensuring every app meets Apple's high standards for sleek design and flawless functionality.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+            <h4 class="service-details__content-title mt-4">Crafting Cross-Platform Mobile Masterpieces</h4>
+            <p class="service-details__text">Seamless Apps for Android and iOS Users Alike</p>
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Cross-Platform Development">
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">Cross-Platform Excellence</h3>
+                            <p class="service-details__benefit__text">Build once, deploy everywhere with our Flutter development expertise.</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Unified User Experience</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Optimized Performance</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Design Consistency</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Continuous Integration and Deployment</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
-        `
+        `,
+        faq: [
+            {
+                "question": "What is an app development agency?",
+                "answer": "An app development agency is a company that specializes in creating software applications for various platforms, such as mobile devices, web, and desktop. These agencies have teams of professionals who handle the entire app development process, including ideation, design, coding, testing, and deployment. They may also provide post-launch services such as app maintenance, updates, and marketing."
+            },
+            {
+                "question": "How much does it cost to hire someone to build a mobile app?",
+                "answer": "The cost to hire someone to build a mobile app can vary widely depending on several factors, including the complexity of the app, the platform(s) it will run on, the geographic location of the developers, and the level of design and functionality required. Simple apps may start in the range of a few thousand dollars, while more complex applications can cost tens or even hundreds of thousands of dollars."
+            },
+            {
+                "question": "How do I choose a mobile app development agency?",
+                "answer": "Choosing a mobile app development agency involves several considerations:<br><br><b>Portfolio:</b> Look at their past work to assess their experience and expertise.<br><br><b>Technical Skills:</b> Ensure they have the technical skills necessary for your specific app requirements.<br><br><b>Client Testimonials:</b> Check client reviews and testimonials to gauge their reliability and customer service.<br><br><b>Process Transparency:</b> The agency should have a clear development process and be willing to keep you informed throughout.<br><br><b>Post-Launch Support:</b> Find out if they offer maintenance and support services after the app is launched."
+            },
+            {
+                "question": "What are the benefits of hiring a mobile app development agency instead of freelancers ?",
+                "answer": "Hiring a mobile app development agency brings several advantages over individual freelancers:<br><br><b>Team Expertise:</b> Agencies have a team of experts with diverse skills, providing a comprehensive approach to development.<br><br><b>Scalability:</b>They can scale resources up or down according to project needs, which is harder with freelancers.<br><br><b>Accountability:</b> Agencies typically have a higher level of professional accountability and established business practices.<br><br><b>Continuity:</b> They can offer continuity and support, ensuring your project won't stall if an individual becomes unavailable."
+            }
+        ]
     },
     {
         id: 3,
         title: "Graphic Designing",
-        slug: "graphic-designing",
-        icon: "fa-solid fa-palette",
+        slug: "graphic-designing-company",
+        icon: "fa-solid fa-paintbrush",
         image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
-        description: "Business tailored design, management & support services Business for free.",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <h2 class="service-details__content-title">Graphic Design Services at Metatroncube</h2>
+            
+
+            <h4 class="service-details__content-title">Graphic Design Services: Branding and Identity Design</h4>
+            <p class="service-details__text">Elevate your corporate persona with Metatroncube's Graphic Design Services. We specialize in creating logos and brand elements that are not only visually stunning but also embody your company's core values, ensuring a consistent and powerful brand identity.</p>
+
+            <h4 class="service-details__content-title">Graphic Design Services: Marketing Collateral Design</h4>
+            <p class="service-details__text">Amplify your marketing strategy with Metatroncube's Graphic Design Services. Our team expertly produces brochures, flyers, and banners that not only grab attention but also convey your message effectively, making every piece of marketing collateral count.</p>
+
+            <h4 class="service-details__content-title">Graphic Design Services: UI/UX Design</h4>
+            <p class="service-details__text">With Metatroncube's Graphic Design Services, your digital presence will become more intuitive and visually appealing. Our commitment to refined UI/UX design ensures a seamless, user-friendly experience that translates into increased engagement and customer satisfaction.</p>
+
+            <h4 class="service-details__content-title">Graphic Design Services: Packaging Design</h4>
+            <p class="service-details__text">Distinguish your products with the innovative packaging design offered by Metatroncube's Graphic Design Services. We understand the critical role of packaging in market success and design with the intent to make your products stand out and resonate with consumers.</p>
+
+            <h4 class="service-details__content-title">Graphic Design Services: Infographics and Data Visualization</h4>
+            <p class="service-details__text">Transform data into impactful stories with Metatroncube's Graphic Design Services. Our expertise in infographics and data visualization makes complex information easily digestible, visually engaging, and suitable for a variety of platforms, from annual reports to social media posts.</p>
+
+             <p class="service-details__text"><b>Designing Tomorrow’s Vision Today — Metatroncube: Where Creativity Meets Strategy.</b></p>
+
+            <p class="service-details__text">By choosing Metatroncube for your graphic design needs, you're not just getting a service; you're investing in a visual strategy that amplifies your brand's presence and connects with your customers on a deeper level.</p>
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-brush"></i>
+                        </div>
+                        <h2 class="service-card__title">Brand Identity Design</h2>
+                        <p class="service-card__text">
+                            Shape a unique brand identity that stands out.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-newspaper"></i>
+                        </div>
+                        <h2 class="service-card__title">Print & Digital Media Design</h2>
+                        <p class="service-card__text">
+                            Craft visuals that engage and resonate across media.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Graphic Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">Visual Storytelling at Its Finest</h3>
+                            <p class="service-details__benefit__text">Crafting Designs That Captivate and Communicate</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Branding That Connects</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Marketing Collateral</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Digital Interface Design</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Packaging That Pops</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
-        `
+        `,
+        faq: [
+            {
+                "question": "What makes a good graphic design?",
+                "answer": "Good graphic design effectively communicates a message through visual hierarchy, composition, color, typography, and appropriate use of space. It should be aesthetically pleasing, functionally effective, and aligned with the brand’s identity."
+            },
+            {
+                "question": "How important is graphic design for my business?",
+                "answer": "Graphic design is crucial for creating a professional image, attracting potential customers, and differentiating your brand from competitors. It can influence customer perceptions and decision-making, ultimately impacting the success of your business."
+            },
+            {
+                "question": "Can graphic design impact the user experience of my website or app?",
+                "answer": "Absolutely. Good graphic design can significantly improve the user experience by organizing information in an intuitive manner, creating easy navigation, and ensuring a visually enjoyable journey which can lead to higher user engagement and retention."
+            },
+            {
+                "question": "Should I have a consistent design theme across all my business materials?",
+                "answer": "Consistency in design across all materials is key to building brand recognition and trust. A unified theme reinforces your brand identity and ensures that customers have a coherent experience with your brand, whether it’s on your website, in a brochure, or on social media."
+            }
+        ]
     },
     {
         id: 4,
         title: "UI / UX Designing",
         slug: "ui-ux-designing",
-        icon: "fa-solid fa-palette",
+        icon: "fa-solid fa-pen-ruler",
         image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
-        description: "Business tailored design, management & support services Business for free.",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <h2 class="service-details__content-title">UI/UX Design Services at Metatroncube: Shaping Experiences That Resonate</h2>
+            <p class="service-details__text">Elevate your digital presence with Metatroncube's UI/UX Design Services, where user experience meets stunning aesthetics. Our design team focuses on creating interfaces that are not only visually appealing but also intuitively navigable, ensuring users enjoy every interaction with your digital product. From initial research to final implementation, we craft experiences that delight users and drive engagement.</p>
+
+            <h4 class="service-details__content-title">Research and Strategy</h4>
+            <p class="service-details__text">Understanding your users is key. We begin with in-depth research and analysis to inform our design strategy, ensuring that every decision is data-driven and user-centered.</p>
+
+            <h4 class="service-details__content-title">User Interface (UI) Design</h4>
+            <p class="service-details__text">Captivate your audience with beautifully designed interfaces. Our UI designs are tailored to be clear, concise, and visually engaging, enhancing the overall aesthetic of your digital product.</p>
+
+            <h4 class="service-details__content-title">User Experience (UX) Design</h4>
+            <p class="service-details__text">Craft a seamless journey through your digital landscape. We map out the user flow to create intuitive and accessible experiences, which keep users coming back.</p>
+
+            <h4 class="service-details__content-title">Prototyping and Testing</h4>
+            <p class="service-details__text">Bring concepts to life with interactive prototypes. We validate our designs through rigorous user testing, refining the user experience to near perfection.</p>
+
+            <h4 class="service-details__content-title">Responsive and Adaptive Design</h4>
+            <p class="service-details__text">Prepare your product for every screen and device. Our responsive designs ensure your app or website performs flawlessly, no matter where it's accessed from.</p>
+
+                 <p class="service-details__text"><b>Designing with Empathy, Perfecting with Insight — Metatroncube: Shaping Experiences That Resonate.</b></p> 
+
+
+            <p class="service-details__text">By integrating Metatroncube's UI/UX Design Services into your project, you're choosing a partner dedicated to exceptional design and optimal user experiences. Let's create something extraordinary together.</p>
+
+      
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-chart-simple"></i>
+                        </div>
+                        <h2 class="service-card__title">Web Consultant</h2>
+                        <p class="service-card__text">
+                            Your growth starts with the right advice. Let's build smarter, not harder.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-paintbrush"></i>
+                        </div>
+                        <h2 class="service-card__title">Creative Design</h2>
+                        <p class="service-card__text">
+                            If you want design that speaks, sells, and sticks, you're in the right place.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="UI/UX Design Services">
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">Designing Intuitive Digital Experiences</h3>
+                            <p class="service-details__benefit__text">Where Every Pixel Counts.</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Intuitive Navigation</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Engaging Visuals</li>
+                                <li><i class="fa-solid fa-circle-check"></i> User-Centered Approach</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Accessibility and Inclusion</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
-        `
+        `,
+        faq: [
+            {
+                "question": "What does a UI/UX design agency do?",
+                "answer": "A UI/UX design agency specializes in creating user interfaces and user experiences for digital products like websites, mobile apps, and software. They focus on understanding user behaviors and needs to design intuitive, engaging, and visually appealing interfaces. Their work involves research, wireframing, prototyping, testing, and iterating designs to ensure a product is not only easy and pleasant to use but also meets the goals of the business."
+            },
+            {
+                "question": "What do UI/UX designers charge?",
+                "answer": "The cost of hiring UI/UX designers can vary widely based on factors like location, experience, the complexity of the project, and whether they are freelancers or part of an agency. Freelance UI/UX designers may charge anywhere from $50 to $200 per hour, while agencies might have set rates for projects, which can range from a few thousand dollars for basic designs to tens of thousands for more complex, large-scale projects."
+            },
+            {
+                "question": "Is UI/UX still in demand?",
+                "answer": "Absolutely, UI/UX is still in high demand. As the digital landscape continues to grow and evolve, the need for skilled UI/UX designers remains critical. Companies recognize the importance of providing excellent user experiences to attract and retain customers, making UI/UX a key factor in the success of digital products."
+            },
+            {
+                "question": "How does good UI/UX design benefit a business?",
+                "answer": "Good UI/UX design significantly benefits a business by enhancing user satisfaction, which in turn can lead to increased user engagement, higher retention rates, and improved conversion rates. A well-designed, user-friendly interface makes it easier for users to navigate and interact with a product, leading to a positive experience that can boost the brand's reputation, customer loyalty, and ultimately, the business's bottom line."
+            }
+        ]
     },
     {
         id: 5,
         title: "SEO & Content Writing",
-        slug: "seo-content-writing",
-        icon: "fa-solid fa-palette",
-      image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
-        description: "Business tailored design, management & support services Business for free.",
+        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",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <h2 class="service-details__content-title">SEO & Content Writing Services at Metatroncube</h2>
+           
+
+            <p class="service-details__text">Transform your online presence with Metatroncube's SEO & Content Writing Services. In the digital age, visibility is key to success, and our specialized services are designed to propel your website to the top of search engine rankings. We blend artful content creation with strategic SEO practices to not only attract but also engage and retain your audience.</p>
+
+            <h4 class="service-details__content-title">Search Engine Optimization (SEO)</h4>
+            <p class="service-details__text">Unlock the potential of your website with our comprehensive SEO strategies. From keyword research and on-page optimization to link building and technical SEO, we ensure your site ranks higher on search engines, driving organic traffic and enhancing your online authority.</p>
+
+            <h4 class="service-details__content-title">Content Writing</h4>
+            <p class="service-details__text">Content is the heart of digital marketing, and our expert writers know how to make it beat. We produce engaging, informative, and SEO-friendly content that resonates with your audience and supports your marketing goals. From blog posts and articles to web content and whitepapers, our content not only informs but also inspires action.</p>
+
+            <h4 class="service-details__content-title">Integrated SEO & Content Strategy</h4>
+            <p class="service-details__text">We don't just write content; we craft an integrated strategy where content and SEO work hand in hand. By aligning your content strategy with SEO best practices, we ensure that every piece of content is an opportunity to improve your search rankings and connect with your target audience.</p>
+
+            <h4 class="service-details__content-title">Analytics and Reporting</h4>
+            <p class="service-details__text">Transparency and data-driven decisions are at the core of our services. We provide detailed analytics and performance reports, giving you insights into how our strategies are enhancing your online visibility and contributing to your business growth.</p>
+
+    <p class="service-details__text"><b>Crafting Words, Elevating Brands – Where Content Meets Purpose and Strategy.</b></p>
+            
+
+            <p class="service-details__text">Partner with Metatroncube for SEO & Content Writing Services and experience the power of content that's not just seen but also felt and acted upon. Let's elevate your brand's voice and make it echo across the digital landscape.</p>
+
+            
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-chart-line"></i>
+                        </div>
+                        <h2 class="service-card__title">SEO Mastery</h2>
+                        <p class="service-card__text">
+                            Boost Your Search Engine Presence. Our advanced SEO techniques elevate your site's visibility and drive organic growth and reach.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-feather"></i>
+                        </div>
+                        <h2 class="service-card__title">Content Writing Excellence</h2>
+                        <p class="service-card__text">
+                            Engage and Inspire with Every Word. Our content writing services blend creativity with marketing savvy for impactful storytelling.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="SEO & Content Writing Services">
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">SEO: Your Pathway to Digital Prominence</h3>
+                            <p class="service-details__benefit__text">Optimizing Your Online Presence for Maximum Impact</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Keyword-Rich Content</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Versatile Content Creation</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Brand Voice Consistency</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Performance Tracking</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
-        `
+        `,
+        faq: [
+            {
+                "question": "What is the importance of SEO in content writing?",
+                "answer": "SEO is crucial in content writing as it helps in increasing the visibility of the content in search engines, driving organic traffic, and enhancing the relevance and authority of your website."
+            },
+            {
+                "question": "How does quality content benefit my website?",
+                "answer": "Quality content engages your audience, providing value and building trust. It leads to higher engagement rates, increased brand loyalty, and contributes to a better overall user experience on your website."
+            },
+            {
+                "question": "Can SEO and content writing improve my sales?",
+                "answer": "Yes, effective SEO and content writing can significantly improve sales. By attracting the right audience and providing them with valuable content, you can guide them through the sales funnel more effectively"
+            },
+            {
+                "question": "How often should I update my website's content?",
+                "answer": "Regular updates are key to keeping your website fresh and relevant. Depending on your industry, updating content weekly or bi-weekly can help maintain engagement and improve SEO performance."
+            }
+        ]
     },
     {
         id: 6,
         title: "Digital Marketing",
-        slug: "digital-marketing",
-        icon: "fa-solid fa-palette",
-       image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
-        description: "Business tailored design, management & support services Business for free.",
+        slug: "digital-marketing-agency-in-canada",
+        icon: "fa-solid fa-bullseye",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        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.",
         content: `
-            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
-            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <h2 class="service-details__content-title">Metatroncube Software Solutions: Revolutionizing Digital Marketing in Canada</h2>
+           
+            <p class="service-details__text"><b>Introduction:</b> Metatroncube Software Solutions is not just a digital marketing agency in Canada; we are your strategic partner for transformative digital success. Our bespoke digital marketing solutions are crafted to captivate your unique Canadian audience, driving the success story you deserve.</p>
+
+         <p class="service-details__text"><b>Digital Marketing Services:</b>  "Shaping Canada’s Digital Landscape – One Campaign at a Time"</p>
+
+            <p class="service-details__text">Your search for the best digital marketing agency in Canada ends here. Metatroncube Software Solutions is home to award-winning digital marketing excellence. We are committed to driving increased traffic, generating leads, and converting prospects into loyal customers. Engage with us to elevate your online presence and connect with your audience across Canada.</p>
+
+            <h4 class="service-details__content-title">SEO: Optimizing for the Canadian Market – Beyond the Search Engine</h4>
+            <p class="service-details__text">At Metatroncube, SEO is a strategic endeavor that goes beyond ranking first. It's about understanding and acting upon the motivations of your Canadian audience. By leveraging insightful data, we create compelling content that resonates with your clientele, positioning your brand as the go-to within your industry in Canada.</p>
+
+            <h4 class="service-details__content-title">PPC: Hyper-Targeted Pay Per Click Strategies – The Fast Lane to Visibility</h4>
+            <p class="service-details__text">With Metatroncube's Pay Per Click marketing, instantly navigate a stream of qualified Canadian traffic to your site. Our PPC experts utilize data-centric strategies to target traffic effectively, enhance conversions, and maximize your ROI, solidifying your online presence in the competitive Canadian market.</p>
+
+            <h4 class="service-details__content-title">Display Advertising: Engaging Canadian Audiences with Precision Display Advertising</h4>
+            <p class="service-details__text">Display Advertising at Metatroncube is tailored to capture the Canadian demographic by utilizing data to align ads with user age, interests, and location. Our experts excel in targeting potential customers, significantly boosting sales through strategically placed advertisements.</p>
+
+            <h4 class="service-details__content-title">Social Media Marketing: Crafting Social Narratives for the Canadian Audience</h4>
+            <p class="service-details__text">Social media is the digital pulse of Canada, and at Metatroncube, we craft narratives that align with your marketing goals. Our content is tailored to engage with your Canadian audience, promoting your offerings and fostering community around your brand.</p>
+
+            <h4 class="service-details__content-title">Email Marketing: Direct Engagement Through Tailored Email Campaigns</h4>
+            <p class="service-details__text">As one of the most effective digital channels, email marketing holds a special place in the Canadian market. Metatroncube designs personalized email campaigns that resonate with your audience, ensuring your business stands out through newsletters and captivating advertisements.</p>
+
+            <h4 class="service-details__content-title">Web Analytics: Insights into the Canadian Digital Consumer</h4>
+            <p class="service-details__text">Web Analytics is the compass guiding our strategy, providing insight into Canadian consumer behavior online. At Metatroncube, we use this data to fine-tune a content strategy that not only attracts but also motivates your audience to engage with your brand in a meaningful way.</p>
+
+            <h4 class="service-details__content-title">Content Marketing: Educating and Engaging the Canadian Market</h4>
+            <p class="service-details__text">In Canada, content marketing is the key to building a base of loyal followers. Metatroncube begins by understanding the unique interests of your Canadian audience. Our team of expert writers then crafts content that satisfies their informational needs, establishing your brand's authority.</p>
+
+            <p class="service-details__text"><b>Crafting Visibility. Cultivating Connections. Let Metatroncube illuminate your digital path and forge lasting bonds with your audience.</b></p>
+
+
+            <h2 class="service-details__content-title text-center">Join Forces with a Leading Digital Marketing Agency in Canada</h2>
+            <div class="text-center mb-40">
+                <a href="/contact" class="theme-btn">Schedule Consultation</a>
+            </div>
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-chart-line"></i>
+                        </div>
+                        <h2 class="service-card__title">SEO & Organic Growth</h2>
+                        <p class="service-card__text">
+                            Dominate search engine rankings and captivate your audience organically.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-users"></i>
+                        </div>
+                        <h2 class="service-card__title">Social Media Engagement</h2>
+                        <p class="service-card__text">
+                            Elevate your social media impact with Metatroncube's bespoke campaigns.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+
+
             <div class="service-details__benefit">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="service-details__benefit__img">
-                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Digital Marketing Services">
                         </div>
                     </div>
                     <div class="col-md-6">
                         <div class="service-details__benefit__content">
-                            <h3 class="service-details__benefit__title">Our Benefits</h3>
-                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <h3 class="service-details__benefit__title">Amplify Your Reach with SEO Mastery</h3>
+                            <p class="service-details__benefit__text">Ascend Search Rankings and Connect with Your Audience</p>
                             <ul class="list-unstyled service-details__benefit__list">
-                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
-                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Data-Driven Keyword Strategy</li>
+                                <li><i class="fa-solid fa-circle-check"></i> On-Page and Off-Page Optimization</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Content is King</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Analytics and Adaptation</li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
-            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+
+        
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Social Media Marketing">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Engage Audiences with Dynamic Social Media</h3>
+                            <p class="service-details__benefit__text">Build a Community Around Your Brand</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> Strategic Content Creation</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Targeted Social Campaigns</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Interactive Community Management</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Performance Metrics</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
+        faq: [
+            {
+                "question": "What does a digital marketing agency do?",
+                "answer": "A digital marketing agency specializes in creating strategies to promote businesses online. This includes services like search engine optimization (SEO), pay-per-click advertising (PPC), social media management, content creation, email marketing, and web design and development. The goal is to increase brand awareness, drive traffic, and convert leads into customers using various digital platforms."
+            },
+            {
+                "question": "Is it worth it to hire a digital marketing agency?",
+                "answer": "Hiring a digital marketing agency can be highly beneficial, especially if you lack the expertise or resources to effectively market your business online. Agencies bring a wealth of experience and specialized skills that can help you reach a broader audience more efficiently than attempting to do it yourself. They can also provide valuable insights into market trends and analytics, ensuring that your marketing efforts are data-driven and have the highest possible return on investment (ROI)."
+            },
+            {
+                "question": "How does a digital marketing agency improve my business's online presence?",
+                "answer": "A digital marketing agency improves your online presence by implementing a comprehensive digital strategy tailored to your business’s needs. They employ SEO tactics to improve your search engine rankings, run targeted ad campaigns to increase visibility, manage your social media accounts to engage with your audience more effectively, and create compelling content that represents your brand's voice. All these efforts work together to boost your online footprint and attract potential customers."
+            },
+            {
+                "question": "What should I look for when choosing a digital marketing agency?",
+                "answer": "When choosing a digital marketing agency, look for their track record of success with businesses similar to yours, including case studies and client testimonials. Evaluate their expertise across different digital marketing disciplines and their ability to adapt to the latest industry changes. Transparency in communication, reporting, and pricing are also key factors. Lastly, ensure they understand your business goals and can align their strategies accordingly."
+            }
+        ]
+    },
+    {
+        id: 7,
+        title: "Website Development",
+        slug: "web-page-design-in-waterloo",
+        icon: "fa-solid fa-laptop-code",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-services.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-services.webp",
+        description: "Discover personalized web design with Waterloo's creative architects. We craft digital artistry that resonates with your audience.",
+        content: `
+            <h2 class="service-details__content-title">Web Page Design in Waterloo Metatroncube: Crafting Digital Artistry in Web Page Design for Waterloo Community</h2>
+           
+            <p class="service-details__text">Discover Personalized Web Design with Waterloo's Creative Architects. At Metatroncube Software Solutions, nestled in the heart of Waterloo's innovation district, we pride ourselves on being the leading web designers in Waterloo. Our team combines the latest technological advancements with a touch of creative flair to ensure that each web solution we deliver is not only visually striking but also provides a stellar user experience that resonates with your audience.</p>
+
+  
+            <p class="service-details__text">Redefining Aesthetics with Purposeful Web Design Our journey in website design transcends typical aesthetics. As dedicated website designers in Waterloo, we delve into the fabric of your brand's story, weaving a digital narrative that captures your essence and establishes a meaningful connection with your visitors. Our ethos, deeply rooted in the concept of "Web Page Design Waterloo," sets a benchmark for innovation and quality in the digital realm.</p>
+
+            <p class="service-details__text">Tailoring Web Solutions for Waterloo's Diverse Businesses We understand that each brand is unique, especially when it comes to small businesses that form the backbone of Waterloo's economy. As small businesses web designers in Waterloo, we offer personalized and tailored web solutions that reflect the distinct identity of each client, ensuring a unique and compelling digital presence that stands out in the marketplace.</p>
+
+
+            <p class="service-details__text">Embracing a User-Centric Design Philosophy At the core of Metatroncube's strategy is a profound emphasis on the user experience. We meticulously research user behaviors and preferences to ensure that each website we craft is not only intuitive but thoroughly engaging, meeting the high standards we set for "Web Page Design Waterloo."</p>
+
+            <p class="service-details__text">Harnessing Advanced Technology for Dynamic Web Solutions With an arsenal of cutting-edge technology at our disposal, we create web designs that are both robust and scalable. Our commitment to leveraging modern tools and innovative techniques reinforces our stature as a pioneer in "Web Page Design Waterloo," prepared to take on the challenges of an ever-evolving digital landscape.</p>
+
+            <p class="service-details__text">Enhancing Visibility with SEO-Optimized Design In today's digital age, SEO is not an afterthought but a fundamental aspect of web design. Our designs are meticulously optimized to improve your site's ranking on search engines, thereby increasing your online visibility and driving valuable organic traffic as part of our comprehensive "Web Page Design Waterloo" services.</p>
+
+            <p class="service-details__text">Dedicated Support for Your Evolving Online Needs Our engagement with you goes beyond the website launch. We are committed to providing continuous support, ensuring that your digital platform remains cutting-edge and responsive to the changing needs of your business, reflecting the vibrant and innovative spirit of "Web Page Design Waterloo."</p>
+
+            <p class="service-details__text">Embark on a Collaborative Design Journey with Metatroncube Your journey towards an outstanding web presence starts here at Metatroncube. Let us take you beyond your expectations, as we showcase the pinnacle of "Web Page Design Waterloo." Join us in crafting a digital experience that's as impactful as the city we serve.</p>
+
+            <p class="service-details__text">Experience the pinnacle of web design with Metatroncube. Together, let's shape a distinguished and effective digital footprint for your brand in Waterloo.</p> 
+            
+            <p class="service-details__text"><b>Web Page Design Waterloo: Where Your Digital Dreams Take Flight. Transforming Visions into Virtual Masterpieces.</b></p> 
         `
+    },
+    {
+        id: 8,
+        title: "Kitchener Waterloo Website Design",
+        slug: "kitchener-waterloo-website-design-services",
+        icon: "fa-solid fa-paint-brush",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
+        description: "Tailoring digital interfaces with bespoke website design from Kitchener's creative vanguard. We stand at the confluence of technology and creativity.",
+        content: `
+            <h2 class="service-details__content-title">KITCHENER WATERLOO WEBSITE DESIGN SERVICES: Tailoring Digital Interfaces with Metatroncube</h2>
+           
+            <p class="service-details__text">Bespoke Website Design from Kitchener's Creative Vanguard. Welcome to Metatroncube Software Solutions. We stand at the confluence of technology and creativity in Kitchener-Waterloo, offering unmatched Kitchener Waterloo Website Design Services. Our expert team, known for its technological prowess and artistic vision, ensures each solution is not just visually compelling but also enriches user experience.</p>
+
+
+            <p class="service-details__text">Elevating Aesthetics with Functional Design< In the tech-rich landscape of Kitchener-Waterloo, our design philosophy is about infusing functionality with beauty. As providers of Waterloo Website Design Services, we craft digital narratives that align with your brand's core values, ensuring each interaction is meaningful.</p>
+
+            <p class="service-details__text">Customized Web Solutions for the Kitchener-Waterloo Business Community Understanding the diversity of the local economy, our Kitchener Website Design Services are uniquely personalized. From small start-ups to established enterprises, we ensure that every digital strategy is as distinctive as the businesses we serve.</p>
+
+            <p class="service-details__text">Prioritizing User Experience in Every Design Our design methodology at Metatroncube is deeply ingrained in user-centric principles. By thoroughly analyzing user behavior and preferences, we ensure our KW Website Design Services deliver intuitive and engaging websites that meet the exacting demands of today's users.</p>
+
+
+            <p class="service-details__text">Embracing Cutting-Edge Technology for Dynamic Solutions We harness the latest in web development technology, creating sites that are resilient and scalable. Our forward-thinking approach positions us at the forefront of Kitchener Waterloo Website Design Services, ready to embrace the digital future.</p>
+
+        
+            <p class="service-details__text">SEO-Optimized Design for Greater Reach SEO is integral to our design process. By optimizing design elements, we enhance your website's search engine ranking, thus boosting visibility and organic traffic as a core aspect of our Waterloo Website Design Services.</p>
+
+   
+            <p class="service-details__text">Comprehensive Support for Continuous Evolution Our engagement extends beyond website deployment. Offering ongoing support, we ensure that your digital platform is always aligned with the latest trends, reflecting the dynamic spirit of KITCHENER WATERLOO WEBSITE DESIGN SERVICES.</p>
+
+
+            <p class="service-details__text">Join Us on a Collaborative Design Adventure Embark on your web design journey with Metatroncube. We are eager to surpass your expectations, highlighting the signature quality of our Kitchener Waterloo Website Design Services.</p>
+
+            <p class="service-details__text">Discover the full spectrum of web design excellence with Metatroncube. Together, let's forge a remarkable and effective digital identity for your business in the Kitchener-Waterloo area.</p>
+
+             <p class="service-details__text"><b>Web Page Design Waterloo: Where Your Digital Dreams Take Flight. Transforming Visions into Virtual Masterpieces.</b></p>
+
+            <h4 class="service-details__title"><span style="color: #3779b9;">Our</span> Portfolio:</h4>
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-lightbulb"></i>
+                        </div>
+                        <h2 class="service-card__title">Innovative Web Solutions</h2>
+                        <p class="service-card__text">
+                            Customized digital experiences to elevate your brand.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-gears"></i>
+                        </div>
+                        <h2 class="service-card__title">Cutting-Edge Technology</h2>
+                        <p class="service-card__text">
+                            Leveraging the latest tech to create responsive, fast, and secure websites.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Kitchener Waterloo Website Design">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Seamless Integration</h3>
+                            <p class="service-details__benefit__text">Streamline your online presence with effortlessly integrated web services.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> Customized Design</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Responsive Layouts</li>
+                                <li><i class="fa-solid fa-circle-check"></i> SEO-Optimized</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Robust Security</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
+        faq: [
+            {
+                "question": "Is my website builder allowed on site?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to soft launch your business?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to turn visitors into contributors",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How can i find my app solutions?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            }
+        ]
+    },
+    {
+        id: 9,
+        title: "Mobile Application Development",
+        slug: "app-development-waterloo",
+        icon: "fa-solid fa-mobile-screen-button",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-app-development.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-app-dev.webp",
+        description: "Premier app development in Waterloo, creating high-performance, scalable mobile applications tailored to the unique demands of local businesses and entrepreneurs.",
+        content: `
+            <h2 class="service-details__content-title">Application Development at Metatroncube: Premier App Development Waterloo</h2>
+           
+
+            <p class="service-details__text">Welcome to the forefront of app development Waterloo at Metatroncube. Specializing in mobile technology, our Application Development Services cater to the unique demands of Waterloo's small businesses and entrepreneurs. Our team's broad expertise in various platforms and technologies ensures the creation of high-performance, scalable, and engaging mobile applications. Whether your project calls for native solutions or seeks the advantages of cross-platform versatility, our Waterloo-based developers excel in bringing your ideas to life.</p>
+
+            <h4 class="service-details__content-title">Android App Development Waterloo Market</h4>
+            <p class="service-details__text">Explore the possibilities in the Android ecosystem with custom apps designed specifically for Waterloo's diverse business landscape. Leveraging the latest frameworks and tools, we ensure your Android app is robust, user-friendly, and stands out in the Play Store, perfectly catering to the unique needs of Waterloo small businesses.</p>
+
+            <h4 class="service-details__content-title">iOS App Development Waterloo</h4>
+            <p class="service-details__text">Provide your users in Waterloo with a premium iOS experience. Our developers craft sleek, intuitive applications that comply with Apple's design guidelines, offering an unmatched user experience tailored to the sophisticated clientele of Waterloo.</p>
+
+            <h4 class="service-details__content-title">Native App Development Waterloo</h4>
+            <p class="service-details__text">Achieve optimal performance and seamless integration with device capabilities through our native app development. We build apps for both Android and iOS, ensuring smooth operation and full utilization of device features, ideal for businesses in Waterloo seeking superior user experiences.</p>
+
+            <h4 class="service-details__content-title">Cross-Platform Development with Flutter for Waterloo's Audience</h4>
+            <p class="service-details__text">Extend your reach across Waterloo with cross-platform applications using Flutter. With a unified codebase, we develop beautiful, natively compiled applications for both mobile platforms, ensuring consistency and efficiency, without compromising on the quality that Waterloo's market demands.</p>
+
+            <p class="service-details__text">Choose Metatroncube in Waterloo for your app development needs and partner with a team that's deeply committed to innovation, quality, and creating exceptional digital experiences. Let us guide you through the mobile landscape with applications that not only elevate your brand but also actively engage your Waterloo audience.</p>
+
+            <p class="service-details__text"><b>Code with Vision, Create with Precision – Crafting Mobile Experiences for Waterloo That Truly Inspire.</b></p>
+
+            <p class="service-details__text">By choosing Metatroncube for app development in Waterloo, you're not just developing an app; you're investing in a partnership that understands and values the unique digital needs of Waterloo small businesses. Let us help you navigate the ever-evolving mobile landscape with applications that elevate your brand and resonate with your local users.</p>
+
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-brands fa-android"></i>
+                        </div>
+                        <h2 class="service-card__title">Android App Excellence</h2>
+                        <p class="service-card__text">
+                            Navigate Android's versatility with apps that deliver. Our Android solutions merge market trends with user-centric design for standout Play Store presence.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-brands fa-apple"></i>
+                        </div>
+                        <h2 class="service-card__title">iOS Development Craftsmanship</h2>
+                        <p class="service-card__text">
+                            Experience the artistry of iOS apps. We build with precision, ensuring every app meets Apple's high standards for sleek design and flawless functionality.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="App Development Waterloo">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Crafting Cross-Platform Mobile Masterpieces</h3>
+                            <p class="service-details__benefit__text">Seamless Apps for Android and iOS Users Alike</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> Unified User Experience</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Optimized Performance</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Design Consistency</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Continuous Integration and Deployment</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
+        faq: [
+            {
+                "question": "What is an app development agency?",
+                "answer": "An app development agency is a company that specializes in creating software applications for various platforms, such as mobile devices, web, and desktop. These agencies have teams of professionals who handle the entire app development process, including ideation, design, coding, testing, and deployment. They may also provide post-launch services such as app maintenance, updates, and marketing."
+            },
+            {
+                "question": "How much does it cost to hire someone to build a mobile app?",
+                "answer": "The cost to hire someone to build a mobile app can vary widely depending on several factors, including the complexity of the app, the platform(s) it will run on, the geographic location of the developers, and the level of design and functionality required. Simple apps may start in the range of a few thousand dollars, while more complex applications can cost tens or even hundreds of thousands of dollars."
+            },
+            {
+                "question": "How do I choose a mobile app development agency?",
+                "answer": "Choosing a mobile app development agency involves several considerations:<br><br><b>Portfolio:</b> Look at their past work to assess their experience and expertise.<br><br><b>Technical Skills:</b> Ensure they have the technical skills necessary for your specific app requirements.<br><br><b>Client Testimonials:</b> Check client reviews and testimonials to gauge their reliability and customer service.<br><br><b>Process Transparency:</b> The agency should have a clear development process and be willing to keep you informed throughout.<br><br><b>Post-Launch Support:</b> Find out if they offer maintenance and support services after the app is launched."
+            },
+            {
+                "question": "What are the benefits of hiring a mobile app development agency instead of freelancers ?",
+                "answer": "Hiring a mobile app development agency brings several advantages over individual freelancers:<br><br><b>Team Expertise:</b> Agencies have a team of experts with diverse skills, providing a comprehensive approach to development.<br><br><b>Scalability:</b>They can scale resources up or down according to project needs, which is harder with freelancers.<br><br><b>Accountability:</b> Agencies typically have a higher level of professional accountability and established business practices.<br><br><b>Continuity:</b> They can offer continuity and support, ensuring your project won't stall if an individual becomes unavailable."
+            }
+        ]
+    },
+    {
+        id: 10,
+        title: "Web Design Waterloo",
+        slug: "professional-website-designers-in-waterloo",
+        icon: "fa-solid fa-laptop",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
+        description: "Empowering your digital journey in Waterloo with bespoke web design solutions that capture your business essence and connect with your local audience.",
+        content: `
+            <h2 class="service-details__content-title">Metatroncube: Empowering Your Digital Journey in Waterloo</h2>
+          
+
+            <p class="service-details__text">Welcome to Metatroncube Software Solutions, where innovation in web design meets Waterloo's vibrant business landscape. As Waterloo's premier website designers, we specialize in creating bespoke digital solutions that capture the essence of your business and connect you with your target audience. Our expertise in understanding the local market nuances positions us uniquely to elevate your online presence.</p>
+
+            <h4 class="service-details__content-title">Why Choose Metatroncube for Your Waterloo Business</h4>
+            <p class="service-details__text">In Waterloo's thriving economic scene, your business deserves a website that stands out. At Metatroncube Software Solutions, we:</p>
+
+            <p class="service-details__text"><b>Grasp Local Dynamics:</b> Our deep understanding of Waterloo's business environment means your website will effectively engage with your local audience.</p>
+
+            <p class="service-details__text"><b>Provide Customized Web Solutions:</b> From startups to established enterprises, our approach is tailor-made to fit your unique digital needs.</p>
+
+            <p class="service-details__text"><b>Focus on Collaboration:</b> Your vision is our blueprint. We collaborate with you closely to ensure your website reflects your brand's ethos and goals.</p>
+
+            <h4 class="service-details__content-title">Our Services</h4>
+
+            <p class="service-details__text"><b>Bespoke Website Design:</b> We craft visually stunning and functionally superior websites that represent your brand's personality.</p>
+
+            <p class="service-details__text"><b>Responsive Web Development:</b> Our websites are optimized for all devices, ensuring a seamless user experience.</p>
+
+            <p class="service-details__text"><b>E-Commerce Platforms:</b> Elevate your online sales with our intuitive e-commerce solutions designed for maximum customer engagement and conversion.</p>
+
+            <p class="service-details__text"><b>SEO and Digital Marketing:</b> Boost your online visibility with our strategic SEO and comprehensive digital marketing services.</p>
+
+        <p class="service-details__text">Shaping Digital Destinies with Precision and Passion — Metatroncube, Your Local Web Artisans.</p>
+
+            <h4 class="service-details__title"><span style="color: #3779b9;">Our</span> Portfolio:</h4>
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-lightbulb"></i>
+                        </div>
+                        <h2 class="service-card__title">Innovative Web Solutions</h2>
+                        <p class="service-card__text">
+                            Customized digital experiences to elevate your brand.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-gears"></i>
+                        </div>
+                        <h2 class="service-card__title">Cutting-Edge Technology</h2>
+                        <p class="service-card__text">
+                            Leveraging the latest tech to create responsive, fast, and secure websites.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Web Design Waterloo">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Seamless Integration</h3>
+                            <p class="service-details__benefit__text">Streamline your online presence with effortlessly integrated web services.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> Customized Design</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Responsive Layouts</li>
+                                <li><i class="fa-solid fa-circle-check"></i> SEO-Optimized</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Robust Security</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
+        faq: [
+            {
+                "question": "Is my website builder allowed on site?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to soft launch your business?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to turn visitors into contributors",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How can i find my app solutions?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            }
+        ]
+    },
+    {
+        id: 11,
+        title: "Website Development",
+        slug: "web-design-toronto-custom-website-creation-by-metatroncube-software-solutions",
+        icon: "fa-solid fa-city",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
+        description: "Unlock the potential of your online presence with premier web design in Toronto—crafting bespoke, SEO-optimized websites that capture your brand essence.",
+        content: `
+            <h2 class="service-details__content-title">Unlock the Potential of Your Online Presence with Metatroncube Software Solutions – Premier Web Design in Toronto</h2>
+        
+
+            <p class="service-details__text">At Metatroncube Software Solutions, we understand that the digital landscape of Toronto is not just about being seen—it's about being memorable. Specializing in innovative website creation, our Toronto-based web design experts blend aesthetics with functionality, crafting bespoke websites that capture the essence of your brand and engage your target audience.</p>
+
+            <p class="service-details__text"><b>Specializing in innovative website creation, our Toronto-based web design experts blend aesthetics with functionality, crafting bespoke websites.</b></p>
+
+            <h4 class="service-details__content-title">Why Choose Metatroncube for Website Design in Toronto?</h4>
+
+            <p class="service-details__text"><b>Expertise in Local Trends:</b> As a leading website design company in Toronto, we have our finger on the pulse of the city's digital demands and aesthetic preferences. Whether you are a startup or an established enterprise, our tailored solutions ensure your website stands out in a competitive market.</p>
+
+            <p class="service-details__text"><b>Comprehensive Web Design Solutions:</b> Our services encompass everything from initial design to final launch, and beyond. 'Website creation Toronto' is more than just a keyword for us—it's a commitment to delivering end-to-end solutions that enhance your online visibility and functionality.</p>
+
+            <p class="service-details__text"><b>SEO-Driven Design:</b> With keywords like 'web design Toronto' drawing significant search volumes, we prioritize SEO from the ground up. Our designs are not only visually appealing but also optimized for search engines, ensuring that your site ranks well for 'website design Toronto' and related queries.</p>
+
+            <p class="service-details__text"><b>Customized Strategies for Every Client:</b> Understanding that each business has unique needs, we offer customized web design solutions tailored to meet your specific objectives. Our strategic approach ensures that every element of your site, from layout to content, aligns with your overall business goals.</p>
+
+            <p class="service-details__text"><b>Responsive and Reliable Support:</b> At Metatroncube, we believe in building relationships beyond contracts. Our team is always ready to assist you with any updates, technical issues, or strategic advice to keep your website performing at its best.</p>
+
+              <h4 class="service-details__content-title">Your Website Is Your First Impression
+</h4>
+            <p class="service-details__text">In today’s fast-paced digital world, your website often makes the first impression on potential clients and customers. Metatroncube Software Solutions ensures it’s a lasting one. Our team leverages the latest technologies and creative strategies to deliver websites that are not only visually striking but also highly functional and user-friendly.</p>
+
+            <h4 class="service-details__content-title">Ready to Elevate Your Online Presence?</h4>
+            <p class="service-details__text">If you're looking for top-tier web design in Toronto, look no further than Metatroncube Software Solutions. Contact us today to discuss how we can transform your online presence with a stunning, effective, and SEO-optimized website tailored just for you.</p>
+
+            <p class="service-details__text">Let's create a digital experience that resonates with your audience and elevates your brand. Discover the difference with Metatroncube—where your vision meets our expertise.</p>
+
+         
+        `,
+        faq: [
+            {
+                "question": "Is my website builder allowed on site?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to soft launch your business?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How to turn visitors into contributors",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            },
+            {
+                "question": "How can i find my app solutions?",
+                "answer": "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable."
+            }
+        ]
+    },
+    {
+        id: 12,
+        title: "SEO & Content Writing",
+        slug: "waterloo-seo-services",
+        icon: "fa-solid fa-magnifying-glass-location",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        bannerLeftImage: "/assets/images/innerbanner/left/left-seo-content.webp",
+        bannerRightImage: "/assets/images/innerbanner/right/right-seo.webp",
+        description: "Revolutionizing your online visibility with Waterloo SEO strategies that propel your business to the top of local search rankings.",
+        content: `
+            <h2 class="service-details__content-title">Waterloo SEO Services "Waterloo SEO": Revolutionizing Your Online Visibility</h2>
+            <p class="service-details__text">In the heart of Waterloo's dynamic digital landscape, excelling in SEO is not just beneficial; it's essential. Metatroncube Software Solutions specializes in Waterloo SEO, crafting strategies that propel your business to the top of search rankings in the local market. Our approach to "Waterloo SEO" is designed to maximize your digital footprint and elevate your brand in the Waterloo area. By understanding the unique aspects of the local market, we tailor our SEO strategies to ensure your business not only gets noticed but becomes a leading voice in your industry.</p>
+
+            <h4 class="service-details__content-title">1. The Art of "Waterloo SEO": Crafting Your Success Story</h4>
+            <p class="service-details__text"><b>Tailoring Strategies for Local Impact</b></p>
+            <p class="service-details__text">Waterloo SEO is not just about being visible; it's about making a statement in the digital realm. Our approach involves a deep analysis of your business, understanding your unique value proposition, and integrating it with Waterloo's market characteristics. We focus on creating a narrative that resonates with your target audience, blending local understanding with broad SEO expertise.</p>
+
+            <h4 class="service-details__content-title">2. "Waterloo SEO" Techniques: On-Page and Off-Page Mastery</h4>
+            <p class="service-details__text"><b>Comprehensive On-Page and Off-Page Optimization</b></p>
+            <p class="service-details__text">Our on-page optimization includes meticulous keyword placement, meta-tag enhancements, and content optimization tailored to "Waterloo SEO". Off-page, we focus on building a strong backlink profile from reputable local sources, enhancing your website's authority and relevance for Waterloo-based queries.</p>
+
+            <h4 class="service-details__content-title">3. Localized Content for "Waterloo SEO": Engaging the Waterloo Community</h4>
+            <p class="service-details__text"><b>Creating Content that Connects with Waterloo</b></p>
+            <p class="service-details__text">The content we create speaks directly to the Waterloo community. It's about engaging narratives that reflect local interests, trends, and needs, all while emphasizing "Waterloo SEO". We craft content that is not only informative and valuable but also instills a sense of local pride and connection.</p>
+
+            <h4 class="service-details__content-title">4. Navigating the "Waterloo SEO" Landscape: Trends and Innovations</h4>
+            <p class="service-details__text"><b>Staying Ahead with the Latest SEO Trends</b></p>
+            <p class="service-details__text">SEO is an ever-evolving field, and staying ahead in "Waterloo SEO" means keeping abreast of the latest trends and innovations. We constantly refine our strategies based on the latest SEO research, algorithm updates, and digital marketing innovations, ensuring your business remains at the forefront of the Waterloo digital scene.</p>
+
+            <h4 class="service-details__content-title">5. Analyzing and Refining Your "Waterloo SEO" Strategy</h4>
+            <p class="service-details__text"><b>Ongoing Analysis for Continuous Improvement</b></p>
+            <p class="service-details__text">Success in SEO is measured and built over time. We continuously monitor your website's performance, making data-driven adjustments to enhance your "Waterloo SEO" ranking. This includes analyzing user behavior, conversion rates, and keyword performance specific to the Waterloo area.</p>
+
+            <h4 class="service-details__content-title">"Waterloo SEO" Case Studies: Witnessing Real Success</h4>
+            <p class="service-details__text"><b>Proven Results in the Waterloo Market:</b> Discover how we've helped businesses in Waterloo achieve their SEO goals. From increased traffic and higher rankings to enhanced brand visibility and customer engagement, our case studies demonstrate the tangible impact of a well-executed "Waterloo SEO" strategy.</p>
+
+            <h4 class="service-details__content-title">Embrace "Waterloo SEO" with Metatroncube</h4>
+            <p class="service-details__text">Partner with us to navigate the complexities of Waterloo SEO. Our team is ready to employ their expertise and passion to help your business thrive in the digital landscape of Waterloo.</p>
+
+            <h4 class="service-details__content-title">Conclusion</h4>
+            <p class="service-details__text">Your Journey Towards "Waterloo SEO" Mastery Starts Here: Begin your path to SEO success with Metatroncube. Contact us today to explore how we can elevate your online presence and drive meaningful results in the Waterloo area.</p>
+
+            <div class="service-details__portfolio-cards service-one">
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-chart-line"></i>
+                        </div>
+                        <h2 class="service-card__title">SEO Mastery</h2>
+                        <p class="service-card__text">
+                            Boost Your Search Engine Presence. Our advanced SEO techniques elevate your site's visibility and drive organic growth and reach.
+                        </p>
+                       
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="service-card__inner">
+                        <div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
+                        <div class="service-card__shape"></div>
+                        <div class="service-card__icon">
+                            <i class="fa-solid fa-feather"></i>
+                        </div>
+                        <h2 class="service-card__title">Content Writing Excellence</h2>
+                        <p class="service-card__text">
+                            Engage and Inspire with Every Word. Our content writing services blend creativity with marketing savvy for impactful storytelling.
+                        </p>
+                       
+                    </div>
+                </div>
+            </div>
+
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Waterloo SEO Services">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">SEO: Your Pathway to Digital Prominence</h3>
+                            <p class="service-details__benefit__text">Optimizing Your Online Presence for Maximum Impact</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> Keyword-Rich Content</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Versatile Content Creation</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Brand Voice Consistency</li>
+                                <li><i class="fa-solid fa-circle-check"></i> Performance Tracking</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
+        faq: [
+            {
+                "question": "What is the importance of SEO in content writing?",
+                "answer": "SEO is crucial in content writing as it helps in increasing the visibility of the content in search engines, driving organic traffic, and enhancing the relevance and authority of your website. By strategically incorporating keywords, optimizing structure, and following search engine guidelines, SEO ensures your content reaches the right audience at the right time, maximizing its impact and ROI."
+            },
+            {
+                "question": "How does quality content benefit my website?",
+                "answer": "Quality content engages your audience, providing value and building trust. It leads to higher engagement rates, increased brand loyalty, and contributes to a better overall user experience on your website."
+            },
+            {
+                "question": "Can SEO and content writing improve my sales?",
+                "answer": "Yes, effective SEO and content writing can significantly improve sales. By attracting the right audience and providing them with valuable content, you can guide them through the sales funnel more effectively"
+            },
+            {
+                "question": "How often should I update my website's content?",
+                "answer": "Regular updates are key to keeping your website fresh and relevant. Depending on your industry, updating content weekly or bi-weekly can help maintain engagement and improve SEO performance."
+            }
+        ]
     }
 ];