/*---------------------------
** feature Area Start
---------------------------*/

.feature {
  padding: 110px 0px 120px; 
   position: relative;
   overflow: hidden;
  .bgshape{
    position: absolute;
    bottom: 0px;
    left: 0px;
    max-width: 500px;
    z-index: -9;
  }

  .shape1{
    position: absolute;
    top: 200px;
    right: 20px;
    max-width: 130px;
    animation: shapeani1 5s linear infinite;
  }
  .shape2{
    position: absolute;
    top: 130px;
    right: 150px;
    max-width: 70px;
    animation: shapeani1 4s linear infinite;
  }
  .info {
    .info-title {
      font-size: 40px;
      line-height: 50px;
      font-weight: 700;
      color: $dark-color;
      margin-bottom: 43px;
      display: block;
      span {
        @include gradient-text1;
      }
    }
    .link{
      margin-top: 45px;
    }

 }
  .box{
    text-align: center;
    @include main-gradint1; 
    .inner-box{
      width: 100%;
      height: 100%;
      background: $white;
      position: relative;
      z-index: 99;
      padding: 45px 25px 21px;
      border: 2px solid rgba(0, 0, 0, 0.06);
      @include transition;
      .icon{
        color:  $dark-color;
        font-size: 35px;
        @include main-gradint1;
        display: inline-block;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        border-radius: 4px;
        color: #fff;
        position: relative;
        margin-bottom: 16px;
        transition: $transition-long;
        &::after{
          position: absolute;
          content: " ";
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          transform: rotate(45deg);
          z-index: -5;
          transition: $transition-long;
        }
      }
      .title{
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
        color: $dark-color;
        margin: 23px 0px 19px;
      }
      .text{
        margin-bottom: 0px;
      }
     &:hover{
      .icon{
        border-radius: 50%;
        &::after{
          box-shadow: 0px 0px 0px 8px rgba(#75b2f0, .3), 0px 0px 0px 16px rgba(#75b2f0, .3);
        }
      }
     }
    }
  }
  .owl-item.active.center{
    .inner-box{
      .icon{
        border-radius: 50%;
        &::after{
          box-shadow: 0px 0px 0px 8px rgba(#75b2f0, .3), 0px 0px 0px 16px rgba(#75b2f0, .3);
        }
      }
    }
  }
     // nav icon design
     .owl-controls .owl-nav div.owl-prev,
     .owl-controls .owl-nav div.owl-next {
       color: $descr-color;
       font-size: 22px;
       position: absolute;
       top: 50%;
       @include transform(translateY(-50%));
       text-align: center;
       width: 50px;
       height: 50px;
       line-height: 53px;
       border-radius: 50%;
       background: $white;
       @include box-shadow(0px, 10px, 30px, rgba(0, 0, 0, 0.20), $inset: false);
 
     }
     .owl-controls .owl-nav div.owl-prev {
       left: -20%;
     }
     .owl-controls .owl-nav div.owl-next {
       right: -20%;
     }
  
     &:hover .owl-controls .owl-nav div.owl-next:hover,
     &:hover .owl-controls .owl-nav div.owl-prev:hover {
       color: $white;
       @include main-gradint1;
     }

}

/*---------------------------
** About Area End
---------------------------*/