Merge pull request #6964 from kishore08-07/fix-homepage-banner-responsive

reclaim dead space in home page banner (mobile view)

Author: Namanv0509

src/sections/Home/Banner-1/banner1.style.js

@@ -142,7 +142,15 @@ const Banner1SectionWrapper = styled.section`
         } 
      }
      @media only screen and (max-width: 760px) {
-        padding: 2rem 0;
+        min-height: 320px;
+        padding: 1.2rem 0 1.5rem 0;
+        .background-svg {
+            width: 7.2rem;
+            min-height: 9.6rem;
+            top: 10px;
+            right: -1.6rem;
+            opacity: 0.7;
+        }
         .section-title-wrapper {
             min-width: 100%;
         }
@@ -167,7 +175,15 @@ const Banner1SectionWrapper = styled.section`
         }
     }
     @media only screen and (max-width: 480px) {
-        padding: 2rem 0;
+        min-height: 220px;
+        padding: 0.7rem 0 1rem 0;
+        .background-svg {
+            width: 9.6rem;
+            min-height: 6.4rem;
+            top: 30px;
+            right: -2.88rem;
+            opacity: 0.5;
+        }
         .vintage-box{
             &:before{
                 content: none;

src/sections/Home/Banner-2/banner2.style.js

@@ -107,10 +107,10 @@ const Banner2SectionWrapper = styled.section`
         } 
      }
      @media only screen and (max-width: 760px) {
-        padding: 2rem 0;
-        background-position: bottom 100px right 10px, bottom right;
-        background-size: 25%;
- 
+        min-height: 320px;
+        padding: 1.2rem 0 1.5rem 0;
+        background-position: bottom 60px right 5px, bottom right;
+        background-size: 2.88rem, 2.4rem;
         .section-title { 
             h1 { margin: 0rem; }
         }
@@ -127,10 +127,10 @@ const Banner2SectionWrapper = styled.section`
         
      }
      @media only screen and (max-width: 480px) {
-        padding: 2rem 0;
-        background-position: bottom 230px right 20px, bottom 180px right;
-        background-size: 20%;
-
+        min-height: 180px;
+        padding: 0.7rem 0 1rem 0;
+        background-position: bottom 30px right 2px, bottom 10px right;
+        background-size: 2.08rem, 1.6rem;
         .section-title{
             h1 {
                 font-size: 35px;
@@ -143,7 +143,7 @@ const Banner2SectionWrapper = styled.section`
                  content: none;
              }
          }
-		 }
+         }
 		 @media screen and (max-width: 402px) {
 			.banner-btn.one, .banner-btn.two 
 			{

src/sections/Home/Banner-4/banner4.style.js

@@ -221,6 +221,12 @@ const Banner1SectionWrapper = styled.section`
         }
     }
     @media only screen and (max-width: 767px) {
+        min-height: 320px;
+        padding: 1.2rem 0 1.5rem 0;
+        .video-wrapper {
+            width: 100%;
+            padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
+        }
         .section-title-wrapper {
             min-width: 100%;
         }
@@ -251,6 +257,12 @@ const Banner1SectionWrapper = styled.section`
     }
     }
     @media only screen and (max-width: 480px) {
+        min-height: 180px;
+        padding: 0.7rem 0 1rem 0;
+        .video-wrapper {
+            width: 100%;
+            padding-bottom: 60%;
+        }
         padding: 2rem 0;
         .vintage-box{
             &:before{