/** feature-section **/

.feature-section{
    position: relative;
  }
  
  .feature-section .outer-container{
    position: relative;
    display: block;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
  }
  
  .feature-section .feature-block-one{
    position: relative;
    display: block;
    float: left;
    width: 33.333%;
  }
  
  .feature-section .feature-block-one .inner-box{
    position: relative;
    display: block;
    background: #fff;
    max-width: 560px;
    width: 100%;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .feature-section .feature-block-one .inner-box .box .light-icon{
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 120px;
    line-height: 120px;
  }
  
  .feature-section .feature-block-one .inner-box .icon-box{
    position: absolute;
    left: 0px;
    top: -40px;
    width: 170px;
    height: calc(100% + 40px);
    text-align: center;
    background: #f6f6f6;
    padding: 52px 15px 30px 15px;
    z-index: 1;
  }
  
  .feature-section .feature-block-one .inner-box .icon-box:before{
    position: absolute;
    content: '';
    background: #e2e0e0;
    width: 40px;
    height: 40px;
    top: 0px;
    right: -39px;
    clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%, 0% 0%);
    transition: all 500ms ease;
  }
  
  .feature-section .feature-block-one .inner-box:hover .icon-box:before{
    background: #3a3a46;
  }
  
  .feature-section .feature-block-one .inner-box .icon-box:after{
    position: absolute;
    content: '';
    background: #282833;
    width: 100%;
    height: 0%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transition: all 300ms ease;
  }
  
  .feature-section .feature-block-one .inner-box:hover .icon-box:after{
    height: 100%;
    top: 0px;
  }
  
  .feature-section .feature-block-one .inner-box .icon-box i{
    position: relative;
    display: inline-block;
    font-size: 65px;
    line-height: 65px;
    margin-bottom: 15px;
    color: transparent;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
  }
  
  .feature-section .feature-block-one .inner-box .icon-box h3{
    margin: 0px;
    transition: all 500ms ease;
  }
  
  .feature-section .feature-block-one .inner-box:hover .icon-box h3{
    color: #fff;
  }
  
  .feature-section .feature-block-one .inner-box .box{
    position: relative;
    overflow: hidden;
    padding: 33px 30px 34px 200px;
    min-height: 165px;
  }
  
  .feature-section .feature-block-one .inner-box .box:before{
    position: absolute;
    content: '';
    background: #1e1e2a;
    width: 100%;
    height: 0%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transition: all 500ms ease;
  }
  
  .feature-section .feature-block-one .inner-box:hover .box:before{
    top: 0px;
    height: 100%;
  }
  .feature-section .feature-block-one .inner-box .box p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: #5a5a68;
    margin-bottom: 13px;
    transition: all 500ms ease;
  }
  
  .feature-section .feature-block-one .inner-box .box p{
    color: #a6a6b3;
  }
  
  .feature-section .feature-block-one .inner-box .box a{
    position: relative;
    font-size: 18px;
    line-height: 28px;
    font-family: 'Roboto', sans-serif;
    color: #1e1e2a;
    font-weight: 700;
  }
  
  .feature-section .feature-block-one .inner-box:hover .box a{
    color: #fff;
  }
  
  .feature-section .feature-block-one .inner-box .box a i{
    position: relative;
    margin-left: 10px;
    font-size: 20px;
    top: 2px;
  }