diff --git a/api/our-approach.js b/api/our-approach.js
new file mode 100644
index 0000000..aa159f6
--- /dev/null
+++ b/api/our-approach.js
@@ -0,0 +1,64 @@
+const Ourapproach = [
+  {
+    id: 1,
+    authorTitle: "Our Approach",
+    title: "Innovative Solutions for Every Challenge",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 2,
+    authorTitle: "Our Mission",
+    title: "Empowering Businesses Through Technology",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 3,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 4,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 5,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 6,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  }
+];
+
+export default Ourapproach;
diff --git a/components/Features/Features.js b/components/Features/Features.js
index 4482e1d..83ff753 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 ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding-top ${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 507276c..0b74596 100644
--- a/components/aboutPage/AboutSection.js
+++ b/components/aboutPage/AboutSection.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import sign from '/public/images/signeture.png'
+import React from 'react';
+import sign from '/public/images/signeture.png';
 import Image from 'next/image';
 
 const AboutSection = (props) => {
@@ -8,36 +8,54 @@ const AboutSection = (props) => {
             <div className="container">
                 <div className="wpo-about-wrap">
                     <div className="row align-items-center">
-                        <div className="col-lg-6 col-md-12 col-12">
+
+                        {/* Text Column — Show first on mobile, second on desktop */}
+                        <div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2">
+                            <div className="wpo-about-text">
+                                <div className="wpo-section-title">
+                                    <span>About Politian</span>
+                                    <h2>We Can Work Together For Create a Better Future.</h2>
+                                </div>
+                                <p>
+                                    The leader is eager to listen to the needs of the youth generation and to hear what
+                                    solutions they have to the problems they are facing. He hopes to find solutions that
+                                    will help them lead meaningful lives and make lasting change in the world.
+                                </p>
+                                <p>
+                                    He believes that the collaboration between the youth and the leaders of society is
+                                    necessary to bring about a brighter future. Now, he is ready to take the first step
+                                    to making that happen.
+                                </p>
+                                <div className="quote">
+                                    <p>
+                                        “We can start by taking small steps and making small changes that can have a big
+                                        impact on the world.”
+                                    </p>
+                                </div>
+                                <div className="wpo-about-left-info">
+                                    <div className="wpo-about-left-inner">
+                                        <div className="wpo-about-left-text">
+                                            <h5>Robert Willum</h5>
+                                            <span>CEO & Founder of Manit</span>
+                                        </div>
+                                    </div>
+                                    <div className="signeture">
+                                        <Image src={sign} alt="Signature" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Image Column — Show second on mobile, first on desktop */}
+                        <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                             <div className="wpo-about-img">
-                                <Image src={props.abimg} alt="" />
+                                <Image src={props.abimg} alt="About Image" />
                                 <div className="wpo-about-img-text">
                                     <h4>1998</h4>
-
                                     <div className="rotate-text">
-                                        <span>W</span>
-                                        <span>e</span>
-                                        <span>A</span>
-                                        <span>r</span>
-                                        <span>e</span>
-                                        <span>W</span>
-                                        <span>o</span>
-                                        <span>r</span>
-                                        <span>k</span>
-                                        <span>i</span>
-                                        <span>n</span>
-                                        <span>g</span>
-                                        <span>F</span>
-                                        <span>o</span>
-                                        <span>r</span>
-                                        <span>Y</span>
-                                        <span>o</span>
-                                        <span>u</span>
-                                        <span>S</span>
-                                        <span>i</span>
-                                        <span>n</span>
-                                        <span>c</span>
-                                        <span>e</span>
+                                        {Array.from("WeAreWorkingForYouSince").map((letter, index) => (
+                                            <span key={index}>{letter}</span>
+                                        ))}
                                     </div>
                                     <div className="dots">
                                         <span></span>
@@ -56,40 +74,12 @@ const AboutSection = (props) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-12 col-12">
-                            <div className="wpo-about-text">
-                                <div className="wpo-section-title">
-                                    <span>About Politian</span>
-                                    <h2>We Can Work Together For Create a Better Future.</h2>
-                                </div>
-                                <p>The leader is eager to listen to the needs of the youth generation and to hear what
-                                    solutions they have to the problems they are facing. He hopes to find solutions that
-                                    will help them lead meaningful lives and make lasting change in the world. </p>
-                                <p>He believes that the collaboration between the youth and the leaders of society is
-                                    necessary to bring about a brighter future. Now, he is ready to take the first step
-                                    to making that happen.</p>
-                                <div className="quote">
-                                    <p>“We can start by taking small steps and making small changes that can have a big
-                                        impact on the world.”</p>
-                                </div>
-                                <div className="wpo-about-left-info">
-                                    <div className="wpo-about-left-inner">
-                                        <div className="wpo-about-left-text">
-                                            <h5>Robert Willum</h5>
-                                            <span>CEO & Founder of Manit</span>
-                                        </div>
-                                    </div>
-                                    <div className="signeture">
-                                        <Image src={sign} alt="" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+
                     </div>
                 </div>
             </div>
         </section>
-    )
-}
+    );
+};
 
