.banner-one{
   &__wrap{
      position: relative;
   }
   &__image{
      overflow: hidden;
      border-radius: 30px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 12s;
      img{
         transition: all 0.35s;
         border-radius: 30px;
         position: absolute;
         height: 100%;
         width: 100%;
         -o-object-fit: cover;
         object-fit: cover;
         transform: translate(-50%, -50%);
         top: 50%;
         left: 50%;
      }
      &:before{
         z-index: 1;
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 60%;
         height: 100%;
         background: rgb(22,36,61);
         background: linear-gradient(-90deg, rgba(22,36,61,0) 0%, rgba(22,36,61,1) 100%);
      }
   }
   &__content{
      position: absolute;
      left: 30px;
      bottom: 30px;
      z-index: 2;
      border-left: 1px solid $theme-color;
   }
   &__count{
      display: inline-block;
      background: $theme-color;
      padding: 10px 15px;
      color: $white;
      font-size: 13px;
      line-height: 1;
      font-weight: 600;
      border-radius: 0 20px 20px 0;
      transition: all 0.35s;
      margin-bottom: 15px;
      text-transform: capitalize;
   }
   &__sub-title{
      color: $theme-color;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.8px;
      position: relative;
      z-index: 9;
      line-height: 16px;
      padding-left: 10px;
   }
   &__title{
      font-size: 24px;
      font-weight: 700;
      margin: 0;
      padding-left: 10px;
      color: $white;
      transition: all 0.35s;
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      transition: all 0.35s;
      color: $white;
   }
   &__arrow{
      margin-top: 15px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: $bg-gray;
      color: $link-color;
   }
   &__link-overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &__single{
      &.active-yes, &:hover{
         .banner-one{
            &__image{
               img{
                  
               }
            }
         }
      }
   }
}
.banner-two{
   &__single{
      position: relative;
      overflow: hidden;
      border-radius: 5px;
   }
   &__image{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 12s;
      &:after{
         content: '';
         position: absolute;
         background: linear-gradient(0deg, #111429 0%, rgba(17, 20, 41, 0.53) 34%, rgba(17, 20, 41, 0.05882) 100%);
         @include size(100%, 100%);
         top: 0;
         left: 0;
         z-index: 1;
      }
      img{
         position: absolute;
         height: 100%;
         width: 100%;
         object-fit: cover;
         transform: translate(-50%, -50%);
         top: 50%;
         left: 50%;
      }
   }
   &__content{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      padding: 15px 30px 24px 30px;
      transition: all 0.35s;
      @include media-breakpoint-down(lg){ 
         padding: 15px 20px 20px;
      }
      @include media-breakpoint-down(md){ 
         padding: 15px 15px 20px;
      }
   }
   &__content-hover{
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: -10px;
      padding: 20px 30px 25px;
      background: $theme-color;
      line-height: 1.3;
      z-index: 11;
      border-radius: 5px;
      opacity: 0;
      transition: all 0.6s;
      @media(max-width: 1024px){
         padding: 15px 15px 20px;
      }
      &:after{
         content: '\e977';
         font-family: 'ticomoon';
         width: 52px;
         height: 52px;
         border-radius: 50%;
         background: $white;
         position: absolute;
         top: -26px;
         right: 20px;
         z-index: 1;
         font-size: 18px;
         color: $headings-color;
         text-align: center;
         line-height: 52px;
         @media(max-width: 1024px){
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            top: -20px;
         }
      }
   }
   &__hover-count{
      color: $white;
      font-size: 10px;
      text-transform: uppercase;
      font-weight: 700;
   }
   &__hover-title{
      color: $white;
      margin: 0;
      @media(max-width: 1024px){
         font-size: 20px;
      }
   }
   &__title-wrap{
      position: relative;
      display: inline-block;
      clear: both;
   }
   &__title{
      font-size: 26px;
      color: $white;
      margin: 0;
      line-height: 1.1;
      @media(max-width: 1024px){
         font-size: 20px;
      }
   }
   &__count{
      font-size: 10px;
      font-weight: 700;
      background: $theme-color;
      color: $white;
      padding: 0 10px;
      line-height: 26px;
      text-align: center;
      border-radius: 5px 5px 5px 0;
      text-transform: uppercase;
      position: absolute;
      left: 100%;
      bottom: 100%;
      z-index: 12;
      margin-left: -10px;
      margin-bottom: 10px;
      white-space: nowrap;
      @media(max-width: 1024px){
         margin-left: -35px;
      }
      &:after{
         content: '';
         border: 8px solid transparent;
         border-left-color: $theme-color;
         position: absolute;
         left: 0;
         top: 100%;
         margin-top: -9px;
      }
   }
   &__content-inner{

   }
   &__desc{
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 20px;
      margin-top: 6px;
   }

   &__link-overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &__single{
      &.active-yes, &:hover{
         .banner-two{
            &__content{
               opacity: 0;
            }
            &__content-hover{
               bottom: 10px;
               opacity: 1;
            }
         }
      }
   }
}

// Banner Three
.banner-three{
   &__single{
      position: relative;
      text-align: center;
      margin-bottom: 30px;
   }
   &__image{
      z-index: 4;
      text-align: center;
      position: relative;
      img{
         border-radius: 135px;
      }
   }
   &__content{
      position: relative;
      border-bottom-left-radius: 135px;
      display: flex;
      width: 100%;
      align-items: flex-end;
      justify-content: center;
      &:before{
         content: "";
         position: absolute;
         left: 0;
         bottom: 0;
         height: 250px;
         width: 100%;
         z-index: 2;
         background: #FDF8F4;
         border-bottom-left-radius: 115px;
      }
      &:after{
         content: "";
         position: absolute;
         left: 0;
         bottom: 100px;
         height: 220px;
         width: 100%;
         z-index: 3;
         background: $theme-color-2;
         border-bottom-left-radius: 115px;
         opacity: 0;
         transition: all 0.39s;
      }
   }
   &__count{
      background: $theme-color;
      padding: 10px 15px;
      color: $white;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      font-size: 12px;
      line-height: 1;
      font-weight: 600;
      border-radius: 30px;
      transition: all 0.35s;
   }
   &__content-wrap{
      padding-left: 15px;
      margin: 22px 0 26px;
      position: relative;
      z-index: 4;
   }
   &__sub-title{
      color: $theme-color;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.8px;
      position: relative;
      z-index: 9;
      line-height: 16px;
   }
   &__title{
      font-size: 22px;
      font-weight: 700;
      transition: all 0.35s;
      margin: 0;
      @media(max-width: 1260px){
         font-size: 20px;
      }
   }
   &__desc{
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 20px;
      margin-top: 6px;
   }

   &__overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &__single{
      &.active-yes, &:hover{
         .banner-three{
            &__count{
               background: $theme-color-2;
            }
            &__title{
               color: $white;
            }
            &__content{
               &:after{
                  opacity: 1;
                  bottom: 0;
               }
            }
         }
      }
   }
}

.item-active.center{
   .banner-three{
      &__count{
         background: $theme-color-2;
      }
      &__title{
         color: $white;
      }
      &__content{
         &:after{
            opacity: 1;
            bottom: 0;
         }
      }
   }
}

.banner-four{
   &__single{
      position: relative;
      text-align: center;
      margin-bottom: 30px;
   }
   &__image{
      position: relative;
      border-radius: 185px;
      overflow: hidden;
      img{
         border-radius: 185px;
         transition: all 0.6s;
      }
   }
   &__content{
      position: absolute;
      bottom: 35px;
      left: 40px;
      right: 40px;
      background: $white;
      transition: all 0.6s;
      border-radius: 0 0 135px 135px;
      text-align: center;
      padding: 50px 30px 30px;
      @media(max-width: 1024px){
         left: 20px;
         right: 20px;
         bottom: 20px;
      }
   }
   &__count{
      display: inline-block;
      background: $theme-color-2;
      padding: 10px 15px;
      color: $white;
      font-size: 12px;
      border: 10px solid $white;
      line-height: 1;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-radius: 30px;
      transition: all 0.6s;
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
   }
   &__sub-title{
      color: $theme-color;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.8px;
      position: relative;
      z-index: 9;
      line-height: 18px;
   }
   &__title{
      font-size: 24px;
      font-weight: 700;
      margin: 2px 0 15px;
      transition: all 0.35s;
   }
   &__desc{
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      transition: all 0.35s;
   }
   &__arrow{
      margin-top: 15px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: $bg-gray;
      color: $link-color;
   }
   &__link-overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &__single{
      &.active-yes, &:hover{
         .banner-four{
            &__image{
               img{
                  transform: scale(1.1);
               }
            }
            &__content{
               background: $theme-color-2;
            }
            &__count{
               background: $white;
               border-color: $theme-color-2;
               color: $link-color;
            }
            &__title{
               color: $white;
            }
            &__desc{
               color: $white;
            }
            &__arrow{
               background: $theme-color;
               color: $white;
            }
         }
      }
   }
}

.banner-five{
   &__single{
      width: 100%;
      margin: 15px 0;
   }
   &__wrap{
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.08);
      position: relative;
      background: $white;
      padding: 10px;
   }
   &__image{
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px; 
      border-radius: 5px;
      overflow: hidden;
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.35s;
      &:after{
         content: '';
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background: rgba(22, 22, 22, 0.8);
         z-index: 1;
         border-radius: 5px;
      }  
      img{
         position: absolute;
         height: 100%;
         width: 100%;
         object-fit: cover;
         transform: translate(-50%,-50%);
         top: 50%;
         left: 50%;
      }
   }
   &__content-inner{
      width: 100%;
      position: relative;
      z-index: 11;
      padding: 28px 30px 20px;
      background: #F5F5F5;
      transition: all 0.35s;
   }
   &__icon{
      color: $theme-color;
      display: inline-block;
      i{
         color: $theme-color;
         font-size: 56px;
      }
      svg{
         fill: $theme-color;
         width: 56px;
      }
   }
   &__title{
      margin: 12px 0 0;
      font-size: 16px;
      font-weight: 800;
   }
   &__number{
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
   }
   &__arrow{
      font-size: 16px;
      z-index: 11;
      transition: all 0.35s;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: $theme-color;
      color: $white;
      position: absolute;
      top: 30px;
      right: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
   }
   &__overlay{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 11;
   }
   &__single{
      &:hover{
         .banner-five{
            &__content-inner{
               background: rgba(255, 255, 255, 0);
            }
            &__image{
               opacity: 1;
               transform: scale(1);
            }
            &__title{
               color: $white;
            }
            &__number{
               color: $white;
            }
            &__arrow{
               opacity: 1;
            }
         }
      }
   }
}

.item-active.center{
   .banner-five{
      &__content-inner{
         background: rgba(255, 255, 255, 0);
      }
      &__image{
         opacity: 1;
         transform: scale(1);
      }
      &__title{
         color: $white;
      }
      &__number{
         color: $white;
      }
      &__arrow{
         opacity: 1;
      }
   }
}