﻿.layout-opacity-mobile {
    display: none;
}
.icon-size-menu {
    font-size: 2.2rem;
}
.menu-wrapper-scroll {
    position: sticky;
    z-index: 1;
    top: 0;
}


#main-menu ul.menu li ul.submenu li:nth-last-child(1) {
    border: unset !important;
}

#main-menu ul.menu .li-parent .nav-link-desktop .nav__link-left, #main-menu ul.menu .li-parent .nav__link .nav__link-left, .nav__link-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.menu-wrapper_boxshadow {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}
#main-menu ul.menu li a, #main-menu ul.menu li .nav-link-mobile, #main-menu .menu li, .mega-submenu .grid-mega .mega-child-form a.mega-title-parent, .mega-submenu .grid-mega .mega-child-form a.mega-title-child {
    transition: all .28s ease;
}
#main-menu ul.menu li a, #main-menu ul.menu li .nav-link-mobile {
    padding: 10px;
}
.mega-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

#main-menu .menu .li-parent:nth-last-child(-n+1), .mega-submenu .grid-mega .mega-child-form:nth-last-child(-n+1) {
    border: none;
}

@media screen and (min-width: 960px) {
    .menu-containner-mobile-main, .nav-link-mobile, .menu-toggle-mobile {
        display: none;
    }

    .mega-submenu .grid-mega .mega-child-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        
    }


    #main-menu ul.menu ul.mega-submenu-mobile, #main-menu ul.menu li ul.submenu ul.submenu, #main-menu ul.menu li ul.submenu {
        display: none !important;
    }

    .menu-container {
        display: flex;
        justify-content: space-between;
    }

    #main-menu ul.menu > .li-parent:after {
        content: '';
        width: 150px;
        height: 40px;
        z-index: 0;
        position: absolute;
        display:none;
    }

    #main-menu ul.menu > .li-parent:hover::after {
        display: block;
    }



    .menu-container .menu-action {
        display: flex;
        margin-left: 20px;
    }

    .menu-grouplogo {
        margin-right: 20px;
    }



    .menu-container .container-groupmain-position {
        display: flex;
        align-items: center;
    }



    #main-menu .menu .li-parent .mega-submenu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
    }

        #main-menu .menu .li-parent .mega-submenu .grid-mega {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 12px;
            padding-bottom:30px;
            padding-top:30px;
        }

    #main-menu .menu .li-parent:hover > .mega-submenu {
        display: flex;
    }



    #main-menu ul.menu {
        display: flex;
        align-items: center;
    }


        #main-menu ul.menu li ul.submenu li:hover > ul.submenu {
            position: absolute;
            left: calc(100% + 1px);
            top: 0;
            z-index: 1;
        }

        #main-menu ul.menu li:hover > ul.submenu, #main-menu ul.menu li ul.submenu li:hover > ul.submenu {
            display: block !important;
        }

        #main-menu ul.menu li ul.submenu {
            position: absolute;
            min-width: max-content;
            width:250px;
            z-index: 1;
        }

        #main-menu ul.menu li {
            position: relative;
        }

            #main-menu ul.menu li.li-parent {
                position:static;
            }

            #main-menu ul.menu li a {
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
    .nav-link-desktop {
        display: block;
    }
}
@media screen and (max-width: 960px) {
    .container-groupmain-position .menu-action {
        width: fit-content;
    }
    .mega-submenu .grid-mega .mega-child-form, .mega-submenu, .mega-img, #main-menu ul.menu ul.mega-submenu-mobile, .nav-icon-mobile, .submenu, .nav-link-desktop {
        display: none;
    }
    #main-menu ul.menu li ul.submenu {
        background-color: unset !important;
    }
    .logo-brand {
        padding:5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-containner-mobile-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        position: sticky;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .layout-opacity-mobile {
        background: rgba(0,0,0,.4);
        position: fixed;
        width: 100%;
        top: 0;
        height: 100vh;
        z-index: 1;
    }



    .menu-toggle-mobile {
        display: flex;
        padding: 4px;
        border-radius: 4px;
        opacity: 1;
        box-sizing: border-box;
        transition: opacity .2s linear;
    }

        .menu-toggle-mobile:hover {
            opacity: .7;
            cursor:pointer;
        }


    .menu-container .menu-action {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .menu-container {
        padding: 0 5px;
        position: fixed;
        left:0;
        top: 0;
        height: 100vh;
        width: 300px;
        z-index: 3;
        transform: translate(-100%);
        transition: transform .15s linear,opacity .15s linear;
    }

    .toggle-mobile {
        display: flex;
        align-items: center;
    }

    #btn-toggle-mobile:checked ~ .mud-container .menu-container {
        transform: translate(0%);
        opacity: 1;
    }

    #btn-toggle-mobile:checked ~ .layout-opacity-mobile {
        display: block;
    }

    .logo-mobile-action, .navbar-toggler {
        display: flex;
    }

    .menu-container .container-groupmain-position {
        display: block;
    }

    #main-menu .menu {
        display: block;
    }

    #main-menu {
        padding: 25px 0;
    }

        #main-menu ul.menu li {
            display: flex;
            flex-direction: column;
        }
    .nav-link-mobile {
        display: block;
    }


    #main-menu ul.menu li .nav-link-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #main-menu ul.menu ul.submenu, #main-menu ul.menu ul.mega-submenu-mobile {
        padding: 10px;
    }
}
