Nav Bar issue Fixed

components/headers/Header1.jsx

@@ -46,21 +46,23 @@ export default function Header1() {
                         </div>
                       </div>
                     </div>
-                    <div className="header-right d-flex justify-content-end align-items-center">
+              <div className="header-right d-flex justify-content-end align-items-center">
-                      <div className="header-button">
+  <div className="header-button">
-                        <Link href={`/contact`} className="theme-btn">
+<Link
-                          GET A QUOTE <i className="fa-regular fa-arrow-right"></i>
+  href="/contact"
-                        </Link>
+  className="theme-btn d-inline-flex align-items-center justify-content-center gap-2"
-                      </div>
+>
-                      <div className="header__hamburger my-auto">
+  <span className="text-nowrap">GET A QUOTE</span>
-                        <div
+  <i className="fa-regular fa-arrow-right"></i>
-                          onClick={() => openMobilemenu()}
+</Link>
-                          className="sidebar__toggle"
+  </div>
-                        >
+  <div className="header__hamburger my-auto ms-3">
-                          <i className="fas fa-bars"></i>
+    <div onClick={() => openMobilemenu()} className="sidebar__toggle">
-                        </div>
+      <i className="fas fa-bars"></i>
-                      </div>
+    </div>
-                    </div>
+  </div>
+</div>
+
                   </div>
                 </div>
               </div>

public/assets/css/main.css

@@ -21,96 +21,68 @@ Version: 1.0.0
   --bg: #1e2023;
   --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);
 }
-
 .theme-btn {
   background-color: var(--theme);
   color: var(--white);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 16px;
   font-weight: 700;
-  padding: 24px 50px;
+  padding: 16px 36px;
   border-radius: 0;
   text-transform: uppercase;
-  -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   position: relative;
   z-index: 1;
+  white-space: nowrap;
+  gap: 10px; /* Spacing between text and icon */
   line-height: 1;
 }
-.theme-btn::before {
+
-  content: "";
+.theme-btn i {
-  background-color: var(--header);
+  font-size: 16px;
-  width: 0;
+  line-height: 1;
-  height: 50%;
+  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  z-index: -1;
 }
+
+.theme-btn:hover {
+  color: var(--white);
+}
+
+.theme-btn::before,
 .theme-btn::after {
   content: "";
   background-color: var(--header);
   width: 0;
   height: 50%;
   position: absolute;
+  z-index: -1;
+  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+
+.theme-btn::before {
+  top: 0;
+  left: 0;
+}
+
+.theme-btn::after {
   bottom: 0;
   right: 0;
-  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  z-index: -1;
-}
-.theme-btn i {
-  margin-left: 10px;
-}
-.theme-btn:hover {
-  color: var(--white);
 }
+
 .theme-btn:hover::before,
 .theme-btn:hover::after {
   width: 100%;
 }
-.theme-btn.bg-white {
+
-  background-color: var(--white);
-  color: var(--header);
-}
-.theme-btn.bg-white:hover {
-  color: var(--white);
-}
 @media (max-width: 767px) {
   .theme-btn {
-    padding: 20px 32px;
+    padding: 14px 28px;
-  }
-}
-@media (max-width: 575px) {
-  .theme-btn {
-    padding: 18px 30px;
     font-size: 14px;
   }
 }
 
-.link-btn {
-  display: inline-block;
-  color: var(--text);
-  text-align: center;
-  font-family: "DM Sans";
-  font-size: 16px;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-.link-btn i {
-  margin-left: 10px;
-  transform: rotate(-40deg);
-  transition: all 0.4s ease-in-out;
-}
-.link-btn:hover {
-  color: var(--theme);
-}
-.link-btn:hover i {
-  margin-left: 10px;
-  transform: rotate(0);
-}
 
 /* --------------------------------------------
     Template Default Fonts & Fonts Styles

public/assets/scss/_header.scss

@@ -465,7 +465,7 @@
 				position: relative;
 				list-style: none;
 				display: inline-block;
-				margin-inline-end: 50px;
+				margin-inline-end: 23px;
 
 				&:last-child {
 					margin-inline-end: 0;