body {
      background-color: #f8f9fa;
    }
 .card {

      color: Black;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease;
    }

    .card:hover {
     border:1 px solid #812991!important;
    }

    .card:hover .card-title::before {
      animation: expandLine 1s infinite alternate;
    }

    .card-title {
      display: inline-block;
      position: relative;
      margin-left: 30px;
      margin-top: 20px;
	  padding:20px;
    }
     .card:hover .card-title {
      animation: moveText 1s infinite alternate;
    }
    .card-title::before {
      content: "";
      position: absolute;
      top: calc(50% - 0.5px);
      left: -10px;
      width: 20px;
      height: 2.2px;
	  padding: 20 px;
      background-color: Black;
      transition: width 0.3s ease;
    }


    @keyframes moveText {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(25px);
      }
    }
    @keyframes expandLine {
      0% {
        width: 20px;
      }
      100% {
        width: 30px;
      }
    }





.board-member-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
 transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.card:hover .board-member-image {
  transform: translateY(-5px);
  width: 130px;
  height: 130px;
}



	 .card {
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
	  border-color: #812991;
    }

    .card-header {
      background-color: #fff;
      border-bottom: none;
      text-align: center;
    }

    .card-body {
      padding: 1.5rem;
    }