/*Teachers*/

.teachers{
	position: relative;
	padding: 100px 0;
}
.teachers h2{
	margin-bottom: 50px;
}
.teachers .card{
	min-width: 32%;
    max-width: 32%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}
.teachers .card img{
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
}
.teachers .card button{
	position: relative;
    padding: 8px 32px;
    border-radius: 20px;
    border: 2px solid rgba(0, 0, 0, .2);
    background: transparent;
    color: rgba(0, 0, 0, .6);
    display: inline-block;
    font-weight: 450;
    margin-top: 10px;
}
.teachers .card button:hover{
	background: #6c5ce7;
	color: #fff;
	border-color: #6c5ce7;
}

/*970px*/

@media (max-width: 970px){
	.courses .d-flex{
		flex-direction: column;
	}
	.courses h2{
		margin-bottom: 20px;
	}
	.courses .card{
		max-width: 100%;
		margin-bottom: 40px;
	}
	.courses .card img{
		height: 300px;
	}
	.courses .card .d-flex{
		flex-direction: row;
	}
}

/*700px*/

@media (max-width: 700px){
	.teachers .d-flex{
		flex-direction: column;
	}
	.teachers .d-flex .card{
		max-width: 100%;
		margin-bottom: 40px;
	}
}

/*576px*/

@media (max-width: 576px){
	.courses, .fields{
		padding-bottom: 50px;
	}
	.courses .d-flex{
		flex-direction: column;
	}
	.courses h2{
		margin-bottom: 20px;
	}
	.courses .card{
		max-width: 100%;
		margin-bottom: 40px;
	}
	.courses .card img{
		height: 180px;
	}
	.courses .card .d-flex{
		flex-direction: row;
	}
}