diff --git a/assets/css/style.css b/assets/css/style.css
index 021f2f83..bfc0e3a0 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -321,7 +321,10 @@ body.nav-active { overflow: hidden; }
   #HEADER
 \*-----------------------------------*/
 
-.header .btn { display: none; }
+
+.header .btn { 
+  display: none; 
+}
 
 .header {
   position: absolute;
@@ -351,6 +354,10 @@ body.nav-active { overflow: hidden; }
   align-items: center;
 }
 
+.nav-open-btn,
+.nav-close-btn { 
+  font-size: 32px; 
+}
 
 
 .navbar {
@@ -373,25 +380,69 @@ body.nav-active { overflow: hidden; }
   transform: translateX(320px);
 }
 
-.navbar-top { margin-block-end: 34px; }
+.navbar-top { 
+  margin-block-end: 34px; 
+}
+
+.nav-close-btn ion-icon { 
+  --ionicon-stroke-width: 35px; 
+}
 
-.nav-close-btn ion-icon { --ionicon-stroke-width: 35px; }
 
-.nav-close-btn{
-  margin:0px;
+.navbar-item:not(:last-child) { 
+  border-block-end: 1px solid var(--black_10); 
 }
 
-.navbar-item:not(:last-child) { border-block-end: 1px solid var(--black_10); }
 
 .navbar-link {
   padding-block: 8px;
   transition: var(--transition);
+  color: var(--black); 
+  text-decoration: none;
+  display: inline-block;
+  position: relative;
+  perspective: 500px; 
 }
 
-.navbar-link:is(:hover, :focus-visible) { 
-  color: var(--oxford-blue);
+
+.navbar-link:hover {
+  transform: translateZ(15px) scale(1.05); 
+  background-color: #FF8086; 
+  color: white; 
+  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+}
+
+
+.active-page {
+  color: #FF8086; 
+  font-weight: bold; 
+  transform: translateZ(15px) scale(1.05); 
+}
+
+/* Remove box shadow on hover */
+.navbar-link:hover::before {
+  box-shadow: none;
+}
+
+
+.navbar-link {
+  box-shadow: none; 
+}
+
+
+.btn-secondary {
+  transition: transform 0.3s ease;
+  background-color: var(--btn-bg-color); 
+  padding: 12px 25px;
+  color: white;
 }
 
+.btn-secondary:hover {
+  transform: translateZ(15px) scale(1.05); 
+  background-color: var(--btn-hover-color); 
+}
+
+
 .overlay {
   position: fixed;
   top: 0;
@@ -410,6 +461,24 @@ body.nav-active { overflow: hidden; }
 }
 
 
+:root {
+  --primary-color: #ff6347; 
+  --black: #000;
+  --white: #fff; 
+  --btn-bg-color: #000; 
+  --btn-hover-color: #444; 
+  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.1); 
+  --transition: all 0.3s ease; 
+  --cubic-in: cubic-bezier(0.4, 0, 0.2, 1);
+  --cubic-out: cubic-bezier(0.0, 0, 0.2, 1); 
+}
+
+
+
+
+
+
+
 
 
 
diff --git a/assets/js/script.js b/assets/js/script.js
index 19defdb6..10f33858 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,6 +1,4 @@
-'use strict';
-
-
+"use strict";
 
 /**
  * add eventListener on multiple elements
@@ -10,9 +8,7 @@ const addEventOnElements = function (elements, eventType, callback) {
   for (let i = 0, len = elements.length; i < len; i++) {
     elements[i].addEventListener(eventType, callback);
   }
-}
-
-
+};
 
 /**
  * PRELOADER
@@ -27,8 +23,6 @@ window.addEventListener("load", function () {
   document.body.classList.add("loaded");
 });
 
-
-
 /**
  * NAVBAR TOGGLER FOR MOBILE
  */
@@ -41,15 +35,13 @@ const toggleNavbar = function () {
   navbar.classList.toggle("active");
   overlay.classList.toggle("active");
   document.body.classList.toggle("nav-active");
-}
+};
 
 addEventOnElements(navTogglers, "click", toggleNavbar);
 
-
-
 /**
  * HEADER
- * 
+ *
  * add active class on header when window scroll down to 100px
  */
 
@@ -61,10 +53,10 @@ const headerActive = function () {
   } else {
     header.classList.remove("active");
   }
-}
 
 // dynamically updating year in footer for copyright
 document.getElementById('year').textContent = new Date().getFullYear();
 
 
-window.addEventListener("scroll", headerActive);
\ No newline at end of file
+window.addEventListener("scroll", headerActive);
+