body {
    background-color: rgb(255, 255, 255);
  
}

body.scrolDisabled {
  position: fixed; 
  overflow-y: scroll;
 
  
}
 
#Logo_navbar {
   
    max-height: 50px; /* 10% de la altura original */
}

#Logo_navbar_dark {
   
    max-height: 50px; /* 10% de la altura original */
    margin-top: -10px;
    margin-bottom: 10px;
     
}

#video-container {
    
    width: 100%;
    height: auto; /* Esto permitirá que la altura se ajuste automáticamente para mantener la proporción del video */
    overflow: hidden;
}

video {
    width: 100%; /* Establece el ancho del video al 100% de su contenedor */
    height: auto; /* Esto permitirá que la altura se ajuste automáticamente para mantener la proporción del video */
    
    z-index: -10;
}

@media (min-width: 768px) {
    .col-sm-6.col-md-6.col-lg-4 {
        max-width: 300px; 
    }


    
}
@media (max-width: 769px) {
    .col-sm-6.col-md-6.col-lg-4 {
        max-width: 290px; 
        align-items: center;
    }

 

    .contenedor_obras {
        display: flex;
        justify-content: center; /* Alinea los elementos hijos horizontalmente en el centro */
    }
    
}



/*
.image_obras{
  
        vertical-align: middle;
        max-width: 50%;
        max-height: 50%;
     
}
*/

/*
.obras_past {
    filter: grayscale(100%);
  }

  */


  #contenedor-imagen_acerca_de {
    width: 100%;
    
    margin: 0 auto;
    text-align: center;
    max-width: 200px
  }

  .contenedor-imagen_equipo {
    width: 100%;
    
    margin: 0 auto;
    text-align: center;
    max-width: 200px
  }

  .three-step-method-heading{

    text-align: center;
  }
  
  #equipo_container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
  }
  
  
  .person_container {
    flex: 1;
     
  }
  .group_persons_container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
  } 

  .img_person {
    border-radius: 50%; /* Para hacer la imagen circular */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.336); /* Cambia los valores según tu preferencia */
    max-width: 180px;
     
  }

  @media (max-width: 769px) {


    #equipo_container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 100%;
      }
      
      
      .person_container {
        flex: 1;
         
        margin-bottom: 50px;
      }

      .img_person {
        border-radius: 50%; /* Para hacer la imagen circular */
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.336); /* Cambia los valores según tu preferencia */
        max-width: 130px;
         
      }
  }


 /*      colab   start*/

 #container_colab{
  display : flex;
  background-color: rgba(0, 255, 255, 0);
  justify-content: space-around;
  align-items: center;

 }
 .row-2-colab{
 
  display: flex;
  justify-content: space-between;
background-color: #3fdf3900;
flex-direction: row;

 }
 .colab{
  display: flex;
  flex-direction: column;
  background-color: rgba(253, 32, 253, 0);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 20px;
  margin-right: 20px;
 }
#separator_colab{
background-color: rgba(0, 255, 255, 0);
height: 0px;
}

 /* Estilos base de la tarjeta */
#colab1 {
 
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
  
  position: relative;
  overflow: hidden;
}

 

/* Estilos del título */
#colab1_title {
  display: block;
  font-family: 'Raleway', sans-serif;
    
    line-height: 1.5;
    font-style: normal;
  padding: 10px;
  font-size: 0px;
  transition: font-size 0.3s ease; /* Transición suave */
  color: #333333;
  text-align: center;
  font-weight: 550;
}

 
 
 .img_colab{
  background-color: #f8090900;
  cursor: pointer;
 }

 @media (max-width: 769px) {

.row-2-colab{
  flex-direction: column;
}

#separator_colab{
  height: 50px;
}


 }
 #img_colab1{
 width: 200px;
 height: 200px;
 background-image: url("././images/logo_directriz_svg.svg");
/*background-image: var(--img_url_ladirectriz_svg_css);*/
background-size: 200px 200px;
   

 }

 #img_colab2{
  width: 200px;
  height: 200px;
  background-image: url("././images/artefacto.svg");
 /*background-image: var(--img_url_ladirectriz_svg_css);*/
 background-size: 200px 200px;
    
 
  }
 


