/*==========================================================================
Team
==========================================================================*/
.team__area {
    &-title {
        h2 {
            max-width: 540px;
        }
    }
    &-item {
        padding: 20px;
        border: 1px solid var(--border-color-1);
        padding-bottom: 0;
        margin-bottom: 1px;
        &-image {
            position: relative;
            z-index: 2;
            &::after {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                width: 100%;
                height: 0;
                background: var(--heading-color);
                transition: all 0.4s ease-out 0s;
                opacity: 0;
                z-index: 1;
            }
        }
        &-content {
            text-align: center;
            padding-top: 30px;
            transition: all 0.4s ease-out 0s;
            background: var(--white);
            position: relative;
            z-index: 2;
            span {
                font-size: 14px;
                line-height: 24px;
                font-weight: 700;
                font-family: var(--heading-font);
                color: var(--heading-color);
            }
            &-social {
                opacity: 0;
                transition: all 0.4s ease-out 0s;
                ul {
                    padding: 0;
                    margin: 0;
                    li {
                        display: inline-block;
                        list-style: none;
                        margin-right: 8px;
                        a {
                            i {
                                width: 40px;
                                height: 30px;
                                line-height: 30px;
                                text-align: center;
                                color: var(--primary-color);
                                border-radius: 50%;
                                border: 1px solid var(--primary-color);
                                transition: all 0.4s ease-out 0s;
                                &:hover {
                                    background: var(--primary-color);
                                    color: var(--white);
                                }
                            }
                        }
                        &:last-child {
                            margin: 0;
                        }
                    }
                }
            }            
        }
        &:hover {
            .team__area-item {
                &-image {
                    &::after {
                        opacity: 0.7;
                        height: 100%;
                    }
                }
                &-content {
                    margin-top: -55px;
                    padding-bottom: 35px;
                    &-social {
                        opacity: 1;
                        margin-top: 10px;
                        ul {
                            li {
                                a {
                                    i {
                                        height: 40px;
                                        line-height: 40px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
	&-button {
		text-align: right;
		&-next {			
            display: inline-block;
            position: initial;
            margin: 0;
            margin-left: 10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
			i {
                width: 50px;
                height: 50px;
                line-height: 50px;
                display: inline-block;
                text-align: center;
                color: var(--primary-color);
                border-radius: 50%;
                border: 1px solid var(--primary-color);
                transition: all 0.4s ease-in-out;
                &:hover {
                    background: var(--primary-color);
                    color: var(--white);
                }  
			}
		}
		&-prev {		
			display: inline-block;
			position: initial;
            margin: 0;
            width: 50px;
            height: 50px;
            line-height: 50px;
			i {
                width: 50px;
                height: 50px;
                display: inline-block;
                line-height: 50px;
                text-align: center;
                color: var(--primary-color);
                border-radius: 50%;
                border: 1px solid var(--primary-color);
                transition: all 0.4s ease-in-out; 
                &:hover {
                    background: var(--primary-color);
                    color: var(--white);
                }  
			}
		}
	}
}
@media (max-width: 767px) {
    .team__area {
        &-button {
            text-align: left;
            margin-top: 30px;
        }
    }
}