updated mobile

container/Home/Catalogues.js

@@ -52,7 +52,7 @@ const Catalogues = ({cataloguesData}) => {
                   // pagination={{ clickable: true }}
                   loop={true}
                   modules={[Navigation]}
-                  className="collectionSwiper pb-5"
+                  className="cataloguesSwiper pb-3 pb-md-5"
                   breakpoints={{
                     320: { slidesPerView: 1, spaceBetween: 15 },
                     640: { slidesPerView: 2, spaceBetween: 20 },

container/Home/Collection.js

@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
               </div>
             </FadeInStagger>
           </Col>
-          <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0">
+          <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 d-none d-md-block">
             <div className="d-flex gap-2">
               <button className="cust-swiper-button-prev">
                 <svg

container/Home/HomeBanner.js

@@ -53,8 +53,8 @@ const HomeBanner = ({banner}) => {
         prevEl: ".cust-swiper-button-prev",
       }}
       pagination={{ clickable: true }}
-      // autoplay={false}
-      autoplay={{ delay: 5000, disableOnInteraction: false, }}
+      autoplay={false}
+      // autoplay={{ delay: 5000, disableOnInteraction: false, }}
       loop
       modules={[Navigation, Pagination, Autoplay]}
       className="homeBannerSwiper"

container/Home/Overview.js

@@ -12,7 +12,7 @@ const Overview = ({aboutData}) => {
       <Container className="custom_container">
         {/* Make row full height and align items center */}
         <Row className="align-items-center">
-          <Col md={7} className="d-flex flex-column justify-content-center pe-0 pe-md-5">
+          <Col md={7} className="d-flex flex-column justify-content-center pe-md-5">
             <Heading el="h2" heading={aboutData?.title} />
             <FadeInStagger direction="left">
               {/* <h2 className="heading mb-2">About</h2> */}

styles/globals.css

@@ -330,7 +330,7 @@ button.cust-swiper-button-next {
   object-fit: cover;
 }
 .overview_sec {
-  background: #efefef url(../public/image/sketch-bg\ 1.svg) no-repeat center;
+  background: #efefef url(../public/image/sketch-bg\ 1.svg) no-repeat center top;
 }
 
 /* ====Contact===== */
@@ -1037,7 +1037,31 @@ footer a:hover {
   width: 100%;
   height: 100%;
 }
+ .homeBannerSwiper .slide-container img{
+    width: 100%;
+    height: auto;
+  }
+  .cataloguesSwiper .collection-card img{
+    width: 100%;
+    height: 100%;
+  }
 @media only screen and (max-width: 1023px) {
+   body {
+    font-size: 16px;
+  }
+  .blog-date {
+    font-size: 12px;
+}
+.btn1,.btn2,.btn3,.btn4 {
+    font-size: 12px;
+}
+.blog-content h5, .blog-large h5 {
+    font-size: 16px;
+}
+.collectionSwiper .collection-card p {
+    font-size: 16px;
+    line-height: 20px;
+}
 }
 /* ===== Mobile ===== */
 @media screen and (max-width: 991px) {
@@ -1127,6 +1151,20 @@ footer a:hover {
 }
 /* ===Media query==== */
 @media (max-width: 767px) {
+  .catalogues-sec .swiperbtn1 {
+    top: 50%;
+    left: 0%;
+}
+  .custom_container {
+    max-width: 100% !important;
+}
+  .collection-section .collectionSwiper {
+    padding-bottom: 1rem !important;
+    margin-bottom: 2rem;
+}
+  .custom_container_leftAuto {
+    max-width: 100%;
+}
   .custom_container {
     max-width: 95%;
 }
@@ -1149,7 +1187,7 @@ footer a:hover {
   width: 100%;
 }
   body {
-    font-size: 12px;
+    font-size: 16px;
   }
   footer a,
   footer li {
@@ -1227,6 +1265,7 @@ footer a:hover {
     margin-top: 66px;
     height: calc(100vh - 125px);
   }
+ 
   .form-check-label {
     font-size: 12px;
   }
@@ -1329,8 +1368,11 @@ footer a:hover {
 
   .collection-section .custom_container {
     margin-right: auto !important;
+    max-width: 100%;
   }
-
+.slide-overlay {
+    padding: 50px 3%;
+}
   .heading {
     font-size: 28px !important;
     line-height: 30px;
@@ -1342,4 +1384,7 @@ footer a:hover {
   .footer-cotent {
     margin-bottom: 2rem;
   }
+  .custom_container_leftAuto {
+    max-width: 100% !important;
+}
 }