.pagination{ padding: 50px 0; font-family: var(--poppins); font-size: 16px; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.pagination ul{ display: flex; gap: 2px; }
.pagination ul li{ display: flex; width: 35px; height: 35px; }
.pagination ul li.active{ display: flex; width: 35px; height: 35px; margin-left: 5px; margin-right: 5px; }
.pagination ul li a{ display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; background: transparent; transition: var(--transition); border-radius: 100%; }
.pagination ul li span{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--grey-222); font-weight: 600; border-radius: 100%; }
.pagination ul li a:hover{ background: var(--grey-222); }
.pagination ul li a i{ font-size: 20px; }
.pagination ul li.dots span{ color: var(--white-aaa); background: transparent; }

/* Decades Pagination */
.pagination.decades{ padding: 10px 0 20px; margin-bottom: 10px; }
.pagination.decades ul{ border-bottom: 1px dashed var(--grey-555); padding-bottom: 10px; width: 100%; justify-content: space-between; }
.pagination.decades ul li{ display: flex; width: auto; height: auto; margin: 0 5px; }
.pagination.decades ul li a{ font-size: 16px; padding: 0; border-radius: 5px; line-height: 1; color: var(--grey-888); display: inline-block; width: auto; height: auto; font-weight: 500; }
.pagination.decades ul li span{ padding: 0; font-size: 16px; }
.pagination.decades ul li:hover a{ background: none; color: var(--white); }
.pagination.decades ul li.active span{ border-radius: 5px; color: var(--yellow); background: none; position: relative; }
.pagination.decades ul li.active span:before{ content: ""; display: block; width: 7px; height: 7px; background: var(--yellow); position: absolute; border-radius: 100%; bottom: -15px; }
.pagination.decades ul li.white a{ color: var(--white); font-weight: 600; }
.pagination.decades ul li.white:hover a{ color: var(--yellow); }

.pagination.decades{ scrollbar-width: thin; scrollbar-color: var(--grey-222) transparent; }
.pagination.decades::-webkit-scrollbar{ width: 8px; background: transparent; }
.pagination.decades::-webkit-scrollbar-thumb{ background: var(--grey-222); border-radius: 8px; }

@media screen and (max-width: 1279px) {

    .pagination.decades{ overflow-x: auto; width: 100%; border-bottom: 1px dashed var(--grey-555); padding: 0; }
    .pagination.decades ul{ width: 100%; border-bottom: none; }
    .pagination.decades ul li.active span:before{ display: none; }

}

@media screen and (max-width: 1023px) {


}

@media screen and (max-width: 767px) {


}