diff --git a/public/assets/css/icomoon.css b/public/assets/css/icomoon.css
deleted file mode 100644
index 478542c..0000000
--- a/public/assets/css/icomoon.css
+++ /dev/null
@@ -1,164 +0,0 @@
-@font-face {
-  font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?9goitm');
-  src:  url('../fonts/icomoon.eot?9goitm#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?9goitm') format('truetype'),
-    url('../fonts/icomoon.woff?9goitm') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-roof-9:before {
-  content: "\e92d";
-}
-.icon-shape:before {
-  content: "\e92c";
-}
-.icon-arrow-left-angle:before {
-  content: "\e900";
-}
-.icon-arrow-right-angle:before {
-  content: "\e901";
-}
-.icon-arrow-right-double:before {
-  content: "\e902";
-}
-.icon-arrow-up:before {
-  content: "\e903";
-}
-.icon-calendar:before {
-  content: "\e904";
-}
-.icon-calendar-1:before {
-  content: "\e905";
-}
-.icon-call:before {
-  content: "\e906";
-}
-.icon-comma-double:before {
-  content: "\e907";
-}
-.icon-dollar-tag:before {
-  content: "\e908";
-}
-.icon-download:before {
-  content: "\e909";
-}
-.icon-email:before {
-  content: "\e90a";
-}
-.icon-engineer:before {
-  content: "\e90b";
-}
-.icon-hammer:before {
-  content: "\e90c";
-}
-.icon-help:before {
-  content: "\e90d";
-}
-.icon-home:before {
-  content: "\e90e";
-}
-.icon-home-1:before {
-  content: "\e90f";
-}
-.icon-mail:before {
-  content: "\e910";
-}
-.icon-map-pin:before {
-  content: "\e911";
-}
-.icon-phone:before {
-  content: "\e912";
-}
-.icon-play:before {
-  content: "\e913";
-}
-.icon-prize:before {
-  content: "\e914";
-}
-.icon-prize-1:before {
-  content: "\e915";
-}
-.icon-prize-box:before {
-  content: "\e916";
-}
-.icon-quote:before {
-  content: "\e917";
-}
-.icon-right-arrow:before {
-  content: "\e918";
-}
-.icon-roof:before {
-  content: "\e919";
-}
-.icon-roof-2:before {
-  content: "\e91a";
-}
-.icon-roof-3:before {
-  content: "\e91b";
-}
-.icon-roof-4:before {
-  content: "\e91c";
-}
-.icon-roof-5:before {
-  content: "\e91d";
-}
-.icon-roof-6:before {
-  content: "\e91e";
-}
-.icon-roof-7:before {
-  content: "\e91f";
-}
-.icon-roof-8:before {
-  content: "\e920";
-}
-.icon-round-check:before {
-  content: "\e921";
-}
-.icon-search:before {
-  content: "\e922";
-}
-.icon-search-1:before {
-  content: "\e923";
-}
-.icon-share:before {
-  content: "\e924";
-}
-.icon-shopping-cart:before {
-  content: "\e925";
-}
-.icon-tag:before {
-  content: "\e926";
-}
-.icon-target:before {
-  content: "\e927";
-}
-.icon-team:before {
-  content: "\e928";
-}
-.icon-team-1:before {
-  content: "\e929";
-}
-.icon-user-1:before {
-  content: "\e92a";
-}
-.icon-watch:before {
-  content: "\e92b";
-}
diff --git a/public/assets/images/services/choose/circle.webp b/public/assets/images/services/choose/circle.webp
new file mode 100644
index 0000000..f030606
Binary files /dev/null and b/public/assets/images/services/choose/circle.webp differ
diff --git a/public/assets/js/main.js b/public/assets/js/main.js
index da014b3..bf2004f 100644
--- a/public/assets/js/main.js
+++ b/public/assets/js/main.js
@@ -354,11 +354,11 @@ window.initMetatron = function () {
 		/*======================================
 		Testimonial slider Js Metatron Home One
 		========================================*/
-		if ($('.testimonial-active-1').length > 0) {
+		if ($('.testimonial-active-1').length > 0 && $('.testimonial-active-1 .swiper-slide').length > 0) {
 			new Swiper('.testimonial-active-1', {
 				slidesPerView: 1,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.testimonial-active-1 .swiper-slide').length >= 1,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -378,11 +378,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.testimonial-active-2').length > 0) {
+		if ($('.testimonial-active-2').length > 0 && $('.testimonial-active-2 .swiper-slide').length > 0) {
 			new Swiper('.testimonial-active-2', {
 				slidesPerView: 2,
 				spaceBetween: 20,
-				loop: true,
+				loop: $('.testimonial-active-2 .swiper-slide').length >= 2,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -406,11 +406,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.testimonial-active-3').length > 0) {
+		if ($('.testimonial-active-3').length > 0 && $('.testimonial-active-3 .swiper-slide').length > 0) {
 			new Swiper('.testimonial-active-3', {
 				slidesPerView: 4,
 				spaceBetween: 24,
-				loop: true,
+				loop: $('.testimonial-active-3 .swiper-slide').length >= 4,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -434,11 +434,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.team-active-3').length > 0) {
+		if ($('.team-active-3').length > 0 && $('.team-active-3 .swiper-slide').length > 0) {
 			new Swiper('.team-active-3', {
 				slidesPerView: 3,
 				spaceBetween: 24,
-				loop: true,
+				loop: $('.team-active-3 .swiper-slide').length >= 3,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -465,11 +465,11 @@ window.initMetatron = function () {
 		/*======================================
 		Review slider Js
 		========================================*/
-		if ($('.review-active').length > 0) {
+		if ($('.review-active').length > 0 && $('.review-active .swiper-slide').length > 0) {
 			new Swiper('.review-active', {
 				slidesPerView: 1,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.review-active .swiper-slide').length >= 1,
 				roundLengths: true,
 				observer: true,
 				observeParents: true,
@@ -509,11 +509,11 @@ window.initMetatron = function () {
 		/*======================================
 		product slider Js
 		========================================*/
-		if ($('.product-active').length > 0) {
+		if ($('.product-active').length > 0 && $('.product-active .swiper-slide').length > 0) {
 			new Swiper('.product-active', {
 				slidesPerView: 4,
 				spaceBetween: 15,
-				loop: true,
+				loop: $('.product-active .swiper-slide').length >= 4,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -532,11 +532,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.discount-active').length > 0) {
+		if ($('.discount-active').length > 0 && $('.discount-active .swiper-slide').length > 0) {
 			new Swiper('.discount-active', {
 				slidesPerView: 5,
 				spaceBetween: 15,
-				loop: true,
+				loop: $('.discount-active .swiper-slide').length >= 5,
 				roundLengths: true,
 				observer: true,
 				observeParents: true,
@@ -565,11 +565,11 @@ window.initMetatron = function () {
 		/*======================================
 		brand slider Js Metatron Home One
 		========================================*/
-		if ($('.brand-active').length > 0) {
+		if ($('.brand-active').length > 0 && $('.brand-active .swiper-slide').length > 0) {
 			new Swiper('.brand-active', {
 				slidesPerView: 5,
 				spaceBetween: 99,
-				loop: true,
+				loop: $('.brand-active .swiper-slide').length >= 5,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -590,11 +590,11 @@ window.initMetatron = function () {
 		/*======================================
 		service slider Js Metatron Home One
 		========================================*/
-		if ($('.service-active-2').length > 0) {
+		if ($('.service-active-2').length > 0 && $('.service-active-2 .swiper-slide').length > 0) {
 			new Swiper('.service-active-2', {
 				slidesPerView: 4,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.service-active-2 .swiper-slide').length >= 4,
 				autoplay: {
 					delay: 3000,
 				},
@@ -623,7 +623,7 @@ window.initMetatron = function () {
 			new Swiper('.project-active-1', {
 				slidesPerView: 4,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.project-active-1 .swiper-slide').length >= 4,
 				autoplay: {
 					delay: 3000,
 				},
@@ -643,11 +643,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.service-active-1').length > 0) {
+		if ($('.service-active-1').length > 0 && $('.service-active-1 .swiper-slide').length > 0) {
 			new Swiper('.service-active-1', {
 				slidesPerView: 3,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.service-active-1 .swiper-slide').length >= 3,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -668,11 +668,11 @@ window.initMetatron = function () {
 			});
 		}
 
-		if ($('.service-one-home__carousel').length > 0) {
+		if ($('.service-one-home__carousel').length > 0 && $('.service-one-home__carousel .swiper-slide').length > 0) {
 			new Swiper('.service-one-home__carousel', {
 				slidesPerView: 3,
 				spaceBetween: 30,
-				loop: true,
+				loop: $('.service-one-home__carousel .swiper-slide').length >= 3,
 				roundLengths: true,
 				autoplay: {
 					delay: 3000,
@@ -696,14 +696,14 @@ window.initMetatron = function () {
 		/*======================================
 		slider Js
 		========================================*/
-		if (jQuery(".slider-active").length > 0) {
+		if (jQuery(".slider-active").length > 0 && jQuery(".slider-active .swiper-slide").length > 0) {
 			let sliderActive1 = ".slider-active";
 			let sliderInit1 = new Swiper(sliderActive1, {
 				slidesPerView: 1,
 				slidesPerColumn: 1,
 				paginationClickable: true,
 				fadeEffect: { crossFade: true },
-				loop: true,
+				loop: jQuery(".slider-active .swiper-slide").length >= 1,
 				effect: 'fade',
 				autoplay: { delay: 5000 },
 				navigation: {
@@ -750,14 +750,14 @@ window.initMetatron = function () {
 			animated_swiper(sliderActive1, sliderInit1);
 		}
 
-		if (jQuery(".banner-active").length > 0) {
+		if (jQuery(".banner-active").length > 0 && jQuery(".banner-active .swiper-slide").length > 0) {
 			let sliderActive1 = ".banner-active";
 			let sliderInit1 = new Swiper(sliderActive1, {
 				slidesPerView: 1,
 				slidesPerColumn: 1,
 				paginationClickable: true,
 				fadeEffect: { crossFade: true },
-				loop: true,
+				loop: jQuery(".banner-active .swiper-slide").length >= 1,
 				effect: "fade",
 				autoplay: { delay: 5000 },
 				navigation: {
@@ -807,11 +807,11 @@ window.initMetatron = function () {
 		/*======================================
 		Postbox slider Js
 		========================================*/
-		if ($('.postbox__slider').length > 0) {
+		if ($('.postbox__slider').length > 0 && $('.postbox__slider .swiper-slide').length > 0) {
 			new Swiper('.postbox__slider', {
 				slidesPerView: 1,
 				spaceBetween: 0,
-				loop: true,
+				loop: $('.postbox__slider .swiper-slide').length >= 1,
 				autoplay: { delay: 3000 },
 				navigation: {
 					nextEl: ".postbox-slider-button-next",
@@ -830,11 +830,11 @@ window.initMetatron = function () {
 		/*======================================
 		whyChoose slider Js
 		========================================*/
-		if ($('.why-choose-active').length > 0) {
+		if ($('.why-choose-active').length > 0 && $('.why-choose-active .swiper-slide').length > 0) {
 			new Swiper('.why-choose-active', {
 				slidesPerView: 1,
 				spaceBetween: 0,
-				loop: true,
+				loop: $('.why-choose-active .swiper-slide').length >= 1,
 				autoplay: { delay: 3000 },
 				pagination: {
 					el: ".bd-swiper-dot",
diff --git a/public/assets/video/14.mp4 b/public/assets/video/14.mp4
new file mode 100644
index 0000000..e952108
Binary files /dev/null and b/public/assets/video/14.mp4 differ
diff --git a/public/assets/video/15.mp4 b/public/assets/video/15.mp4
new file mode 100644
index 0000000..a8d5212
Binary files /dev/null and b/public/assets/video/15.mp4 differ
diff --git a/public/assets/video/8.mp4 b/public/assets/video/8.mp4
new file mode 100644
index 0000000..6b2858c
Binary files /dev/null and b/public/assets/video/8.mp4 differ
diff --git a/public/assets/video/9.mp4 b/public/assets/video/9.mp4
new file mode 100644
index 0000000..9308dd2
Binary files /dev/null and b/public/assets/video/9.mp4 differ
diff --git a/src/app/globals.css b/src/app/globals.css
index a80220d..55e382c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8271,7 +8271,7 @@ body {
   border: none !important;
   position: relative;
   display: block;
-  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  /* background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; */
   color: white !important;
   transition: all 500ms ease;
   text-transform: capitalize;
@@ -8285,7 +8285,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: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; */
   color: var(--pelocis-white, #fff) !important;
   opacity: 0.85;
 }
@@ -12027,10 +12027,12 @@ body {
   .contact-area .contact-info-item .content h6 {
     font-size: 16px;
   }
-  .faq-one__card{
+
+  .faq-one__card {
     flex-direction: column !important;
   }
-  .choose-section .bg-image{
+
+  .choose-section .bg-image {
     display: none;
   }
 }
@@ -12117,7 +12119,7 @@ body {
   -webkit-backdrop-filter: blur(12px) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 16px !important;
-  /* padding: 10px 20px !important; */
+  padding: 12px 30px !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
   margin-top: 20px !important;
   transition: all 0.3s ease !important;
@@ -12667,7 +12669,7 @@ body {
 }
 
 /* ============================================================
-   GLOBAL BUTTON STANDARDIZATION
+   GLOBAL BUTTON & TAB STANDARDIZATION (2000% EXACT MATCH)
    ============================================================ */
 .primary-btn-1,
 .vl-btn1,
@@ -12675,20 +12677,50 @@ body {
 .theme-btn,
 .about-more-btn,
 .banner-btn-area a,
-.secondary-btn {
+.secondary-btn,
+.btn-one,
+.submit-btn-custom-global,
+.pf-tab-btn,
+.project-btn,
+.service-tabs .nav-tabs .nav-link.active,
+.service-tabs .nav-tabs .nav-link:hover,
+.tp-btn,
+.list-unstyled-item,
+.hamburger-btn,
+.df-search-close-btn,
+.primary-btn-1,
+.vl-btn1,
+.vl-btn2,
+.theme-btn,
+.about-more-btn,
+.banner-btn-area a,
+.secondary-btn,
+.btn-one,
+.submit-btn-custom-global,
+.postbox__slider-button-next,
+.postbox__slider-button-prev,
+.tolak-btn,
+.submit-btn,
+.contact-one__form .tolak-btn,
+.contact-one__form button,
+.about-2-btn-area a,
+.pf-tabs button,
+.pf-tab-btn.active,
+.pf-tab-btn {
   background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
   background-size: 200% auto !important;
   border-radius: 10px !important;
   color: #fff !important;
-  padding: 15px 20px !important;
+  padding: 15px 30px !important;
   border: none !important;
-  transition: all 0.5s ease !important;
+  transition: all 0.5s ease-6ms !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 8px !important;
   text-decoration: none !important;
-  background-position: left center;
+  background-position: left center !important;
+  font-weight: 700 !important;
 }
 
 .primary-btn-1:hover,
@@ -12697,9 +12729,28 @@ body {
 .theme-btn:hover,
 .about-more-btn:hover,
 .banner-btn-area a:hover,
-.secondary-btn:hover {
+.secondary-btn:hover,
+.btn-one:hover,
+.submit-btn-custom-global:hover,
+.pf-tab-btn:hover,
+.pf-tab-btn.active,
+.pf-tabs button:hover,
+.project-btn:hover,
+.tp-btn:hover,
+.list-unstyled-item:hover,
+.list-unstyled-item.active,
+.hamburger-btn:hover,
+.df-search-close-btn:hover,
+.postbox__slider-button-next:hover,
+.postbox__slider-button-prev:hover,
+.tolak-btn:hover,
+.submit-btn:hover,
+.contact-one__form .tolak-btn:hover,
+.contact-one__form button:hover,
+.about-2-btn-area a:hover {
   background-position: right center !important;
   color: #fff !important;
+  opacity: 1 !important;
 }
 
 /* ============================================================
@@ -12821,7 +12872,7 @@ body {
 .service-one-home {
   padding: 80px 0;
   padding-top: 80px;
-  background-color: var(--pelocis-gray, #F5F2EF);
+  /* background-color: var(--pelocis-gray, #F5F2EF); */
   position: relative;
   overflow: hidden;
   counter-reset: count;
@@ -13134,7 +13185,7 @@ body {
   }
 
   .main-menu-metatron ul li a {
-    padding: 0px 3px;
+    padding: 5px 10px;
     font-size: 13px;
   }
 
@@ -13142,4 +13193,74 @@ body {
     font-size: 13px;
   }
 
+}
+
+/* ============================================================
+   CUSTOM HEADER BREAKPOINT (1024px)
+   ============================================================ */
+/* .headerfix {
+  padding-top: 25px !important;
+  padding-bottom: 25px !important;
+} */
+
+/* Specific padding for web development service header and banner */
+.header-metatron-web-dev .headerfix {
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+}
+
+@media (max-width: 1024px) {
+
+  /* Hide all nav links and buttons at 1024px site-wide */
+  header .d-lg-block,
+  header .d-none.d-lg-block,
+  .header-nav-col-metatron,
+  .header-desktop-metatron,
+  .vl-main-menu,
+  .vl-hero-btn {
+    display: none !important;
+  }
+
+  /* Show hamburger button at 1024px */
+  header .d-lg-none,
+  header .d-block.d-lg-none,
+  .header-mobile-metatron,
+  .vl-header-action-item,
+  .header-hamburger-metatron {
+    display: block !important;
+  }
+
+  /* Hamburger alignment */
+  .vl-header-action-item,
+  .header-hamburger-metatron {
+    display: flex !important;
+    justify-content: flex-end !important;
+  }
+
+  /* Force 1024px columns for logo and action */
+  .vl-header-area .col-lg-3.col-md-6.col-6,
+  .vl-header-area .col-lg-3.col-md-6.col-9 {
+    width: 70% !important;
+    flex: 0 0 70% !important;
+  }
+
+  .vl-header-area .col-lg-3.col-md-6.col-6,
+  .vl-header-area .col-lg-2.col-md-6.col-3 {
+    width: 30% !important;
+    flex: 0 0 30% !important;
+  }
+
+  /* Ensure padding on mobile too */
+  /* .headerfix {
+    padding-top: 15px !important;
+    padding-bottom: 15px !important;
+  } */
+}
+
+@media (min-width: 1025px) {
+
+  .header-mobile-metatron,
+  header .d-lg-none {
+    display: none !important;
+  }
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8265bd7..02b2ba0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -35,7 +35,6 @@ export default function RootLayout({
         <link rel="stylesheet" href="/assets/css/slick.css" />
         <link rel="stylesheet" href="/assets/css/magnific-popup.css" />
         <link rel="stylesheet" href="/assets/css/fontawesome-pro.css" />
-        <link rel="stylesheet" href="/assets/css/icomoon.css" />
         <link rel="stylesheet" href="/assets/css/spacing.css" />
         <link rel="stylesheet" href="/assets/css/main.css" />
 
@@ -168,19 +167,23 @@ export default function RootLayout({
         <script
           dangerouslySetInnerHTML={{
             __html: `
-              (function(){
-                var s = document.createElement('script');
-                var h = document.querySelector('head') || document.body;
-                s.src = 'https://acsbapp.com/apps/app/dist/js/app.js';
-                s.async = true;
-                s.onload = function(){
-                  if (typeof acsbJS !== 'undefined') {
-                    acsbJS.init();
-                  }
-                };
-                h.appendChild(s);
-              })();
-            `,
+               (function(){
+                 if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+                   console.log('Skipping accessiBe on localhost to avoid CDN 404');
+                   return;
+                 }
+                 var s = document.createElement('script');
+                 var h = document.querySelector('head') || document.body;
+                 s.src = 'https://acsbapp.com/apps/app/dist/js/app.js';
+                 s.async = true;
+                 s.onload = function(){
+                   if (typeof acsbJS !== 'undefined') {
+                     acsbJS.init();
+                   }
+                 };
+                 h.appendChild(s);
+               })();
+             `,
           }}
         />
 
diff --git a/src/components/careers/ContactSection.tsx b/src/components/careers/ContactSection.tsx
index c2c3fd6..c1d2827 100644
--- a/src/components/careers/ContactSection.tsx
+++ b/src/components/careers/ContactSection.tsx
@@ -192,6 +192,7 @@ const ContactSection = () => {
                                                 value={formData.name}
                                                 onChange={handleChange}
                                                 className="form-input"
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
@@ -204,6 +205,7 @@ const ContactSection = () => {
                                                 value={formData.email}
                                                 onChange={handleChange}
                                                 className="form-input"
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
@@ -216,6 +218,7 @@ const ContactSection = () => {
                                                 value={formData.phone}
                                                 onChange={handleChange}
                                                 className="form-input"
+                                                suppressHydrationWarning={true}
                                             />
                                             {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
@@ -226,6 +229,7 @@ const ContactSection = () => {
                                                 value={formData.service}
                                                 onChange={handleChange}
                                                 className="form-select-custom"
+                                                suppressHydrationWarning={true}
                                             >
                                                 <option value="">Select Service</option>
                                                 <option value="Website Development">Website Development</option>
@@ -246,6 +250,7 @@ const ContactSection = () => {
                                                 value={formData.message}
                                                 onChange={handleChange}
                                                 className="form-textarea"
+                                                suppressHydrationWarning={true}
                                             ></textarea>
                                             {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                         </div>
diff --git a/src/components/careers/ServiceSection.tsx b/src/components/careers/ServiceSection.tsx
index 21e562b..75f0367 100644
--- a/src/components/careers/ServiceSection.tsx
+++ b/src/components/careers/ServiceSection.tsx
@@ -47,15 +47,12 @@ const ServiceSection2 = () => {
     const services = ourServices;
 
     return (
-        <section ref={sectionRef} className="service-three">
-            {/* <div
-                className="service-three__bg"
-                style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/service-bg-3.jpg)" }}
-            ></div> */}
+        <section ref={sectionRef} className="service-one-home service-three section-space">
             <div
                 className="service-three__shape"
                 style={{ backgroundImage: "url(/assets/images/services/service/bottom-left.webp)" }}
             ></div>
+
             <div className="container">
                 <div className="sec-title-wrapper text-center wow fadeInUp" data-wow-delay=".3s">
                     <div className="sec-title">
@@ -66,29 +63,36 @@ const ServiceSection2 = () => {
                     <img src="/assets/images/services/service/element-small.webp" alt="" className="sec-title__text-shape" />
                 </div>
 
-                <div className="row">
+                <div className="row mt-50">
                     {services.slice(0, 6).map((service, index) => (
                         <div
                             key={index}
-                            className="col-lg-4 col-md-6 wow fadeInUp"
+                            className="col-lg-4 col-md-6 mb-30 wow fadeInUp"
                             data-wow-delay={`${index * 100}ms`}
                             style={{ visibility: "hidden" }}
                         >
-                            <div className="service-three__item text-center">
-                                <div className="service-three__item__content">
-                                    <div className="service-three__item__icon">
-                                        <img src={service.icon} alt="icon" width="55" height="40" />
+                            <div className="home-services__card">
+                                <div className="home-services__card__shape--one"></div>
+                                <div className="home-services__card__shape--two"></div>
+                                <div className="home-services__card__content">
+                                    <div className="home-services__card__icon">
+                                        <img src={service.icon} alt="icon" width="42" height="42" />
                                     </div>
-                                    <h3 className="service-three__item__title">
+                                    <h4 className="home-services__card__count">--</h4>
+                                    <h2 className="home-services__card__title">
                                         <Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
-                                    </h3>
-                                    <p className="service-three__item__text">{service.description}</p>
+                                    </h2>
+                                    <p className="home-services__card__text">
+                                        {service.description.substring(0, 100)}...
+                                    </p>
                                 </div>
-                                <div className="service-three__item__image">
+                                <div className="home-services__card__image">
                                     <img src={service.image} alt={service.title} />
-                                    {/* <Link className="service-three__item__rm" href={service.link}>
-                                        <span className="fa-solid fa-arrow-right-long"></span>
-                                    </Link> */}
+                                    <div className="home-services__card__hover">
+                                        <Link href={`/services-digital-solutions/${service.slug}`} className="home-services__card__hover-link">
+                                            <i className="fa-solid fa-arrow-right"></i>
+                                        </Link>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/components/common/SearchOverlay.tsx b/src/components/common/SearchOverlay.tsx
index 5c635d8..b83f4e8 100644
--- a/src/components/common/SearchOverlay.tsx
+++ b/src/components/common/SearchOverlay.tsx
@@ -24,8 +24,14 @@ const SearchOverlay = () => {
                                 </div>
                                 <form action="#">
                                     <div className="df-search-input mb-10">
-                                        <input type="text" placeholder="Search here..." />
-                                        <button type="submit"><i className="icon-search"></i></button>
+                                        <input
+                                            type="text"
+                                            placeholder="Search here..."
+                                            suppressHydrationWarning={true}
+                                        />
+                                        <button type="submit" suppressHydrationWarning={true}>
+                                            <i className="fa-solid fa-magnifying-glass"></i>
+                                        </button>
                                     </div>
                                     <div className="df-search-category">
                                         <span>Search by : </span>
diff --git a/src/components/home/AboutTwo.tsx b/src/components/home/AboutTwo.tsx
index 0eacf19..d69b113 100644
--- a/src/components/home/AboutTwo.tsx
+++ b/src/components/home/AboutTwo.tsx
@@ -22,7 +22,7 @@ const AboutTwo = () => {
                     <div className="col-xl-6">
                         <div className="about-two__img">
                             <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/about-2-1.jpg"
+                                src="/assets/images/services/choose/circle.webp"
                                 alt="about"
                             />
                         </div>
diff --git a/src/components/home/HomeContactOne.tsx b/src/components/home/HomeContactOne.tsx
index 955b165..1322338 100644
--- a/src/components/home/HomeContactOne.tsx
+++ b/src/components/home/HomeContactOne.tsx
@@ -182,6 +182,7 @@ const HomeContactOne = () => {
                                             value={formData.name}
                                             onChange={handleChange}
                                             className="form-input-custom-global"
+                                            suppressHydrationWarning={true}
                                         />
                                         {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                     </div>
@@ -195,6 +196,7 @@ const HomeContactOne = () => {
                                             value={formData.email}
                                             onChange={handleChange}
                                             className="form-input-custom-global"
+                                            suppressHydrationWarning={true}
                                         />
                                         {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                     </div>
@@ -208,6 +210,7 @@ const HomeContactOne = () => {
                                             value={formData.phone}
                                             onChange={handleChange}
                                             className="form-input-custom-global"
+                                            suppressHydrationWarning={true}
                                         />
                                         {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                     </div>
@@ -219,6 +222,7 @@ const HomeContactOne = () => {
                                             value={formData.service}
                                             onChange={handleChange}
                                             className="form-select-custom-styled-global"
+                                            suppressHydrationWarning={true}
                                         >
                                             <option value="">Select Service</option>
                                             <option value="Website Development">Website Development</option>
@@ -240,6 +244,7 @@ const HomeContactOne = () => {
                                             onChange={handleChange}
                                             rows={4}
                                             className="form-textarea-custom-global"
+                                            suppressHydrationWarning={true}
                                         ></textarea>
                                         {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                     </div>
@@ -253,7 +258,7 @@ const HomeContactOne = () => {
                                     </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/home-1/AboutSection.tsx b/src/components/home/home-1/AboutSection.tsx
index d59315e..71a27b2 100644
--- a/src/components/home/home-1/AboutSection.tsx
+++ b/src/components/home/home-1/AboutSection.tsx
@@ -76,7 +76,7 @@ const AboutSection = () => {
                                 </div>
                             </div>
                             <div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">
-                                <a className="primary-btn-1 btn-hover" href="/about">
+                                <a className="primary-btn-1 btn-hover" href="/about-us">
                                     about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                     <span className="btn-hover-span"></span>
                                 </a>
diff --git a/src/components/home/home-1/BannerSection.tsx b/src/components/home/home-1/BannerSection.tsx
index 9646d8e..109a685 100644
--- a/src/components/home/home-1/BannerSection.tsx
+++ b/src/components/home/home-1/BannerSection.tsx
@@ -47,7 +47,12 @@ const BannerSection = () => {
                                         <h1 className="banner-title">{banner.title}</h1>
                                         <p className="banner-text">{banner.text}</p>
                                         <div className="banner-btn-area">
-                                            <a className="primary-btn-1 btn-hover" href={banner.btnHref}>
+                                            <a
+                                                className="primary-btn-1 btn-hover"
+                                                href={banner.btnHref}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
                                                 {banner.btnLabel} &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                                 <span className="btn-hover-span"></span>
                                             </a>
diff --git a/src/components/home/home-1/BrandSection.tsx b/src/components/home/home-1/BrandSection.tsx
index 2af8968..f8cf359 100644
--- a/src/components/home/home-1/BrandSection.tsx
+++ b/src/components/home/home-1/BrandSection.tsx
@@ -45,7 +45,7 @@ const BrandSection = () => {
     };
 
     return (
-        <section className="brand-section section-space-bottom p-relative">
+        <section className="brand-section section-space p-relative">
             {/* <div className="brand-section__shape-one">
                 <img src="/assets/images/about/5/element.webp" alt="shape" />
             </div> */}
diff --git a/src/components/layout/Footer1.tsx b/src/components/layout/Footer1.tsx
index 3978432..9789905 100644
--- a/src/components/layout/Footer1.tsx
+++ b/src/components/layout/Footer1.tsx
@@ -79,8 +79,8 @@ const Footer1 = () => (
                                 <p>Subscribe our newsletter to get our latest update & news</p>
                                 <div className="footer-subscribe">
                                     <form action="#">
-                                        <input type="email" name="email" placeholder="Your email address" required />
-                                        <button type="submit" className="primary-btn-1 btn-hover">
+                                        <input type="email" name="email" placeholder="Your email address" required suppressHydrationWarning={true} />
+                                        <button type="submit" className="primary-btn-1 btn-hover" suppressHydrationWarning={true}>
                                             SUBSCRIBE NOW
                                             <span className="btn-hover-span"></span>
                                         </button>
diff --git a/src/components/services-digital-solutions/ServiceDetails.tsx b/src/components/services-digital-solutions/ServiceDetails.tsx
index ca76274..116cb80 100644
--- a/src/components/services-digital-solutions/ServiceDetails.tsx
+++ b/src/components/services-digital-solutions/ServiceDetails.tsx
@@ -50,7 +50,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
 
                             <div className="service-sidebar__single">
                                 <div className="service-sidebar__contact">
-                                    <div className="service-sidebar__contact-bg" style={{ backgroundImage: "url(/assets/imgs/resources/service-sidebar-contact-bg.jpg)" }}></div>
+                                    <div className="service-sidebar__contact-bg"></div>
                                     <div className="service-sidebar__contact-icon">
                                         <i className="fa-solid fa-phone-volume"></i>
                                     </div>