/* Pagination Container */

.pag-nation{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
margin:25px 0;
}

/* Pagination Buttons */

.pag-nation a,
.pag-nation span{

display:inline-flex;
align-items:center;
justify-content:center;

min-width:40px;
height:40px;

padding:8px 12px;

font-weight:600;
font-family:Arial, sans-serif;
text-decoration:none;

color:#444;

border-radius:4px;

/* silver metallic background */

background:linear-gradient(145deg,#f2f2f2,#cfcfcf);
border:1px solid #b9b9b9;

box-shadow:
inset 0 1px 0 #ffffff,
0 2px 4px rgba(0,0,0,0.25);

transition:all .25s ease;

}

/* Hover metallic shine */

.pag-nation a:hover{

color:#000;

background:linear-gradient(145deg,#ffffff,#dcdcdc);

box-shadow:
inset 0 1px 0 #fff,
0 0 6px rgba(0,0,0,0.4);

}

/* Active Page (Golden Metal) */

.pag-nation .current{

color:#3a2c00;

background:linear-gradient(145deg,#ffd700,#caa400);

border:1px solid #b99300;

box-shadow:
inset 0 1px 0 #fff3a0,
0 2px 6px rgba(0,0,0,0.4);

}

/* Next Prev Button */

.pag-nation a:first-child,
.pag-nation a:last-child{

font-weight:bold;

background:linear-gradient(145deg,#e8e8e8,#bfbfbf);

}

/* Page Count Text */

.pag-cnt{

margin-top:10px;
text-align:center;
font-size:16px;
font-weight:bold;
color:#fff;

}


/* ===================== */
/* Tablet Responsive */
/* ===================== */

@media (max-width:768px){

.pag-nation a,
.pag-nation span{

min-width:34px;
height:34px;

font-size:14px;

padding:6px 8px;

}

}