body{
	font-family: Helvetica;
	margin: 0;
	color: #343A40;
}

a{
	color: inherit;
	text-decoration: none;
}

.color-one-text{
	color: #343A40 !important;
	font-weight: normal;
}

.dark-text{
	color: #005CA2;
}

.blue-text{
	color: #263238;
}

.white-text{
	color: white;
}

/*****  DATOS DEL DOCTOR *****/
#doctor-data{
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f9fc 0%, #dfe9f3 60%, #cfdeee 100%);
}

#name-doctor{
	min-height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 45px 0;
	box-sizing: border-box;
}

#doctor-photo{
	order: 2;
	flex: 0 0 330px;
	max-width: 330px;
}

#doctor-photo img{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(0, 40, 87, 0.28);
}

#doctor-info{
	order: 1;
	flex: 1 1 420px;
	max-width: 560px;
	background-color: rgba(250, 250, 250, 0.82);
	border-radius: 15px;
	padding: 35px 40px;
	box-sizing: border-box;
}

.title{
	font-size: 52px;
	margin-block-start: 0;
	margin-block-end: 0;
	color: #005CA2;
	font-weight: normal;
	line-height: 1.1;
}

.subtitle{
	font-size: 17px;
	color: #343A40;
	line-height: 22px;
}

.title-section .title{
	width: initial;
}

#doctor-info > p{
	font-size: 20px;
	margin: 0;
	margin-top: 1em;
	line-height: 27px;
}

#doctor-info > p > b{
	color: #4caf50;
}

#hero-actions{
	margin-top: 30px;
}

#hero-actions a{
	display: inline-block;
	padding: 12px 26px;
	border-radius: 30px;
	font-size: 16px;
	margin-right: 12px;
	transition: .3s all;
}

.btn-primary{
	background-color: #005CA2;
	color: white;
	border: 1px solid #005CA2;
}

.btn-primary:hover{
	background-color: #31b7bc;
	border-color: #31b7bc;
}

.btn-secondary{
	background-color: transparent;
	color: #005CA2;
	border: 1px solid #005CA2;
}

.btn-secondary:hover{
	background-color: #005CA2;
	color: white;
}

#networks-mobile{
	display: none;
}

#networks-mobile > div{
	display: inline-flex;
	align-items: center;
	border-radius: 30px;
	height: 40px;
	width: 40px;
	padding: 5px;
	margin: 5px 10px;
	background: #081D38;
}

#networks-mobile > div > a{
	margin: 0 auto;
	display: flex;
	align-items: center;
}

#networks-mobile > div img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(108%) contrast(101%);
}
/*****  FIN DATOS DEL DOCTOR  *****/


@media only screen and (max-width: 599px) {
	header{ background-color: initial; }

	.title{ font-size: 30px !important; }

	.description-section{ width: 95% !important; }

	#doctor-data{
		text-align: center;
		background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../img/banners/background-movil.jpg);
        background-position: center;
        background-size: cover;
	}

	#name-doctor{
		flex-direction: column;
		min-height: 0;
		gap: 22px;
		padding: 20px 0 35px;
		width: 90%;
	}

	#doctor-photo{
		order: 1;
		flex: initial;
		width: 80%;
		max-width: 240px;
	}

	#doctor-photo img{
		aspect-ratio: 1 / 1;
		border-radius: 12px;
		box-shadow: rgb(0 40 87 / 45%) 0px 4px 14px;
	}

	#doctor-info{
		order: 2;
		flex: initial;
		width: 100%;
		max-width: none;
		background-color: transparent;
		padding: 0;
	}

	#doctor-info > p{
		font-size: 14px;
		line-height: 19px;
		margin-top: 15px;
	}

	#hero-actions{ margin-top: 22px; }

	#hero-actions a{
		padding: 10px 20px;
		font-size: 14px;
		margin: 0 5px;
	}

	#networks-mobile{
		display: block;
		margin-top: 25px;
	}
}

@media only screen and (min-width: 600px) and (max-width: 767px){
	header{ background-color: initial; }

	#name-doctor{
		flex-direction: column;
		min-height: 0;
		gap: 25px;
		padding: 25px 0 40px;
		text-align: center;
	}

	#doctor-photo{
		order: 1;
		flex: initial;
		width: 260px;
		max-width: 260px;
	}

	#doctor-info{
		order: 2;
		flex: initial;
		width: 90%;
		max-width: none;
		background-color: transparent;
		padding: 0;
	}

	#networks-mobile{ display: block; }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
	#name-doctor{
		gap: 30px;
		min-height: 0;
		padding: 35px 0;
	}

	#doctor-photo{ flex: 0 0 250px; max-width: 250px; }

	#doctor-info{ padding: 25px 28px; }

	#doctor-info > p{ font-size: 17px; line-height: 23px; }

	.title{ font-size: 38px; }

	#networks-mobile{
		display: block;
		margin-top: 10px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#logo > div > img{ width: 80px; height: auto; }

	nav{ position: relative; }

	.information{ margin-left: 10px; }

	#doctor-photo{ flex: 0 0 280px; max-width: 280px; }

	.title{ font-size: 44px; }
}