-export default AboutSection;
\ No newline at end of file
+export default AboutSection;
diff --git a/components/header2/Header2.js b/components/header2/Header2.js
index bccf639..604974e 100644
--- a/components/header2/Header2.js
+++ b/components/header2/Header2.js
@@ -46,6 +46,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
                                             </ul>
                                         </li>
+                                        <li><Link onClick={ClickHandler} href="/our-approach">Our Approach</Link></li>
                                         <li><Link onClick={ClickHandler} href="/about">About us</Link>
                                             <ul className="sub-menu">
                                                  <li><Link onClick={ClickHandler} href="/about/our-mission">Our Mission</Link></li>
@@ -61,7 +62,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
                                             </ul>
                                         </li>
-                                        <li className="menu-item-has-children">
+                                        {/* <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Pages</Link>
                                             <ul className="sub-menu">
                                                 <li><Link onClick={ClickHandler} href="/gallery">Gallery</Link></li>
@@ -85,7 +86,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/login">Login</Link></li>
                                                 <li><Link onClick={ClickHandler} href="/register">Register</Link></li>
                                             </ul>
-                                        </li>
+                                        </li> */}
                                         <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Blog</Link>
                                             <ul className="sub-menu">
diff --git a/components/our-approach/OurApproachSection.js b/components/our-approach/OurApproachSection.js
new file mode 100644
index 0000000..62ed1ec
--- /dev/null
+++ b/components/our-approach/OurApproachSection.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import Image from 'next/image';
+import Ourapproach from '../../api/our-approach';
+
+const OurApproachSection = () => {
+    return (
+        <>
+            {Ourapproach.map((item, index) => {
+                const isEven = index % 2 !== 0;
+                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"
+                        style={sectionStyle}
+                    >
+                        <div className="container">
+                            <div className="wpo-about-wrap">
+                                <div className="row align-items-center">
+                                    {/* Content Column */}
+                                    <div
+                                        className={`col-lg-6 col-md-12 col-12 ${
+                                            isEven ? 'order-1 order-lg-1' : 'order-1 order-lg-2'
+                                        }`}
+                                    >
+                                        <div className="wpo-about-text">
+                                            <div className="wpo-section-title">
+                                                <span>{item.authorTitle}</span>
+                                                <h2>{item.title}</h2>
+                                            </div>
+                                            <p>{item.para}</p>
+                                            <div
+                                                dangerouslySetInnerHTML={{ __html: item.description }}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    {/* Image Column */}
+                                    <div
+                                        className={`col-lg-6 col-md-12 col-12 ${
+                                            isEven ? 'order-2 order-lg-2' : 'order-2 order-lg-1'
+                                        }`}
+                                    >
+                                        <div className="wpo-about-img">
+                                            <Image
+                                                src={item.screens}
+                                                alt={item.title}
+                                                width={600}
+                                                height={400}
+                                                style={{
+                                                    objectFit: 'cover',
+                                                    borderRadius: '10px',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                );
+            })}
+        </>
+    );
+};
+
+export default OurApproachSection;
diff --git a/pages/our-approach/index.js b/pages/our-approach/index.js
new file mode 100644
index 0000000..9863978
--- /dev/null
+++ b/pages/our-approach/index.js
@@ -0,0 +1,21 @@
+import React, { Fragment } from 'react';
+import Navbar2 from '../../components/Navbar2/Navbar2';
+import PageTitle from '../../components/pagetitle/PageTitle'
+import Scrollbar from '../../components/scrollbar/scrollbar'
+
+import Footer from '../../components/footer/Footer';
+import abimg from '/public/images/about-s2.jpg'
+import OurApproachSection from '../../components/our-approach/OurApproachSection';
+
+const OurApproach = () => {
+    return (
+        <Fragment>
+            <Navbar2 />
+            <PageTitle pageTitle={'Our Approach'} pagesub={'Our Approach'} />
+            <OurApproachSection abimg={abimg} abClass={'wpo-about-section-s2'}/>
+            <Footer />
+            <Scrollbar />
+        </Fragment>
+    )
+};
+export default OurApproach;
diff --git a/styles/sass/base/_base.scss b/styles/sass/base/_base.scss
index 91c72f4..0003506 100644
--- a/styles/sass/base/_base.scss
+++ b/styles/sass/base/_base.scss
@@ -97,6 +97,7 @@ img {
 .section-padding-top-bottom{
 
    padding-top: 120px !important;
+   padding-bottom: 120px !important;
 
 }
 
diff --git a/styles/sass/page/_home-default.scss b/styles/sass/page/_home-default.scss
index e205e39..e37806e 100644
--- a/styles/sass/page/_home-default.scss
+++ b/styles/sass/page/_home-default.scss
@@ -180,7 +180,8 @@
     padding-bottom: 0px;
 
     @media(max-width:991px) {
-        padding-top: 0;
+        padding-top: 60px !important; 
+        padding-bottom: 60px !important;
     }
 
     &.pt-padding{
@@ -458,9 +459,9 @@
         }
 
         .wpo-about-text {
-            @media(max-width:991px) {
-                margin-top: 120px;
-            }
+            // @media(max-width:991px) {
+            //     margin-top: 120px;
+            // }
 
             .wpo-section-title {
                 text-align: left;