/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*										Global											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.container-fluid{
	display: flex;
	flex-direction: Row;
}
a{
	color: white;
    text-decoration: none;
}
html{
	scroll-behavior: smooth;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*												Init											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


.item {
    padding: 0px;
	flex-grow: 1;
}
.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: fill; /* Puede ser cover, contain, fill, etc., según tu preferencia */
}
.carousel-item {
    transition: transform 0.6s ease-in-out;
}
.column-60 {
    flex: 6; /* 3 partes de un total de 5 */
	margin: 6% 2%;
	padding: 0 0 0 2%;
}
.column-40 {
    flex: 5; /* 2 partes de un total de 5 */
}
.Background01{
	position: relative; /* Para posicionar elementos hijos de manera absoluta en relación a este contenedor */
    width: 100%;
    background-image: url("Pictures/Background01.jpg"); /* Ruta a tu imagen de fondo */
    background-size: cover; /* Cubre todo el contenedor */
    background-position: flex-start; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
.logo01{
    position: absolute; /* Posiciona el logo de manera absoluta dentro del contenedor */
    height: auto; /* Altura automática para mantener la proporción */
	border: 3px solid #042433;
	left: 12px; /* Ajusta la posición horizontal del logo */
	border-radius: 10%;
	
}
.FirstTitle{
	margin: 0;
}
.PhoneNumber{
		Display: flex;
		justify-content: flex-end;
		flex: 1;
	}
#Menu{
	display: flex;
    justify-content: center;
    align-items: center;
	margin: 0;
	padding: 13px 0 0 0;
	background-color: #156082;
	border: 3px solid #042433;
	color: white;
	height: 40px;
}
.ThirtTitle{
	padding: 0 0 0 2%;
}
.InfoText{
	font-size: 1.12em; /* Reducido a 80% de 1.4em */
	margin: 4% 0 0 0;
	text-align: justify;
}

/* Extra Large screens */
@media (min-width: 1600px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: Row;
	}
	.column-40 {
		margin: 3% 6%;
	}
	.logo01{
		width: 250px; /* Ancho del logo */
		top: 25px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: Row;
	}
	.FirstTitle{
		padding: 20px 0 10px 270px;
		font-size: 2.4em; /* Reducido a 80% de 3em */
	}
	.PhoneNumber{
		padding: 40px 0 0px 0px;
		font-size: 1.6em; /* Reducido a 80% de 2em */
	}
	.SecondTitle{
		font-size: 2.24em; /* Reducido a 80% de 2.8em */
	}
	.ThirtTitle{
		font-size: 2.08em; /* Reducido a 80% de 2.6em */
	}
	.InfoText{
		font-size: 1.6em; /* Reducido a 80% de 2em */
	}
	#Menu{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
		height: 50px;
	}
}
/* Large screens */
@media (min-width: 1200px) and (max-width: 1600px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: Row;
	}
	.column-40 {
		margin: 3% 6%;
	}
	.logo01{
		width: 200px; /* Ancho del logo */
		top: 25px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: Row;
	}
	.FirstTitle{
		padding: 20px 0 10px 220px;
		font-size: 2.24em; /* Reducido a 80% de 2.8em */
	}
	.PhoneNumber{
		padding: 40px 0 0px 0px;
		font-size: 1.44em; /* Reducido a 80% de 1.8em */
	}
	.SecondTitle{
		font-size: 2.08em; /* Reducido a 80% de 2.6em */
	}
	.ThirtTitle{
		font-size: 1.76em; /* Reducido a 80% de 2.2em */
	}
	.InfoText{
		font-size: 1.28em; /* Reducido a 80% de 1.6em */
	}
	#Menu{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
		height: 50px;
	}
}
/* Medium screens */
@media (min-width: 992px) and (max-width: 1200px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: Row;
	}
	.column-40 {
		margin: 3% 6%;
	}
	.logo01{
		width: 180px; /* Ancho del logo */
		top: 20px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0px 10px 200px;
	}
	.PhoneNumber{
		padding: 0px 0 0px 0px;
		font-size: 1.28em; /* Reducido a 80% de 1.6em */
	}
	#Menu{
		font-size: 1.04em; /* Reducido a 80% de 1.3em */
		height: 40px;
	}
}
/*	Small screens */
@media (min-width: 768px) and (max-width: 992px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 180px; /* Ancho del logo */
		top: 20px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 200px;
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 1.28em; /* Reducido a 80% de 1.6em */
	}
	#Menu{
		font-size: 1.04em; /* Reducido a 80% de 1.3em */
		height: 40px;
		justify-content: flex-end
	}
}
/* Extra small screens */
@media (min-width: 640px) and (max-width: 768px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 160px; /* Ancho del logo */
		top: 20px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 180px;
		font-size: 1.6em; /* Reducido a 80% de 2em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.SecondTitle{
		font-size: 1.6em; /* Reducido a 80% de 2em */
	}
	.ThirtTitle{
		font-size: 1.44em; /* Reducido a 80% de 1.8em */
	}
	#Menu{
		font-size: 0.96em; /* Reducido a 80% de 1.2em */
		height: 30px;
		justify-content: flex-end
	}
}
/* 2X small screens */
@media (min-width: 568px) and (max-width: 640px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 140px; /* Ancho del logo */
		top: 10px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 160px;
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 0.8em; /* Reducido a 80% de 1em */
	}
	.SecondTitle{
		font-size: 1.12em; /* Reducido a 80% de 1.4em */
	}
	.ThirtTitle{
		font-size: 1.12em; /* Reducido a 80% de 1.4em */
	}
	#Menu{
		font-size: 0.96em; /* Reducido a 80% de 1.2em */
		height: 30px;
		justify-content: flex-end
	}
}
/*3X small screens */
@media (min-width: 536px) and (max-width: 568px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 140px; /* Ancho del logo */
		top: 8px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 160px;
		font-size: 1.16em; /* Reducido a 80% de 1.45em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 0.8em; /* Reducido a 80% de 1em */
	}
	.SecondTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.ThirtTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	#Menu{
		font-size: 0.88em; /* Reducido a 80% de 1.1em */
		height: 25px;
		justify-content: flex-end;
		padding-left: 150px;
	}
}

