components/sections/home2/MobileBanner.js

@@ -14,7 +14,7 @@ const swiperOptions = {
     slidesPerView: 1,
     spaceBetween: 0,
     autoplay: {
-        delay: 10000,
+        delay: 5000,
         disableOnInteraction: false,
     },
     loop: true,
@@ -110,10 +110,7 @@ export default function MobileBanner() {
     if (!isMobile) return null;
 
     return (
-        <section
+        <section className="banner-style-two p_relative">
-            className="banner-style-two p_relative"
-            style={{ minHeight: '100vh', position: 'relative' }}
-        >
             <Swiper
                 {...swiperOptions}
                 className="banner-carousel"
@@ -127,48 +124,43 @@ export default function MobileBanner() {
                                 <motion.div
                                     key={`slide-${index}`}
                                     className="slide-item"
-                                    style={{ minHeight: '100vh', position: 'relative' }}
                                     variants={variants[slide.variant]}
                                     initial="initial"
                                     animate="animate"
                                     exit="exit"
                                     transition={transition}
                                 >
-                                    {/* full-height background */}
                                     <div
                                         className="bg-layer"
                                         style={{
-                                            position: 'absolute',
-                                            top: 0,
-                                            left: 0,
-                                            width: '100%',
-                                            height: '100%',
                                             backgroundImage: `url(${slide.bgImage})`,
                                             backgroundSize: 'cover',
-                                            backgroundPosition: 'center'
+                                            backgroundPosition: 'center',
+                                            width: '100%',
+                                            height: '100%',
+                                            minHeight: '400px'
                                         }}
-                                    />
+                                    ></div>
 
-                                    {/* centered content */}
                                     <div
                                         className="auto-container"
                                         style={{
-                                            position: 'relative',
+                                            minHeight: '400px',
-                                            zIndex: 1,
-                                            minHeight: '100vh',
                                             display: 'flex',
                                             justifyContent: 'center',
-                                            alignItems: 'end',
+                                            alignItems: 'center'
-                                            paddingBottom:"20px"
                                         }}
                                     >
                                         {!slide.hideContent && (
                                             <div
                                                 className={`content-box custom-content-box ${slide.contentStyle || ''}`}
+                                                style={{
+                                                    transform: "translateY(200px)",
+                                                }}
                                             >
                                                 <span className="upper-text">{slide.upperText}</span>
                                                 <h2>
-                                                    {slide.title} {slide.titleSpan} {slide.titleEnd}
+                                                    {slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd}
                                                 </h2>
                                                 <p>{slide.subtitle}</p>
                                                 <p>{slide.description}</p>
@@ -178,8 +170,10 @@ export default function MobileBanner() {
                                                     </Link>
                                                 </div>
                                             </div>
+
                                         )}
                                     </div>
+
                                 </motion.div>
                             )}
                         </AnimatePresence>

public/assets/css/module-css/banner.css

@@ -129,14 +129,6 @@
   padding: 150px 0px 150px 0px;
 }
 
-@media (max-width:768px) {
-  .banner-carousel .swiper-slide {
-    padding: 0px;
-    height: 100%;
-    /* margin-top: 100px; */
-  }
-}
-
 .banner-carousel .swiper-slide:before{
   position: absolute;
   content: '';
@@ -209,17 +201,17 @@
   transition: all 1000ms ease;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 425px) {
   .banner-carousel .content-box .upper-text {
-    color: #fff !important;
+    color: #fff;
-    font-size: 18px !important;
+    font-size: 18px;
     line-height: 24px;
   }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 425px) {
   .banner-carousel .content-box h2 {
-    color: #fff !important;
+    color: #fff;
     font-size: 24px;
     line-height: 24px;
   }

public/assets/css/style.css

@@ -3258,9 +3258,9 @@
    padding: 50px;
  }
 
- @media (max-width: 500px) {
+ @media (max-width: 425px) {
    .custom-content-box {
-     padding: 0px;
+     padding: 35px;
    }
  }