/***************************************************************
PREMIUM FLOATING MENU
***************************************************************/
html{
    scroll-padding-top:100px;
}
menu{
    position:relative;
	width:1200px;
    height:85px;
    left:50%;
    bottom:100px;
    margin:0;
	margin-left:-600px;
    padding:0 24px;
    border-radius:30px;
	overflow:hidden;
	overflow-x:auto;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:space-between;
    backdrop-filter:blur(20px);
    background:linear-gradient(180deg, rgba(20,20,20,.72), rgba(8,8,8,.92));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 25px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);opacity:0;transform:translateY(60px);
    transition:opacity .7s ease,transform .7s ease,background .35s ease,height .35s ease,border-radius .35s ease,box-shadow .35s ease;}

/***************************************************************
SHOW
***************************************************************/
menu.is-show{

    opacity:1;

    transform:
    translateY(0);
}

/***************************************************************
FIXED
***************************************************************/
menu.is-fixed{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:78px;

    bottom:auto;
	margin-left:0;
    border-radius:0;

    padding:0 30px;

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

    backdrop-filter:blur(18px);

    border-bottom:
    1px solid rgba(255,255,255,.06);

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

    z-index:99999;
}

/***************************************************************
LOGO
***************************************************************/
menu .menu-title{

    position:relative;

    flex:0 0 auto;

    margin:0 20px 0 0;

    padding:0;
}

menu .menu-title a{

    display:flex;
    align-items:center;

    height:96px;

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:800;

    letter-spacing:-0.8px;

    transition:.3s ease;
}

menu.is-fixed .menu-title a{

    height:78px;

    font-size:20px;
}

/***************************************************************
MENU LIST
***************************************************************/
menu ul{

    display:flex;

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

    gap:8px;

    margin:0;
    padding:0;

    height:100%;
}

menu ul li{

    list-style:none;
}

