diff --git a/app/page.tsx b/app/page.tsx
index 2f4f388..7d29d27 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,121 +9,10 @@ import { ArrowRightIcon, Globe, Mail, Phone } from "lucide-react";
 import Image from "next/image";
 
 export default function Home() {
-  const serviceCarousel = [
-    {
-      id: 0,
-      content: (
-        <>
-          <section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
-            <div className="lg:w-1/2">
-              <Image
-                src={"/images/campaign-strategy.png"}
-                width={2464}
-                height={1672}
-                alt="campaign-strategy"
-              />
-            </div>
-            <div className="space-y-4 lg:w-1/3 lg:space-y-12">
-              <p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
-                01
-              </p>
-              <h2 className="text-4xl lg:text-7xl text-white font-lato">
-                Campaign Strategy
-              </h2>
-              <p className="text-lg lg:text-2xl font-lato text-white/60">
-                Comprehensive planning from research to execution, crafted to
-                win hearts and minds.
-              </p>
-              <div className="flex gap-4 w-full">
-                <div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
-                <div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
-                <div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
-                <div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
-                <div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
-              </div>
-            </div>
-          </section>
-        </>
-      ),
-    },
-    {
-      id: 1,
-      content: (
-        <>
-          <section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
-            <div className="lg:w-1/2">
-              <Image
-                src={"/images/media-production.png"}
-                width={2464}
-                height={1672}
-                alt="media-production"
-              />
-            </div>
-            <div className="space-y-4 lg:w-1/3 lg:space-y-12">
-              <p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
-                02
-              </p>
-              <h2 className="text-4xl lg:text-7xl text-white font-lato">
-                Media Production
-              </h2>
-              <p className="text-lg font-lato text-white/60">
-                Cinematic storytelling through video, photography, and
-                multimedia content that captivates.
-              </p>
-              <div className="flex gap-4 w-full">
-                <div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
-                <div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
-                <div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
-                <div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
-                <div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
-              </div>
-            </div>
-          </section>
-        </>
-      ),
-    },
-    {
-      id: 2,
-      content: (
-        <>
-          <section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
-            <div className="lg:w-1/2">
-              <Image
-                src={"/images/research.png"}
-                width={2464}
-                height={1672}
-                alt="research"
-              />
-            </div>
-            <div className="space-y-4 lg:w-1/3 lg:space-y-12">
-              <p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
-                03
-              </p>
-              <h2 className="text-4xl lg:text-7xl text-white font-lato">
-                Research & Analytics
-              </h2>
-              <p className="text-lg font-lato text-white/60">
-                Data-driven insights that inform every decision and optimize
-                every outcome
-              </p>
-              <div className="flex gap-4 w-full">
-                <div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
-                <div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
-                <div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
-                <div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
-                <div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
-              </div>
-            </div>
-          </section>
-        </>
-      ),
-    },
-  ];
-
   return (
     <main className="bg-radial-[at_50%_50%] from-[#31131b]  to-[#0D0F11] ">
       {/*Hero */}
-      <section className="relative min-h-screen space-y-12 lg:space-y-20 flex flex-col items-center lg:justify-center pt-14 lg:pt-0">
+      <section className="relative min-h-screen space-y-12 md:space-y-20 flex flex-col items-center lg:justify-center pt-14 lg:pt-0">
         <section className="flex flex-col space-y-4">
           <div className="flex gap-4 justify-center items-center">
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
@@ -138,7 +27,7 @@ export default function Home() {
               className="
     font-inter text-[80px] leading-20 font-black tracking-tight
     bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)]
-    bg-clip-text text-transparent lg:text-[128px] lg:leading-26
+    bg-clip-text text-transparent md:text-[128px] md:leading-26
   "
             >
               Da Next
@@ -147,7 +36,7 @@ export default function Home() {
               className="
     font-inter text-[80px] font-black tracking-tight
     bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)]
-    bg-clip-text text-transparent pb-2 leading-20 lg:text-[128px] lg:leading-34
+    bg-clip-text text-transparent pb-2 leading-20 md:text-[128px] md:leading-34
   "
             >
               Agency
@@ -155,14 +44,14 @@ export default function Home() {
           </div>
         </section>
         <section className="flex flex-col items-center h-fit space-y-6">
-          <div className="flex flex-col lg:md:flex-row lg:md:gap-2 ">
-            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
+          <div className="flex flex-col lg:flex-row lg:gap-2 ">
+            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] md:text-[32px]">
               Shaping Narratives.
             </h3>
-            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
+            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] md:text-[32px]">
               Building Leaders.
             </h3>
-            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
+            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] md:text-[32px]">
               Winning Campaigns.
             </h3>
           </div>
