nav.pagination {
  width: 100%;
  margin: 4vw;
  gap: 0.6vw;
  font-family: Vazir, sans-serif !important;
}

nav.pagination button {
  padding: 0.2vw;
  width: 2.5vw;
  height: 2.5vw;
  background: var(--blue2);
  border-radius: 0.55vw;
  cursor: pointer;
  transition: all 0.25s;
  font-family: Vazir, sans-serif !important;
}

nav.pagination button i {
  font-size: 1.55vw;
  transform: translateY(0.1vw);
  color: var(--light-font);
}

nav.pagination button:hover {
  background: var(--sand);
}

nav.pagination button:disabled {
  opacity: 0.8;
}

nav.pagination button:disabled:hover {
  background: rgb(219, 179, 122);
}

nav.pagination ul {
  gap: 0.6vw;
}

nav.pagination ul li {
  width: 2.5vw;
  height: 2.5vw;
  background: rgba(219, 179, 122, 0.541);
  border-radius: 0.55vw;
  cursor: pointer;
  font-weight: bolder;
  transition: all 0.25s;
  font-family: Vazir, sans-serif !important;
  color: rgb(154, 174, 177);
}

nav.pagination ul li:hover {
  background: rgb(219, 179, 122);
  color: var(--light-font);
}

nav.pagination ul li.active {
  background-color: var(--blue2);
  color: var(--light-font);
}

@media screen and (max-width: 450px) {
  nav.pagination {
    margin: 8vw;
    gap: 1.2vw;
  }

  nav.pagination button {
    padding: 0.2vw;
    width: 9vw;
    height: 9vw;
    border-radius: 5px;
    font-size: 3.5vw;
  }

  nav.pagination button i {
    font-size: 4.5vw;
  }

  nav.pagination button:hover {
    background: #7688a8;
  }

  nav.pagination button:disabled {
    opacity: 0.8;
  }

  nav.pagination button:disabled:hover {
    background: #bcc6d9;
  }

  nav.pagination ul {
    gap: 1vw;
  }

  nav.pagination ul li {
    width: 9vw;
    height: 9vw;
    border-radius: 5px;
    font-size: 4vw;
  }
}