.list-categories {
    font-size: 20px;
   
}
.list-categories a{
    color: var(--color-dark) 
}

.list-categories a:hover{
    color: var(--color-primary)
}

.product-container {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 300px;
    justify-content: center;
}

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card:nth-child(6n + 1) {
    grid-row-end: span 1;
    grid-column-end: span 2;
}

.product-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-card h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-family: "Raleway";
}

.product-card p {
    color:#F8F8F8;
    font-size: 15px;
    font-family: "Raleway Light";
}

.product-card-info {
    position: absolute;
    background: #0000003D;
    width: 90%;
    height: 90%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    opacity: 0;
    
}

.product-card-info.active{
    animation: fadeInAnimation ease 0.6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.list-categories li.active a{
    color: var(--color-primary);
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
     }
}

.pagination-footer {
    gap: 32px;
    width: 100%;
    justify-content: center;
    margin: 32px 0;
  }
  
  .pagination-footer .page-num {
    font-size: 18px;
    cursor: pointer;
  }
  
  .pagination-footer .page-num.active {
    color: var(--color-primary);
  }