diff --git a/app/about/page.jsx b/app/about/page.jsx
index 44b3bc8..765c9d0 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -21,7 +21,8 @@ const About = () => {
             <Section6 />
             {/* <Section7 /> */}
             {/* <Footer /> */}
-            <Footer overlaySection={<Section7 />} />  
+          <Section7 />
+          <Footer />
             </>
   )
 }
diff --git a/app/component/about/Section5.jsx b/app/component/about/Section5.jsx
index f56ba7e..b29f704 100644
--- a/app/component/about/Section5.jsx
+++ b/app/component/about/Section5.jsx
@@ -1,8 +1,13 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import Image from "next/image";
 import { League_Spartan, Montserrat } from "next/font/google";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, EffectCoverflow, Pagination } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
 
 const leagueSpartan = League_Spartan({
   subsets: ["latin"],
@@ -22,21 +27,21 @@ const awards = [
     image: "/award/awardsecion1.jpeg",
     description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
   },
-  // {
-  //   year: "2024",
-  //   image: "/award/awardsection2.jpeg",
-  //   description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
-  // },
+  {
+    year: "2024",
+    image: "/award/awardnew.jpeg",
+    description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
+  },
   {
     year: "2024",
     image: "/award/awardsection3.jpeg",
     description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
   },
-  // {
-  //   year: "2024",
-  //   image: "/award/awardsecion4.jpeg",
-  //   description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
-  // },
+  {
+    year: "2024",
+    image: "/award/awardnew1.jpeg",
+    description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
+  },
   {
     year: "2025",
     image: "/award/awardsecion5.jpeg",
@@ -57,29 +62,28 @@ const awards = [
     image: "/award/awardsecion8.jpeg",
     description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
   },
+  {
+    year: "2025",
+    image: "/award/awardnew2.jpeg",
+    description: "Best Creative Agency (Real Estate) in Delhi/NCR By Big FM",
+  },
 ];
 
 const Section5 = () => {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const swiperRef = useRef(null);
 
   const handlePrev = () => {
-    setActiveIndex((prev) => (prev === 0 ? awards.length - 1 : prev - 1));
+    swiperRef.current?.slidePrev();
   };
 
   const handleNext = () => {
-    setActiveIndex((prev) => (prev === awards.length - 1 ? 0 : prev + 1));
+    swiperRef.current?.slideNext();
   };
 
-  const visibleAwards = [
-    awards[activeIndex],
-    awards[(activeIndex + 1) % awards.length],
-    awards[(activeIndex + 2) % awards.length],
-  ];
-
   const renderAwardCard = (award, index) => (
     <article
       key={`${award.year}-${award.image}-${index}`}
-      className="flex min-h-[420px] flex-col rounded-[20px] border border-[#1F275A] bg-[#11173D] px-6 pb-8 pt-6 md:min-h-auto md:px-8"
+      className="flex min-h-[420px] flex-col rounded-[20px] border border-[#1F275A] bg-[#11173D] px-6 pb-8 pt-6 transition-all duration-500 md:min-h-auto md:px-8"
     >
       <div className="flex items-center justify-between">
         <span
@@ -115,49 +119,118 @@ const Section5 = () => {
   );
 
   return (
-    <section className="bg-[#0D1334] px-8 py-[35px] md:px-12 md:py-[70px]">
-      <div className="mx-auto w-full max-w-[1400px]">
-        {/* <h2
-          className={`${leagueSpartan.className} m-0 text-center text-[48px] font-semibold uppercase leading-[100%] tracking-[0] text-white md:text-[86px]`}
-        >
-          Awards &amp; Company
-          <br />
-          Recognition
-        </h2> */}
-        <h2
-          className={`${leagueSpartan.className} m-0 text-center text-[30px] font-semibold uppercase leading-[100%] tracking-[0] text-white lg:text-[86px] md:text-[60px]`}
-        >
-         HONOURS  &amp; RECOGNITION
-          {/* <br />
-          Recognition */}
-        </h2>
-
-        <div className="mt-12 md:hidden">{renderAwardCard(awards[activeIndex], activeIndex)}</div>
-
-        <div className="mt-12 hidden grid-cols-1 gap-5 md:mt-16 md:grid md:grid-cols-3 md:gap-6">
-          {visibleAwards.map((award, index) => renderAwardCard(award, index))}
-        </div>
-
-        <div className="mt-10 flex items-center justify-center gap-4 md:mt-12">
-          <button
-            type="button"
-            onClick={handlePrev}
-            aria-label="Previous awards"
-            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#161C3D] text-white transition-opacity hover:opacity-80"
+    <>
+      <style>{`
+        .awards-coverflow-swiper {
+          width: 100%;
+          padding-top: 12px;
+          padding-bottom: 12px;
+          overflow: hidden;
+        }
+        .awards-coverflow-swiper .swiper-slide {
+          width: min(88vw, 320px);
+          transition: filter 0.6s ease, opacity 0.6s ease;
+          filter: brightness(0.75);
+          opacity: 0.85;
+        }
+        .awards-coverflow-swiper .swiper-slide-active {
+          filter: none;
+          opacity: 1;
+        }
+        @media (min-width: 768px) {
+          .awards-coverflow-swiper .swiper-slide {
+            width: auto;
+          }
+        }
+        .awards-coverflow-swiper .swiper-pagination {
+          position: static;
+          margin-top: 1.5rem;
+        }
+        .awards-coverflow-swiper .swiper-pagination-bullet {
+          width: 8px;
+          height: 8px;
+          background: rgba(255, 255, 255, 0.35);
+          opacity: 1;
+        }
+        .awards-coverflow-swiper .swiper-pagination-bullet-active {
+          background: #ffffff;
+        }
+      `}</style>
+      <section className="bg-[#0D1334] px-8 py-[35px] md:px-12 md:py-[70px]">
+        <div className="mx-auto w-full max-w-[1400px] overflow-hidden">
+          <h2
+            className={`${leagueSpartan.className} m-0 text-center text-[30px] font-semibold uppercase leading-[100%] tracking-[0] text-white lg:text-[86px] md:text-[60px]`}
           >
-            <i className="ri-arrow-left-line text-[20px]" aria-hidden />
-          </button>
-          <button
-            type="button"
-            onClick={handleNext}
-            aria-label="Next awards"
-            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#161C3D] text-white transition-opacity hover:opacity-80"
+            HONOURS &amp; RECOGNITION
+          </h2>
+
+          <Swiper
+            className="awards-coverflow-swiper mt-12 md:mt-16"
+            modules={[EffectCoverflow, Autoplay, Pagination]}
+            effect="coverflow"
+            grabCursor
+            centeredSlides
+            slidesPerView={1}
+            loop
+            speed={500}
+            spaceBetween={100}
+            autoplay={{
+              delay: 3000,
+              disableOnInteraction: false,
+            }}
+            coverflowEffect={{
+              rotate: 0,
+              stretch: 0,
+              depth: 80,
+              modifier: 1.8,
+              slideShadows: false,
+            }}
+            pagination={{ clickable: true }}
+            onSwiper={(swiper) => {
+              swiperRef.current = swiper;
+            }}
+            breakpoints={{
+              768: {
+                slidesPerView: 3,
+                spaceBetween: 100,
+                coverflowEffect: {
+                  rotate: 0,
+                  stretch: 0,
+                  depth: 120,
+                  modifier: 2.2,
+                  slideShadows: false,
+                },
+              },
+            }}
           >
-            <i className="ri-arrow-right-line text-[20px]" aria-hidden />
-          </button>
+            {awards.map((award, index) => (
+              <SwiperSlide key={`${award.image}-${index}`}>
+                {renderAwardCard(award, index)}
+              </SwiperSlide>
+            ))}
+          </Swiper>
+
+          <div className="mt-10 flex items-center justify-center gap-4 md:mt-12">
+            <button
+              type="button"
+              onClick={handlePrev}
+              aria-label="Previous awards"
+              className="flex h-12 w-12 items-center justify-center rounded-full bg-[#161C3D] text-white transition-opacity hover:opacity-80"
+            >
+              <i className="ri-arrow-left-line text-[20px]" aria-hidden />
+            </button>
+            <button
+              type="button"
+              onClick={handleNext}
+              aria-label="Next awards"
+              className="flex h-12 w-12 items-center justify-center rounded-full bg-[#161C3D] text-white transition-opacity hover:opacity-80"
+            >
+              <i className="ri-arrow-right-line text-[20px]" aria-hidden />
+            </button>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
   );
 };
 
diff --git a/app/component/about/section1.jsx b/app/component/about/section1.jsx
index b5b4191..a3cf749 100644
--- a/app/component/about/section1.jsx
+++ b/app/component/about/section1.jsx
@@ -46,11 +46,19 @@ const disruptionWordStyle = {
   color: "#333333",
 };
 
+const mobileDisruptionWordStyle = {
+  fontFamily: '"League Spartan", sans-serif',
+  fontWeight: 600,
+  fontSize: "72px",
+  lineHeight: "100%",
+  letterSpacing: "0",
+  textTransform: "uppercase",
+  color: "#333333",
+};
+
 const subHeadingStyle = {
   fontFamily: '"League Spartan", sans-serif',
   fontWeight: 500,
-  fontSize: "48px",
-  // lineHeight: "34px",
   letterSpacing: "0",
   textTransform: "uppercase",
   color: "#333333",
@@ -88,6 +96,9 @@ const Section1 = () => {
   const videoRevealStartedRef = useRef(false);
   const videoBoundsRef = useRef(null);
 
+  const isMobileViewport = () =>
+    typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches;
+
   const getStartSize = () => {
     const video = videoFloatRef.current?.querySelector("video");
     const width = Math.min(1044, window.innerWidth - 32);
@@ -165,6 +176,8 @@ const Section1 = () => {
   const computeVideoBounds = () => getVideoBounds();
 
   const applyLogoPosition = (entranceProgress, scrollProgress = 0) => {
+    if (isMobileViewport()) return;
+
     const logoFloat = logoFloatRef.current;
     const bounds = computeVideoBounds();
     if (!logoFloat || !bounds) return;
@@ -265,6 +278,8 @@ const Section1 = () => {
   };
 
   const applyHeroTextScroll = (scrollProgress) => {
+    if (isMobileViewport()) return;
+
     const heroText = heroTextRef.current;
     const heroSection = heroSectionRef.current;
     if (!heroText || !heroSection) return;
@@ -284,6 +299,8 @@ const Section1 = () => {
   };
 
   const applyVideoProgress = (progress, entranceProgress) => {
+    if (isMobileViewport()) return;
+
     const floater = videoFloatRef.current;
     const bounds = computeVideoBounds();
     if (!floater || !bounds) return;
@@ -347,7 +364,7 @@ const Section1 = () => {
     };
 
     const fitDisruption = () => {
-      if (!disruption) return;
+      if (!disruption || isMobileViewport()) return;
 
       const parent = disruption.parentElement;
       disruption.style.transform = "none";
@@ -395,17 +412,23 @@ const Section1 = () => {
 
       const playHeroEntrance = () => {
         const entrance = { value: 0 };
-        videoEntranceRef.current = 0;
-        videoRevealStartedRef.current = true;
-        applyVideoProgress(0, 0);
+        const mobile = isMobileViewport();
+
+        if (!mobile) {
+          videoEntranceRef.current = 0;
+          videoRevealStartedRef.current = true;
+          applyVideoProgress(0, 0);
+        }
 
         const tl = gsap.timeline({
           onComplete: () => {
-            videoEntranceRef.current = 1;
+            if (!mobile) {
+              videoEntranceRef.current = 1;
+              syncVideoBounds(true);
+              applyVideoProgress(0, 1);
+              applyLogoPosition(1);
+            }
             fitAll();
-            syncVideoBounds(true);
-            applyVideoProgress(0, 1);
-            applyLogoPosition(1);
           },
         });
 
@@ -425,24 +448,26 @@ const Section1 = () => {
           );
         });
 
-        if (logoEl) {
+        if (!mobile && logoEl) {
           tl.set(logoEl, { visibility: "visible" }, 0);
         }
 
-        tl.to(
-          entrance,
-          {
-            value: 1,
-            duration: 2,
-            ease: "power4.out",
-            onUpdate: () => {
-              videoEntranceRef.current = entrance.value;
-              applyVideoProgress(0, entrance.value);
-              applyLogoPosition(entrance.value);
+        if (!mobile) {
+          tl.to(
+            entrance,
+            {
+              value: 1,
+              duration: 2,
+              ease: "power4.out",
+              onUpdate: () => {
+                videoEntranceRef.current = entrance.value;
+                applyVideoProgress(0, entrance.value);
+                applyLogoPosition(entrance.value);
+              },
             },
-          },
-          0
-        );
+            0
+          );
+        }
       };
 
       onHeaderComplete = () => playHeroEntrance();
@@ -491,7 +516,7 @@ const Section1 = () => {
         ScrollTrigger.refresh();
       };
 
-      if (floater && slot && heroSection) {
+      if (floater && slot && heroSection && !isMobileViewport()) {
         gsap.set(floater, {
           position: "absolute",
           xPercent: -50,
@@ -601,21 +626,21 @@ const Section1 = () => {
       <div ref={heroRef} className="relative overflow-x-hidden">
       <section
         ref={heroSectionRef}
-        className="relative flex min-h-screen flex-col overflow-x-hidden bg-[#0D1334] px-8 pt-35px pb-[60px] md:px-12 md:pt-[70px] md:pb-[80px]"
+        className="relative flex min-h-[calc(100dvh-4.5rem)] flex-col overflow-x-hidden bg-[#0D1334] px-8 pt-35px pb-[60px] md:min-h-screen md:px-12 md:pt-[70px] md:pb-[80px]"
       >
         <div
           ref={heroTextRef}
           className="relative z-40 mx-auto flex w-full max-w-[1200px] flex-col items-center text-center"
         >
-          <div className="relative w-full md:w-full lg:w-screen">
+          <div className="relative w-full overflow-x-hidden md:w-full lg:w-screen">
             <h1
               ref={headlineRef}
               style={headingStyle}
-              className="m-0 mx-auto w-full text-center text-[94px] leading-[94px] md:text-[72px] md:leading-[72px] lg:text-[94px] lg:leading-[94px]"
+              className="m-0 mx-auto w-full max-w-full text-center text-[34px] leading-[36px] md:text-[72px] md:leading-[72px] lg:text-[94px] lg:leading-[94px]"
             >
-              <Reveal clipYOnly className="w-full py-[4px]">
+              <Reveal clipYOnly className="w-full py-[2px]">
                 <span className="flex w-full justify-center">
-                  <span data-headline-row className="inline-flex items-center justify-center gap-[140px] md:gap-[40px] lg:gap-[90px]">
+                  <span data-headline-row className="inline-flex max-w-full items-center justify-center gap-[8px] md:gap-[40px] lg:gap-[90px]">
                     <span>17</span>
                     <span>YEARS</span>
                     <span>
@@ -624,17 +649,17 @@ const Section1 = () => {
                   </span>
                 </span>
               </Reveal>
-              <Reveal clipYOnly className="mt-[10px] w-full py-[4px]">
+              <Reveal clipYOnly className="mt-[4px] w-full py-[2px]">
                 <span className="flex w-full justify-center">
-                  <span data-headline-row className="inline-flex items-center justify-center gap-[180px] md:gap-[20px] lg:gap-[90px]">
+                  <span data-headline-row className="inline-flex max-w-full items-center justify-center gap-[10px] md:gap-[20px] lg:gap-[90px]">
                     <span>MAKING</span>
                     <span>BRANDS</span>
                   </span>
                 </span>
               </Reveal>
-              <Reveal clipYOnly className="mt-[10px] w-full overflow-x-visible py-[4px]">
-                <span className="flex w-full justify-center overflow-x-visible">
-                  <span data-headline-row className="inline-flex items-center justify-center gap-[200px] md:gap-[6px] md:text-[58px] md:leading-[58px] lg:gap-[50px] lg:text-[94px] lg:leading-[94px] xl:gap-[120px]">
+              <Reveal clipYOnly className="mt-[4px] w-full py-[2px] md:overflow-x-visible">
+                <span className="flex w-full justify-center md:overflow-x-visible">
+                  <span data-headline-row className="inline-flex max-w-full items-center justify-center gap-[6px] text-[26px] leading-[28px] md:gap-[6px] md:text-[58px] md:leading-[58px] lg:gap-[50px] lg:text-[94px] lg:leading-[94px] xl:gap-[120px]">
                     <span>
                       <span style={{ color: goldColor }}>IM</span>POSSIBLE
                     </span>
@@ -648,22 +673,44 @@ const Section1 = () => {
 
           <div className={`${montserrat.className} relative z-40 mt-8 max-w-[1000px] md:mt-0 lg:mt-0 xl:mt-2`}>
             <Reveal group="sub">
-              <p className="m-0 text-[14px] font-[300] italic leading-[20px] text-white md:text-[18px] md:leading-[20px] lg:text-[22px] xl:text-[28px] lg:leading-[36px]">
+              <p className="m-0 text-[20px] font-[300] italic leading-[25px] text-white md:text-[18px] md:leading-[20px] lg:text-[22px] xl:text-[28px] lg:leading-[36px]">
               Built on hustle. Driven by heart. Powered by ideas that move the world
               </p>
             </Reveal>
             <Reveal group="sub" className="mt-1">
-              <p className="m-0 text-[14px] font-[300] italic leading-[20px] text-white md:text-[18px] md:leading-[20px] lg:text-[22px] xl:text-[28px] lg:leading-[36px]">
+              <p className="m-0 text-[20px] font-[300] italic leading-[25px] text-white md:text-[18px] md:leading-[20px] lg:text-[22px] xl:text-[28px] lg:leading-[36px]">
                 by the belief that great ideas change the world
               </p>
             </Reveal>
+
+            <div className="relative mt-14 w-full md:hidden">
+              <video
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="block h-auto w-full"
+                src="/about/video-about.mp4"
+              />
+              <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                <img
+                  src="/logo/r-rmw-transparent.png"
+                  alt=""
+                  className="block w-auto max-w-[40%] object-contain"
+                  style={{
+                    filter: "brightness(3.2) contrast(1.05)",
+                    opacity: 0.4,
+                  }}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
       <div
         ref={videoFloatRef}
-        className="pointer-events-none absolute z-30 max-w-[1044px] overflow-hidden rounded-[24px] bg-black shadow-[0_24px_60px_rgba(0,0,0,0.35)]"
+        className="pointer-events-none absolute z-30 hidden max-w-[1044px] overflow-hidden rounded-[24px] bg-black shadow-[0_24px_60px_rgba(0,0,0,0.35)] md:block"
         style={{ visibility: "hidden", width: "1044px" }}
       >
         <video
@@ -672,13 +719,13 @@ const Section1 = () => {
           muted
           playsInline
           className="block h-full w-full origin-center object-cover"
-          src="/about/aboutsectionvideo.mp4"
+          src="/about/video-about.mp4"
         />
       </div>
       <div
         ref={logoFloatRef}
         data-about-hero-logo
-        className="pointer-events-none absolute z-[35] overflow-hidden"
+        className="pointer-events-none absolute z-[35] hidden overflow-hidden md:block"
         style={{ visibility: "hidden" }}
       >
         <div data-logo-inner className="absolute inset-x-0 top-[6%] flex h-[58%] justify-center">
@@ -694,7 +741,7 @@ const Section1 = () => {
         </div>
       </div>
 
-      <section ref={filmRef} className="relative overflow-x-hidden bg-[#F1F1F1] px-8 pb-10 pt-24 md:px-12 md:pb-14 md:pt-32 lg:py-16 lg:pt-20">
+      <section ref={filmRef} className="relative overflow-x-hidden bg-[#F1F1F1] px-8 pb-0 pt-[35px] md:px-12 md:pb-0 md:pt-[70px] lg:py-16 lg:pt-20">
         <div className="relative mx-auto w-full max-w-[1400px]">
           {/* <Reveal className="absolute left-0 top-0 z-10">
             <img
@@ -718,8 +765,8 @@ const Section1 = () => {
               </Reveal>
             </div>
 
-            <Reveal group="disruption" className="mt-10 md:mt-12 lg:mt-14 xl:mt-5">
-              <p style={subHeadingStyle} className="m-0 text-[18px] md:text-[24px] xl:text-[48px]">
+            <Reveal group="disruption" className="mt-6 md:mt-12 lg:mt-14 xl:mt-5">
+              <p style={subHeadingStyle} className="m-0 max-md:leading-normal text-[25px] md:text-[48px] xl:text-[48px]">
               We Drive Growth Through
               </p>
             </Reveal>
@@ -727,7 +774,64 @@ const Section1 = () => {
         </div>
 
         <div className="mt-8 flex w-full justify-center md:mt-10 lg:mt-12 xl:mt-5">
-          <div ref={disruptionRef} className="flex flex-col items-center text-center">
+          <div ref={disruptionRef} className="flex w-full flex-col items-center text-center">
+            <div className="flex w-full flex-col items-center md:hidden">
+              <Reveal group="disruption-word" clipYOnly className="overflow-x-visible">
+                <span className="flex justify-center overflow-x-visible">
+                  <span
+                    data-headline-row
+                    style={mobileDisruptionWordStyle}
+                    className="inline-flex items-center justify-center gap-[14px]"
+                  >
+                    <Letter from="left">c</Letter>
+                    <Letter from="left">R</Letter>
+                    <Letter from="left">E</Letter>
+                  </span>
+                </span>
+              </Reveal>
+
+              <div className="relative my-4 w-full">
+                <video
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                  className="block h-auto w-full"
+                  src="/about/video-about.mp4"
+                />
+              </div>
+
+              <Reveal group="disruption-word" clipYOnly className="overflow-x-visible">
+                <span className="flex justify-center overflow-x-visible">
+                  <span
+                    data-headline-row
+                    style={mobileDisruptionWordStyle}
+                    className="inline-flex items-center justify-center gap-[14px]"
+                  >
+                    <Letter from="right">A</Letter>
+                    <Letter from="right">T</Letter>
+                    <Letter from="right">I</Letter>
+                  </span>
+                </span>
+              </Reveal>
+
+              <Reveal group="disruption-word" clipYOnly className="mt-1 overflow-x-visible">
+                <span className="flex justify-center overflow-x-visible">
+                  <span
+                    data-headline-row
+                    style={mobileDisruptionWordStyle}
+                    className="inline-flex items-center justify-center gap-[14px]"
+                  >
+                    <Letter from="left">V</Letter>
+                    <Letter from="left">I</Letter>
+                    <Letter from="right">T</Letter>
+                    <Letter from="right">Y</Letter>
+                  </span>
+                </span>
+              </Reveal>
+            </div>
+
+            <div className="hidden w-full flex-col items-center md:flex">
             <Reveal group="disruption-word" clipYOnly className="overflow-x-visible">
               <span className="flex justify-center overflow-x-visible">
                 <span
@@ -766,6 +870,7 @@ const Section1 = () => {
                 </span>
               </span>
             </Reveal>
+            </div>
           </div>
         </div>
       </section>
diff --git a/app/component/about/section2.jsx b/app/component/about/section2.jsx
index 45e0d44..a96f24d 100644
--- a/app/component/about/section2.jsx
+++ b/app/component/about/section2.jsx
@@ -273,7 +273,7 @@ const Section2 = () => {
       `}</style>
 
       <section className="bg-[#F1F1F1] pb-[35px] md:pb-[70px]">
-        <div className="mx-auto w-full max-w-8xl px-8 md:px-12">
+        <div className="mx-auto w-full max-w-8xl px-8 md:px-12 md:pt-0 py-[35px]">
           <h2 style={headingStyle} className="m-0 text-[30px] md:text-[48px]">
             What we Deliver
           </h2>
diff --git a/app/component/about/section4.jsx b/app/component/about/section4.jsx
index 8291a61..3ddfabf 100644
--- a/app/component/about/section4.jsx
+++ b/app/component/about/section4.jsx
@@ -14,7 +14,7 @@ const montserrat = Montserrat({
 const milestones = [
   {
     year: "2008",
-    image: "/create/r-logo.jpeg",
+    image: "/create/r-logo-1.png",
     title: "Foundation",
     description:
       "Ritz Media World launched with a mission to reimagine brand communication for India's growth markets.",
@@ -40,7 +40,7 @@ const Section4 = () => {
     <section className="bg-white px-8 py-[35px] md:px-12  md:py-[70px]">
       <div className="mx-auto w-full max-w-[1200px]">
         <h2 className="m-0 text-center font-league-spartan xl:text-[48px] lg:text-[40px] md:text-[32px] text-[20px] font-[500] uppercase md:leading-[100%] tracking-[0] text-[#333333] leading-[25px]">
-        17 Years. Countless Stories. One Legacy.
+          17 Years. Countless Stories. One Legacy.
         </h2>
 
         <p
@@ -66,14 +66,10 @@ const Section4 = () => {
             {milestones.map((item) => (
               <div key={item.year} className="flex flex-col items-center text-center">
                 <div className="relative z-10 flex h-[165px] w-[165px] items-center justify-center rounded-full border border-[#D9D9D9] opacity-100">
-                  <div className="relative h-[147px] w-[147px] overflow-hidden rounded-full">
-                    <Image
-                      src={item.image}
-                      alt=""
-                      fill
-                      className="object-cover"
-                      sizes="147px"
-                    />
+                  <div className="relative h-[147px] w-[147px] flex justify-center items-center overflow-hidden rounded-full">
+                    <img src={item.image} alt="" className={`
+                      ${item.year === "2008" ? "h-[80%]" : "h-[100%]"}
+                      `} />
                   </div>
                 </div>
 
diff --git a/public/about/video-about.mp4 b/public/about/video-about.mp4
new file mode 100644
index 0000000..d7b759f
Binary files /dev/null and b/public/about/video-about.mp4 differ
diff --git a/public/award/awardnew.jpeg b/public/award/awardnew.jpeg
new file mode 100644
index 0000000..57f2162
Binary files /dev/null and b/public/award/awardnew.jpeg differ
diff --git a/public/award/awardnew1.jpeg b/public/award/awardnew1.jpeg
new file mode 100644
index 0000000..7d5bd0d
Binary files /dev/null and b/public/award/awardnew1.jpeg differ
diff --git a/public/award/awardnew2.jpeg b/public/award/awardnew2.jpeg
new file mode 100644
index 0000000..ace5652
Binary files /dev/null and b/public/award/awardnew2.jpeg differ
diff --git a/public/create/r-logo-1.png b/public/create/r-logo-1.png
new file mode 100644
index 0000000..4e8d55e
Binary files /dev/null and b/public/create/r-logo-1.png differ