Pro menu to accordion on mobile - CSS

#footer .sub-menu{

    background-color: transparent;
}




@media (min-width: 768px){

    #footer .sub-menu{
        visibility: visible;
        position: static;
        margin-left: 0.5rem;

    }

    #footer .menu-item{
        display: initial;
    }


    #footer .oxy-pro-menu-dropdown-icon{
        display: none;
    }

    #footer .oxy-pro-menu-list{
        align-items: flex-start;
    }

    #footer .footer-menu-title > a{
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        pointer-events: none;

    }
    #footer .menu-footer-menu-container{
        width: 100%
    }



    #footer .oxy-pro-menu-container .sub-menu{
        display: flex !important;
    }





}




@media (max-width: 767px){

    #footer .oxy-pro-menu-mobile-close-icon{
        display:none;
    }

    #footer .menu-footer-menu-container{
        width: 100%
    }

    #footer .menu-item-object-custom > a div {
        margin-left: auto;
    }


    #footer .oxy-pro-menu-container{

        position: initial;
    }

    #footer .sub-menu{

        padding: 1rem 2rem;
    }

    #footer .oxy-pro-menu-dropdown-icon-click-area {

        touch-action: none;
        pointer-events: none;
    }

    #footer .footer-menu-title{
        margin-bottom: 1rem;


    }


    #footer .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
        background-color: transparent;
    }


    #footer .footer-menu-title > a{
        padding: .4rem 1rem;
        font-weight: 700;
        text-transform: uppercase;
        background: #e8f1ff;

    }
}