@media (min-width: 363px) and (max-width: 536px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 140px; /* Ancho del logo */
		top: 8px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 160px;
		font-size: 1.16em; /* Reducido a 80% de 1.45em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 0.8em; /* Reducido a 80% de 1em */
	}
	.SecondTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.ThirtTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	#Menu{
		font-size: 0.88em; /* Reducido a 80% de 1.1em */
		height: 50px;
		justify-content: flex-end;
		padding-left: 160px;
	}
}

@media (min-width: 329px) and (max-width: 363px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 140px; /* Ancho del logo */
		top: 8px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 160px;
		font-size: 1.16em; /* Reducido a 80% de 1.45em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 0.8em; /* Reducido a 80% de 1em */
	}
	.SecondTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.ThirtTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	#Menu{
		font-size: 0.88em; /* Reducido a 80% de 1.1em */
		height: 70px;
		justify-content: flex-end;
		padding-left: 160px;
	}
}

@media (max-width: 329px) {
    .Initcontainer-fluid{
		display: flex;
		flex-direction: column;
	}
	.column-40 {
		margin: 0% 6% 3% 6%;
	}
	.logo01{
		width: 140px; /* Ancho del logo */
		top: 8px; /* Ajusta la posición vertical del logo */
	}
	#Heather{
		display: flex;
		flex-direction: column;
	}
	.FirstTitle{
		padding: 20px 0 10px 160px;
		font-size: 1.16em; /* Reducido a 80% de 1.45em */
	}
	.PhoneNumber{
		padding: 0px 0px 0px 0px;
		font-size: 0.8em; /* Reducido a 80% de 1em */
	}
	.SecondTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	.ThirtTitle{
		font-size: 1.2em; /* Reducido a 80% de 1.5em */
	}
	#Menu{
		font-size: 0.88em; /* Reducido a 80% de 1.1em */
		height: 70px;
		justify-content: flex-start;
		padding-left: 10px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*											Procedures											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#Procedures{
		overflow-x: auto;
	}
