diff --git a/components/headers/Header1.jsx b/components/headers/Header1.jsx
index 7585525..d265692 100644
--- a/components/headers/Header1.jsx
+++ b/components/headers/Header1.jsx
@@ -46,21 +46,23 @@ export default function Header1() {
-
-
-
- GET A QUOTE
-
-
-
-
openMobilemenu()}
- className="sidebar__toggle"
- >
-
-
-
-
+
+
+
+ GET A QUOTE
+
+
+
+
+
openMobilemenu()} className="sidebar__toggle">
+
+
+
+
+
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index d186c8f..69bf635 100644
--- a/public/assets/css/main.css
+++ b/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: "";
- background-color: var(--header);
- width: 0;
- height: 50%;
- 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 i {
+ font-size: 16px;
+ line-height: 1;
+ display: inline-block;
}
+
+.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;
- }
-}
-@media (max-width: 575px) {
- .theme-btn {
- padding: 18px 30px;
+ padding: 14px 28px;
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
diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss
index 41028e2..ce2b75a 100644
--- a/public/assets/scss/_header.scss
+++ b/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;