Update About Page

app/about/page.tsx

@@ -0,0 +1,291 @@
+export default function About() {
+  const beliefData = [
+    {
+      title: "Ideas must survive scale",
+      desc: "A strong concept doesn't break when applied across formats, platforms, or timezones. It adapts without dilution.",
+      icon: "bi-layers",
+    },
+    {
+      title: "Design must justify itself",
+      desc: "Every decision has a reason. We don't chase trends or add complexity for its own sake. Form follows function always.",
+      icon: "bi-vector-pen",
+    },
+    {
+      title: "AI is leverage, not identity",
+      desc: "We use AI to accelerate execution, not replace judgment. Technology amplifies structured thinking—it doesn't create it.",
+      icon: "bi-cpu",
+      highlight: true,
+    },
+    {
+      title: "Systems beat style",
+      desc: "A beautiful website that can't be updated is a liability. We build for longevity, not just launch day.",
+      icon: "bi-columns-gap",
+    },
+  ];
+
+  return (
+    <>
+      {/* HERO */}
+      <section className="ux-project-hero">
+  <div className="container">
+
+    <div className="ux-project-content text-center">
+      <h1 className="ux-project-title" data-aos="fade-up">
+        We Build With Structure.
+      </h1>
+
+      <p
+        className="ux-project-subtitle"
+        data-aos="fade-up"
+        data-aos-delay="120"
+      >
+        AAideA is a boutique systems-led creative studio for operators who need
+        more than aesthetic polish—they need scalable execution.
+      </p>
+    </div>
+
+    {/* 🔥 IMAGE ROW */}
+    <div className="hero-images row justify-content-center mt-5 g-4">
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box">
+          <img src="assets/images/structure1.png" alt="Team Work" />
+        </div>
+      </div>
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box hero-img-boxup">
+          <img src="assets/images/structure2.png" alt="Office" />
+        </div>
+      </div>
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box">
+          <img src="assets/images/structure3.png" alt="Collaboration" />
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
+      {/* PHILOSOPHY */}
+      <section className="philosophy-section py-5">
+        <div className="container">
+          <div className="row align-items-center g-5">
+            
+            <div className="col-lg-6">
+              <div className="image-box">
+                <img
+                  src="assets/images/intersection.png"
+                  alt="Philosophy"
+                  className="img-fluid"
+                />
+              </div>
+            </div>
+
+            <div className="col-lg-6">
+              <p className="ux-section-label">Philosophy</p>
+
+              <h2 className="main-heading">
+                We exist at the intersection of strategy, design, and execution.
+                Not as separate phases—but as a single disciplined approach.
+              </h2>
+
+              <p className="desc mt-3">
+                Too Many Agencies Deliver Beautiful Work That Doesn't Scale.
+                Too Many Consultancies Deliver Strategies That Never Ship. We Do Both.
+              </p>
+
+              <p className="desc">
+                Our Clients Don't Need Hand-Holding. They Need Clarity, Structure,
+                And Speed—Without Sacrificing Taste Or Long-Term Thinking.
+              </p>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+      {/* ✅ BELIEF SECTION (ADDED HERE) */}
+      <section className="belief-section">
+        <div className="container">
+          <h2 className="section-title mb-5">What We Believe</h2>
+
+          <div className="row g-4">
+            {beliefData.map((item, i) => (
+              <div className="col-lg-3 col-md-6" key={i}>
+                <div className={`belief-card ${item.highlight ? "active" : ""}`}>
+                  
+                  <div className="icon-box">
+                  <img
+            src="assets/images/Ideasabout.svg" 
+            alt="Global"
+            className="img-fluid"
+          />  
+                  </div>
+
+                  <h5>{item.title}</h5>
+                  <p>{item.desc}</p>
+
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="working-section">
+  <div className="container">
+  <div className="displayflexhead" style={{ width: "100%" }}>
+    <p className="ux-section-label" style={{ width: "18%" }}>Working Model</p>
+
+    <h2 className="main-heading">
+      We operate lean. Senior-led execution. No bloated teams.<br />
+      No outsource chaos.
+    </h2>
+    </div>
+    <div className="row g-4">
+
+      {/* CARD 1 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">01</span>
+          <p>
+            Every project is led by senior practitioners—not delegated to junior
+            teams or external freelancers. You work directly with the people
+            building your brand.
+          </p>
+        </div>
+      </div>
+
+      {/* CARD 2 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">02</span>
+          <p>
+            We don't scale headcount. We scale systems. This means faster
+            timelines, clearer communication, and consistent quality from
+            concept through deployment.
+          </p>
+        </div>
+      </div>
+
+      {/* CARD 3 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">03</span>
+          <p>
+            Small teams move faster. Less bureaucracy. More accountability.
+            Better outcomes.
+          </p>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+<section className="global-section py-5">
+  <div className="container">
+    <div className="row align-items-center g-5">
+
+      {/* LEFT CONTENT */}
+      <div className="col-lg-6">
+
+        <p className="small-title">Global Outlook</p>
+
+        <h2 className="main-heading">
+          Built for global decision-makers.
+        </h2>
+
+        <p className="desc mt-3">
+          We work with operators across industries and geographies—from
+          venture-backed startups to established brands entering new markets.
+          Location doesn’t limit execution.
+        </p>
+
+        <div className="highlight-box mt-4">
+        
+          <span>
+          <img
+            src="assets/images/buildaboiticon.svg" 
+            alt="Global"
+            className="img-fluid"
+          />    Remote-first. Timezone-flexible. Outcome-focused.
+          </span>
+        </div>
+
+      </div>
+
+      {/* RIGHT IMAGE */}
+      <div className="col-lg-6">
+        <div className="image-box">
+          <img
+            src="assets/images/decision.png" 
+            alt="Global"
+            className="img-fluid"
+          />
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<section className="who-section ">
+  <div className="container">
+    <div className="row align-items-center g-5">
+
+      {/* LEFT IMAGE */}
+      <div className="col-lg-6">
+        <div className="who-image">
+          <img
+            src="assets/images/Whoabout.png" 
+            alt="Team"
+            className="img-fluid"
+          />
+        </div>
+      </div>
+
+      {/* RIGHT CONTENT */}
+      <div className="col-lg-6">
+
+        <h2 className="who-title">Who We Work With</h2>
+
+        <p className="who-desc">
+          Founders building brands that need to scale without losing coherence.
+        </p>
+
+        <p className="who-desc">
+          Operators who move fast but think long-term—execution speed matters,
+          but structure matters more.
+        </p>
+
+        <p className="who-desc">
+          Companies entering new markets or repositioning existing offerings—
+          where clarity is the competitive advantage.
+        </p>
+
+        <p className="who-muted mt-4">
+          If you value noise over signal, we’re not the right fit.
+        </p>
+
+        <p className="who-muted">
+          If you need cheap and fast over structured and right, look elsewhere.
+        </p>
+
+      </div>
+
+    </div>
+  </div>
+</section>
+
+
+
+
+
+
+    </>
+  );
+}

app/ai_powered/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function AiPowered() {
     return (
 <>
@@ -14,19 +16,19 @@ export default function AiPowered() {
         </p>
       </div>
       <div className="ux-hero-actions">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
-        <a href="#" className="btn ux-btn-secondary">
+        </Link>
+        <Link href="/work" className="btn ux-btn-secondary">
           View Case Studies
-        </a>
+        </Link>
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-7">
+        <div className="col-lg-8">
           <span className="ux-growth-label">Philosophy</span>
           <h2 className="ux-growth-title">Manual Processes Slow Growth</h2>
           <p className="ux-growth-subtitle">Teams waste time on:</p>
@@ -47,7 +49,7 @@ export default function AiPowered() {
           <p className="ux-growth-bottom">Growth requires velocity.</p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-5">
+        <div className="col-lg-4">
           <div className="ux-growth-image-box">
             <img
               src="assets/images/Intelligent.png"
@@ -174,12 +176,12 @@ export default function AiPowered() {
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/brand-architecture/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Brandarchiture() {
     return (
         <>
@@ -12,19 +14,19 @@ export default function Brandarchiture() {
               </p>
             </div>
             <div className="ux-hero-actions">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
-              <a href="#" className="btn ux-btn-secondary">
+              </Link>
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">
                   Most Brands Are Visual Collections — Not Strategic Systems
@@ -49,7 +51,7 @@ export default function Brandarchiture() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/brandart.png" alt="Brand System" />
                 </div>
@@ -180,12 +182,12 @@ export default function Brandarchiture() {
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/brand-build/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function brand_build() {
     return (
         <>
@@ -12,19 +14,19 @@ export default function brand_build() {
               </p>
             </div>
             <div className="ux-hero-actions">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
-              <a href="#" className="btn ux-btn-secondary">
+              </Link>
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">
                   Most Brands Are Visual Collections — Not Strategic Systems
@@ -49,7 +51,7 @@ export default function brand_build() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/Philosophy.png" alt="Brand System" />
                 </div>
@@ -180,12 +182,12 @@ export default function brand_build() {
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/campaign_strategy/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Campaign() {
     return (
 <>
@@ -12,19 +14,19 @@ export default function Campaign() {
         </p>
       </div>
       <div className="ux-hero-actions">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
-        <a href="#" className="btn ux-btn-secondary">
+        </Link>
+        <Link href="/work" className="btn ux-btn-secondary">
           View Case Studies
-        </a>
+        </Link>
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-7">
+        <div className="col-lg-8">
           <span className="ux-growth-label">Philosophy</span>
           <h2 className="ux-growth-title">
             Most Campaigns Look Impressive But Lack Structure
@@ -49,7 +51,7 @@ export default function Campaign() {
           </p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-5">
+        <div className="col-lg-4">
           <div className="ux-growth-image-box">
             <img src="assets/images/Philosophy.png" alt="Campaign System" />
           </div>
@@ -176,12 +178,12 @@ export default function Campaign() {
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/components/AosInit.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+// @ts-expect-error — aos has no bundled types and no @types/aos installed
+import AOS from 'aos';
+import { usePathname } from 'next/navigation';
+
+export default function AosInit() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    AOS.init({
+      duration: 800,
+      easing: 'ease-out-cubic',
+      offset: 60,
+      delay: 0,
+      once: true,
+      mirror: false,
+      anchorPlacement: 'top-bottom',
+      disable: () => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    });
+  }, []);
+
+  useEffect(() => {
+    AOS.refreshHard();
+  }, [pathname]);
+
+  return null;
+}

app/components/Footer.tsx

@@ -6,9 +6,8 @@ export default function Footer() {
     <footer className="ux-main-footer">
       <div className="container">
         <div className="ux-footer-grid">
-          {/* LEFT */}
           <div className="ux-footer-left">
-            <Link href="#"><Image src="/assets/images/footerlogo.png" alt="Logo" width={120} height={40} /></Link>
+            <Link href="/"><Image src="/assets/images/footerlogo.png" alt="Logo" width={120} height={40} /></Link>
             <p className="ux-footer-desc">
               We build digital homes, brand systems, and scalable
               content engines designed for clarity and growth.
@@ -16,7 +15,6 @@ export default function Footer() {
             </p>
           </div>
 
-          {/* RIGHT */}
           <div className="ux-footer-right">
             <div className="ux-footer-links">
               <h6>POPULAR</h6>
@@ -28,26 +26,25 @@ export default function Footer() {
               <h6>HELP</h6>
               <Link href="/process">Process</Link>
               <Link href="/start_project">Start a Project</Link>
-              <Link href="/hvac">HVAC</Link>
+              <Link href="/contact">Contact</Link>
             </div>
             <div className="ux-footer-links">
               <h6>LEGAL</h6>
-              <Link href="#">Terms and Conditions</Link>
-              <Link href="#">Privacy Policy</Link>
-              <Link href="#">FAQ's</Link>
+              <Link href="/terms">Terms and Conditions</Link>
+              <Link href="/privacy">Privacy Policy</Link>
+              <Link href="/faq">FAQ&apos;s</Link>
             </div>
           </div>
         </div>
 
-        {/* BOTTOM */}
         <div className="ux-footer-bottom">
-          <p>© 2026 AAideA by Insignia Consultancy Solutions. All rights reserved.</p>
+          <p>&copy; 2026 AAideA by Insignia Consultancy Solutions. All rights reserved.</p>
           <div className="ux-footer-social">
-            <Link href="#"><Image src="/assets/images/facebook.svg" alt="facebook" width={20} height={20} /></Link>
-            <Link href="#"><Image src="/assets/images/linkdien.svg" alt="linkedin" width={20} height={20} /></Link>
-            <Link href="#"><Image src="/assets/images/instagram.svg" alt="instagram" width={20} height={20} /></Link>
-            <Link href="#"><Image src="/assets/images/twitter.svg" alt="twitter" width={20} height={20} /></Link>
-            <Link href="#"><Image src="/assets/images/youtube.svg" alt="youtube" width={20} height={20} /></Link>
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/facebook.svg" alt="facebook" width={20} height={20} /></a>
+            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/linkdien.svg" alt="linkedin" width={20} height={20} /></a>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/instagram.svg" alt="instagram" width={20} height={20} /></a>
+            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/twitter.svg" alt="twitter" width={20} height={20} /></a>
+            <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/youtube.svg" alt="youtube" width={20} height={20} /></a>
           </div>
         </div>
       </div>

app/components/Header.tsx

@@ -37,6 +37,7 @@ export default function Header() {
               <li><Link href="/services" onClick={closeAll}>Services</Link></li>
               <li><Link href="/about" onClick={closeAll}>About</Link></li>
               <li><Link href="/process" onClick={closeAll}>Process</Link></li>
+              <li><Link href="/contact" onClick={closeAll}>Contact</Link></li>
 
               <li className="ux-nav-cta">
                 <Link href="/start_project" onClick={closeAll}>Start a Project</Link>

app/contact/page.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+
+export default function Contact() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title">Get in touch.</h1>
+            <p className="ux-project-subtitle">
+              Tell us about your project. We respond within one business day.
+            </p>
+            <div className="ux-breadcrumb-wrap">
+              <Link href="/">Home</Link>
+              <span>/</span>
+              <p>Contact</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h4 className="ux-card-title">Email</h4>
+              <p className="ux-card-text">
+                <a href="mailto:info@aaidea.com" className="ux-link">info@aaidea.com</a>
+              </p>
+
+              <h4 className="ux-card-title mt-5">Office</h4>
+              <p className="ux-card-text">
+                410 Sandtown, California 94001, USA
+              </p>
+
+              <h4 className="ux-card-title mt-5">Start a project</h4>
+              <p className="ux-card-text">
+                Ready to scope? Use our{" "}
+                <Link href="/start_project" className="ux-link">project intake form</Link>{" "}
+                &mdash; it takes about 3 minutes and we&apos;ll respond with next steps.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Other resources</h4>
+              <p className="ux-card-text">
+                Read about our <Link href="/process" className="ux-link">process</Link>,
+                explore <Link href="/services" className="ux-link">services</Link>,
+                or check the <Link href="/faq" className="ux-link">FAQ</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/content_motion/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Content() {
   return (
     <>
@@ -13,19 +15,19 @@ export default function Content() {
           </p>
         </div>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
-          <a href="#" className="btn ux-btn-secondary">
+          </Link>
+          <Link href="/work" className="btn ux-btn-secondary">
             View Case Studies
-          </a>
+          </Link>
         </div>
         <div className="row align-items-center g-5 ux-growth-section">
           {/* Left Content */}
-          <div className="col-lg-7">
+          <div className="col-lg-8">
             <span className="ux-growth-label">Philosophy</span>
             <h2 className="ux-growth-title">Content Often Becomes Reactive</h2>
             <p className="ux-growth-subtitle">Teams struggle with:</p>
@@ -48,7 +50,7 @@ export default function Content() {
             </p>
           </div>
           {/* Right Image */}
-          <div className="col-lg-5">
+          <div className="col-lg-4">
             <div className="ux-growth-image-box">
               <img src="assets/images/Content.png" alt="Content System" />
             </div>
@@ -172,12 +174,12 @@ export default function Content() {
             If the idea is strong, we'll scale it.
           </h2>
           <div className="ux-hero-actions">
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/digital_platform/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Digital() {
     return (
         <>
@@ -14,19 +16,19 @@ export default function Digital() {
               </p>
             </div>
             <div className="ux-hero-actions">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
-              <a href="#" className="btn ux-btn-secondary">
+              </Link>
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">Most Websites Break Under Growth</h2>
                 <p className="ux-growth-subtitle">
@@ -55,7 +57,7 @@ export default function Digital() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/Philosophy.png" alt="UI Design" />
                 </div>
@@ -254,12 +256,12 @@ export default function Digital() {
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/faq/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } from "react";
+import Link from "next/link";
+
+const faqData = [
+  {
+    question: "How do projects start?",
+    answer: (
+      <>
+        Begin with our{" "}
+        <Link href="/start_project" className="ux-link">
+          project intake form
+        </Link>
+        . We respond within one business day with next steps.
+      </>
+    ),
+  },
+  {
+    question: "What does pricing look like?",
+    answer:
+      "Engagements are scoped per project. Typical builds start in the $25K range.",
+  },
+  {
+    question: "Do you work with international clients?",
+    answer:
+      "Yes. We operate across US, EU, and APAC time zones.",
+  },
+  {
+    question: "Can I see your process?",
+    answer: (
+      <>
+        Check our{" "}
+        <Link href="/process" className="ux-link">
+          Absorb → Amplify → Activate
+        </Link>{" "}
+        workflow.
+      </>
+    ),
+  },
+];
+
+export default function FAQ() {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const toggle = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <>
+      {/* HERO */}
+      <section className="ux-project-hero">
+        <div className="container text-center">
+          <h1 className="ux-project-title">Frequently Asked Questions</h1>
+          <p className="ux-project-subtitle">
+            Everything you need to know before working with us.
+          </p>
+        </div>
+      </section>
+
+      {/* ACCORDION */}
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="faq-wrapper">
+
+            {faqData.map((item, index) => (
+              <div
+                key={index}
+                className={`faq-item ${activeIndex === index ? "active" : ""}`}
+              >
+                <button
+                  className="faq-question"
+                  onClick={() => toggle(index)}
+                >
+                  <span>{item.question}</span>
+                  <span className="faq-icon">
+                    {activeIndex === index ? "−" : "+"}
+                  </span>
+                </button>
+
+                <div
+                  className="faq-answer"
+                  style={{
+                    maxHeight: activeIndex === index ? "200px" : "0px",
+                  }}
+                >
+                  <p>{item.answer}</p>
+                </div>
+              </div>
+            ))}
+
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/hvac/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Hvac() {
     return (
         <>
@@ -98,9 +100,9 @@ export default function Hvac() {
                   Clear digital authority. Improved lead capture flow. Scalable
                   marketing infrastructure.
                 </p>
-                <a href="#" className="ux-result-btn">
+                <Link href="/start_project" className="ux-result-btn">
                   Build your digital engine
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -114,12 +116,12 @@ export default function Hvac() {
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/layout.tsx

@@ -4,6 +4,7 @@ import "aos/dist/aos.css"
 import { Toaster } from "react-hot-toast";
 import Header from "./components/Header"
 import Footer from "./components//Footer"
+import AosInit from "./components/AosInit"
 import Script from "next/script"
 export default function RootLayout({
   children,
@@ -21,35 +22,25 @@ export default function RootLayout({
 
       <body>
       <Toaster position="top-right" />
+        <AosInit />
         <Header />
 
         {children}
 
 
         <Footer />
-   {/* ✅ 1. Bootstrap */}
-<Script
+        <Script
           src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
           strategy="afterInteractive"
-/>
-
-{/* ✅ 2. Swiper JS (MISSING THA) */}
-<Script
+        />
+        <Script
           src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
           strategy="afterInteractive"
-/>
-
-{/* ✅ 3. AOS JS */}
-<Script
-  src="https://unpkg.com/aos@2.3.4/dist/aos.js"
-  strategy="afterInteractive"
-/>
-
-{/* ✅ 4. TERA main.js (LAST) */}
-<Script
+        />
+        <Script
           src="/assets/js/main.js"
           strategy="afterInteractive"
-/>
+        />
       </body>
     </html>
   )

app/linkedin_uppro/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function linkedin_uppro() {
   return (
 <>
@@ -95,9 +97,9 @@ export default function linkedin_uppro() {
             Professional-grade platform. Structured user journey. Scalable
             product foundation.
           </p>
-          <a href="#" className="ux-result-btn">
+          <Link href="/start_project" className="ux-result-btn">
             Design your platform
-          </a>
+          </Link>
         </div>
       </div>
     </div>
@@ -111,12 +113,12 @@ export default function linkedin_uppro() {
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/page.tsx

@@ -22,15 +22,15 @@ export default function HomePage() {
               modern operators.
             </p>
             <div className="ux-hero-actions">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
-              <a href="#" className="btn ux-btn-secondary">
+              </Link>
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
           </div>
         </div>
@@ -130,12 +130,12 @@ export default function HomePage() {
               We build digital homes, brand systems, and scalable content engines
               designed for clarity and growth.
             </p>
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
         <div className="partners-wrapper">
@@ -195,9 +195,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -208,9 +208,9 @@ export default function HomePage() {
                   Building a brand system for immersive learning in a fragmented
                   market.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -221,9 +221,9 @@ export default function HomePage() {
                   Designing a SaaS platform that bridges vetted talent and
                   execution.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -234,9 +234,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -250,9 +250,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -263,9 +263,9 @@ export default function HomePage() {
                   Building a brand system for immersive learning in a fragmented
                   market.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -276,9 +276,9 @@ export default function HomePage() {
                   Designing a SaaS platform that bridges vetted talent and
                   execution.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -289,9 +289,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -515,12 +515,12 @@ export default function HomePage() {
               Every project follows the same internal discipline.
             </h2>
           </div>
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/process" className="btn ux-btn-primary">
             Explore our Process
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
         {/* Steps */}
         <div className="row g-4 align-items-stretch">
@@ -580,12 +580,12 @@ export default function HomePage() {
             If the idea is strong, we'll scale it.
           </h2>
           <div className="ux-hero-actions">
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/privacy/page.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+
+export default function Privacy() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title">Privacy Policy.</h1>
+            <p className="ux-project-subtitle">
+              How we collect, use, and protect your information.
+            </p>
+           
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h2 className="ux-main-heading mb-4">Information We Collect</h2>
+              <p className="ux-card-text">
+                We collect information you provide directly through our project intake form,
+                including name, company, email, and project details.
+              </p>
+
+              <h4 className="ux-card-title mt-5">How We Use It</h4>
+              <p className="ux-card-text">
+                We use the information to respond to inquiries, scope projects, and improve
+                our services. We do not sell your data.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Cookies</h4>
+              <p className="ux-card-text">
+                We use minimal first-party cookies for site analytics and session continuity.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Contact</h4>
+              <p className="ux-card-text">
+                For privacy questions, please <Link href="/contact" className="ux-link">contact us</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/process/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Process() {
   return (
   <>
@@ -149,12 +151,12 @@ export default function Process() {
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/services/page.tsx

@@ -17,15 +17,15 @@ export default function Services() {
         </p>
       </div>
       <div className="ux-hero-actions">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/digital_platform" className="btn ux-btn-primary">
           View Digital Platforms
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
-        <a href="#" className="btn ux-btn-secondary">
+        </Link>
+        <Link href="/brand-architecture" className="btn ux-btn-secondary">
           Explore Brand Systems →
-        </a>
+        </Link>
       </div>
     </div>
   </section>

app/start_project/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import toast from "react-hot-toast";
+import Link from "next/link";
 export default function Start() {
 
   const [form, setForm] = useState({
@@ -98,19 +99,19 @@ export default function Start() {
                     hello@ovela.com
                   </a>
                   <div className="ux-social-list">
-                    <a href="#">
+                    <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
                       Twitter <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
                       Facebook <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
                       Instagram <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
                       Linkedin <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
                       Youtube <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
                   </div>
@@ -248,12 +249,12 @@ export default function Start() {
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
-                  Start a Project{" "}
+                <Link href="/contact" className="btn ux-btn-primary">
+                  Contact Us{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/terms/page.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+
+export default function Terms() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title">Terms &amp; Conditions.</h1>
+            <p className="ux-project-subtitle">
+              The terms that govern your use of this site and our services.
+            </p>
+        
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h2 className="ux-main-heading mb-4">Acceptance of Terms</h2>
+              <p className="ux-card-text">
+                By accessing this site, you agree to these terms. If you do not agree,
+                please do not use the site.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Use of Content</h4>
+              <p className="ux-card-text">
+                All content, branding, and materials on this site are owned by AAideA
+                and may not be reproduced without written permission.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Engagements</h4>
+              <p className="ux-card-text">
+                Project work is governed by a separate Statement of Work signed at the
+                start of each engagement. See our{" "}
+                <Link href="/process" className="ux-link">process</Link> for how that flow runs.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Privacy</h4>
+              <p className="ux-card-text">
+                Read our <Link href="/privacy" className="ux-link">Privacy Policy</Link>{" "}
+                for how we handle your information.
+              </p>
+
+              <h4 className="ux-card-title mt-5">Contact</h4>
+              <p className="ux-card-text">
+                Questions about these terms? <Link href="/contact" className="ux-link">Contact us</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/work/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function WorkPage() {
     return (
 <>
@@ -214,12 +216,12 @@ export default function WorkPage() {
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

public/assets/css/responsive.css

@@ -1,601 +1,350 @@
-/* ==========================================================================
+/* =====================================================
    AAideA — Responsive Stylesheet
-   Mobile-first overrides on top of style.css.
-   Breakpoints (Bootstrap 5 aligned):
-     xs : <  576px   (default / mobile)
-     sm : >= 576px
-     md : >= 768px
-     lg : >= 992px
-     xl : >= 1200px
-     xxl: >= 1400px
-   ========================================================================== */
+   All rules are wrapped in media queries only.
+   Desktop styles live in style.css and are not touched.
+===================================================== */
 
-/* ---------------- GLOBAL TOKENS & BASE ---------------- */
-:root {
-  --ux-radius: 14px;
-  --ux-gap: clamp(12px, 2vw, 24px);
-  --ux-section-y: clamp(48px, 8vw, 110px);
-  --ux-container-x: clamp(16px, 4vw, 32px);
-  --ux-tap: 44px;
-}
 
-html { -webkit-text-size-adjust: 100%; }
-body { overflow-x: hidden; }
-img, svg, video { max-width: 100%; height: auto; }
-* { box-sizing: border-box; }
+/* =====================================================
+   TABLET — max-width: 1024px
+===================================================== */
+@media (max-width: 1024px) {
 
-.container, .container-fluid {
-  padding-left: var(--ux-container-x);
-  padding-right: var(--ux-container-x);
-}
+    /* ---------- GLOBAL ---------- */
+    body { overflow-x: hidden; }
+    img, video { max-width: 100%; height: auto; }
+    .container { padding-left: 24px; padding-right: 24px; }
   
-/* Touch-friendly defaults: every interactive element gets minimum 44px tap target */
-.ux-btn-primary,
-.ux-btn-secondary,
-.ux-footer-cta-btn,
-.ux-result-btn,
-button,
-a.btn {
-  min-height: var(--ux-tap);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+    /* ---------- HEADER / NAV ---------- */
+    .ux-header { padding: 14px 0; }
+    .ux-navbar { padding: 12px 18px; }
+    .ux-nav { gap: 22px; }
+    .ux-nav a { font-size: 14px; }
+    .ux-brand img { width: 100px; height: auto; }
   
-.ux-input,
-.ux-textarea {
-  width: 100%;
-  font-size: 16px; /* prevent iOS zoom on focus */
-}
+    /* ---------- HERO ---------- */
+    .ux-hero-section { padding: 160px 0 50px; background-size: cover; }
+    .ux-hero-title { font-size: 40px; line-height: 1.2; }
+    .ux-hero-subtitle { width: 80%; font-size: 16px; }
   
-/* ============================================================
-   HEADER + MOBILE NAVIGATION
-   ============================================================ */
-.ux-header { padding: 14px 0; }
+    .ux-bottom-wrapper { margin-top: 50px; }
+    .ux-bottom-wrapper .col-lg-3,
+    .ux-bottom-wrapper .col-lg-2 { flex: 0 0 auto; width: 50%; margin-bottom: 16px; }
+    .ux-stat-box { padding: 28px 24px; }
+    .ux-light { padding: 36px 0; }
+    .ux-counter { font-size: 34px; }
+    .ux-dark h2 { font-size: 32px; }
+    .ux-dark p, .ux-dark h5 { font-size: 18px; line-height: 1.4; }
   
-.ux-navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px;
-  flex-wrap: nowrap;
-}
+    /* ---------- ABOUT SECTION ---------- */
+    .ux-about-section { padding: 60px 0; }
+    .ux-section-label { width: 100%; }
+    .ux-main-heading { font-size: 24px; }
+    .ux-big-counter { font-size: 56px; }
+    .ux-small-text { width: 80%; }
+    .ux-about-img { height: 260px; }
   
-.ux-navbar img { width: auto; height: auto; max-width: 110px; }
+    .partners-wrapper { flex-wrap: wrap; gap: 18px; justify-content: center; }
+    .partner-item img { max-height: 36px; width: auto; }
   
-.ux-brand { display: inline-flex; align-items: center; }
+    /* ---------- WORK / SWIPER ---------- */
+    .ux-work-section { padding: 0 0 50px; }
+    .ux-work-card img {/* height: 240px; */}
+    .ux-work-card h4 { font-size: 18px; }
   
-.ux-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
+    /* ---------- WHY ---------- */
+    .ux-why-section { padding: 70px 0; }
+    .ux-why-img img { height: 260px; }
+    .ux-why-card { padding: 20px 22px; }
   
-/* HAMBURGER (mobile only by default) */
-.ux-hamburger {
-  width: 40px;
-  height: 40px;
+    /* ---------- BUILD ---------- */
+    .ux-build-section { padding: 60px 0; }
+    .ux-build-card { padding: 28px; }
+    .ux-build-card h5 { font-size: 18px; line-height: 26px; min-height: auto; margin-top: 16px; }
+    .ux-build-card p { min-height: auto; }
+  
+    /* ---------- PROCESS ---------- */
+    .ux-process-section { padding: 60px 0; }
+    .ux-process-card { width: 100%; padding: 24px; }
+    .ux-process-card img { margin-top: 16px; }
+    .ux-step-arrow { display: none !important; }
+  
+    /* ---------- FOOTER HERO ---------- */
+    .ux-footer-hero { padding: 70px 0; }
+    .ux-footer-title { font-size: 26px; }
+  
+    /* ---------- MAIN FOOTER ---------- */
+    .ux-footer-grid { grid-template-columns: 1fr; }
+    .ux-footer-left { padding: 32px 24px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
+    .ux-footer-right { grid-template-columns: repeat(3, 1fr); }
+    .ux-footer-links { padding: 28px 18px; }
+    .ux-footer-links h6 { font-size: 16px; }
+    .ux-footer-bottom { padding: 16px 24px; flex-wrap: wrap; }
+  
+    /* ---------- PROJECT HERO ---------- */
+    .ux-project-hero { padding: 150px 0 70px; }
+    .ux-project-title { font-size: 40px; }
+    .ux-project-subtitle { font-size: 16px; }
+    .ux-breadcrumb-wrap { margin-bottom: 50px; }
+  
+    /* ---------- SERVICES SYSTEMS LAYOUT ---------- */
+    .systems-wrapper { display: block; }
+    .systems-left { position: static; margin-bottom: 32px; }
+    .system-card { padding: 28px; margin-bottom: 20px; }
+  
+    /* ---------- PROCESS STEP PAGE ---------- */
+    .ux-process-step-section { padding: 60px 0; }
+    .ux-process-grid { gap: 24px; }
+    .ux-process-image img { width: 100%; height: auto; border-radius: 12px; }
+  
+    /* ---------- HVAC / CASE PAGES ---------- */
+    .ux-deliver-right { padding-top: 24px; }
+  
+    /* ---------- BUTTONS ---------- */
+    .ux-hero-actions { flex-wrap: wrap; gap: 12px; justify-content: center; }
+    .ux-btn-primary { padding: 6px 6px 6px 22px; font-size: 14px; }
+    .ux-btn-secondary { padding: 11px 22px; font-size: 14px; }
+  
+    /* ---------- CONTACT PANEL ---------- */
+    .contact-panel { width: 360px; max-width: 80vw; }
+  }
+  
+  
+  /* =====================================================
+     MOBILE — max-width: 768px
+  ===================================================== */
+  @media (max-width: 768px) {
+  
+    /* ---------- GLOBAL ---------- */
+    body { overflow-x: hidden; }
+    .container { padding-left: 16px; padding-right: 16px; }
+  
+    /* ---------- HEADER / NAV ---------- */
+    .ux-header { padding: 10px 0; }
+    .ux-navbar { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
+    .ux-brand img { width: 90px; height: auto; }
+  
+    /* slide-in mobile menu */
+    .ux-nav {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100vh;
+      width: 80%;
+      max-width: 320px;
+      background: #0c0f0e;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+      padding: 90px 28px 28px;
+      transform: translateX(100%);
+      transition: transform 0.35s ease;
+      z-index: 50;
+      overflow-y: auto;
+      box-shadow: -10px 0 30px rgba(0,0,0,0.35);
+    }
+    .ux-nav.is-open { transform: translateX(0); }
+    .ux-nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .ux-nav li a {
+      display: block;
+      color: #fff;
+      padding: 16px 4px;
+      font-size: 16px;
+      text-decoration: none;
+    }
+    .ux-nav-cta a { color: var(--primary) !important; font-weight: 600; }
+  
+    .ux-hamburger {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
-  align-items: center;
       gap: 5px;
+      width: 38px;
+      height: 38px;
+      padding: 8px;
       background: transparent;
       border: 1px solid rgba(255,255,255,0.18);
-  border-radius: 10px;
-  padding: 0;
+      border-radius: 8px;
       cursor: pointer;
-}
-.ux-hamburger span {
+      z-index: 60;
+      position: relative;
+    }
+    .ux-hamburger span {
       display: block;
-  width: 20px;
+      width: 100%;
       height: 2px;
       background: #fff;
-  border-radius: 2px;
-  transition: transform .25s ease, opacity .2s ease;
-}
-.ux-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
-.ux-hamburger.is-active span:nth-child(2) { opacity: 0; }
-.ux-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+      transition: transform 0.3s ease, opacity 0.2s ease;
+    }
+    .ux-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    .ux-hamburger.is-active span:nth-child(2) { opacity: 0; }
+    .ux-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
   
-/* CONTACT TOGGLE: hide the close icon by default and reveal when active */
-.ux-menu { width: 40px; height: 40px; background: transparent; border: 0; padding: 0; }
-.ux-menu .icon {/* width: 100%; *//* height: 100%; */}
-.ux-menu .close-icon { opacity: 0; transform: rotate(90deg); }
-.ux-menu.active .open-icon  { opacity: 0; transform: rotate(90deg); }
-.ux-menu.active .close-icon { opacity: 1; transform: rotate(0); }
-
-/* OVERLAY (shared by mobile nav + contact panel on small screens) */
-.ux-overlay {
+    .ux-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,0.55);
       opacity: 0;
       pointer-events: none;
-  transition: opacity .3s ease;
-  z-index: 0;
-}
-.ux-overlay.active { opacity: 1; pointer-events: auto; }
+      transition: opacity 0.3s ease;
+      z-index: 40;
+    }
+    .ux-overlay.active { opacity: 1; pointer-events: auto; }
   
-/* MOBILE NAV DRAWER (default = mobile) */
-.ux-nav {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: min(82vw, 320px);
-  height: 100dvh;
-  background: #0e1414;
-  flex-direction: column;
-  gap: 6px;
-  padding: 88px 24px 32px;
-  margin: 0;
-  list-style: none;
-  transform: translateX(100%);
-  transition: transform .35s ease;
-  z-index: 95;
-  box-shadow: -10px 0 40px rgba(0,0,0,0.45);
-  overflow-y: auto;
-}
-.ux-nav.is-open { transform: translateX(0); }
-.ux-nav li {/* width: 100%; */}
-.ux-nav li a {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 14px 8px;
-  font-size: 17px;
-  color: #fff;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-  text-decoration: none;
-  min-height: var(--ux-tap);
-}
-.ux-nav .ux-nav-cta a {
-  margin-top: 12px;
-  background: var(--primary);
-  color: #000 !important;
-  border-radius: 30px;
-  justify-content: center;
-  border: 0;
-  padding: 12px 22px;
-  font-weight: 600;
-}
+    /* ---------- HERO ---------- */
+    .ux-hero-section { padding: 130px 0 40px; }
+    .ux-hero-title { font-size: 30px; line-height: 1.25; }
+    .ux-hero-title br { display: none; }
+    .ux-hero-subtitle { width: 100%; font-size: 15px; margin: 14px auto 0; }
+    .ux-hero-actions {flex-direction: column;gap: 10px;}
+    .ux-hero-actions .btn {justify-content: center;width: fit-content;}
   
-/* CONTACT PANEL: full-width sheet on mobile */
-.contact-panel {
-  top: 0;
-  right: -100%;
-  width: min(88vw, 360px);
-  height: 100dvh;
-  border-radius: 0;
-  padding: 80px 22px 24px;
-  overflow-y: auto;
-  z-index: 96;
-}
-.contact-panel.active { right: 0; }
-.contact-panel .images { flex-wrap: wrap; }
-.contact-panel .images img { width: 72px; height: 72px; }
+    /* ---------- BOTTOM CARDS (stat row) ---------- */
+    .ux-bottom-wrapper { margin-top: 32px; }
+    .ux-bottom-wrapper .col-lg-3,
+    .ux-bottom-wrapper .col-lg-2 { width: 100%; flex: 0 0 100%; margin-bottom: 14px; }
+    .ux-img-card img { width: 100%; }
+    .ux-stat-box { padding: 24px 22px; text-align: center; }
+    .ux-light { padding: 28px 0; }
+    .ux-counter { font-size: 30px; }
+    .ux-dark h2 { font-size: 28px; }
+    .ux-dark p, .ux-dark h5 { font-size: 16px; line-height: 1.4; }
+    .ux-dark .ux-icon { display: flex; justify-content: center; margin-top: 12px; }
   
-/* ============================================================
-   HERO
-   ============================================================ */
-.ux-hero-section {
-  padding: 120px 0 40px;
-  background-size: cover;
-  background-position: center top;
-}
-.ux-hero-title { font-size: clamp(28px, 7vw, 52px); }
-.ux-hero-subtitle { width: 100%; font-size: 15px; }
-.ux-hero-actions {
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 28px;
-}
-.ux-hero-actions .btn {/* width: 100%; */max-width: 320px;}
+    /* ---------- ABOUT ---------- */
+    .ux-about-section { padding: 50px 0; }
+    .ux-main-heading { font-size: 20px; line-height: 1.45; }
+    .ux-sub-heading { font-size: 15px; }
+    .ux-big-counter { font-size: 44px; }
+    .ux-small-text { width: 100%; font-size: 14px; }
+    .ux-about-img { height: 220px; margin: 18px 0; }
+    .ux-card-title { font-size: 18px; }
+    .ux-card-text { font-size: 14px; max-width: 100%; margin-bottom: 24px; }
   
-.ux-bottom-wrapper { margin-top: 40px; }
-.ux-bottom-wrapper .ux-img-card img { width: 100%; }
-.ux-stat-box { padding: 24px 20px; }
-.ux-counter { font-size: 32px; }
-.ux-dark h2 { font-size: 28px; }
-.ux-dark h5,
-.ux-dark p {font-size: 21px;line-height: 1.45;}
- .ux-about-img{
-    margin: 0 0 20px;
-} 
-/* ============================================================
-   ABOUT SECTION
-   ============================================================ */
-.ux-about-section { padding: var(--ux-section-y) 0; }
-.ux-section-label {/* width: 100%; */}
-.ux-main-heading { font-size: clamp(20px, 4vw, 32px); }
-.ux-sub-heading { font-size: 16px; }
-.ux-big-counter { font-size: clamp(40px, 10vw, 70px); }
-.ux-small-text { width: 100%; }
-.ux-about-img { height: auto; max-height: 280px; }
-.ux-card-text { max-width: 100%; }
+    .partners-wrapper {gap: 14px;grid-template-columns: repeat(2, 1fr);}
+    .partner-item img { max-height: 28px; }
   
-/* PARTNERS */
-.partners-wrapper {
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-.partner-item { height: 80px; }
-.partner-item img { max-width: 90px; }
+    /* ---------- WORK ---------- */
+    .ux-work-section { padding: 0 0 40px; }
+    .ux-work-card img {/* height: 200px; */}
+    .ux-work-card h4 { font-size: 17px; }
+    .ux-work-card p { font-size: 13px; }
+    .ux-swiper-nav { gap: 10px; }
+    .ux-arrow img {/* width: 36px; */height: 31px;}
+    .displayflexhead {width: 70%;margin-bottom: 16px;DISPLAY: BLOCK;}
   
-/* ============================================================
-   WORK / SWIPER
-   ============================================================ */
-.ux-work-section { padding: 30px 0 50px; }
-.ux-work-card img { height: auto; max-height: 240px; }
-.ux-work-card h4 { font-size: 17px; }
-.displayflexhead {
-  width: 100%;
-  flex-direction: column;
-  gap: 10px;
-}
-.ux-swiper-nav { gap: 10px; }
-.ux-swiper-nav .ux-arrow {
-  width: 70px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+    /* ---------- WHY ---------- */
+    .ux-why-section { padding: 50px 0; }
+    .ux-why-img img { height: 220px; margin-bottom: 20px; }
+    .ux-why-card { padding: 18px 20px; }
+    .ux-number { font-size: 26px; margin-bottom: 8px; }
+    .ux-why-card h6 { font-size: 15px; }
+    .main-headingexit { font-size: 20px !important; }
+    .existpadd { gap: 0 !important; }
   
-/* ============================================================
-   WHY SECTION
-   ============================================================ */
-.ux-why-section { padding: var(--ux-section-y) 0; }
-.ux-why-img img { height: auto; max-height: 260px; }
-.ux-why-card { padding: 22px 20px; }
-.main-headingexit { width: 100%; }
+    /* ---------- BUILD ---------- */
+    .ux-build-section { padding: 50px 0; }
+    .ux-build-card { padding: 22px; }
+    .ux-build-card h5 { font-size: 17px; line-height: 24px; min-height: auto; margin-top: 14px; }
+    .ux-build-card p { font-size: 14px; min-height: auto; }
+    .ux-build-swiper { padding-top: 24px; }
   
-/* ============================================================
-   BUILD / SELL SECTION
-   ============================================================ */
-.ux-build-section { padding: var(--ux-section-y) 0; background-size: cover; }
-.ux-build-card { padding: 26px 22px; }
-.ux-build-card h5 {}
-.ux-build-card p {}
-.ux-build-swiper .swiper-slide { width: 86%; }
+    /* ---------- PROCESS ---------- */
+    .ux-process-section { padding: 50px 0; }
+    .ux-process-card { padding: 22px; width: 100%; }
+    .ux-process-card h4 { font-size: 18px; margin: 0 0 14px; }
+    .ux-process-card p { font-size: 14px; }
+    .ux-step { font-size: 24px; }
+    .ux-step-arrow { display: none !important; }
   
-/* ============================================================
-   PROCESS SECTION
-   ============================================================ */
-.ux-process-section { padding: var(--ux-section-y) 0; }
-.ux-process-card {/* width: 100%; *//* padding: 24px 22px; */}
-.ux-step-arrow { display: none; }
+    /* ---------- FOOTER HERO ---------- */
+    .ux-footer-hero { padding: 50px 0; background-size: cover; }
+    .ux-footer-title { font-size: 22px; line-height: 1.35; }
   
-/* ============================================================
-   FOOTER CTA + MAIN FOOTER
-   ============================================================ */
-.ux-footer-hero { padding: 60px 0; background-size: cover; background-position: center; }
-.ux-footer-title { font-size: clamp(22px, 5vw, 30px); }
-.ux-footer-cta-btn {
-  font-size: 16px;
-  padding: 6px 6px 6px 22px;
-}
-.ux-footer-cta-btn .ux-btn-icon { width: 38px; height: 38px; }
+    /* ---------- MAIN FOOTER ---------- */
+    .ux-footer-grid { grid-template-columns: 1fr; border-left: none; border-right: none; }
+    .ux-footer-left { padding: 28px 18px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .ux-footer-desc { font-size: 14px; line-height: 1.7; }
   
-.ux-footer-grid {
-  grid-template-columns: 1fr;
-  border-left: 0;
-  border-right: 0;
-}
-.ux-footer-left {
-  padding: 32px 22px;
-  border-right: 0;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-}
-.ux-footer-desc { max-width: 100%; font-size: 15px; line-height: 1.7; }
-.ux-footer-right { grid-template-columns: repeat(2, 1fr); }
-.ux-footer-links { padding: 26px 22px; }
-.ux-footer-links h6 { font-size: 16px; margin-bottom: 12px; }
-.ux-footer-links a { font-size: 14px; margin-bottom: 10px; }
+    .ux-footer-right { grid-template-columns: 1fr; }
+    .ux-footer-links { padding: 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .ux-footer-links:last-child { border-bottom: none; }
+    .ux-footer-links h6 { font-size: 14px; margin-bottom: 14px; }
+    .ux-footer-links a { font-size: 14px; margin-bottom: 10px; }
   
-.ux-footer-bottom {
+    .ux-footer-bottom {
       flex-direction: column;
       align-items: flex-start;
-  padding: 18px 22px;
-  gap: 14px;
       text-align: left;
-}
-.ux-footer-bottom p { font-size: 13px; }
-.ux-footer-social { gap: 14px; flex-wrap: wrap; }
-
-/* ============================================================
-   START PROJECT / BREADCRUMB HERO
-   ============================================================ */
-.ux-project-hero { padding: 130px 0 60px; background-size: cover; }
-.ux-project-title { font-size: clamp(26px, 6vw, 50px); }
-.ux-project-subtitle { font-size: 15px; }
-.ux-breadcrumb-wrap { margin-bottom: 36px; flex-wrap: wrap; }
-.ux-joined-box {
-  position: static;
-  margin: 30px auto 0;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.ux-avatar-group img { width: 48px; height: 48px; border-width: 2px; margin-left: -10px; }
-
-/* CONTACT FORM */
-.ux-contact-section { padding: 50px 0; }
-.ux-contact-left,
-.ux-contact-box {}
-.ux-contact-email { font-size: clamp(24px, 6vw, 35px); margin-bottom: 36px; }
-.ux-contact-link { font-size: 18px; }
-.ux-contact-title { font-size: clamp(20px, 4vw, 26px); margin-bottom: 24px; }
-.ux-input {}
-.ux-textarea { font-size: 16px; padding: 16px 18px; }
-
-/* CASE ACCORDION */
-.ux-case-section { padding: 50px 0; }
-.ux-case-btn { padding: 22px 22px !important; flex-wrap: wrap; gap: 10px; }
-.ux-case-head {/* width: 100%; */}
-.ux-case-head h3 { font-size: clamp(20px, 5vw, 29px); }
-.ux-case-head p { font-size: 15px; }
-.ux-case-right { padding-right: 0; margin-left: 0; }
-.ux-case-body { padding: 0 18px 24px !important; }
-.ux-case-inner {
-  grid-template-columns: 1fr;
-  gap: 18px;
-  padding: 18px;
-}
-.ux-case-img { height: auto; max-height: 220px; }
-.ux-case-grid { grid-template-columns: 1fr; gap: 18px; }
-.ux-case-grid strong { font-size: 17px; }
-
-/* RESULT / DELIVER */
-.ux-result-section { padding: 50px 0; }
-.ux-result-box {
-  grid-template-columns: 1fr;
-  margin-bottom: 50px;
-  padding: 26px;
-}
-.ux-result-left { padding-right: 0; border-right: 0; padding-bottom: 22px; border-bottom: 1px solid #e3e3e3; }
-.ux-result-right { padding-left: 0; padding-top: 22px; }
-.ux-build-grid { grid-template-columns: repeat(2, 1fr); }
-.ux-ai-grid { grid-template-columns: 1fr; }
-.ux-mini-card { min-height: auto; }
-.ux-mini-card span { font-size: 32px; top: 8px; right: 12px; }
-.ux-mini-card p { margin-top: 56px; font-size: 14px; }
-
-.ux-deliver-box {
-  grid-template-columns: 1fr;
-  gap: 24px;
-  padding: 26px;
-}
-.ux-deliver-center img { height: auto; max-height: 240px; }
-
-/* ============================================================
-   PROCESS STEP CARD
-   ============================================================ */
-.ux-process-step-section { padding: 50px 0; }
-.ux-process-step-box { padding: 24px 22px; margin: 0 0 28px; }
-.ux-process-title { font-size: clamp(20px, 5vw, 28px); }
-.ux-process-grid { grid-template-columns: 1fr; gap: 24px; }
-.ux-process-image img { height: auto; max-height: 280px; }
-.ux-process-content { padding-right: 0; }
-.ux-process-item { margin-bottom: 22px; }
-
-/* SYSTEMS WRAPPER */
-.systems-wrapper {
-  flex-direction: column;
-  gap: 30px;
-  padding: 40px 0;
-}
-.systems-left,
-.systems-right { width: 100%; }
-.systems-left { position: static; }
-.systems-left .desc { width: 100%; }
-.system-card { padding: 22px; }
-.system-card ul { grid-template-columns: 1fr; }
-
-/* CONNECT SECTION (FLOW) */
-.connect-section { padding: 50px 0 30px; }
-.connect-section h2 { font-size: clamp(22px, 5vw, 30px); }
-.connect-flow { gap: 8px; }
-.flow-item { padding: 8px 18px 8px 8px; font-size: 13px; }
-.arrow { display: none; }
-.bottom-text { font-size: 17px; margin: 30px auto; }
-
-/* APPROACH / DELIVER */
-.ux-approach-section { padding: 60px 0; }
-.ux-section-desc { font-size: 16px; margin-left: 0; max-width: 100%; }
-.ux-card { padding: 22px 20px; }
-.ux-card-top { margin-bottom: 22px; }
-.ux-card h4 { font-size: 19px; }
-
-.ux-deliver-section { padding: 30px 0 60px; }
-.ux-snapshot-box { padding: 28px 24px; }
-.ux-snapshot-box h2 { font-size: clamp(30px, 8vw, 48px); }
-.ux-snapshot-box p { font-size: 17px; }
-
-/* GROWTH SECTION */
-.ux-growth-section { margin: 24px auto; padding: 30px 0; }
-.ux-growth-title { font-size: clamp(22px, 5vw, 30px); }
-.ux-growth-bottom { font-size: 17px; }
-
-/* BREACAMP OFFLINE TEXT BLOCK */
-.breacampoffline {
-  flex-direction: column;
-  gap: 14px;
-  margin: 30px auto 0;
-  align-items: stretch;
-}
-.breacampoffline p { width: 100%; }
-
-/* ==========================================================================
-   >= 576px  (sm)
-   ========================================================================== */
-@media (min-width: 576px) {
- 
-  .ux-hero-actions .btn { width: auto; }
-  .partners-wrapper { grid-template-columns: repeat(3, 1fr); }
-  .ux-build-grid { grid-template-columns: repeat(2, 1fr); }
-  .ux-ai-grid { grid-template-columns: repeat(2, 1fr); }
-  .ux-footer-right { grid-template-columns: repeat(3, 1fr); }
-  .ux-build-swiper .swiper-slide { width: 60%; }
-}
-
-/* ==========================================================================
-   >= 768px  (md / tablet)
-   ========================================================================== */
-@media (min-width: 768px) {
-  .ux-header { padding: 18px 0; }
-  .ux-navbar { padding: 14px 22px; }
-
-  .ux-hero-section { padding: 160px 0 50px; }
-  .ux-hero-subtitle { width: 80%; }
-
-  .partners-wrapper { grid-template-columns: repeat(4, 1fr); }
-  .partner-item { height: 90px; }
-
-  .ux-case-inner { grid-template-columns: 280px 1fr; }
-  .ux-case-grid { grid-template-columns: repeat(2, 1fr); }
-
-  .ux-result-box { grid-template-columns: 1.3fr .9fr; }
-  .ux-result-left {
-    padding-right: 26px;
-    padding-bottom: 0;
-    border-right: 1px solid #e3e3e3;
-    border-bottom: 0;
+      padding: 16px 18px;
+      gap: 12px;
     }
-  .ux-result-right { padding-left: 30px; padding-top: 0; }
+    .ux-footer-bottom p { font-size: 12px; }
+    .ux-footer-social { gap: 14px; }
+    .ux-footer-social img { width: 18px; height: 18px; }
   
-  .ux-build-grid { grid-template-columns: repeat(3, 1fr); }
-  .ux-ai-grid { grid-template-columns: repeat(3, 1fr); }
+    /* ---------- PROJECT HERO ---------- */
+    .ux-project-hero { padding: 130px 0 60px; }
+    .ux-project-hero.ux-project-heropad { padding: 130px 0 40px; }
+    .ux-project-title { font-size: 30px; line-height: 1.25; }
+    .ux-project-title br { display: none; }
+    .ux-project-subtitle { font-size: 15px; }
+    .ux-project-subtitle br { display: none; }
+    .ux-breadcrumb-wrap { margin-bottom: 30px; flex-wrap: wrap; }
   
-  .ux-deliver-box { grid-template-columns: .9fr 1fr .8fr; }
-  .ux-process-grid { grid-template-columns: 1fr 1fr; }
+    /* ---------- SERVICES SYSTEMS ---------- */
+    .systems-section { padding: 50px 0; }
+    .systems-wrapper { display: block; }
+    .systems-left { position: static; margin-bottom: 24px; }
+    .systems-left h2 { font-size: 22px; }
+    .systems-left .desc { font-size: 14px; }
+    .system-card { padding: 22px; margin-bottom: 18px; }
+    .system-card h4 { font-size: 17px; }
+    .system-card p, .system-card li { font-size: 14px; }
   
-  .ux-footer-grid { grid-template-columns: 1.1fr 1fr; }
-  .ux-footer-left {
-    padding: 38px 32px;
-    border-right: 1px solid rgba(255,255,255,0.08);
-    border-bottom: 0;
-  }
-  .ux-footer-bottom {
-    flex-direction: row;
-    align-items: center;
-    text-align: left;
-    padding: 18px 28px;
+    /* ---------- PROCESS STEP PAGE ---------- */
+    .ux-process-step-section { padding: 40px 0; }
+    .ux-process-step-box { padding: 24px 18px; }
+    .ux-process-number { font-size: 36px; }
+    .ux-process-title { font-size: 26px; }
+    .ux-process-subtitle { font-size: 15px; }
+    .ux-process-grid { display: block; }
+    .ux-process-image img { width: 100%; height: auto; margin: 16px 0; border-radius: 12px; }
+    .ux-process-item h4 { font-size: 17px; }
+    .ux-process-item p { font-size: 14px; }
+  
+    /* ---------- GROWTH SECTION (detail pages) ---------- */
+    .ux-growth-section { padding: 24px 0; }
+    .ux-growth-title { font-size: 22px; line-height: 1.35; }
+    .ux-growth-subtitle { font-size: 15px; }
+    .ux-growth-list { padding-left: 18px; }
+    .ux-growth-list li { font-size: 14px; }
+  
+    /* ---------- HVAC / LYNKEDUP CASE PAGES ---------- */
+    .ux-deliver-right { padding-top: 18px; }
+    .ux-result-heading { font-size: 22px; }
+    .ux-result-btn { display: inline-block; margin-top: 14px; }
+  
+    /* ---------- START PROJECT FORM ---------- */
+    .ux-contact-left { padding: 24px 18px; }
+    .ux-contact-link { font-size: 22px; }
+    .ux-contact-email { font-size: 16px; }
+    .ux-social-list a { font-size: 14px; }
+  
+    /* ---------- CONTACT PANEL (slide-out) ---------- */
+    .contact-panel { width: 86%; max-width: 320px; padding: 22px 18px; }
+    .contact-panel h4 { font-size: 18px; }
+    .contact-panel .images { gap: 8px; }
+    .contact-panel .images img { width: 60px; height: 60px; }
+    .contact-panel p { font-size: 13px; }
+  
+    /* ---------- BUTTONS ---------- */
+    .ux-btn-primary { padding: 6px 6px 6px 18px; font-size: 13px; gap: 8px; }
+    .ux-btn-icon { padding: 6px 10px; }
+    .ux-btn-secondary { padding: 10px 18px; font-size: 13px; }
+  
+    /* ---------- TYPOGRAPHY UTILS ---------- */
+    h2 { font-size: 22px; }
+    .ux-section-label { font-size: 14px; width: 100%; }
   }
   
-  .systems-wrapper { padding: 60px 0; }
-  .ux-build-swiper .swiper-slide { width: 45%; }
-}
-
-/* ==========================================================================
-   >= 992px  (lg / desktop) — restore original desktop nav
-   ========================================================================== */
-@media (min-width: 992px) {
-  .ux-header { padding: 20px 0; }
-  .ux-navbar { padding: 15px 25px; }
-
-  .ux-hamburger { display: none; }
-
-  .ux-nav {
-    position: static;
-    width: auto;
-    height: auto;
-    background: transparent;
-    flex-direction: row;
-    gap: 30px;
-    padding: 0;
-    transform: none;
-    box-shadow: none;
-    overflow: visible;
-  }
-  .ux-nav li a {
-    padding: 0;
-    border-bottom: 0;
-    font-size: 16px;
-    min-height: auto;
-  }
-  .ux-nav .ux-nav-cta a {
-    margin-top: 0;
-    background: transparent;
-    color: var(--primary) !important;
-    padding: 0;
-    font-weight: 400;
-  }
-
-  /* Contact panel returns to floating card */
-  .contact-panel {
-    top: 100px;
-    right: -350px;
-    width: 320px;
-    height: auto;
-    border-radius: 12px;
-    padding: 20px;
-  }
-  .contact-panel.active { right: 40px; }
-
-  .ux-overlay { display: none; }
-
-  .ux-hero-section { padding: 200px 0 60px; }
-  .ux-hero-subtitle { width: 60%; }
-
-  .partners-wrapper { grid-template-columns: repeat(6, 1fr); }
-  .partner-item { height: 100px; }
-  .partner-item img { max-width: 120px; }
-
-  .ux-build-grid { grid-template-columns: repeat(4, 1fr); }
-  .ux-build-swiper .swiper-slide { width: 330px; }
-
-  .ux-joined-box {
-    position: absolute;
-    right: 8%;
-    bottom: 50px;
-    margin: 0;
-    flex-wrap: nowrap;
-  }
-  .ux-avatar-group img { width: 64px; height: 64px; border-width: 3px; margin-left: -14px; }
-
-  .ux-step-arrow { display: block; }
-
-  .systems-wrapper {
-    flex-direction: row;
-    gap: 80px;
-    padding: 80px 20px;
-  }
-  .systems-left { width: 45%; position: sticky; top: 90px; }
-  .systems-right { width: 65%; }
-  .systems-left .desc { width: 70%; }
-
-  .system-card ul { grid-template-columns: 1fr 1fr; }
-
-  .breacampoffline {
-    flex-direction: row;
-    align-items: self-start;
-    gap: 20px;
-    justify-content: center;
-  }
-  .breacampoffline p { width: 33%; }
-
-  .displayflexhead { flex-direction: row; width: 62%; gap: 0; }
-
-  .arrow { display: inline; }
-  .flow-item { padding: 10px 40px 10px 10px; font-size: 14px; }
-}
-
-/* ==========================================================================
-   >= 1200px  (xl)
-   ========================================================================== */
-@media (min-width: 1200px) {
-  .ux-hero-section { padding: 200px 0 60px; }
-  .ux-project-hero { padding: 190px 0 100px; }
-}
-
-/* ==========================================================================
-   Reduced motion respect
-   ========================================================================== */
-@media (prefers-reduced-motion: reduce) {
-  .ux-nav,
-  .contact-panel,
-  .ux-overlay,
-  .ux-hamburger span,
-  .ux-menu .icon { transition: none !important; }
-}     

public/assets/css/style.css

@@ -23,7 +23,7 @@ h2 {
 
 /* NAVBAR */
 .ux-header {
-  padding: 20px 0;
+  padding: 30px 0;
   position: absolute;
   z-index: 9;
   width: 100%;
@@ -141,7 +141,9 @@ h2 {
   padding: 80px 0;
   background: #ffffff;
 }
-
+.ux-footer-hero .ux-section-label {
+    color: white;
+}
 /* COMMON HEADINGS */
 .ux-section-label {
   font-size: 16px;
@@ -197,7 +199,7 @@ h2 {
 
 .ux-card-text {
   color: black;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
   max-width: 80%;
 }
 
@@ -332,7 +334,7 @@ h2 {
 .ux-number {
   font-size: 32px;
   font-weight: 700;
-  color: #bbb;
+  color: #bbbbbb3d;
   display: block;
   margin-bottom: 13px;
 }
@@ -482,6 +484,10 @@ h2 {
 .ux-footer-hero-content{
     position:relative;
     z-index:2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 .ux-footer-hero-content .ux-hero-actions {
     margin-top: 20px;
@@ -1682,18 +1688,24 @@ h2 {
 .ux-nav-cta { color: #baff00; }
 
 /* TOGGLE ICON */
+
 .ux-menu {
-  width: 26px;
-  height: 26px;
+  width: unset;
+  height: 30px;
+  /* width: 30px; */
   position: relative;
   cursor: pointer;
+  background: unset;
+  box-shadow: unset;
+  border: unset;
 }
 
-.icon {
+.ux-header-actions .icon {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: 20px;
+  height: 19px;
   transition: 0.3s;
+  top: 11px;
 }
 
 .close-icon {
@@ -1811,10 +1823,7 @@ h2 {
   opacity: 1;
   transform: scale(1.05);
   }
-  .ux-navbar img {
-    width: 100%;
-    height: 100%;
-}
+  .ux-navbar img {width: 100%;height: 100%;}
   .ux-footer-left img {
     width: auto;
     height: auto;
@@ -1823,3 +1832,183 @@ h2 {
     width: 19px;
     height: 19px;
 }
+
+.ux-header-actions button {
+  border: none;
+    background: unset;
+}
+.faq-wrapper {
+  max-width: 800px;
+  margin: auto;
+}
+
+.faq-item {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 0;
+}
+
+.faq-question {
+  width: 100%;
+  background: none;
+  border: none;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.faq-icon {
+  font-size: 24px;
+  transition: transform 0.3s ease;
+}
+
+.faq-item.active .faq-icon {
+  transform: rotate(180deg);
+}
+
+.faq-answer {
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.faq-answer p {
+  margin-top: 10px;
+  color: #666;
+  line-height: 1.6;
+}
+
+
+.hero-img-box {
+  border-radius: 18px;
+  overflow: hidden;
+  transition: all 0.4s ease;
+}
+
+.hero-img-box img {
+  width: 100%;
+  height: 370px;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+
+/* Hover effect */
+.hero-img-box:hover img {
+  transform: scale(1.05);
+}
+.who-section {
+  padding: 70px 0;
+}
+.who-section p {font-size: 17px;}
+.who-section .who-muted {
+    opacity: 0.5;
+}
+
+.global-section {
+  background: url(../images/globalout.png);
+  color: #fff;
+  overflow: hidden;
+}
+
+.global-section .small-title {
+  color: #ffffff;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.global-section .main-heading {
+  font-weight: 600;
+  color: white !important;
+  line-height: 1.3;
+}
+
+.global-section .desc {
+  color: #cbd5e1;
+  font-size: 16px;
+  line-height: 1.7;
+  max-width: 520px;
+  margin-top: 30px !important;
+}
+
+/* Highlight Box */
+.highlight-box {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  border-radius: 12px;
+  border: 1px solid rgb(132 204 22 / 16%);
+  background: rgb(8 8 8 / 8%);
+  color: #a3e635;
+  font-weight: 500;
+}
+
+.highlight-box i {
+  font-size: 18px;
+}
+
+/* Image Styling */
+.image-box img {
+  border-radius: 16px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.working-card {
+  background: #fff;
+  padding: 30px 30px;
+  border-radius: 16px;
+  position: relative;
+  min-height: 270px;
+  border: 1px solid #eee;
+  transition: all 0.3s ease;
+  margin-top: 40px;
+}
+
+.working-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+.working-card .number {
+  font-size: 48px;
+  font-weight: 700;
+  color: #e5e5e5;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.working-card p {
+  font-size: 15px;
+  color: #555;
+  line-height: 1.6;
+}
+.working-section {
+  padding: 80px 0;
+}
+.belief-section{
+  padding: 80px 0;
+  background: #FBFBFB;
+}
+.belief-card  {
+    background: #FFFFFF;
+    border: 1px solid #F3E8E8;
+    backdrop-filter: blur(47px);
+    border-radius: 15px;
+    padding: 30px 24px;
+    min-height: 312px;
+}
+.belief-card h5 {
+    font-weight: 800;
+}
+.belief-card p {
+    margin-top: 60px;
+}
+.belief-card img {
+    margin: 0 0 30px;
+}
+.hero-img-boxup {
+    top: 51px;
+    margin-top: 60px;
+}

public/assets/images/Designabout.svg

@@ -0,0 +1,14 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" fill="white"/>
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" stroke="url(#paint0_linear_1_398)"/>
+<path d="M35.2064 43.3582C34.9391 43.6255 34.5765 43.7757 34.1984 43.7757C33.8204 43.7757 33.4578 43.6255 33.1904 43.3582L30.9292 41.097C30.6619 40.8296 30.5117 40.467 30.5117 40.089C30.5117 39.7109 30.6619 39.3483 30.9292 39.0809L38.8934 31.1167C39.1608 30.8494 39.5234 30.6992 39.9015 30.6992C40.2795 30.6992 40.6421 30.8494 40.9095 31.1167L43.1707 33.3779C43.438 33.6453 43.5882 34.0079 43.5882 34.3859C43.5882 34.764 43.438 35.1266 43.1707 35.3939L35.2064 43.3582Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.4762 31.5349L36.5158 21.7343C36.4625 21.4676 36.334 21.2218 36.1456 21.0257C35.9571 20.8297 35.7165 20.6917 35.4522 20.6279L17.4249 15.8915C17.1874 15.8341 16.9391 15.8386 16.7039 15.9048C16.4687 15.9709 16.2544 16.0964 16.0817 16.2692C15.9089 16.4419 15.7834 16.6562 15.7173 16.8914C15.6511 17.1266 15.6466 17.3749 15.704 17.6124L20.4404 35.6397C20.5042 35.904 20.6422 36.1446 20.8382 36.3331C21.0343 36.5215 21.2801 36.65 21.5468 36.7033L31.3474 38.6637" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.0938 16.2788L26.4818 26.6669" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.496 31.5346C30.0709 31.5346 31.3476 30.2579 31.3476 28.6831C31.3476 27.1082 30.0709 25.8315 28.496 25.8315C26.9212 25.8315 25.6445 27.1082 25.6445 28.6831C25.6445 30.2579 26.9212 31.5346 28.496 31.5346Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_398" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/Ideasabout.svg

@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="url(#paint0_linear_1_388)"/>
+<path d="M31.104 16.1077C30.7325 15.9383 30.329 15.8506 29.9206 15.8506C29.5123 15.8506 29.1088 15.9383 28.7373 16.1077L16.5185 21.6682C16.2655 21.7797 16.0504 21.9625 15.8994 22.1941C15.7484 22.4257 15.668 22.6963 15.668 22.9728C15.668 23.2493 15.7484 23.5198 15.8994 23.7514C16.0504 23.9831 16.2655 24.1658 16.5185 24.2773L28.7515 29.852C29.123 30.0215 29.5266 30.1092 29.9349 30.1092C30.3432 30.1092 30.7468 30.0215 31.1183 29.852L43.3513 24.2916C43.6043 24.18 43.8194 23.9973 43.9704 23.7657C44.1214 23.5341 44.2018 23.2635 44.2018 22.987C44.2018 22.7105 44.1214 22.44 43.9704 22.2083C43.8194 21.9767 43.6043 21.794 43.3513 21.6824L31.104 16.1077Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 30.1089C15.6634 30.3816 15.7409 30.6488 15.8875 30.8787C16.0341 31.1087 16.2435 31.2918 16.491 31.4063L28.7525 36.981C29.1221 37.1484 29.5231 37.235 29.9288 37.235C30.3345 37.235 30.7355 37.1484 31.105 36.981L43.338 31.4206C43.5904 31.3072 43.8043 31.1227 43.9537 30.8898C44.1031 30.6569 44.1814 30.3856 44.1792 30.1089" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 37.2378C15.6634 37.5105 15.7409 37.7777 15.8875 38.0076C16.0341 38.2376 16.2435 38.4207 16.491 38.5352L28.7525 44.1099C29.1221 44.2773 29.5231 44.3639 29.9288 44.3639C30.3345 44.3639 30.7355 44.2773 31.105 44.1099L43.338 38.5495C43.5904 38.4361 43.8043 38.2516 43.9537 38.0187C44.1031 37.7858 44.1814 37.5145 44.1792 37.2378" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_388" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/Systems.svg

@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" fill="white"/>
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" stroke="url(#paint0_linear_1_430)"/>
+<path d="M41.3277 17.2773H18.5156C17.7282 17.2773 17.0898 17.9157 17.0898 18.7031V25.8319C17.0898 26.6193 17.7282 27.2577 18.5156 27.2577H41.3277C42.1152 27.2577 42.7535 26.6193 42.7535 25.8319V18.7031C42.7535 17.9157 42.1152 17.2773 41.3277 17.2773Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.4959 32.9604H18.5156C17.7282 32.9604 17.0898 33.5988 17.0898 34.3862V41.515C17.0898 42.3024 17.7282 42.9408 18.5156 42.9408H28.4959C29.2833 42.9408 29.9217 42.3024 29.9217 41.515V34.3862C29.9217 33.5988 29.2833 32.9604 28.4959 32.9604Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.328 32.9604H37.0508C36.2633 32.9604 35.625 33.5988 35.625 34.3862V41.515C35.625 42.3024 36.2633 42.9408 37.0508 42.9408H41.328C42.1155 42.9408 42.7538 42.3024 42.7538 41.515V34.3862C42.7538 33.5988 42.1155 32.9604 41.328 32.9604Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_430" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/buildaboiticon.svg

@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2713 26.1627C20.8392 26.1627 26.1636 20.8383 26.1636 14.2703C26.1636 7.70232 20.8392 2.37793 14.2713 2.37793C7.7033 2.37793 2.37891 7.70232 2.37891 14.2703C2.37891 20.8383 7.7033 26.1627 14.2713 26.1627Z" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.2687 2.37793C11.215 5.58429 9.51172 9.84246 9.51172 14.2703C9.51172 18.6981 11.215 22.9563 14.2687 26.1627C17.3223 22.9563 19.0256 18.6981 19.0256 14.2703C19.0256 9.84246 17.3223 5.58429 14.2687 2.37793Z" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.37891 14.2705H26.1636" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/leverage.svg

@@ -0,0 +1,23 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="url(#paint0_linear_1_409)"/>
+<path d="M29.9219 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.9219 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.0508 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.0508 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 30.1089H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 37.2378H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 22.9805H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 30.1089H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 37.2378H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 22.9805H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.793 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.793 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.4762 18.7031H21.3671C19.7923 18.7031 18.5156 19.9798 18.5156 21.5546V38.6637C18.5156 40.2386 19.7923 41.5153 21.3671 41.5153H38.4762C40.0511 41.5153 41.3278 40.2386 41.3278 38.6637V21.5546C41.3278 19.9798 40.0511 18.7031 38.4762 18.7031Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.1991 24.4058H25.6445C24.8571 24.4058 24.2188 25.0441 24.2188 25.8315V34.3861C24.2188 35.1735 24.8571 35.8118 25.6445 35.8118H34.1991C34.9865 35.8118 35.6248 35.1735 35.6248 34.3861V25.8315C35.6248 25.0441 34.9865 24.4058 34.1991 24.4058Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_409" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#BCEA3E"/>
+</linearGradient>
+</defs>
+</svg>