/*=========================================================
    KKF NAVBAR v2.0
=========================================================*/
/*=========================================================
    TOP BAR
=========================================================*/

.kk-topbar{

    background:var(--kk-secondary);

    color:#1D1815;

    font-size:14px;

    font-weight:600;

}

.kk-topbar-content{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:36px;

    min-height:38px;

}

.kk-topbar-content span{

    display:flex;

    align-items:center;

    gap:8px;

}

@media(max-width:768px){

    .kk-topbar{

        display:none;

    }

}
/*=========================================================
    Navbar
=========================================================*/

.kk-navbar {

    position: sticky;

    top: 0;

    width: 100%;

    z-index: var(--kk-z-sticky);

    background: var(--kk-surface);

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

    transition: var(--kk-transition);

}

.kk-navbar.scrolled {

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

    backdrop-filter: blur(20px);

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

    box-shadow: var(--kk-shadow);

}

/*=========================================================
    Container
=========================================================*/

.kk-navbar .kk-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 70px;

}

/*=========================================================
    Brand
=========================================================*/

.kk-navbar-brand {

    display: flex;

    align-items: center;

    gap: 14px;

}

.kk-logo {

    width: 60px;

    height: 60px;

    object-fit: contain;

    display: block;

}

.kk-brand-title {

    display: block;

    color: var(--kk-text);

    font-size: 1.65rem;

    font-weight: 700;

    line-height: 1.1;

}

.kk-brand-tagline {

    display: block;

    margin-top: 2px;

    color: var(--kk-text-light);

    font-size: 12px;

    letter-spacing: .8px;

    /* text-transform:uppercase; */

}

/*=========================================================
    Menu
=========================================================*/

.kk-navbar-menu{

    display:flex;

    align-items:center;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0;

}

.kk-navbar-menu a {

    position: relative;

    color: var(--kk-text);

    font-weight: 600;

    transition: var(--kk-transition);

}

.kk-navbar-menu a:hover {

    color: var(--kk-primary);

}

.kk-navbar-menu a.active {

    color: var(--kk-primary);

}

/*=========================================================
    Underline Animation
=========================================================*/

.kk-navbar-menu a:not(.kk-btn)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    border-radius: 999px;

    background: var(--kk-primary);

    transition: width var(--kk-transition);

}

.kk-navbar-menu a:hover::after,

.kk-navbar-menu a.active::after {

    width: 100%;

}

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

.kk-nav-order {

    margin-left: 12px;

    min-width: 180px;

    color: #FFF8EC;
}

/*=========================================================
    Mobile Toggle
=========================================================*/

.kk-mobile-toggle {

    display: none;

    background: none;

    border: none;

    color: var(--kk-text);

    font-size: 1.6rem;

    cursor: pointer;

}

.kk-navbar-menu a:focus-visible,
.kk-mobile-toggle:focus-visible,
.kk-nav-order:focus-visible{

    outline:3px solid var(--kk-secondary);

    outline-offset:4px;

    border-radius:8px;

}
.kk-mobile-toggle i{

    transition:.3s ease;

}
/*=========================================================
    Responsive
=========================================================*/

@media (max-width:992px){

    .kk-mobile-toggle{

        display:block;

    }

    .kk-navbar-menu{

        position:absolute;

        top:88px;

        left:0;

        right:0;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        padding:30px;

        background:#fff;

        box-shadow:0 20px 45px rgba(0,0,0,.08);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:translateY(-15px);

        transition:.3s ease;

        z-index:999;

    }

    .kk-navbar-menu.open{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);

    }

    .kk-navbar-menu li{

        width:100%;

    }

    .kk-navbar-menu a{

        display:block;

        width:100%;

        padding:12px 0;

    }

    .kk-nav-order{

        width:100%;

        margin-top:10px;

    }

}
/*=========================================================
    MOBILE DRAWER
=========================================================*/

.kk-mobile-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

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

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1098;

}

