.wrapper{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#000;
}

.service-block-two {
     position: relative;
     z-index: 1;
     margin-bottom: 30px
 }

 .service-block-two .inner-box {
     position: relative;
     overflow: hidden;
     padding: 17px 25px;
     border-radius: 6px;
     background-color: #f5f5f5;
 }

 .service-block-two .inner-box:before {
     position: absolute;
     content: '';
     left: 0px;
     bottom: 0px;
     width: 100%;
     height: 50%;
     opacity: 0;
     background-color: #009040;
     -webkit-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     transition: all 600ms ease
 }

 .service-block-two .inner-box .shape-one {
     content: '';
     width: 250px;
     height: 250px;
     background: #6bd49a;
     border-radius: 50%;
     position: absolute;
     top: -120px;
     opacity: 0.4;
     right: -120px;
     transform: scale(0);
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease
 }

 .service-block-two .inner-box .shape-two {
     content: '';
     width: 373px;
     height: 373px;
     background: #6bd49a;
     border-radius: 50%;
     position: absolute;
     top: -180px;
     right: -180px;
     z-index: 1;
     opacity: 0;
     transform: scale(0);
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease
 }

 .service-block-two .inner-box .icon-box {
     position: relative;
     font-size: 65px;
     line-height: 1em;
     color: #0060ff;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease
 }

 .service-block-two .inner-box .icon-box {
     position: relative;
     z-index: 2
 }

 .service-block-two .inner-box .icon-box {
     position: relative;
     font-size: 65px;
     line-height: 1em;
     color: #0060ff;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease
 }

 .service-block-two .inner-box h5 {
     position: relative;
     z-index: 2;
     color: #009040;
     font-weight: 600;
     line-height: 1.3em;
     margin: 5px 0px 15px
 }

 .service-block-two .inner-box .text {
     position: relative;
     color: #222222;
     z-index: 2;
     font-size: 16px;
     line-height: 1.8em;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease
 }

 .service-block-two .inner-box:hover::before {
     height: 100%;
     opacity: 1
 }

 .service-block-two .inner-box:hover .shape-one {
     transform: scale(1);
     webkit-transition-delay: 300ms;
     -ms-transition-delay: 300ms;
     transition-delay: 300ms
 }

 .service-block-two .inner-box:hover .shape-two {
     opacity: 0.4;
     transform: scale(1);
     webkit-transition-delay: 600ms;
     -ms-transition-delay: 600ms;
     transition-delay: 600ms
 }

 .service-block-two .inner-box:hover .icon-box,
 .service-block-two .inner-box:hover h5 a,
 .service-block-two .inner-box:hover .text {
     color: #ffffff
 }

 .service-block-two .inner-box:hover .icon-box,
 .service-block-two .inner-box:hover h5 a,
 .service-block-two .inner-box:hover .text {
     color: #ffffff
 }

 .service-block-two .inner-box:hover .icon-box,
 .service-block-two .inner-box:hover h5 a,
 .service-block-two .inner-box:hover .text {
     color: #ffffff
 }
 
 
 
 
 
 
 
 .ringing-bell{
    position:absolute;
    left:50%;
    top:50%;
    transition:translate(-50%,-50%);
}


.faa-ring{
    color:white;
}


@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
}

.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
  -webkit-animation: ring 2s ease infinite;
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}