@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*{
    margin: 0;
    box-sizing: border-box;
}
img{
    display: block;
    max-width: 100%;
}
body{
    font-family:'Open Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 1px;
}
.header{
   height: 50px;
   color:white;
}
.header a{
	color:white;
}
.header .container{
    display: flex;
    justify-content: space-between;
    background-color:#007bff;
    height: 100%;
    padding:5px;
}
/***********Estilos del banner*********************/
/*.banner{
    margin-top: 0px;
    position: relative;
    z-index: -1000;
}
*/
.banner {
    width: 100%;
    height: 700px; /* altura según tus necesidades */
    background-image:url(../images/domoticactg.png); /* URL de tu imagen */
    background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
	position: relative;
}

.banner .container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	background-color: rgba(255, 255, 255, 0.8);
	padding: 20px;
    border-radius: 10px;
    text-align: center;
}
.banner_text{
  /*  display: none;*/
}
.main{
	display: flex;
	flex-direction: row;
	margin-top:30px;
}
.main .Content{
	width: 75%;
	display: flex;
	flex-direction: column;
    margin-top:2px;
}
.container{
	margin-bottom:40px;
}

h1 {
  text-align: center; /* Centra el texto horizontalmente */
  margin: 30px 0; /* 30px de margen superior e inferior, 0 en los lados */
  font-size:45px;
}
.contenedor {
	height:auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	margin: 20px 20px;
}

.seccion {
    flex: 1 1 calc(25% - 20px); /* 4 secciones en una fila */
    border: 1px solid #ccc;
	min-width:320px;
	max-height:450px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.imagen {
    flex: 0 0 60%;
    display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ajusta la imagen sin distorsionarla */
}
.contenido {
    flex: 0 0 30%;
    padding: 20px;
   	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
}
h2 {
	margin: 0;
}
p {
	margin-top: 10px; /* Ajusta el margen según tus necesidades */
}
.inscribirse {
    flex: 0 0 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}
.inscribirse button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.inscribirse button:hover {
    background-color: #0056b3;
}

.container .seccion_contact{
	width:100%;
	background-color:#007bff;
	margin-top:50px;
	height:auto;
	display:flex;	
}
.contact{
	width: calc(100% -  40px); 
	display: flex;
	justify-content: space-between; /* Distribuye los elementos en los laterales */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    padding: 0px; /* Espaciado interno del contenedor */
    background-color: transparent; 
	margin: 10px 20px;
	font-size:22px;
	color:white;
}
.contact .boton {
	background-color:while; /* Color de fondo del botón */
	color: blue; /* Color del texto del botón */
	border: none; /* Sin borde */
	padding: 10px 20px; /* Espaciado interno del botón */
	cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
	font-size: 16px; /* Tamaño de la fuente del botón */
	margin-top: 10px; /* Margen superior del botón */
	border-radius: 5px; /* Bordes redondeados */
}
.contact	.boton:hover {
	background-color:#CCC; /* Color de fondo al pasar el cursor */
	color:yellow;
}
.conte_extracurricular {
	height:auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px; /* Espaciado interno del contenedor */

}

/* css extracurriculares */
.extracurricular{
		margin: 0 auto;
	display: flex;
	flex: 1 1 calc(20% - 10px); /* Ocupa un tercio del ancho del contenedor menos el espaciado */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    background-color: #f0f0f0; /* Color de fondo del contenedor */
    padding: 5px; /* Espaciado interno de los elementos */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
	min-width:80px;
	max-width:280px;
	max-height:100px;
}

.section_project{
	height:auto;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    gap: 20px; /* Espaciado entre los elementos */
    margin-top: 40px;
    padding: 20px; /* Espaciado interno del contenedor */
    border: 1px solid #009BFF;border-radius: 7px;
}
.sectionleft{
	height:auto;
	width: 66%;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px; /* Espaciado interno del contenedor */
}
.sectionright{
	height:95%;
	width: 32%;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    margin-top: 20px;
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px; /* Espaciado interno del contenedor */
    border: 1px solid #009BFF;border-radius: 7px;
}
.extracurricular	.imagen {
	width:50%;
	height:100%;
	overflow:hidden;
}
.extracurricular .imagen img {
    width: 100%; /* Ancho completo de la imagen */
	height: 100%;
	object-fit: contain; 
}
.extracurricular .informacion {
	flex: 2; /* Ocupa el 50% del ancho del contenedor */
	flex-direction: column;
	text-align: left; /* Alinea el texto a la izquierda */
	margin-left:10px;
}
.extracurricular   .informacion h2 {
            margin-bottom: 10px; /* Margen inferior del título */
            color: #333; /* Color del título */
        }
.extracurricular   .informacion p {
            color: #666; /* Color del texto */
        }
.top {
	margin-bottom: auto; /* Empuja el siguiente elemento hacia abajo */
    background-color: lightblue; /* Color de fondo del elemento superior */
}
.bottom {
	background-color: lightcoral; /* Color de fondo del elemento inferior */
	padding: 5px; /* Espaciado interno del elemento inferior */
}
@media (max-width: 1024px) {
	.contenedor {
		margin: 50px 100px;
	}
    .seccion {
	     flex: 1 1 calc(50% - 20px); /* 2 secciones en una fila */
    }
	
}

 @media (max-width: 600px) {
	 .contenedor {
		margin: 20px 20px;
	}
	.seccion {
		flex: 1 1 100%; /* 1 sección en una fila */
	}
}