.team-area{
    background: #f8fcff;
    @media #{$lg}{
        padding-bottom: 150px;
        padding-top: 150px;
    }
    @media #{$md}{
        padding-bottom: 100px;
        padding-top: 100px;
    }
    @media #{$sm}{
        padding-bottom: 70px;
        padding-top: 70px;
    }
    @media #{$xs}{
        padding-bottom: 70px;
        padding-top: 70px;
    }
    .single-team{
        .team-img {
            overflow: hidden;
            position: relative;
            img {
                width: 100%;
                transform: scale(1);
                transition: all 0.6s ease-out 0s;
            }
        }
        .team-caption {
            background: #fff;
            padding: 15px 0px;
            text-align: center;
            h3 {
                margin-bottom: 3px;
                a{
                    color: #33384e;
                    font-weight: 700;
                    font-size: 25px;
                    @media #{$md}{
                        font-size: 18px;
                    }
                    &:hover{
                        color: $theme-color;
                    }
                }
            }
            p{
                color:#57667e;
            }

        }

        // Hover
       &:hover .team-img {
        img {
            transform: scale(1.06);
        }

        // Effect
        .team-social{
            a{
                transform: translateY(0px);
                opacity: 1;
                visibility: visible;

            }
        }
       }
    }
}

.team-social{
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    li{
        display: inline-block;
        a {
            color: #8ba4b1;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            margin-left: 8px;
            display: inline-block;
            background: #fff;
            @include transform(.4s);
            i {
                display: inline-block;
            }

            // Effect
            transform: translateY(60px);
            opacity: 0;
            visibility: hidden;

        }
        &:nth-child(1) a{
            transition-delay: 0.0s;
        }
        &:nth-child(2) a{
            transition-delay: 0.1s;
        }
        &:nth-child(3) a{
            transition-delay: 0.3s;
        }
    }
}