/***************************************************************
MENU LINK
***************************************************************/
menu ul li a{

    position:relative;

    display:flex;
    flex-direction:column;

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

    gap:6px;

    min-width:110px;
    height:65px;

    padding:0 18px;

    border-radius:20px;

    color:
    rgba(255,255,255,.86);

    text-decoration:none;

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

    letter-spacing:-0.2px;

    transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

/***************************************************************
ICON
***************************************************************/
menu ul li a i{

    font-size:20px;

    color:rgba(255,255,255,.72);

    transition:
    transform .25s ease,
    color .25s ease;
}
menu ul li a.active i{
    color:#f3c98b;
}
/***************************************************************
TEXT
***************************************************************/
menu ul li a span{

    font-size:13px;

    line-height:1;
}

/***************************************************************
SMALL TEXT
***************************************************************/
menu ul li a small{

    font-size:11px;

    color:
    rgba(255,255,255,.45);

    line-height:1;
}

/***************************************************************
HOVER
***************************************************************/
@media (hover:hover){

    menu ul li a:hover{

        transform:
        translateY(-3px);

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

        color:#ffcc84;

        box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 10px 25px rgba(0,0,0,.18);
    }

    menu ul li a:hover i{

        transform:scale(1.08);

        color:#ffd79d;
    }
}

/***************************************************************
ACTIVE
***************************************************************/
menu ul li a.active{

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

    color:#ffcc84;

	box-shadow:
	inset 0 0 0 1px rgba(255,204,132,.14),
	0 6px 18px rgba(0,0,0,.18);
}

menu ul li a.active i{

    color:#ffd79d;
}

/***************************************************************
HOME BUTTON
***************************************************************/
menu .menu-home a{

    min-width:72px;

    padding:0;
}

/***************************************************************
SCROLL SHRINK
***************************************************************/
menu.is-fixed ul li a{

    height:62px;

    min-width:96px;

    gap:4px;

    border-radius:16px;
}

menu.is-fixed ul li a i{

    font-size:18px;
}

menu.is-fixed ul li a span{

    font-size:12px;
}

/***************************************************************
RESPONSIVE
***************************************************************/
@media (max-width:1200px){
	menu{
		width:100%;
		margin-left:0;
		left:0;
		border-radius:0;
		bottom:85px;
	}
}
@media (max-width:1024px){

    menu{

        overflow-x:auto;
        overflow-y:hidden;

        width:100%;
        max-width:100vw;

        left:0;

        padding:0 14px;
    }

    menu::-webkit-scrollbar{
        display:none;
    }

    menu .menu-title{
        display:none;
    }

    menu ul{

        flex-wrap:nowrap;

        justify-content:center;

        width:max-content;
        min-width:100%;

        gap:10px;

        padding:0;
    }

    menu ul li{

        flex:0 0 auto;
    }

    menu ul li a{

        min-width:92px;

        height:66px;

        padding:0 14px;

        gap:5px;

        border-radius:16px;
    }

    menu ul li a i{

        font-size:18px;
    }

    menu ul li a span{

        font-size:11px;
    }

    menu ul li a small{

        display:none;
    }

    menu.is-fixed{

        height:72px;
    }
}

/***************************************************************
MOBILE PREMIUM
***************************************************************/
@media (max-width:768px){

    html{
        scroll-padding-top:80px;
    }

    menu{

        width:100%;

        height:78px;
		bottom:78px;
        margin:0;
        padding:
            8px 10px
            calc(env(safe-area-inset-bottom,0px) + 8px);

        border-radius:0;

        background:
        rgba(10,10,10,.92);

        backdrop-filter:
        blur(24px);

        border:none;

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

        box-shadow:
        0 -10px 40px rgba(0,0,0,.28);

        overflow-x:auto;
        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        z-index:999;
    }

    menu::-webkit-scrollbar{
        display:none;
    }


    /***********************************************************
    MENU LIST
    ***********************************************************/
    menu ul{

        width:max-content;
        min-width:100%;

        display:flex;

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

        gap:8px;

        padding:0;
        margin:0;

        scroll-snap-type:x proximity;
    }

    menu ul li{

        flex:0 0 auto;

        scroll-snap-align:center;
    }

    /***********************************************************
    MENU BUTTON
    ***********************************************************/
    menu ul li a{

        min-width:72px;

        height:56px;

        padding:0 10px;

        border-radius:18px;

        gap:3px;

        transition:
        background .25s ease,
        transform .2s ease,
        color .25s ease;
    }

    menu ul li a:active{

        transform:scale(.96);
    }

    /***********************************************************
    ICON
    ***********************************************************/
    menu ul li a i{

        font-size:18px;
    }

    /***********************************************************
    TEXT
    ***********************************************************/
    menu ul li a span{

        font-size:10px;

        font-weight:600;

        letter-spacing:-0.3px;
    }

    /***********************************************************
    SMALL TEXT HIDE
    ***********************************************************/
    menu ul li a small{
        display:none;
    }

    /***********************************************************
    ACTIVE
    ***********************************************************/
    menu ul li a.active{

        background:
        linear-gradient(
            180deg,
            rgba(255,204,132,.22),
            rgba(255,204,132,.08)
        );

        box-shadow:
        inset 0 0 0 1px rgba(255,204,132,.22),
        0 8px 20px rgba(0,0,0,.24);
    }

    menu ul li a.active i,
    menu ul li a.active span{

        color:#ffd79d;
    }

    /***********************************************************
    HOME BUTTON
    ***********************************************************/
    menu .menu-home a{

        min-width:58px;
    }
}
@media (max-width:768px){

    menu.is-fixed{

        position:fixed;

        top:0;
        left:0;

        bottom:auto;

        width:100%;

        height:78px;

        padding:
            8px 10px;

        border-radius:0;

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

        backdrop-filter:
        blur(24px);

        border:none;

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

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

        z-index:99999;
    }

    menu.is-fixed ul{

        justify-content:flex-start;
    }

    menu.is-fixed ul li a{

        min-width:72px;

        height:56px;

        border-radius:18px;

        gap:3px;
    }

    menu.is-fixed ul li a i{

        font-size:18px;
    }

    menu.is-fixed ul li a span{

        font-size:10px;
    }
}