.box__container .box
{
  position:relative;
  padding: 40px;
  background: linear-gradient(90deg, #8F88FF, #5CB0E9) border-box;
  box-shadow:0 15px 25px rgba(0,0,0,.1);
  border-radius:15px;
  margin:20px;
  box-sizing:border-box;
  overflow:hidden;
  text-align: center; 
}

.box__container .box:before
{
  content:'';
  width: 50%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,.2);
  z-index:2;
  pointer-events:none;
  text-align: center;
}

.box__container .box .icon {
  position:relative;
  width: 80px;
  height: 80px;
  color:#fff;
  background:var(--orphichub-black);
  display:flex;
  justify-content: center;
  align-items: center;
  margin:55px auto;
  border-radius:20%;
  font-size: 50px;
  font-weight:normal;
  transition:2s;
  padding:10px;
}
.box__container .box .icon i{
  padding:12px;
}

.box__container .box .icon
{
  box-shadow:0 0 0 0 #76D7C4;
  backgraund:#76D7C4;
}
.box__container .box:hover .icon
{
  box-shadow:0 0 0 400px #76D7C4;
}



.box__container .box .content
{
  position:relative;
  z-index:1;
  transition:1.5s;
}
.box__container .box:hover .content{
  color:#fff;
}
.box__container .box .content h3
{
  font-size: 20px;
  margin:10px 0;
  padding:0;
  text-align: center;
}
.box__container .box .content p{
   margin:0;
  padding:0;
  text-align: center;
  color:#fff;
}