/* =========================================================
   WIZORA MENU SYSTEM
   MODERN PRO NAVIGATION V3
========================================================= */
html,
body{
    margin:0 !important;
    padding:0 !important;
}
/* =========================================================
   MAIN NAV
========================================================= */

.wizora-menu{
    position:sticky;
    top:0;
    left:0;
    right:0;
    width:100vw;
    max-width:100vw;
    margin:0;
    padding:0;
    z-index:999999;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(15,23,42,.08);
    transition:.3s ease;

}





.wizora-menu a{

    text-decoration:none !important;

}


.wizora-menu a:hover{

    text-decoration:none !important;

}


.header-sticky{

    box-shadow:

    0 10px 40px rgba(0,0,0,.12);

}







/* =========================================================
   CONTAINER
========================================================= */

.menu-container{

      width:100%;
    max-width:100%;
    margin:0;

    padding:0 40px;

    min-height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;


    box-sizing:border-box;

}

/* =========================================================
   BRAND
========================================================= */


.menu-brand{


    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;


}




.brand-link{


    display:flex;

    align-items:center;


}





.menu-logo{


    max-height:55px;

    width:auto;

    object-fit:contain;


    transition:.3s;


}



.menu-logo:hover{


    transform:scale(1.05);


}






.menu-company{


    text-decoration:none;


    font-size:24px;


    font-weight:900;


    letter-spacing:-.5px;


    background:


    linear-gradient(

        135deg,

        var(--primary-color,#2563eb),

        var(--secondary-color,#7c3aed)

    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}

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

.menu-links{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    height:90px;

    gap:4px;

}


.menu-item{

    position:relative;

    display:flex;

    align-items:center;

    height:100%;

}


.menu-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:38px;

    padding:0 14px;

    border:1px solid transparent;

    border-radius:10px;

    color:#334155;

    font-size:15px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    transition:all .25s ease;

}


/* HOVER */

.menu-link:hover{

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

    background:rgba(37,99,235,.05);

    border-color:rgba(37,99,235,.15);

}


/* ACTIVE */

.menu-link.active{

    color:#fff !important;

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

    border-color:transparent;

    box-shadow:0 6px 16px rgba(37,99,235,.18);

}


/* DROPDOWN ICON */

.menu-link i{

    font-size:11px;

    margin-left:7px;

    transition:.25s ease;

}


.menu-item:hover .menu-link i{

    transform:rotate(180deg);

}

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


.dropdown{


    position:absolute;


    top:52px;


    left:0;


    min-width:250px;


    padding:12px;


    background:white;


    border-radius:18px;


    border:1px solid #e5e7eb;


    box-shadow:

    0 25px 60px rgba(0,0,0,.15);


    opacity:0;


    visibility:hidden;


    transform:translateY(12px);


    transition:.25s ease;


}




.menu-item:hover .dropdown{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}





.dropdown-link{


    display:flex;


    align-items:center;


    gap:10px;


    padding:12px 15px;


    border-radius:10px;


    color:#475569;


    font-weight:600;


    text-decoration:none;


    transition:.2s;


}





.dropdown-link i{


    color:var(--primary-color);

    font-size:12px;


}





.dropdown-link:hover{


    background:#f1f5f9;


    color:var(--primary-color);


}








/* =========================================================
   ACTION AREA
========================================================= */
.menu-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-shrink:0;
    height:90px;
}

.menu-icon{


    width:44px;

    height:44px;


    border-radius:50%;


    border:1px solid #e2e8f0;


    background:white;


    display:flex;


    align-items:center;


    justify-content:center;


    cursor:pointer;


    color:#475569;


    transition:.25s;


}





.menu-icon:hover{


    background:var(--primary-color);


    color:white;


    transform:translateY(-3px);


}

/* =========================================================
   LOGIN / REGISTER
========================================================= */


.menu-login{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    padding:0 18px !important;

    flex:0 0 auto !important;
    align-self:center !important;

    border:2px solid var(--primary-color,#2563eb);
    border-radius:10px;

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

    font-size:14px;
    font-weight:700;

    box-shadow:none;

    transition:all .25s ease;
}

.menu-login:hover{
    background:var(--primary-color,#2563eb);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:
        0 12px 25px rgba(37,99,235,.25);
}

.menu-login:hover i,
.menu-login:hover span{
    color:#fff;
}

/* REGISTER */

.menu-register{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    padding:0 18px !important;

    flex:0 0 auto !important;
    align-self:center !important;

    border:2px solid transparent;
    border-radius:10px;

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

    color:#fff !important;

    font-size:14px;
    font-weight:700;

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

    transition:all .25s ease;
}

.menu-register i,
.menu-register span{
    color:inherit;
    line-height:1;
}

.menu-register:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 30px rgba(37,99,235,.35);
    filter:brightness(1.08);
}

.menu-register:active{
    transform:translateY(0);
}
/* =========================================================
   CTA
========================================================= */


.menu-cta{


    height:48px;


    padding:0 25px;


    display:flex;


    align-items:center;


    gap:10px;


    border-radius:16px;


    text-decoration:none;


    color:white;


    font-weight:800;


    background:


    linear-gradient(

        135deg,

        var(--primary-color),

        var(--secondary-color)

    );


    box-shadow:


    0 15px 35px rgba(37,99,235,.25);


    transition:.25s;


}




.menu-cta:hover{


    transform:translateY(-3px);


}
/* =========================================================
   MOBILE BUTTON
========================================================= */

.mobile-toggle{

    display:none;

    width:44px;
    height:44px;

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

    cursor:pointer;

    border:1px solid #e2e8f0;

    border-radius:12px;

    background:#fff;

    color:#334155;

    font-size:20px;

    position:relative;

    z-index:10000000;

    transition:all .25s ease;

}


.mobile-toggle:hover{

    background:rgba(37,99,235,.08);

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

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

}



.mobile-toggle.active{

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

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

    color:#fff;

}



.mobile-toggle:active{

    transform:scale(.95);

}




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


.mobile-menu-panel{

    position:fixed;

    top:90px;

    right:-100%;

    width:330px;

    max-width:90%;

    height:calc(100vh - 90px);

    padding:25px 30px;

    background:#fff;

    box-shadow:
    -20px 0 60px rgba(0,0,0,.18);

    transition:.35s ease;

    z-index:9999999;

    overflow-y:auto;

    box-sizing:border-box;

}



.mobile-menu-panel.active{

    right:0;

}





.mobile-menu-panel a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 0;

    border-bottom:1px solid #e5e7eb;

    color:#334155;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}



.mobile-menu-panel a:hover{

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

    padding-left:8px;

}



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


@media(max-width:1100px){

    .mobile-toggle{

        display:flex;

    }


}



@media(max-width:700px){


    .mobile-menu-panel{

        top:75px;

        height:calc(100vh - 75px);

        width:90%;

        padding:20px 25px;

    }


}
/* =========================================================
 SEARCH OVERLAY
========================================================= */


.wizora-search-box{

    position:fixed;

    inset:0;

    background:
    rgba(15,23,42,.65);

    backdrop-filter:
    blur(8px);

    -webkit-backdrop-filter:
    blur(8px);

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding-top:120px;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:9999999;

}



.wizora-search-box.active{

    opacity:1;

    visibility:visible;

}






/* =========================================================
 SEARCH CONTAINER
========================================================= */


.wizora-search-inner{

    width:600px;

    max-width:90%;

    background:#ffffff;

    border-radius:22px;

    padding:18px;

    display:flex;

    align-items:center;

    box-shadow:

    0 30px 90px rgba(0,0,0,.30);

    animation:
    wizoraSearchIn .25s ease;

}





@keyframes wizoraSearchIn{

from{

opacity:0;

transform:translateY(-20px) scale(.96);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}





/* =========================================================
 SEARCH FORM
========================================================= */


.wizora-search-form{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

}






.wizora-search-inner input{

    flex:1;

    height:52px;

    border:

    1px solid #e2e8f0;

    border-radius:14px;

    padding:

    0 18px;

    font-size:16px;

    color:#1e293b;

    outline:none;

    transition:.25s ease;

}



.wizora-search-inner input:focus{

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

    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);

}






/* =========================================================
 SEARCH BUTTONS
========================================================= */


.search-submit,
.search-close{


    width:52px;

    height:52px;

    flex-shrink:0;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:17px;

    transition:.25s ease;


}






/* SEARCH BUTTON */


.search-submit{


    color:#fff;


    background:

    linear-gradient(

        135deg,

        var(--primary-color,#2563eb),

        var(--secondary-color,#7c3aed)

    );


    box-shadow:

    0 8px 20px rgba(37,99,235,.25);


}



.search-submit:hover{


    transform:

    translateY(-3px);


    box-shadow:

    0 12px 30px rgba(37,99,235,.35);


}







/* CLOSE BUTTON */


.search-close{


    background:#f1f5f9;

    color:#475569;


}



.search-close:hover{


    background:#ef4444;


    color:#fff;


    transform:

    translateY(-3px);


}







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


@media(max-width:700px){


.wizora-search-box{

    padding-top:80px;

}



.wizora-search-inner{

    max-width:calc(100% - 30px);

    padding:14px;

    border-radius:18px;

}



.wizora-search-inner input{

    height:48px;

    font-size:15px;

}



.search-submit,
.search-close{

    width:48px;

    height:48px;

}


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


@media(max-width:1100px){


.menu-links{

    display:none;

}



.mobile-toggle{


    display:flex;


    align-items:center;


    justify-content:center;


}



.menu-cta{


    display:none;

}


}




@media(max-width:700px){


.menu-container{


    min-height:75px;


    padding:0 15px;


}



.menu-company{


    font-size:18px;


}



.menu-logo{


    max-height:42px;


}



.menu-login,
.menu-register{


    display:none;


}

}