.headofficecard{
  position: relative;  
  opacity: 1;
  transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.headofficecard::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #87e415;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: skew(-24deg);
  clip-path: circle(0% at 50% 50%);
  transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.headofficecard:hover::before {
  opacity: 1;
  transform: skew(0deg);
  clip-path: circle(140.9% at 0 0);
}

.headofficecard:hover{
    padding-left: 50px;
    color: white;
}    

@media (max-width:500px){
.headofficecard:hover{
    padding-left: 33px;
}
}