/*========================================
        Variables
========================================*/

:root{

    --primary:#7c3aed;
    --primary-light:#a855f7;
    --dark:#12081d;
    --dark2:#1c0d2e;
    --gold:#f4c96b;
    --white:#ffffff;
    --border:rgba(255,255,255,.08);

}


/*========================================
        Overlay
========================================*/

.menu-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


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

.side-menu{

    position:fixed;

    top:0;

    right:-380px;

    width:360px;

    max-width:100%;

    height:100vh;

    background:linear-gradient(
        180deg,
        #100616,
        #221036
    );

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

    transition:.4s ease;

    z-index:9999;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.side-menu.active{

    right:0;

}


/*========================================
        Header
========================================*/

.side-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

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

}

.side-header img{

    width:170px;

    transition:.3s;

}

.side-header img:hover{

    transform:scale(1.04);

}


/*========================================
        Close Button
========================================*/

.close-menu{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

    font-size:18px;

}

.close-menu:hover{

    background:var(--primary);

    transform:rotate(90deg);

}


/*========================================
        Search
========================================*/

.side-search{

    padding:20px;

    display:flex;

    gap:10px;

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

}

.side-search input{

    flex:1;

    height:48px;

    border:none;

    border-radius:14px;

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

    color:#fff;

    padding:0 15px;

    font-family:inherit;

    outline:none;

    transition:.3s;

}

.side-search input::placeholder{

    color:#b8b8b8;

}

.side-search input:focus{

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

    box-shadow:0 0 0 2px rgba(124,58,237,.4);

}

.side-search button{

    width:48px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.side-search button:hover{

    transform:scale(1.05);

}


/*========================================
        Menu List Container
========================================*/

.menu-list{

    flex:1;

    overflow-y:auto;

    padding:15px 0;

    list-style:none;

    margin:0;

}


/* Scrollbar */

.menu-list::-webkit-scrollbar{

    width:6px;

}

.menu-list::-webkit-scrollbar-thumb{

    background:#7c3aed;

    border-radius:20px;

}

.menu-list::-webkit-scrollbar-track{

    background:transparent;

}


/*========================================
        Footer
========================================*/

.side-footer{

    padding:18px;

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

}

.side-footer a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    height:52px;

    border-radius:15px;

    transition:.35s;

    font-weight:700;

}

.side-footer a:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(124,58,237,.35);

}

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

@media(max-width:576px){

.side-menu{

width:100%;

right:-100%;

}

.side-header{

padding:18px;

}

.side-header img{

width:100px;
/* width:145px; */

}

.side-search{

padding:15px;

}

}

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

.menu-list>li{

    margin:6px 12px;

}


/*========================================
            Normal Link
========================================*/

.menu-list li>a,
.menu-link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 18px;

    border-radius:16px;

    text-decoration:none;

    color:#fff;

    cursor:pointer;

    transition:.35s;

    user-select:none;

}

.menu-list li>a:hover,
.menu-link:hover{

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

}


/*========================================
            Right Side
========================================*/

.menu-link div,
.menu-list li>a{

    display:flex;

    align-items:center;

    gap:14px;

}


/*========================================
            Icons
========================================*/

.menu-list li>a i,
.menu-link div i{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

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

    color:var(--gold);

    font-size:17px;

    transition:.35s;

}

.menu-list li>a:hover i,
.menu-link:hover div i{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

}


/*========================================
            Arrow
========================================*/

.arrow{

    color:#bbb;

    transition:.35s;

    font-size:14px;

}


/* Rotate */

.has-submenu.active>.menu-link .arrow{

    transform:rotate(-90deg);

    color:var(--gold);

}


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

.submenu{

    list-style:none;

    padding-right:18px;

    margin-top:6px;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}


/* Active */

.has-submenu.active>.submenu{

    max-height:1200px;

}


/*========================================
        Submenu Links
========================================*/

.submenu li{

    margin:5px 0;

}

.submenu li a{

    display:flex;

    align-items:center;

    text-decoration:none;

    color:#d9d9d9;

    padding:12px 18px;

    border-radius:14px;

    transition:.3s;

    font-size:15px;

    position:relative;

}


/* Bullet */

.submenu li a::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

    margin-left:12px;

    flex-shrink:0;

}