/*      colab   end*/



  #footer_redes{
    font-size: 30px;
    flex-direction: column;
    background-color: #00000000;
    color: white;
  margin-top: 40px;
    padding-top: 50px;
    padding-bottom: 70px;
  }
 
  #siguenos{
    
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 70px;
text-align: center;
text-transform: uppercase;
letter-spacing: -0.04em;
color: #000000;
  
  }


  #instaholder{
    display:  inline-block;
    border: 1px solid rgba(255, 255, 255, 0.623);
    border-radius: 0px;
    padding: 0px 0px;
    background-color: rgba(5, 75, 75, 0);
    color: white;
     margin-top: 0px;
     margin-bottom: 40px;
     padding-bottom: 10px;
    padding-left: 10px;
  }
  #instagra_logo{
    max-height: 20px;
   margin-top: 3px;
   
  }

  
  #insta5e{
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: normal;
    font-weight: 400;
    color: #ffffff;
    padding-right: 15px;
    padding-top: 0;
    margin-top: 0;
 
  }


  
 
  

/*  contactanos */
.contact_container {
  display: flex;
  width: 100vw; /* Ancho de la pantalla */
  height: auto;
  background-color: rgba(0, 255, 255, 0);
  flex-direction:row;
}

@media (max-width: 769px) {
  .contact_container {
    display: flex;
    width: 100vw; /* Ancho de la pantalla */
    height: auto;
    background-color: rgba(6, 114, 114, 0);
    flex-direction: column;
  }

  #divider_contact{
  background-color: #00000000;
  height: 50px;

  }
}

.left_contact, .right_contact {
  flex: 1;

}


.left_contact{
  background-color: rgba(248, 79, 79, 0);
}


 
 #upper_holder{
  background-color: rgba(102, 0, 80, 0);
  display: flex;
  justify-content: center; /* Alinear a la izquierda */
 }
#contact_holder{
  background-color: rgba(255, 145, 0, 0);
  
}

#contact_direccion, #contact_telefono, #contact_mail{
  background-color: rgba(240, 248, 255, 0);  
  display: flex;
  justify-content: flex-start; /* Alinear a la izquierda */

  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  margin-bottom: 5px;
  
  
}
.icon_contact{
  max-width: 20px;
  max-height: 20px;
  margin-right: 10px;
}
#title_contactanos{
  font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: #000;

    


}



#parrafo_contactanos{
font-size: 14px;
    line-height: 1.7;
    letter-spacing: normal;
    font-weight: 400;
    color: #5f5f5f;
    padding-bottom: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

 
    margin-left: 20px;
    margin-right: 20px;

    display: block; /* Convertir el span en un bloque */
    text-align: left; /* Justificar el texto a la izquierda */
    background-color: rgba(0, 255, 255, 0);

}

.right_contact{
  background-color: rgba(0, 255, 34, 0);
  display: flex;
  flex-direction: column;
 width: 100%;
 padding: 0;
}
.container_upper_form {
  display: flex;
  flex-direction: column;
  background-color: #00000000;
  margin-left: 20px;
  margin-right: 150px;
  
}

@media (max-width: 768px) {
  .container_upper_form {
    margin-left: 20px;
    margin-right: 20px;
    }
}

.nombre_form_container,
.email_form_container,
.mensaje_form_container {
  margin-bottom: 10px; /* Espacio entre cada contenedor */
  background-color: rgba(255, 84, 135, 0);
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-bottom: 30px;
}



#text_input_name_form, #text_input_email_form, #text_input_message_form {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 16px;
  color: #000;

   
  border: 1px solid rgb(192, 190, 190); /* Borde gris predeterminado */
        transition: border-color 0.3s; /* Agrega una transición suave al cambio de color del borde */
}

#text_input_name_form:focus, #text_input_email_form:focus, #text_input_message_form:focus {
  border-color: rgba(0, 0, 0, 0.521); /* Cambia el color del borde a negro cuando está activo */
}

#text_input_message_form{
  min-height: 150px;
}

#error_text_name_form, #error_text_email_form, #error_text_message_form{
  display: none;
}


.title_input_form{
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}


.boton-enviar {
  background-color: black;
  color: white;
  border-radius: 0;
  border: none;
  padding: 10px 20px; 
  max-width: 200px;
}


#container_sending{
  text-align: left;
  display: none;

  margin-left: 20px;
  margin-right: 20px;
}

.title_form_sending{
  
 
  font-style: normal;
  font-weight: 500;
 
  color: #000;

}
/*   end  contactanos   */



#final_footer_img{
  max-width: 40px;
}



#img_winner{
  max-width: 280px;
 
}

 /* lock images */
 
