// Core variables and mixins
@import "sub-stylesheet/_variables";
@import "sub-stylesheet/_mixins";





.funfact-item {
  box-shadow: 0 0 10px 0 rgba($black, 0.1);
  padding: 25px 40px;
  //transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
  //transition-duration: 2.9s;
  @include border-radius(10px);
  background-color: #fff;

  @include transition(0.3s);
  .icon {
    font-size: 40px;
    color: $blue;
    @include transition(0.3s);
  }
  .funfact-content {
    margin-left: 20px;
    .counter {
      font-size: 26px;
      color: $blue;
      font-weight:  700;
      @include transition(0.3s);
    }
    p {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      @include transition(0.3s);
    }
  }
  transform-origin: bottom;
  // &:hover {
  //   //.icon {
  //   //  font-size: 50px;
  //   //}
  //   animation: scale-easeOutElastic .5s;
  //   background-color: $blue;
  //   @include transform(scaleX(1.2) scaleY(1.1) translateY(-10px) translateX(-30px));
  //   .icon,.counter,p {
  //     color: $white;
  //   }

  // }
}
.col-md-6:hover{
  >.funfact-item {
    animation: scale-easeOutElastic .5s;
    background-color: $blue;
    @include transform(scaleX(1.2) scaleY(1.1) translateY(-10px) translateX(-30px));
    .icon,.counter,p {
      color: $white;
    }
  }
}


// .custom-circle-box {
//   width: 250px;
//   height: 250px;
//   position: absolute;
//   left: 10%;
//   top: 0%;
//   display: block;
//   z-index: -1;
//   .big-circle {
//     width: 100%;
//     height: 100%;
//     @include border-radius(50%);
//     background-color: #f0f7ff;
//     position: absolute;
//     left: 0;
//     top: 0;
//   }
//   .inner-circle1 {
//     width: 90px;
//     height: 90px;
//     @include border-radius(50%);
//     background-color: #bbd9fc;
//     position: absolute;
//     top: 0;
//     left: 0;
//     display: block;
//     z-index: 1;
//   }
//   .inner-circle2 {
//     width: 40px;
//     height: 40px;
//     @include border-radius(50%);
//     background-color: #ebe3cc;
//     position: absolute;
//     left: 20%;
//     bottom: 0;
//     display: block;
//     z-index: 1;
//   }

//   @include breakpoint(sm){
//     width: 450px;
//     height: 450px;
//     .inner-circle1 {
//       width: 100px;
//       height: 100px;
//     }
//     .inner-circle2 {
//       width: 60px;
//       height: 60px;
//     }
//   }
//   @include breakpoint(lg){
//     width: 650px;
//     height: 650px;
//     .inner-circle1 {
//       width: 190px;
//       height: 190px;
//     }
//     .inner-circle2 {
//       width: 70px;
//       height: 70px;
//     }
//   }
// }




@keyframes scale-easeOutElastic {
  0%,100% {
    @include transform(scaleX(1.2) scaleY(1.1) translateY(-10px) translateX(-30px));
  }

  40% {
    @include transform(scaleX(1.25) scaleY(1.15) translateY(-10px) translateX(-30px));
  }
  60% {
    @include transform(scaleX(1.15) scaleY(1.05) translateY(-10px) translateX(-30px));
  }
}