#{$prefix}-primary-menu-wrapper {
    background: #0a0a0a;
    z-index: 9;
    @include mobile {
        padding: 10px 0;
    }
    #{$prefix}-menu-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        @include mobile {
            display: block;
        }
        #{$prefix}-primary-menu{
            @include mobile {
                display: none;
            }
            > ul {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
                @include mobile {
                    display: block;
                    height: 100%;
                    overflow-y: auto;
                    z-index: 99999;
                    overflow-x: hidden;
                }
                > li {
                    position: relative;
                    display: inline-block;
                    padding: 15px 0;
                    margin-right: 30px;
                    @include mobile {
                        display: block;
                        padding: 10px 0;
                        margin-right: 0;
                    }
                    a {
                        color: #fff;
                        font-size: 18px;
                        transition: all .3s ease-in-out;
                        font-weight: 600;
                        &:hover {
                            color: #f67280;
                        }
                    }
                    .dropdown-toggle {
                        margin-left: 5px;
                        pointer-events: none;
                        @include mobile {
                            display: inline-block;
                            float: right;
                            width: 30px;
                            height: 30px;
                            transition: all 0.3s linear;
                            position: absolute;
                            right: 0;
                            top: 10px;
                            bottom: 0;
                            pointer-events: visible;
                        }
                        i {
                            font-size: 13px;
                        }
                    }
                    ul {
                        position: absolute;
                        background: #333;
                        list-style: none;
                        margin: 0;
                        padding: 20px 0;
                        width: 250px;
                        transition: all .3s;
                        box-shadow: 0 0 10px #00000014;
                        top: 100%;
                        opacity: 0;
                        visibility: hidden;
                        z-index: -1;
                        @include mobile {
                            position: relative;
                            padding: 10px 0 0;
                            width: auto;
                            box-shadow: none;
                            background: #000000;
                            visibility: visible;
                            z-index: 999;
                            opacity: 1;
                            margin: 0;
                            transition: none;
                        }
                        li {
                            position: relative;
                            a {
                                color: #fff;
                                display: block;
                                padding: 5px 20px;
                                margin-bottom: 10px;
                                line-height: 20px;
                                font-size: 16px;
                                transition: all .3s ease-in-out;
                                font-weight: 400;
                                @include mobile {
                                    padding: 5px 0 2px 15px;
                                    transition: none;
                                    font-weight: 500;
                                }
                                &:hover {
                                    color: #ed906f;
                                }
                                
                            }
                            .dropdown-toggle {
                                position: absolute;
                                right: 10px;
                                top: 2px;
                                @include mobile {
                                    right: 15px;
                                }
                                i {
                                    font-size: 13px;
                                }
                            }

                            &:last-child a {
                                margin-bottom: 0;
                            }
                            ul {
                                margin: 0;
                                padding: 15px 0;
                                list-style: none;
                                @include mobile {
                                    padding: 0;
                                }
                                li {
                                    
                                    a {
                                        font-size: 15px;
                                       @include mobile {
                                            padding: 2px 0 2px 30px;
                                            margin-bottom: 10px;
                                            font-weight: 400;
                                            
                                        } 
                                    }
                                }
                            } 
                        }

                        ul {
                            left: 100%;
                            top: 0;
                            opacity: 0;
                            visibility: hidden;
                            z-index: -1;
                             @include mobile {
                                 left: auto;
                                 opacity: 1;
                                 visibility: visible;
                            }
                       }
                    }
                    &:hover,
                    &:focus-within {
                        > ul {
                            top: 100%;
                            opacity: 1;
                            visibility: visible;
                            z-index: 99;
                        }
                        
                    }

                    ul {
                        li {
                            position: relative;
                            &:hover, 
                            &:focus-within {
                                > ul {
                                    opacity: 1;
                                    visibility: visible;
                                    z-index: 99;
                                    @include mobile {
                                        left: 0;
                                        margin: 0;
                                        padding: 0;
                                    }
                                } 
                            }
                        }
                    }

                    &.menu-item-has-children {
                       > a {
                            text-align: center;
                            // color: #fff;
                            @include mobile {
                                // text-align: left;
                                height: 30px;
                            }

                        }
                        
                    }
                    
                }
            }
        }

    }
}


.royalnews-primary-menu-wrapper .royalnews-menu-wrapper .royalnews-primary-menu > ul > li .sub-menu li:hover > .sub-menu {
    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.royalnews-primary-menu-wrapper .royalnews-menu-wrapper .royalnews-primary-menu > ul > li .sub-menu li:hover > .sub-menu {
    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}