:root{
    --bs-azulPrimario: #0D5298;
    --bs-azulClaro: #1779BE;
    --bs-verdePrimario:  #509933;
    --bs-GrisClaro: #F8F8F8;
	--bs-middlegray: #ececec;
 	--bs-lightgray:#eee;
    --bs-black: #000;
}
@font-face {
    font-family: 'DIN Pro';
    src: url('DINPro.otf') format('truetype');
}

body{
    font-family: 'DIN Pro', sans-serif;
	color: var(--bs-dark);
    padding: 0 !important;
    margin: 0;
    max-width: 1366px; /* Por ejemplo, establece un ancho máximo de 1200 píxeles */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}
a{
    text-decoration: none !important;
}
#fondo-seccion {
    background-image: url('img/fondo-header.png');
    background-size: cover !important; 
    background-position: center center; 
    background-repeat: no-repeat;
    height: 100vh; 
}
.navbar-nav .nav-link {
    color: var(--bs-lightgray) ;
}
.navbar-nav .nav-link.active{
    color: var(--bs-lightgray) !important; 
    font-weight: 500;
}
.navbar-toggler{
    background-color: var(--bs-GrisClaro) !important;
}
.logo {
    max-width: 100px; 
}
.iconos-redes{
    background-color: var(--bs-GrisClaro);
    color: var(--bs-azulPrimario);
    padding: 1em; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 1.5em; 
    height: 1.5em; 
}

/*SECCIÓN HEADER*/
.titulos{
    color: var(--bs-azulPrimario);
    font-weight: 400;
    font-size: 2.6rem;
}
.subtitulos{
    color: var(--bs-GrisClaro) !important;
    font-weight: 300;
    font-size: 1em;
    margin-top: 0.3em;
}
.btn-principal{
    background-color: var(--bs-azulPrimario);
    border: none;
    color: var(--bs-lightgray);
    font-size: 1.2rem;
    padding: 0.5em;
    border-radius: 1em;
}
.titulo-principal{
    color: var(--bs-lightgray);
    font-weight: 400;
    font-size: 2.6rem;
}
.span{
    display: block;
    font-size: 1.4rem;
    color: var(--bs-lightgray);
    font-weight: 300;
    margin-bottom: 1em ;
}
.img-head {
    max-width: 60% !important; 
    height: auto; 
}

/*SECCIÓN SERVICIOS*/
.card{
    width: 16em;
    height: auto;
}
.container{
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.img-servicios {
    max-width: 30%;
    height: auto;
}
.texto-servicios{
    color: var(--bs-azulPrimario);
    font-weight: 400;
    font-size: 1rem;
}
.titulos-servicios{
    color: var(--bs-azulPrimario) !important;
    font-size: 1em;
    font-weight: 400;
}

.btn-card{
    padding: 0.5em;
    background-color: var(--bs-azulPrimario);
    color: var(--bs-GrisClaro);
    font-size: 1em;
    font-weight: 300;
    border-radius: 10em;
    border: none !important;
}
.custom-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 1000px !important; 
    margin: 0 auto; /* Centra el modal horizontalmente */
}
.modal-body{
    text-align: left !important;
}
.img-modal{
    text-align: left !important;
    width: 4%;
    height: auto;
    margin-right: 1em;
}
.modal-title{
    color: var(--bs-azulClaro);
}
.titulo-modal{
    color: var(--bs-black);
}
.subtitulo-modal{
    color: var(--bs-azulPrimario);
}
.icono-modal{
   color: var(--bs-azulPrimario);
}
.container-empresa {
    width: 30em !important; 
    height: auto;
    background-color: var(--bs-azulPrimario);
    padding-bottom: 1em;
    color: white;
    font-weight: 300;
}

.counter {
    font-size: 1.8em !important;
    font-weight: 300;
}
.border-right {
    border-right: 1px solid white; 
    margin-top: 1em !important; 
  }

/*SECCIÓN EMPRESA*/
.img-empresa{
    max-width: 70%;
    height: auto;
}
.textos{
    font-size: 1.2em;
    color: #646464 ;
    font-weight: 400;
}

