.card-hover-wrapper {
    position: relative;
    overflow: hidden;
  }

  .hover-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(253, 125, 13, 0.902); /* Bootstrap primary with opacity */
    color: white;
    text-align: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .card-hover-wrapper:hover .hover-title {
    opacity: 1;
  }

.speciality-card {
      position: relative;
      overflow: hidden;
      border: none;
      border-radius: 12px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

      .speciality-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .speciality-card img {
      height: 180px;
      object-fit: cover;
      width: 100%;
      display: block;
      }

      /* Overlay on hover */
      .speciality-card .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #ee8b45c0; /* transparent black */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      }

      .speciality-card:hover .overlay {
      opacity: 1;
      }

      /* Plus icon style */
      .overlay .plus-icon {
      font-size: 2rem;
      color: white;
      }