@@ -173,39 +62,39 @@ export default function Home() {
         </section>
         {/*left decoration*/}
         <>
-          <div className="lg:flex hidden absolute left-6 top-86 items-center gap-2 ">
+          <div className="md:flex hidden absolute left-6 top-86 items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-20" />
           </div>
-          <div className="absolute left-6 top-92 lg:flex hidden items-center gap-2 ">
+          <div className="absolute left-6 top-92 md:flex hidden items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-16" />
           </div>
-          <div className="absolute left-6 top-98 lg:flex hidden items-center gap-2 ">
+          <div className="absolute left-6 top-98 md:flex hidden items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-12" />
           </div>
-          <div className="absolute left-6 top-104 lg:flex hidden items-center gap-2 ">
+          <div className="absolute left-6 top-104 md:flex hidden items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-8" />
           </div>
-          <div className="absolute left-6 top-110 lg:flex hidden items-center gap-2 ">
+          <div className="absolute left-6 top-110 md:flex hidden items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-4" />
           </div>
         </>
         {/*right decoration*/}
         <>
-          <div className="lg:flex hidden absolute right-6 top-86 items-center gap-2 ">
+          <div className="md:flex hidden absolute right-6 top-86 items-center gap-2 ">
             <h5 className="font-lato text-[#7b2e45]">&lt;system&gt; </h5>
           </div>
-          <div className="absolute right-6 top-92 lg:flex hidden items-center gap-2 ">
+          <div className="absolute right-6 top-92 md:flex hidden items-center gap-2 ">
             <h5 className="font-lato text-[#7b2e45]/50">status:active</h5>
           </div>
-          <div className="absolute right-6 top-98 lg:flex hidden items-center gap-2 ">
+          <div className="absolute right-6 top-98 md:flex hidden items-center gap-2 ">
             <h5 className="font-lato text-[#7b2e45]/50">mode:strategic </h5>
           </div>
-          <div className="absolute right-6 top-104 lg:flex hidden items-center gap-2 ">
+          <div className="absolute right-6 top-104 md:flex hidden items-center gap-2 ">
             <h5 className="font-lato text-[#7b2e45]">&lt;/system&gt; </h5>
           </div>
         </>
@@ -213,16 +102,16 @@ export default function Home() {
           <div className="relative inline-block">
             <button
               className="
-      relative px-8 py-3 lg:px-20 lg:py-5 rounded-xl
+      relative px-8 py-3 md:px-20 md:py-5 rounded-xl
       bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
       hover:from-[#913651] hover:to-[#b34762]
     "
             >
               {/* diamonds */}
-              <span className="lg:block hidden absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
-              <span className="lg:block hidden absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
+              <span className="md:block hidden absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
+              <span className="md:block hidden absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
 
-              <span className="text-white font-medium font-lato text-xl">
+              <span className="text-white font-medium font-lato text-xl md:text-2xl">
                 Start Your Campaign —
               </span>
             </button>
@@ -234,8 +123,8 @@ export default function Home() {
             <span className="absolute -right-4 -bottom-4 w-6 h-6 border-b-2 border-r-2 border-[#7B2E45]" />
           </div>
         </section>
-        <section className="flex flex-col lg:md:flex-row gap-10">
-          <section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
+        <section className="flex flex-col md:flex-row gap-10">
+          <section className="flex items-center gap-4 lg:border-r border-[#7B2E4533] md:pr-10">
             <div className="flex gap-1 px-2">
               <div className="w-2 h-16 bg-[#7B2E45]"></div>
               <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
@@ -248,7 +137,7 @@ export default function Home() {
               </h5>
             </div>
           </section>
-          <section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
+          <section className="flex items-center gap-4 lg:border-r border-[#7B2E4533] md:pr-10">
             <div className="flex gap-1 px-2">
               <div className="w-2 h-16 bg-[#7B2E45]"></div>
               <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
@@ -277,7 +166,7 @@ export default function Home() {
         </section>
       </section>
       {/*About*/}
-      <section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
+      <section className="px-10 xl:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
         <div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
           <Image
             src={"/images/about.jpg"}
@@ -312,7 +201,7 @@ export default function Home() {
         </section>
       </section>
       {/*Our Mission*/}
-      <section className="min-h-screen px-5 lg:px-87 flex flex-col items-center justify-center space-y-6 lg:space-y-12">
+      <section className="min-h-screen px-5 lg:px-87 flex flex-col items-center justify-center space-y-6 md:space-y-12">
         <div className="aspect-square overflow-hidden w-.20 h-20">
           <Image
             src={"/icons/quotation.png"}
@@ -321,7 +210,7 @@ export default function Home() {
             alt="quotation-mark"
           />
         </div>
-        <p className="font-lato text-2xl lg:leading-15 lg:text-5xl text-white text-center">
+        <p className="font-lato text-2xl md:leading-15 md:text-5xl text-white text-center">
           <span>To nurture narratives and shape public perception, </span>
           <span className="text-[#7B2E45]">
             creating a lasting positive image
@@ -352,7 +241,7 @@ export default function Home() {
         </section>
       </section>
       {/*Approach*/}
-      <section className="min-h-screen px-10 space-y-4  lg:flex  lg:flex-col lg:items-center lg:justify-evenly">
+      <section className="min-h-screen px-10 md:pt-20 space-y-4  lg:flex  lg:flex-col lg:items-center lg:justify-evenly">
         <section className="lg:space-y-10">
           <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
             OUR APPROACH
@@ -404,7 +293,7 @@ export default function Home() {
         </section>
       </section>
       {/*Media Production*/}
-      <section className="max-h-fit px-10 py-40 lg:pb-40 lg:pt-0 flex flex-col items-center justify-center space-y-8 ">
+      <section className="max-h-fit px-10 py-40 md:pb-40  flex flex-col items-center justify-center space-y-8 ">
         <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.3em] text-center">
           MEDIA PRODUCTION
         </h2>
@@ -422,7 +311,7 @@ export default function Home() {
         <hr className="bg-[#7B2E45]/20 border-0 h-0.5 lg:w-1/8 w-1/2" />
       </section>
       {/*Insights */}
-      <section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
+      <section className="px-10 xl:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
         <div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
           <Image
             src={"/images/data-driven-insights.jpg"}
@@ -443,7 +332,7 @@ export default function Home() {
             We leverage advanced research methodologies and analytics to inform
             strategy, measure impact, and optimize campaigns in real-time.
           </p>
-          <div className="flex flex-col lg:flex-row lg:justify-between gap-6">
+          <div className="flex flex-col md:flex-row md:justify-between gap-6">
             <div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
               <h2 className="font-lato text-[#7B2E45] text-4xl">10K+</h2>
               <p className="font-lato text-white/70 text-lg">
@@ -529,7 +418,7 @@ export default function Home() {
               </div>
             </div>
           </div>
-          <div className="bg-black p-8 space-y-4">
+          <div className="bg-black p-8 space-y-4 rounded-2xl">
             <div className="space-y-2">
               <h2 className="font-lato text-2xl text-white">
                 Green Future Initiative
@@ -561,7 +450,7 @@ export default function Home() {
         </section>
       </section>
       {/*Impact Metrics*/}
-      <section className="min-h-screen px-10 pt-20 lg:pt-0  space-y-4  lg:flex  lg:flex-col lg:items-center lg:justify-evenly">
+      <section className="min-h-screen md:min-h-fit px-10 pt-20 lg:pt-0  space-y-8  lg:flex  lg:flex-col lg:items-center lg:justify-evenly">
         <section className="lg:space-y-10">
           <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
             IMPACT METRICS
@@ -573,7 +462,7 @@ export default function Home() {
             </span>
           </h2>
         </section>
-        <section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
+        <section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10 md:grid md:grid-cols-2 md:grid-rows-2">
           <div className="lg:py-10 px-10 py-14 lg:w-full bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl shadow-xl flex flex-col items-center space-y-5 ">
             <h2 className="font-lato text-7xl text-[#7B2E45]">85%</h2>
 
@@ -617,7 +506,7 @@ export default function Home() {
         </section>
       </section>
       {/*Socials*/}
-      <section className="min-h-screen px-10 pt-20 lg:pt-0  flex flex-col items-center justify-center space-y-10">
+      <section className="min-h-screen px-10 pt-20 md:pt-0  flex flex-col items-center justify-center space-y-10">
         <section className="lg:space-y-10">
           <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] text-center tracking-[0.3em]">
             THE CONNECTED WORLD
@@ -634,29 +523,29 @@ export default function Home() {
           across the entire social ecosystem.
         </p>
         <section className="grid grid-cols-2 lg:grid-cols-6 gap-4  text-center">
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Facebook
           </h5>
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Twitter
           </h5>
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Instagram
           </h5>
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             LinkedIn
           </h5>
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Youtube
           </h5>
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Tiktok
           </h5>
         </section>
         <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
       </section>
       {/*Contact*/}
-      <section className="min-h-screen px-10 pt-20 lg:pt-0  flex flex-col items-center justify-center space-y-8 lg:space-y-20">
+      <section className="min-h-screen px-10 pt-20 md:pt-0 flex flex-col items-center justify-center space-y-8 lg:space-y-20">
         <section className="lg:space-y-10">
           <h2 className="font-lato text-xl lg:text-md  text-[#7B2E45] tracking-[0.3em] text-center">
             LET'S CONNECT