/*SECCIÓN ALIANZAS*/
.slider-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    max-width: 80%; 
    margin: 0 auto; 
}
.slider {
    width: 100%;
    overflow: hidden;
}
.logo-list {
    display: flex;
    transition: transform 0.5s ease-in-out; 
    list-style: none;
} 
.logo-list li {
    flex: 0 0 100px; 
    margin: 0 10px; 
}  
.logo-list li img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out; 
    object-fit: contain;
    width: 8em; 
    height: auto; 
    aspect-ratio: 3/2;
}
.logo-list li img:hover {
    filter: grayscale(0%); 
}

/*SECCIÓN CONTACTO*/
.form-control{
    width: 20em !important;
}
.img-contacto{
    width: 80%;
    height: auto;
    margin-left: 10rem;
}
.form-label{
    color: var(--bs-azulPrimario);
}
.form-control{
    border-color: var(--bs-azulPrimario);
}
.section-contacto{
    padding-bottom: 0 !important;
}
.btn-principal-contacto{
    background-color: var(--bs-azulPrimario);
    border: none;
    color: var(--bs-lightgray);
    font-size: 1.2rem;
    padding: 0.5em;
    border-radius: 1em;
}

/*SECCIÓN IMÁGEN*/
.imagen-de-fondo {
    background-image: url("img/img-mensaje.png");
    background-size: cover; 
    background-position: center; 
    height: 300px; 
    display: flex;
    justify-content: center;
    align-items: center; 
}
/*SECCIÓN FOOTER*/
.footer-container {
    display: grid;
    grid-template-columns: 1fr;
    height: 3.5em;
    flex-wrap: wrap;
    position: fixed !important ;
    bottom: 0 ;
    width: 100% ;
     z-index: 9999; 
  }
  .icon-container-footer {
    display: flex;
    justify-content: center;
}

.icono-footer {
    background-color: var(--bs-azulPrimario);
    margin-right: 1em !important;
    margin-inline: 0.5em;
    color: #ffffff !important;
    font-size: 1em;
    border-radius: 50%;
    padding: 10px;
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icono{
    color: var(--bs-GrisClaro) !important;
}

@media (max-width: 768px) {
    .card{
        padding-top: 2em !important;
    }
    #empresa{
        padding: 2em !important;
    }
    #clientes{
        padding: 0 !important;
    }
    .columna-iconos{
        margin-right: 5em;
    }
    .titulo-principal{
        font-size: 2rem;
    }
    .span{
        font-size: 1.2em;
    }
   
    .counter{
        font-size: 1.2em !important;
    }
    .textos{
        text-align: center;
        font-size: 1em;
    }
    .img-contacto{
        display: none;
    }  
    .section-contacto{
        justify-content: center !important;
    } 
    
    .form-control{
        width: 17em !important;
    }
    .contenedor-boton-contacto{
        text-align: center;
    }
    .container-empresa{
        width: 30em !important;
        margin-left: 0.2em !important;

    }
    .columna-empresa{
        
        width: 50% !important;
        height: auto;    
}
  
}

@media (max-width: 992px) {
    .card{
        width: 20em;
        height: 21em;
    }
    .img-servicios {
        max-width: 20%;
        height: auto;
    }
    .navbar-collapse{
        background-color: var(--bs-GrisClaro) !important;   
        border-radius: 0.5em;
    }
    .navbar-collapse .nav-item .nav-link{
        color: var(--bs-azulPrimario) !important;
    }
    .iconos-redes{
        color: var(--bs-azulPrimario);
        margin-left: 0.5em;
        margin-right: 0.5em;
        display: flex !important;     
    }
    .tab-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    .titulos{
        text-align: center !important;
    }
    .card-text{
        text-align: center !important;
    }
    .container-empresa {
        margin-top: 2em !important;
        position: relative;
        max-width: 100% ;   
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
 
    .img-contacto{
        display: none;
    }  
    
  
}

@media only screen and (min-width: 678px) and (max-width: 1024px) {
    .columna-iconos{
        margin-right: 16em;
    }
    .container-empresa{
        margin-left: 6em !important;
        text-align: center !important;   
    }
    .card{
        padding-top: 1em !important;
    }
   .container{
    padding: 0 !important;
   }
 .btn-sustentabilidad{
    margin-top: 2.8em !important;
 }
 .btn-ambiente{
    margin-top: 1.2em !important;
 }
   
  }

  @media only screen and  (min-width: 1366px) {
   
    .contenedor-boton-contacto{
        text-align: left !important;
        justify-content: left !important;
    }
   
  }