.therapists .search {
	display: flex; align-items: center; justify-content: center;
	height: 300px; margin-bottom: 2rem; border-radius: 20px;
	background-image: url(../../../image/module/therapists/search_bg.jpg);
	background-position: right bottom; background-size: cover;
}

.therapists .search div {position: relative; width: 90%;}
.therapists .search input {
	width: 100%; height: 80px !important; margin: 0 auto; padding: 0 60px 0 180px;
	border-radius: 40px !important; border: 0; font-size: 28px;
}
.therapists .search input::placeholder {color: #070606;}
.therapists .search input:active::placeholder,
.therapists .search input:focus::placeholder {color: #bbb;}

.therapists .search i {
	position: absolute; left: 0; top: 0; width: 150px; height: 80px; line-height: 80px; text-align: center;
	border-radius: 40px; background-color: #070606; font-size: 36px; color: white; cursor: pointer;
}

.therapists .cards {display: flex; flex-direction: column; gap: 1rem;}

.therapists .empty {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 120px; font-size: 20px; color: #868686;
}

@media screen and (min-width: 40em) {

	.therapists .search div {position: relative; width: 680px;}

	.therapists .cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
	}
}

.therapists .cards .profile-card {
	display: flex; flex-direction: column; align-items: center; position: relative;
	width: 100%; height: 460px; margin: 0 auto; border-radius: 20px;
	background-color: white; box-shadow: 0 8px 20px rgba(155, 175, 205, 0.28);
}
.therapists .cards .profile-card:hover {
	outline: 2px solid var(--color-main-lighter); box-shadow: 0 0 30px var(--color-main-light);
}

.therapists .cards .profile-card a {
	position: absolute; top: 0; right: 0; z-index: 1; width: 100%; height: 100%; border-radius: 20px;
}
.therapists .cards .profile-card .photo {position: relative; margin: 2rem 0; padding: 20px; border-radius: 50%;}
.therapists .cards .profile-card .photo:before {
	content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
	background: linear-gradient(290deg, var(--color-main) 0%, white 70%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
.therapists .cards .profile-card .photo img {
	width: 140px; height: 140px; object-fit: cover;
	border-radius: 50%; box-shadow: 0 8px 20px rgba(155, 175, 205, 0.28);
}
.therapists .cards .profile-card .name {font-size: 20px; font-weight: bold;}
.therapists .cards .profile-card .features {
	margin-top: 1rem; padding: 0 1.5rem; text-align: center; font-size: 1rem; color: #868686;
}
.therapists .cards .profile-card .line {width: 100%; border-top: 1px solid #e7e7e7; margin: auto 0 2.5rem 0;}
.therapists .cards .profile-card .therapy-order {
	z-index: 2; margin-bottom: 2.5rem;
	height: 40px; padding: 0 1.5rem; border-radius: 20px; background-color: white;
	border: 1px solid var(--color-main); color: black; font-size: 1.2rem; cursor: pointer;
}
.therapists .cards .profile-card .therapy-order:hover {background-color: var(--color-main); color: white;}
.therapists .cards .profile-card:after {
	content: ''; position: absolute; bottom: 0; left: 15%;
	width: 70%; height: 12px; border-radius: 10px 10px 0 0; background: var(--color-main);
}