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

.navigation{

    background:var(--white);
    box-shadow:var(--shadow);

    position:relative;
    z-index:1000;

}

.nav-container{

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

    position:relative;

}

/* ==========================================
   HAMBURGER
========================================== */

.menu-toggle{

    display:none;

    background:none;
    border:none;

    cursor:pointer;

    font-size:30px;
    color:var(--primary);

    transition:var(--transition-fast);

}

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

.menu{

    display:flex;
    align-items:center;

    list-style:none;

    margin:0;
    padding:0;

    gap:6px;

}

.menu > li{

    position:relative;

}

.nav-item{

    display:flex;
    align-items:center;

    transition:var(--transition-fast);

}

.nav-item > a{

    display:block;

    padding:18px 14px;

    font-weight:600;

    white-space:nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);

}

.nav-item:hover > a{

    color:var(--primary);

}

/* ==========================================
   SUBMENU BUTTON
========================================== */

.submenu-toggle{

    width:34px;
    height:34px;

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

    border:none;
    background:none;

    cursor:pointer;

    color:#777;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);

}

.nav-item:hover .submenu-toggle{

    color:var(--primary);

}

.submenu-toggle i{

    transition:transform var(--transition-fast);
	
	font-size:1.05rem;

}

/* ==========================================
   DESKTOP SUBMENU
========================================== */

.submenu{

    position:absolute;

    top:100%;
    left:0;

    min-width:240px;

    margin:0;
    padding:8px 0;

    list-style:none;

    background:#fff;

    border-radius:12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    pointer-events:none;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s;

}

.submenu li{

    margin:0;

}

.submenu a{

    display:block;

    position:relative;

    padding:12px 18px;

    white-space:nowrap;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        padding-left var(--transition-fast);

}

.submenu a::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:3px;
    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transition:transform var(--transition-fast);

}

.submenu a:hover{

    background:#f4f8ff;

    color:var(--primary);

    padding-left:24px;

}

.submenu a:hover::before{

    transform:scaleY(1);

}

/* ==========================================
   DESKTOP ANIMATION
========================================== */

@media(min-width:993px){

    .menu > li:hover > .submenu{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

        pointer-events:auto;

    }

    .menu > li:hover > .nav-item{

        background:#eef5ff;

        border-radius:8px;

    }

    .menu > li:hover > .nav-item > a{

        color:var(--primary);

    }

    .menu > li:hover .submenu-toggle{

        color:var(--primary);
		
		  transform:rotate(180deg);

    }

}

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

@media(max-width:992px){

    .menu-toggle{
        display:block;
        margin:10px;
    }

    .nav-container{
        justify-content:flex-start;
    }

    .menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        gap:0;
        box-shadow:0 10px 20px rgba(0,0,0,.15);
    }

    .menu.active{
        display:flex;
    }

    .menu>li{
        width:100%;
        border-bottom:1px solid #ececec;
    }

    .nav-item{
        justify-content:space-between;
        width:100%;
    }

    .nav-item>a{
        flex:1;
        padding:16px 20px;
    }

    .submenu-toggle{
        width:56px;
        height:56px;
    }

    .submenu{

    position:static;

    overflow:hidden;

    max-height:0;

    opacity:0;

    visibility:hidden;

    transition:

        max-height .28s ease,

        opacity .22s ease;

    box-shadow:none;

    border-radius:0;

    min-width:100%;

    background:#f8f9fb;

    padding:0;

}

  .menu > li.open > .submenu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}
    .submenu a{
        padding:14px 40px;
    }

}
/* ==========================================
   OPEN ITEM
========================================== */

.menu > li.open > .nav-item{

    background:#eef5ff;

}

.menu > li.open > .nav-item > a{

    color:var(--primary);

}

.menu > li.open > .nav-item .submenu-toggle i{

    transform:rotate(180deg);

}