.usercards{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 15px;
  margin-top:4rem;
  margin-right: 2rem;
  margin-left:2rem;
  margin-bottom:2rem;
}

.usercard{
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.usercard i {
  color:rgba(255, 0, 0, 0.688);
}

.usercard:hover{
  transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.usercard h3{
  color: rgba(255, 0, 0, 0.739); /* Change the card title color to red */
    font-family: 'GoogleFontName', sans-serif;
    font-size: large; /* Apply the Google font */
}

@media (max-width:1200px) {
  .usercards{
    grid-template-columns: repeat(3,1fr);
  }
}
@media (max-width:768px) {
  .usercards{
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width:576px) {
  .usercards{
    grid-template-columns: repeat(1fr);
  }
}