.flexitype_team {
    &-item {
        &-image {
            img {
                width: 100%;
                object-fit: cover;
            }
        }
        &-content {
            padding: 30px 20px;
            margin: 0 30px;
            box-shadow: 0 0 60px rgba(var(--border-color-3), .08);
            background: #FFFFFF;
            position: relative;
            z-index: 1;
            margin-top: -50px;
            border-radius: 10px;
            transition: 0.4s;
            .title {
                display: flex;
                span,
                h4 {
                    transition: 0.4s;
                }
                h4 {
                    margin: 5px 0;
                }
            }
            &-icon {
                position: absolute;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
                span {
                    color: #363636;
                    display: inline-flex;
                    height: 45px;
                    width: 45px;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    background: #f5f5f5;
                    border-radius: 50%;
                    transition: 0.4s;
                    cursor: pointer;
                    svg {
                        max-width: 16px;
                        path {
                            fill: #363636;
                        }
                    }
                }
                .flexitype_team-item-content-social {
                    position: absolute;
                    bottom: 55px;
                }
                &:hover {
                    .flexitype_team-item-content-social {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
            &-social {
                position: absolute;
                left: 0;
                opacity: 0;
                visibility: hidden;
                transition: 0.4s;
                margin-bottom: 10px;
                ul {
                    padding: 0;
                    margin: 0;
                    display: grid;
                    gap: 8px;
                    li {
                        list-style: none;
                        a {
                            outline: none;
                            display: inline-flex;
                            height: 45px;
                            width: 45px;
                            align-items: center;
                            justify-content: center;
                            border-radius: 5px;
                            background:#242424;
                            transition: 0.4s;
                            i {
                                color: #FFFFFF;
                                transition: 0.4s;
                                font-size: 16px;
                            }
                            svg {
                                max-width: 10px;
                                path {
                                    fill: #FFFFFF;
                                }
                            }
                            &:hover {                                
                                background: #3F4FFF;
                                i {
                                    color: #FFFFFF;
                                }
                                svg path {
                                    fill: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.flexitype_team_two {
    &-item {
        text-align: center;
        &-image {
            position: relative;
            z-index: 1;
            overflow: hidden;
            img {
                width: 100%;
                transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
                object-fit: cover;
            }
        }
        &-content {
            margin: 0 20px;
            padding: 30px 25px;
            transition: 0.4s;
            position: relative;
            z-index: 2;
            left: 0;
            bottom: 0;
            right: 0;
            .title {
                display: flex;
                h4 {
                    transition: 0.4s;
                    margin: 5px 0;
                }
                span {
                    color: #3F4FFF;
                    transition: 0.4s;
                }
            }
            &-social {            
                margin-top: 10px;
                transition: 0.4s; 
                opacity: 0;
                ul {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    gap: 8px;
                    justify-content: center;
                    li {
                        list-style: none;
                        a {
                            outline: none;
                            display: inline-flex;
                            height: 45px;
                            width: 45px;
                            align-items: center;
                            justify-content: center;
                            border-radius: 5px;
                            background:#242424;
                            transition: 0.4s;
                            i {
                                color: #FFFFFF;
                                transition: 0.4s;
                                font-size: 16px;
                            }
                            svg {
                                max-width: 10px;
                                path {
                                    fill: #FFFFFF;
                                }
                            }
                            &:hover {                                
                                background: #3F4FFF;
                                i {
                                    color: #FFFFFF;
                                }
                                svg path {
                                    fill: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }   
            &.team_four {
                opacity: 0;
            }          
        }
        &:hover {
            .flexitype_team_two-item {
                &-image img {
                    transform: scale3d(1.1, 1.1, 1.1); 
                }
                &-content {
                    background: #3F4FFF;
                    transform: translateY(-50px);
                    h4 {
                        color: #FFFFFF;
                    }
                    span {
                        color: #FFFFFF;
                    }
                    &.team_four,
                    &-social {
                        opacity: 1;
                    }            
                }
            }
        } 
        &.team_four {
            .flexitype_team_two-item-content-social {
                opacity: 1;
            }
        }
    }
}
.flexitype_team_three {
    &-item {
        &-image {
            position: relative;
            img {
                width: 100%;
                object-fit: cover;
            }
            &-social {
                position: absolute;
                right: 0;
                top: 30px;
                transition: 0.4s;
                opacity: 0;
                ul {
                    padding: 0;
                    margin: 0;
                    display: grid;
                    gap: 8px;
                    li {
                        list-style: none;
                        a {
                            outline: none;
                            display: inline-flex;
                            height: 45px;
                            width: 45px;
                            align-items: center;
                            justify-content: center;
                            border-radius: 5px;
                            background:#242424;
                            transition: 0.4s;
                            i {
                                color: #FFFFFF;
                                transition: 0.4s;
                                font-size: 16px;
                            }
                            svg {
                                max-width: 10px;
                                path {
                                    fill: #FFFFFF;
                                }
                            }
                            &:hover {                                
                                background: #3F4FFF;
                                i {
                                    color: #FFFFFF;
                                }
                                svg path {
                                    fill: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
            &-content {
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 20px;
                display: flex;
                span {
                    display: inline-block;
                    background: #3F4FFF;
                    color: #FFFFFF;
                    padding: 1px 20px;
                    opacity: 0;
                    transition: 0.4s;
                    transform: translateX(-20px);
                }
                h4 {
                    margin: 0;
                }
                h4 a,
                h4 {
                    background:#242424;
                    color: #FFFFFF;
                    padding: 3px 20px 8px 20px;
                    display: inline-block;
                    opacity: 0;
                    transition: 0.4s;
                    transform: translateX(20px);
                }
            }
        }
        &:hover {
            .flexitype_team_three-item-image {
                &-content {
                    span,
                    h4,
                    h4 a {
                        opacity: 1;
                        transform: translateX(0);
                    }
                }
                &-social {
                    transform: translateX(-20px);
                    opacity: 1;
                }
            }
        }
    }
}