.icon__box-item {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 8;
    top: 0;
    padding: 30px;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.05);
    .box_badge {
        display: inline-block;
        color: #8C8C8C;
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        word-break: normal;
    }
    &.custom_badge .box_badge {
        position: absolute;
        right: 40px;
        top: 40px;
        font-size: 50px;
        z-index: 2;
    }
    &::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    &.box_image {
        .icon__box-image {
            flex-shrink: 0;
        }
        .icon__box-item-content {
            width: 100%;
        }
        .icon__box-item-content {
            position: relative;
            z-index: 1;
            display: block;
            span,
            .title {
                display: block;
            }
        }
        .icon__box-item-overlay {
            opacity: 1;
        }
    }
    &-overlay {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0;
        overflow: hidden;
        transition: .4s ease 0s, background-color 0.5s ease 0s, background-image 0.5s ease 0s;
        &::before,
        &::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: .4s ease 0s, background-color 0.5s ease 0s, background-image 0.5s ease 0s;
        }
        &::before {
            z-index: 1;
        }
    }
    &.from_top .icon__box-item-overlay::before,
    &.from_top .icon__box-item-overlay::after {
        top: -100%;
        opacity: 1;
    }
    &.from_left .icon__box-item-overlay::before,
    &.from_left .icon__box-item-overlay::after {
        top: 0;
        left: -100%;
        opacity: 1;
    }
    &.from_right .icon__box-item-overlay::before,
    &.from_right .icon__box-item-overlay::after {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    &.from_bottom .icon__box-item-overlay::before,
    &.from_bottom .icon__box-item-overlay::after {
        top: 100%;
        opacity: 1;
    }
    &-icon {
        margin-bottom: 15px;
        position: relative;
        display: inline-flex;
        border-radius: 50%;
        transition: 0.4s;
        width: 40px;
        height: 40px;
        min-width: 40px;
        align-items: center;
        justify-content: center;
        i {
            color: #242424;
            font-size: 40px;
            transition: 0.4s;
            line-height: 0;
        }
        svg {
            max-width: 40px;
            height: auto;
            transition: 0.4s;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            background: #3949F4;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 14px;
            border-radius: 50%;
            border: 4px solid #ffffff
        }
        span.right {
            left: inherit;
            right: 0;
        }
    }
    &-content {
        display: flex;
        .title {
            display: flex;
            transition: 0.4s;
        }
        h4 {
            margin: 0;
        }
        p {
            display: inline-block;
        }
    }
    &:hover {
        .icon__box-item-overlay {
            opacity: 1;
        }
        &.from_top .icon__box-item-overlay::before,
        &.from_top .icon__box-item-overlay::after,
        &.from_bottom .icon__box-item-overlay::before,
        &.from_bottom .icon__box-item-overlay::after {
            top: 0;
        }
        &.from_right .icon__box-item-overlay::after,
        &.from_right .icon__box-item-overlay::before,
        &.from_left .icon__box-item-overlay::before,
        &.from_left .icon__box-item-overlay::after {
            left: 0;
        }
    }
}
.blog_btn,
.icon__box-item-content p,
.icon__box-item-content h4 {
    transition: 0.4s;
    margin-bottom: 0;
}
.icon__box-item-content p a,
.icon__box-item-content h4 a {
    transition: 0.4s;
}
.blog_btn,
.simple_btn,
.icon__box-item-content > a {
    font-weight: 500;
    color: #242424;
    transition: 0.4s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog_btn.left,
.simple_btn.left,
.icon__box-item-content > a.left {
    flex-direction: row-reverse;
}
.simple_btn i,
.blog_btn i,
.icon__box-item-content > a i {
    font-size: 13px;
    position: relative;
    z-index: 1;
}
.tab_area-btn-item-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

// flip box
.icon__box-item.back,
.icon__box-item.front {
    display: block;
    .icon__box-item-content,
    .title {
        flex-direction: column;
    }
}
.flip_box_container {
    perspective: 1000px;
    transform-style: preserve-3d;
    .flip_box_card {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 700ms ease;
        .icon__box-item.front,
        .icon__box-item.back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotateY(0deg);
            transform-style: preserve-3d;
            backface-visibility: hidden;
            padding: 30px;
            .icon__box-item-icon {
                min-width: 70px;
                min-height: 70px;
            }
            .content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                height: 100%;
                p {
                    i {
                        position: relative;
                        bottom: 1px;
                    }
                }
            }
            .icon__box-item-image {
                overflow: hidden;
            }
        }
        .icon__box-item.front {
            position: relative;
            box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.08);
            background: #FFFFFF;
        }
        .icon__box-item.back {
            background: #FFFFFF;
            .icon__box-item-icon {
                background: #f4f4f4;
                i {
                    color: #3949F4;
                }
            }
        }
    }
    &.flip_left {
        .icon__box-item.back {
            transform: rotateY(-180deg);
        }
        &:hover {
            .flip_box_card {
                transform: rotateY(-180deg);
            }
        }
    }
    &.flip_right {
        .icon__box-item.back {
            transform: rotateY(180deg);
        }
        &:hover {
            .flip_box_card {
                transform: rotateY(180deg);
            }
        }
    }
    &.flip_down {
        .icon__box-item.back {
            transform: rotateX(-180deg);
        }
        &:hover {
            .flip_box_card {
                transform: rotateX(-180deg);
            }
        }
    }
    &.flip_up {
        .icon__box-item.back {
            transform: rotateX(180deg);
        }
        &:hover {
            .flip_box_card {
                transform: rotateX(180deg);
            }
        }
    }
    &.zoom_in {
        .icon__box-item.back {
            transform: scale(0.6);
            opacity: 0;
        }
        &:hover {
            .icon__box-item.back {
                transform: scale(1);
                opacity: 1;
            }
        }
    }
    &.zoom_out {
        .icon__box-item.back {
            opacity: 0;
        }
        &:hover {
            .icon__box-item.back {
                opacity: 1;
            }
            .icon__box-item.front {
                transform: scale(0.6);
            }
        }
    }
    &.fade_in {
        .icon__box-item.back {
            opacity: 0;
        }
        &:hover {
            .icon__box-item.back  {
                opacity: 1;
            }
        }
    }
    // down
    &.effect_right_one,
    &.effect_right_two,
    &.effect_right_three,
    &.effect_right_four,
    &.effect_down_four,
    &.effect_down_three,
    &.effect_down_two,
    &.effect_down_one {
        .icon__box-item.front {
            transform-origin: 100% 100%;
        }        
    }
    &.effect_left_one,
    &.effect_left_two,
    &.effect_left_three,
    &.effect_left_four,
    &.effect_up_two,
    &.effect_up_three,
    &.effect_up_four,
    &.effect_up_one {
        .icon__box-item.front {
            transform-origin: 0 0;
        }
    }
}
.flip_box_3d .flip_box_container .icon__box-item .content {
    transform: translateZ(70px) scale(0.93);
}
.flip_box_container.effect_left_two:hover .icon__box-item.back,
.flip_box_container.effect_left_four:hover .icon__box-item.back,
.flip_box_container.effect_left_three:hover .icon__box-item.back,
.flip_box_container.effect_left_one:hover .icon__box-item.back,
.flip_box_container.effect_right_one:hover .icon__box-item.back,
.flip_box_container.effect_right_three:hover .icon__box-item.back,
.flip_box_container.effect_right_two:hover .icon__box-item.back,
.flip_box_container.effect_right_four:hover .icon__box-item.back {
  transform: rotateY(0);
  z-index: 2;
}
.flip_box_container.effect_left_three .icon__box-item.back,
.flip_box_container.effect_right_one .icon__box-item.back,
.flip_box_container.effect_right_two:hover .icon__box-item.front,
.flip_box_container.effect_right_three:hover .icon__box-item.front {
  transform: rotateY(180deg);
  transform-origin: 100% 100%;
}
.flip_box_container.effect_left_four .icon__box-item.back,
.flip_box_container.effect_right_four:hover .icon__box-item.front,
.flip_box_container.effect_right_two .icon__box-item.back,
.flip_box_container.effect_right_one:hover .icon__box-item.front {
  transform: rotateY(-180deg);
  transform-origin: 100% 100%;
}
.flip_box_container.effect_right_four .icon__box-item.back,
.flip_box_container.effect_left_one:hover .icon__box-item.front,
.flip_box_container.effect_left_two .icon__box-item.back,
.flip_box_container.effect_left_four:hover .icon__box-item.front {
  transform: rotateY(180deg);
  transform-origin: 0 0;
}
.flip_box_container.effect_right_three .icon__box-item.back,
.flip_box_container.effect_left_one .icon__box-item.back,
.flip_box_container.effect_left_two:hover .icon__box-item.front,
.flip_box_container.effect_left_three:hover .icon__box-item.front {
  transform: rotateY(-180deg);
  transform-origin: 0 0;
}
.flip_box_container.effect_down_one:hover .icon__box-item.front,
.flip_box_container.effect_down_four:hover .icon__box-item.front,
.flip_box_container.effect_up_four .icon__box-item.back,
.flip_box_container.effect_down_two .icon__box-item.back {
  transform: rotateX(180deg);
  transform-origin: 100% 100%;
}
.flip_box_container.effect_up_two:hover .icon__box-item.front,
.flip_box_container.effect_up_three:hover .icon__box-item.front,
.flip_box_container.effect_down_three .icon__box-item.back,
.flip_box_container.effect_up_one .icon__box-item.back {
  transform: rotateX(180deg);
  transform-origin: 0 0;
}
.flip_box_container.effect_down_one .icon__box-item.back,
.flip_box_container.effect_up_three .icon__box-item.back,
.flip_box_container.effect_down_two:hover .icon__box-item.front,
.flip_box_container.effect_down_three:hover .icon__box-item.front {
  transform: rotateX(-180deg);
  transform-origin: 100% 100%;
}
.flip_box_container.effect_up_four:hover .icon__box-item.front,
.flip_box_container.effect_down_four .icon__box-item.back,
.flip_box_container.effect_up_one:hover .icon__box-item.front,
.flip_box_container.effect_up_two .icon__box-item.back {
  transform: rotateX(-180deg);
  transform-origin: 0 0;
}
.flip_box_container.effect_down_three:hover .icon__box-item.back,
.flip_box_container.effect_down_two:hover .icon__box-item.back,
.flip_box_container.effect_down_one:hover .icon__box-item.back,
.flip_box_container.effect_down_four:hover .icon__box-item.back,
.flip_box_container.effect_up_one:hover .icon__box-item.back,
.flip_box_container.effect_up_two:hover .icon__box-item.back,
.flip_box_container.effect_up_three:hover .icon__box-item.back,
.flip_box_container.effect_up_four:hover .icon__box-item.back {
  transform: rotateX(0);
  z-index: 2;
}
// Slide Box
.flip_box_container.slide_up,
.flip_box_container.slide_right,
.flip_box_container.slide_down,
.flip_box_container.slide_two_left,
.flip_box_container.slide_two_up,
.flip_box_container.slide_two_right,
.flip_box_container.slide_two_down,
.flip_box_container.slide_left {
  overflow: hidden;
}
.flip_box_container.slide_left .icon__box-item.back,
.flip_box_container.slide_two_left .icon__box-item.back,
.flip_box_container.slide_two_right:hover .icon__box-item.front {
  transform: translateX(100%);
}
.flip_box_container.slide_left:hover .icon__box-item.back,
.flip_box_container.slide_two_left:hover .icon__box-item.back,
.flip_box_container.slide_right:hover .icon__box-item.back,
.flip_box_container.slide_two_right:hover .icon__box-item.back {
  transform: translateX(0);
}
.flip_box_container.slide_two_up .icon__box-item.back,
.flip_box_container.slide_up .icon__box-item.back,
.flip_box_container.slide_two_down:hover .icon__box-item.front {
  transform: translateY(100%);
}
.flip_box_container.slide_two_down:hover .icon__box-item.back,
.flip_box_container.slide_up:hover .icon__box-item.back,
.flip_box_container.slide_down:hover .icon__box-item.back,
.flip_box_container.slide_two_up:hover .icon__box-item.back {
  transform: translateY(0);
}
.flip_box_container.slide_right .icon__box-item.back,
.flip_box_container.slide_two_left:hover .icon__box-item.front,
.flip_box_container.slide_two_right .icon__box-item.back {
  transform: translateX(-100%);
}
.flip_box_container.slide_two_up:hover .icon__box-item.front,
.flip_box_container.slide_two_down .icon__box-item.back,
.flip_box_container.slide_down .icon__box-item.back {
  transform: translateY(-100%);
}

.flexitype_slider {
    .icon__box-item {
        background: #fbfbfc;
        border: 1px solid #f4f4f4;
        box-shadow: none;
        &-content {
            flex-direction: column;
        }
    }
}