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


.cst-team{
    &-ptb{
        @media #{$xl,$lg} {
            padding-top: 120px;
            padding-bottom: 60px;
        }
        @media #{$md,$sm,$xs} {
            padding-top: 100px;
            padding-bottom: 40px;
        }
    }
    &-heading{
        @media #{$md,$sm,$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 #{$sm,$xs} {
            padding-top: 80px;
            padding-bottom: 60px;
        }
    }
    &-heading{
        @media #{$md,$sm,$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);
                }
            }
        }
        &-content{
            & p{
                color: rgba($color: #050312, $alpha: 0.6);
                font-family: var(--tp-ff-inter);
                font-size: 18px;
            }
        }
        &-social{
            & a{
                font-size: 14px;
                font-weight: 500;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                &:hover{
                    & span{
                        color: var(--tp-common-white);
                        background-color: var(--tp-common-red);
                    }
                }
                & span{
                    border-radius: 30px;
                    display: inline-block;
                    @include transition();
                    border: 1px solid rgba(20, 20, 20, 0.10);
                }
                & .bdr{
                    &-1{
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        display: inline-grid;
                        place-content: center;
                    }
                    &-2{
                        padding: 1px 14px;
                    }
                }
            }
        }
    }
}

.dgm-team{
    &-title-sm{
        font-weight: 700;
        font-size: 20px;
        line-height: 1.1;
        margin-bottom: 0;
        letter-spacing: -0.01em;
        color: var(--tp-common-black);
        font-family: var(--tp-ff-inter);
    }
    &-content{
        & span{
            font-weight: 400;
            font-size: 14px;
            line-height: 1;
            color: #4d5051; 
            display: inline-block;
            margin-bottom: 15px;
            letter-spacing: -0.01em;
            @include transition();
            font-family: var(--tp-ff-inter);
        }
    }
    &-thumb{
        margin-bottom: 15px;
        & img{
            width: 100%;
        }
    }
    &-social{
        & a{
            height: 30px;
            width: 30px;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            border: 1px solid rgba(20, 20, 20, 0.1);
            &:hover{
                color: var(--tp-common-black);
                border-color: var(--tp-theme-primary);
                background-color: var(--tp-theme-primary);
            }
        }
    }
    &-title-box{
        @media #{$xs}{
            margin-bottom: 30px;
        }
    }
}