inner banner images are updated

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

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 /> */}

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>

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"

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 /> */}

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>

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 />

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%;
+  }
 }

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 />

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 />

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 /> */}

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>
     );
 }

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>

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"
                             >

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>

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",
     },
 ];
 

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"
     }
 ];
 

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">

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">

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">

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>

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>
 

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) => (

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;

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;