<!-- Pagination -->
<nav
    class="flex flex-wrap items-center sm:justify-center justify-between gap-1.5 w-full bg-muted/25 border-t-2 rounded-t-xl py-3 px-4">
    <a href="#"
        class="inline-flex items-center justify-center gap-x-1 h-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5 me-auto">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 rtl:rotate-180">
            <path fill-rule="evenodd"
                d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
                clip-rule="evenodd" />
        </svg>
        <span class="font-medium text-sm">قبلی</span>
    </a>

    <a href="#"
        class="hidden sm:inline-flex items-center justify-center size-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5">
        <span class="font-medium text-sm">1</span>
    </a>

    <a href="#"
        class="hidden sm:inline-flex items-center justify-center size-9 bg-primary rounded-lg shadow cursor-default text-primary-foreground px-3.5">
        <span class="font-medium text-sm">2</span>
    </a>

    <a href="#"
        class="hidden sm:inline-flex items-center justify-center size-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5">
        <span class="font-medium text-sm">3</span>
    </a>

    <span
        class="hidden sm:inline-flex items-center justify-center size-9 bg-background rounded-lg shadow select-none text-muted-foreground px-3.5">
        <span class="font-medium text-sm">...</span>
    </span>

    <a href="#"
        class="hidden sm:inline-flex items-center justify-center size-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5">
        <span class="font-medium text-sm">8</span>
    </a>

    <a href="#"
        class="hidden sm:inline-flex items-center justify-center size-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5">
        <span class="font-medium text-sm">9</span>
    </a>

    <a href="#"
        class="inline-flex items-center justify-center gap-x-1 h-9 bg-background rounded-lg shadow cursor-pointer text-muted-foreground hover:text-foreground px-3.5 ms-auto">
        <span class="font-medium text-sm">بعدی</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 rtl:rotate-180">
            <path fill-rule="evenodd"
                d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
                clip-rule="evenodd" />
        </svg>
    </a>
</nav>
<!-- end Pagination -->