diff --git a/Uburizaimg.png b/Uburizaimg.png
new file mode 100644
index 0000000..dacef05
Binary files /dev/null and b/Uburizaimg.png differ
diff --git a/components/Expertise.js b/components/Expertise.js
index 0388919..135520e 100644
--- a/components/Expertise.js
+++ b/components/Expertise.js
@@ -14,7 +14,7 @@ const Expertise = () => {
           </div>
           <div className='hero-content grid-4'>
             {expertise.map((item) => (
-              <Card data={item} key={item.id} caption='learn more' />
+              <Card data={item} key={item.id} caption='learn more' show={true} />
             ))}
           </div>
         </div>
diff --git a/components/common/ConsultationModal.jsx b/components/common/ConsultationModal.jsx
new file mode 100644
index 0000000..adb385f
--- /dev/null
+++ b/components/common/ConsultationModal.jsx
@@ -0,0 +1,186 @@
+import React, { useState } from "react";
+
+const ConsultationModal = ({ isOpen, onClose }) => {
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    service: "",
+    budget: "",
+    timeframe: "",
+    description: "",
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setSubmitted(true);
+    // Here you would send the form data to your backend or email service
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="consultation-modal-overlay">
+      <div className="consultation-modal">
+        <button className="close-btn" onClick={onClose}>&times;</button>
+        {!submitted ? (
+          <>
+            <h2>Book a Consultation</h2>
+            <p className="desc">Fill out this quick survey to help us serve you better.</p>
+            <form onSubmit={handleSubmit}>
+              <div className="form-row">
+                <div className="form-group">
+                  <label>Name</label>
+                  <input name="name" value={form.name} onChange={handleChange} required />
+                </div>
+                <div className="form-group">
+                  <label>Email</label>
+                  <input name="email" type="email" value={form.email} onChange={handleChange} required />
+                </div>
+              </div>
+              <div className="form-row">
+                <div className="form-group">
+                  <label>Phone</label>
+                  <input name="phone" value={form.phone} onChange={handleChange} required />
+                </div>
+                <div className="form-group">
+                  <label>Service Needed</label>
+                  <select name="service" value={form.service} onChange={handleChange} required>
+                    <option value="">Select a service</option>
+                    <option value="Web Design">Web Design</option>
+                    <option value="Branding">Branding</option>
+                    <option value="Digital Marketing">Digital Marketing</option>
+                    <option value="E-Commerce">E-Commerce</option>
+                    <option value="Other">Other</option>
+                  </select>
+                </div>
+              </div>
+              <div className="form-row">
+                <div className="form-group">
+                  <label>Budget</label>
+                  <input name="budget" value={form.budget} onChange={handleChange} required />
+                </div>
+                <div className="form-group">
+                  <label>Timeframe</label>
+                  <input name="timeframe" value={form.timeframe} onChange={handleChange} required />
+                </div>
+              </div>
+              <div className="form-group">
+                <label>Project Description</label>
+                <textarea name="description" value={form.description} onChange={handleChange} required rows={4} />
+              </div>
+              <button className="submit-btn" type="submit">Submit</button>
+            </form>
+          </>
+        ) : (
+          <div className="thank-you">
+            <h3>Thank you!</h3>
+            <p>We have received your request and will get back to you soon.</p>
+            <button className="submit-btn" onClick={onClose}>Close</button>
+          </div>
+        )}
+      </div>
+      <style jsx>{`
+        .consultation-modal-overlay {
+          position: fixed;
+          top: 0; left: 0; right: 0; bottom: 0;
+          background: rgba(8, 14, 16, 0.7);
+          z-index: 2000;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .consultation-modal {
+          background: #fff;
+          border-radius: 24px;
+          max-width: 500px;
+          width: 95vw;
+          padding: 2rem 1.5rem 1.5rem 1.5rem;
+          box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+          position: relative;
+          color: #080e10;
+        }
+        .consultation-modal h2 {
+          color: #003366;
+          margin-bottom: 0.5rem;
+        }
+        .consultation-modal .desc {
+          color: #00dc93;
+          margin-bottom: 1.5rem;
+        }
+        .close-btn {
+          position: absolute;
+          top: 16px;
+          right: 16px;
+          background: none;
+          border: none;
+          font-size: 2rem;
+          color: #003366;
+          cursor: pointer;
+        }
+        form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .form-row {
+          display: flex;
+          gap: 1rem;
+        }
+        .form-group {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        label {
+          font-weight: 500;
+          margin-bottom: 0.3rem;
+          color: #003366;
+        }
+        input, select, textarea {
+          border: 1px solid #003366;
+          border-radius: 8px;
+          padding: 0.5rem;
+          font-size: 1rem;
+          background: #f8fafd;
+          color: #080e10;
+        }
+        .submit-btn {
+          background: linear-gradient(90deg, #003366 60%, #00dc93 100%);
+          color: #fff;
+          border: none;
+          border-radius: 8px;
+          padding: 0.75rem 1.5rem;
+          font-size: 1.1rem;
+          font-weight: 600;
+          cursor: pointer;
+          margin-top: 1rem;
+          transition: background 0.2s;
+        }
+        .submit-btn:hover {
+          background: linear-gradient(90deg, #00dc93 0%, #003366 100%);
+        }
+        .thank-you {
+          text-align: center;
+          color: #003366;
+        }
+        @media (max-width: 600px) {
+          .consultation-modal {
+            padding: 1rem 0.5rem;
+          }
+          .form-row {
+            flex-direction: column;
+            gap: 0.5rem;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ConsultationModal;
diff --git a/components/common/Footer.js b/components/common/Footer.js
index 48968c5..ebae475 100644
--- a/components/common/Footer.js
+++ b/components/common/Footer.js
@@ -2,6 +2,7 @@ import Link from "next/link"
 import { TitleLogo } from "./Title"
 import { BsFacebook } from "react-icons/bs"
 import { AiFillBehanceCircle, AiFillInstagram, AiFillLinkedin } from "react-icons/ai"
+import Image from "next/image"
 
 const Footer = () => {
   return (
@@ -10,7 +11,13 @@ const Footer = () => {
         <div className='container'>
           <div className='grid-4'>
             <div className='logo'>
-              <TitleLogo title='creative' caption='7' className='logobg' />
+              <Image 
+                src="/Uburiza.png" 
+                alt="UBURIZA SOLUTIONS" 
+                width={200} 
+                height={70} 
+                className="footer-logo"
+              />
               <br />
               <span>
                 Questions? Reach us <br /> Monday – Friday from 9 am to 6 pm
@@ -85,7 +92,7 @@ const Footer = () => {
           </div>
           <div className='legal connect py'>
             <div className='text'>
-              <span>© 2023 THE SEVEN. ALL RIGHTS RESERVED.</span>
+              <span>© 2023 UBURIZA SOLUTIONS. ALL RIGHTS RESERVED.</span>
             </div>
             <div className='connect'>
               <span>GORKCODER COMPANY</span>
diff --git a/components/common/Header.js b/components/common/Header.js
index b097f1a..acb8149 100644
--- a/components/common/Header.js
+++ b/components/common/Header.js
@@ -4,10 +4,13 @@ import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import { RiMenu4Line } from "react-icons/ri"
 import { AiOutlineClose } from "react-icons/ai"
+import ConsultationModal from "./ConsultationModal";
+import Image from "next/image"
 
 const Header = () => {
   const [activeLink, setActiveLink] = useState("")
   const [open, setOpen] = useState(false)
+  const [showConsultation, setShowConsultation] = useState(false);
 
   const router = useRouter()
   useEffect(() => {
@@ -19,7 +22,13 @@ const Header = () => {
         <div className='container'>
           <div className='logo'>
             <Link href='/'>
-              <TitleLogo title='creative' caption='7' className='logomin' />
+              <Image 
+                src="/Uburiza.png" 
+                alt="UBURIZA SOLUTIONS" 
+                width={180} 
+                height={60} 
+                className="header-logo"
+              />
             </Link>
           </div>
           <nav className={open ? "openMenu" : "closeMenu"} onClick={() => setOpen(null)}>
@@ -44,11 +53,12 @@ const Header = () => {
             <Link href='/contact' className={activeLink == "/contact" ? "activeLink" : "none"}>
               Contact
             </Link>
-            <button className='button-primary'>book a consultation</button>
+            <button className='button-primary' onClick={() => setShowConsultation(true)}>Consultation</button>
           </nav>
           <button onClick={() => setOpen(!open)}>{open ? <AiOutlineClose size={25} /> : <RiMenu4Line size={25} />}</button>
         </div>
       </header>
+      <ConsultationModal isOpen={showConsultation} onClose={() => setShowConsultation(false)} />
     </>
   )
 }
diff --git a/components/common/Title.js b/components/common/Title.js
index 660f9ac..f06846b 100644
--- a/components/common/Title.js
+++ b/components/common/Title.js
@@ -1,11 +1,44 @@
-export const TitleLogo = ({ title, caption, className }) => {
+export const TitleLogo = ({ className }) => {
   return (
-    <h1 className={`${className}  title-logo`}>
-      <span>{caption}</span>
-      {title}
+    <h1 className={`${className} title-logo`}>
+      <span className="logo-text">UBURIZA SOLUTIONS</span>
+      <style jsx>{`
+        .title-logo {
+          font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
+          font-weight: 700;
+          letter-spacing: 2px;
+          font-size: 1.1rem;
+          color: #003366;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          margin: 0;
+          padding: 0;
+        }
+        .logo-text {
+          color: #003366;
+          background: linear-gradient(90deg, #003366 60%, #00dc93 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 1.1rem;
+          font-weight: 700;
+          letter-spacing: 3px;
+          margin: 0;
+          padding: 0;
+        }
+        @media (max-width: 600px) {
+          .title-logo {
+            font-size: 0.9rem;
+          }
+          .logo-text {
+            font-size: 0.9rem;
+          }
+        }
+      `}</style>
     </h1>
-  )
-}
+  );
+};
 
 export const TitleSm = ({ title }) => {
   return <h1 className='titleSm'>{title}</h1>
diff --git a/pages/agency.js b/pages/agency.js
index cb3794d..f4754f5 100644
--- a/pages/agency.js
+++ b/pages/agency.js
@@ -5,7 +5,7 @@ const AgencyPage = () => {
   return (
     <>
       <Head>
-        <title>About Agency</title>
+        <title>About Agency - UBURIZA SOLUTIONS</title>
       </Head>
       <Agency />
     </>
diff --git a/pages/blogs.js b/pages/blogs.js
index beb0820..66c7905 100644
--- a/pages/blogs.js
+++ b/pages/blogs.js
@@ -5,7 +5,7 @@ const Blogs = () => {
   return (
     <>
       <Head>
-        <title>Blog - 7Creative</title>
+        <title>Blog - UBURIZA SOLUTIONS</title>
       </Head>
       <Blog />
     </>
diff --git a/pages/contact.js b/pages/contact.js
index 7ef1537..32fc434 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -6,7 +6,7 @@ const contact = () => {
   return (
     <>
       <Head>
-        <title>Contact - 7Creative</title>
+        <title>Contact - UBURIZA SOLUTIONS</title>
       </Head>
       <Contact />
     </>
diff --git a/pages/index.js b/pages/index.js
index acace44..88ba8d2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <>
       <Head>
-        <title>7Creative Desgin</title>
+        <title>UBURIZA SOLUTIONS - Design</title>
       </Head>
       <Hero />
     </>
diff --git a/pages/services.js b/pages/services.js
index fddbc08..660cb38 100644
--- a/pages/services.js
+++ b/pages/services.js
@@ -6,7 +6,7 @@ const services = () => {
   return (
     <>
       <Head>
-        <title>Team - 7Creative</title>
+        <title>Services - UBURIZA SOLUTIONS</title>
       </Head>
       <Services />
     </>
diff --git a/pages/showcase.js b/pages/showcase.js
index 6d95279..7ecc2b9 100644
--- a/pages/showcase.js
+++ b/pages/showcase.js
@@ -6,7 +6,7 @@ const showcase = () => {
   return (
     <>
       <Head>
-        <title>ShowCase - 7Creative</title>
+        <title>ShowCase - UBURIZA SOLUTIONS</title>
       </Head>
       <ShowCase />
     </>
diff --git a/pages/team.js b/pages/team.js
index 3bdcf45..3d6ba0d 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -6,7 +6,7 @@ const team = () => {
   return (
     <>
       <Head>
-        <title>Team - 7Creative</title>
+        <title>Team - UBURIZA SOLUTIONS</title>
       </Head>
       <Team />
     </>
diff --git a/public/Uburiza.png b/public/Uburiza.png
new file mode 100644
index 0000000..b26264c
Binary files /dev/null and b/public/Uburiza.png differ
diff --git a/sections/Hero.js b/sections/Hero.js
index 0dfde51..55decdf 100644
--- a/sections/Hero.js
+++ b/sections/Hero.js
@@ -5,20 +5,44 @@ import ShowCase from "@/components/ShowCase"
 import Testimonial from "@/components/Testimonial"
 import { Title, TitleLogo, TitleSm } from "@/components/common/Title"
 import { BlogCard, Brand } from "@/components/router"
-import React from "react"
+import React, { useEffect, useState } from "react"
+import Image from "next/image"
 
 const Hero = () => {
+  const [animateServices, setAnimateServices] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimateServices(true);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <>
       <section className='hero'>
         <div className='container'>
-          <TitleLogo title='creative' caption='7' className='logobg' />
+          <Image 
+            src="/Uburiza.png" 
+            alt="UBURIZA SOLUTIONS" 
+            width={250} 
+            height={80} 
+            className="hero-logo"
+          />
           <h1 className='hero-title'>WE BUILD DIGITAL EXPERIENCES</h1>
 
           <div className='sub-heading'>
-            <TitleSm title='WEBSITES' /> <span>.</span>
-            <TitleSm title='BRANDING' /> <span>.</span>
-            <TitleSm title='DIGITAL MARKETING' />
+            <div className={`service-item ${animateServices ? 'slide-in' : ''}`}>
+              <TitleSm title='WEBSITES' />
+            </div>
+            <span className={`dot ${animateServices ? 'fade-in' : ''}`}>.</span>
+            <div className={`service-item ${animateServices ? 'slide-in' : ''}`} style={{animationDelay: '0.3s'}}>
+              <TitleSm title='BRANDING' />
+            </div>
+            <span className={`dot ${animateServices ? 'fade-in' : ''}`} style={{animationDelay: '0.6s'}}>.</span>
+            <div className={`service-item ${animateServices ? 'slide-in' : ''}`} style={{animationDelay: '0.9s'}}>
+              <TitleSm title='DIGITAL MARKETING' />
+            </div>
           </div>
         </div>
       </section>
diff --git a/styles/_color_palette.scss b/styles/_color_palette.scss
index 7d71da4..897bc43 100644
--- a/styles/_color_palette.scss
+++ b/styles/_color_palette.scss
@@ -1,9 +1,10 @@
-$indigo: #845aff;
+$indigo: #003366;
 $white: #ffffff;
 $dark: #080e10;
 $green: #00dc93;
-$gradient: linear-gradient(203deg, rgba(192, 90, 255, 1) 0%, rgba(67, 39, 158, 1) 100%);
-$gradient2: linear-gradient(250deg, rgba(255, 85, 219, 1) 24%, rgba(52, 108, 255, 1) 100%);
+$dark-blue: #003366;
+$gradient: linear-gradient(203deg, rgba(0, 51, 102, 1) 0%, rgba(0, 220, 147, 1) 100%);
+$gradient2: linear-gradient(250deg, rgba(0, 220, 147, 1) 24%, rgba(0, 51, 102, 1) 100%);
 
 .green {
   color: $green;
@@ -11,3 +12,6 @@ $gradient2: linear-gradient(250deg, rgba(255, 85, 219, 1) 24%, rgba(52, 108, 255
 .indigo {
   color: $indigo;
 }
+.dark-blue {
+  color: $dark-blue;
+}
diff --git a/styles/_common.scss b/styles/_common.scss
index 707caa9..3d59a9c 100644
--- a/styles/_common.scss
+++ b/styles/_common.scss
@@ -2,8 +2,8 @@
 
 .title-logo {
   font-size: $xl-6;
-  -webkit-text-stroke: 1px $white;
-  color: transparent;
+  -webkit-text-stroke: 1px #00dc93;
+  color: #003366;
   span {
     font-size: $xl-5;
     -webkit-text-stroke: $green;
@@ -18,18 +18,49 @@
 }
 .titleSm {
   font-size: $xl-3;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 2px;
+  color: #003366;
+  text-transform: uppercase;
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 30px;
+    height: 2px;
+    background: $green;
+    border-radius: 1px;
+  }
 }
 .title {
   font-size: $xl-5;
-  font-weight: 500;
-  background: $gradient2;
+  font-weight: 700;
+  background: linear-gradient(135deg, #003366 0%, #00dc93 100%);
   background-size: 100%;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -webkit-text-fill-color: transparent;
   -moz-text-fill-color: transparent;
+  background-clip: text;
+  color: #003366;
+  letter-spacing: 1px;
+  line-height: 1.3;
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(90deg, #00dc93, #003366);
+    border-radius: 2px;
+  }
 }
 .title-bg {
   font-size: 40px;
@@ -46,17 +77,84 @@
   cursor: pointer;
 }
 .secondary-button {
-  background-color: #171e20;
-  box-shadow: none;
-  color: $white;
+  background: linear-gradient(135deg, #171e20 0%, #2a3238 100%);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  color: #ffffff;
   padding: 20px 60px;
   font-size: $lg;
   text-transform: uppercase;
   letter-spacing: 2px;
-  box-shadow: rgba($dark, 5) 0px 7px 29px 0px;
-  transition: 0.5s ease-in-out;
+  font-weight: 600;
+  border-radius: 50px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(0, 220, 147, 0.1), transparent);
+    transition: left 0.6s ease;
+  }
+  
   &:hover {
     color: $green;
+    background: linear-gradient(135deg, #003366 0%, #004080 100%);
+    box-shadow: 0 12px 32px rgba(0, 51, 102, 0.3);
+    transform: translateY(-3px) scale(1.05);
+    
+    &::before {
+      left: 100%;
+    }
+  }
+  
+  &:active {
+    transform: translateY(-1px) scale(1.02);
+  }
+}
+.button-primary {
+  text-transform: none;
+  color: #003366;
+  padding: 16px 40px;
+  background: linear-gradient(135deg, #00dc93 0%, #00b377 100%);
+  font-size: $md;
+  font-weight: 600;
+  border-radius: 50px;
+  box-shadow: 0 8px 24px rgba(0, 220, 147, 0.2);
+  cursor: pointer;
+  letter-spacing: 0.5px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.6s ease;
+  }
+  
+  &:hover {
+    background: linear-gradient(135deg, #003366 0%, #004080 100%);
+    color: #fff;
+    box-shadow: 0 12px 32px rgba(0, 51, 102, 0.3);
+    transform: translateY(-3px) scale(1.05);
+    
+    &::before {
+      left: 100%;
+    }
+  }
+  
+  &:active {
+    transform: translateY(-1px) scale(1.02);
   }
 }
 .heading-title {
@@ -67,56 +165,152 @@
   padding-bottom: $xl-4;
   p {
     margin: $xl-6 0;
-    color: rgba($white, 0.5);
+    color: #6b7a90;
+    font-size: $lg;
+    line-height: 1.6;
+    font-weight: 400;
   }
+  color: #003366;
 }
+
 .card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+  box-shadow: 0 8px 32px rgba(0, 51, 102, 0.08);
+  border-radius: 20px;
+  border: 1px solid rgba(0, 220, 147, 0.08);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #00dc93, #003366);
+    transform: scaleX(0);
+    transition: transform 0.4s ease;
+  }
+  
+  &:hover {
+    box-shadow: 0 16px 48px rgba(0, 51, 102, 0.12);
+    transform: translateY(-8px) scale(1.02);
+    border-color: rgba(0, 220, 147, 0.2);
+    
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+  
   h1 {
     transition: 0.5s;
+    color: #003366;
+    font-weight: 600;
     &:hover {
       color: $green;
       cursor: pointer;
     }
   }
+  
   .card-img {
     margin-bottom: 30px;
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: 50px 0 50px 0;
+      border-radius: 16px;
+      transition: transform 0.4s ease;
+      
+      &:hover {
+        transform: scale(1.05);
+      }
     }
   }
+  
   a {
     display: flex;
     align-items: center;
     color: $indigo;
     text-transform: uppercase;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
     margin-top: $sm;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      color: $green;
+      transform: translateX(4px);
+    }
+    
     .link-icon {
       margin-left: $sm;
+      transition: transform 0.3s ease;
+    }
+    
+    &:hover .link-icon {
+      transform: translateX(4px);
     }
   }
+  
   span {
-    color: rgba($white, 0.4);
+    color: #6b7a90;
     margin-top: $xl-3;
     display: block;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
     font-size: $sm;
+    font-weight: 500;
+    text-transform: uppercase;
+    background: linear-gradient(135deg, #6b7a90, #8a9bb3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
+  
   ul {
     margin-top: $xl-6;
+    
+    li {
+      margin-bottom: $xl-2;
+      color: #2d3a4a;
+      opacity: 0.9;
+      font-size: $md;
+      line-height: 1.6;
+      position: relative;
+      padding-left: 20px;
+      
+      &::before {
+        content: '•';
+        color: $green;
+        font-weight: bold;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      
+      &:hover {
+        color: #003366;
+        transform: translateX(4px);
+        transition: all 0.3s ease;
+      }
+    }
   }
-  ul li {
-    margin-bottom: $xl-2;
-    opacity: 0.5;
-  }
+  
   .title-link {
     display: block !important;
-    color: $white;
+    color: #003366 !important;
     letter-spacing: 0px !important;
     text-transform: capitalize;
+    font-weight: 600;
+    font-size: $xl-2;
+    margin-bottom: $sm;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      color: $green !important;
+      transform: translateX(4px);
+    }
   }
 }
 
diff --git a/styles/_reset.scss b/styles/_reset.scss
index d9416b2..7226166 100644
--- a/styles/_reset.scss
+++ b/styles/_reset.scss
@@ -7,7 +7,7 @@
 body {
   font-family: "Poppins", sans-serif;
   background-color: $dark;
-  color: $white;
+  color: #2d3a4a;
 }
 .container {
   max-width: 90%;
@@ -16,7 +16,7 @@ body {
 
 a {
   text-decoration: none;
-  color: $white;
+  color: #003366;
   text-transform: capitalize;
 }
 textarea,
@@ -26,7 +26,7 @@ button {
   padding: 0;
   margin: 0;
   border: none;
-  color: $white;
+  color: #003366;
   outline: none;
 }
 .flex {
diff --git a/styles/global.scss b/styles/global.scss
index 7327b77..230f37d 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,43 +1,83 @@
+body {
+  background: #fff;
+  color: #080e10;
+}
 /*  Hero Section */
 .hero {
   text-align: center;
   padding: $xl-6 0;
   padding-top: $xll-3;
-  height: 90vh !important;
-  overflow: hidden !important;
+  min-height: 90vh !important;
+  background: linear-gradient(120deg, #e8f8f5 0%, #f8fafd 60%, #e6f7f1 100%);
   position: relative;
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -40%;
-    width: 180%;
-    height: 200vh;
-    background-image: url("../assets/images/art-top-cropp.jpg");
-    background-size: cover;
-    background-position: center;
-    z-index: -1;
-    overflow-x: hidden !important;
-  }
-  .hero-title {
-    font-size: $xll-3;
-    line-height: 115px;
-    font-weight: 600;
-    margin: $xl-6 0;
+  animation: fadeIn 1.2s ease;
+  overflow: hidden;
+}
+.hero::before {
+  content: "";
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #00dc93 0%, #003366 80%, transparent 100%);
+  opacity: 0.12;
+  z-index: 0;
+  animation: float 6s ease-in-out infinite alternate;
+}
+.hero-title {
+  color: #003366;
+  position: relative;
+  z-index: 1;
+  font-size: 4rem;
+  font-weight: 800;
+  letter-spacing: 3px;
+  margin: 2rem 0;
+  text-shadow: 2px 2px 4px rgba(0, 51, 102, 0.1);
+  animation: slideInFromTop 1.5s ease;
+}
+.sub-heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 3rem;
+  position: relative;
+  z-index: 1;
+}
+.service-item {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s ease;
+}
+.service-item.slide-in {
+  opacity: 1;
+  transform: translateY(0);
+}
+.dot {
+  opacity: 0;
+  color: #00dc93;
+  font-size: 2rem;
+  font-weight: bold;
+  transition: all 0.5s ease;
+}
+.dot.fade-in {
+  opacity: 1;
+}
+@keyframes slideInFromTop {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
   }
-  .sub-heading {
-    display: flex;
-    justify-content: center;
-    .titleSm {
-      margin: 0 $xl-1;
-    }
-    span {
-      font-size: $xll;
-      line-height: 0;
-      color: $green;
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+.sub-heading span {
+  color: #00dc93;
+}
 .hero-sec {
   position: relative;
   &::before {
@@ -58,56 +98,254 @@
   .card-img {
     height: 300px;
   }
+  .card {
+    border: 2px solid transparent;
+    background: linear-gradient(135deg, #fff 0%, #f8fafd 100%);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, #00dc93 0%, #003366 100%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 0;
+    }
+    
+    &:hover::before {
+      opacity: 0.05;
+    }
+    
+    .card-details {
+      position: relative;
+      z-index: 1;
+    }
+    
+    ul {
+      display: block !important;
+      opacity: 1 !important;
+      margin-top: 1rem;
+      
+      li {
+        color: #003366;
+        opacity: 0.8;
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
+        transition: color 0.3s ease;
+        
+        &:hover {
+          color: #00dc93;
+        }
+      }
+    }
+    
+    .title-link {
+      color: #003366 !important;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      display: block;
+      
+      &:hover {
+        color: #00dc93 !important;
+      }
+    }
+    
+    a {
+      color: #00dc93 !important;
+      font-weight: 500;
+      
+      &:hover {
+        color: #003366 !important;
+      }
+    }
+  }
 }
 
 //banner
 .banner {
   margin-top: $xll-3;
+  background: linear-gradient(135deg, #f4f8fb 0%, #e8f8f5 100%);
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(0, 220, 147, 0.03) 0%, rgba(0, 51, 102, 0.02) 100%);
+    z-index: 0;
+  }
+  
   .container {
-    border-radius: 50px 0 50px 0;
+    border-radius: 20px;
     padding: $xll;
-    background: rgb(192, 90, 255);
-    background: $gradient;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
     @include flex(center, space-between, none);
+    position: relative;
+    z-index: 1;
+    border: 1px solid rgba(0, 220, 147, 0.08);
+    box-shadow: 0 8px 32px rgba(0, 51, 102, 0.08);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover {
+      box-shadow: 0 16px 48px rgba(0, 51, 102, 0.12);
+      transform: translateY(-4px);
+      border-color: rgba(0, 220, 147, 0.2);
+    }
+    
+    h1 {
+      font-weight: 700;
+      background: linear-gradient(135deg, #003366 0%, #00dc93 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-size: $xl-5;
+      line-height: 1.3;
+      letter-spacing: 1px;
+    }
+    
+    button {
+      font-weight: 600;
+      letter-spacing: 1px;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0, 220, 147, 0.2);
+      }
+    }
   }
+  
+  animation: fadeIn 1.5s 0.2s ease backwards;
+}
+section, .card {
+  animation: fadeIn 1.2s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes float {
+  0% { transform: translateY(0) scale(1); }
+  100% { transform: translateY(30px) scale(1.05); }
 }
-
 //testimonial
 .testimonial {
   .card {
-    padding: 20px;
+    padding: 30px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+    border-radius: 20px;
+    border: 1px solid rgba(0, 220, 147, 0.08);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, #00dc93, #003366);
+      transform: scaleX(0);
+      transition: transform 0.4s ease;
+    }
+    
+    &:hover {
+      box-shadow: 0 16px 48px rgba(0, 51, 102, 0.12);
+      transform: translateY(-8px) scale(1.02);
+      border-color: rgba(0, 220, 147, 0.2);
+      
+      &::before {
+        transform: scaleX(1);
+      }
+    }
   }
+  
   .cards {
     margin-top: $xll;
+    
     p {
       margin-bottom: $xl-3;
       font-size: $xl;
-      line-height: $xl-5;
+      line-height: 1.7;
+      color: #2d3a4a;
+      font-weight: 400;
+      font-style: italic;
+      position: relative;
+      padding-left: 20px;
+      
+      &::before {
+        content: '"';
+        color: $green;
+        font-size: 2rem;
+        font-weight: bold;
+        position: absolute;
+        left: -10px;
+        top: -10px;
+        opacity: 0.6;
+      }
     }
+    
     .image {
       @include flex(center, none, none);
       margin-bottom: $xl-4;
+      
       .img {
         width: $xll-3;
         height: $xll-3;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 3px solid rgba(0, 220, 147, 0.2);
+        transition: all 0.3s ease;
+        
+        &:hover {
+          border-color: $green;
+          transform: scale(1.05);
+        }
+        
         img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           border-radius: 50%;
+          transition: transform 0.3s ease;
+          
+          &:hover {
+            transform: scale(1.1);
+          }
         }
       }
+      
       .img-text {
         margin-left: $xl-3;
+        
         h3 {
           font-size: $xl-2;
           margin-bottom: $s;
+          color: #003366;
+          font-weight: 600;
+          letter-spacing: 0.5px;
         }
+        
         span {
-          color: rgba($white, 0.5);
+          color: #6b7a90;
           text-transform: uppercase;
           font-size: $sm;
-          letter-spacing: 3px;
+          letter-spacing: 2px;
+          font-weight: 500;
+          background: linear-gradient(135deg, #6b7a90, #8a9bb3);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
         }
       }
     }
@@ -118,20 +356,143 @@
 .showcase {
   .card-img {
     height: 400px;
+    border-radius: 16px;
+    overflow: hidden;
+    
+    img {
+      transition: transform 0.4s ease;
+      
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
   }
+  
   .links {
     @include flex(none, flex-end, none);
+    
+    .card {
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+      border-radius: 20px;
+      border: 1px solid rgba(0, 220, 147, 0.08);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, #00dc93, #003366);
+        transform: scaleX(0);
+        transition: transform 0.4s ease;
+      }
+      
+      &:hover {
+        box-shadow: 0 16px 48px rgba(0, 51, 102, 0.12);
+        transform: translateY(-8px) scale(1.02);
+        border-color: rgba(0, 220, 147, 0.2);
+        
+        &::before {
+          transform: scaleX(1);
+        }
+      }
+      
+      a {
+        font-weight: 600;
+        letter-spacing: 1px;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          transform: translateX(8px);
+        }
+      }
+    }
   }
 }
 
 //brand
+.brand {
+  background: linear-gradient(135deg, #f8fafd 0%, #e8f8f5 100%);
+  padding: 60px 0;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(0, 220, 147, 0.03) 0%, rgba(0, 51, 102, 0.02) 100%);
+    z-index: 0;
+  }
+  
+  .container {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .heading-title {
+    .title {
+      background: linear-gradient(135deg, #003366 0%, #00dc93 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-weight: 600;
+      letter-spacing: 1px;
+    }
+  }
+}
+
 .brand-content {
-  img {
-    opacity: 0.5;
-    transition: 0.5s ease-in-out;
+  .images {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.08);
+    border: 1px solid rgba(0, 220, 147, 0.1);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(0, 220, 147, 0.1), transparent);
+      transition: left 0.6s ease;
+    }
+    
     &:hover {
-      opacity: 1;
-      cursor: pointer;
+      transform: translateY(-8px) scale(1.02);
+      box-shadow: 0 12px 40px rgba(0, 51, 102, 0.15);
+      border-color: rgba(0, 220, 147, 0.3);
+      
+      &::before {
+        left: 100%;
+      }
+    }
+    
+    img {
+      opacity: 0.8;
+      transition: all 0.4s ease;
+      filter: grayscale(30%);
+      max-height: 60px;
+      width: auto;
+      object-fit: contain;
+      
+      &:hover {
+        opacity: 1;
+        filter: grayscale(0%);
+        transform: scale(1.05);
+      }
     }
   }
 }
@@ -140,66 +501,180 @@
 .blog-card {
   .card {
     @include flex(none, space-between, none);
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+    border-radius: 20px;
+    border: 1px solid rgba(0, 220, 147, 0.08);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, #00dc93, #003366);
+      transform: scaleX(0);
+      transition: transform 0.4s ease;
+    }
+    
+    &:hover {
+      box-shadow: 0 16px 48px rgba(0, 51, 102, 0.12);
+      transform: translateY(-8px) scale(1.02);
+      border-color: rgba(0, 220, 147, 0.2);
+      
+      &::before {
+        transform: scaleX(1);
+      }
+    }
+    
     .card-img {
       width: 40%;
       height: 250px;
+      border-radius: 16px;
+      overflow: hidden;
+      
+      img {
+        transition: transform 0.4s ease;
+        
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
     }
+    
     .card-details {
       width: 55%;
       padding: $xll 0;
+      
+      .title-link {
+        font-size: $xl-3;
+        font-weight: 700;
+        margin-bottom: $sm;
+        line-height: 1.3;
+      }
+      
+      span {
+        font-weight: 600;
+        letter-spacing: 1px;
+        background: linear-gradient(135deg, #6b7a90, #8a9bb3);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
     }
   }
 }
 
 // footer
 footer {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+  color: #003366;
   position: relative;
   padding: $xll-3 0 0 0;
-  border-top: 1px solid rgba($white, 0.2);
+  border-top: 1px solid rgba(0, 51, 102, 0.1);
   overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(0, 220, 147, 0.02) 0%, rgba(0, 51, 102, 0.01) 100%);
+    z-index: 0;
+  }
+  
+  .container {
+    position: relative;
+    z-index: 1;
+  }
+  
   .logobg {
     line-height: 0;
     padding-top: $xl-1;
     margin-bottom: $xll;
   }
+  
   h3 {
-    font-weight: 400;
-    letter-spacing: 2px;
+    font-weight: 600;
+    letter-spacing: 1px;
     font-size: $lg;
     margin-bottom: $xl-6;
+    color: #003366;
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+      width: 30px;
+      height: 2px;
+      background: linear-gradient(90deg, #00dc93, #003366);
+      border-radius: 1px;
+    }
   }
+  
   span,
   p {
-    color: rgba($white, 0.5);
+    color: #6b7a90;
+    font-weight: 400;
+    line-height: 1.6;
   }
+  
   ul li a {
-    color: rgba($white, 0.5);
-    transition: 0.5s ease-in-out;
+    color: #6b7a90;
+    transition: all 0.3s ease;
     margin-bottom: $xl-2;
     display: block;
+    font-weight: 400;
+    position: relative;
+    padding-left: 0;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 0;
+      height: 1px;
+      background: $green;
+      transition: width 0.3s ease;
+      transform: translateY(-50%);
+    }
+    
     &:hover {
       color: $green;
+      transform: translateX(8px);
+      
+      &::before {
+        width: 20px;
+      }
     }
   }
+  
   .connect {
     @include flex(center, space-between, none);
+    
     span {
       font-size: $sm;
-      letter-spacing: 2px;
+      letter-spacing: 1px;
+      color: #6b7a90;
+      font-weight: 500;
+      transition: color 0.3s ease;
+      
+      &:hover {
+        color: $green;
+      }
     }
   }
+  
   &::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100% !important;
-    height: 60vh;
-    background-image: url("../assets/images/blurfooter-min.png");
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    z-index: -1;
+    display: none;
   }
 }
 
@@ -223,18 +698,79 @@ footer {
 .agency {
   .content {
     margin-top: $xll;
+    
     h1 {
       font-size: $xl-6;
+      font-weight: 700;
+      background: linear-gradient(135deg, #003366 0%, #00dc93 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
+    
     .box {
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+      border-radius: 16px;
+      padding: 30px;
+      border: 1px solid rgba(0, 220, 147, 0.08);
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, #00dc93, #003366);
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+      }
+      
+      &:hover {
+        box-shadow: 0 12px 32px rgba(0, 51, 102, 0.1);
+        transform: translateY(-4px);
+        border-color: rgba(0, 220, 147, 0.2);
+        
+        &::before {
+          transform: scaleX(1);
+        }
+      }
+      
       h1 {
         font-size: 60px;
-        font-weight: 400;
+        font-weight: 700;
+        background: linear-gradient(135deg, #003366 0%, #00dc93 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 10px;
+      }
+      
+      h3 {
+        font-weight: 600;
+        color: #003366;
+        font-size: $lg;
+        letter-spacing: 0.5px;
       }
     }
+    
     .misson-p {
-      border-left: 5px solid $indigo;
+      border-left: 4px solid $indigo;
       padding-left: $xl-5;
+      background: linear-gradient(135deg, rgba(0, 51, 102, 0.02) 0%, rgba(0, 220, 147, 0.02) 100%);
+      border-radius: 0 12px 12px 0;
+      padding: 20px 30px;
+      margin: 20px 0;
+      
+      p {
+        color: #2d3a4a;
+        font-weight: 400;
+        line-height: 1.7;
+        font-size: $lg;
+      }
     }
   }
 }
@@ -252,54 +788,148 @@ footer {
 .contact {
   .left {
     padding-right: 60px;
+    
     ul {
       @include flex(center, space-between, none);
       margin-top: $xll;
     }
+    
     .icon {
       width: 50px;
       height: 50px;
-      border: 1px solid rgba($white, 0.2);
-      border-radius: 10px 0 10px 0;
+      border: 2px solid rgba(0, 51, 102, 0.1);
+      border-radius: 12px;
       @include flex(center, center, none);
+      color: #003366;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+      transition: all 0.3s ease;
+      
+      &:hover {
+        border-color: $green;
+        transform: scale(1.05);
+        box-shadow: 0 8px 24px rgba(0, 220, 147, 0.15);
+      }
     }
+    
     .box {
       margin-bottom: $xll;
+      padding: 20px;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fafd 100%);
+      border-radius: 16px;
+      border: 1px solid rgba(0, 220, 147, 0.08);
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: linear-gradient(90deg, #00dc93, #003366);
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+      }
+      
+      &:hover {
+        box-shadow: 0 12px 32px rgba(0, 51, 102, 0.1);
+        transform: translateY(-4px);
+        border-color: rgba(0, 220, 147, 0.2);
+        
+        &::before {
+          transform: scaleX(1);
+        }
+      }
+      
       .icons {
         color: $green;
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+        display: block;
       }
+      
       h3 {
         padding: $xl-2 0;
+        color: #003366;
+        font-weight: 600;
+        font-size: $lg;
+        margin-bottom: 8px;
       }
+      
       span {
-        opacity: 0.5;
+        color: #6b7a90;
+        opacity: 0.9;
+        font-weight: 400;
+        line-height: 1.6;
+        font-size: $md;
       }
     }
   }
+  
   .right {
-    border-radius: 50px 0 50px 0;
+    border-radius: 20px;
     padding: $xll;
-    background-color: #171e20;
+    background: linear-gradient(135deg, #f8fafd 0%, #ffffff 100%);
+    border: 1px solid rgba(0, 220, 147, 0.08);
+    box-shadow: 0 8px 32px rgba(0, 51, 102, 0.08);
+    
     form {
       margin-top: $xll;
     }
+    
     .inputs {
       margin-bottom: $xl-6;
+      
       span {
         text-transform: uppercase;
+        color: #003366;
+        font-weight: 600;
+        font-size: $sm;
+        letter-spacing: 1px;
+        margin-bottom: 8px;
+        display: block;
       }
+      
       textarea,
       input {
         width: 100%;
         background-color: $white;
-        padding: 15px;
+        padding: 16px;
         margin-top: $sm;
-        color: $dark;
+        color: #2d3a4a;
+        border: 2px solid rgba(0, 51, 102, 0.08);
+        border-radius: 12px;
+        font-size: $md;
+        font-weight: 400;
+        transition: all 0.3s ease;
+        
+        &:focus {
+          outline: none;
+          border-color: $green;
+          box-shadow: 0 0 0 3px rgba(0, 220, 147, 0.1);
+          transform: translateY(-2px);
+        }
+        
+        &::placeholder {
+          color: #6b7a90;
+          opacity: 0.7;
+        }
       }
     }
+    
     button {
       width: 100%;
       padding: 18px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0, 220, 147, 0.2);
+      }
     }
   }
 }
@@ -313,7 +943,98 @@ footer {
   }
 }
 
+.header-logo {
+  object-fit: contain;
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.footer-logo {
+  object-fit: contain;
+  margin-bottom: 1rem;
+}
+
+.hero-logo {
+  object-fit: contain;
+  margin-bottom: 2.5rem;
+  animation: fadeIn 1s ease;
+  width: 38vw;
+  max-width: 420px;
+  min-width: 120px;
+  height: auto;
+  aspect-ratio: 2.8/1;
+  box-shadow: 0 8px 32px rgba(0, 220, 147, 0.18), 0 0 32px 4px rgba(0, 51, 102, 0.10);
+  filter: drop-shadow(0 0 32px #00dc93) drop-shadow(0 0 16px #003366);
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: scale(1.02);
+    filter: drop-shadow(0 0 40px #00dc93) drop-shadow(0 0 20px #003366);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .hero-logo {
+    width: 48vw;
+    max-width: 380px;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .hero-logo {
+    width: 56vw;
+    max-width: 320px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .hero-logo {
+    width: 70vw;
+    max-width: 260px;
+    margin-bottom: 2rem;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .hero-logo {
+    width: 80vw;
+    max-width: 200px;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .hero-logo {
+    width: 90vw;
+    max-width: 150px;
+    margin-bottom: 1rem;
+  }
+}
+
 @media screen and (max-width: 800px) {
+  .header-logo {
+    width: 140px !important;
+    height: 50px !important;
+  }
+  
+  .footer-logo {
+    width: 160px !important;
+    height: 60px !important;
+  }
+  
+  .hero-logo {
+    width: 260px !important;
+    height: 90px !important;
+  }
   .banner {
     .container {
       @include flex(center, none, column);
@@ -373,4 +1094,17 @@ footer {
       flex-direction: column;
     }
   }
+  .brand {
+    padding: 40px 0;
+    
+    .brand-content {
+      .images {
+        padding: 15px;
+        
+        img {
+          max-height: 50px;
+        }
+      }
+    }
+  }
 }
diff --git a/styles/header.scss b/styles/header.scss
index 04aa8bf..d270192 100644
--- a/styles/header.scss
+++ b/styles/header.scss
@@ -1,4 +1,5 @@
 header {
+  background: #fff;
   padding: $s 0;
   border-bottom: 1px solid rgba($white, 0.2);
   position: sticky;
@@ -8,9 +9,18 @@ header {
   .container {
     @include flex(center, space-between, none);
     nav {
+      background: transparent;
+      display: flex;
+      align-items: center;
       a {
         margin: 0 $xl-2;
       }
+      .button-primary {
+        margin-left: 2rem;
+        margin-right: 0;
+        width: auto;
+        align-self: center;
+      }
     }
   }
 }
@@ -31,14 +41,21 @@ header {
 @media screen and (max-width: 800px) {
   header {
     nav {
-      display: none;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      .button-primary {
+        align-self: flex-end;
+        width: auto;
+        margin: 10px 0 0 0;
+      }
     }
     .openMenu {
       position: absolute;
       top: 75px;
       left: 0;
       width: 100%;
-      height: 40vh;
+      height: auto;
       padding: 20px;
       background: $dark;
       display: flex;
@@ -50,9 +67,11 @@ header {
         display: flex;
         margin-bottom: 30px !important;
       }
-    }
-    .button-primary {
-      display: none;
+      .button-primary {
+        align-self: flex-end;
+        width: auto;
+        margin: 10px 0 0 0;
+      }
     }
   }
   .activeLink {