fix step styling

[FadyEmad01]

@Utility step {
counter-increment: step;

&:before {
@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-center dark:text-white -indent-px font-mono text-base font-medium dark:border-zinc-800 dark:bg-zinc-950;
@apply ml-[-50px] mt-[-4px];
content: counter(step);
}
}
The issue lies in using @apply with dark: classes — Tailwind does not support applying dark: variants with @apply

and this is the right code

@Utility step {
counter-increment: step;

&:before {
@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border text-center -indent-px font-mono text-base font-medium;
@apply border-zinc-200 bg-neutral-100 text-zinc-950;
@apply ml-[-50px] mt-[-4px];

content: counter(step);

}

.dark &:before {
@apply bg-zinc-800 text-white border-zinc-700;
}
}