diff --git a/public/bg-video2.mp4 b/public/bg-video2.mp4
new file mode 100644
index 0000000..8c1c17d
Binary files /dev/null and b/public/bg-video2.mp4 differ
diff --git a/public/port2.mp4 b/public/port2.mp4
new file mode 100644
index 0000000..ea68851
Binary files /dev/null and b/public/port2.mp4 differ
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 5a7b427..eba65f4 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -6,7 +6,7 @@ export default function Footer({ footerRef }) {
     <footer 
       id="footer" 
       ref={footerRef}  
-      className="bg-[#5C739B] text-white py-10 px-6">
+      className="bg-[#2c415e] text-white py-10 px-6">
         
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8">
 
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index c01b000..275da81 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -8,7 +8,7 @@ export default function Hero() {
         playsInline
         className="absolute inset-0 w-full h-full object-cover"
       >
-        <source src="/bg-video.mp4" type="video/mp4" />
+        <source src="/bg-video2.mp4" type="video/mp4" />
       </video>
       <div className="absolute inset-0 bg-black/50"></div>
 
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 64b33f8..2aaac51 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -4,7 +4,7 @@ import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
 
 export default function Navbar() {
-  const [mobileMenu, setMobileMenu] = useState(false); // toggle mobile
+  const [mobileMenu, setMobileMenu] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
@@ -31,7 +31,9 @@ export default function Navbar() {
     }
   }, [location]);
 
-  const linkClass = `block px-4 py-2 hover:text-yellow-400 transition-colors`;
+  // Dasar class link
+  const baseLink =
+    "block px-4 py-2 transition-colors hover:text-[#00CAFF]";
 
   // Klik About Us → scroll atau pindah halaman
   const handleAboutClick = (e) => {
@@ -52,7 +54,11 @@ export default function Navbar() {
       <nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
         {/* Logo */}
         <div className="flex items-center space-x-2">
-          <img src="/Finals_Icon.png" alt="logo" className="h-7 w-auto object-contain" />
+          <img
+            src="/Finals_Icon.png"
+            alt="logo"
+            className="h-7 w-auto object-contain"
+          />
           <span
             className={`text-lg font-bold transition-colors duration-300 ${
               scrolled ? "text-black" : "text-white"
@@ -69,29 +75,47 @@ export default function Navbar() {
           }`}
         >
           <li>
-            <HashLink smooth to="/#" className={linkClass}>
+            <HashLink
+              smooth
+              to="/#"
+              className={`${baseLink} ${
+                location.pathname === "/" && !location.hash
+                  ? "text-[#00CAFF] font-semibold"
+                  : ""
+              }`}
+            >
               Home
             </HashLink>
           </li>
-
-          {/* Portofolio link biasa */}
           <li>
-            <NavLink to="/portofolio" className={linkClass}>
+            <NavLink
+              to="/portofolio"
+              className={({ isActive }) =>
+                `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+              }
+            >
               Portofolio
             </NavLink>
           </li>
-
           <li>
             <NavLink
               to="/about"
-              className={linkClass}
               onClick={handleAboutClick}
+              className={({ isActive }) =>
+                `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+              }
             >
               About Us
             </NavLink>
           </li>
           <li>
-            <HashLink smooth to="/#footer" className={linkClass}>
+            <HashLink
+              smooth
+              to="/#footer"
+              className={`${baseLink} ${
+                location.hash === "#footer" ? "text-[#00CAFF] font-semibold" : ""
+              }`}
+            >
               Contact Us
             </HashLink>
           </li>
@@ -127,28 +151,36 @@ export default function Navbar() {
                 smooth
                 to="/#"
                 onClick={() => setMobileMenu(false)}
-                className={linkClass}
+                className={`${baseLink} ${
+                  location.pathname === "/" && !location.hash
+                    ? "text-[#00CAFF] font-semibold"
+                    : ""
+                }`}
               >
                 Home
               </HashLink>
             </li>
-
-            {/* Portofolio link biasa mobile */}
             <li>
               <NavLink
                 to="/portofolio"
                 onClick={() => setMobileMenu(false)}
-                className={linkClass}
+                className={({ isActive }) =>
+                  `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+                }
               >
                 Portofolio
               </NavLink>
             </li>
-
             <li>
               <NavLink
                 to="/about"
-                onClick={handleAboutClick}
-                className={linkClass}
+                onClick={(e) => {
+                  handleAboutClick(e);
+                  setMobileMenu(false);
+                }}
+                className={({ isActive }) =>
+                  `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+                }
               >
                 About Us
               </NavLink>
@@ -158,7 +190,11 @@ export default function Navbar() {
                 smooth
                 to="/#footer"
                 onClick={() => setMobileMenu(false)}
-                className={linkClass}
+                className={`${baseLink} ${
+                  location.hash === "#footer"
+                    ? "text-[#00CAFF] font-semibold"
+                    : ""
+                }`}
               >
                 Contact Us
               </HashLink>
@@ -168,4 +204,4 @@ export default function Navbar() {
       )}
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Produk.jsx b/src/components/Produk.jsx
index 327a71d..05fbcdf 100644
--- a/src/components/Produk.jsx
+++ b/src/components/Produk.jsx
@@ -4,38 +4,41 @@ import { motion } from "framer-motion";
 export default function Produk() {
   const products = [
     {
-      icon: <Wifi className="w-8 h-8 text-blue-600" />,
+      icon: <Wifi className="w-8 h-8 text-[#145BB5]" />,
       title: "FNET LastMile Connection",
       desc: "Solusi bagi penyedia layanan internet untuk melayani pelanggan Last Mile tanpa harus membangun jaringan fiber optic sendiri.",
-      gradient: "from-blue-500/20 to-blue-100/40"
+      gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
+      whiteBox: false
     },
     {
-      icon: <Network className="w-8 h-8 text-yellow-500" />,
+      icon: <Network className="w-8 h-8 text-[#00BFFF]" />,
       title: "FNET Metro Link",
       desc: "Layanan jaringan serat optik Point to Point dan Point to Multi Point dengan kapasitas tinggi dan infrastruktur handal.",
-      gradient: "from-yellow-400/30 to-yellow-100/40"
+      // tidak pakai gradient → putih polos
+      gradient: "",
+      whiteBox: true
     },
     {
-      icon: <Cog className="w-8 h-8 text-blue-700" />,
+      icon: <Cog className="w-8 h-8 text-[#145BB5]" />,
       title: "FNET EPC Solution",
       desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.",
-      gradient: "from-blue-300/40 to-blue-100/30"
+      gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
+      whiteBox: false
     }
   ];
 
   return (
     <section id="produk" className="relative py-20 overflow-hidden text-center">
-      {/* Animated Background Gradient */}
+      {/* Background animasi biru */}
       <motion.div
-        className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 bg-[length:400%_400%]"
+        className="absolute inset-0 bg-gradient-to-r from-[#145BB5] via-[#00BFFF] to-[#145BB5] bg-[length:400%_400%]"
         animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}
         transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
       ></motion.div>
-      {/* Overlay biar teks tetap jelas */}
       <div className="absolute inset-0 bg-white/95"></div>
 
       <div className="relative z-10">
-        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-color-rgb(20,91,181)">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#145BB5]">
           Produk
         </h2>
         <p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4">
@@ -50,13 +53,15 @@ export default function Produk() {
               key={i}
               whileHover={{ y: -8, scale: 1.03 }}
               transition={{ duration: 0.4, ease: "easeOut" }}
-              className={`bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-gray-100 hover:border-blue-300`}
+              className="bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-[#145BB5]/10 hover:border-[#00BFFF]/40"
             >
-              {/* Gradient overlay per-card */}
-              <div
-                className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
-              ></div>
-              {/* Icon Circle */}
+              {/* gradient overlay hanya kalau whiteBox = false */}
+              {!item.whiteBox && (
+                <div
+                  className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
+                ></div>
+              )}
+
               <div className="relative z-10 w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center bg-white shadow-md">
                 {item.icon}
               </div>
@@ -70,4 +75,4 @@ export default function Produk() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 5b9a0df..e4053be 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -16,7 +16,6 @@ export default function About() {
 
   return (
     <div className="font-sans">
-      {/* Navbar */}
       <Navbar />
 
       {/* Hero Section */}
@@ -27,42 +26,38 @@ export default function About() {
       />
 
       {/* About Section */}
-      <section className="py-20 bg-gray-50 min-h-screen">
+      {/* Ganti warna bg jadi sama seperti halaman Produk */}
+      <section className="py-20 bg-[#eaf2ff] min-h-screen">
         <div className="max-w-6xl mx-auto px-6 lg:px-20 space-y-16">
-          {/* Card Deskripsi Perusahaan dengan Logo */}
+
+          {/* Card Deskripsi Perusahaan */}
           <motion.div
-            className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
+            className="bg-white rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7 }}
             viewport={{ once: true }}
-            whileHover={{
-              scale: 1.02,
-              y: -3,
-              boxShadow: "0 20px 30px rgba(0,0,0,0.08)",
-              transition: { type: "spring", stiffness: 200, damping: 20 },
-            }}
+            whileHover={cardHover}
           >
-            {/* Logo di kiri */}
+            {/* Logo */}
             <div className="flex justify-center md:justify-start flex-shrink-0">
-              <img
-                src="/Finals_Profile.png"
-                alt="Logo WTELL"
-                className="w-44 md:w-56"
-              />
+              <img src="/Finals_Profile.png" alt="Logo Fortiva" className="w-44 md:w-56" />
             </div>
 
-            {/* Deskripsi di kanan */}
+            {/* Deskripsi */}
             <div className="text-center md:text-left">
-              <h2 className="text-3xl font-bold text-color-rgb(20,91,181)">
+              <h2 className="text-3xl font-bold text-blue-700">
                 PT. Jaringan Citra Mandiri
               </h2>
               <p className="text-gray-700 leading-relaxed mb-4">
-                Adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
-                Teknologi Telekomunikasi Berbasis Fiber Optic.
+                Adalah Perusahaan Swasta yang bergerak di bidang Penyedia
+                Layanan Teknologi Telekomunikasi Berbasis Fiber Optic.
               </p>
               <p className="text-gray-700 leading-relaxed">
-                Berdiri sejak tahun 2018, <span className="font-semibold text-color-rgb(20,91,181)">Fortiva Networking</span>{" "}
+                Berdiri sejak tahun 2018,{" "}
+                <span className="font-semibold text-blue-700">
+                  Fortiva Networking
+                </span>{" "}
                 berkomitmen menjadi Penyedia Layanan Teknologi Telekomunikasi
                 Berbasis Fiber Optic yang Handal dan Profesional.
               </p>
@@ -71,7 +66,6 @@ export default function About() {
 
           {/* Visi & Misi */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
-            {/* Visi */}
             <motion.section
               className="bg-white rounded-2xl p-8 cursor-pointer"
               whileHover={cardHover}
@@ -80,14 +74,15 @@ export default function About() {
               transition={{ duration: 0.7 }}
               viewport={{ once: true }}
             >
-              <h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
+              <h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
+                VISI
+              </h3>
               <p className="text-gray-700 text-center leading-relaxed">
                 Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
                 Menghubungkan Seluruh Wilayah di Indonesia.
               </p>
             </motion.section>
 
-            {/* Misi */}
             <motion.section
               className="bg-white rounded-2xl p-8 cursor-pointer"
               whileHover={cardHover}
@@ -96,7 +91,9 @@ export default function About() {
               transition={{ duration: 0.7 }}
               viewport={{ once: true }}
             >
-              <h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
+              <h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
+                MISI
+              </h3>
               <ul className="space-y-4 text-gray-700">
                 <li className="flex items-start gap-2">
                   <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
@@ -119,8 +116,7 @@ export default function About() {
         </div>
       </section>
 
-      {/* Footer */}
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Portfolio.jsx b/src/pages/Portfolio.jsx
index 4e19162..7064fd7 100644
--- a/src/pages/Portfolio.jsx
+++ b/src/pages/Portfolio.jsx
@@ -149,7 +149,7 @@ export default function Portfolio() {
       <section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
         <video
           className="absolute inset-0 w-full h-full object-cover"
-          src="/port.mp4"
+          src="/port2.mp4"
           autoPlay
           loop
           muted
@@ -231,7 +231,6 @@ export default function Portfolio() {
         </div>
       )}
 
-      {/* Tambahkan Footer */}
       <Footer />
     </div>
   );
@@ -254,7 +253,8 @@ function PortfolioCard({ image, title, shortDesc, onClick }) {
       </div>
 
       <div className="p-6 flex flex-col flex-grow">
-        <h3 className="text-lg font-bold bg-gradient-to-r from-indigo-600 to-blue-500 bg-clip-text text-transparent">
+        {/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */}
+        <h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
           {title}
         </h3>
 
@@ -271,4 +271,4 @@ function PortfolioCard({ image, title, shortDesc, onClick }) {
       </div>
     </motion.div>
   );
-}
\ No newline at end of file
+}