diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index cd0f7db..cf057fe 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -77,8 +77,6 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
-
 
 .main-menu ul li.has-dropdown>a::after,
 .main-menu ul li .submenu,
@@ -121,7 +119,7 @@ i[class^=flaticon-],
 
 :root {
   --primary-font: 'Inter', sans-serif;
-  --secondary-font: 'Roboto', sans-serif;
+  --secondary-font: 'Inter', sans-serif;
 
   --theme-color: #3779b9;
   --theme-color-1: #1a1f2b;
@@ -145,8 +143,22 @@ html {
 /*---------------------------------
     Typography css start 
 ---------------------------------*/
+
+/* Apply Inter to ALL text elements — exclude icon fonts */
+body,
+h1, h2, h3, h4, h5, h6,
+p, a, div, li, ul, ol,
+td, th, label, button,
+input, textarea, select,
+blockquote, figcaption, caption,
+.navbar, .nav-link, .nav-item,
+.section-title, .section-heading,
+.btn, .form-control {
+  font-family: 'Inter', sans-serif !important;
+}
+
 body {
-  font-family: var(--secondary-font);
+  font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: var(--theme-color-1);
@@ -8361,4 +8373,30 @@ Animate wobble-vertical
 
 .error-image img {
   width: 100%;
+}
+
+@media (max-width: 460px) {
+
+  .why-choose-two__item:hover {
+    padding-left: 110px;
+  }
+
+  .why-choose-two__count {
+    padding-left: 10px;
+  }
+
+  .why-choose-two__item__content {
+    padding-left: 4px;
+  }
+
+  .why-choose-two__item__title {
+    font-size: 13px;
+    line-height: 16px;
+  }
+
+  .why-choose-two__icon {
+    width: 88px;
+    height: 88px;
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/[slug]/BlogDetailsClient.tsx b/src/app/[slug]/BlogDetailsClient.tsx
index e511329..b387a44 100644
--- a/src/app/[slug]/BlogDetailsClient.tsx
+++ b/src/app/[slug]/BlogDetailsClient.tsx
@@ -6,7 +6,6 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import BlogDetails from "@/components/blog/BlogDetails";
-import MetatronInitializer from "@/components/MetatronInitializer";
 
 interface BlogDetailsClientProps {
     blog: any | undefined;
@@ -40,7 +39,6 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
 
     return (
         <>
-            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader
diff --git a/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx b/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
index 7316c05..1eb5b5f 100644
--- a/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
+++ b/src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
@@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import AccessibilityContent from "@/components/accessibility/AccessibilityContent";
-import MetatronInitializer from "@/components/MetatronInitializer";
 
 export const metadata: Metadata = {
     title: "Accessibility Statement for Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo",
@@ -17,7 +16,6 @@ export const metadata: Metadata = {
 export default function AccessibilityStatement() {
     return (
         <>
-            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader
diff --git a/src/app/blog/results/page.tsx b/src/app/blog/results/page.tsx
index 820b50c..9e0be51 100644
--- a/src/app/blog/results/page.tsx
+++ b/src/app/blog/results/page.tsx
@@ -1,7 +1,6 @@
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
-import MetatronInitializer from "@/components/MetatronInitializer";
 import BlogResultsContent from "@/components/blog/BlogResultsContent";
 import { Metadata } from "next";
 
@@ -13,7 +12,6 @@ export const metadata: Metadata = {
 export default function BlogResultsPage() {
     return (
         <>
-            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader
diff --git a/src/app/globals.css b/src/app/globals.css
index 6cbab07..27c4388 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -227,7 +227,7 @@ body {
 }
 
 .btn-one {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   background-size: 200% auto !important;
   border-radius: 10px !important;
   color: #fff !important;
@@ -2832,6 +2832,7 @@ body {
     height: 380px;
     padding: 30px;
   }
+
   .close-desc-btn {
     top: 30px !important;
     right: 30px !important;
@@ -2843,6 +2844,7 @@ body {
     opacity: 0;
     transform: scale(0.5);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -3330,7 +3332,7 @@ body {
   padding: 10px 22px;
   border-radius: 10px !important;
   border: none !important;
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   color: white !important;
   font-size: 14px;
   font-weight: 500;
@@ -3341,7 +3343,7 @@ body {
 
 .pf-tab-btn:hover,
 .pf-tab-btn.active {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   color: #fff !important;
   box-shadow: 0 6px 20px rgba(55, 121, 185, 0.35);
   opacity: 0.85;
@@ -4037,7 +4039,7 @@ body {
     width: 425px;
     height: 425px;
     border-radius: 50%;
-    background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+    background-color: #3779b9 !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -4443,7 +4445,7 @@ body {
 }
 
 .service-circle__center {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   padding: 40px 20px;
   border-radius: 20px;
   text-align: center;
@@ -4993,7 +4995,7 @@ body {
     width: 425px;
     height: 425px;
     border-radius: 50%;
-    background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+    background-color: #3779b9 !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -5085,7 +5087,7 @@ body {
      ----------------------------------------------------------- */
 .why-choose-two {
   position: relative;
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   counter-reset: count;
 }
 
@@ -7776,7 +7778,7 @@ body {
 
 .service-circle__menu li.active a,
 .service-circle__menu li a:hover {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
 }
 
 .service-circle__menu li img {
@@ -7806,7 +7808,7 @@ body {
   width: 425px;
   height: 425px;
   border-radius: 50%;
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8003,7 +8005,7 @@ body {
 }
 
 .service-circle__center {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   /* border: 4px solid rgba(255, 255, 255, 0.1); */
 }
 
@@ -8388,7 +8390,7 @@ body {
 }
 
 .projects-one__filter__list button.list-unstyled-item {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   background-size: 200% auto !important;
   border-radius: 10px !important;
   color: #fff !important;
@@ -8407,7 +8409,7 @@ body {
 
 .projects-one__filter__list button.list-unstyled-item.active,
 .projects-one__filter__list button.list-unstyled-item:hover {
-  /* background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; */
+  /* background: #3779b9 !important; */
   color: var(--pelocis-white, #fff) !important;
   opacity: 0.85;
 }
@@ -10378,7 +10380,7 @@ body {
   width: 40px;
   height: 40px;
   /* background: #fff; */
-  color: #3779b9;
+  color: #fff;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -12504,7 +12506,7 @@ body {
 }
 
 .metatron-primary-btn {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   color: #fff !important;
   padding: 12px 10px;
   border-radius: 10px;
@@ -12925,7 +12927,7 @@ body {
 .pf-tabs button,
 .pf-tab-btn.active,
 .pf-tab-btn {
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background: #3779b9 !important;
   background-size: 200% auto !important;
   border-radius: 10px !important;
   color: #fff !important;
@@ -16377,7 +16379,7 @@ h4.service-details__dynamic-content-erp {
   width: 138px;
   height: 138px;
   line-height: 158px;
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%);
+  background: #3779b9;
   background-size: 200% auto;
   border-radius: 50%;
   margin: 40px auto 0;
@@ -16682,17 +16684,18 @@ h4.service-details__dynamic-content-erp {
     line-height: 32px;
   }
 
-      .home-contact-one .home-contact__card__content {
-        padding: 70px 35px 70px 39px !important;
-        position: relative;
-        z-index: 2;
-    }
+  .home-contact-one .home-contact__card__content {
+    padding: 70px 35px 70px 39px !important;
+    position: relative;
+    z-index: 2;
+  }
 
-    .home-contact-one .contact-home {
+  .home-contact-one .contact-home {
     position: relative !important;
     left: 10px !important;
     top: -50px !important;
   }
+
   .counter-area-two__list {
     flex-wrap: wrap;
     justify-content: center;
@@ -16713,24 +16716,24 @@ h4.service-details__dynamic-content-erp {
     flex: 0 0 100%;
   }
 
-      .home-contact-one .home-contact__card__content {
-        padding: 66px 0px !important;
-        position: relative;
-        z-index: 2;
-    }
+  .home-contact-one .home-contact__card__content {
+    padding: 66px 0px !important;
+    position: relative;
+    z-index: 2;
+  }
 
-    .home-contact-one .home-contact__card__shape-one{
+  .home-contact-one .home-contact__card__shape-one {
 
-      display: none !important;
+    display: none !important;
 
-    }
+  }
+
+  .home-contact-one .contact-home {
+    position: relative !important;
+    left: -6px !important;
+    top: -50px !important;
+  }
 
-    .home-contact-one .contact-home {
-        position: relative !important;
-        left: -6px !important;
-        top: -50px !important;
-    }
-    
 }
 
 /* Counter Area */
@@ -16757,7 +16760,8 @@ h4.service-details__dynamic-content-erp {
   .choose-section .image.m-img {
     margin-top: 30px;
   }
-    .card-1 {
+
+  .card-1 {
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
@@ -17974,7 +17978,7 @@ h4.service-details__dynamic-content-erp {
     max-width: 520px !important;
   }
 
-  .faq-four .pelocis-stretch-element-inside-column{
+  .faq-four .pelocis-stretch-element-inside-column {
 
     margin-top: 30px !important;
 
@@ -17989,9 +17993,9 @@ h4.service-details__dynamic-content-erp {
     position: absolute;
     left: 91px !important;
     top: 50%;
-}
+  }
 
-.faq-four__image2__icon {
+  .faq-four__image2__icon {
     width: 175px;
     height: 175px;
     display: flex;
@@ -18000,7 +18004,7 @@ h4.service-details__dynamic-content-erp {
     position: absolute;
     right: 84px !important;
     top: 50%;
-}
+  }
 
   .careers-popup-optimized .form-panel {
     padding: 20px 35px 15px !important;
@@ -18045,7 +18049,7 @@ h4.service-details__dynamic-content-erp {
     min-height: 50px !important;
   }
 
-    .faq-four__image__icon {
+  .faq-four__image__icon {
     width: 175px;
     height: 175px;
     display: flex;
@@ -18055,9 +18059,9 @@ h4.service-details__dynamic-content-erp {
     left: 0px !important;
     top: 50%;
     font-size: 54px !important;
-}
+  }
 
-.faq-four__image2__icon {
+  .faq-four__image2__icon {
     width: 175px;
     height: 175px;
     display: flex;
@@ -18067,7 +18071,7 @@ h4.service-details__dynamic-content-erp {
     right: 0px !important;
     top: 50%;
     font-size: 54px !important;
-}
+  }
 
   .careers-popup-optimized .g-recaptcha-container {
     transform: scale(0.7) !important;
@@ -18279,71 +18283,71 @@ h4.service-details__dynamic-content-erp {
 }
 
 @media (max-width: 475px) {
-  
-    .home-contact-one .home-contact__card {
+
+  .home-contact-one .home-contact__card {
     padding: 14px !important;
-}
+  }
 
 
 
-.home-contact-one .home-contact__card__list__title{
+  .home-contact-one .home-contact__card__list__title {
 
-  font-size: 16px !important;
+    font-size: 16px !important;
 
-}
+  }
 
-.home-contact-one .home-contact__card__list__text a{
+  .home-contact-one .home-contact__card__list__text a {
 
-  font-size: 14px !important;
+    font-size: 14px !important;
 
-}
+  }
 
 }
 
 
 @media (max-width: 375px) {
-  
-    .home-contact-one .home-contact__card__list li {
-        padding-right: 41px !important;
-        padding-left: 36px !important;
-    }
+
+  .home-contact-one .home-contact__card__list li {
+    padding-right: 41px !important;
+    padding-left: 36px !important;
+  }
 
 }
 
 @media (max-width: 320px) {
 
-.home-contact-one .home-contact__card__list li {
-        display: flex;
-        align-items: center;
-        gap: 9px !important;
-        margin-bottom: 21px !important;
-        border-radius: 10px !important;
-        padding: 2px 11px !important;
-        padding-right: -6px !important;
-        padding-left: 11px !important;
+  .home-contact-one .home-contact__card__list li {
+    display: flex;
+    align-items: center;
+    gap: 9px !important;
+    margin-bottom: 21px !important;
+    border-radius: 10px !important;
+    padding: 2px 11px !important;
+    padding-right: -6px !important;
+    padding-left: 11px !important;
 
-    }
+  }
 
-    .home-contact-one .home-contact__card {
+  .home-contact-one .home-contact__card {
     padding: 14px !important;
-}
+  }
 
-.home-contact-one .home-contact__card__list li span{
+  .home-contact-one .home-contact__card__list li span {
 
-  font-size: 20px !important;
+    font-size: 20px !important;
 
-}
+  }
 
-.home-contact-one .home-contact__card__list__title{
+  .home-contact-one .home-contact__card__list__title {
 
-  font-size: 14px !important;
+    font-size: 14px !important;
 
-}
+  }
 
-.home-contact-one .home-contact__card__list__text a{
+  .home-contact-one .home-contact__card__list__text a {
 
-  font-size: 14px !important;
+    font-size: 14px !important;
 
-}
+  }
 
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 987232d..f599465 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import type { Metadata } from "next";
 import "./globals.css";
 import Script from "next/script";
-import MetatronInitializer from "@/components/MetatronInitializer";
 
 import Preloader from "@/components/common/Preloader";
 import BackToTop from "@/components/common/BackToTop";
@@ -160,7 +159,7 @@ export default function RootLayout({
       </head>
 
       <body>
-        
+
         {/* ✅ GTM noscript */}
         <noscript>
           <iframe
@@ -175,7 +174,6 @@ export default function RootLayout({
         <BackToTop />
         <SearchOverlay />
         <Offcanvas />
-        <MetatronInitializer />
         {children}
 
         {/* JS */}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 28046d5..5e408f1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,7 +13,6 @@ import CounsellingSolutions from "@/components/home/CounsellingSolutions";
 import CallAreaThree from "@/components/home/CallAreaThree";
 import CounterAreaTwo from "@/components/home/CounterAreaTwo";
 import HomeContactOne from "@/components/home/HomeContactOne";
-import MetatronInitializer from "@/components/MetatronInitializer";
 import HomeServiceOne from "@/components/home/HomeServiceOne";
 
 export const metadata: Metadata = {
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index b144224..ab84261 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PortfolioSection from "@/components/home/PortfolioSection";
 import PageHeader from "@/components/common/PageHeader";
-import MetatronInitializer from "@/components/MetatronInitializer";
 
 export const metadata: Metadata = {
     title: "Metatroncube: Leaders in Web &amp; Mobile Dev, SEO, Digital Marketing",
@@ -17,7 +16,6 @@ export const metadata: Metadata = {
 export default function PortfolioPage() {
     return (
         <>
-            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 1f65262..5ac3924 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
 import PrivacyPolicyContent from "@/components/privacy/PrivacyPolicyContent";
-import MetatronInitializer from "@/components/MetatronInitializer";
 
 export const metadata: Metadata = {
     title: "Privacy Policy of Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo",
@@ -17,7 +16,6 @@ export const metadata: Metadata = {
 export default function PrivacyPolicy() {
     return (
         <>
-            <MetatronInitializer />
             <Header1 />
             <main>
                 <PageHeader
diff --git a/src/components/MetatronInitializer.tsx b/src/components/MetatronInitializer.tsx
deleted file mode 100644
index 3fb2c62..0000000
--- a/src/components/MetatronInitializer.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-export default function MetatronInitializer() {
-    useEffect(() => {
-        const init = () => {
-            if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
-                (window as any).initMetatron();
-            } else {
-                setTimeout(init, 100);
-            }
-        };
-        init();
-    }, []);
-
-    return null;
-}
diff --git a/src/components/contact/ContactSection.tsx b/src/components/contact/ContactSection.tsx
index 45c204e..a5ea497 100644
--- a/src/components/contact/ContactSection.tsx
+++ b/src/components/contact/ContactSection.tsx
@@ -150,6 +150,7 @@ const ContactSection = () => {
                                                 placeholder="Full Name"
                                                 value={formData.name}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
@@ -161,6 +162,7 @@ const ContactSection = () => {
                                                 placeholder="Email Address"
                                                 value={formData.email}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
@@ -172,6 +174,7 @@ const ContactSection = () => {
                                                 placeholder="Phone Number"
                                                 value={formData.phone}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
@@ -181,6 +184,7 @@ const ContactSection = () => {
                                                 name="service"
                                                 value={formData.service}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning={true}
                                                 style={{
                                                     width: '100%',
                                                     padding: '18px 25px',
@@ -211,6 +215,7 @@ const ContactSection = () => {
                                                 rows={5}
                                                 value={formData.message}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning={true}
                                             ></textarea>
                                             {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                         </div>
@@ -224,7 +229,7 @@ const ContactSection = () => {
                                         </div>
 
                                         <div className="form-one__control--full">
-                                            <button type="submit" className="submit-btn-custom-global">
+                                            <button type="submit" className="submit-btn-custom-global" suppressHydrationWarning={true}>
                                                 SEND A MESSAGE
                                             </button>
                                         </div>
diff --git a/src/components/home/HomeServiceOne.tsx b/src/components/home/HomeServiceOne.tsx
index 3fb2bf8..9e1ed2a 100644
--- a/src/components/home/HomeServiceOne.tsx
+++ b/src/components/home/HomeServiceOne.tsx
@@ -1,10 +1,67 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import Link from "next/link";
 import { ourServices } from "@/utils/data";
 
 const HomeServiceOne: React.FC = () => {
+    useEffect(() => {
+        // Swiper Initialization
+        const initSwiper = () => {
+            if (typeof window !== "undefined" && (window as any).Swiper) {
+                new (window as any).Swiper('.service-one-home__carousel', {
+                    slidesPerView: 1,
+                    spaceBetween: 30,
+                    loop: true,
+                    autoplay: {
+                        delay: 5000,
+                        disableOnInteraction: false,
+                    },
+                    speed: 800,
+                    pagination: {
+                        el: '.service-one-home__swiper-dot',
+                        clickable: true,
+                    },
+                    breakpoints: {
+                        576: { slidesPerView: 1 },
+                        768: { slidesPerView: 2 },
+                        992: { slidesPerView: 3 },
+                        1200: { slidesPerView: 3 },
+                    },
+                });
+            } else if (typeof window !== "undefined") {
+                setTimeout(initSwiper, 100);
+            }
+        };
+        initSwiper();
+
+        // Animation Initialization
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const elements = entry.target.querySelectorAll(".wow");
+                        elements.forEach((el) => {
+                            const htmlEl = el as HTMLElement;
+                            const delay = htmlEl.dataset.wowDelay || "0ms";
+                            setTimeout(() => {
+                                htmlEl.classList.add("animated");
+                                htmlEl.style.visibility = "visible";
+                            }, parseInt(delay));
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        const section = document.querySelector(".service-one-home");
+        if (section) observer.observe(section);
+
+        return () => observer.disconnect();
+    }, []);
+
     return (
         <section
             className="service-one-home"
@@ -17,14 +74,13 @@ const HomeServiceOne: React.FC = () => {
                             <div className="sec-title">
                                 <div className="sec-title__shape">
                                 </div>
-                                <h6 className="sec-title__tagline text-white">OUR SERVICES</h6>
-                                <h3 className="sec-title__title text-white">We Shape the Perfect
-                                    Solution.</h3>
+                                <h6 className="sec-title__tagline text-white wow fadeInUp" data-wow-delay="0ms">OUR SERVICES</h6>
+                                <h3 className="sec-title__title text-white wow fadeInUp" data-wow-delay="200ms">We Shape the Perfect Solution.</h3>
                             </div>
                         </div>
                     </div>
                     <div className="col-lg-6">
-                        <div className="service-one-home__text">
+                        <div className="service-one-home__text wow fadeInUp" data-wow-delay="400ms">
                             <p className="text-white">
                                 At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.
                             </p>
@@ -36,7 +92,7 @@ const HomeServiceOne: React.FC = () => {
                     <div className="swiper-wrapper">
                         {ourServices.slice(0, 7).map((service, index) => {
                             return (
-                                <div key={index} className="swiper-slide">
+                                <div key={index} className="swiper-slide wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
                                     <div className="item">
                                         <div className="home-services__card">
                                             <div className="home-services__card__shape--one"></div>
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 23012e0..9175d0a 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -69,9 +69,7 @@ const ProjectsSection = () => {
         activeFilter === "all" || project.category === activeFilter
     );
 
-    if (!hasMounted) {
-        return null;
-    }
+    // Note: Removed if (!hasMounted) return null; to fix hydration mismatch
 
     return (
         <section className="projects-one section-space">
diff --git a/src/components/home/home-1/BlogSection.tsx b/src/components/home/home-1/BlogSection.tsx
index b4b4191..953c6f9 100644
--- a/src/components/home/home-1/BlogSection.tsx
+++ b/src/components/home/home-1/BlogSection.tsx
@@ -3,7 +3,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { BlogData } from "@/utils/constant.utils";
 import Link from "next/link";
-import Slider from "react-slick";
 
 const allBlogs = [...BlogData].sort(
     (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -68,6 +67,62 @@ const BlogSection = ({
         return list;
     }, [searchTerm, selectedCategory]);
 
+    useEffect(() => {
+        // Swiper Initialization
+        const initSwiper = () => {
+            if (typeof window !== "undefined" && (window as any).Swiper) {
+                new (window as any).Swiper('.blog-one__carousel', {
+                    slidesPerView: 1,
+                    spaceBetween: 30,
+                    loop: true,
+                    autoplay: {
+                        delay: 3000,
+                        disableOnInteraction: false,
+                    },
+                    speed: 500,
+                    breakpoints: {
+                        576: { slidesPerView: 1 },
+                        768: { slidesPerView: 2 },
+                        992: { slidesPerView: 3 },
+                        1200: { slidesPerView: 3 },
+                    },
+                });
+            } else if (typeof window !== "undefined") {
+                setTimeout(initSwiper, 100);
+            }
+        };
+
+        if (isSlider) {
+            initSwiper();
+        }
+
+        // Animation Initialization
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const elements = entry.target.querySelectorAll(".wow");
+                        elements.forEach((el) => {
+                            const htmlEl = el as HTMLElement;
+                            const delay = htmlEl.dataset.wowDelay || "0ms";
+                            setTimeout(() => {
+                                htmlEl.classList.add("animated");
+                                htmlEl.style.visibility = "visible";
+                            }, parseInt(delay));
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        const section = document.querySelector(".blog-section-one");
+        if (section) observer.observe(section);
+
+        return () => observer.disconnect();
+    }, [isSlider]);
+
     if (!isMounted) {
         return null; // Avoid hydration mismatch
     }
@@ -112,25 +167,6 @@ const BlogSection = ({
         return pages;
     };
 
-    const sliderSettings = {
-        dots: false,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 2,
-        slidesToScroll: 1,
-        arrows: false,
-        autoplay: true,
-        responsive: [
-            {
-                breakpoint: 767, // Below 768px show 1 card
-                settings: {
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-                },
-            },
-        ],
-    };
-
     return (
         <section className={`blog-section-one section-space ${isPaginated ? "pb-0 pt-0" : ""}`}>
             <div className={`small-container ${isSlider ? "blog-slider-active" : ""}`}>
@@ -146,34 +182,36 @@ const BlogSection = ({
                     </div>
                 )}
                 {isSlider ? (
-                    <Slider {...sliderSettings} className="blog-slider-inner">
-                        {currentBlogs.map((blog) => (
-                            <div key={blog.id} className="blog-slider-item px-3">
-                                <div className="blog-style-one relative overflow-hidden">
-                                    <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
-                                        <img loading="lazy" src={blog.image} alt={blog.title} />
-                                        <span className="blog-category-tag">{blog.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> {blog.date}</span>
-                                        </div>
-                                        <h5 className="blog-title mb-20 mt-15">
-                                            <Link href={`/${blog.slug}`}>{blog.title}</Link>
-                                        </h5>
-                                        <div className="blog-footer">
-                                            <div className="blog-link-learn">
-                                                <Link href={`/${blog.slug}`} className="learn-more-link">
-                                                    Learn More <span>+</span>
-                                                </Link>
+                    <div className="swiper blog-one__carousel">
+                        <div className="swiper-wrapper">
+                            {currentBlogs.map((blog, index) => (
+                                <div key={blog.id} className="swiper-slide px-3">
+                                    <div className="blog-style-one relative overflow-hidden wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
+                                        <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
+                                            <img loading="lazy" src={blog.image} alt={blog.title} />
+                                            <span className="blog-category-tag">{blog.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> {blog.date}</span>
+                                            </div>
+                                            <h5 className="blog-title mb-20 mt-15">
+                                                <Link href={`/${blog.slug}`}>{blog.title}</Link>
+                                            </h5>
+                                            <div className="blog-footer">
+                                                <div className="blog-link-learn">
+                                                    <Link href={`/${blog.slug}`} className="learn-more-link">
+                                                        Learn More <span>+</span>
+                                                    </Link>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        ))}
-                    </Slider>
+                            ))}
+                        </div>
+                    </div>
                 ) : (
                     <div className="row g-4">
                         {currentBlogs.map((blog) => (
diff --git a/src/components/home/home-1/TestimonialsSection.tsx b/src/components/home/home-1/TestimonialsSection.tsx
index 9b1b6fc..23f64ee 100644
--- a/src/components/home/home-1/TestimonialsSection.tsx
+++ b/src/components/home/home-1/TestimonialsSection.tsx
@@ -1,6 +1,5 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import Slider from "react-slick";
 import Link from "next/link";
 import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
 
@@ -26,36 +25,70 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
         loadReviews();
     }, []);
 
+    useEffect(() => {
+        // Swiper Initialization
+        const initSwiper = () => {
+            if (typeof window !== "undefined" && (window as any).Swiper) {
+                new (window as any).Swiper('.testimonials-two__carousel', {
+                    slidesPerView: 1,
+                    spaceBetween: 30,
+                    loop: reviews.length > 2,
+                    autoplay: {
+                        delay: 6000,
+                        disableOnInteraction: false,
+                    },
+                    speed: 500,
+                    pagination: {
+                        el: '.testimonials-two__swiper-pagination',
+                        clickable: true,
+                    },
+                    breakpoints: {
+                        576: { slidesPerView: 1 },
+                        768: { slidesPerView: 2 },
+                        992: { slidesPerView: 2 },
+                        1200: { slidesPerView: 2 },
+                    },
+                });
+            } else if (typeof window !== "undefined") {
+                setTimeout(initSwiper, 100);
+            }
+        };
+
+        if (!loading && reviews.length > 0) {
+            initSwiper();
+        }
+
+        // Animation Initialization
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const elements = entry.target.querySelectorAll(".wow");
+                        elements.forEach((el) => {
+                            const htmlEl = el as HTMLElement;
+                            const delay = htmlEl.dataset.wowDelay || "0ms";
+                            setTimeout(() => {
+                                htmlEl.classList.add("animated");
+                                htmlEl.style.visibility = "visible";
+                            }, parseInt(delay));
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        const section = document.querySelector(".testimonials-two-section");
+        if (section) observer.observe(section);
+
+        return () => observer.disconnect();
+    }, [loading, reviews.length]);
+
     const displayedReviews = reviews.length > 0 && reviews.length < 4
         ? [...reviews, ...reviews, ...reviews]
         : reviews;
 
-    const settings = {
-        dots: false,
-        arrows: false,
-        infinite: displayedReviews.length > 2,
-        speed: 600,
-        slidesToShow: 2,
-        slidesToScroll: 1,
-        autoplay: true,
-        autoplaySpeed: 5000,
-        dotsClass: "testimonial-dot-inner",
-        responsive: [
-            {
-                breakpoint: 1200,
-                settings: {
-                    slidesToShow: 2,
-                }
-            },
-            {
-                breakpoint: 991,
-                settings: {
-                    slidesToShow: 1,
-                }
-            }
-        ]
-    };
-
     function getReviewText(r: any) {
         return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
     }
@@ -116,37 +149,40 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
                                         <p className="text-white">Loading reviews...</p>
                                     </div>
                                 ) : displayedReviews.length > 0 ? (
-                                    <Slider {...settings}>
-                                        {displayedReviews.map((slide, index) => {
-                                            const profileImg = getProfileImage(slide, index);
-                                            const name = slide.user?.name || slide.author_name || "Valued Client";
-                                            const rating = slide.rating || 5;
-                                            return (
-                                                <div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
-                                                    <div className="testimonials-two-box-solid">
-                                                        <div className="author-image-solid">
-                                                            <img loading="lazy" src={profileImg} alt={name} />
-                                                        </div>
-                                                        <div className="icon-quote-testi">
-                                                            <i className="fa-solid fa-quote-right"></i>
-                                                        </div>
-                                                        <div className="content-solid">
-                                                            <h4>{name}</h4>
-                                                            <span className="tag">Verified Google Review</span>
-                                                            <ul className="ratings-solid">
-                                                                {[...Array(rating)].map((_, i) => (
-                                                                    <li key={i}><i className="fa-solid fa-star"></i></li>
-                                                                ))}
-                                                            </ul>
-                                                            <p>
-                                                                &quot;{getReviewText(slide)}&quot;
-                                                            </p>
+                                    <div className="swiper testimonials-two__carousel">
+                                        <div className="swiper-wrapper">
+                                            {displayedReviews.map((slide, index) => {
+                                                const profileImg = getProfileImage(slide, index);
+                                                const name = slide.user?.name || slide.author_name || "Valued Client";
+                                                const rating = slide.rating || 5;
+                                                return (
+                                                    <div key={index} className="swiper-slide" style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
+                                                        <div className="testimonials-two-box-solid wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
+                                                            <div className="author-image-solid">
+                                                                <img loading="lazy" src={profileImg} alt={name} />
+                                                            </div>
+                                                            <div className="icon-quote-testi">
+                                                                <i className="fa-solid fa-quote-right"></i>
+                                                            </div>
+                                                            <div className="content-solid">
+                                                                <h4>{name}</h4>
+                                                                <span className="tag">Verified Google Review</span>
+                                                                <ul className="ratings-solid">
+                                                                    {[...Array(rating)].map((_, i) => (
+                                                                        <li key={i}><i className="fa-solid fa-star"></i></li>
+                                                                    ))}
+                                                                </ul>
+                                                                <p>
+                                                                    &quot;{getReviewText(slide)}&quot;
+                                                                </p>
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                            );
-                                        })}
-                                    </Slider>
+                                                );
+                                            })}
+                                        </div>
+                                        <div className="testimonials-two__swiper-pagination swiper-pagination mt-40 text-center"></div>
+                                    </div>
                                 ) : (
                                     <div className="text-center py-5">
                                         <p className="text-white">No reviews found.</p>
diff --git a/src/components/mobile-app-development-service/BannerBottom.tsx b/src/components/mobile-app-development-service/BannerBottom.tsx
index cd82efc..be66a45 100644
--- a/src/components/mobile-app-development-service/BannerBottom.tsx
+++ b/src/components/mobile-app-development-service/BannerBottom.tsx
@@ -103,18 +103,18 @@ const BannerBottom = () => {
                                 onClick={() => setIsContactOpen(true)}
                                 style={{
                                     cursor: 'pointer',
-                                    background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
+                                    background: '#3779b9 !important',
                                     padding: '10px 25px',
                                     borderRadius: '10px',
                                     border: '1px solid rgba(55, 121, 185, 0.2)',
                                     transition: 'all 0.3s'
                                 }}
                                 onMouseEnter={(e) => {
-                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
+                                    e.currentTarget.style.background = '#3779b9 !important';
                                     e.currentTarget.style.transform = 'translateY(-2px)';
                                 }}
                                 onMouseLeave={(e) => {
-                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
+                                    e.currentTarget.style.background = '#3779b9 !important';
                                     e.currentTarget.style.transform = 'translateY(0)';
                                 }}
                             >
diff --git a/src/components/mobile-app-development-service/Pricing.tsx b/src/components/mobile-app-development-service/Pricing.tsx
index 04dd191..1c54771 100644
--- a/src/components/mobile-app-development-service/Pricing.tsx
+++ b/src/components/mobile-app-development-service/Pricing.tsx
@@ -91,7 +91,7 @@ const Pricing = () => {
                                         padding: '15px',
                                         borderRadius: '30px',
                                         fontWeight: 700,
-                                        background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)',
+                                        background: '#3779b9',
                                         backgroundSize: '200% auto',
                                         color: '#fff',
                                         transition: 'all 0.5s',
diff --git a/src/components/web-development-service/BannerBottom.tsx b/src/components/web-development-service/BannerBottom.tsx
index ee10a63..8eaf9ab 100644
--- a/src/components/web-development-service/BannerBottom.tsx
+++ b/src/components/web-development-service/BannerBottom.tsx
@@ -99,18 +99,18 @@ const BannerBottom = () => {
                                 onClick={() => setIsContactOpen(true)}
                                 style={{
                                     cursor: 'pointer',
-                                    background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
+                                    background: '#3779b9 !important',
                                     padding: '10px 25px',
                                     borderRadius: '10px',
                                     border: '1px solid rgba(55, 121, 185, 0.2)',
                                     transition: 'all 0.3s'
                                 }}
                                 onMouseEnter={(e) => {
-                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
+                                    e.currentTarget.style.background = '#3779b9 !important';
                                     e.currentTarget.style.transform = 'translateY(-2px)';
                                 }}
                                 onMouseLeave={(e) => {
-                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
+                                    e.currentTarget.style.background = '#3779b9 !important';
                                     e.currentTarget.style.transform = 'translateY(0)';
                                 }}
                             >
diff --git a/src/components/web-development-service/Pricing.tsx b/src/components/web-development-service/Pricing.tsx
index 4014a06..2c63ff8 100644
--- a/src/components/web-development-service/Pricing.tsx
+++ b/src/components/web-development-service/Pricing.tsx
@@ -91,7 +91,7 @@ const Pricing = () => {
                                         padding: '15px',
                                         borderRadius: '30px',
                                         fontWeight: 700,
-                                        background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)',
+                                        background: '#3779b9',
                                         backgroundSize: '200% auto',
                                         color: '#fff',
                                         transition: 'all 0.5s',