.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 100%;
  transition: box-shadow 0.2s;
  position: relative;
  
  
  /* Do NOT set min-height or height, let content define height */
  /* Do NOT use overflow: hidden; so image can cross card */
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.card-img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s;
  position: relative;
  z-index: 2;
  transition: ease-in-out 1s;

}

.card:hover .card-img {
  transform: translateY(-30px);
  z-index: 3;
  width: 25rem;
  padding-bottom: 0px;
  margin-bottom: 0px;
  
  
}

/* .card-content:hover .card-img {
  transform: translateY(-20px);
  z-index: 3;
  /* Move image up on content hover 
} */


/* Remove transform from .card-content on hover so only image moves */
.card-content {
  padding: 10px 16px 4px 16px;
  transition: padding-bottom 0.2s;
  position: relative;
}

.card-title {
  margin: 0 0 3px 0;
  font-size: 2.2rem;
  color:black;
  transition: color 0.2s, text-shadow 0.2s;
  position: relative;
  
}

.card-text {
  margin: 3px 0 10px 0;
  /* 3px margin above, 10px below */
  color: rgba(55, 54, 54, 0.748);
  font-size: 2rem;
  line-height: 1.5rem;
}

.card-extra {
  color: black;
  font-size: 2.5rem;
  margin-top: 4px;
  margin-bottom: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.3s, margin-top 0.2s, padding 0.2s;
  padding: 0 16px;
  /* Add horizontal padding */
  border-top: 1px solid #e0e0e0;
  /* Optional: subtle divider */
  background: transparent;
  /* Keep background as card */
  box-sizing: border-box;
}

.card:hover .card-extra {
  opacity: 1;
  max-height: 500px;
  /* Large enough for any content */
  margin-top: 8px;
  padding: 12px 16px;
  /* Add vertical padding on hover */
  /* line-height: 2rem; */
}

.card:hover .card-title {
  color: black;
  text-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}

.card-extra li{
  list-style-type: square;
  color: black;
  font-size: 2rem;
  line-height: 1.8rem;
}