.kk-mobile-overlay.show{

    opacity:1;

    visibility:visible;

}

.kk-mobile-drawer{

    position:fixed;

    top:0;

    left:0;

    width:320px;

    max-width:88%;

    height:100vh;

    background:#fff;
    border-top-right-radius:28px;

border-bottom-right-radius:28px;

    display:flex;

    flex-direction:column;

    transform:translateX(-100%);

    transition:transform .35s cubic-bezier(.22,.61,.36,1);

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

    z-index:1099;

}

.kk-mobile-drawer.open{

    transform:translateX(0);

}
/*=========================================================
    DRAWER HEADER
=========================================================*/

.kk-mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

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

}

.kk-mobile-brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.kk-mobile-brand img{

    width:56px;

    height:56px;

    object-fit:contain;

    transition:.35s ease;

}

.kk-mobile-brand h3{

    margin:0;

    font-size:20px;

    color:var(--kk-text);

}

.kk-mobile-brand span{

    display:block;

    margin-top:3px;

    font-size:12px;

    color:var(--kk-text-light);

    letter-spacing:.6px;

    /* text-transform:uppercase; */

}

.kk-mobile-close{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#F7F7F7;

    cursor:pointer;

    transition:.3s;

}

.kk-mobile-close:hover{

    background:var(--kk-secondary);

}
/*=========================================================
    MOBILE LINKS
=========================================================*/

.kk-mobile-links{

    flex:1;

    list-style:none;

    margin:0;

    padding:24px;

}

.kk-mobile-links li{

    margin-bottom:8px;

}

.kk-mobile-links a{

    display:flex;

    align-items:center;

    padding:16px 18px;

    border-radius:14px;

    color:var(--kk-text);

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.kk-mobile-links a{

    position:relative;

    overflow:hidden;

}

.kk-mobile-links a::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:var(--kk-secondary);

    transform:scaleY(0);

    transition:.3s;

}

.kk-mobile-links a:hover,
.kk-mobile-links a.active{

    background:linear-gradient(

90deg,

#FFF8EC,

#FFFFFF

);

    color:var(--kk-primary);

    padding-left:28px;

}

.kk-mobile-links a:hover::before,
.kk-mobile-links a.active::before{

    transform:scaleY(1);

}
/*=========================================================
    MOBILE FOOTER
=========================================================*/

.kk-mobile-footer{

    padding:22px;

    border-top:1px solid var(--kk-border);

}

.kk-mobile-call{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:16px;

    color:var(--kk-text);

    text-decoration:none;

    font-weight:600;

}

.kk-mobile-footer .kk-btn{

    width:100%;

}
/*=========================================================
    DESKTOP
=========================================================*/

.kk-mobile-overlay,

.kk-mobile-drawer{

    display:none;

}

@media(max-width:992px){

    .kk-mobile-overlay,

    .kk-mobile-drawer{

        display:flex;

    }

}
/*=========================================================
    STAGGER MENU ANIMATION
=========================================================*/

.kk-mobile-links li{

    opacity:0;

    transform:translateX(-25px);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.kk-mobile-drawer.open .kk-mobile-links li{

    opacity:1;

    transform:translateX(0);

}
.kk-mobile-drawer.open .kk-mobile-brand img{

    animation:kkLogoBounce .6s;

}

/* Individual Delay */

.kk-mobile-links li:nth-child(1){

    transition-delay:.05s;

}

.kk-mobile-links li:nth-child(2){

    transition-delay:.10s;

}

.kk-mobile-links li:nth-child(3){

    transition-delay:.15s;

}

.kk-mobile-links li:nth-child(4){

    transition-delay:.20s;

}

.kk-mobile-links li:nth-child(5){

    transition-delay:.25s;

}

.kk-mobile-links li:nth-child(6){

    transition-delay:.30s;

}

.kk-mobile-links li:nth-child(7){

    transition-delay:.35s;

}
@keyframes kkLogoBounce{

    0%{

        transform:scale(.8);

    }

    60%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}