#nav {
    color: #fff;
    .nav-link {
        // @apply block uppercase text-base py-2  pl-2 md:pl-0 hover:text-primary border-white mx-2 mt-1 md:bg-opacity-0 bg-opacity-50 bg-gray-500  border-b-2 text-primary;
        @apply w-full uppercase text-base py-2 md:mx-0 pl-2 md:pl-0 hover:text-primary border-white  mt-1 md:bg-opacity-0 bg-opacity-50 bg-gray-500 ;

    }

    .nav-sublink {
        @apply block text-base pr-2 md:pr-0  pl-2 md:pl-1 hover:text-primary border-white mx-2 mt-0 md:bg-opacity-0 bg-opacity-50 bg-gray-500 w-full;
    }

    >ul>li.relative {
        @apply px-2;
    }
    ul>li.relative {
        @apply px-2;
    }

    a {
        &.active {
            @apply border-b-2 text-primary;
        }
        &.with-childrens {
            @apply inline-flex items-center;
            &::after {
                content: url("data:image/svg+xml; utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22white%22%20width%3D%2214%22%20height%3D%2214%22%20class%3D%22hidden%20lg%3Ainline-block%20fill-white%20-mt-%5B2px%5D%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%200%201%20.708%200l6%206a.5.5%200%200%201%200%20.708l-6%206a.5.5%200%200%201-.708-.708L10.293%208%204.646%202.354a.5.5%200%200%201%200-.708z%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
                @apply block ml-[3px] h-5;
                // display: block;
                // width: 22px;
                // height: 10px;
                // margin: 10px 5px 0 10px;
            }
        }
    }

}