<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="page-item page-indicator">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active">
            <a class="size-10 leading-10 text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="page-item">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="page-item page-indicator">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="page-item page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active">
            <a class="size-7.5 leading-[30px] text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="page-item">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="page-item page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 text-xs">
        <li class="page-item page-indicator">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="page-item active">
            <a class="size-6 leading-6 text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="page-item">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="page-item page-indicator">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
														
													

														
<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-10 leading-10 text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-7.5 leading-[30px] text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 text-xs">
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-6 leading-6 text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border border-border rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
														
													

														
<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-primarylight rounded-lg block bg-primarylight duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-transparent rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">1</a></li>
        <li class="mr-[7px] active">
            <a class="size-10 leading-10 text-center border rounded-lg block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">2</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-transparent rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-transparent rounded-lg block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-primarylight rounded-lg block bg-primarylight duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-dangerlight rounded-lg block bg-dangerlight duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-dangerlight rounded-lg block bg-dangerlight duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-[7px]" href="javascript:void(0);">1</a></li>
        <li class="mr-[7px] active">
            <a class="size-10 leading-10 text-center border rounded-lg block duration-500 bg-danger text-white border-danger ml-[7px]" href="javascript:void(0);">2</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-dangerlight rounded-lg block bg-dangerlight duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-dangerlight rounded-lg block bg-dangerlight duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border border-dangerlight rounded-lg block bg-dangerlight duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-infolight rounded-lg block bg-infolight duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-infolight rounded-lg block bg-infolight duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-[7px]" href="javascript:void(0);">1</a></li>
        <li class="mr-[7px] active">
            <a class="size-7.5 leading-[30px] text-center border rounded-lg block duration-500 bg-info text-white border-info ml-[7px]" href="javascript:void(0);">2</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-infolight rounded-lg block bg-infolight duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-infolight rounded-lg block bg-infolight duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border border-infolight rounded-lg block bg-infolight duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
<nav>
    <ul class="flex mb-5 text-xs">
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border border-warninglight rounded-lg block bg-warninglight duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-warninglight rounded-lg block bg-warninglight duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-[7px]" href="javascript:void(0);">1</a></li>
        <li class="mr-[7px] active">
            <a class="size-6 leading-6 text-center border rounded-lg block duration-500 bg-warning text-white border-warning ml-[7px]" href="javascript:void(0);">2</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-warninglight rounded-lg block bg-warninglight duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-warninglight rounded-lg block bg-warninglight duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border border-warninglight rounded-lg block bg-warninglight duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>
														
													

														
<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-10 leading-10 text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-10 leading-10 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-10 leading-10 text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 sm:text-base">
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-7.5 leading-[30px] text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-7.5 leading-[30px] text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-7.5 leading-[30px] text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="flex mb-5 text-xs">
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
        </li>
        <li class="mr-[7px] active">
            <a class="size-6 leading-6 text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-[7px]" href="javascript:void(0);">1</a>
        </li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">2</a></li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">3</a></li>
        <li class="mr-[7px]">
            <a class="size-6 leading-6 text-center border border-border rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);">4</a></li>
        <li class="mr-[7px] page-indicator">
            <a class="size-6 leading-6 text-center border rounded-full block bg-primarylight duration-500 hover:bg-primary hover:text-white border-primary text-dark dark:text-white ml-[7px]" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
        </li>
    </ul>
</nav>