diff --git a/public/assets/css/demo-elegant/demo-elegant.css b/public/assets/css/demo-elegant/demo-elegant.css
index 30b0b2b..565c7b0 100644
--- a/public/assets/css/demo-elegant/demo-elegant.css
+++ b/public/assets/css/demo-elegant/demo-elegant.css
@@ -34,26 +34,10 @@
   );
   --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   color: var(--color-dark-1);
   font-family: var(--font-global);
   font-size: 16px;
@@ -81,7 +65,8 @@
   letter-spacing: 0;
 } */
 .theme-elegant .main-nav.dark-mode {
-  background-color: rgba(30, 30, 30, 0.905);
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
+  /* background-color: rgba(30, 30, 30, 0.905); */
 }
 .theme-elegant .form label {
   margin-bottom: 15px;
diff --git a/public/assets/css/demo-slick/demo-slick.css b/public/assets/css/demo-slick/demo-slick.css
index fc583fc..42c796e 100644
--- a/public/assets/css/demo-slick/demo-slick.css
+++ b/public/assets/css/demo-slick/demo-slick.css
@@ -57,39 +57,21 @@
   );
   --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
   --border-radius-default: 10px;
-  --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05),
-    0px 1px 1px 0px rgba(30, 36, 50, 0.03),
+  --box-shadow:
+    0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
     0px 3px 5px 0px rgba(30, 36, 50, 0.03);
-  --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08),
-    0px 1px 1px 0px rgba(30, 36, 50, 0.06),
+  --box-shadow-strong:
+    0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
     0px 3px 5px 0px rgba(30, 36, 50, 0.06);
-  --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07),
-    0px 0px 1px 0px rgba(30, 36, 50, 0.1);
-  --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14),
-    0px 0px 1px 0px rgba(30, 36, 50, 0.15);
+  --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
+  --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
   color: var(--color-dark-1);
   font-family: var(--font-global);
   font-size: 17px;
@@ -132,26 +114,10 @@
     var(--color-primary-2) 67%,
     var(--color-primary-1) 100%
   );
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
 }
 .theme-slick h1,
 .theme-slick h2,
@@ -220,10 +186,12 @@
   opacity: 0.9;
 }
 .theme-slick .main-nav.dark {
-  background-color: rgba(16, 24, 40, 0.8777);
+  /* background-color: rgba(16, 24, 40, 0.8777); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .theme-slick .main-nav.dark-mode {
-  background-color: rgba(55, 63, 78, 0.9);
+  /* background-color: rgba(55, 63, 78, 0.9); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .theme-slick .inner-nav ul {
   font-size: 16px;
@@ -255,12 +223,7 @@
 .theme-slick .inner-nav > ul > li > a.active:before {
   transform: scaleX(1);
 }
-.theme-slick
-  .main-nav.mobile-on
-  .inner-nav
-  > ul
-  > li
-  > a:not(.no-hover):before {
+.theme-slick .main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before {
   display: none;
 }
 .theme-slick .mn-sub {
@@ -473,7 +436,9 @@
 .theme-slick .scroll-down-1-text {
   font-weight: 500;
   opacity: 0.7;
-  transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2);
+  transition:
+    opacity 0.4s ease,
+    transform 0.4s var(--ease-elastic-2);
 }
 .theme-slick .typewrite .wrap:after {
   font-size: 0.9em;
@@ -487,18 +452,10 @@
 }
 .theme-slick .light-content .section-caption-slick {
   color: #fff;
-  background-image: linear-gradient(
-    45deg,
-    rgba(5, 16, 38, 0.75) 0%,
-    transparent 100%
-  );
+  background-image: linear-gradient(45deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
 }
 .theme-slick .light-content .section-caption-fancy {
-  background-image: linear-gradient(
-    15deg,
-    rgba(5, 16, 38, 0.75) 0%,
-    transparent 100%
-  );
+  background-image: linear-gradient(15deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
 }
 .theme-slick .section-title {
   font-size: 48px !important;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 3902096..238c61c 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -238,10 +238,10 @@ Primary use: Multipurpose Template
   --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   --border-radius-default: 4px;
   --border-radius-large: 30px;
-  --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
-  --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.06);
+  --box-shadow:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
+  --box-shadow-strong:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
   --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
   --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
   --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
@@ -3806,7 +3806,8 @@ a.logo:hover {
   top: 0;
   left: 0;
   text-align: left;
-  background: rgba(255, 255, 255, 0.98);
+  /* background: rgba(255, 255, 255, 0.98); */
+  background: linear-gradient(to right, #64b3b4, #a8dcca);
   box-shadow:
     0px 0px 10px 0px rgba(0, 0, 0, 0.025),
     0px 1px 1px 0px rgba(0, 0, 0, 0.01),
@@ -4303,7 +4304,8 @@ a.logo:hover {
   display: none;
 }
 .main-nav.dark {
-  background-color: rgba(10, 10, 10, 0.905);
+  /* background-color: rgba(10, 10, 10, 0.905); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
   box-shadow: none;
 
   -webkit-box-shadow: none;
@@ -4311,7 +4313,8 @@ a.logo:hover {
   box-shadow: none;
 }
 .main-nav.dark-mode {
-  background-color: rgba(27, 27, 27, 0.905);
+  /* background-color: rgba(27, 27, 27, 0.905); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .main-nav:not(.transparent) {
   -webkit-backdrop-filter: blur(10px);
@@ -4370,7 +4373,8 @@ a.logo:hover {
  */
 
 .main-nav.transparent {
-  background: transparent !important;
+  /* background: transparent !important; */
+  background: linear-gradient(to right, #64b3b4, #a8dcca) !important;
   box-shadow: none;
 }
 .main-nav.js-transparent {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 839cac2..6f4769e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export default function Header1Multipage({ links }: any) {
   return (
-    <div className="main-nav-sub full-wrapper">
+    <div className="main-nav-sub full-wrapper" style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}>
       {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
               If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
               image size for support of retina screens. See details in the template documentation. *) */}