h2{
color: blue;
}
.Cards {
  background-color: #E4F9FF;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  width: 18rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

.card img {
  height: 200px;        
  object-fit: cover;   
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.stars img {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

button , .btn {
  border-radius: 25px !important;
  padding: 6px 16px !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
}
.btn:hover{
    background-color: white;
    color: black;
}



@media (max-width: 768px) {
  .Cards {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
  }

  .card {
    width: 90%;
  }

  h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  button, .btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

@media (min-width: 769px) {
  .Cards {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 20px;
  }

  .card {
    width: 18rem;
  }

  h2 {
    font-size: 2rem;
    text-align: center;
  }

  button, .btn {
    width: auto;
  }
}