/*===========================
    7    .TEAM css 
===========================*/








.team-area{
    
    padding-bottom: 128px;
    position: relative;
    &::before{
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #101e3b;

    }
    & .team-title{
        & .title{
            color: $white;
            font-size: 40px;
            font-weight: 300;
            @media #{$xs} {
                font-size: 30px;
            }

            & span{
                font-size: 50px;
                font-weight: 600;
                @media #{$lg} {
                    font-size: 42px;
                }
                @media #{$xs} {
                    font-size: 32px;
                }
                & span{
                    font-weight: 400;
                }
            }
        }
        & > span{
            color: $white;
            font-weight: 500;
            font-size: 20px;
            padding-top: 15px;
            @media #{$md} {
                padding-bottom: 30px;
            }
            @media #{$xs} {
                padding-bottom: 30px;
                font-size: 16px;
            }
        }
    }
    & .team-item{
        position: relative;
        z-index: 10;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 30px;
        & img{
            width: 100%;
        }
        & .team-overlay{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(34, 34, 34,.5);
            @include transition(0.3s);
            & .team-contet{
                position: absolute;
                left: 50%;
                bottom: 0px;
                transform: translateX(-50%);
                width: 100%;
                opacity: 0;
                @include transition(0.3s);
                & ul{
                    & li{
                        display: inline-block;
                        & a{
                            height: 35px;
                            width: 35px;
                            line-height: 35px;
                            text-align: center;
                            color: $white;
                            font-size: 14px;
                            background: $theme-color;
                            border-radius: 50%;
                            margin: 0 3px;
                            @include transition(0.3s);
                            &:hover{
                                background: #ef5b51;
                                
                            }
                            
                        }
                    }
                }
                & .title{
                    color: $white;
                    font-size: 24px;
                    font-weight: 600;
                    text-transform: capitalize;
                    padding-top: 10px;
                    padding-bottom: 4px;
                }
                & span{
                    font-size: 14px;
                    font-weight: 500;
                    color: $white;
                }
            }
        }
        &::before{
            position: absolute;
            content: '';
            left: -30px;
            bottom: -30px;
            height: 100%;
            width: 100%;
            background: #182a51;
            z-index: -1;
            @include transition(0.3s);
        }
        &:hover{
            &::before{
                background: #ef5b51;
            }
            & .team-overlay{
                background-color: rgba(239, 91, 81, 0.62);
                & .team-contet{
                    opacity: 1;
                    bottom: 37px;
                }
            }
        }
    }
    & .team-active{
        & .slick-arrow{
            position: absolute;
            left: -400px;
            bottom: 30px;
            font-size: 20px;
            color: $white;
            @include transition(0.3s);
            cursor: pointer;
            &:hover{
                color: $theme-color-2;
                transform: scale(1.3);
            }
            &.prev{
                left: -485px;
                @media #{$lg} {
                    left: -380px;
                }
            }
            &.next{
                left: -450px;
                @media #{$lg} {
                    left: -350px;
                }
            }
        }
    }

}




.team-2-area{
    padding-top: 70px;
    padding-bottom: 127px;
    & .section-title{
        & p{
            padding-bottom: 40px;
            &.text{
                font-size: 14px;
                font-weight: 500;
                padding-top: 0;
                padding-bottom: 45px;
                line-height: 26px;
                color: #8a8a8a;
                padding-right: 70px;
                @media #{$lg} {
                    padding-right: 0;
                }
                @media #{$xs} {
                    padding-right: 0;
                }

            }
        }
    }
    & .team-item{
        & .team-thumb{
            position: relative;
            & img{
                width: 100%;
                border-radius: 50%;

            }
            & ul{
                position: absolute;
                left: 50%;
                bottom: -10px;
                transform: translateX(-50%);
                white-space: nowrap;
                opacity: 0;
                @include transition(0.3s);
                & li{
                    display: inline-block;
                    & a{
                        height: 35px;
                        width: 35px;
                        background: $theme-color;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 35px;
                        color: $white;
                        font-size: 14px;
                        margin: 0 4px;
                        @include transition(0.3s);
                        &:hover{
                            background: $theme-color-2;
                        }

                    }
                }
            }
        }
        & .team-content{
            padding-top: 25px;
            & .title{
                font-size: 24px;
            }
            & span{
                font-size: 14px;
                font-weight: 600;
                color: $theme-color-2;
            }
        }
        &:hover{
            & .team-thumb{
                & ul{
                    opacity: 1;
                }
            }
        }
    }
    &.about-team{
        padding-bottom: 130px;
        &.team-page{
            padding-top: 90px;
        }
    }
}