/* =====================================================
   SERENGETI HEROES
   Premium Luxury Header
=====================================================*/

:root{

--acacia-green:#1C2B24;

--khaki-sand:#EDE6D6;

--savanna-gold:#B8863B;

--olive-black:#1B211A;

}


/*==============================
HEADER
==============================*/

.luxury-custom-header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:99999;

background:var(--acacia-green);

border-bottom:1px solid rgba(184,134,59,.2);

box-shadow:0 4px 20px rgba(0,0,0,.15);

}


.luxury-header-container{

max-width:1400px;

margin:auto;

padding:18px 40px;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}


/*==============================
LOGO
==============================*/

.luxury-brand-logo{

flex-shrink:0;

}

.luxury-brand-logo a{

text-decoration:none;

display:flex;

flex-direction:column;

}

.logo-main-title{

font-family:'Fraunces',serif;

font-size:24px;

font-weight:700;

letter-spacing:.04em;

color:var(--khaki-sand);

transition:.3s;

line-height:1;

}

.logo-main-title:hover{

color:var(--savanna-gold);

}

.logo-subtitle{

margin-top:4px;

font-family:'IBM Plex Mono',monospace;

font-size:9px;

letter-spacing:.35em;

text-transform:uppercase;

color:var(--savanna-gold);

}


/*==============================
MENU
==============================*/

.luxury-navigation{

flex:1;

display:flex;

justify-content:center;

}

.luxury-navigation ul{

display:flex;

align-items:center;

gap:32px;

margin:0;

padding:0;

list-style:none;

}

.luxury-navigation li{

margin:0;

padding:0;

position:relative;

}

.luxury-navigation li a{

font-family:'Work Sans',sans-serif;

font-size:13px;

font-weight:500;

letter-spacing:.04em;

color:var(--khaki-sand);

text-decoration:none;

transition:.3s;

}

.luxury-navigation li a:hover{

color:var(--savanna-gold);

}

.luxury-navigation .current-menu-item>a{

color:var(--savanna-gold);

}


/*==============================
CONTACTS
==============================*/

.luxury-header-contacts{

display:flex;

align-items:center;

gap:18px;

white-space:nowrap;

font-family:'IBM Plex Mono',monospace;

font-size:11px;

}

.contact-item-link{

text-decoration:none;

color:var(--khaki-sand);

transition:.3s;

}

.contact-item-link:hover{

color:var(--savanna-gold);

}

.mono-label{

font-weight:700;

color:var(--savanna-gold);

margin-right:6px;

}

.contact-vertical-divider{

opacity:.25;

color:var(--khaki-sand);

}

.contact-whatsapp-link{

display:flex;

align-items:center;

gap:8px;

text-decoration:none;

color:var(--khaki-sand);

transition:.3s;

}

.contact-whatsapp-link:hover{

color:var(--savanna-gold);

}

.whatsapp-status-dot{

width:7px;

height:7px;

border-radius:50%;

background:#47c857;

}


/*==============================
CTA
==============================*/

.luxury-header-cta{

display:inline-flex;

align-items:center;

justify-content:center;

padding:11px 22px;

background:var(--savanna-gold);

color:var(--acacia-green);

font-family:'Work Sans',sans-serif;

font-size:12px;

font-weight:600;

letter-spacing:.05em;

text-decoration:none;

border:1px solid var(--savanna-gold);

transition:.3s;

}

.luxury-header-cta:hover{

background:transparent;

color:var(--savanna-gold);

}


/*==============================
SUBMENUS
==============================*/

.luxury-navigation ul ul{

position:absolute;

top:120%;

left:0;

display:none;

flex-direction:column;

background:var(--acacia-green);

padding:12px 0;

min-width:220px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 12px 40px rgba(0,0,0,.25);

gap:0;

}

.luxury-navigation li:hover>ul{

display:flex;

}

.luxury-navigation ul ul li{

width:100%;

}

.luxury-navigation ul ul a{

display:block;

padding:10px 20px;

}


/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

.luxury-header-container{

flex-direction:column;

gap:20px;

padding:20px;

}

.luxury-navigation{

width:100%;

}

.luxury-navigation ul{

flex-wrap:wrap;

justify-content:center;

gap:16px;

}

.luxury-header-contacts{

flex-wrap:wrap;

justify-content:center;

}

}


@media(max-width:576px){

.logo-main-title{

font-size:20px;

}

.logo-subtitle{

font-size:8px;

letter-spacing:.25em;

}

.luxury-navigation ul{

flex-direction:column;

gap:12px;

}

.luxury-header-contacts{

flex-direction:column;

gap:10px;

}

.luxury-header-cta{

width:100%;

}

}