.pagination {
    margin: 1rem auto 0;
}
.pagination ul{
    max-width: 500px;
    margin: auto;
  display: flex;
  flex-wrap: wrap;
  /* background: #fff; */
  padding: 4px;
  border-radius: 50px;
  gap:8px;
  /* box-shadow: 0px 10px 15px rgba(0,0,0,0.1); */
}
.pagination ul a,
.pagination ul span{
  color: #272727;
  list-style: none;
  line-height: 45px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.pagination ul span.current-page{
  list-style: none;
  height: 45px;
  width: 45px;
  margin: 0 3px;
  line-height: 45px;
  border-radius: 50%;
  color: #fff;
  background: #004b97;
}

.pagination ul .page-first{
  margin: 0px 3px 0 -5px;
}
.pagination ul .page-last{
  margin: 0px -5px 0 3px;
}




.pagination ul a:hover{
  color: #004b97;

}





/* .pagination ul li:first-child:hover,
.pagination ul li:last-child:hover{
    color: #fff;
} */

@media only screen and (max-width:500px){
  .pagination ul a,
.pagination ul span{

        line-height: 35px;
   
        font-size: 12.5px;
   
      }
      .pagination ul span.current-page{

        height: 35px;
        width: 35px;
        margin: 0 3px;
        line-height: 35px;
      
      }

     
}


@media only screen and (max-width:375px){
  .pagination ul a,
  .pagination ul span{
        line-height: 25px;
        font-size: 12.5px;
   
      }
      .pagination ul span.current-page{
        height: 25px;
        width: 25px;
        margin: 0 3px;
        line-height: 25px;
      
      }

      
}