.content-box {

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.dorctor-hover{
    background:#B1BCCF!important;
}
.content-box:hover .dorctor-hover{
    border-radius:100%!important;
}
.content-box:hover .doctor-photo {
    
    border-radius: 50%!important;
}

.doctor-photo{
    justify-self: anchor-center;
}
.img-border {
    width: 400px;
    transition: border-radius 0.5s ease, box-shadow 0.3s ease;
}
.content-box:hover .img-border{
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* shadow */
   border-radius: 50%!important;
}
.content-box:hover .doctor-photo{
    background:#B1BCCF!important;
    border-radius: 50%!important;
}
.doctor-photo {
    width: 100%!important;
}



.doctor-photo {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: border-radius 0.5s ease;
}

.doctor-photo img {
   width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.doctor-photo::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.doctor-photo:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}