/* Start custom CSS for html, class: .elementor-element-d42f9e0 *//* =========================================================
FULL WIDTH PREMIUM HEADER
========================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
z-index: 99999;
background: rgba(4, 21, 38, 0.28);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255,255,255,.12);
transition:
background .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
/* SCROLLED HEADER */
.site-header.scrolled {
background: rgba(255,255,255,.97);
border-bottom: 1px solid #e3e9ef;
box-shadow:
0 8px 35px rgba(4,25,45,.08);
}
/* =========================================================
FULL WIDTH HEADER CONTAINER
========================================================= */
.header-container {
width: 100%;
max-width: none;
height: 82px;
padding-left: 45px;
padding-right: 45px;
margin: 0;
display: flex;
align-items: center;
gap: 30px;
}
/* =========================================================
LOGO
========================================================= */
.brand-logo {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
}
.logo-mark {
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background:
linear-gradient(
135deg,
#e2bc67,
#a87928
);
color: #071b32;
font-family:
"Playfair Display",
serif;
font-size: 24px;
font-weight: 700;
box-shadow:
0 7px 20px rgba(201,155,69,.2);
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-text strong {
color: #fff;
font-family:
"Playfair Display",
serif;
font-size: 21px;
font-weight: 600;
white-space: nowrap;
transition: color .3s ease;
}
.logo-text span {
margin-top: 5px;
color: #d9b15f;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
}
/* SCROLLED LOGO */
.site-header.scrolled
.logo-text strong {
color: #071b32;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex: 1;
}
.nav-item {
position: relative;
}
.nav-item > a {
height: 82px;
padding:
0 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color:
rgba(255,255,255,.95);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
transition:
color .25s ease,
background .25s ease;
}
.nav-item > a:hover {
color: #e4bd67;
}
.site-header.scrolled
.nav-item > a {
color: #17283c;
}
.site-header.scrolled
.nav-item > a:hover {
color: #0868b5;
}
/* =========================================================
DROPDOWN
========================================================= */
.dropdown-menu {
position: absolute;
top: 78px;
left: 50%;
width: 335px;
padding: 10px;
transform:
translateX(-50%)
translateY(10px);
background:
rgba(255,255,255,.99);
border:
1px solid #e3e9ef;
border-radius: 14px;
box-shadow:
0 25px 60px rgba(4,30,55,.16);
opacity: 0;
visibility: hidden;
transition:
opacity .25s ease,
transform .25s ease,
visibility .25s ease;
}
.dropdown:hover
.dropdown-menu {
opacity: 1;
visibility: visible;
transform:
translateX(-50%)
translateY(0);
}
/* =========================================================
MEGA SERVICES MENU
========================================================= */
.services-dropdown {
width: 620px;
display: grid;
grid-template-columns:
1fr 1fr;
gap: 5px;
}
/* =========================================================
HEADER ACTIONS
========================================================= */
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
flex-shrink: 0;
}
.header-phone {
display: flex;
align-items: center;
gap: 9px;
padding-right: 15px;
border-right:
1px solid rgba(255,255,255,.25);
color: #fff;
}
.site-header.scrolled
.header-phone {
color: #071b32;
border-right-color:
#dfe5eb;
}
.phone-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(201,155,69,.15);
color:
#e4bd67;
}
.header-phone small {
display: block;
font-size: 8px;
opacity: .6;
margin-bottom: 2px;
}
.header-phone strong {
display: block;
font-size: 10px;
white-space: nowrap;
}
/* =========================================================
CONSULTATION BUTTON
========================================================= */
.header-cta {
min-height: 44px;
padding:
0 19px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 7px;
background:
#c99b45;
color: #111;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
transition:
.25s ease;
}
.header-cta:hover {
background:
#e4bd67;
transform:
translateY(-2px);
box-shadow:
0 8px 22px rgba(201,155,69,.25);
}
/* =========================================================
MOBILE BUTTON
========================================================= */
.mobile-menu-btn {
display: none;
width: 43px;
height: 43px;
border: 0;
background: transparent;
cursor: pointer;
padding: 7px;
margin-left: auto;
}
.mobile-menu-btn span {
display: block;
height: 2px;
margin: 6px 0;
background: #fff;
transition: .3s;
}
.site-header.scrolled
.mobile-menu-btn span {
background: #071b32;
}
/* =========================================================
MOBILE NAV
========================================================= */
.mobile-nav {
display: none;
width: 100%;
background:
rgba(255,255,255,.98);
border-top:
1px solid #e5eaf0;
padding:
10px 25px 20px;
}
.mobile-nav.active {
display: block;
}
.mobile-nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding:
16px 5px;
border-bottom:
1px solid #edf0f3;
color:
#071b32;
font-size: 14px;
font-weight: 600;
}
.mobile-nav a span {
color:
#0868b5;
}
.mobile-whatsapp {
margin-top: 12px;
padding:
15px !important;
border:
0 !important;
border-radius:
8px !important;
background:
#25d366;
color:
#fff !important;
}
/* =========================================================
LAPTOP
========================================================= */
@media(max-width:1250px) {
.header-container {
padding-left: 25px;
padding-right: 25px;
}
.nav-item > a {
padding:
0 9px;
font-size: 11px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1100px) {
.main-nav {
display: none;
}
.header-phone {
display: none;
}
.mobile-menu-btn {
display: block;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px) {
.header-container {
height: 70px;
padding-left: 18px;
padding-right: 18px;
}
.logo-mark {
width: 37px;
height: 37px;
font-size: 21px;
}
.logo-text strong {
font-size: 18px;
}
.logo-text span {
font-size: 7px;
letter-spacing: 2px;
}
.header-cta {
display: none;
}
}/* End custom CSS */