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

.wizora-header{

    --header-bg:#ffffff;
    --header-text:#111827;
    --header-border:#e5e7eb;

    --header-height:90px;
    --header-z:9999;

    --logo-width:180px;

    --container-width:100%;

    --transition:.3s ease;


    position:relative;

    z-index:9999;

    width:100%;

}


/* RESET */
html,
body{
    margin:0 !important;
    padding:0 !important;
}

/* =========================================================
ANNOUNCEMENT BAR
========================================================= */

.header-announcement{

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 20px;

    background:
    var(--primary-color,#2563eb);

    color:#fff;

    text-align:center;

    font-size:14px;

    font-weight:600;

    line-height:1.4;

    position:relative;

    overflow:hidden;

}

.header-announcement a{

    color:inherit;

    text-decoration:underline;

}


/* =========================================================
TOP BAR
========================================================= */

.header-topbar{

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 20px;

    background:#0f172a;

    color:#ffffff;

    font-size:13px;

    line-height:1.4;

}

.header-topbar a{

    color:inherit;

}


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

.wizora-header{

    background:var(--header-bg);

    color:var(--header-text);

    border-bottom:
    1px solid var(--header-border);

}

.header-inner{

    width:100%;

    max-width:none;

    margin:0;

    min-height:var(--header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    padding:0 40px;

    box-sizing:border-box;

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

.header-logo{

    flex-shrink:0;

    display:flex;
    align-items:center;

}

.header-logo a{

    display:flex;
    align-items:center;

    text-decoration:none;

}

.header-logo img{

    width:100%;

    max-width:var(--logo-width);

    height:auto;

    display:block;

}

.logo-text{

    font-size:28px;

    font-weight:800;

    color:inherit;

    line-height:1;

}


/* =========================================================
NAVIGATION
========================================================= */

.header-nav{

    flex:1;

    display:flex;

}

.header-nav ul{

    list-style:none;

    margin:0;
    padding:0;

}

.header-nav > ul{

    display:flex;
    align-items:center;

    gap:34px;

}

.header-nav li{

    position:relative;

}

.header-nav a{

    display:flex;
    align-items:center;

    min-height:var(--header-height);

    text-decoration:none;

    color:inherit;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.header-nav a:hover{

    color:inherit;

}

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

.align-left .header-nav{

    justify-content:flex-start;

}

.align-center .header-nav{

    justify-content:center;

}

.align-right .header-nav{

    justify-content:flex-end;

}


/* =========================================================
DROPDOWN INDICATOR
========================================================= */

.header-nav li.menu-item-has-children > a::after{

    content:"";

    width:6px;
    height:6px;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:
    rotate(45deg);

    margin-left:8px;

    transition:.3s;

}

.header-nav li:hover > a::after{

    transform:
    rotate(225deg);

}


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

.header-actions{

    display:flex;
    align-items:center;

    gap:14px;

    flex-shrink:0;

}


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

.header-icon{

    width:42px;
    height:42px;

    border:none;

    background:transparent;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    border-radius:50%;

    transition:all .25s ease;

    color:inherit;

    font-size:18px;

}

.header-icon:hover{

    background:
    rgba(0,0,0,.05);

    transform:
    translateY(-2px);

}

.header-icon svg{

    width:20px;
    height:20px;

}


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

.header-cta{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:46px;

    padding:0 24px;

    border-radius:14px;

    background:
    var(--primary-color,#2563eb);

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}

.header-cta:hover{

    transform:
    translateY(-2px);

    opacity:.95;

}


/* =========================================================
MOBILE TOGGLE
========================================================= */

.mobile-toggle{

    display:none;

    width:46px;
    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:12px;

    font-size:22px;

    transition:.3s ease;

}

.mobile-toggle:hover{

    background:
    rgba(0,0,0,.05);

}


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

.is-sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:99999;

}
.is-sticky .header-inner{

    backdrop-filter:
    blur(12px);

}


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

.is-transparent{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    background:transparent;

    border:none;

}

.is-transparent .header-inner{

    background:transparent;

}

.is-transparent .header-nav a{

    color:#ffffff;

}

.is-transparent .logo-text{

    color:#ffffff;

}

.is-transparent .header-icon{

    color:#ffffff;

}

.is-transparent .mobile-toggle{

    color:#ffffff;

}


/* =========================================================
SHADOW
========================================================= */

.has-shadow{

    box-shadow:
    0 10px 35px rgba(0,0,0,.08);

}


/* =========================================================
SHRINK ON SCROLL
========================================================= */

.can-shrink{

    transition:
    background .3s ease,
    box-shadow .3s ease;

}

.can-shrink.scrolled .header-inner{

    min-height:70px;

}

.can-shrink.scrolled{

    box-shadow:
    0 8px 30px rgba(0,0,0,.08);

}


/* =========================================================
SCROLLED TRANSPARENT
========================================================= */

.is-transparent.scrolled{

    background:#ffffff;

}

.is-transparent.scrolled .header-nav a{

    color:#111827;

}

.is-transparent.scrolled .logo-text{

    color:#111827;

}

.is-transparent.scrolled .header-icon{

    color:#111827;

}

.is-transparent.scrolled .mobile-toggle{

    color:#111827;

}


/* =========================================================
HEADER SEARCH MODAL PLACEHOLDER
========================================================= */

.header-search-modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.6);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:10000;

}

.header-search-modal.active{

    opacity:1;

    visibility:visible;

}


/* =========================================================
DRAWERS PLACEHOLDER
========================================================= */

.header-drawer{

    position:fixed;

    top:0;
    right:-420px;

    width:420px;

    max-width:100%;

    height:100vh;

    background:#fff;

    transition:.35s ease;

    z-index:10000;

    overflow:auto;

}

.header-drawer.active{

    right:0;

}


/* =========================================================
DESKTOP ONLY
========================================================= */

@media (min-width:992px){

    .mobile-menu{
        display:none !important;
    }

}


/* =========================================================
TABLET START
========================================================= */

@media (max-width:991px){

    .header-nav{
        display:none;
    }

    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .header-inner{

        gap:20px;

        min-height:80px;

    }

    .header-cta{

        display:none;

    }

}


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

.style-classic{

    background:var(--header-bg);

}

.style-classic .header-inner{

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.style-classic .header-logo{

    order:1;

}

.style-classic .header-nav{

    order:2;

}

.style-classic .header-actions{

    order:3;

}


/* =========================================================
CLASSIC ALIGNMENTS
========================================================= */

.style-classic.align-left .header-nav{

    justify-content:flex-start;

}

.style-classic.align-center .header-nav{

    justify-content:center;

}

.style-classic.align-right .header-nav{

    justify-content:flex-end;

}


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

.style-centered .header-inner{

    flex-direction:column;

    justify-content:center;

    gap:18px;

    padding-top:20px;
    padding-bottom:20px;

    min-height:auto;

}

.style-centered .header-logo{

    justify-content:center;

    width:100%;

}

.style-centered .header-nav{

    width:100%;

    justify-content:center;

}

.style-centered .header-nav > ul{

    justify-content:center;

}

.style-centered .header-actions{

    justify-content:center;

    width:100%;

}

.style-centered .header-nav a{

    min-height:auto;

}


/* =========================================================
CENTERED LARGE LOGO
========================================================= */

.style-centered .header-logo img{

    max-width:
    calc(var(--logo-width) + 40px);

}


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

.style-split .header-inner{

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    align-items:center;

    gap:40px;

}

.style-split .header-logo{

    justify-content:center;

}

.style-split .header-nav{

    flex:none;

}

.style-split .header-nav:first-of-type{

    justify-content:flex-end;

}

.style-split .header-actions{

    justify-content:flex-end;

}


/* =========================================================
SPLIT MENU ENHANCED
========================================================= */

.style-split .header-nav > ul{

    gap:24px;

}

.style-split .header-logo img{

    max-width:
    calc(var(--logo-width) + 20px);

}


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

.style-minimal{

    border-bottom:none;

}

.style-minimal .header-inner{

    min-height:70px;

}

.style-minimal .header-nav > ul{

    gap:24px;

}

.style-minimal .header-nav a{

    font-weight:500;

}

.style-minimal .header-icon{

    width:38px;
    height:38px;

}

.style-minimal .header-cta{

    height:42px;

    border-radius:10px;

}

.style-minimal.has-shadow{

    box-shadow:none;

}


/* =========================================================
MINIMAL HOVER
========================================================= */

.style-minimal .header-nav a{

    position:relative;

}

.style-minimal .header-nav a::before{

    content:"";

    position:absolute;

    left:0;
    bottom:18px;

    width:0;

    height:2px;

    background:
    var(--primary-color,#2563eb);

    transition:.3s ease;

}

.style-minimal .header-nav a:hover::before{

    width:100%;

}


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

.style-modern{

    background:transparent;

}

.style-modern .header-inner{

    background:#ffffff;

    border-radius:0;

    margin-top:0;

    box-shadow:none;

}
.style-modern .header-nav > ul{

    gap:30px;

}

.style-modern .header-nav a{

    font-weight:600;

}

.style-modern .header-actions{

    gap:12px;

}


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

.style-modern .header-cta{

    background:
    linear-gradient(
        135deg,
        var(--primary-color,#2563eb),
        var(--secondary-color,#1d4ed8)
    );

    box-shadow:
    0 10px 25px rgba(37,99,235,.25);

}

.style-modern .header-cta:hover{

    transform:
    translateY(-3px);

}


/* =========================================================
MODERN ICONS
========================================================= */

.style-modern .header-icon{

    background:
    rgba(0,0,0,.04);

}

.style-modern .header-icon:hover{

    background:
    rgba(0,0,0,.08);

}


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

.style-modern .header-logo img{

    max-width:
    calc(var(--logo-width) + 10px);

}


/* =========================================================
MODERN TRANSPARENT
========================================================= */

.style-modern.is-transparent .header-inner{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(14px);

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

}

.style-modern.is-transparent .header-nav a{

    color:#fff;

}

.style-modern.is-transparent .header-icon{

    color:#fff;

}

.style-modern.is-transparent .logo-text{

    color:#fff;

}


/* =========================================================
MODERN SCROLLED
========================================================= */

.style-modern.is-transparent.scrolled .header-inner{

    background:#fff;

}

.style-modern.is-transparent.scrolled .header-nav a{

    color:#111827;

}

.style-modern.is-transparent.scrolled .logo-text{

    color:#111827;

}

.style-modern.is-transparent.scrolled .header-icon{

    color:#111827;

}


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

.style-modern.rounded .header-inner{

    border-radius:999px;

}


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

.style-modern.glass .header-inner{

    backdrop-filter:
    blur(18px);

    background:
    rgba(255,255,255,.12);

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

}


/* =========================================================
HEADER CONTAINER WIDTHS
========================================================= */

.style-classic .header-inner,
.style-centered .header-inner,
.style-split .header-inner,
.style-minimal .header-inner,
.style-modern .header-inner{

    max-width:var(--container-width);

}


/* =========================================================
TABLET
========================================================= */

@media (max-width:991px){

    .style-centered .header-inner{

        flex-direction:row;

        justify-content:space-between;

        gap:20px;

        padding-top:0;
        padding-bottom:0;

    }

    .style-split .header-inner{

        display:flex;

    }

    .style-modern .header-inner{

        margin-top:0;

        border-radius:0;

    }

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width:767px){

    .style-modern .header-inner{

        padding-left:16px;
        padding-right:16px;

    }

    .style-classic .header-inner,
    .style-centered .header-inner,
    .style-split .header-inner,
    .style-minimal .header-inner{

        padding-left:16px;
        padding-right:16px;

    }

    .header-logo img{

        max-width:160px;

    }

}


/* =========================================================
MOBILE TOGGLE
========================================================= */

.wizora-mobile-toggle{
display:none;
align-items:center;
justify-content:center;
width:46px;
height:46px;
cursor:pointer;
border:none;
background:none;
padding:0;
position:relative;
z-index:10;
}

.wizora-mobile-toggle span{
position:absolute;
width:24px;
height:2px;
background:currentColor;
transition:.3s;
}

.wizora-mobile-toggle span:nth-child(1){
transform:translateY(-7px);
}

.wizora-mobile-toggle span:nth-child(3){
transform:translateY(7px);
}

.wizora-mobile-toggle.active span:nth-child(1){
transform:rotate(45deg);
}

.wizora-mobile-toggle.active span:nth-child(2){
opacity:0;
}

.wizora-mobile-toggle.active span:nth-child(3){
transform:rotate(-45deg);
}

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

.wizora-mobile-menu{
position:fixed;
top:0;
right:-100%;
width:340px;
max-width:90vw;
height:100vh;
background:#fff;
z-index:99999;
overflow-y:auto;
transition:.35s ease;
box-shadow:-10px 0 40px rgba(0,0,0,.15);
}

.wizora-mobile-menu.open{
right:0;
}

.wizora-mobile-menu-inner{
padding:30px;
}

.wizora-mobile-menu-logo{
margin-bottom:30px;
}

.wizora-mobile-menu-logo img{
max-width:180px;
height:auto;
}

.wizora-mobile-nav{
display:flex;
flex-direction:column;
gap:0;
}

.wizora-mobile-nav a{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 0;
border-bottom:1px solid rgba(0,0,0,.08);
text-decoration:none;
font-weight:600;
color:inherit;
}

.wizora-mobile-nav a:hover{
color:var(--primary-color);
}

.wizora-mobile-menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:99998;
}

.wizora-mobile-menu-overlay.open{
opacity:1;
visibility:visible;
}

/* =========================================================
FULLSCREEN MOBILE MENU
========================================================= */

.wizora-mobile-menu.fullscreen{
width:100%;
max-width:none;
right:-100%;
}

.wizora-mobile-menu.fullscreen.open{
right:0;
}

.wizora-mobile-menu.fullscreen .wizora-mobile-menu-inner{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.wizora-mobile-menu.fullscreen .wizora-mobile-nav{
align-items:center;
gap:20px;
}

.wizora-mobile-menu.fullscreen .wizora-mobile-nav a{
font-size:26px;
border:none;
padding:0;
}

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

.wizora-mobile-submenu{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
}

.wizora-mobile-item.open .wizora-mobile-submenu{
max-height:500px;
}

.wizora-mobile-submenu a{
padding-left:20px;
font-size:14px;
opacity:.85;
}

.mobile-submenu-toggle{
cursor:pointer;
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}

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

.wizora-mega{
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
padding:40px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:.3s;
box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.wizora-nav-item:hover .wizora-mega{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.wizora-mega-column{
display:flex;
flex-direction:column;
gap:12px;
}

.wizora-mega-title{
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:8px;
}

.wizora-mega-column a{
padding:0;
border:none;
font-size:15px;
}

/* =========================================================
SOCIAL ICONS
========================================================= */

.wizora-header-social{
display:flex;
align-items:center;
gap:10px;
}

.wizora-header-social a{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:.25s;
}

.wizora-header-social a:hover{
transform:translateY(-3px);
background:rgba(0,0,0,.05);
}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes wizoraHeaderFade{
from{
opacity:0;
transform:translateY(-10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.wizora-header{
animation:wizoraHeaderFade .4s ease;
}

@keyframes wizoraDropdown{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.wizora-dropdown{
animation:wizoraDropdown .25s ease;
}

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

@media (max-width:1200px){

.wizora-header-container{
padding-left:20px;
padding-right:20px;
}

.wizora-nav{
gap:20px;
}

}

@media (max-width:992px){

.wizora-nav,
.wizora-header-actions{
display:none;
}

.wizora-mobile-toggle{
display:flex;
}

.wizora-header-inner{
gap:15px;
}

.wizora-logo img{
max-width:160px;
}

.wizora-header.centered .wizora-nav{
display:none;
}

}

@media (max-width:768px){

.wizora-header{
min-height:auto;
}

.wizora-header-container{
padding-left:15px;
padding-right:15px;
}

.wizora-logo img{
max-width:140px;
}

.wizora-topbar{
font-size:12px;
padding:8px 12px;
}

.wizora-announcement{
font-size:12px;
padding:8px 12px;
}

.wizora-mobile-menu{
width:100%;
max-width:none;
}

}

@media (max-width:480px){

.wizora-btn{
width:100%;
justify-content:center;
}

.wizora-mobile-menu-inner{
padding:24px;
}

.wizora-mobile-nav a{
font-size:15px;
}

}

/* =========================================================
ACCESSIBILITY
========================================================= */

.wizora-header a:focus,
.wizora-header button:focus{
outline:2px solid var(--primary-color);
outline-offset:2px;
}

.wizora-header button{
font-family:inherit;
}

.wizora-header img{
display:block;
max-width:100%;
}

/* =========================================================
END HEADER CSS
========================================================= */