@use '../../../utils' as *;
/*----------------------------------------*/
/*   3.3 Team Style
/*----------------------------------------*/


.cst-team{
    &-ptb{
        @media #{$xl,$lg} {
            padding-top: 120px;
            padding-bottom: 60px;
        }
        @media #{$md,$xs} {
            padding-top: 100px;
            padding-bottom: 40px;
        }
    }
    &-heading{
        @media #{$md,$xs} {
            margin-bottom: 30px;
        }
    }
    &-box{
        & .dgm-team-thumb{
            & img{
                border-radius: 16px;
            }
            & .tp--hover-img {
                & canvas{
                    border-radius: 16px;
                }
            }
        }
    }
}


.cnt-team{
    &-ptb{
        @media #{$xl,$lg,$md} {
            padding-top: 100px;
            padding-bottom: 80px;
        }
        @media #{$xs} {
            padding-top: 80px;
            padding-bottom: 60px;
        }
    }
    &-heading{
        @media #{$md,$xs} {
            margin-bottom: 30px;
        }
    }
    &-item{
        &:hover{
            & .cnt-team-item{
                &-thumb{
                    & img{
                        transform: scale(1.1);
                    }
                }
            }
        }
        &-thumb{
            overflow: hidden;
            border-radius: 16px;
            & img{
                width: 100%;
                border-radius: 16px;
                transition: all .5s ease-in-out;
            }
        }
        &-title{
            font-weight: 500;
            margin-bottom: 2px;
            font-family: var(--tp-ff-clash-medium);
            &:hover{
                & a{
                    color: var(--tp-common-red-2);
                }
            }
        }
        &-content{
            & p{
                color: rgba($color: #050312, $alpha: 0.6);
            }
        }
        &-social{
            & a{
                font-size: 14px;
                font-weight: 500;
                text-transform: uppercase;
                &:hover{
                    & span{
                        color: var(--tp-common-white);
                        background-color: var(--tp-common-red-2);
                    }
                }
                & span{
                    border-radius: 30px;
                    display: inline-block;
                    @include tp-transition();
                    border: 1px solid rgba(20, 20, 20, 0.10);
                }
                & .bdr{
                    &-1{
                        width: 30px;
                        height: 30px;
                        margin-right: -5px;
                        text-align: center;
                        display: inline-grid;
                        place-content: center;
                    }
                    &-2{
                        padding: 1px 14px;
                    }
                }
            }
        }
    }
}