/* CSS para contacto*/
/* con * formateamos toda la página web y despues se dará estilo a cada sección*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
    font-family: 'Montserrat', sans-serif;
    box-sizing: content-box;/*distribuirá todos los elementos a lo ancho y alto de cada área*/
	text-decoration: none;/*quitará cualquier decoración que tengan los textos (ej: subrayado)*/
	margin: 0px;/*quitará cualquier margen que tengatoda la página*/
}

/* El estilo para área de la cabecera head*/
.head {
    display: flex;
	/* hara que los elementos se formen de manera horizontal*/
	justify-content: space-evenly;
	/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se iran a las esquinas, con evenly será poca la separación*/
	align-items: center;
	/*con esto centraremos todos los elementos de forma vertical*/
	background-color: #a49cd4;
	padding: 10px;
	margin: 1px;
}

/* El estilo para la imagen de intactum*/
#logo {
    width:110px;
    height: 50px;
    /*primer valor en px arriba y abajo y segundo valor en px a la izquierda y a la derecha*/
	border-radius: 20px;
}
/* El estilo para la imagen de facebook*/
#facebook {
    width:30px;
    height: auto;
}
#whatsapp {
    width:30px;
    height: auto;
}
.hora {
    font-size: 12px;
    color: white;
    text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece) */
}

/* Estilo para el área total del Menú o lista */
.navbar {
    display: flex;/* hara que los elementos se formen de manera horizontal*/
    justify-content: center;/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se ira al centro*/
	background-color: rgb(199, 195, 195);
	margin: 1px;
    }
a {
    padding: 15px 0px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
    color: #0c0475;
}
a:hover {
	color:whitesmoke;
}

/*dará estilo al espacio que ocupan las imágenes*/
.contenedor {
	display:flex;/*Esto permitira que las imágenes adapten al espacio*/
	margin: 1px;
	justify-content:center;/*Esto centrará las imágenes en el espacio que ocupan*/
	background-color:#acacd4;/*
	flex-direction: row;/*Esto pondrá las imágenes en forma horizontal y cuando es column las pone de forma vertical*/
	
}

/*Estilo para las imágenes*/
.imagen {
	width: 300px;
	height: 250px;
	padding: 5px;
	border-radius:15px;
}

/* Estilo para el pie de página*/
form {
	display: flex;
	flex-direction: column;/*para hacer que todos los elementos de form se pongan en columna se ocupa flex direction colum*/
	align-items: center;
	background-color: rgb(199,195,195);
	margin: 1px;
	text-align: center;/*centrará todos los textos del área*/
}
/*dará el estilo al h3 que esta dentro form*/
h3 {
	font-size: 20px;
	padding-top: 20px;
	}
/*dará el estilo a lo relacionado con la clase form-register*/
.form-register {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10px;	
}
/*dará el estilo a todos los p que estan dentro de la clase form-register*/
.form-register p {
	padding: 5px 0px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
	font-size: small;
	text-align: center;
	}
/*dará el estilo a todo espacio para escribir (nombre, tel, etc) que estan dentro de la clase form-register*/
.controls {
	width: 250px;
	height: 25px;
	text-align: center;
	border-radius: 5px;
	border: 1.5px solid black;
	}
/*dará el estilo al mensaje del "servicio requerido" que esta dentro de la clase form-register*/
#asunto {
	width: 250px;
	border-radius: 5px;
	border: 1.5px solid black;
	}
/*dará el estilo al bottom que esta dentro de la clase form-register pero como bottom es tambien una clase por eso se debe poner el . bottom*/
.bottom {
	height: 25px;
	width: auto;
	padding: 5px 20px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
	margin: 15px 0px;
	background-color: #a49cd4;
	border: 1.5px solid black;
	border-radius: 10px;
	font-size: 15px;
	color: white;
    text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece)*/
	cursor: pointer; /*pondra un cursor en enviar*/
}


@media (max-width: 600px) {
	.head{
        display: flex;
        flex-direction: column;
        width:auto;
        height:fit-content;
        background-size: cover;        
    }
	/* responsivo el área de logo, facebook, whatsapp y horario*/
    .logo, #logo {
        width: 80px;
        height: auto;
    }
    .hora{
        font-size: 70%;
    }
    #facebook{
        margin: 2px;
    }

    /*Responsivo para el menu de navegación*/
	.navbar {
		display: grid;
		justify-content: center;
    }
	.menu {
		width: auto;
		font-size: 12px;		
	}
	.menu li {
        padding: 10px;
		font-size: 90%;
    }

}