.custom-card {
  height: 320px; /* fixed card height */
 
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover */
}

/* Hover effect */
.custom-card:hover {
  transform: translateY(-8px); /* move up */
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* stronger shadow */
}


/* Fixed image height (80% of 320px = 256px) */
.custom-card .card-img {
  height: 256px; /* fixed image height */
  background: #f0f0f0; /* fallback if no image */
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keep aspect ratio & crop if needed */
}

/* Fixed text height (20% of 320px = 64px) */
.custom-card .card-text {
  height: 64px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.project-title{
   max-width: 270px !important; 
}
   

.custom-title {
  display: inline-block;   /* keep underline only as wide as text */
  position: relative;
  padding-bottom: 8px;
  text-align: center;      /* text inside centers if multiline */
  font-weight: 600;
  font-size: 20px;
  color: #131A4F;
}

.custom-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;  /* underline matches text width */
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(135deg, #4251C8, #131A4F);
}