.main-menu {
    li {
        @apply relative;

        &:hover {
            &>.submenu {
                @apply scale-y-100;
            }
        }
    }

    .submenu {
        @apply absolute left-full -ml-0.5 top-0 w-[220px] shadow-2xl bg-white scale-y-0;

        li {

            a {
                @apply text-[#000000] block hover:text-cmain px-3 py-2 transition-all duration-200;
            }

            &+li {
                @apply border-t border-solid border-gray-300;

            }
        }
    }

    /* MARK: first element
    */
    &>li {
        @apply relative z-10;

        &>a {
            @apply text-black flex items-center justify-center text-opacity-80 px-6 text-base relative hover:text-cmain text-center capitalize min-h-7;

            &:has(+.submenu),
            &:has(+.menu_menu) {
                /* &::after {
                    @apply inline-block text-[#000000] text-opacity-60 hover:text-cmain ml-1 text-sm;
                    content: "\f107";
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                } */
            }

            &.active {
                @apply text-cmain font-semibold;
            }

            /* &:hover::before,
            &.active::before {
                content: '';
                @apply absolute bottom-0 left-1/2 -translate-x-1/2 w-[calc(100%+theme(spacing.4))] h-[calc(100%-5px)] z-[-1] bg-cmain rounded-t-lg;
            } */

            /* &:hover::before, &.active::before{
                content: url('../images/nav-hover.png');
                @apply absolute -bottom-1 left-1/2 -translate-x-1/2;
            } */
        }

        &>.submenu {
            @apply top-full left-0;
        }
    }

    &>li>.submenu {
        @apply rounded-b-lg;
    }

    /* MARK: mega menu
    */
    .menu_menu {
        @apply scale-y-0;
    }

    &>li:hover {
        .menu_menu {
            @apply scale-y-100;
        }
    }
}