.pagination {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    list-style: none;
    font-family: Montserrat, sans-serif;
}

    .pagination li {
        margin: 0 5px;
    }

        .pagination li button {
            display: block;
            padding: 10px 15px;
            color: #ee7f00;
            font-weight: 500;
            font-size: 0.875rem;
            text-transform: uppercase;
            background-color: #fff;
            border: 1px solid #ee7f00;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
            text-decoration: none;
        }

            .pagination li button:hover,
            .pagination li.active button {
                background-color: #ee7f00;
                color: #fff;
                cursor: pointer;
            }

        .pagination li.disabled button {
            color: #999;
            cursor: not-allowed;
            border-color: #ccc;
        }

            .pagination li.disabled button:hover {
                background-color: #fff;
                color: #999;
            }

        .pagination li:first-child button,
        .pagination li:last-child button {
            border-radius: 5px;
        }

@media (max-width: 600px) {
    .pagination {
        flex-wrap: wrap;
    }

        .pagination li {
            margin: 2px;
        }

            .pagination li button {
                padding: 8px 10px;
                font-size: 0.75rem;
            }

            .pagination li.disabled button {
                pointer-events: none;
            }

            .pagination li:nth-child(n+4):nth-last-child(n+4):not(.active) {
                display: none;
            }

            .pagination li:first-child button,
            .pagination li:last-child button {
                display: block;
            }
}