.body{
    background-color: #eef3f5; 
}


.navbar {
    position: fixed;
    transition: 0.3s;
    width: 100%;
    top: 0;
}
.nav-link{
    color: #f4fcff;
}

 

.arbol{
    background-color: #000000;
}

.banner-image{
    background-image: url("../img/img1.jpg");
    background-size: cover;
}

.navbar-toggler {
    outline: none;
}

.img_grande2 {
    background-image: url("../img/img6.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
    color: #fff;
    height: 100vh;
    width: 100vw;
    object-fit: cover;

}

/*  (xxs) letra 1 */
@media (min-width: 350px) and (max-width: 427px) {
    .letra_gigante1 {
        font-size: 70px; 
        padding-top: 13%;
        padding-left: 2%;
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .letra_gigante2{
        font-family: 'Overpass', sans-serif;
        font-weight: 800;
        padding-top: 8%;
        padding-left: 5%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
    }
    .letra_gigante3 {
        font-size: 70px; /* Tamaño para pantallas grandes */
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 23%;
    }
    .color1 {
        background-image: url("../img/marco.png") ;
        min-height: 400px;
        min-width: 200px;
        align-items: center;
    }
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 210px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
        /*imagen About*/
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }

    /*imagen About*/
    
	.words4{
    font-family: 'Overpass', sans-serif;
    color: #f8fdff;
    }


    /* animacion */
    .img-area{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        min-height: 400px; /* Establecer la altura deseada */
        min-width: 100px;
        background: #161617;
        
        
    }
    .img-area img{
        width: 100%;
        height: auto;
    }
    .img-text, 
    .img-area:after{
        width: 100%;
        position: absolute;
        left: 0;
    }
    .img-area:after{
        content: '';
        height: 100%;
        top:-30%;
        transition:.5s;
    }

    .img-area:hover:after{
        background: linear-gradient(to bottom,rgba(35, 71, 126,.01)0, rgba(35, 71, 126,.225)25%,
        rgba(31, 71, 126,.50)50%, rgba(35, 71, 126,.75)75%, rgba(35, 71, 126,.95)100%) ;
    }
    .img-text{
        padding-bottom: 53%;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        bottom:0;
        z-index: 1;
        transform: translateY(90px);
        transition: all .1s cubic-bezier(.13,.62,.81,.91) 0s;
        /*opacity: 0; Opacidad por defecto */
    }
    .img-text h3{
        font-family: 'Overpass', sans-serif;
        font-weight: 500;
        padding-top: 20%;
    }
    .img-text p{
        font-weight: 500;
        opacity: 0;
        font-size: large;
    }

    .img-area:hover .img-text{
        transform: translateY(0);
        transition-delay: 3ms;
        text-align: center;
        
    }

    .img-area:hover .img-text p{
        opacity: 1
        
    }

    /* fin intento n2*/

    /*Especificacines de los links*/
    .nav-link2{
        color:#fff; /* Mantener el color original del texto */
        text-decoration: none; /* Quitar el subrayado */
        transition: color 0.2s; /* Agregar una transición de color (opcional) */
        font-family: 'Overpass', sans-serif;
        font-size: larger;
        
    }
    .nav-link2:hover {
        color: rgb(40, 157, 211) !important; /* Añadir !important para asegurar la prioridad */
    }
    .words5{
        font-family: 'Overpass', sans-serif;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10%;
    
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Para navegadores WebKit como Chrome y Safari */ 
    }
    
}
/*-----------------------------------------------



/* (xs)letra 1 */
@media (min-width: 427px) and (max-width: 576px) {
    .letra_gigante1 {
        font-size: 70px; /* Tamaño para pantallas grandes */
        padding-top: 13%;
        padding-left: 5%;
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .letra_gigante2{
        font-family: 'Overpass', sans-serif;
        font-weight: 800;
        padding-top: 8%;
        padding-left: 5%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
    }
    .letra_gigante3 {
        font-size: 70px; /* Tamaño para pantallas grandes */
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 25%;
    }
    .color1 {
        background-image: url("../img/marco.png") ;
        min-height: 800px;
        min-width: 380px;
        align-items: center;
    }
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 270px;
        
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
        /*imagen About*/
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
	.words4{
		font-family: 'Overpass', sans-serif;
		color: #f8fdff;
		size: 10 px;
		
	}

    /*imagen About*/
        /* animacion */
    .img-area{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
        margin-top: 7%;
    }
    .img-area img{
        width: 100%;
        height: auto;
    }
    .img-text, 
    .img-area:after{
        width: 100%;
        position: absolute;
        left: 0;
    }
    .img-area:after{
        content: '';
        height: 100%;
        top:0%;
        transition:.5s;
    }

    .img-area:hover:after{
        background: linear-gradient(to bottom,rgba(35, 71, 126,.01)0, rgba(35, 71, 126,.225)25%,
        rgba(31, 71, 126,.50)50%, rgba(35, 71, 126,.75)75%, rgba(35, 71, 126,.95)100%) ;
    }
    .img-text{
        padding-bottom: 10%;
        margin-bottom: 40px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        bottom:0;
        z-index: 1;
        transform: translateY(140px);
        transition: all .1s cubic-bezier(.13,.62,.81,.91) 0s;
        /*opacity: 0; Opacidad por defecto */
    }
    .img-text h3{
        font-family: 'Overpass', sans-serif;
        font-weight: 500;
        padding-top: 20%;
    }
    .img-text p{
        font-weight: 500;
        opacity: 0;
        font-size: large;
    }

    .img-area:hover .img-text{
        transform: translateY(0);
        transition-delay: 3ms;
        text-align: center;
        
    }

    .img-area:hover .img-text p{
        opacity: 1
        
    }

    /* fin intento n2*/
    /*Especificacines de los links*/
    .nav-link2{
        color:#fff; /* Mantener el color original del texto */
        text-decoration: none; /* Quitar el subrayado */
        transition: color 0.2s; /* Agregar una transición de color (opcional) */
        font-family: 'Overpass', sans-serif;
        font-size: larger;
        
    }
    .nav-link2:hover {
        color: rgb(40, 157, 211) !important; /* Añadir !important para asegurar la prioridad */
    }
    .words5{
        font-family: 'Overpass', sans-serif;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10%;
    
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Para navegadores WebKit como Chrome y Safari */ 
    }
    

}




/*----------------------------------------


/*  (sm) letra 1 */

@media (min-width: 576px) and (max-width: 768px) {
    .letra_gigante1 {
        font-size: 80px; /* Tamaño para pantallas grandes */
        padding-top: 10%;
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .letra_gigante2{
        font-family: 'Overpass', sans-serif;
        font-weight: 800;
        padding-top: 19%;
        padding-left: 5%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
    }
    .letra_gigante3 {
        font-size: 80px; /* Tamaño para pantallas grandes */
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 30%;
    }

    .color1 {
        background-image: url("../img/marco.png") ;
        min-height: 300px;
        min-width: 400px;
        align-items: center;
    }
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
        /*imagen About*/
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
	

    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 27%;
    }
        /* animacion */
    .img-area{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
        margin-top: 7%;
    }
    .img-area img{
        width: 100%;
        height: auto;
    }
    .img-text, 
    .img-area:after{
        width: 100%;
        position: absolute;
        left: 0;
    }
    .img-area:after{
        content: '';
        height: 100%;
        top:0%;
        transition:.5s;
    }

    .img-area:hover:after{
        background: linear-gradient(to bottom,rgba(35, 71, 126,.01)0, rgba(35, 71, 126,.225)25%,
        rgba(31, 71, 126,.50)50%, rgba(35, 71, 126,.75)75%, rgba(35, 71, 126,.95)100%) ;
    }
    .img-text{
        padding-bottom: 10%;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        bottom:0;
        z-index: 1;
        transform: translateY(140px);
        transition: all .1s cubic-bezier(.13,.62,.81,.91) 0s;
        /*opacity: 0; Opacidad por defecto */
    }
    .img-text h3{
        font-family: 'Overpass', sans-serif;
        font-weight: 500;
        padding-top: 20%;
    }
    .img-text p{
        font-weight: 500;
        opacity: 0;
        font-size: large;
    }

    .img-area:hover .img-text{
        transform: translateY(0);
        transition-delay: 3ms;
        text-align: center;
        
    }

    .img-area:hover .img-text p{
        opacity: 1
        
    }

    /* fin intento n2*/

    /*Especificacines de los links*/
    .nav-link2{
        color:#fff; /* Mantener el color original del texto */
        text-decoration: none; /* Quitar el subrayado */
        transition: color 0.2s; /* Agregar una transición de color (opcional) */
        font-family: 'Overpass', sans-serif;

    }
    .nav-link2:hover {
        color: rgb(40, 157, 211) !important; /* Añadir !important para asegurar la prioridad */
    }
    .words5{
        font-family: 'Overpass', sans-serif;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10%;
    
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Para navegadores WebKit como Chrome y Safari */ 
    }
    
    
}



/*----------------------------------------

/*  (md) letra 1 */
@media (min-width: 768px) and (max-width: 992px) {
    .letra_gigante1 {
        font-size: 100px; /* Tamaño para pantallas grandes */
        padding-top: 10%;
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .letra_gigante2{
        font-family: 'Overpass', sans-serif;
        font-weight: 800;
        padding-top: 19%;
        padding-left: 5%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
    }
    .letra_gigante3 {
        font-size: 100px; /* Tamaño para pantallas grandes */
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 33%;
    }

    .color1 {
        background-image: url("../img/marco.png") ;
        min-height: 300px;
        min-width: 600px;
        align-items: center;
    }
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
        /*imagen About*/
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }
    /*imagen About*/


	.words4{
    font-family: 'Overpass', sans-serif;
    color: #f8fdff;
    
    }

    /* animacion */
    .img-area{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
        margin-top: 7%;
    }
    .img-area img{
        width: 100%;
        height: auto;
    }
    .img-text, 
    .img-area:after{
        width: 100%;
        position: absolute;
        left: 0;
    }
    .img-area:after{
        content: '';
        height: 100%;
        top:0%;
        transition:.5s;
    }

    .img-area:hover:after{
        background: linear-gradient(to bottom,rgba(35, 71, 126,.01)0, rgba(35, 71, 126,.225)25%,
        rgba(31, 71, 126,.50)50%, rgba(35, 71, 126,.75)75%, rgba(35, 71, 126,.95)100%) ;
    }
    .img-text{
        padding-bottom: 10%;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        bottom:0;
        z-index: 1;
        transform: translateY(140px);
        transition: all .1s cubic-bezier(.13,.62,.81,.91) 0s;
        /*opacity: 0; Opacidad por defecto */
    }
    .img-text h3{
        font-family: 'Overpass', sans-serif;
        font-weight: 500;
        padding-top: 20%;
    }
    .img-text p{
        font-weight: 500;
        opacity: 0;
        font-size: large;
    }

    .img-area:hover .img-text{
        transform: translateY(0);
        transition-delay: 3ms;
        text-align: center;
        
    }

    .img-area:hover .img-text p{
        opacity: 1
        
    }

    /* fin intento n2*/

    /*Especificacines de los links*/
    .nav-link2{
        color:#fff; /* Mantener el color original del texto */
        text-decoration: none; /* Quitar el subrayado */
        transition: color 0.2s; /* Agregar una transición de color (opcional) */
        font-family: 'Overpass', sans-serif;

    }
    .nav-link2:hover {
        color: rgb(40, 157, 211) !important; /* Añadir !important para asegurar la prioridad */
    }
    .words5{
        font-family: 'Overpass', sans-serif;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10%;
    
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Para navegadores WebKit como Chrome y Safari */ 
    }
    
    
}



/*----------------------------------------

/*  (lg) letra 1*/
@media (min-width: 992px) {
    .letra_gigante1 {
        font-size: 120px; /* Tamaño para pantallas grandes */
        padding-top: 13%;
        padding-left: 5%;
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .letra_gigante2{
        font-family: 'Overpass', sans-serif;
        font-weight: 800;
        padding-top: 8%;
        padding-left: 5%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    
    }

    .letra_gigante3 {
        font-size: 120px; /* Tamaño para pantallas grandes */
        font-family: 'Overpass', sans-serif;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }

    .color1 {
        background-image: url("../img/marco.png") ;
        min-height: 300px;
        min-width: 600px;
        align-items: center;
    }
    

    .words7{
        font-family: 'Overpass', sans-serif;
        padding-left: 37%;
    }

    /*imagen About*/
    .imgCardConfig{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .imgCardConfig img{
        width: 90%;
        height: auto;
    }

    /*imagen About*/
    .word9{
        margin-top: 3%;
        font-family: 'Overpass', sans-serif;
        font-weight: 100;
    }
	
	.words4{
    font-family: 'Overpass', sans-serif;
    color: #f8fdff;
    }


    /* animacion */
    .img-area{
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 300px;
        margin-top: 7%;
    }
    .img-area img{
        width: 100%;
        height: auto;
    }
    .img-text, 
    .img-area:after{
        width: 100%;
        position: absolute;
        left: 0;
    }
    .img-area:after{
        content: '';
        height: 100%;
        top:0%;
        transition:.5s;
    }

    .img-area:hover:after{
        background: linear-gradient(to bottom,rgba(35, 71, 126,.01)0, rgba(35, 71, 126,.225)25%,
        rgba(31, 71, 126,.50)50%, rgba(35, 71, 126,.75)75%, rgba(35, 71, 126,.95)100%) ;
    }
    .img-text{
        padding-bottom: 10%;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        bottom:0;
        z-index: 1;
        transform: translateY(140px);
        transition: all .1s cubic-bezier(.13,.62,.81,.91) 0s;
        /*opacity: 0; Opacidad por defecto */
    }
    .img-text h3{
        font-family: 'Overpass', sans-serif;
        font-weight: 500;
        padding-top: 20%;
    }
    .img-text p{
        font-weight: 500;
        opacity: 0;
        font-size: large;
    }

    .img-area:hover .img-text{
        transform: translateY(0);
        transition-delay: 3ms;
        text-align: center;
        
    }

    .img-area:hover .img-text p{
        opacity: 1
        
    }

    /* fin intento n2*/

    /*Especificacines de los links*/
    .nav-link2{
        color:#fff; /* Mantener el color original del texto */
        text-decoration: none; /* Quitar el subrayado */
        transition: color 0.2s; /* Agregar una transición de color (opcional) */
        font-family: 'Overpass', sans-serif;

    }
    .nav-link2:hover {
        color: rgb(40, 157, 211) !important; /* Añadir !important para asegurar la prioridad */
    }
    .words5{
        font-family: 'Overpass', sans-serif;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10%;
    
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Para navegadores WebKit como Chrome y Safari */ 
    }
    

    
}


/* ________________________________________________________________________________________________________________ */



/*imagen About*/
.imgCardConfig{
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    height: 300px;
}
.imgCardConfig img{
    width: 90%;
    height: auto;
}

/*imagen About*/

.words2{
    font-style: italic;
    color: #4189bc;
    padding-left: 15%;
    
}
.words3{
    color: #ffffff;
    font-size: 50px;
    font-family: 'Overpass', sans-serif;
    
}



.words6{
    font-family: 'Overpass', sans-serif;
    color: #000000;
    padding-left: 20%;
}





.words{
    text-align: center;
    padding-top: 10%;
    padding-bottom: 5%;
}


.footer1{
    background-color: #000000; 
}



.logos1{
    background-image: url("../img/logo1.jpg");
    background-position: center center; 
    color: #fff;
    padding-top: 5%;
    min-height: auto;
    min-width: auto;
    height: 125px;
    width:200px;
    overflow: hidden;
    background-size: cover;

}
.personalizado1{
    padding-left: 20%;
    font-family: 'Overpass', sans-serif;
    color: #eef3f5;
}
.personalizado2{
    padding-left: 100%;
}