@import 'https://fonts.googleapis.com/css?family=Rajdhani:700';

						
/*no me acuerdo de que era revisar para despues xd */	
    .css-typing p {
        border-right: .15em solid white;
        white-space: nowrap;
        overflow: hidden;
    }

    .css-typing p:nth-child(1) {
        width: 37em;
        -webkit-animation: type 3s steps(40, end), blink .3s step-end infinite alternate;
        animation: type 3s steps(40, end), blink .3s step-end infinite alternate;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }


    @keyframes type {
        0% {
            width: 0;
        }

        1% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes type {
        0% {
            width: 0;
        }

        1% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes blink {
        50% {
            border-color: transparent;
        }
    }

    @-webkit-keyframes blink {
        50% {
            border-color: transparent;
        }
    }
/*no me acuerdo de que era revisar para despues xd */	


    @keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}

@keyframes blink-caret {
50% {
border-right: 2px solid transparent;
}
}

.typewriter {
font-family:  Arial !important;
overflow: hidden;
white-space: nowrap;
margin: 0 auto; /* Elimina el margen superior e inferior */
letter-spacing: 0.1em;
text-align: justify; /* Esto justificará el texto si tiene más de una línea */
max-width: 100%; /* Ajusta el ancho máximo para que se ajuste al tamaño de la pantalla */
}



#text {
        display: inline-block;
        white-space: normal;
        overflow: hidden;
        font-size: 17px;
        color: #000000;
        font-weight: bold; /* Añadir esta línea para hacer la letra más gruesa */
    
    
}


/* Media queries para dispositivos móviles */
@media only screen and (max-width: 600px) {
.typewriter {
font-size: 10px!important; /* Ajusta el tamaño de fuente para dispositivos móviles */
width: 15rem!important;
}

#text {
font-size: 8px; /* Ajusta el tamaño de fuente para dispositivos móviles */
}
}










    @keyframes background {
        from {
            background-position: 0 0%;
        }

        to {
            background-position: 0 -200px;
        }
    }

  /*  h1 {
        
        font-family: "Myriad Pro"!important;
        background: url(https://static.vecteezy.com/system/resources/thumbnails/022/976/140/small/blue-wave-modern-background-free-photo.jpg) repeat;
        background-size: 200px auto;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        animation: background 10s infinite linear;
    }*/






    


  

	.info-boxes-container {
		background: linear-gradient(135deg, #006633 100%, #006633 100%);
		padding: 40px 0;
	}

	.info-box {
		background-color: #006633;
		border-radius: 10px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		color: white;
		display: flex;
		align-items: center;
		padding: 30px;
		margin: 20px auto;
		max-width: 800px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.info-box:hover {
		transform: translateY(-10px);
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	}

	.info-box i {
		font-size: 40px;
		margin-right: 20px;
		color: rgb(255, 255, 255); 
	}

	.info-box-content {
		flex-grow: 1;
	}

	.info-box h4 {
		font-size: 24px;
		margin: 0;
		display: flex;
		align-items: center;
	}

	.info-box h4 i {
		margin-left: 10px;
		font-size: 25px;
		color: #f3f8f8; 
	}

	.about-text {
		font-size: 14px;
		/*color: white;*/
		text-align: justify;
		margin: 15px 0;
	}

	.info-box a {
		color: #06ff06; 
		text-decoration: none;
		font-weight: bold;
		transition: color 0.3s ease;
	}

	.info-box a:hover {
		color: #fff;
		text-decoration: underline;
	}

	.info-box a i {
		margin-left: 5px;
		font-size: 15px;
	}

	.signature {
		font-size: 14px;
		font-family: Arial, sans-serif; /* Cambia la fuente a Arial */
		font-style: italic; /* Hace que el texto sea cursivo */
		color: #ffffff;
		margin-top: 20px;
	}
	



	

/*estilos de los circulos en home*/	
/* General container and grid styles */
.partners-container {
    padding: 0px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas por defecto */
    gap: 10px;
}

/* Partner styles */
.partner {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 50%; /* Cambia el border-radius para convertirlo en un círculo */
    overflow: hidden;
    transition: transform 0.3s;
    width: 250px; /* Ancho fijo para asegurar que el contenedor sea un círculo */
    height: 250px; /* Altura fija para asegurar que el contenedor sea un círculo */
    margin: 0 auto; /* Centra los elementos */
    position: relative; /* Para posicionar el texto */
}

.partner:hover {
    transform: scale(1.05);
}

/* Zoom effect */
.zoom-effect {
    position: relative;
    overflow: hidden;
    border-radius: 50%; /* Asegura que el efecto también sea circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 100%;
    height: 100%;
}

.zoom-effect img {
    transition: transform 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra completamente el contenedor */
}

.zoom-effect:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

/*.zoom-effect:hover img {
    transform: scale(1.1); /* Agranda la imagen hacia fuera 
}*/
/* Text overlay effect */
.zoom-effect::after {
    content: attr(data-hover-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 9px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    white-space: pre-line;
    text-align: center;
    width: 90%;
}

/* Show text on hover */
.zoom-effect:hover::after {
    opacity: 1;
}

/* Text styles */
.texto-home {
    color: #006633;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 10px; /* Ajusta la posición del texto dentro del círculo */
    width: 100%;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para mejor legibilidad */
}

.text-center {
    margin: 0;
}

/* Media queries para responsive design */
@media (max-width: 1024px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas para pantallas medianas */
    }
}

@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: 1fr; /* Una columna para pantallas pequeñas */
    }

    .partner {
        width: 200px; /* Ajusta el ancho en pantallas pequeñas */
        height: 200px; /* Ajusta la altura en pantallas pequeñas */
    }
}