/* Start custom CSS for html, class: .elementor-element-27db619 *//* =========================================================
HAMMAD ABBAS — FINAL HEADER CSS
Desktop + Tablet + Mobile
========================================================= */
/* =========================================================
GOOGLE FONT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* =========================================================
VARIABLES
========================================================= */
:root {
--ha-blue: #2563eb;
--ha-blue-dark: #1d4ed8;
--ha-black: #111827;
--ha-text: #1f2937;
--ha-muted: #64748b;
--ha-border: #e7ebf1;
--ha-header-height: 88px;
}
/* =========================================================
RESET
========================================================= */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after {
box-sizing: border-box !important;
font-family: "Poppins", sans-serif !important;
}
.site-header a {
text-decoration: none !important;
}
.site-header button {
font-family: "Poppins", sans-serif !important;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: relative !important;
width: 100% !important;
height: var(--ha-header-height) !important;
background:
linear-gradient(
120deg,
#f7faff 0%,
#ffffff 50%,
#f5f8ff 100%
) !important;
border-bottom:
1px solid #e8edf4 !important;
z-index: 999999 !important;
}
/* =========================================================
HEADER CONTAINER
========================================================= */
.site-header .header-container {
width:
min(1380px, calc(100% - 60px)) !important;
height: 100% !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 38px !important;
}
/* =========================================================
MAIN LOGO
========================================================= */
.site-header .logo {
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: var(--ha-black) !important;
background: transparent !important;
font-size: 31px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -1.7px !important;
white-space: nowrap !important;
}
.site-header .logo:hover {
color: var(--ha-black) !important;
background: transparent !important;
}
.site-header .logo-hammad {
color: #111827 !important;
}
.site-header .logo-abbas {
color: #2563eb !important;
}
/* =========================================================
DESKTOP NAV
========================================================= */
.site-header .main-nav {
height: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
align-items: center !important;
gap: 38px !important;
}
/* =========================================================
NORMAL NAV LINKS
========================================================= */
.site-header
.main-nav > a:not(.mobile-drawer-cta),
.site-header .services-link {
position: relative !important;
height: 100% !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
outline: none !important;
color: #111827 !important;
background:
transparent !important;
font-size: 14px !important;
font-weight: 500 !important;
white-space: nowrap !important;
cursor: pointer !important;
transition:
color .2s ease !important;
}
/* =========================================================
NAV HOVER
========================================================= */
.site-header
.main-nav > a:not(.mobile-drawer-cta):hover,
.site-header
.main-nav > a:not(.mobile-drawer-cta):focus,
.site-header .services-link:hover,
.site-header .services-link:focus {
color:
var(--ha-blue) !important;
background:
transparent !important;
}
/* =========================================================
NAV UNDERLINE
========================================================= */
.site-header
.main-nav > a:not(.mobile-drawer-cta)::after,
.site-header .services-link::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 16px !important;
width: 0 !important;
height: 2px !important;
border-radius: 50px !important;
background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
) !important;
transition:
width .25s ease !important;
}
.site-header
.main-nav > a:not(.mobile-drawer-cta):hover::after,
.site-header .services-link:hover::after {
width: 100% !important;
}
/* =========================================================
SERVICES / LOCATIONS WRAPPER
========================================================= */
.site-header .services-menu {
position: static !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
background: transparent !important;
}
/* =========================================================
DROPDOWN ARROW
========================================================= */
.site-header .dropdown-arrow {
margin-left: 6px !important;
font-size: 10px !important;
line-height: 1 !important;
color: #64748b !important;
transition:
transform .25s ease,
color .25s ease !important;
}
/* =========================================================
DESKTOP MEGA MENU
========================================================= */
.site-header .mega-menu {
position: absolute !important;
top:
var(--ha-header-height) !important;
left: 50% !important;
width:
min(1180px, calc(100% - 60px)) !important;
padding:
32px 36px !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
background:
#ffffff !important;
border:
1px solid #e7ebf1 !important;
border-top:
2px solid #2563eb !important;
border-radius:
0 0 18px 18px !important;
box-shadow:
0 25px 60px
rgba(15, 23, 42, .12) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform:
translate(-50%, 10px) !important;
transition:
opacity .22s ease,
visibility .22s ease,
transform .22s ease !important;
z-index: 999999 !important;
}
/* =========================================================
DESKTOP MEGA MENU OPEN ON HOVER
========================================================= */
@media (min-width: 769px) {
.site-header
.services-menu:hover
> .mega-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform:
translate(-50%, 0) !important;
}
.site-header
.services-menu:hover
.dropdown-arrow {
transform:
rotate(180deg) !important;
color:
var(--ha-blue) !important;
}
}
/* =========================================================
MEGA COLUMN
========================================================= */
.site-header .mega-column {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
background:
transparent !important;
}
.site-header
.mega-column:not(:last-child) {
padding-right:
24px !important;
border-right:
1px solid #edf0f4 !important;
}
/* =========================================================
MEGA HEADING
========================================================= */
.site-header .mega-heading {
display: block !important;
margin:
0 0 12px !important;
padding: 0 !important;
color:
#111827 !important;
background:
transparent !important;
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1.4 !important;
text-transform:
uppercase !important;
letter-spacing:
.25px !important;
}
.site-header .mega-heading:hover {
color:
var(--ha-blue) !important;
background:
transparent !important;
}
/* =========================================================
MEGA SUB LINKS
========================================================= */
.site-header
.mega-column
> a:not(.mega-heading) {
display: block !important;
padding:
6px 0 !important;
margin: 0 !important;
color:
#64748b !important;
background:
transparent !important;
font-size:
13px !important;
font-weight:
500 !important;
line-height:
1.5 !important;
transition:
color .2s ease,
padding-left .2s ease !important;
}
.site-header
.mega-column
> a:not(.mega-heading):hover {
color:
var(--ha-blue) !important;
background:
transparent !important;
padding-left:
4px !important;
}
/* =========================================================
DESKTOP CTA
========================================================= */
.site-header .header-cta {
flex-shrink: 0 !important;
min-width:
145px !important;
height:
50px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
8px !important;
padding:
0 22px !important;
color:
#ffffff !important;
background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
) !important;
border:
0 !important;
border-radius:
11px !important;
font-size:
14px !important;
font-weight:
600 !important;
box-shadow:
0 8px 22px
rgba(37, 99, 235, .20) !important;
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease !important;
}
.site-header .header-cta:hover {
color:
#ffffff !important;
background:
linear-gradient(
135deg,
#1d4ed8,
#2563eb
) !important;
transform:
translateY(-3px) !important;
box-shadow:
0 15px 32px
rgba(37, 99, 235, .30) !important;
}
/* =========================================================
HIDE MOBILE ELEMENTS ON DESKTOP
========================================================= */
.site-header .mobile-drawer-header,
.site-header .mobile-overlay,
.site-header .menu-toggle,
.site-header .mobile-drawer-cta,
.site-header .drawer-close {
display: none !important;
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (min-width: 769px) and (max-width: 1150px) {
.site-header .header-container {
width:
calc(100% - 35px) !important;
gap:
24px !important;
}
.site-header .logo {
font-size:
27px !important;
}
.site-header .main-nav {
gap:
22px !important;
}
.site-header
.main-nav > a:not(.mobile-drawer-cta),
.site-header .services-link {
font-size:
12px !important;
}
.site-header .header-cta {
min-width:
115px !important;
height:
45px !important;
padding:
0 15px !important;
font-size:
12px !important;
}
.site-header .mega-menu {
width:
calc(100% - 35px) !important;
padding:
27px !important;
gap:
20px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
/* =====================================================
HEADER
===================================================== */
.site-header {
height:
76px !important;
background:
#ffffff !important;
}
.site-header .header-container {
width:
calc(100% - 26px) !important;
height:
76px !important;
margin:
0 auto !important;
display:
flex !important;
align-items:
center !important;
gap:
0 !important;
}
/* =====================================================
TOP LOGO
===================================================== */
.site-header .logo {
font-size:
29px !important;
font-weight:
800 !important;
letter-spacing:
-1.5px !important;
}
.site-header .logo-hammad {
color:
#111827 !important;
}
.site-header .logo-abbas {
color:
#2563eb !important;
}
/* =====================================================
HIDE DESKTOP CTA
===================================================== */
.site-header .header-cta {
display:
none !important;
}
/* =====================================================
HAMBURGER
===================================================== */
.site-header .menu-toggle {
width:
42px !important;
height:
42px !important;
margin-left:
auto !important;
padding:
0 !important;
display:
flex !important;
flex-direction:
column !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
border:
1px solid #e5e7eb !important;
border-radius:
13px !important;
outline:
none !important;
background:
#ffffff !important;
box-shadow:
0 5px 16px
rgba(15, 23, 42, .07) !important;
cursor:
pointer !important;
z-index:
1000005 !important;
}
.site-header .menu-toggle span {
width:
19px !important;
height:
2px !important;
display:
block !important;
background:
#111827 !important;
border-radius:
50px !important;
transition:
transform .3s ease,
opacity .2s ease !important;
}
/* =====================================================
HAMBURGER ACTIVE → X
===================================================== */
.site-header .menu-toggle.active {
gap:
0 !important;
}
.site-header
.menu-toggle.active
span:nth-child(1) {
transform:
translateY(1px)
rotate(45deg) !important;
}
.site-header
.menu-toggle.active
span:nth-child(2) {
opacity:
0 !important;
transform:
scale(0) !important;
}
.site-header
.menu-toggle.active
span:nth-child(3) {
transform:
translateY(-1px)
rotate(-45deg) !important;
}
/* =====================================================
FULL SCREEN DRAWER
LEFT → RIGHT
===================================================== */
.site-header .main-nav {
position:
fixed !important;
top:
0 !important;
left:
0 !important;
right:
auto !important;
bottom:
0 !important;
width:
100vw !important;
max-width:
100vw !important;
height:
100dvh !important;
min-height:
100dvh !important;
margin:
0 !important;
padding:
96px 22px 30px !important;
display:
flex !important;
flex-direction:
column !important;
align-items:
stretch !important;
gap:
0 !important;
overflow-x:
hidden !important;
overflow-y:
auto !important;
background:
#ffffff !important;
transform:
translateX(-100%) !important;
transition:
transform .38s
cubic-bezier(.22, 1, .36, 1) !important;
z-index:
1000002 !important;
}
.site-header .main-nav.active {
transform:
translateX(0) !important;
}
/* =====================================================
DRAWER HEADER
===================================================== */
.site-header .mobile-drawer-header {
position:
absolute !important;
top:
0 !important;
left:
0 !important;
width:
100% !important;
height:
76px !important;
padding:
0 22px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
background:
#ffffff !important;
border-bottom:
1px solid #edf0f4 !important;
z-index:
20 !important;
}
/* =====================================================
DRAWER LOGO
===================================================== */
.site-header .mobile-drawer-logo {
display:
inline-flex !important;
align-items:
center !important;
margin:
0 !important;
padding:
0 !important;
font-size:
29px !important;
line-height:
1 !important;
font-weight:
800 !important;
letter-spacing:
-1.5px !important;
white-space:
nowrap !important;
background:
transparent !important;
}
.site-header .mobile-logo-hammad {
color:
#111827 !important;
}
.site-header .mobile-logo-abbas {
color:
#2563eb !important;
}
.site-header .mobile-drawer-logo:hover {
background:
transparent !important;
}
/* =====================================================
CLOSE BUTTON
===================================================== */
.site-header .drawer-close {
position:
relative !important;
width:
42px !important;
height:
42px !important;
flex-shrink:
0 !important;
padding:
0 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1px solid #e5e7eb !important;
border-radius:
13px !important;
background:
#ffffff !important;
box-shadow:
0 5px 16px
rgba(15, 23, 42, .07) !important;
outline:
none !important;
cursor:
pointer !important;
z-index:
30 !important;
}
.site-header .drawer-close span {
position:
absolute !important;
width:
19px !important;
height:
2px !important;
display:
block !important;
background:
#111827 !important;
border-radius:
50px !important;
}
.site-header
.drawer-close span:first-child {
transform:
rotate(45deg) !important;
}
.site-header
.drawer-close span:last-child {
transform:
rotate(-45deg) !important;
}
.site-header
.drawer-close:hover {
background:
#f8fafc !important;
border-color:
#cbd5e1 !important;
}
/* =====================================================
MOBILE NORMAL LINKS
===================================================== */
.site-header
.main-nav > a:not(.mobile-drawer-cta) {
width:
100% !important;
height:
52px !important;
min-height:
52px !important;
display:
flex !important;
align-items:
center !important;
padding:
0 2px !important;
margin:
0 !important;
border:
0 !important;
border-bottom:
1px solid #edf0f4 !important;
color:
#111827 !important;
background:
transparent !important;
font-size:
14px !important;
font-weight:
500 !important;
}
.site-header
.main-nav > a:not(.mobile-drawer-cta):hover {
color:
#2563eb !important;
background:
transparent !important;
}
.site-header
.main-nav > a:not(.mobile-drawer-cta)::after {
display:
none !important;
}
/* =====================================================
MOBILE SERVICES BUTTON
===================================================== */
.site-header .services-menu {
width:
100% !important;
height:
auto !important;
position:
static !important;
display:
block !important;
background:
transparent !important;
}
.site-header .services-link {
width:
100% !important;
height:
52px !important;
min-height:
52px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
padding:
0 2px !important;
margin:
0 !important;
border:
0 !important;
border-bottom:
1px solid #edf0f4 !important;
color:
#111827 !important;
background:
transparent !important;
font-size:
14px !important;
font-weight:
500 !important;
text-align:
left !important;
}
.site-header .services-link::after {
display:
none !important;
}
.site-header .services-link:hover,
.site-header .services-link:focus {
color:
#2563eb !important;
background:
transparent !important;
}
/* =====================================================
MOBILE ARROW
===================================================== */
.site-header .dropdown-arrow {
margin-left:
auto !important;
font-size:
11px !important;
color:
#64748b !important;
transition:
transform .25s ease,
color .25s ease !important;
}
.site-header
.services-menu.active
.dropdown-arrow {
transform:
rotate(180deg) !important;
color:
#2563eb !important;
}
/* =====================================================
MOBILE MEGA MENU
===================================================== */
.site-header
.services-menu > .mega-menu {
position:
static !important;
width:
100% !important;
margin:
0 !important;
padding:
0 !important;
display:
none !important;
grid-template-columns:
1fr !important;
gap:
0 !important;
background:
#f7f9fc !important;
border:
1px solid #e8edf4 !important;
border-radius:
10px !important;
box-shadow:
none !important;
opacity:
1 !important;
visibility:
visible !important;
pointer-events:
auto !important;
transform:
none !important;
}
.site-header
.services-menu.active
> .mega-menu {
display:
grid !important;
}
/* =====================================================
MOBILE MEGA COLUMNS
===================================================== */
.site-header .mega-column {
width:
100% !important;
min-width:
0 !important;
display:
flex !important;
flex-direction:
column !important;
padding:
11px 12px !important;
border:
0 !important;
border-bottom:
1px solid #e4e9ef !important;
}
.site-header
.mega-column:last-child {
border-bottom:
0 !important;
}
/* =====================================================
MOBILE MEGA HEADING
===================================================== */
.site-header .mega-heading {
margin:
0 0 3px !important;
padding:
0 !important;
color:
#111827 !important;
background:
transparent !important;
font-size:
11px !important;
font-weight:
700 !important;
line-height:
1.4 !important;
}
/* =====================================================
MOBILE MEGA LINKS
===================================================== */
.site-header
.mega-column
> a:not(.mega-heading) {
display:
block !important;
padding:
5px 0 !important;
color:
#64748b !important;
background:
transparent !important;
font-size:
12px !important;
font-weight:
500 !important;
}
.site-header
.mega-column
> a:not(.mega-heading):hover {
color:
#2563eb !important;
background:
transparent !important;
padding-left:
0 !important;
}
/* =====================================================
MOBILE CTA
===================================================== */
.site-header .mobile-drawer-cta {
order:
999 !important;
width:
100% !important;
min-height:
52px !important;
flex-shrink:
0 !important;
margin:
25px 0 5px !important;
padding:
0 18px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
8px !important;
color:
#ffffff !important;
background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
) !important;
border:
0 !important;
border-radius:
11px !important;
font-size:
14px !important;
font-weight:
600 !important;
box-shadow:
0 9px 25px
rgba(37, 99, 235, .20) !important;
}
/* =====================================================
OVERLAY
===================================================== */
.site-header .mobile-overlay {
position:
fixed !important;
inset:
0 !important;
width:
100vw !important;
height:
100vh !important;
display:
block !important;
background:
rgba(15, 23, 42, .38) !important;
opacity:
0 !important;
visibility:
hidden !important;
pointer-events:
none !important;
z-index:
1000000 !important;
transition:
opacity .3s ease,
visibility .3s ease !important;
}
.site-header .mobile-overlay.active {
opacity:
1 !important;
visibility:
visible !important;
pointer-events:
auto !important;
}
/* =====================================================
BODY LOCK
===================================================== */
body.ha-menu-open {
overflow:
hidden !important;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media (max-width: 420px) {
.site-header .header-container {
width:
calc(100% - 22px) !important;
}
.site-header .logo {
font-size:
27px !important;
letter-spacing:
-1.3px !important;
}
.site-header .menu-toggle,
.site-header .drawer-close {
width:
40px !important;
height:
40px !important;
border-radius:
12px !important;
}
.site-header .menu-toggle span,
.site-header .drawer-close span {
width:
18px !important;
}
.site-header .mobile-drawer-logo {
font-size:
27px !important;
letter-spacing:
-1.4px !important;
}
.site-header .mobile-drawer-header {
padding:
0 20px !important;
}
.site-header .main-nav {
padding-left:
20px !important;
padding-right:
20px !important;
}
}/* End custom CSS */