.sideMenuWrap {
    width: 400px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #000;
    z-index: 91;
    transform: translateX(100%);
    transition: 0.5s;
    .sideMenuTop{
        padding: 15px;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        &::after{
            width: 0;
            height: 1px;
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            background: #cecece4a;
            transition: 1s;
        }
        .sideLogo{
            width: 165px;
            img{
                width: 100%;
            }
        }
        .closeIcon{
            cursor: pointer;
            color: #b4b4b4;
            font-size: 30px;
        }
    }
    .sideMenu{
        padding: 25px;
        ul{
            li{
                width: 100%;
                display: block;
                position: relative;                
                &:not(:last-child){
                    &::after{
                        width: 0;
                        height: 1px;
                        position: absolute;
                        content: "";
                        left: 0;
                        bottom: 0;
                        background: #cecece4a;
                        transition: 2s;
                    }
                }
                a{
                    color: #b6b6b6;
                    display: inline-flex;
                    padding: 15px 0;
                    font-size: 18px;
                }
                &.mobDrop{
                    position: relative;
                    .toggleBtn2{
                        position: absolute;
                        right: 0;
                        top: 15px;
                        cursor: pointer;
                        color: #b6b6b6;
                        font-size: 14px;
                        transition: 0.5s;
                    }
                    ul{
                        display: none;
                        padding-left: 15px;
                        li:first-child{
                            a{
                                padding-top: 0px;
                            }
                        }
                    }
                    &.open{
                        .toggleBtn2{
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
    }
    .sideMenuMiddle{
        display: flex;
        height: calc(100vh - 105px);
        .sideSocial{
            width: 50px;
            height: 100%;
            .socialWrap{
                transform: rotate(180deg);
                writing-mode: vertical-rl;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                display: flex;
                gap: 30px;
                background-color: #2020209c;
                h5{
                    color: #b6b6b6;
                    text-transform: uppercase;
                    font-family: "Work Sans";
                    font-size: 16px;
                }
                .socialIcon{
                    display: flex;
                    gap: 25px;
                    writing-mode: sideways-rl;
                    a{
                        font-size: 16px;
                        color: #b6b6b6;
                        transition: 0.5s;
                        &:hover{
                            color: #dfb43f;
                        }
                    }
                }
            }
        }
        .sideMenu{
            width: calc(100% - 50px);
            position: relative;
            &::before{
                width: 1px;
                height: 0;
                position: absolute;
                left: 0;
                top: 0;
                content: "";
                background-color: #cecece4a;
                transition: 2s;
            }
        }
    }
}
.sideNav{
    height: 100vh;
    overflow: hidden;
    .sideMenuWrap {
        transform: translateX(0);
        .sideMenuTop {
            &::after {
                width: 100%;
            }
        }
        .sideMenuMiddle {
            .sideMenu {
                &::before {
                    height: 100%;
                }
            }
        }
        .sideMenu {
            ul {
                li {
                    &:not(:last-child) {
                        &::after {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
.overflowPage{
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    &.sideOverlay{
        position: fixed;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        top: 0;
        left: 0;
        opacity: 1;
        visibility: visible;
        z-index: 9;
        background-color: #ffffff63;
    }
}

@media (max-width: 460px) {
    .sideMenuWrap{
        width: 100%;
    }
}