From 3b31bf4b667c94b356b0784580dbdafa966392a0 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Wed, 16 Jul 2025 12:44:58 +0530
Subject: [PATCH] nav structure corrected

---
 app/(homes)/home-1/page.jsx         |   2 +-
 components/headers/Header1 copy.jsx | 119 ++++
 components/headers/Header1.jsx      |  65 +--
 public/assets/scss/_header.scss     | 854 ++++++++++++++--------------
 4 files changed, 570 insertions(+), 470 deletions(-)
 create mode 100644 components/headers/Header1 copy.jsx

diff --git a/app/(homes)/home-1/page.jsx b/app/(homes)/home-1/page.jsx
index 7b7ae33..eb12632 100644
--- a/app/(homes)/home-1/page.jsx
+++ b/app/(homes)/home-1/page.jsx
@@ -21,7 +21,7 @@ export const metadata = {
 export default function Home1() {
   return (
     <>
-      <HeaderTop1 />
+      {/* <HeaderTop1 /> */}
       <Header1 />
       <Hero />
       <About />
diff --git a/components/headers/Header1 copy.jsx b/components/headers/Header1 copy.jsx
new file mode 100644
index 0000000..7072e37
--- /dev/null
+++ b/components/headers/Header1 copy.jsx	
@@ -0,0 +1,119 @@
+"use client";
+import Nav from "./Nav";
+import Link from "next/link";
+import Offcanvas from "./Offcanvas";
+import { openMobilemenu } from "@/utlis/toggleMobilemenu";
+import Image from "next/image";
+export default function Header1() {
+  return (
+    <>
+      <header className="header-section">
+        <div className="container-fluid">
+          <div className="main-header-wrapper">
+            <div className="logo-image">
+              <Link href={`/`}>
+                <Image
+                  src="/assets/img/logo/black-logo.svg"
+                  width={149}
+                  height={64}
+                  alt="img"
+                />
+              </Link>
+            </div>
+            <div className="main-header-items">
+              <div className="header-contact-info-area">
+                <div className="contact-info-items">
+                  <div className="icon">
+                    <i className="fa-sharp fa-solid fa-location-dot"></i>
+                  </div>
+                  <div className="content">
+                    <p>Office location</p>
+                    <h3>4648 Rocky, New York</h3>
+                  </div>
+                </div>
+                <div className="contact-info-items">
+                  <div className="icon">
+                    <i className="fa-solid fa-envelope"></i>
+                  </div>
+                  <div className="content">
+                    <p>send email</p>
+                    <h3>
+                      <a href="mailto:example@gmail.com">example@gmail.com</a>
+                    </h3>
+                  </div>
+                </div>
+                <div className="contact-info-items style-2">
+                  <div className="icon">
+                    <i className="fa-solid fa-phone-volume"></i>
+                  </div>
+                  <div className="content">
+                    <p>call emergency</p>
+                    <h3>
+                      <a href="tel:+88012365499">+88 0123 654 99</a>
+                    </h3>
+                  </div>
+                </div>
+                <div className="header-button">
+                  <Link href={`/contact`} className="theme-btn">
+                    GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
+                  </Link>
+                </div>
+              </div>
+              <div id="header-sticky" className="header-1">
+                <div className="mega-menu-wrapper">
+                  <div className="header-main">
+                    <div className="logo">
+                      <Link href={`/`} className="header-logo">
+                        <Image
+                          src="/assets/img/logo/black-logo.svg"
+                          alt="logo-img"
+                          width={149}
+                          height={64}
+                        />
+                      </Link>
+                    </div>
+                    <div className="header-left">
+                      <div className="mean__menu-wrapper">
+                        <div className="main-menu">
+                          <nav id="mobile-menu">
+                            <ul>
+                              <Nav />
+                            </ul>
+                          </nav>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="header-right d-flex justify-content-end align-items-center">
+                      <a
+                        href="#0"
+                        onClick={() =>
+                          document
+                            .getElementById("searchWrap")
+                            .classList.add("active")
+                        }
+                        className="search-trigger search-icon"
+                      >
+                        <i className="fal fa-search"></i>
+                      </a>
+                      <div className="header__hamburger d-xl-block my-auto">
+                        <div
+                          onClick={() => openMobilemenu()}
+                          className="sidebar__toggle"
+                        >
+                          <i className="fas fa-bars"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <Offcanvas>
+        <Nav />
+      </Offcanvas>
+    </>
+  );
+}
diff --git a/components/headers/Header1.jsx b/components/headers/Header1.jsx
index 7072e37..6ffa5fc 100644
--- a/components/headers/Header1.jsx
+++ b/components/headers/Header1.jsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import Offcanvas from "./Offcanvas";
 import { openMobilemenu } from "@/utlis/toggleMobilemenu";
 import Image from "next/image";
+
 export default function Header1() {
   return (
     <>
@@ -13,52 +14,14 @@ export default function Header1() {
             <div className="logo-image">
               <Link href={`/`}>
                 <Image
-                  src="/assets/img/logo/black-logo.svg"
-                  width={149}
-                  height={64}
+                  src="/assets/img/logo/logo.png"
+                  width={300}
+                  height={150}
                   alt="img"
                 />
               </Link>
             </div>
             <div className="main-header-items">
-              <div className="header-contact-info-area">
-                <div className="contact-info-items">
-                  <div className="icon">
-                    <i className="fa-sharp fa-solid fa-location-dot"></i>
-                  </div>
-                  <div className="content">
-                    <p>Office location</p>
-                    <h3>4648 Rocky, New York</h3>
-                  </div>
-                </div>
-                <div className="contact-info-items">
-                  <div className="icon">
-                    <i className="fa-solid fa-envelope"></i>
-                  </div>
-                  <div className="content">
-                    <p>send email</p>
-                    <h3>
-                      <a href="mailto:example@gmail.com">example@gmail.com</a>
-                    </h3>
-                  </div>
-                </div>
-                <div className="contact-info-items style-2">
-                  <div className="icon">
-                    <i className="fa-solid fa-phone-volume"></i>
-                  </div>
-                  <div className="content">
-                    <p>call emergency</p>
-                    <h3>
-                      <a href="tel:+88012365499">+88 0123 654 99</a>
-                    </h3>
-                  </div>
-                </div>
-                <div className="header-button">
-                  <Link href={`/contact`} className="theme-btn">
-                    GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
-                  </Link>
-                </div>
-              </div>
               <div id="header-sticky" className="header-1">
                 <div className="mega-menu-wrapper">
                   <div className="header-main">
@@ -84,18 +47,12 @@ export default function Header1() {
                       </div>
                     </div>
                     <div className="header-right d-flex justify-content-end align-items-center">
-                      <a
-                        href="#0"
-                        onClick={() =>
-                          document
-                            .getElementById("searchWrap")
-                            .classList.add("active")
-                        }
-                        className="search-trigger search-icon"
-                      >
-                        <i className="fal fa-search"></i>
-                      </a>
-                      <div className="header__hamburger d-xl-block my-auto">
+                      <div className="header-button">
+                        <Link href={`/contact`} className="theme-btn">
+                          GET A QUOTE <i className="fa-regular fa-arrow-right"></i>
+                        </Link>
+                      </div>
+                      <div className="header__hamburger my-auto">
                         <div
                           onClick={() => openMobilemenu()}
                           className="sidebar__toggle"
@@ -116,4 +73,4 @@ export default function Header1() {
       </Offcanvas>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss
index c06ed90..faf3174 100644
--- a/public/assets/scss/_header.scss
+++ b/public/assets/scss/_header.scss
@@ -1,26 +1,27 @@
 .header-top-wrapper {
-    @include flex;
-    justify-content: space-between;
+	@include flex;
+	justify-content: space-between;
 
-    span {
-        color: rgba(255, 255, 255, .8);
-        i {
-            color: $white;
-            margin-right: 5px;
-        }
-    }
+	span {
+		color: rgba(255, 255, 255, .8);
 
-    .social-icon {
-        gap: 17px;
+		i {
+			color: $white;
+			margin-right: 5px;
+		}
+	}
 
-        a {
-            color: $white;
+	.social-icon {
+		gap: 17px;
 
-            &:hover {
-                color: $theme-color;
-            }
-        }
-    }
+		a {
+			color: $white;
+
+			&:hover {
+				color: $theme-color;
+			}
+		}
+	}
 }
 
 .header-top-wrapper-2 {
@@ -31,7 +32,7 @@
 	position: relative;
 	z-index: 9;
 
-	@include breakpoint (max-xl){
+	@include breakpoint (max-xl) {
 		display: none;
 	}
 
@@ -46,7 +47,7 @@
 		background-color: $white;
 		z-index: -1;
 
-		@include breakpoint (max-xxl){
+		@include breakpoint (max-xxl) {
 			display: none;
 		}
 	}
@@ -90,11 +91,11 @@
 
 	.social-icon {
 		gap: 20px;
-		
+
 		a {
 			color: $header-color;
 
-			@include breakpoint (max-xxl){
+			@include breakpoint (max-xxl) {
 				color: $white;
 			}
 
@@ -106,43 +107,43 @@
 }
 
 .header-top-section {
-	@include breakpoint (max-sm){
+	@include breakpoint (max-sm) {
 		display: none;
 	}
 
-    .container-fluid {
-        padding: 0 150px;
+	.container-fluid {
+		padding: 0 150px;
 
-		@include breakpoint (max-xl4){
+		@include breakpoint (max-xl4) {
 			padding: 0 50px;
 		}
 
-		@include breakpoint (max-xxxl){
+		@include breakpoint (max-xxxl) {
 			padding: 0 40px;
 		}
 
-		@include breakpoint (max-xl){
+		@include breakpoint (max-xl) {
 			padding: 0 20px;
 		}
-    }
+	}
 }
 
 .header-section {
-    .container-fluid {
-        padding: 0 150px;
+	.container-fluid {
+		padding: 0 150px;
 
-		@include breakpoint (max-xl4){
+		@include breakpoint (max-xl4) {
 			padding: 0 50px;
 		}
 
-		@include breakpoint (max-xxxl){
+		@include breakpoint (max-xxxl) {
 			padding: 0 40px;
 		}
 
-		@include breakpoint (max-xl){
+		@include breakpoint (max-xl) {
 			padding: 0 20px;
 		}
-    }
+	}
 }
 
 .header-section-2 {
@@ -153,172 +154,172 @@
 	z-index: 999;
 
 	.container-fluid {
-        padding: 0 90px;
+		padding: 0 90px;
 
-		@include breakpoint (max-xl4){
+		@include breakpoint (max-xl4) {
 			padding: 0 50px;
 		}
 
-		@include breakpoint (max-xxxl){
+		@include breakpoint (max-xxxl) {
 			padding: 0 40px;
 		}
 
-		@include breakpoint (max-xl){
+		@include breakpoint (max-xl) {
 			padding: 0 20px;
 		}
-    }
+	}
 }
 
 
 .main-header-wrapper {
-    @include flex;
-    gap: 100px;
+	@include flex;
+	gap: 100px;
 
-	@include breakpoint (max-xl4){
+	@include breakpoint (max-xl4) {
 		gap: 70px;
 	}
 
-	@include breakpoint (max-xxxl){
+	@include breakpoint (max-xxxl) {
 		gap: 40px;
 	}
 
-	@include breakpoint (max-xl){
+	@include breakpoint (max-xl) {
 		padding: 15px 0;
 	}
 
-    .main-header-items {
-        width: 100%;
+	.main-header-items {
+		width: 100%;
 
-        .header-contact-info-area {
-            @include flex;
-            justify-content: space-between;
-            padding: 0 50px;
-            border: 1px solid #D4DCED;
+		.header-contact-info-area {
+			@include flex;
+			justify-content: space-between;
+			padding: 0 50px;
+			border: 1px solid #D4DCED;
 
-			@include breakpoint (max-xxxl){
+			@include breakpoint (max-xxxl) {
 				padding: 0 30px;
 			}
 
-			@include breakpoint (max-xl){
+			@include breakpoint (max-xl) {
 				display: none;
 			}
-        
-        
-            @include breakpoint (max-sm){
-                gap: 30px;
-            }
-        
-            .contact-info-items {
-                @include flex;
-                gap: 20px;
-                justify-content: space-between;
-                position: relative;
-                padding: 30px 0;
-                border-right: 1px solid #D4DCED;
-                padding-right: 50px;
 
-				@include breakpoint (max-xxl){
+
+			@include breakpoint (max-sm) {
+				gap: 30px;
+			}
+
+			.contact-info-items {
+				@include flex;
+				gap: 20px;
+				justify-content: space-between;
+				position: relative;
+				padding: 30px 0;
+				border-right: 1px solid #D4DCED;
+				padding-right: 50px;
+
+				@include breakpoint (max-xxl) {
 					border-right: none;
 					padding-right: 0;
 				}
-        
-                .icon {
-                    width: 40px;
-                    height: 40px;
-                    line-height: 40px;
-                    text-align: center;
-                    position: relative;
-                    background-color:  $white;
-                    border-radius: 50%;
-                    color: $theme-color;
-                    box-shadow: (0px 4px 25px rgba(0, 0, 0, 0.06));
-                    position: relative;
 
-					@include breakpoint (max-xxl){
+				.icon {
+					width: 40px;
+					height: 40px;
+					line-height: 40px;
+					text-align: center;
+					position: relative;
+					background-color: $white;
+					border-radius: 50%;
+					color: $theme-color;
+					box-shadow: (0px 4px 25px rgba(0, 0, 0, 0.06));
+					position: relative;
+
+					@include breakpoint (max-xxl) {
 						width: 30px;
 						height: 30px;
 						line-height: 30px;
 					}
 
-                    &::before {
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        width: 64px;
-                        height: 64px;
-                        content: "";
-                        background-color: transparent;
-                        border-radius: 50%;
-                        border: 1px solid rgba(30, 32, 35, 0.10);
-                        transform: translate(-50%,-50%);
+					&::before {
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						width: 64px;
+						height: 64px;
+						content: "";
+						background-color: transparent;
+						border-radius: 50%;
+						border: 1px solid rgba(30, 32, 35, 0.10);
+						transform: translate(-50%, -50%);
 
-						@include breakpoint (max-xxl){
+						@include breakpoint (max-xxl) {
 							width: 54px;
 							height: 54px;
 						}
-                    }
-                }
-        
-                .content {
-                    p {
-                        color: $text-color;
-                        margin-bottom: 5px;
-                        text-transform: capitalize;
-                        font-size: 14px;
-                        font-weight: 500;
-                        opacity: 0.7;
-                    }
-        
-                    h3 {
-                        font-size: 20px;
-                        color: $header-color;
-                        text-transform: initial;
+					}
+				}
 
-						@include breakpoint (max-xxxl){
+				.content {
+					p {
+						color: $text-color;
+						margin-bottom: 5px;
+						text-transform: capitalize;
+						font-size: 14px;
+						font-weight: 500;
+						opacity: 0.7;
+					}
+
+					h3 {
+						font-size: 20px;
+						color: $header-color;
+						text-transform: initial;
+
+						@include breakpoint (max-xxxl) {
 							font-size: 18px;
 						}
-        
-                        a {
-                            color: $header-color;
-                        }
-                    }
-                }
 
-                &.style-2 {
-                    border: none;
-                    padding-right: 0;
-                }
-            }
+						a {
+							color: $header-color;
+						}
+					}
+				}
+
+				&.style-2 {
+					border: none;
+					padding-right: 0;
+				}
+			}
 
 			.header-button {
 				.theme-btn {
-					@include breakpoint (max-xxxl){
+					@include breakpoint (max-xxxl) {
 						font-size: 14px;
 						padding: 24px 27px;
 					}
 				}
 			}
-        }
-    }
+		}
+	}
 }
 
 .header-1 {
-    .logo {
-        display: none;
-    }
+	.logo {
+		display: none;
+	}
 
 	.header-main {
-		
+
 		.main-menu {
 			ul {
 				li {
 
-					@include breakpoint (max-xxl){
+					@include breakpoint (max-xxl) {
 						margin-inline-end: 40px;
 					}
-					
+
 					.has-homemenu {
-						@include breakpoint (max-xl4){
+						@include breakpoint (max-xl4) {
 							left: -50px;
 						}
 					}
@@ -336,7 +337,7 @@
 		position: relative;
 		z-index: 1;
 
-		@include breakpoint (max-xxs){
+		@include breakpoint (max-xxs) {
 			padding: 0 15px;
 		}
 
@@ -351,30 +352,30 @@
 			background-color: $theme-color;
 			z-index: -1;
 
-			@include breakpoint (max-xxl){
+			@include breakpoint (max-xxl) {
 				display: none;
 			}
 		}
 
 		.header-main {
-			@include breakpoint (max-xxl){
+			@include breakpoint (max-xxl) {
 				gap: 30px;
 			}
 
 			.main-menu {
 				ul {
 					li {
-	
-						@include breakpoint (max-xxl){
+
+						@include breakpoint (max-xxl) {
 							margin-inline-end: 25px;
 
 							a {
 								font-size: 16px;
 							}
 						}
-						
+
 						.has-homemenu {
-							@include breakpoint (max-xl4){
+							@include breakpoint (max-xl4) {
 								left: -50px;
 							}
 						}
@@ -387,14 +388,14 @@
 	.header-right {
 		gap: 50px !important;
 
-		@include breakpoint (max-xxl){
+		@include breakpoint (max-xxl) {
 			gap: 30px !important;
 		}
 
 		.header-button {
 			margin-right: 57px;
 
-			@include breakpoint (max-xl4){
+			@include breakpoint (max-xl4) {
 				display: none;
 			}
 
@@ -402,7 +403,9 @@
 				background-color: $header-color;
 
 				&:hover {
-					&::before,&::after {
+
+					&::before,
+					&::after {
 						background-color: $theme-color;
 					}
 				}
@@ -413,19 +416,19 @@
 			@include flex;
 			gap: 40px;
 			margin-right: 40px;
-			
-			@include breakpoint (max-xxl){
+
+			@include breakpoint (max-xxl) {
 				margin-right: 0;
 			}
 
-			@include breakpoint (max-md){
+			@include breakpoint (max-md) {
 				gap: 20px;
 			}
 
 			.search-icon {
 				color: $white;
 
-				@include breakpoint (max-xxl){
+				@include breakpoint (max-xxl) {
 					color: $header-color;
 				}
 			}
@@ -433,7 +436,7 @@
 			.sidebar__toggle {
 				color: $white;
 
-				@include breakpoint (max-xxl){
+				@include breakpoint (max-xxl) {
 					color: $header-color;
 				}
 			}
@@ -443,7 +446,7 @@
 
 //>>>>> Header Main Start <<<<<//
 .menu-thumb {
-	@include breakpoint (max-xl){
+	@include breakpoint (max-xl) {
 		display: none !important;
 	}
 }
@@ -453,268 +456,287 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 10px 0;
-	
+
 	.main-menu {
 		ul {
 			margin-bottom: 0;
+
 			li {
 				position: relative;
 				list-style: none;
 				display: inline-block;
 				margin-inline-end: 50px;
-	
-			&:last-child {
-				margin-inline-end: 0;
-			}
-	
-			a {
-				display: inline-block;
-				font-size: 17px;
-				font-weight: 600;
-				color:  $header-color;
-				padding: 20px 0;
-				text-align: left;
-				position: relative;
-				text-transform: capitalize;
-				@include transition;
 
-				i {
-					margin-left: 7px;
+				&:last-child {
+					margin-inline-end: 0;
 				}
-	
-				&:hover {
-					color: $theme-color !important;
-				}
-	
-			}
-			.submenu {
-				position: absolute;
-				top: 100%;
-				inset-inline-start: 0;
-				min-width: 240px;
-				background: $white;
-				z-index: 99999;
-				visibility: hidden;
-				opacity: 0;
-				transform-origin: top center;
-				color: $header-color;
-				box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-				-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-				-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-				transform: translateY(10px);
-				@include transition;
 
-				li {
-					display: block;
-					width: 100%;
-					margin: 0;
-					padding: 0;
-	
-					a {
-						position: relative;
-						z-index: 11;
-						font-size: 17px;
-						font-weight: 600;
-						color: $header-color;
-						padding: 0 25px;
-						padding-bottom: 11px;
-						padding-top: 11px;
+				a {
+					display: inline-block;
+					font-size: 17px;
+					font-weight: 600;
+					color: $header-color;
+					padding: 20px 0;
+					text-align: left;
+					position: relative;
+					text-transform: capitalize;
+					@include transition;
+
+					i {
+						margin-left: 7px;
+					}
+
+					&:hover {
+						color: $theme-color !important;
+					}
+
+				}
+
+				.submenu {
+					position: absolute;
+					top: 100%;
+					inset-inline-start: 0;
+					min-width: 240px;
+					background: $white;
+					z-index: 99999;
+					visibility: hidden;
+					opacity: 0;
+					transform-origin: top center;
+					color: $header-color;
+					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+					-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+					-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+					transform: translateY(10px);
+					@include transition;
+
+					li {
+						display: block;
 						width: 100%;
-						border-bottom: 1px solid #eeeeee;
+						margin: 0;
+						padding: 0;
+
+						a {
+							position: relative;
+							z-index: 11;
+							font-size: 17px;
+							font-weight: 600;
+							color: $header-color;
+							padding: 0 25px;
+							padding-bottom: 11px;
+							padding-top: 11px;
+							width: 100%;
+							border-bottom: 1px solid #eeeeee;
+
+							&:hover {
+								color: $white !important;
+							}
+						}
+
+						&:last-child {
+							a {
+								border: none;
+							}
+						}
+
+						.submenu {
+							inset-inline-start: 100%;
+							top: 0;
+							visibility: hidden;
+							opacity: 0;
+						}
 
 						&:hover {
-							color: $white !important;
-						}
-					}
-					&:last-child {
-						a {
-							border: none;
-						}
-					}
-					.submenu {
-						inset-inline-start: 100%;
-						top: 0;
-						visibility: hidden;
-						opacity: 0;
-					}
-					&:hover {
-						>a {
-							background: $theme-color;
-							color: $white !important;
+							>a {
+								background: $theme-color;
+								color: $white !important;
 
+								&::after {
+									color: $theme-color;
+								}
+							}
+
+							>.submenu {
+								-webkit-transform: translateY(1);
+								-moz-transform: translateY(1);
+								-ms-transform: translateY(1);
+								-o-transform: translateY(1);
+								transform: translateY(1);
+								visibility: visible;
+								opacity: 1;
+							}
+						}
+					}
+
+					li.has-dropdown {
+						>a {
 							&::after {
+								position: absolute;
+								top: 50%;
+								inset-inline-end: 25px;
+								-webkit-transform: translateY(-50%);
+								-moz-transform: translateY(-50%);
+								-ms-transform: translateY(-50%);
+								-o-transform: translateY(-50%);
+								transform: translateY(-50%);
 								color: $theme-color;
 							}
 						}
-						>.submenu {
-							-webkit-transform: translateY(1);
-							-moz-transform: translateY(1);
-							-ms-transform: translateY(1);
-							-o-transform: translateY(1);
-							transform: translateY(1);
-							visibility: visible;
-							opacity: 1;
-						}
 					}
 				}
-				li.has-dropdown {
-					>a {
-						&::after {
-							position: absolute;
-							top: 50%;
-							inset-inline-end: 25px;
-							-webkit-transform: translateY(-50%);
-							-moz-transform: translateY(-50%);
-							-ms-transform: translateY(-50%);
-							-o-transform: translateY(-50%);
-							transform: translateY(-50%);
-							color: $theme-color;
+
+				.has-homemenu {
+					width: 570px;
+					padding: 30px 30px 10px 30px;
+					opacity: 0;
+					left: -250px;
+					visibility: hidden;
+					padding: 30px 30px 10px 30px;
+
+					.homemenu-items {
+						@include flex;
+						gap: 30px;
+						justify-content: space-between;
+
+						@include breakpoint (max-lg) {
+							flex-wrap: wrap;
 						}
-					}
-				}
-			}
 
-			.has-homemenu {
-				width: 570px;
-				padding: 30px 30px 10px 30px;
-				opacity: 0;
-				left: -250px;
-				visibility: hidden;
-				padding: 30px 30px 10px 30px;
-
-				.homemenu-items {
-					@include flex;
-					gap: 30px;
-					justify-content: space-between;
-
-					@include breakpoint (max-lg){
-						flex-wrap: wrap;
-					}
-
-					.homemenu {
-						position: relative;
-						.homemenu-thumb {
+						.homemenu {
 							position: relative;
-	
-							.demo-button {
-								position: absolute;
-								top: 50%;
-								left: 50%;
-								transform: translate(-50%, -50%);
-								width: 70%;
-								gap: 10px;
-								display: flex;
-								justify-content: center;
-								flex-direction: column;
-								opacity: 0;
-								visibility: hidden;
-								@include transition;
-								margin-top: 20px;
-	
-								.theme-btn {
-									padding: 14px 20px;
-									color: $white !important;
-									width: initial;
-									font-size: 14px;
-									text-align: center;
-									border-radius: 0px !important;
-									background-color: $theme-color;
-	
-									&:hover {
+
+							.homemenu-thumb {
+								position: relative;
+
+								.demo-button {
+									position: absolute;
+									top: 50%;
+									left: 50%;
+									transform: translate(-50%, -50%);
+									width: 70%;
+									gap: 10px;
+									display: flex;
+									justify-content: center;
+									flex-direction: column;
+									opacity: 0;
+									visibility: hidden;
+									@include transition;
+									margin-top: 20px;
+
+									.theme-btn {
+										padding: 14px 20px;
 										color: $white !important;
-										
-										&::before {
-											background-color: $header-color;
+										width: initial;
+										font-size: 14px;
+										text-align: center;
+										border-radius: 0px !important;
+										background-color: $theme-color;
+
+										&:hover {
+											color: $white !important;
+
+											&::before {
+												background-color: $header-color;
+											}
 										}
 									}
 								}
-							}
-	
-							&::before {
-								background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
-								background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
-								background-repeat: no-repeat;
-								background-size: cover;
-								background-position: center;
-								width: 100%;
-								height: 100%;
-								position: absolute;
-								left: 0;
-								top: 0;
-								overflow: hidden;
-								opacity: 0;
-								-webkit-transition: all 0.3s ease-in-out;
-								transition: all 0.3s ease-in-out;
-								content: "";
-							}
-							&:hover{
-	
+
 								&::before {
-									visibility: visible;
-									opacity: 1;
+									background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
+									background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
+									background-repeat: no-repeat;
+									background-size: cover;
+									background-position: center;
+									width: 100%;
+									height: 100%;
+									position: absolute;
+									left: 0;
+									top: 0;
+									overflow: hidden;
+									opacity: 0;
+									-webkit-transition: all 0.3s ease-in-out;
+									transition: all 0.3s ease-in-out;
+									content: "";
 								}
-	
-								.demo-button {
-									opacity: 1;
-									visibility: visible;
-									margin-top: 0;
+
+								&:hover {
+
+									&::before {
+										visibility: visible;
+										opacity: 1;
+									}
+
+									.demo-button {
+										opacity: 1;
+										visibility: visible;
+										margin-top: 0;
+									}
+
+									& .homemenu-btn {
+										opacity: 1;
+										visibility: visible;
+										bottom: 50%;
+										transform: translateY(50%);
+									}
 								}
-								& .homemenu-btn {
-									opacity: 1;
-									visibility: visible;
-									bottom: 50%;
-									transform: translateY(50%);
+
+								img {
+									width: 100%;
 								}
 							}
-							img {
-								width: 100%;
+
+							.homemenu-title {
+								text-align: center;
+								margin: 15px auto;
+								display: inline-block;
+								font-size: 16px;
 							}
 						}
-	
-						.homemenu-title {
-							text-align: center;
-							margin: 15px auto;
-							display: inline-block;
-							font-size: 16px;
-						}
 					}
 				}
-			}
-			
-			&:hover {
-				>a {
-					color:  $theme-color;
-					&::after {
-						color:  $theme-color;
+
+				&:hover {
+					>a {
+						color: $theme-color;
+
+						&::after {
+							color: $theme-color;
+						}
+					}
+
+					>.submenu {
+						visibility: visible;
+						opacity: 1;
+						transform: translateY(0px);
 					}
 				}
-				>.submenu {
-					visibility: visible;
-					opacity: 1;
-					transform: translateY(0px);
-				}
-			  }
 			}
 		}
 	}
 
 	.header-right {
-		gap: 30px;
+		gap: 50px !important;
 
-		@include breakpoint (max-xxl){
-			gap: 20px;
+		@include breakpoint(max-xxl) {
+			gap: 30px !important;
 		}
 
-        .search-icon {
-            color: $header-color;
-            font-size: 18px;
-        }
-	}
+		.header-button {
+			margin-right: 57px;
+			display: block;
 
-	.sidebar__toggle {
-		cursor: pointer;
-		font-size: 20px;
-        color: $header-color;
+			@include breakpoint(max-xl) {
+				display: none !important;
+			}
+		}
+
+		.header__hamburger {
+			display: none !important;
+
+			@media (max-width: 1024px) {
+				display: block !important;
+			}
+		}
 	}
 }
 
@@ -733,20 +755,20 @@
 	-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
 	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
 
-    &.header-1 {
-        padding: 0 40px;
+	&.header-1 {
+		padding: 0 40px;
 
-        .logo {
-            display: block;
-        }
-    }
+		.logo {
+			display: block;
+		}
+	}
 
 }
 
 //>>>>> Offcanvas Start <<<<<//
 .offcanvas__info {
 	background: $white none repeat scroll 0 0;
-	border-left: 2px solid  $theme-color;
+	border-left: 2px solid $theme-color;
 	position: fixed;
 	right: 0;
 	top: 0;
@@ -764,6 +786,7 @@
 	overflow-y: scroll;
 	overscroll-behavior-y: contain;
 	scrollbar-width: none;
+
 	&::-webkit-scrollbar {
 		display: none;
 	}
@@ -827,7 +850,7 @@
 						color: $text-color;
 					}
 
-					&:not(:last-child){
+					&:not(:last-child) {
 						margin-bottom: 15px;
 					}
 
@@ -846,7 +869,7 @@
 			}
 
 			.header-button {
-				
+
 				.theme-btn {
 					width: 100%;
 					padding: 16px 40px;
@@ -855,30 +878,30 @@
 			}
 
 			.social-icon {
-                margin-top: 30px;
-                gap: 10px;
+				margin-top: 30px;
+				gap: 10px;
 
-                a {
-                    width: 45px;
-                    height: 45px;
-                    line-height: 45px;
-                    text-align: center;
-                    font-size: 16px;
-                    display: block;
-                    background: transparent;
-                    color: $text-color;
-                    border-radius: 50%;
-                    -webkit-transition: all .4s ease-in-out;
-                    transition: all .4s ease-in-out;
-                    text-align: center;
-                    border: 1px solid $border-color;
+				a {
+					width: 45px;
+					height: 45px;
+					line-height: 45px;
+					text-align: center;
+					font-size: 16px;
+					display: block;
+					background: transparent;
+					color: $text-color;
+					border-radius: 50%;
+					-webkit-transition: all .4s ease-in-out;
+					transition: all .4s ease-in-out;
+					text-align: center;
+					border: 1px solid $border-color;
 
-                    &:hover {
-                        background-color: $theme-color;
-                        color: $white;
-                    }
-                }
-            }
+					&:hover {
+						background-color: $theme-color;
+						color: $white;
+					}
+				}
+			}
 		}
 	}
 }
@@ -914,18 +937,18 @@
 
 
 //>>>>> Breadcrumb Start <<<<<//
-.breadcrumb-wrapper{
+.breadcrumb-wrapper {
 	position: relative;
 	overflow: hidden;
 	z-index: 9;
 	padding-top: 190px;
 	padding-bottom: 50px;
 
-	@include breakpoint (max-xl){
+	@include breakpoint (max-xl) {
 		padding-top: 80px;
 	}
 
-	@include breakpoint (max-lg){
+	@include breakpoint (max-lg) {
 		padding-top: 160px;
 		padding-bottom: 0;
 	}
@@ -937,18 +960,18 @@
 		background: $header-color;
 	}
 
-	.shape-image  {
+	.shape-image {
 		position: absolute;
 		right: 0;
 		bottom: 10%;
 
-		@include breakpoint (max-lg){
+		@include breakpoint (max-lg) {
 			display: none;
 		}
 	}
 
-	.page-heading{
-		
+	.page-heading {
+
 		h1 {
 			color: $white;
 			font-size: 74px;
@@ -956,11 +979,11 @@
 			z-index: 9;
 			text-transform: uppercase;
 
-			@include breakpoint(max-lg){
+			@include breakpoint(max-lg) {
 				font-size: 60px;
 			}
 
-			@include breakpoint(max-sm){
+			@include breakpoint(max-sm) {
 				font-size: 42px;
 			}
 		}
@@ -970,28 +993,29 @@
 			margin-top: 20px;
 			gap: 10px;
 
-			@include breakpoint (max-sm){
+			@include breakpoint (max-sm) {
 				margin-top: 15px;
 			}
-			
-			li{
+
+			li {
 				color: $theme-color;
 				text-transform: capitalize;
 				font-weight: 500;
 				font-size: 18px;
-	
+
 				a {
-					color: $white;				;
+					color: $white;
+					;
 					@include transition;
-	
-					&:hover{
+
+					&:hover {
 						color: $theme-color;
 					}
 				}
-	
+
 				i {
 					color: $white;
-                    opacity: .8;
+					opacity: .8;
 				}
 			}
 		}
@@ -1001,7 +1025,7 @@
 		@include flex;
 		justify-content: space-between;
 
-		@include breakpoint (max-lg){
+		@include breakpoint (max-lg) {
 			flex-wrap: wrap;
 		}
 
@@ -1010,7 +1034,7 @@
 			height: 380px;
 			margin-bottom: -50px;
 
-			@include breakpoint (max-lg){
+			@include breakpoint (max-lg) {
 				margin-bottom: 0;
 
 				img {
@@ -1025,7 +1049,7 @@
 				left: -27%;
 				z-index: -1;
 
-				@include breakpoint (max-lg){
+				@include breakpoint (max-lg) {
 					display: none;
 				}
 			}