/* Hover */

.submenu li a:hover{

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

    color:#fff;

    padding-right:24px;

}


/*========================================
        Nested Submenu
========================================*/

.submenu .submenu{

    margin-top:5px;

    padding-right:18px;

    border-right:1px dashed rgba(255,255,255,.08);

}


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

.menu-list li.active>a{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

}

.menu-list li.active>a i{

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

    color:#fff;

}


/*========================================
        Divider
========================================*/

.menu-list>li:not(:last-child){

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

    padding-bottom:6px;

}


/*========================================
        Ripple Hover
========================================*/

.menu-link,
.menu-list a{

    position:relative;

    overflow:hidden;

}

.menu-link::before,
.menu-list a::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:translateX(-100%);

    transition:.5s;

}

.menu-link:hover::before,
.menu-list a:hover::after{

    transform:translateX(100%);

}

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

@media(max-width:576px){

.menu-list>li{

margin:5px 8px;

}

.menu-link,
.menu-list li>a{

padding:14px;

}

.menu-list li>a i,
.menu-link div i{

width:34px;

height:34px;

font-size:15px;

}

.submenu li a{

font-size:14px;

padding:11px 14px;

}

}


/*========================================
        Floating Menu Button
========================================*/

.floating-menu-btn{

    position:fixed;

    bottom:20px;

    right:20px;

    width:65px;

    height:65px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#7c3aed,#a855f7);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    z-index:9997;

    box-shadow:0 12px 35px rgba(124,58,237,.35);

    transition:.35s;

    overflow:hidden;

}

.floating-menu-btn span{

    display:none;

    white-space:nowrap;

    font-size:15px;

    font-weight:600;

}

.floating-menu-btn:hover{

    width:170px;

    justify-content:center;

}

.floating-menu-btn:hover span{

    display:inline;

}

.floating-menu-btn i{

    font-size:22px;

}


/*========================================
        Pulse Animation
========================================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(124,58,237,.4);

    }

    70%{

        box-shadow:0 0 0 18px rgba(124,58,237,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(124,58,237,0);

    }

}

.floating-menu-btn{

    animation:pulse 2.5s infinite;

}


/*========================================
        Side Menu Animation
========================================*/

.side-menu{

    will-change:right;

}

.side-menu.active{

    animation:menuOpen .35s ease;

}

@keyframes menuOpen{

    from{

        opacity:.7;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*========================================
        Hover Effects
========================================*/

.side-menu a:hover,

.menu-link:hover{

    transform:translateX(-4px);

}

.side-menu a,

.menu-link{

    transition:all .3s ease;

}


/*========================================
        Active Link
========================================*/

.menu-list li>a.active{

    background:linear-gradient(135deg,#7c3aed,#a855f7);

    color:#fff;

    box-shadow:0 8px 20px rgba(124,58,237,.25);

}


/*========================================
        Search Animation
========================================*/

.side-search input{

    transition:

    background .3s,

    box-shadow .3s,

    transform .3s;

}

.side-search input:focus{

    transform:translateY(-2px);

}


/*========================================
        Glass Effect
========================================*/

.side-header,

.side-search,

.side-footer{

    backdrop-filter:blur(8px);

}


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

@media(max-width:768px){

.floating-menu-btn{

width:60px;

height:60px;

bottom:18px;

right:18px;

}

.floating-menu-btn:hover{

width:60px;

}

.floating-menu-btn span{

display:none !important;

}

}


/*========================================
        Small Mobile
========================================*/

@media(max-width:480px){

.side-menu{

width:100%;

}

.floating-menu-btn{

width:55px;

height:55px;

bottom:15px;

right:15px;

}

.floating-menu-btn i{

font-size:20px;

}

}


/*========================================
        Large Desktop
========================================*/

@media(min-width:1400px){

.side-menu{

width:400px;
right:-400px;

}

.side-header img{

width:190px;

}

.menu-link,

.menu-list li>a{

padding:18px 22px;

font-size:17px;

}

}


/*========================================
        Reduce Motion
========================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

}

}


/*========================================
        Better Focus
========================================*/

.floating-menu-btn:focus,

.close-menu:focus,

.side-search input:focus,

.side-search button:focus{

outline:2px solid #a855f7;

outline-offset:3px;

}