responsive

src/components/MobileComponent/MobileCommunityCard.jsx

@@ -118,9 +118,9 @@ const individuals = [
 ];
 
 const MobileCommunityCard = () => {
-  return (
+  return ( 
     <>
-      <Box backgroundColor={"#101015"}>
+      <Box backgroundColor={"#101015"}>   
         <Container
           maxW={"container.xl"}
           padding={"0 5rem"}
@@ -131,7 +131,7 @@ const MobileCommunityCard = () => {
             },
             "@media (max-width: 500px)": {
                 padding:'0 1rem',
-                paddingBottom:'5rem'
+                paddingBottom:'0rem'
             },
           }}
         >
@@ -141,7 +141,7 @@ const MobileCommunityCard = () => {
             paddingBottom={"3rem"}
             fontWeight={700}
             fontSize={"38px"}
-            textAlign={"left"}
+            textAlign={"center"}
             textTransform={"capitalize"}
             color={"#fff"}
             sx={{
@@ -164,8 +164,7 @@ const MobileCommunityCard = () => {
               autoplay={{ delay: 3000 }}
               onSlideChange={() => console.log("slide change")}
               onSwiper={(swiper) => console.log(swiper)}
-              style={{paddingBottom:'60px',position:'relative'}}
-              
+              style={{paddingBottom:'8rem',position:'relative'}}
             >
               {individuals.map((item) => (
                 <SwiperSlide