.ProceduresTitle{
	font-size: 1.2em; /* Reducido a 80% de 1.5em */
	color: #004677;
	margin: 5% 0;
}
.ProceduresText{
	font-size: 0.96em; /* Reducido a 80% de 1.2em */
	color: #397CAB;
	margin: 0 0 10% 0;
}
.ProceduresBox{
	border: 2px solid #004677;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: justify;
	margin: 2%;
	padding: 2%;
	border-top-right-radius: 70px;
	border-bottom-left-radius: 70px;
	border-bottom-right-radius: 70px;
}
.ProceduresBox img{
	width: 50%;
	height: auto;
	border-radius: 20%;
}

/* Large screens */
@media (min-width: 1200px) {
    .ProceduresBox{
		flex: 1 1 calc(23%);
	}
}
/* Medium screens */
@media (max-width: 1200px) {
    .ProceduresBox{
		flex: 1;
		min-width: 250px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*											Location											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#map {
	height: 500px; /* Ajusta la altura del div */
    width: 90%; /* Ajusta el ancho del div */
	margin: 0 5% 2% 5%;
	border: 2px Solid #042433;
	border-radius: 70px;
}
.MapTitle{
	font-size: 0.96em; /* Reducido a 80% de 1.2em */
	color: #004677;
	margin: 3% 0 0 0;
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*											Schedule											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#Schedule{
	font-size: 0.96em; /* Reducido a 80% de 1.2em */
	color: #004677;
	margin: 3% 0 0 0;
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
}

.ScheduleLine{
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: row;
}

.ScheduleDay{
	width: 110px;
}

@media (min-width: 381px) {
	#Schedule{
		padding-left: 0px;
	}	
	.ScheduleTime{
		width: 260px;
	}
}

@media (max-width: 381px) {
	#Schedule{
		padding-left: 20px;
	}
	.ScheduleTime{
		width: 150px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*											Services											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.Services-Cointainer{
	flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}
.ServicesBox{
	margin: 0 0 0 2.8%;
	padding: 10px;
}
.ServicesBoxTitle{
	margin: 0;
	font-size: 0.88em; /* Reducido a 80% de 1.1em */
	color: #1F72A8;
	font-weight: bold;
}
.ServicesBoxService{
	margin: 0;
	font-size: 0.72em; /* Reducido a 80% de 0.9em */
	color: #409DDC;
}
.ServicesTitle{
	display: flex;
	justify-content: center;
    align-items: center;
	padding: 20px 0;
	color: #1F72A8;
}
#Services{
	margin: 3% 0 0 0;
	padding: 0 0 1.7% 0;
}
.ServicesBackground{
	position: relative; /* Para posicionar elementos hijos de manera absoluta en relación a este contenedor */
    width: 100%;
    background-image: url("Pictures/Background02.jpg"); /* Ruta a tu imagen de fondo */
    background-size: cover; /* Cubre todo el contenedor */
    background-position: flex-start; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* Large screens */
@media (min-width: 1200px) {
    .ServicesBox{
		flex: 1 1 calc(14% - 20px); /* 6 columnas */
	}
}
/* Medium screens */
@media (min-width: 780px) and (max-width: 1200px) {
    .ServicesBox{
		flex: 1 1 calc(23% - 20px); /* 4 columnas */
	}
}
/* Extra small screens */
@media (max-width: 780px) {
    .ServicesBox{
		flex: 1 1 calc(33% - 20px); /* 4 columnas */
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*												Footer											*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#Footer{
	margin: 0 0 5px 0;
	padding: 10px 0 0 5%;
	background-color: #004677;
	border: 3px solid #042433;
	color: white;
	font-size: 0.8em; /* Reducido a 80% de 1em */
}
#Footer h1{
	padding: 0 0 0 5%;
}
.FooterTitles{
	display: flex;
	flex: 1 1 calc(80%);
	flex-direction: column;
}
.Footerlogo01{
	display: flex;
	justify-content: center;
   	align-items: center;
}
.Footerlogo01 img{
    width: 60%; /* Ancho del logo */
    height: auto; /* Altura automática para mantener la proporción */
	border-radius: 20%;
}