.card {
  background-color: #023e7d; /* Fondo azul oscuro */
  color: rgb(255, 255, 255); /* Texto blanco */
  border-radius: 50%; /* Hace la tarjeta redonda */
  text-align: center; /* Centrar contenido */
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  width: 270px; /* Ajusta el tamaño de la tarjeta */
  height: 250px; /* Ajusta el tamaño de la tarjeta */
  border: 1px solid rgb(1, 8, 15); /* Borde blanco */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 4px 5px rgb(185, 185, 185);
}

.card img {
  width: 70%; /* Ajusta el tamaño de la imagen */
  height: auto;
  object-fit: contain; /* Mantiene la proporción de la imagen */
  border-radius: 10px; /* Hace las esquinas de la imagen ligeramente redondeadas */
  
}

.card:hover {
  transform: scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.card-title {
  font-size: 20px;
  margin-top: 15px;
}