/*end lock images*/


 .minimundivider{
  width: 100%;
  height: 5px;
 }

 @media (max-width: 769px) {
  .minimundivider{
    width: 100%;
    height: 15px;
    background-color: rgba(0, 255, 255, 0);
   }
  
}


/*  Boton flotante*/
#button-flotante-holder {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde abajo */
  right: 20px; /* Ajusta la distancia desde la derecha */
  background-color: rgb(211, 19, 19);
  color: white;
   background-image: url(././images/chat2_white.png);
   background-size: 30px 30px;
   background-repeat: no-repeat;
 
   background-position: center;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); /* Ajusta la sombra según sea necesario */
  cursor: pointer;
  z-index: 9999; /* Asegura que esté siempre por encima de otros elementos */

 
 
  transform: translateY(100px); /* Inicialmente fuera de la pantalla */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de transición más suave */

  opacity: 100%;
  transition: background-image 1s ease; /* Transición de la imagen de fondo */

}
#button-flotante-holder.activo {
  background-image: url('././images/close_white.png'); /* URL de la segunda imagen */
  background-color: #00000000;
}

#button-flotante-holder.visible {
  transform: translateY(0); /* Movemos hacia arriba para que sea visible */
}

#c_button1, #c_button2, #c_button3 {
  width: 200px;
  height: 50px;
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde abajo */
  right: 20px; /* Ajusta la distancia desde la derecha */
  background-color: rgba(211, 19, 19, 0);
  border: none;
  border-radius: 3px;
   
  cursor: pointer;
  z-index: 9999; /* Asegura que esté siempre por encima de otros elementos */

 
   color: #ffffffea;
  transform: translateY(100px); /* Inicialmente fuera de la pantalla */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de transición más suave */

  opacity: 100%;
  display: flex;
  justify-content: flex-end;  
  text-align: end;

}

#button1, #button2, #button3{
  width: 50px;
  height: 50px;
  
  background-color: rgb(211, 19, 19);
  margin-left: 15px;

  color: white;
   background-image: url(././images/whatsapp_white.png);
   background-size: 30px 30px;
   background-repeat: no-repeat;
 
   background-position: center;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); /* Ajusta la sombra según sea necesario */
  cursor: pointer;
}

#button1{
  background-image: url(././images/correo_white.png);
}

#button3{
  background-image: url(././images/llamada-telefonica2_white.png);
}
#c_button1{
 bottom: 100px; /* Ajusta la distancia desde abajo */ 
  z-index: 9998; /* Asegura que esté siempre por encima de otros elementos */ 
  transform: translateY(80px); /* Inicialmente fuera de la pantalla */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de transición más suave */
  opacity: 0;
}

#c_button2{
  bottom: 180px;
  z-index: 9998; /* Asegura que esté siempre por encima de otros elementos */ 
  transform: translateY(160px); /* Inicialmente fuera de la pantalla */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de transición más suave */
  opacity: 0;
 
}

#c_button3{
  bottom: 260px;
  z-index: 9998; /* Asegura que esté siempre por encima de otros elementos */ 
  transform: translateY(240px); /* Inicialmente fuera de la pantalla */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de transición más suave */
  opacity: 0;
 
}

#c_button1.visible, #c_button2.visible, #c_button3.visible {
  transform: translateY(0); /* Movemos hacia arriba para que sea visible */
  opacity: 100%; /* Hace que el elemento sea transparente */
   
}

 




 
section, nav{
  filter: grayscale(0%);
  filter: blur(0px);
}

.filter-div {
  
  filter: blur(5px) grayscale(100%); /* Aplica un filtro de desenfoque inicial con un radio de 5px */
}

 
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.774); /* Negro con un 50% de opacidad */
  z-index: 9997; /* Por encima del div con z-index 999 */
  display: none;
  justify-content: center;
  align-items: center; /* Centrado vertical */
}

#qr_call_card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 320px;
  height: 320px;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); /* Sombra */
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 0.5s ease; /* Transición suave de 0.5 segundos */
}

#qr_call_card.active {
  opacity: 1; /* Mostrar tarjeta con opacidad completa */
}


#qr_call_card_img {
  position: absolute;
  top: 10px;
  left: 10px;
   
  width: 300px;
  height: 300px;
background-image: url(././images/5E_CONTACT_qr-code_LOGO.svg);
background-size: 300px 300px;
 
}




#onBlack_text{

  position: relative;
    font-size: 20px;
    font-weight: 200;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: rgb(255, 255, 255);
    background: none;
    padding: 9px 40px 0px;
    margin-top: 10px;
    border-radius: 0px;
}