updated waste management image

src/components/header.tsx

@@ -19,6 +19,8 @@ const Header: React.FC = () => {
       sx={{ 
         backgroundColor: "#7c77770d", 
         margin: "20px 20px 10px 20px",
+       
+        boxShadow: "none",
         width: {
           xs: "91.6vw",
           sm: "95.5vw",
@@ -36,7 +38,7 @@ const Header: React.FC = () => {
           <img 
             src={headerlogo}
             alt="Logo" 
-            style={{ height: "50px", cursor: "pointer", width:'159px' }} 
+            style={{ height: "50px", cursor: "pointer", width:'176px' }} 
           />
         </Box>
 

src/components/homepage.tsx

@@ -67,15 +67,15 @@ const HomePage: React.FC = () => {
 
             },
         },
-        typography: {
-            fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
-            h4: {
-                color: "#333333", 
-              },
-            body2:{
-                color:"#77808B"
-            }
-          },
+        // typography: {
+        //     fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
+        //     h4: {
+        //         color: "#333333", 
+        //       },
+        //     body2:{
+        //         color:"#77808B"
+        //     }
+        //   },
         
     });
 

src/components/wastemanagement.tsx

@@ -1,6 +1,7 @@
-import { createTheme, ThemeProvider, useMediaQuery, useTheme, Box, Grid } from "@mui/material";
-import wasteimage from "../components/imageandgif/loopwastemanage.png"; 
-import mobileWasteImage from "../components/imageandgif/Soil & Water Contamination mob.png"; 
+import { createTheme, ThemeProvider, useMediaQuery, useTheme, Grid } from "@mui/material";
+import wasteimage from "../components/imageandgif/Loop Transforming waste.svg"; 
+import { ReactComponent as MobileWasteImage } from "../components/imageandgif/Soil & Water Contamination.svg"; 
+
 const customTheme = createTheme({
     breakpoints: {
         values: {
@@ -14,31 +15,34 @@ const customTheme = createTheme({
 });
 
 const WasteImageSection = () => {
-    const theme = useTheme(); // Use the theme inside the component
+    const theme = useTheme(); 
     const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
-    // Function to scroll to the ref
-    const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-        if (ref.current) {
-            ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-    };
-
     return (
         <Grid
             container
             xs={12}
             sx={{
-                height: {lg:"820px", xs:'900px' , md:"900px"},
+                height: { lg: "820px", xs: "900px", md: "900px" },
                 marginTop: { lg: 20, xs: 0 },
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                overflow: "hidden"
+                overflow: "hidden",
+                background:'#fafafa'
             }}
         >
+            {isMobile ? (
+                <MobileWasteImage
+                    style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "contain"
+                    }}
+                />
+            ) : (
                 <img
-                src={isMobile ? mobileWasteImage : wasteimage} // Different images for mobile & desktop
+                    src={wasteimage}
                     alt="Waste Image"
                     style={{
                         width: "100%",
@@ -46,6 +50,7 @@ const WasteImageSection = () => {
                         objectFit: "contain"
                     }}
                 />
+            )}
         </Grid>
     );
 };

src/components/whyus.tsx

@@ -3,8 +3,8 @@ import { Box, Grid, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 
 const Circle = styled(Box)(({ theme }) => ({
-  width: 150, // Increased size
-  height: 150,
+  width: 170, // Increased size
+  height: 170,
   borderRadius: "50%",
   display: "flex",
   alignItems: "center",
@@ -27,7 +27,7 @@ const items = [
 const WhyChooseUs: React.FC = () => {
   return (
     <Box sx={{ textAlign: "center", mt: 5 }}>
-      <Typography variant="h5" fontWeight="bold" mb={3}>
+     <Typography variant="h4" sx={{ fontWeight: "bold"  , color:'#333333' ,mb:4}}>
         Why Choose Us?
       </Typography>
       <Grid