@use '../utils' as *;

/*----------------------------------------*/
/*  TEAM CSS START
/*----------------------------------------*/
.team-item {
    .team-thumb {
        max-width: 158px;
        margin: auto auto;
        position: relative;
        z-index: 5;
        border: 10px solid var(--clr-common-white);
        border-radius: 50%;
        img {
            border-radius: 50%;
            width: 100%;
            img {
                transform: scale(1.1);
            }
        }
    }
    &:hover {
        .team-content {
            background: rgba(235, 117, 59, 0.1);
        }
        .team-thumb {
            img {
                transform: scale(1.1);
            }
        }
    }
}
.team-content {
    background: var(--clr-bg-4);
    padding: 115px 30px 50px;
    margin-top: -90px;
    @extend %bd-transition;
    @media #{$xxs,$md} {
    padding: 115px 30px 30px;
    }
}
.team-title {
    margin-bottom: 10px;
    font-size: 24px;
    a {
        &:hover {
            color: var(--clr-theme-secondary);
        }
    }
}
.team-content {
    span {
        display: block;
        margin-bottom: 20px;
        color: var(--clr-theme-secondary);
    }
}
.team-content {
    p {
        margin-bottom: 25px;
    }
}

// Team style-2
.team-thumb-box {
	padding-right: 80px;
}
.doctor-tool-shapes {
	position: absolute;
	top: 110px;
	right: 58px;
}
.team-content-2 {
	padding-right: 100px;
}
.intro-bg-thumb {
	width: 100%;
	height: 100%;
	mix-blend-mode: soft-light;
	opacity: 60%;
}
.intro-bg {
	background: var(--clr-theme-primary);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.team-thumb-box {
	padding-right: 80px;
    @media #{$xl} {
        padding-right: 50px;
    }
    @media #{$xs,$sm,$md,$lg} {
        padding-right: 0;
    }
}
.doctor-tool-shapes {
	position: absolute;
	top: 110px;
	right: 58px;

    @media #{$lg} {
        top: 40px;
        right: 20px;
        img {
            max-width: 100px;
        }
    }
}
.team-content-2 {
	padding-right: 100px;
    @media #{$xl} {
        padding-right: 50px;
    }
    @media #{$xs,$sm,$md,$lg} {
        padding-right: 0;
    }
}
.team-card-content {
	h4 {
        margin-bottom: 5px;
        color: var(--clr-common-white);
        font-size: 20px;
        @media #{$xxs} {
            font-size: 18px;
        }
	}
	span {
		color: var(--clr-common-white);
	}
}
.team-card {
    position: absolute;
    bottom: 25px;
    left: 140px;
    background: var(--clr-theme-primary);
    padding: 20px 20px;
}
.team-thumb-radius {
    img {
        border-radius: 160px 160px 0 0;
        @media #{$xs} {
            border-radius: 0
        }
    }
}


// Team social
.team-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--clr-common-white);
	border-radius: 50%;
	color: rgb(22, 22, 22);
	border: 1px solid #DCE4E7;
    &:hover {
        color: var(--clr-common-white);
        background: var(--clr-theme-secondary);
        border-color: transparent;
    }
}