From b5b469355cdd9c294edb95879d1946dadb9b55b2 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Tue, 12 Aug 2025 19:32:58 +0530
Subject: [PATCH] responsive checked

---
 components/Features/Features.js               |  2 +-
 components/ServiceSection/ServiceSection.js   |  2 +-
 components/aboutPage/AboutSection.js          |  2 +-
 components/aboutPage/Donors.js                |  2 +-
 components/aboutPage/SevicesSection.js        |  2 +-
 components/aboutPage/TeamSection.js           |  2 +-
 components/aboutPage/TestimonialSection.js    |  8 ++--
 components/our-approach/OurApproachSection.js |  4 +-
 styles/sass/base/_base.scss                   | 43 ++++++++-----------
 styles/sass/page/_home-default.scss           | 20 +++++----
 styles/sass/page/_home-style-2.scss           |  6 ++-
 11 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/components/Features/Features.js b/components/Features/Features.js
index 83ff753..4482e1d 100644
--- a/components/Features/Features.js
+++ b/components/Features/Features.js
@@ -65,7 +65,7 @@ const ClickHandler = () => {
 
 const Features = (props) => {
     return (
-        <section className={`wpo-service-section section-padding-top ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding ${props.sClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
                 <div className="row-grid wpo-service-slider">
diff --git a/components/ServiceSection/ServiceSection.js b/components/ServiceSection/ServiceSection.js
index b13793c..a4a1d76 100644
--- a/components/ServiceSection/ServiceSection.js
+++ b/components/ServiceSection/ServiceSection.js
@@ -65,7 +65,7 @@ const ClickHandler = () => {
 
 const ServiceSection = (props) => {
     return (
-        <section className={`wpo-service-section section-padding ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding3 ${props.sClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
                 <div className="row-grid wpo-service-slider">
diff --git a/components/aboutPage/AboutSection.js b/components/aboutPage/AboutSection.js
index 0b74596..7a49902 100644
--- a/components/aboutPage/AboutSection.js
+++ b/components/aboutPage/AboutSection.js
@@ -4,7 +4,7 @@ import Image from 'next/image';
 
 const AboutSection = (props) => {
     return (
-        <section className={`wpo-about-section section-padding ${props.abClass}`}>
+        <section className={`wpo-about-section section-padding2 ${props.abClass}`}>
             <div className="container">
                 <div className="wpo-about-wrap">
                     <div className="row align-items-center">
diff --git a/components/aboutPage/Donors.js b/components/aboutPage/Donors.js
index ab7d262..8beebd7 100644
--- a/components/aboutPage/Donors.js
+++ b/components/aboutPage/Donors.js
@@ -8,7 +8,7 @@ const ClickHandler = () => {
 const Donors = () => {
 
     return (
-        <section className="wpo-donors-section section-padding-bottom">
+        <section className="wpo-donors-section section-padding3">
             <div className="container">
                 <div className="wpo-donors-wrap">
                     <div className="row align-items-center">
diff --git a/components/aboutPage/SevicesSection.js b/components/aboutPage/SevicesSection.js
index 55eba4e..0f6d016 100644
--- a/components/aboutPage/SevicesSection.js
+++ b/components/aboutPage/SevicesSection.js
@@ -65,7 +65,7 @@ const ClickHandler = () => {
 
 const ServicesSection = (props) => {
     return (
-        <section className={`wpo-service-section section-padding-top  ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding3  ${props.sClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
                 <div className="row-grid wpo-service-slider">
diff --git a/components/aboutPage/TeamSection.js b/components/aboutPage/TeamSection.js
index 373b680..51782c5 100644
--- a/components/aboutPage/TeamSection.js
+++ b/components/aboutPage/TeamSection.js
@@ -10,7 +10,7 @@ const ClickHandler = () => {
 
 const TeamsSection = (props) => {
     return (
-        <section className={`wpo-team-section section-padding-top-bottom ${props.tmClass}`}>
+        <section className={`wpo-team-section section-padding ${props.tmClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Our Team'} Title={'Meet Our City Council'} />
                 <div className="wpo-team-wrap">
diff --git a/components/aboutPage/TestimonialSection.js b/components/aboutPage/TestimonialSection.js
index 5ea16c2..da9109b 100644
--- a/components/aboutPage/TestimonialSection.js
+++ b/components/aboutPage/TestimonialSection.js
@@ -47,13 +47,13 @@ const TestimonialSection = (props) => {
 
 
     return (
-        <section className={`wpo-testimonial-section section-padding-top  ${props.tmClass}`}>
+        <section className={`wpo-testimonial-section  ${props.tmClass}`}>
             <div className="container">
                 <div className="wpo-testimonial-wrap">
                     <div className="row align-items-center">
-                
+
                         <div className="col-lg-6 col-12 order-lg-1 order-1">
-                             <div class="wpo-section-title-new">
+                            <div class="wpo-section-title-new">
                                 <h2>How we can build a better country together!</h2>
                             </div>
                             <div className="wpo-testimonial-items">
@@ -82,7 +82,7 @@ const TestimonialSection = (props) => {
                                 </div>
                             </div>
                         </div>
-                                <div className="col-lg-6 col-12 order-lg-1 order-2">
+                        <div className="col-lg-6 col-12 order-lg-1 order-2">
                             <div className="testimonial-left">
                                 <div className="testimonial-left-inner">
                                     <div className="left-slide">
diff --git a/components/our-approach/OurApproachSection.js b/components/our-approach/OurApproachSection.js
index 62ed1ec..8d0d2d8 100644
--- a/components/our-approach/OurApproachSection.js
+++ b/components/our-approach/OurApproachSection.js
@@ -10,14 +10,12 @@ const OurApproachSection = () => {
                 const sectionStyle = {
                     backgroundColor: index % 2 === 0 ? '#fbfbfbff' : '#e8ebf5',
                     color: index % 2 === 0 ? '#ffffffff' : '#fff',
-                    paddingTop: '60px',
-                    paddingBottom: '60px',
                 };
 
                 return (
                     <section
                         key={item.id}
-                        className="wpo-about-section section-padding-top-bottom"
+                        className="wpo-about-section section-padding"
                         style={sectionStyle}
                     >
                         <div className="container">
diff --git a/styles/sass/base/_base.scss b/styles/sass/base/_base.scss
index 0003506..6f4809a 100644
--- a/styles/sass/base/_base.scss
+++ b/styles/sass/base/_base.scss
@@ -86,40 +86,33 @@ img {
     padding: 120px 0;
 
     @include media-query( 991px ) {
-        padding: 90px 0;
+        padding: 60px 0;
     }
     @include media-query( 767px ) {
-        padding: 90px 0;
+        padding: 60px 0;
     }
 }
 
+.section-padding2 {
+    padding: 120px 0 0;
 
-.section-padding-top-bottom{
-
-   padding-top: 120px !important;
-   padding-bottom: 120px !important;
-
+    @include media-query( 991px ) {
+        padding: 60px 0 0;
+    }
+    @include media-query( 767px ) {
+        padding: 60px 0 0;
+    }
 }
 
-.section-padding-top{
+.section-padding3 {
+    padding: 0 0 120px 0;
 
-  padding-top: 120px !important;
-
-}
-
-.section-padding-bottom{
-
-  padding-bottom: 120px !important;
-
-}
-
-
-@media (max-width: 768px) {
-  .section-padding-top .section-padding-top .section {
-     padding-top: 60px;
-     padding-bottom: 60px;
-     padding: 60px 0px 60px 0px;
-  }
+    @include media-query( 991px ) {
+        padding: 0 0 60px 0;
+    }
+    @include media-query( 767px ) {
+        padding: 0 0 60px 0;
+    }
 }
 
 .pt-100 {
diff --git a/styles/sass/page/_home-default.scss b/styles/sass/page/_home-default.scss
index e37806e..c7d21b7 100644
--- a/styles/sass/page/_home-default.scss
+++ b/styles/sass/page/_home-default.scss
@@ -177,7 +177,7 @@
 .wpo-about-section-s2,
 .wpo-about-section-s3,
 .wpo-about-section-s4 {
-    padding-bottom: 0px;
+    padding-bottom: 120px;
 
     @media(max-width:991px) {
         padding-top: 60px !important; 
@@ -588,7 +588,7 @@
 .wpo-service-section,
 .wpo-service-section-s2 {
     @media(max-width:991px) {
-        padding-top: 90px;
+        padding: 0px 0px 60px;
     }
 
     .wpo-service-slider {
@@ -852,7 +852,7 @@
     z-index: 1;
 
     @media(max-width:991px) {
-        padding-bottom: 90px;
+        padding-bottom: 60px;
     }
 
     &:before {
@@ -1087,8 +1087,8 @@
         .wpo-testimonial-items {
             @media(max-width:1399px) {
                 margin-right: -100px;
-                padding-left: 60px;
-                max-width: 550px;
+                // padding-left: 60px;
+                max-width: 476px;
             }
 
             @media(max-width:991px) {
@@ -1333,7 +1333,7 @@
 
                 @media(max-width:991px) {
                     text-align: center;
-                    margin-top: 50px;
+                    margin-top: 70px;
 
                     img {
                         margin: 0 auto;
@@ -1579,7 +1579,7 @@
     padding-bottom: 120px;
 
     @media(max-width:991px) {
-        padding-bottom: 90px;
+        padding: 60px 60px;
     }
 
     .wpo-team-wrap {
@@ -1708,6 +1708,10 @@
             .wpo-team-text {
                 padding-top: 15px;
 
+                 @media(max-width:375px) {
+                        padding-top: 90px;
+                    }
+
                 span {
                     font-style: normal;
                     font-weight: 400;
@@ -1855,7 +1859,7 @@
     z-index: 1;
 
     @media(max-width:767px) {
-        padding-bottom: 90px;
+        padding-bottom: 60px;
     }
 
     .wpo-blog-item {
diff --git a/styles/sass/page/_home-style-2.scss b/styles/sass/page/_home-style-2.scss
index 72af95d..44bf1ac 100644
--- a/styles/sass/page/_home-style-2.scss
+++ b/styles/sass/page/_home-style-2.scss
@@ -16,7 +16,7 @@
 
     @include media-query(991px) {
         margin-top: 0px;
-        padding: 90px 0;
+        padding-top: 60px;
     }
 
     .wpo-section-title{
@@ -53,6 +53,10 @@
                 left: 50%;
                 transform: translateX(-50%);
                 bottom: -90px;
+
+                @media(max-width:991px) {
+                    display: none;
+                }
             }
 
             .about-shape {