.ratio:hover {
    cursor: pointer;
}

.ratio-1x1 {
    width: 50vh;
}

.swiper-slide.swiper-slide-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

div#categories {
    background-color: #F5F5F5;
    padding: 1em;
    border-radius: 1em;
    margin-bottom: 1em;
}
#weeklyBanner {
    img {
        border-radius: 0 0 5px 5px ;
    }
}
.pagination {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  list-style: none;
  gap: 0.5rem;
}

.pagination li {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  font-size: 0.9rem;
  color: #818386;
}

.pagination li.active {
  background-color: #818386;
  color: #fff;
  border-color: #818386;
}

.pagination li:hover:not(.active) {
  background-color: #e9ecef;
  border-color: #ddd;
}

    #select-all-items::after {
      display: none;
    }

    .nav-link.active {
      background-color: #e9f5ff;
    }

    .skeleton-card {
      background-color: #f0f0f0;
      border-radius: 0.5rem;
      height: 300px;
      animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0% {
        background-color: #f0f0f0;
      }

      50% {
        background-color: #e0e0e0;
      }

      100% {
        background-color: #f0f0f0;
      }
    }

    .skeleton-line {
      height: 18px;
      width: 70%;
      background-color: #f0f0f0;
      border-radius: 4px;
      margin-bottom: 10px;
      animation: pulse 1.5s infinite ease-in-out;
    }