.feature-one{
   &__wrap{
      position: relative;
      margin: 0 auto 30px;
      max-width: 270px;
      overflow: hidden;
      border-radius: 22px;
   }
   &__image{
      position: relative;
      z-index: 1;
      img{
         transform: scale(1);
         transition: all 1s;
      }
   }
   &__icon{
      font-size: 45px;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      background: $theme-color-2;
      color: $white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.6s;
      svg{
         width: 45px;
         fill: $white;
      }
   }
   &__content{
      text-align: center;
      position: absolute;
      bottom: 0;
      z-index: 1;
      padding: 30px;
      overflow: hidden;
      &:before{
         content: "";
         position: absolute;
         top: 0;
         left: 40px;
         width: 200%;
         height: 100%;
         background: #F2F5F9;
         border-radius: 25px;
         z-index: -1;
         transform: rotate(-25deg);
      }
   }
   &__inner{
      margin-left: 40px;
   }
   &__title{
      margin: 10px 0 10px;
      font-size: 20px;
      font-weight: 700;
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      color: #8297B0;
      font-weight: 500;
   }
   &__link-overlay{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   &.active{
      .feature-one__icon{
         background: $theme-color;
      }
   }
   &:hover{
      .feature-one{
         &__image img{
            transform: scale(1.2);
         }
         &__icon{
            background: $theme-color;
         }
      }
   }
}

// Feature Two
.feature-two{
   &__wrap{
      position: relative;
      margin-bottom: 30px;
   }
   &__image{
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 130px 130px 0 130px;
      img{
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 130px 130px 0 130px;
      }
      &:before{
         border-radius: 0 0 0 130px;
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1;
         background: rgb(22, 36, 61);
         background: linear-gradient(180deg, rgba(22, 36, 61, 0) 0%, rgba(22, 36, 61, 1) 100%);
         transition: all 0.35s;
      }
      &:after{
         border-radius: 130px 130px 0 130px;
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1;
         background: $theme-color-2;
         opacity: 0;
         transition: all 0.35s;
         transform: scale(0);
      }
   }
   &__icon{
      font-size: 30px;
      width: 67px;
      height: 67px;
      border-radius: 50%;
      background: $white;
      color: $theme-color-2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.35s;
      -webkit-transform: translate3d(0,30px,0);
      transform: translate3d(0,15px,0);
      svg{
         width: 68px;
         fill: $theme-color-2;
      }
   }
   &__content{
      text-align: center;
      height: 355px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      position: relative;
      z-index: 2;
      padding: 20px 15px 30px;
      overflow: hidden;
   }
   &__content-inner{
      max-width: 208px;
      display: inline-block;
   }
   &__title{
      margin: 10px 0 10px;
      font-size: 20px;
      font-weight: 700;
      color: $white;
      transition: all 0.35s;
      transform: translate3d(0,100%,0);
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      margin-bottom: 15px;
      transition: all 0.35s;
      transform: translate3d(0,30px,0);
      color: rgba(255, 255, 255, 0.8);
   }
   &__action{
      opacity: 0;
      transition: all 0.35s;
      transform: translate3d(0,100%,0);
      a{
         width: 40px;
         height: 40px;
         padding: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
      }
   }
   &__single:hover, &__single.active{
      .feature-two{
         &__image{
            &:before{
               opacity: 0;
            }
            &:after{
               transform: scale(1);
               opacity: 0.8;
            }
         }
         &__icon{
            opacity: 1;
            transform: translate3d(0,0,0);
         }
         &__title{
            transform: translate3d(0,0,0);
         }
         &__desc{
            color: $white;
            transform: translate3d(0,0,0);
         }
         &__action{
            opacity: 1;
            transform: translate3d(0,0,0);
         }
      }
   }
}

.radius-top-right{
   .feature-two__image, .feature-two__image img, .feature-two__image:before, .feature-two__image:after{
      border-radius: 130px 0 130px 130px;
   }
}
.radius-bottom-left{
   .feature-two__image, .feature-two__image img, .feature-two__image:before, .feature-two__image:after{
      border-radius: 130px 130px 130px 0;
   }
}
.radius-top-left{
   .feature-two__image, .feature-two__image img, .feature-two__image:before, .feature-two__image:after{
      border-radius: 0 130px 130px 130px;
   }
}

.feature-three{
   &__single{
      position: relative;
      margin-bottom: 30px;
   }
   &__content{
      display: flex;
      align-items: center; 
      margin-bottom: 20px;
   }
   &__icon{
      color: $theme-color;
      font-size: 87px;
      margin-right: 20px;
      svg{
         fill: $theme-color;
         width: 87px;
      }
      @media(max-width: 1024px){
         font-size: 50px;
         svg{
            width: 50px;
         }
      }
   }
   &__number{
      width: 152px;
      height: 152px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: $bg-gray;
      border-radius: 50%;
      font-size: 60px;
      font-weight: 600;
      color: $headings-color;
      margin-bottom: 20px;
      @media(max-width: 1024px){
         width: 100px;
         height: 100px;
         font-size: 36px;
      }
      @media(max-width: 768px){
         width: 80px;
         height: 80px;
         font-size: 30px;
      }
   }
   &__title{
      font-size: 40px; 
      font-weight: 700;
      margin: 0;
      @media(max-width: 1024px){
         font-size: 30px; 
      }
      @media(max-width: 992px){
         font-size: 24px;
      }
   }
   &__desc{
      font-size: 16px;
      line-height: 30px;
      font-weight: 500;
   }
   &__single{
      &:hover{
         .feature-three{
            &__icon{
               &:after{
                  opacity: 1;
                  transform: scale(1);
               }
            }
         }
      }
   }
}
.feature-four{
   &__wrap{
      position: relative;
      background: $theme-color-2;
      border-radius: 30px 30px 30px 0;
      overflow: hidden;
   }
   &__image{
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 383px;
      height: 266px;
      &:after{
         content: "";
         z-index: 3;
         position: absolute;
         bottom: 30px;
         left: -30px;
         width: 135px;
         height: 68px;
         display: inline-block;
         background: url('#{$image-theme-path-base}polygon-f-2.png') no-repeat; 
         display: block;
      }
      img{
         width: 100%;
         height: 100%;
         object-fit: cover;
         transform: scale(1);
         transition: all 2.2s;
      }
   }
   &__image-inner{
      display: inline-block;
      mask-image: url('#{$image-theme-path-base}polygon-f-1.png'); 
      mask-repeat: no-repeat; 
      mask-size: 100%;
      width: 303px;
      height: 228px;
      overflow: hidden;
      position: absolute;
      right: 0;
      bottom: 0;
   }
   &__icon{
      font-size: 44px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: $theme-color-2;
      color: $white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      svg{
         width: 74px;
         fill: $white;
      }
   }
   &__shape{
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      display: inline-block;
      background: url('#{$image-theme-path-base}polygon-f-3.png') no-repeat; 
      display: block;
   }
   &__shape-2{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 329px;
      height: 241px;
      background: url('#{$image-theme-path-base}polygon-f-4.png') no-repeat; 
      display: block;
   }
   &__content{
      padding: 60px 40px;
      position: relative;
      z-index: 3;
      @media(max-width: 1024px){
         padding-top: 30px;
         padding-bottom: 150px;
      }
      @media(max-width: 850px){
         padding-bottom: 250px;
      }
   }
   &__content-inner{
      max-width: 250px;
   }
   &__title{
      margin: 0 0 20px;
      font-size: 24px;
      line-height: 30px;
      color: $white;
   }
   &__sub-title{
      font-family: "Covered By Your Grace", cursive;
      font-size: 20px;
      font-weight: 500;
      color: $white;
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      color: $white;
      font-weight: 500;
   }
   &__single{
      &:hover{
         .feature-four__image img{
            transform: scale(1.2);
         }
      }
   }
}


.feature-five{
   &__wrap{
      position: relative;
      background: $theme-color;
      border-radius: 30px 30px 0 30px;
      overflow: hidden;
      &:after{
         content: "";
         z-index: 3;
         position: absolute;
         bottom: 5px;
         right: 40px;
         width: 56px;
         height: 53px;
         display: inline-block;
         background: url('#{$image-theme-path-base}polygon-r-4.png') no-repeat; 
         display: block;
      }
   }
   &__image{
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 411px;
      height: 265px;
      img{
         width: 100%;
         height: 100%;
         object-fit: cover;
         transform: scale(1);
         transition: all 2.2s;
      }
   }
   &__image-inner{
      display: inline-block;
      mask-image: url('#{$image-theme-path-base}polygon-r-3.png'); 
      mask-repeat: no-repeat; 
      mask-size: 100%;
      width: 357px;
      height: 236px;
      overflow: hidden;
      position: absolute;
      left: 0;
      bottom: 0;
   }
   &__icon{
      font-size: 44px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: $theme-color-2;
      color: $white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      svg{
         width: 74px;
         fill: $white;
      }
   }
   &__shape{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('#{$image-theme-path-base}polygon-r-1.png') no-repeat; 
      display: block;
   }
   &__shape-2{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 373px;
      height: 249px;
      display: inline-block;
      background: url('#{$image-theme-path-base}polygon-r-2.png') no-repeat; 
      display: block;
   }
   &__content{
      padding: 60px 40px;
      position: relative;
      z-index: 3;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      @media(max-width: 1024px){
         padding-top: 30px;
         padding-bottom: 150px;
      }
       @media(max-width: 850px){
         padding-bottom: 250px;
      }
   }
   &__content-inner{
      max-width: 250px;
   }
   &__title{
      margin: 0 0 20px;
      font-size: 24px;
      line-height: 30px;
      color: $white;
   }
   &__sub-title{
      font-family: "Covered By Your Grace", cursive;
      font-size: 20px;
      font-weight: 500;
      color: $white;
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      color: $white;
      font-weight: 500;
   }
   &__single{
      &:hover{
         .feature-five__image img{
            transform: scale(1.2);
         }
      }
   }
}