.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas fixas */
  gap: 300px; /* Espaçamento entre as colunas */
  padding:10px;
  margin-left: 5px; /* Move o contêiner 30px para a direita */
  margin-right: 5px; /* Move o contêiner 30px para a esquerda */
  margin-top: -30px;
}

.category {
  box-sizing: border-box;
  margin-bottom: 10px; /* Espaço entre categorias */
}

.category h3 {
  font-size: 18px;
  margin: 10px 0; /* Espaço reduzido entre o título e os itens */
  color: #333;
}

.category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.category ul li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.category ul li i {
  margin-right: 5px;
  color: green;
}

.highlight {
  color: green;
  font-weight: bold;
}

/* Telas Grandes (até 1200px): 3 colunas */
@media (max-width: 1200px) {
  .container-grid {
    grid-template-columns: repeat(3, 1fr); /* Mantém 3 colunas */
    gap: 150px; /* Reduz o espaçamento */
  }
  .category h3 {
    font-size: 15px; /* Reduz o tamanho do título */
  }
}

@media (max-width: 1100px) {
  .container-grid {
    grid-template-columns: repeat(3, 1fr); /* Mantém 3 colunas */
    gap: 150px; /* Reduz o espaçamento */
  }
  .category h3 {
    font-size: 15px; /* Reduz o tamanho do título */
  }
}
/* Telas Médias (até 992px): 2 colunas */
@media (max-width: 992px) {
  .container-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px; /* Reduz o espaçamento */
  }
  .category h3 {
    font-size: 15px; /* Ajusta o tamanho do título */
  }
  .category {
    margin-bottom: 25px; /* Reduz o espaço entre categorias */
  }
}

/* Telas Pequenas (até 768px): 2 colunas */
@media (max-width: 768px) {
  .container-grid {
    grid-template-columns: repeat(1, 1fr); /* 2 colunas */
    gap: 10px; /* Espaçamento menor */
  }
  .category {
    margin-bottom: 20px; /* Espaço reduzido entre categorias */
  }
  .category ul li {
    margin-bottom: 3px; /* Reduz o espaçamento entre os itens */
  }
}

/* Telas Muito Pequenas (até 480px): 1 coluna */
@media (max-width: 480px) {
  .container-grid {
    grid-template-columns: 1fr; /* 1 coluna */
    gap: 10px; /* Espaçamento mínimo */
  }
  .category {
    margin-bottom: 15px; /* Espaço reduzido entre categorias */
  }
  .category h3 {
    font-size: 14px; /* Tamanho menor para o título */
  }
  .category ul li {
    font-size: 12px; /* Texto menor para itens */
  }
}