@charset "utf-8";
/* CSS Document */

 body {
            background-color: #FFFFFF; /* Establece el fondo como blanco */
            color: black; /* Opcional: Cambia el color del texto a negro */
            font-family: Arial, sans-serif; /* Opcional: Cambia la fuente */
        }


.navbar {
    background-color: #111A26; /* Color naranja */
    border-radius: 50px; /* Más redondeado */
    padding: 10px; /* Padding reducido a la mitad */
    display: flex;
    justify-content: center; /* Centrar contenido horizontalmente */
    margin: 20px auto; /* Margen automático para centrar la barra */
    width: 60%; /* Ancho de la barra */
    flex-wrap: wrap; /* Permite que los enlaces se ajusten en pantallas pequeñas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra opcional */
	}
        .navbar a {
            color: #ffffff; /* Texto blanco */
            font-weight: bold; /* Texto en negrita */
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 15px; /* Padding ajustado para reducir altura */
            margin: 0 10px;
            border-radius: 20px; /* Bordes redondeados para los enlaces */
            transition: background-color 0.3s;
			font-family: 'Roboto', sans-serif; /* Cambia aquí la tipografía solo para los enlaces */
        }
        .navbar a:hover {
            background-color: #06F7FF; /* Color verde oscuro al pasar el mouse */
            color: #111A26; /* Texto blanco al pasar el mouse */
        }

.header-content {
	background-image: url("../images/ima0010.jpg");
  text-align: center;
  color: white;
  font-weight: bold;
	background-size: cover; background-position: center;
	background-color: #B3B3B3;
	padding-top: 150px;
	padding-bottom: 150px;
	border-radius: 50px; /* Bordes redondeados */
	font-size: 30PX;
}

.header-content h1 {
  font-size: 3rem;
}


.h1 {
            text-align: center;
            color: #01afec;
            margin-bottom: 20px;
        }
        .wrapper {
            display: flex;
            align-items: flex-start;
            width: 100%;
            max-width: 800px; /* Max width for better layout */
            margin: auto;
        }
        .percentage {
            background-color: #5A0DA6;
            color: white;
            text-align: center;
            border-radius: 10px;
            padding: 20px;
            width: 200px; /* Fixed width for percentage box */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            margin-right: 20px; /* Space between the percentage and the graph */
            font-size: 10pt; /* Font size for the label */
        }
        .percentage span {
            font-size: 30pt; /* Font size for the percentage */
            display: block; /* Block to separate it from the label */
        }
        .container {
            flex-grow: 1; /* Allow the graph to fill remaining space */
            padding: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            background: white;
            border-radius: 10px;
        }
        .bar {
            height: 30px;
            border-radius: 50px;
            background-color: #01afec;
            margin-bottom: 10px;
            color: white;
            text-align: left; /* Align text to the left */
            padding-left: 15px; /* Padding for left alignment */
            line-height: 30px; /* Center text vertically */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: width 0.3s ease;
        }
        .bar:hover {
            background-color: #0093cc; /* Darker shade on hover */
        }

.full-screen {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center; /* Fondo blanco */padding: 0px; /* Espaciado interno */
            margin-top: 30px;
	        margin-bottom: 20px;
}
        h1 {
            font-size: 24px; /* Tamaño de fuente fijo */
            color: #333; /* Color del texto */
            text-align: center;
            margin: 0; /* Sin margen */
        }

.project-advances {
            background: linear-gradient(to right, #111A26 90%, #111A26 5%);  /* Dividir el fondo en dos colores */
            color: #ffffff; /* Texto blanco */
            font-weight: bold; /* Texto en negrita */
            font-family: 'Roboto', sans-serif; /* Fuente Roboto */
            border-radius: 50px; /* Bordes redondeados */
            padding: 20px; /* Espaciado interno */
            width: 20%; /* Ancho del 20% */
            margin: 20px auto; /* Margen automático para centrar */
            text-align: center; /* Centra el texto */
            clear: both; /* Asegura que este div esté debajo de los flotantes */
	        font-size: 17PX;
        }


.contenedorix {
	width: 100%;
	padding-top: 5px;
	background-color: #F3F3EC;
	margin-top: 20PX;
	margin-bottom: 20PX;
	float: left;
	border-radius: 50px; /* Bordes redondeados */
	 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
            text-align: center; /* Centra el texto dentro del div */
        
}
.ladona {
	width: 33.333%;
	text-align: center;
	padding-top: 30px;
	float: left;
}


.h2 {
    color: #FFFFFF;
    margin-bottom: 20px;
}

.container {
    max-width: 800px; /* Max width for the container */
    margin: 0 auto; /* Center the container */
    text-align: center; /* Center text within the container */
}



.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive grid */
    gap: 15px; /* Space between images */
    padding: 10px;
    justify-content: center; /* Center the gallery */
}

.gallery-item {
    overflow: hidden;
    border-radius: 20px; /* Bordes redondeados de 20 píxeles */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer; /* Pointer cursor for clickable items */
    position: relative; /* Position relative for absolute children */
}

.gallery-item img {
    width: 100%; /* Make images responsive */
    height: 100%; /* Fill the height of the parent */
    object-fit: cover; /* Cover the gallery item */
    border-radius: 20px; /* Bordes redondeados de 20 píxeles */
    transition: transform 0.3s; /* Smooth zoom effect */
}

.gallery-item img:hover {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
    justify-content: center; /* Center modal content */
    align-items: center; /* Center modal content */
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 90%; /* Responsive max width */
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}


.document-list {
    max-width: 600PX; /* Ancho máximo */
    margin: 0 auto; /* Centrar */
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	margin-top: 30px;
}

.document-list ul {
    list-style-type: none; /* Quitar viñetas */
    padding: 0;
}

.document-list li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background-color: black;
    color: white;
    font-weight: bold;
    border-radius: 50%; /* Hace el círculo */
    font-size: 14px;
}

.document-list a {
    text-decoration: none; /* Quitar subrayado */
    color: #01afec;
    font-weight: bold;
    transition: color 0.3s;
}

.document-list a:hover {
    color: #0093cc; /* Cambio de color al pasar el mouse */
}

.containerix {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
        }
        .mayitobebe {
			text-align: center;
            display: inline-block;
            padding: 15px 30px;
            font-size: 18px;
            color: white;
            background-color: #8A2BE2;
            border: none;
			font-weight: bold;
            border-radius: 20px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s, transform 0.3s;
			width: 200PX;
        }
        .mayitobebe:hover {
            background-color: #7A1BDA;
            transform: scale(1.05);
        }

.full-screen {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center; /* Fondo blanco */padding: 0px; /* Espaciado interno */
            margin-top: 30px;
}
   

.copyright {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #858687;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	border-radius: 10px;
}
.footer_banner {
	background-color: #5A0DA6 ;
	padding-top: 30px;
	padding-bottom: 30PX;
	margin-bottom: 20px;
	margin-top: 60px;
	background-repeat: repeat;
	border-radius: 50px;
}

.hidden {
	display: none;
}
.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 4px;
	font-size: 20PX;
}
.gallery222 {
	width: 15%;
	height: 2px;
	background-color: #EAE7DC;
	margin-top: 20PX;
	
}



@media (max-width: 649px) {	

	
	.ladona{
	width: 100%;
}
	
}
@media (min-width: 650px)and (max-width: 1225px) {
		
			.ladona {
	width: 50%;
	text-align: center;
	padding-top: 30px;
	float: left;
}
	
	
}