Updated CSS styles

app/about/page.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function About() {
+  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">
+              About AAideA.
+            </h1>
+            <p
+              className="ux-project-subtitle"
+              data-aos="fade-up"
+              data-aos-delay="120"
+            >
+              We build digital homes, brand systems, and scalable content
+              <br />
+              engines designed for clarity and growth.
+            </p>
+       
+          </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
-  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
-  strategy="afterInteractive"
-/>
-
-{/* ✅ 2. Swiper JS (MISSING THA) */}
-<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
-  src="/assets/js/main.js"
-  strategy="afterInteractive"
-/>
+        <Script
+          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+          strategy="afterInteractive"
+        />
+        <Script
+          src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
+          strategy="afterInteractive"
+        />
+        <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;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  background: transparent;
-  border: 1px solid rgba(255,255,255,0.18);
-  border-radius: 10px;
-  padding: 0;
-  cursor: pointer;
-}
-.ux-hamburger span {
-  display: block;
-  width: 20px;
-  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); }
+    /* ---------- 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; }
   
-/* 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); }
+    /* ---------- 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; }
   
-/* OVERLAY (shared by mobile nav + contact panel on small screens) */
-.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; }
+    /* ---------- FOOTER HERO ---------- */
+    .ux-footer-hero { padding: 70px 0; }
+    .ux-footer-title { font-size: 26px; }
   
-/* 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;
-}
+    /* ---------- 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; }
   
-/* 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; }
+    /* ---------- 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; }
   
-/* ============================================================
-   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;}
+    /* ---------- SERVICES SYSTEMS LAYOUT ---------- */
+    .systems-wrapper { display: block; }
+    .systems-left { position: static; margin-bottom: 32px; }
+    .system-card { padding: 28px; margin-bottom: 20px; }
   
-.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%; }
+    /* ---------- 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; }
   
-/* PARTNERS */
-.partners-wrapper {
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-.partner-item { height: 80px; }
-.partner-item img { max-width: 90px; }
+    /* ---------- HVAC / CASE PAGES ---------- */
+    .ux-deliver-right { padding-top: 24px; }
   
-/* ============================================================
-   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;
-}
+    /* ---------- 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; }
   
-/* ============================================================
-   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 / 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 SECTION
-   ============================================================ */
-.ux-process-section { padding: var(--ux-section-y) 0; }
-.ux-process-card {/* width: 100%; *//* padding: 24px 22px; */}
-.ux-step-arrow { display: none; }
-
-/* ============================================================
-   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; }
-
-.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-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;
-  }
-  .ux-result-right { padding-left: 30px; padding-top: 0; }
-
-  .ux-build-grid { grid-template-columns: repeat(3, 1fr); }
-  .ux-ai-grid { grid-template-columns: repeat(3, 1fr); }
-
-  .ux-deliver-box { grid-template-columns: .9fr 1fr .8fr; }
-  .ux-process-grid { grid-template-columns: 1fr 1fr; }
-
-  .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;
+    /* ---------- CONTACT PANEL ---------- */
+    .contact-panel { width: 360px; max-width: 80vw; }
   }
   
-  .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; }
+  /* =====================================================
+     MOBILE — max-width: 768px
+  ===================================================== */
+  @media (max-width: 768px) {
   
-  .ux-hamburger { display: none; }
+    /* ---------- GLOBAL ---------- */
+    body { overflow-x: hidden; }
+    .container { padding-left: 16px; padding-right: 16px; }
   
-  .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;
+    /* ---------- 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;
+      gap: 5px;
+      width: 38px;
+      height: 38px;
+      padding: 8px;
+      background: transparent;
+      border: 1px solid rgba(255,255,255,0.18);
+      border-radius: 8px;
+      cursor: pointer;
+      z-index: 60;
+      position: relative;
+    }
+    .ux-hamburger span {
+      display: block;
+      width: 100%;
+      height: 2px;
+      background: #fff;
+      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); }
+  
+    .ux-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.55);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      z-index: 40;
+    }
+    .ux-overlay.active { opacity: 1; pointer-events: auto; }
+  
+    /* ---------- 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;}
+  
+    /* ---------- 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; }
+  
+    /* ---------- 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; }
+  
+    .partners-wrapper {gap: 14px;grid-template-columns: repeat(2, 1fr);}
+    .partner-item img { max-height: 28px; }
+  
+    /* ---------- 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;}
+  
+    /* ---------- 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; }
+  
+    /* ---------- 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; }
+  
+    /* ---------- 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; }
+  
+    /* ---------- FOOTER HERO ---------- */
+    .ux-footer-hero { padding: 50px 0; background-size: cover; }
+    .ux-footer-title { font-size: 22px; line-height: 1.35; }
+  
+    /* ---------- 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-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 {
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: left;
+      padding: 16px 18px;
+      gap: 12px;
+    }
+    .ux-footer-bottom p { font-size: 12px; }
+    .ux-footer-social { gap: 14px; }
+    .ux-footer-social img { width: 18px; height: 18px; }
+  
+    /* ---------- 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; }
+  
+    /* ---------- 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; }
+  
+    /* ---------- 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%; }
   }
   
-  /* 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,49 @@ 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;
+}