.card-text {
    max-height: 80px; /* Adjust as needed */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem; /* 14px */
  }



  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .card-title {
    font-size: 10px; /* 16px */
    font-weight: 600; /* semi-bold */
  }

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center-align the content inside the card */
  display: flex; /* Use flexbox for alignment */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
}

.card:hover {
  transform: translateY(-10px); /* Move the card slightly upward on hover */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.card img {
  width: 50%; /* Reduce the width of the image */
  height: auto; /* Maintain the aspect ratio */
  object-fit: cover; /* Ensure the image scales properly */
  border-radius: 10px;
  margin-bottom: 15px;
}