/* Estilos generales para todos los tamaños de pantalla */

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  height: auto;
  
}

body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

.container-fluid {
  background-color: #ffffff;
  height: 50px; 
  overflow: hidden; 
}

.text-center {
  margin-bottom: 50px; 
}

.informacion{
  background-color: #087f18;
  height: 40px;
  
  
  
  
  
  
  }
  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.4rem;
    height: 100%;
    width: 100%; 
    color: #003a75;
    margin-left: 59%;
    
    
  } 



#carouselControls {  
  max-width: 100%;
  height: auto; 
}
.carousel-control-next{
  margin-right: 180px;
}

.carousel-item img {
  width: 100%; 
  height: 750px; 
  object-fit: cover; 
  
}

.carousel-item2 img {
  width: 100%; 
  height: 750px; 
  object-fit: cover; 
  
}

.carousel-inner {
  display: flex; 
  align-items: center; 
}
.carousel-caption1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* Color del texto */
}

.carousel-caption1 h1 {
  position: relative;
  top: 180px;
  left: 60%;
  transform: translateY(-50%);
  text-align: right;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color: #000000;
  transform: scale(1.1);
  color: #fffbfb;

  max-width: 100%;
  height: auto;
}



.carousel-caption1 p {
  max-width: 100%;
  height: auto;
  position: relative;
  top: 200px;
  left: 500px;
  font-size: 1.2vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-family: Helvetica, sans-serif;
  text-align: right;
  color: #f8f9fa;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
  max-width: 100%;
  height: auto;
}
/* Estilo para el texto en el carrusel */


.navbar {
  margin-top: -120px;
  margin-bottom: 30px; 
  background-color: #ffffff00;
  max-width: 100%;
  height: auto;
}

.navbar-nav .nav-link {
  font-size: 2rem; 
  color: #003a75;
  font-family: Arial, Helvetica, sans-serif; 
  
  max-width: 100%;
  height: auto;
}

.navbar-brand {
  font-size: 2rem; 
  font-weight: bold; 
  font-family: Arial, Helvetica, sans-serif; 
  color: #003a75; 
}

.navbar-toggler-icon {
  color: #003a75; 
}

.dropdown-menu {
  font-size: 2rem; 
   
  font-family: Arial, Helvetica, sans-serif; 
  color: #003a75; 
}

/* Estilos específicos para tarjetas */
.aliados {
  position: relative;
  margin-bottom: 200px;
  margin-left: 150px;
  margin-right: 200px;
  margin-top: 60px;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.card-front, .card-back {
  position: absolute;
  top: -100;
  left: 0;
  width: 90%;
  height: 100%;
  transition: transform 0.3s ease;
  backface-visibility: hidden;
}

.aliados:hover .card-front {
  transform: rotateY(180deg);
}

.aliados:hover .card-back {
  transform: rotateY(1deg);
}

.card-back p {
  margin-left: 100px;
  margin-top: -110px;
  width: 150%;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
  text-align: justify;
  border-radius: 0%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  position: absolute;
  
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #087f18;
}

.aliados img {
  margin-left: 50px;
  max-width: 180%;
  max-height: 180%;
  width: auto;
  height: auto;
  margin-bottom: 300px;
}
iframe {
  border: none; /* Eliminar borde */
  border-radius: 10px; /* Agregar bordes redondeados */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  width: 700px; /* Ancho personalizado */
  height: 500px; /* Altura personalizada */
  margin: 0 auto; /* Centrar horizontalmente */
  display: block; /* Mostrar como bloque */
}



/* Estilo para el contenedor principal */
.d-flex.align-items-center {
  margin-left: 10%; /* Margen exterior izquierdo */
  margin-top: 5vh; /* Margen superior */
}

/* Estilo para el contenedor del mapa */
.flex-shrink-0 {
  margin-right: -6%; /* Margen derecho */
}

/* Estilo para h8 dentro de .flex-grow-1 */
.flex-grow-1 h8 {
  font-size: 1.5rem; /* Tamaño de fuente */
  font-weight: bold; /* Negrita */
  margin-bottom: 10%; /* Margen inferior */
  color: #003a75; /* Color del texto */
}


.flex-grow-1 .col-sm p {
  font-size: 1rem; /* Tamaño de fuente */
  margin-bottom: 0.5rem; /* Margen inferior */
  color: #003a75; /* Color del texto */
  font-family: Arial, Helvetica, sans-serif; /* Fuente */
  line-height: 1.6; /* Altura de línea */
  margin-top: -50px;
}

/* Estilo para párrafos destacados */
.flex-grow-1 .col-sm p.highlight {
  color: #007bff; /* Color del texto destacado */
  font-weight: bold; /* Negrita */
}

/* Margen para el primer título h8 */
.flex-grow-1 .col-sm-3 h8 {
  margin-bottom: 1rem; /* Margen inferior */
}

/* Margen para el segundo título h8 */
.flex-grow-1 .col-sm-4 h8 {
  margin-bottom: 1.5rem; /* Margen inferior */
  margin-top: 5vh; /* Margen superior */
}

/* Margen para el tercer título h8 */
.flex-grow-1 .col-sm-4 h8 {
  margin-bottom: 2rem; /* Margen inferior */
}
.T_Contac h6 {
  text-align: center;
  font-size: 3rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-transform: uppercase; /* Convertir texto a mayúsculas */
  letter-spacing: 2px; /* Espaciado entre letras */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

}


.formulario {  
    text-align: center; /* Centrar el contenido */
    max-width: 600px; /* Ancho máximo del contenido */
    margin: 90px auto 0; /* Margen superior de 50px y centrar horizontalmente */
    margin-top: 10rem;
    padding: 0 20px; /* Añadir un poco de espacio a los lados */
}
.formulario h6 {  
  text-align: center;
  font-size: 2.5rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-transform: uppercase; /* Convertir texto a mayúsculas */
  letter-spacing: 2px; /* Espaciado entre letras */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  
}
.formulario p {  
  margin-top: 1.5rem;
  text-align: justify;
  font-size: 1.3rem; /* Tamaño de fuente inicial */
  font-family: Arial, Helvetica, sans-serif;
  
  color: #003a75; /* Color del texto */
  
  letter-spacing: 1.5px; /* Espaciado entre letras */
}
.container {
  max-width: 100%; /* Ancho máximo del contenedor */
  max-height: 700px;
  margin-top: 100px;
  margin: 70px auto; /* Centrar el contenedor con un margen superior e inferior */
  padding: 0 15px; /* Espaciado interno */
}

.contact-form {
  background-color: #f9f9f9; /* Color de fondo del formulario */
  border-radius: 10px; /* Borde redondeado */
  padding: 40px; /* Espaciado interno */
  
  margin-left: -9%;
}
#nombre{
  margin-left: -25%;
}
#email{
  margin-left: -25%;
}
#telefono{
  margin-left: -25%;
}
#ciudad{
  margin-left: -25%;
}
.form-group {
  margin-bottom: 20px; /* Margen inferior entre grupos de formulario */
  align-items: center;
  
}

.form-control {
  border-radius: 10px; /* Borde redondeado de los campos de formulario */
  margin: 2%;
}

.btn {
  background-color: #28a745; /* Color de fondo del botón */
  color: #fff; /* Color del texto del botón */
  border-radius: 5px; /* Borde redondeado del botón */
  padding: 10px 20px; /* Espaciado interno del botón */
  border: none; /* Eliminar borde del botón */
  cursor: pointer; /* Cursor apuntador al pasar sobre el botón */
}

#copy{
  margin-top: -10px;


}
#menu{
  margin-left: 0px;
}
.container3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ajusta la altura según tus necesidades */
}

.image-container3 {
  position: relative;
  text-align: center;
}

.image-container3 img {
  max-width: 100%; /* Para que la imagen se ajuste al tamaño del contenedor */
  max-height: 100%; /* Para que la imagen se ajuste al tamaño del contenedor */
  transition: transform 0.5s ease; /* Agrega una transición suave */
}

.image-container3:hover img {
  transform: translateY(0); /* Efecto de caída al hacer hover */
  max-width: 110%; /* Aumentar el tamaño de la imagen al hacer hover */
  max-height: 110%; /* Aumentar el tamaño de la imagen al hacer hover */
}

.text-overlay3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* Color del texto */
}

.text-overlay3 h2 {
  font-size: 24px; /* Tamaño del título */
}

.text-overlay3 p {
  font-size: 18px; /* Tamaño del texto */
}

.img-responsive {
  max-width: 100%;
  height: auto;
}





@media screen and  (min-width: 50px) and (max-width:413px) {
  
  .navbar {
    margin-top: -0px;
    margin-bottom: 70px; 
    background-color: #ffffff00;
    max-width: 100%;
    height: auto;
  }
 
  .carousel-item img {
    width: 65%; 
    height: 400px; 
    object-fit: cover; 
    
  }
  #imagen3 {
    
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
    
  }
  
  
  
  .carousel-caption1 h1 {
    position: relative;
    width: 320px;
    top: 20px;
    left: -46%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #003a75;
    
    height: auto;
  }
  
  
  
  .carousel-caption1 p {
  width: 100%;
    height: auto;
    position: relative;
    top: 15px;
    left: -5%;
    font-size: 2.8vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #003a75;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    
    height: auto;
  }

  .carousel-caption2 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
    width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption2 h2 {
    position: relative;
    top: -60px;
    margin-left: -30%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color:#FFF; /* Color del texto */
    transform: scale(1.1);
    width: 100%;
    height: auto;
  }
  
  
  .carousel-caption2 p {
    position: relative;
    top: -70px;
    margin-left: -5%;
    font-size: 2.8vw; 
    font-family: Helvetica, sans-serif;
    text-align:justify;
    color:#FFFF; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    max-width: 65%;
    height: auto;
  }
  
  /* Estilo para el texto en el carrusel */
  .carousel-caption3 h2 {
    max-width: 100%;
    
    height: auto;
    position: relative;
    top: -250px;
    left: 70px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #003a75; /* Color del texto */
    transform: scale(1.1);
   
    height: auto;
  }
  
  /* Estilo para el texto de manera más moderna */
  .carousel-caption3 p {
    position: relative;
    top: -260px;
    left: 150px;
    font-size: 2.8vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    max-width: 100%;
    height: auto;
  }

  
  
  .informacion{
    background-color: #087f18;
    height: 20px;
    width: 100%;
    
    
    
    
    
    
    }
  
  .informacion p{
    
  
    
      font-family: Arial, Helvetica, sans-serif; 
      text-align: center;
      font-size: 0.5rem;
      height: 100%;
      width: 350px; 
      color: #003a75;
      
      margin-left: -155%;
      
      
    }





    .empresas {
      margin-top: 10%;
      margin-bottom: 65%;
      width: 50px;
      margin-left: 43%;
  }
  
  .box1 {
      width: 50px;
      height: 50px;
      transform-style: preserve-3d;
      transition: transform 3s;
      margin-top: 50%;
      margin-bottom: 50%;
  }
  
  .box1 span img {
      width: 100px;
      height: 100px;
      border-radius: 100%; /* Circular */
      background-color: transparent;
  }






  
  
  
  
  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 5%;
    font-size: 0.9rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 } 

.compañia{
  width: 93%;
  margin-top: 5%;
  margin-bottom: 10%;
  margin-left: 3%;
  
}

 .compañia h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem; /* Tamaño del texto */
    line-height: 1.3; /* Altura de línea */
    margin-bottom: 20px; /* Espaciado inferior */
    width: 300px;
    margin-left: -50px;
    margin-top: 100%;
    text-align: justify;
  }



.titulo_blog {
  width: 80%;
  height: auto;
  align-items: center;
  margin-left: 10%;
 
  background-position: center;
  background-color: rgba(255, 255, 255, 0.90);
  background-blend-mode: overlay;
}

  

  .whatsapp-link i {
    color: #003a75; /* Cambia el color del icono a blanco */
}
  #carouselControls {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next{
    margin-right: 0px;
  }
  
  .carousel-item img {
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
  }
  
  .carousel-inner {
    display: flex; 
    align-items: center; 
  }
  .carousel-caption1 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
  }
  

  
  
  .navbar-nav .nav-link {
    font-size: 1rem;
    color: #003a75;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    height: auto;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  font-size: 1rem;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

#mapa {
  display: flex;
  flex-direction: column; /* Disponer todos los elementos en columna */
  align-items: center; /* Centrar los elementos horizontalmente */
  text-align: center; /* Centrar el texto */
  padding: 20px; /* Añadir relleno alrededor del contenedor */
}

#mapa iframe {
  width: 100%; /* Hacer que el mapa ocupe el ancho completo */
  max-width: 800px; /* Limitar el ancho máximo */
  height: 300px; /* Ajustar la altura del mapa */
  margin-bottom: 20px; /* Espaciado inferior para el mapa */
  margin-left: -25px;
}

#mapa .container {
  width: 100%; /* Hacer que el contenedor ocupe el ancho completo */
  margin-bottom: -80px;
 
}

#mapa .row {
  flex-direction: column; /* Asegurar que las columnas se dispongan en fila */
  align-items: center; /* Centrar las columnas horizontalmente */
  width: 100%; /* Hacer que la fila ocupe el ancho completo */
  margin-left: -20px;
}

#mapa .telefono, 
#mapa .col-sm-3 {
  width: 100%; /* Hacer que las columnas ocupen el 100% del ancho */
  margin-bottom: 20px; /* Espaciado inferior entre las columnas */
}

#texto{
  margin-left: -15px;
}  



  #oterra{
    margin-left: 5%;
  }

 


  .flex-wrap {
    margin-left: 1%;
    margin-top: 100px;
    max-width: 100%;
}


  #whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    margin-left: -220px;
}
svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    
}
circle {
    fill: #25d366;
    
}
path {
    fill: #fff;
}


  

  .titulo_blog2 {
    width: 90%; /* Ancho del div */
 
  margin-left: 5%;
  margin-top: 2%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1  rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

    
  
  .titulo_blog {
    width: 80%;
    height: auto;
    align-items: center;
    margin-left: 10%;
    background-image: url('../img/fondoprobiotico.png');
    
    background-position: center; /* Centrar la imagen */
    background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
}

  .blog {
    display: flex; /* Activar el modelo de caja flexible */
    align-items: center; /* Alinear verticalmente los elementos */
}

.blog > div {
    flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
}

.blog img {
    width: 285px; /* Asegurarse de que la imagen no supere su contenedor */
    margin-left: 1%;
    margin-top: -400px;
}
.texto1 {
  width: 7000px;
  margin-left: -280px;
  
  margin-right: 5%;
  margin-top: 250px;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

  
  




.titulo_blog h2{
  width: 70%;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  margin-top: 100px;
 
  font-size: 2rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: left; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #003a75; /* Color del texto */
  margin-left: 8%;
  
}

 

  #marcas .carousel-item img {
    margin-top: 0px;
    
    /* Ajusta el tamaño máximo de las imágenes en el carousel */
    max-width: 40%; /* Ajusta el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
    align-items: center;
    margin-left: 30%;
    color: #003a75;
  }
  
  .T_Contac h6 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #003a75;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546);
}





  .container23{
    width: 80%;
    margin-top: 5%;
    
    margin-left: 13%;
  }
   .container23 img{
    width: 100%;
    align-items: center;
    height: auto;
    margin-top: 90px;
    margin-left: -22%;
    border-radius: 8px;

  }
  .contanier23 p{

margin-left: 200pc;

  } 







  /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#Contacto_qs p{
  width: 95%;
  margin-top: -10%;
  text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-left: -10%;

}
.imagen_quienes {
  width: 310px;
  height: auto;
  align-items: center;
 margin-top: -1250px;
  margin-left: -30px;
  margin-bottom: -100%;
  
}
#Contacto_qs button.btn-outline-success {
  margin-top: -10px;
  margin-bottom: 55px;
  margin-left: 20%;
  /* Cambiar el color del texto */
  color: #28a745;
  /* Cambiar el color de fondo */
  background-color: transparent;
  /* Agregar borde */
  border: 2px solid #28a745;
  /* Agregar padding */
  padding: 5px 10px;
  /* Añadir bordes redondeados */
  border-radius: 5px;
  /* Establecer el cursor a pointer */
  cursor: pointer;
}
.fondo-imagen {
  margin-top: -100px;
  background-image: url('../img/quienes_somos2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  
  height: auto;
  position: relative;
  z-index: -1;

  /* Aplica un color de fondo con opacidad */
  background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */



  
  /* Ajustes para el div */
  height: 600px; /* Altura del div */
  position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
  text-align: center; /* Centrar texto horizontalmente */
  color: #210075; /* Color del texto */
  margin-bottom: 500px;
}

.texto-superpuesto {
  position: relative;
  top: 450px; /* Comienza desde arriba de la pantalla */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar horizontalmente */
  font-size: 1rem; /* Tamaño del texto */
  font-weight: 400; /* Hacer el texto más visible */
  text-align: center;
  width: 100%;
  background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
  line-height: 1.2;
  padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
  
  
}





.contenedor11 {
  margin-bottom: 15%;
  margin-top: 5%;
  background-color: rgba(220, 216, 216, 0.8);
  height: 170px;
  width: 100%;
}

.mision  {
  width: 300px; 
   margin-top: 500px;
   height: 200px;
  
  margin-left: 30px;
  font-size: 1rem;
  text-align: center;
  color: #003a75 ;

}

.mision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 25px; /* Espacio entre la imagen y otros elementos */
  margin-top: -700px;
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}
.contenedor12 {
  margin-top:500px ;
  margin-left: 0%;
  
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 25%;
  
  
  height: 500px;
  width: 100%;
}

.vision {
  width: 340px;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  margin-top: -250px;
  
  
  margin-left: 20px;
  font-size: 1rem;
  text-align: center;
  color: #003a75 ;


}

.vision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 25px; /* Espacio entre la imagen y otros elementos */
  margin-top: -700px;
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}





/* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */




  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
  }
 
  .contact-info {
    text-align: left;
    width: 1360PX;
    font-size: 16px; 
    margin: 0 auto;
    margin-left: 850px; 
    background-color: #28a745;
    
  }  
  
  .contact-info  {
     
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.8rem;
    color: #1f0980;
    margin-top: 0%;
    margin-left: -70%;
  }
 
  #footer .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar las columnas horizontalmente */
    align-items: flex-start; /* Alinear las columnas al borde superior */
    text-align: center; /* Centrar el texto dentro de las columnas */
    margin-left: 2%;
    color: #003a75;
}
#footer .row .col-md-3, 
#footer .row .col-md-2, 
#footer .row .col-md-4 {
    width: 100%; /* Hacer que las columnas ocupen el 100% del ancho */
    margin-bottom: 20px; /* Añadir margen inferior entre las columnas */
    font-size: 0.8REM;
}
#footer .row h6, #footer .row h7 {
    text-align: center; /* Asegurarse de que los encabezados estén centrados */
    font-size: 0.8REM;
}
.container {
  max-width: 100%;
  max-height: 1700px;
  margin-top: 0px;
  margin: 70px auto;
  padding: 0 15px;
}
.navbar-toggler-icon {
  margin-top: -100; /* Centrado vertical */
  display: inline-block;
  width: 3em; /* Aumenta el ancho */
  height: 2em; /* Aumenta la altura */
  background-color: #333; /* Color de fondo visible */
  
  background: no-repeat center center;
  background-size: 100% 100%;
  margin-left: -35%;
  margin-right: auto;
  box-sizing: border-box; /* Incluye el borde en las dimensiones */
  border-radius: 10px; /* Asegura que sea cuadrado */
}
.contact-form {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 40px;
  margin-left: -12%;
  margin-bottom: 100px;
}


  
 
  .row {
    margin-top: 0px; /* Márgen superior */
    align-content: center;
    align-items: center;
    margin-left: 10%;
    
    
  }
  #logo2{
    margin-bottom: -30px;
    width: 50%;
    max-width: 100%;
    height: auto;
    align-items: center;
  }
  
  
  #p {
    width: 80%; /* Ancho del contenedor */
    max-width: 300px; /* Ancho máximo */
    padding: 20px; /* Relleno interior */
    text-align: justify; /* Alineación del texto al centro */
    margin-top: 5%;
    margin-left: 5px;
  }
  

 
  
  .btn {
    font-size: 18px; /* Tamaño del texto del botón */
    padding: 10px 20px;
    margin-bottom: 20%;
    margin-left: 15%;
    
    
  }

/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#tarjetas{
  margin-left: 17%;
  
  margin-bottom: 520px;
  width: 75%;
  
}


.card {  
  margin-top: 10px;
  height: 300px; /* Establece una altura fija para todas las tarjetas */
  margin-left: -50px;
  width: 310px;
  font-size: 1rem;
  
  
}
.card-body h4{
  font-size: 1rem;
}

.card-body {
  height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
  display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
  flex-direction: column; /* Apila los elementos verticalmente */
  justify-content: center; /* Centra verticalmente los elementos */
  background: linear-gradient(to right, #8786868c, #ffffff);
  border: 1px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  font-size: 0.7rem;
  
}


.col-custom {
  transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
  width: 60%;
}

.col-custom:hover {
  transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
}

#titulop h3 {
  margin-top: 100px;
  font-size: 3.5rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: center; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #011d38; /* Color del texto */
}



#titulop p {
  font-size: 1.2rem; /* Tamaño de fuente del párrafo */
  line-height: 1.6; /* Altura de línea */
  text-align: center; /* Alineación del texto al centro */
  color: #011d38; /* Color del texto */
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Restaura la posición original */
  }
}
/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#titulop h3{
  margin-top: -5%;
 font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
}
#titulop p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
}
#titulo2 h5 {
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: -115px;
 margin-top: -500px;
}

#titulo2 p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center; /* Alineación del texto al centro */
  margin-top: 120px;
  
  
}

.aliados {
  position: relative;
  margin-bottom: 100px;
  margin-left: 5%;
  margin-right: 100px;
  margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
  width: 70px; /* Ancho de la tarjeta */
  height: 100px; /* Altura de la tarjeta */
  perspective: 800px; /* Perspectiva para el efecto 3D */
  
}

.card-front, .card-back {
  position: relative;
  top: 100;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
}

.aliados:hover .card-front {
  transform: rotateY(180deg);
}

.aliados:hover .card-back {
  transform: rotateY(1deg);
}

.card-back p {
  margin-left: 20px;
  margin-top: -70px;
  width: 150px; /* Ancho de la caja del texto */
  font-size: 0.8rem; /* Tamaño de fuente */
  line-height: 1.6; /* Altura de línea */
  color: #000000; /* Color de texto */  
  text-align: justify; /* Alineación del texto */
  border-radius: 0%; /* Borde redondeado */
  background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
  padding: 20px; /* Espaciado interno */
  position: absolute; /* Posición absoluta */
  
  transform: translate(-50%, -50%); /* Centrar */
  opacity: 0; /* Hacer que el texto no sea visible inicialmente */
  color: #087f18;
}

.container {
  perspective: 100%; /* Establece la perspectiva en el contenedor principal */
  width: 100%;
}

.aliados {
  transform-style: preserve-3d; /* Conserva la transformación 3D */
  transition: transform 10s ease; /* Transición suave para la rotación */
}


.aliados:hover .card-back p {
  opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
}
.aliados img {
  margin-top: -50px;
  
  margin-left: 20px;
  max-width: 160%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
  max-height: 160%; /* Establece la altura máxima de la imagen al 100% del contenedor */
  width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  
}
.medio{
background-color: #003a75;
margin-top: -100px;
}
.medio p{
  color: #ffffff;
  margin-top: -5px;
  
  
  }
  .medio h6{
    color: #ffffff;
    margin-top: 50px;
    
    }
    .medio h7{
      color: #ffffff;
      margin-top: 10px;
      text-align: center;
      
      }
#copy{
  margin-top: -70px;
  color: #ffffff;
  height: 120px;
  text-align: center;
  margin-bottom: -1500px;
  font-size: 0.8rem;
  align-items: center;
  

  
}




/* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* porque elegirnos  */
.elegir {
  margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  width: 100%;
  height: 1800px; /* Ajusta la altura según sea necesario */
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2b7; /* Color de fondo gris claro */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
}

.iconos, .texto {
  margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
}

/* Estilos para los iconos */
.iconos {
  /* Estilos para los iconos */
}

/* Estilos para los textos */
.texto {
  /* Estilos para los textos */
}



/* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.titulop{
  
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: 100px;
 margin-top: -500px;
}


  @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
  @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");

  .container5{
   height: 1100px ;
   width:95%;
   margin-bottom:-3% ;
   margin-left: 2%;
   

  
   background-color: rgba(220, 216, 216, 0.8);
    
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.5em;
  }

  .item p {
    margin-top: -250px;
    margin-left: -80px;
    width: 160px;
    height: 300px;
    font-size: 1rem; 
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
}

 
  .item h3 {   
    width: 170px;
    height: 300px;    
    margin-left: -80px;
    margin-top: -90px;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    
    color: var(---color);
  }
  .item2 p {
    width: 160px;
    height: 300px;
    font-size: 1rem; /* Tamaño de fuente */
    margin-left: -70px;
    
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; 

    color: #555;
   
  }
  
  .item2 h3 {
    margin-left: -70px;
    margin-top: -80px;
    width: 170px;
    
    font-weight: 700;
    text-align: justify;
    color: var(---color);
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .item{
    margin-top: 10%;
    margin-left: 5%;
    --color: #28a745;
    width: 220px;
    height: 320px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item2{
    margin-top: 10%;
    margin-left: 5%;
    --color: #003a75;
    width: 220px;
    height: 320px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 20px 20px 20px 20px;
    filter:drop-shadow( 2px 0 2px #00000094);
    transition: filter .5s;
  }
  .item2::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 40px 40px 40px 40px;
    filter:drop-shadow( 5px 0 4px #00000094);
    transition: filter .5s;
  }

  .item:nth-child(2){
    ---color:#813085
  }

  .item:nth-child(3){
    ----color: #119630
  }
  .item2:nth-child(2){
    ---color:#813085
  }

  .item2:nth-child(3){
    ----color: #119630
  }
  .layer{
    
    height:  91%;
    margin: 20px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  .layer1{
    
    height:  92%;
    margin: 15px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47.6%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  span{
    width: 22%;
    height: 20%;
    color:#fff;
    background-color: var(--color);
    border-radius: 50%;
    display: grid;
    place-content: center;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      font-size: 14px;
      position: absolute;
      right: 10px;
      top: 80%;
  }
  .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
}

  .item:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item:hover .layer{
    left: 40px;
  }
  .item:hover .layer1{
    left: 40px;
  }
  .item2:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item2:hover .layer{
    left: 40px;
  }
  .item2:hover .layer1{
    left: 70px;
  }
  .item .layer1 i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item2 .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }




  

/* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
.titulo_catalogo h2 {
  margin-left: 10%;
  margin-top: auto;
  font-size: 2rem;
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  
}
.titulo_catalogo p{
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center;


}
.container7{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  font-family: sans-serif;
  overflow: hidden;
  transform:  skew(5deg);
}
.card3{
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.card3:not(:nth-child(5)){
  margin-right: 1em;
}
#imagen_catalogo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(0%);
}
.head3{
  color: black;
  background: #ff1eadbf;
  padding: 0.5em;
  transform:  rotate(-90deg);
  transform-origin: 0% 0%;
  transition:  all 0.5s ease-in-out;
  min-width:100% ;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}


.card3:hover{
  flex-grow: 10;
}
.card3:hover #imagen_catalogo {
filter:grayscale(0);
}

.card3:hover .head3{
  text-align: center;
  top: calc(100% -2em);
  color: white;
  background: #00000080;
  font-size: 0.5em;
  transform: rotate(0deg) skew(-5deg);
}


/* detalle */

.container8{

  background-color: #d9d8d8;
  width: 100%;
  height: 100%;
}
#enz_tajr{
  margin-top: 50px;
  margin-left: 2.8%;
  width: 100%;
  height: 100%;
}
.card7 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}

.card8 {
  width: 100%;
  height:820px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  border-radius: 10px; /* Hace que los bordes sean curvos */
}

.card7:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card8:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}

.card7 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card7 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card7 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
.card8 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card8 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card8 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

.productos {
  margin-top: 160px;
  text-align: center; /* Centra el contenido del contenedor */
  margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
}

.productos h6 {
  font-size: 2rem; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  
  
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Comienza con opacidad 0 */
    transform: translateY(-20px); /* Desplazamiento hacia arriba */
  }
  to {
    opacity: 1; /* Termina con opacidad 1 */
    transform: translateY(0); /* Sin desplazamiento */
  }
}




/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container9{
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr2{
  margin-top: 110px;
  margin-left: 5.8%;
  width: 100%;
  height: 100%;
}
.card11 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card11 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card11 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
/* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {
  position: relative; /* Establece la posición relativa */
}

.footer-container {
  position: relative; /* Establece la posición relativa */
}

/* Estilos para el botón "move-top" */
.move-top {
  position: absolute; 
  bottom: 30px; 
  right: 30px; 
  z-index: 999; 
  width: 40px;
  height: 40px;
  background-color: #28a745; 
  border-radius: 50%; 
  color: #ffffff; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  transition: background-color 0.3s ease; 
}

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container10{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr3{
 
  margin-top: 110px;
  margin-left: 29.8%;
  width: 100%;
  height: 100%;
}
.card12 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card12 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card12 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

/* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container11{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 90%;
}
#enz_tajr4{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
#enz_tajr5{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
.card13 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}
.card14 {
  width: 100%;
  height: 600px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}


.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card13 h4,.card14 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card13 p,.card14 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}


.form-demo {
  padding:1.5rem 0;
}
.form-demo h6, hr {
  font-size: 1.5rem;
  margin-bottom:1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  
}


}


@media screen and  (min-width: 414px) and (max-width:575px) {
  

  .navbar {
    margin-top: -10px;
    margin-bottom: 70px; 
    background-color: #fff;
    max-width: 100%;
    align-items: center;
    height: auto;
    border: 2px dashed #fff; /* Borde blanco discontinuo */
}

 
 
  .carousel-item img {
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    
  }
  #imagen3 {
    
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
    
  }
  
  
  
  .carousel-caption1 h1 {
    position: relative;
    top: 20px;
    left: -45%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #003a75;
  
    width: 430px;
    height: auto;
  }
  
  
  
  .carousel-caption1 p {
    width:430px;
    height: auto;
    position: relative;
    top: 15px;
    left: -10%;
    font-size: 2.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #003a75;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    
    height: auto;
  }

  .carousel-caption2 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
    width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption2 h2 {
    position: relative;
    top: -60px;
    margin-left: -30%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color:#FFF; /* Color del texto */
    transform: scale(1.1);
    width: 100%;
    height: auto;
  }
  
  
  .carousel-caption2 p {
    position: relative;
    top: -70px;
    margin-left: -5%;
    font-size: 2.5vw; 
    font-family: Helvetica, sans-serif;
    text-align:justify;
    color:#FFFF; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
   width: 80%;
    height: auto;
  }
  
  /* Estilo para el texto en el carrusel */
  .carousel-caption3 h2 {
    max-width: 100%;
    
    height: auto;
    position: relative;
    top: -255px;
    left: 90px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 5.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #003a75; /* Color del texto */
    transform: scale(1.1);
   
    height: auto;
  }
  
  /* Estilo para el texto de manera más moderna */
  .carousel-caption3 p {
    position: relative;
    top: -265px;
    left: 180px;
    font-size: 2.8vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    max-width: 100%;
    height: auto;
  }

  
  
  .informacion{
    background-color: #087f18;
    height: 20px;
    width: 100%;
    
    
    
    
    
    
    }
  
  .informacion p{
    
  
    
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 0.1rem;
      height: 100%;
      width: 50%; 
      color: #003a75;
      margin-left: -13%;
      
      
    }





    .empresas {
      margin-top: 10%;
      margin-bottom: 65%;
      width: 50px;
      margin-left: 45%;
  }
  
  .box1 {
      width: 50px;
      height: 50px;
      transform-style: preserve-3d;
      transition: transform 3s;
      margin-top: 50%;
      margin-bottom: 50%;
  }
  
  .box1 span img {
      width: 100px;
      height: 100px;
      border-radius: 100%; /* Circular */
      background-color: transparent;
  }






  
  
  
  
  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 5%;
    font-size: 0.9rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 } 

.compañia{
  width: 93%;
  margin-top: 5%;
  margin-bottom: 10%;
  margin-left: 3%;
  
}

 .compañia h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem; /* Tamaño del texto */
    line-height: 1.3; /* Altura de línea */
    margin-bottom: 20px; /* Espaciado inferior */
    width: 320px;
    margin-left: -45px;
    margin-top: 100%;
    text-align: justify;
  }



.titulo_blog {
  width: 80%;
  height: auto;
  align-items: center;
  margin-left: 10%;
 
  background-position: center;
  background-color: rgba(255, 255, 255, 0.90);
  background-blend-mode: overlay;
}

  

  .whatsapp-link i {
    color: #003a75; /* Cambia el color del icono a blanco */
}
  #carouselControls {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next{
    margin-right: 0px;
  }
  
  .carousel-item img {
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
  }
  
  .carousel-inner {
    display: flex; 
    align-items: center; 
  }
  .carousel-caption1 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
  }
  

  
  
  .navbar-nav .nav-link {
    font-size: 1rem;
    color: #003a75;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    height: auto;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  font-size: 1rem;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

#mapa {
  display: flex;
  flex-direction: column; /* Disponer todos los elementos en columna */
  align-items: center; /* Centrar los elementos horizontalmente */
  text-align: center; /* Centrar el texto */
  padding: 20px; /* Añadir relleno alrededor del contenedor */
}

#mapa iframe {
  width: 100%; /* Hacer que el mapa ocupe el ancho completo */
  max-width: 800px; /* Limitar el ancho máximo */
  height: 300px; /* Ajustar la altura del mapa */
  margin-bottom: 20px; /* Espaciado inferior para el mapa */
  margin-left: -25px;
}

#mapa .container {
  width: 100%; /* Hacer que el contenedor ocupe el ancho completo */
  margin-bottom: -80px;
 
}

#mapa .row {
  flex-direction: column; /* Asegurar que las columnas se dispongan en fila */
  align-items: center; /* Centrar las columnas horizontalmente */
  width: 100%; /* Hacer que la fila ocupe el ancho completo */
  margin-left: -20px;
}

#mapa .telefono, 
#mapa .col-sm-3 {
  width: 100%; /* Hacer que las columnas ocupen el 100% del ancho */
  margin-bottom: 20px; /* Espaciado inferior entre las columnas */
}

#texto{
  margin-left: -15px;
}  



  #oterra{
    margin-left: 5%;
  }

 


  .flex-wrap {
    margin-left: 1%;
    margin-top: 100px;
    max-width: 100%;
}


  #whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    margin-left: -180px;
}
svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    
}
circle {
    fill: #25d366;
    
}
path {
    fill: #fff;
}


  

  .titulo_blog2 {
    width: 90%; /* Ancho del div */
 
  margin-left: 5%;
  margin-top: 2%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1  rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

    
  
  .titulo_blog {
    width: 80%;
    height: auto;
    align-items: center;
    margin-left: 10%;
    background-image: url('../img/fondoprobiotico.png');
    
    background-position: center; /* Centrar la imagen */
    background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
}

  .blog {
    display: flex; /* Activar el modelo de caja flexible */
    align-items: center; /* Alinear verticalmente los elementos */
}

.blog > div {
    flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
}

.blog img {
    width: 300px; /* Asegurarse de que la imagen no supere su contenedor */
    margin-left: 1%;
    margin-top: -400px;
}
.texto1 {
  width: 7000px;
  margin-left: -280px;
  
  margin-right: 5%;
  margin-top: 250px;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

  
  




.titulo_blog h2{
  width: 70%;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  margin-top: 100px;
 
  font-size: 2rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: left; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #003a75; /* Color del texto */
  margin-left: 8%;
  
}

 

  #marcas .carousel-item img {
    margin-top: 0px;
    
    /* Ajusta el tamaño máximo de las imágenes en el carousel */
    max-width: 40%; /* Ajusta el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
    align-items: center;
    margin-left: 30%;
    color: #003a75;
  }
  
  .T_Contac h6 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #003a75;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546);
}





  .container23{
    width: 80%;
    margin-top: 5%;
    
    margin-left: 13%;
  }
   .container23 img{
    width: 100%;
    align-items: center;
    height: auto;
    margin-top: 90px;
    margin-left: -22%;
    border-radius: 8px;

  }
  .contanier23 p{

margin-left: 200pc;

  } 







  /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#Contacto_qs p{
  width: 95%;
  margin-top: -10%;
  text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-left: -10%;

}
.imagen_quienes {
  width: 100%;
  height: auto;
  align-items: center;
 margin-top: -1100px;
  margin-left: -30px;
  margin-bottom: 10%;
  
}
#Contacto_qs button.btn-outline-success {
  margin-top: -10px;
  margin-bottom: 55px;
  margin-left: 20%;
  /* Cambiar el color del texto */
  color: #28a745;
  /* Cambiar el color de fondo */
  background-color: transparent;
  /* Agregar borde */
  border: 2px solid #28a745;
  /* Agregar padding */
  padding: 5px 10px;
  /* Añadir bordes redondeados */
  border-radius: 5px;
  /* Establecer el cursor a pointer */
  cursor: pointer;
}
.fondo-imagen {
  margin-top: -100px;
  background-image: url('../img/quienes_somos2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  
  height: auto;
  position: relative;
  z-index: -1;

  /* Aplica un color de fondo con opacidad */
  background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */



  
  /* Ajustes para el div */
  height: 600px; /* Altura del div */
  position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
  text-align: center; /* Centrar texto horizontalmente */
  color: #210075; /* Color del texto */
  margin-bottom: 500px;
}

.texto-superpuesto {
  position: relative;
  top: 450px; /* Comienza desde arriba de la pantalla */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar horizontalmente */
  font-size: 1rem; /* Tamaño del texto */
  font-weight: 400; /* Hacer el texto más visible */
  text-align: center;
  width: 100%;
  background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
  line-height: 1.2;
  padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
  
  
}





.contenedor11 {
  margin-bottom: 15%;
  margin-top: 5%;
  background-color: rgba(220, 216, 216, 0.8);
  height: 170px;
  width: 100%;
}

.mision  {
  width: 300px; 
   margin-top: 500px;
   height: 200px;
  
  margin-left: 60px;
  font-size: 1rem;
  text-align: center;
  color: #003a75 ;

}

.mision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 35px; /* Espacio entre la imagen y otros elementos */
  margin-top: -700px;
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}
.contenedor12 {
  margin-top:500px ;
  margin-left: 0%;
  
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 25%;
  
  
  height: 500px;
  width: 100%;
}

.vision {
  width: 340px;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  margin-top: -250px;
  
  
  margin-left: 50px;
  font-size: 1rem;
  text-align: center;
  color: #003a75 ;


}

.vision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 35px; /* Espacio entre la imagen y otros elementos */
  margin-top: -700px;
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}





/* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */




  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
  }
 
  .contact-info {
    text-align: left;
    width: 1360PX;
    font-size: 16px; 
    margin: 0 auto;
    margin-left: 850px; 
    background-color: #28a745;
    
  }  
  
  .contact-info p {
     
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.8rem;
    color: #1f0980;
    margin-top: 0%;
    margin-left: -70%;
  }
 
  #footer .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar las columnas horizontalmente */
    align-items: flex-start; /* Alinear las columnas al borde superior */
    text-align: center; /* Centrar el texto dentro de las columnas */
    margin-left: 2%;
    color: #003a75;
}
#footer .row .col-md-3, 
#footer .row .col-md-2, 
#footer .row .col-md-4 {
    width: 100%; /* Hacer que las columnas ocupen el 100% del ancho */
    margin-bottom: 20px; /* Añadir margen inferior entre las columnas */
    font-size: 0.8REM;
}
#footer .row h6, #footer .row h7 {
    text-align: center; /* Asegurarse de que los encabezados estén centrados */
    font-size: 0.8REM;
}
.container {
  max-width: 100%;
  max-height: 1700px;
  margin-top: 0px;
  margin: 70px auto;
  padding: 0 15px;
}
.navbar-toggler-icon {
  margin-top: -100; /* Centrado vertical */
  display: inline-block;
  width: 3em; /* Aumenta el ancho */
  height: 2em; /* Aumenta la altura */
  background-color: #333; /* Color de fondo visible */
  
  background: no-repeat center center;
  background-size: 100% 100%;
  margin-left: -35%;
  margin-right: auto;
  box-sizing: border-box; /* Incluye el borde en las dimensiones */
  border-radius: 10px; /* Asegura que sea cuadrado */
}



.contact-form {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 40px;
  margin-left: -12%;
  margin-bottom: 100px;
}


  
 
  .row {
    margin-top: 0px; /* Márgen superior */
    align-content: center;
    align-items: center;
    margin-left: 10%;
    
    
  }
  #logo2{
    margin-bottom: -30px;
    width: 50%;
    max-width: 100%;
    height: auto;
    align-items: center;
  }
  
  
  #p {
    width: 80%; /* Ancho del contenedor */
    max-width: 300px; /* Ancho máximo */
    padding: 20px; /* Relleno interior */
    text-align: justify; /* Alineación del texto al centro */
    margin-top: 5%;
    margin-left: 5px;
  }
  

 
  
  .btn {
    font-size: 18px; /* Tamaño del texto del botón */
    padding: 10px 20px;
    margin-bottom: 20%;
    margin-left: 18%;
    
    
  }

/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#tarjetas{
  margin-left: 17%;
  
  margin-bottom: 520px;
  width: 75%;
  
}


.card {  
  margin-top: 10px;
  height: 300px; /* Establece una altura fija para todas las tarjetas */
  margin-left: -25px;
  width: 310px;
  font-size: 1rem;
  
  
}
.card-body h4{
  font-size: 1rem;
}

.card-body {
  height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
  display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
  flex-direction: column; /* Apila los elementos verticalmente */
  justify-content: center; /* Centra verticalmente los elementos */
  background: linear-gradient(to right, #8786868c, #ffffff);
  border: 1px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  font-size: 0.7rem;
  
}


.col-custom {
  transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
  width: 60%;
}

.col-custom:hover {
  transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
}

#titulop h3 {
  margin-top: 100px;
  font-size: 3.5rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: center; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #011d38; /* Color del texto */
}



#titulop p {
  font-size: 1.2rem; /* Tamaño de fuente del párrafo */
  line-height: 1.6; /* Altura de línea */
  text-align: center; /* Alineación del texto al centro */
  color: #011d38; /* Color del texto */
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Restaura la posición original */
  }
}
/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#titulop h3{
  margin-top: -5%;
 font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
}
#titulop p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
}
#titulo2 h5 {
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: -115px;
 margin-top: -500px;
}

#titulo2 p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center; /* Alineación del texto al centro */
  margin-top: 120px;
  
  
}

.aliados {
  position: relative;
  margin-bottom: 100px;
  margin-left: 5%;
  margin-right: 100px;
  margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
  width: 70px; /* Ancho de la tarjeta */
  height: 100px; /* Altura de la tarjeta */
  perspective: 800px; /* Perspectiva para el efecto 3D */
  
}

.card-front, .card-back {
  position: relative;
  top: 100;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
}

.aliados:hover .card-front {
  transform: rotateY(180deg);
}

.aliados:hover .card-back {
  transform: rotateY(1deg);
}

.card-back p {
  margin-left: 20px;
  margin-top: -70px;
  width: 150px; /* Ancho de la caja del texto */
  font-size: 0.8rem; /* Tamaño de fuente */
  line-height: 1.6; /* Altura de línea */
  color: #000000; /* Color de texto */  
  text-align: justify; /* Alineación del texto */
  border-radius: 0%; /* Borde redondeado */
  background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
  padding: 20px; /* Espaciado interno */
  position: absolute; /* Posición absoluta */
  
  transform: translate(-50%, -50%); /* Centrar */
  opacity: 0; /* Hacer que el texto no sea visible inicialmente */
  color: #087f18;
}

.container {
  perspective: 100%; /* Establece la perspectiva en el contenedor principal */
  width: 100%;
}

.aliados {
  transform-style: preserve-3d; /* Conserva la transformación 3D */
  transition: transform 10s ease; /* Transición suave para la rotación */
}


.aliados:hover .card-back p {
  opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
}
.aliados img {
  margin-top: -50px;
  
  margin-left: 20px;
  max-width: 160%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
  max-height: 160%; /* Establece la altura máxima de la imagen al 100% del contenedor */
  width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  
}
.medio{
background-color: #003a75;
margin-top: -100px;
}
.medio p{
  color: #ffffff;
  margin-top: -5px;
  
  
  }
  .medio h6{
    color: #ffffff;
    margin-top: 50px;
    
    }
    .medio h7{
      color: #ffffff;
      margin-top: 10px;
      text-align: center;
      
      }
#copy{
  margin-top: -70px;
  color: #ffffff;
  height: 120px;
  text-align: center;
  margin-bottom: -1500px;
  font-size: 0.8rem;
  align-items: center;
  

  
}




/* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* porque elegirnos  */
.elegir {
  margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  width: 100%;
  height: 1800px; /* Ajusta la altura según sea necesario */
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2b7; /* Color de fondo gris claro */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
}

.iconos, .texto {
  margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
}

/* Estilos para los iconos */
.iconos {
  /* Estilos para los iconos */
}

/* Estilos para los textos */
.texto {
  /* Estilos para los textos */
}



/* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.titulop{
  
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: 100px;
 margin-top: -500px;
}


  @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
  @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");

  .container5{
   height: 1100px ;
   width: 96.7%;
   margin-bottom:-3% ;
   margin-left: 2%;

  
   background-color: rgba(220, 216, 216, 0.8);
    
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.5em;
  }

  .item p {
    margin-top: -250px;
    margin-left: -80px;
    width: 160px;
    height: 300px;
    font-size: 1rem; 
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
}

 
  .item h3 {   
    width: 170px;
    height: 300px;    
    margin-left: -80px;
    margin-top: -90px;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    
    color: var(---color);
  }
  .item2 p {
    width: 160px;
    height: 300px;
    font-size: 1rem; /* Tamaño de fuente */
    margin-left: -70px;
    
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; 

    color: #555;
   
  }
  
  .item2 h3 {
    margin-left: -70px;
    margin-top: -80px;
    width: 170px;
    
    font-weight: 700;
    text-align: justify;
    color: var(---color);
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .item{
    margin-top: 10%;
    margin-left: 10%;
    --color: #28a745;
    width: 220px;
    height: 320px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item2{
    margin-top: 10%;
    margin-left: 10%;
    --color: #003a75;
    width: 220px;
    height: 320px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 20px 20px 20px 20px;
    filter:drop-shadow( 2px 0 2px #00000094);
    transition: filter .5s;
  }
  .item2::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 40px 40px 40px 40px;
    filter:drop-shadow( 5px 0 4px #00000094);
    transition: filter .5s;
  }

  .item:nth-child(2){
    ---color:#813085
  }

  .item:nth-child(3){
    ----color: #119630
  }
  .item2:nth-child(2){
    ---color:#813085
  }

  .item2:nth-child(3){
    ----color: #119630
  }
  .layer{
    
    height:  91%;
    margin: 20px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  .layer1{
    
    height:  92%;
    margin: 15px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47.6%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  span{
    width: 22%;
    height: 20%;
    color:#fff;
    background-color: var(--color);
    border-radius: 50%;
    display: grid;
    place-content: center;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      font-size: 14px;
      position: absolute;
      right: 10px;
      top: 80%;
  }
  .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
}

  .item:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item:hover .layer{
    left: 40px;
  }
  .item:hover .layer1{
    left: 40px;
  }
  .item2:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item2:hover .layer{
    left: 40px;
  }
  .item2:hover .layer1{
    left: 70px;
  }
  .item .layer1 i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item2 .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }




  

/* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
.titulo_catalogo h2 {
  margin-left: 10%;
  margin-top: auto;
  font-size: 2rem;
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  
}
.titulo_catalogo p{
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center;


}
.container7{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  font-family: sans-serif;
  overflow: hidden;
  transform:  skew(5deg);
}
.card3{
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.card3:not(:nth-child(5)){
  margin-right: 1em;
}
#imagen_catalogo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(0%);
}
.head3{
  color: black;
  background: #ff1eadbf;
  padding: 0.5em;
  transform:  rotate(-90deg);
  transform-origin: 0% 0%;
  transition:  all 0.5s ease-in-out;
  min-width:100% ;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}


.card3:hover{
  flex-grow: 10;
}
.card3:hover #imagen_catalogo {
filter:grayscale(0);
}

.card3:hover .head3{
  text-align: center;
  top: calc(100% -2em);
  color: white;
  background: #00000080;
  font-size: 0.5em;
  transform: rotate(0deg) skew(-5deg);
}


/* detalle */

.container8{

  background-color: #d9d8d8;
  width: 100%;
  height: 100%;
}
#enz_tajr{
  margin-top: 50px;
  margin-left: 2.8%;
  width: 100%;
  height: 100%;
}
.card7 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}

.card8 {
  width: 100%;
  height:820px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  border-radius: 10px; /* Hace que los bordes sean curvos */
}

.card7:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card8:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}

.card7 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card7 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card7 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
.card8 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card8 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card8 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

.productos {
  margin-top: 160px;
  text-align: center; /* Centra el contenido del contenedor */
  margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
}

.productos h6 {
  font-size: 2rem; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  
  
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Comienza con opacidad 0 */
    transform: translateY(-20px); /* Desplazamiento hacia arriba */
  }
  to {
    opacity: 1; /* Termina con opacidad 1 */
    transform: translateY(0); /* Sin desplazamiento */
  }
}




/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container9{
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr2{
  margin-top: 110px;
  margin-left: 5.8%;
  width: 100%;
  height: 100%;
}
.card11 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card11 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card11 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
/* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {
  position: relative; /* Establece la posición relativa */
}

.footer-container {
  position: relative; /* Establece la posición relativa */
}

/* Estilos para el botón "move-top" */
.move-top {
  position: absolute; 
  bottom: 30px; 
  right: 30px; 
  z-index: 999; 
  width: 40px;
  height: 40px;
  background-color: #28a745; 
  border-radius: 50%; 
  color: #ffffff; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  transition: background-color 0.3s ease; 
}

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container10{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr3{
 
  margin-top: 110px;
  margin-left: 29.8%;
  width: 100%;
  height: 100%;
}
.card12 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card12 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card12 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

/* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container11{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 90%;
}
#enz_tajr4{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
#enz_tajr5{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
.card13 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}
.card14 {
  width: 100%;
  height: 600px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}


.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card13 h4,.card14 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card13 p,.card14 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}


.form-demo {
  padding:1.5rem 0;
}
.form-demo h6, hr {
  font-size: 1.5rem;
  margin-bottom:1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  
}


}

@media screen and  (min-width: 576px) and (max-width: 767px) {
  
  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2%;
    margin-top: -15%;
    margin-bottom: 15%;
}

.box1 {
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(-30deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
   
}
.box1 span:nth-child(1) {
  transform: rotate(45deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}

.box1 span:nth-child(2) {
  transform: rotate(135deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}

.box1 span:nth-child(3) {
  transform: rotate(225deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}

.box1 span:nth-child(4) {
  transform: rotate(315deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}



  .Datos_contacto{
    width: 450px;
    margin-left: 100px;
  }
  .Datos_contacto .direccion{
    margin-bottom: -320px;
    margin-left: 0%;
    margin-top: 10%;
    
  }
  .Datos_contacto .telefono{

    margin-bottom: -35%;
    
    margin-left: 0;
    margin-right: 30px ;
    margin-top: -50px;
    
  }
  .Datos_contacto .correo{
    
    
    margin-right: 30px ;
    
    margin-top: 250px;
    
  }



  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.7rem;
    height: 100%;
    width: 70%; 
    color: #003a75;
    margin-left: 9%;
    
    
  }

  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 12%;
    font-size: 1rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 } 



  .whatsapp-link i {
    color: #003a75; /* Cambia el color del icono a blanco */
}

  
  
  .navbar-nav .nav-link {
    font-size: 1.5rem;
    color: #003a75;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    height: auto;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  font-size: 1.5rem;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

#mapa .flex-shrink-0 iframe {
  width: 300px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
  height: 600px;
}
#mapa .container .row .telefono2{
  width: 200px;
  margin-left: 1120px;
  font-size: 0.5rem;
  margin-top: 100px;
}
#mapa .row {
  display:block;
  margin-left: 130px;
  
}
#telefono {
  margin-left: -25%;
  margin-top: 0px;
}
#mapa .telefono2, #mapa .col-sm-3 {
  
  width: 300px;
  padding-left: 0px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
  font-size: 0.8rem;
  margin-left: 0px;
  
}
#mapa .container .row .telefono2{
  width: 200px;
  margin-left: 200px;
  font-size: 0.8rem;
}

  
  



  #oterra{
    margin-left: 5%;
  }

  .carousel-caption1 h1 {
    position: relative;
    top: 180px;
    left: 40%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #fffbfb;
  
    max-width: 100%;
    height: auto;
  }
  
 
  
  .carousel-caption1 p {
    max-width: 100%;
    height: auto;
    position: relative;
    top: 200px;
    left: 45%;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #f8f9fa;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    max-width: 100%;
    height: auto;
  }



  .flex-wrap {
    margin-left: -5%;
}


  #whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}
svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
}
circle {
    fill: #25d366;
}
path {
    fill: #fff;
}


  

  .titulo_blog2 {
    width: 90%; /* Ancho del div */
 
  margin-left: 5%;
  margin-top: 2%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1  rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

    
  
  .titulo_blog {
    width: 80%;
    height: auto;
    align-items: center;
    margin-left: 10%;
    background-image: url('../img/fondoprobiotico.png');
    
    background-position: center; /* Centrar la imagen */
    background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
}

  .blog {
    display: flex; /* Activar el modelo de caja flexible */
    align-items: center; /* Alinear verticalmente los elementos */
}

.blog > div {
    flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
}

.blog img {
    width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
    margin-left: 8%;
}
.texto1 {
  width: 40%; /* Ancho del div */
  max-width: 700px;
  margin-right: 5%;
  margin-top: 5%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

  
  




.titulo_blog h2{
  width: 70%;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  margin-top: 100px;
 
  font-size: 2rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: left; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #003a75; /* Color del texto */
  margin-left: 8%;
  
}

 

  #marcas .carousel-item img {
    margin-top: 10px;
    
    /* Ajusta el tamaño máximo de las imágenes en el carousel */
    max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
    align-items: center;
    margin-left: 40%;
    color: #003a75;
  }
  






  .container23{
    width: 80%;
    margin-top: 5%;
    align-items: center;
    margin-left: 13%;
  }
   .container23 img{
    width: 100%;
    height: auto;
    margin-top: 90px;
    margin-left: -80%;
    border-radius: 8px;

  }
  .contanier23 p{

margin-left: 200pc;

  } 







  /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#Contacto_qs p{
  width: 95%;
  margin-top: 50%;
  text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-left: -20%;

}
.imagen_quienes {
  width: 80%;
  height: auto;
  margin-top: -20%;
  
}
#Contacto_qs button.btn-outline-success {
  margin-top: 10px;
  margin-left: 20%;
  /* Cambiar el color del texto */
  color: #28a745;
  /* Cambiar el color de fondo */
  background-color: transparent;
  /* Agregar borde */
  border: 2px solid #28a745;
  /* Agregar padding */
  padding: 5px 10px;
  /* Añadir bordes redondeados */
  border-radius: 5px;
  /* Establecer el cursor a pointer */
  cursor: pointer;
}
.fondo-imagen {
  margin-top: -100px;
  background-image: url('../img/quienes_somos2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  height: 400px;
  position: relative;
  z-index: -1;

  /* Aplica un color de fondo con opacidad */
  background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */



  
  /* Ajustes para el div */
  height: 1000px; /* Altura del div */
  position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
  text-align: center; /* Centrar texto horizontalmente */
  color: #210075; /* Color del texto */
  margin-bottom: 500px;
}

.texto-superpuesto {
  position: relative;
  top: 850px; /* Comienza desde arriba de la pantalla */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar horizontalmente */
  font-size: 1.5rem; /* Tamaño del texto */
  font-weight: 400; /* Hacer el texto más visible */
  text-align: center;
  width: 100%;
  background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
  line-height: 1.2;
  padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
  
  
}





.contenedor11 {
  margin-left: 0%;
  display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 15%;
  margin-top: -15%;
  background-color: rgba(220, 216, 216, 0.8);
  height: 400px;
  width: 100%;
}

.mision {
  width:100%;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  
  
  margin-left: 50px;
  font-size: 1.2rem;
  text-align: justify;
  color: #003a75 ;

}

.mision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 50px; /* Espacio entre la imagen y otros elementos */
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}
.contenedor12 {
  margin-left: 0%;
  display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 25%;
  margin-top: -10%;
  
  height: 500px;
  width: 100%;
}

.vision {
  width: 1200px;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  
  
  margin-left: 72px;
  font-size: 1.2rem;
  text-align: justify;
  color: #003a75 ;


}

.vision_img img {
  width: 100%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 20px; /* Espacio entre la imagen y otros elementos */
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}





/* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */




  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
  }
 
  .contact-info {
    text-align: left;
    width: 1360PX;
    font-size: 16px; 
    margin: 0 auto;
    margin-left: 850px; 
    background-color: #28a745;
    
  }  
  
  .contact-info p {
     
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.8rem;
    color: #1f0980;
    margin-top: 0%;
    margin-left: -70%;
  }
 
  #footer .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar las columnas horizontalmente */
    text-align: center; /* Centrar el texto dentro de las columnas */
    margin-left: 2%;
    
  }
  #footer .row P {
    font-size: 0.7rem;
    
  }
  #footer .row h6 {
    font-size: 0.7rem;
    
  }
  #footer .row h7 {
    font-size: 0.7rem;
    
  }
 
  
 
  .row {
    margin-top: 0px; /* Márgen superior */
    align-content: center;
    align-items: center;
    margin-left: 10%;
    
    
  }
  #logo2{
    margin-bottom: -30px;
    width: 40%;
    max-width: 100%;
    height: auto;
  }
  
  .col-5 {
    padding: 0px; /* Añade relleno alrededor de cada columna */
    
  }
  #p {
    width: 100%; /* Ancho del contenedor */
    max-width: 800px; /* Ancho máximo */
    padding: 20px; /* Relleno interior */
    text-align: justify; /* Alineación del texto al centro */
    margin-top: 5%;
    margin-left: 50px;
  }
  .carousel-caption3 p {
    position: relative;
    top: -300px;
    left: 280px;
    font-size: 1.5vw;
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    height: auto;
}

.carousel-caption3 h2 {
  max-width: 100%;
  height: auto;
  position: relative;
  top: -280px;
  left: 400px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.5vw;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
  color: #ffffff;
  transform: scale(1.1);
  max-width: 100%;
  height: auto;
}

  h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem; /* Tamaño del texto */
    line-height: 1.5; /* Altura de línea */
    margin-bottom: 20px; /* Espaciado inferior */
    margin-left: -150px;
  }
  
  .btn {
    font-size: 18px; /* Tamaño del texto del botón */
    padding: 10px 20px;
    
    
  }

/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#tarjetas{
  margin-left: 10%;
  width: 100%;
}


.card {  
  margin-top: 10px;
  height: 300px; /* Establece una altura fija para todas las tarjetas */
  margin-left: -25px;
  width: 135px;
  font-size: 1rem;
  
  
}
.card-body h4{
  font-size: 1rem;
}

.card-body {
  height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
  display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
  flex-direction: column; /* Apila los elementos verticalmente */
  justify-content: center; /* Centra verticalmente los elementos */
  background: linear-gradient(to right, #8786868c, #ffffff);
  border: 1px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  font-size: 0.7rem;
  
}

.col-custom {
  transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
}

.col-custom:hover {
  transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
}

#titulop h3 {
  margin-top: 100px;
  font-size: 3.5rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: center; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #011d38; /* Color del texto */
}



#titulop p {
  font-size: 1.2rem; /* Tamaño de fuente del párrafo */
  line-height: 1.6; /* Altura de línea */
  text-align: center; /* Alineación del texto al centro */
  color: #011d38; /* Color del texto */
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Restaura la posición original */
  }
}
/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#titulop h3{
  margin-top: -5%;
 font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
}
#titulop p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
}
#titulo2 h5 {
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-top: 100%;
  
}

#titulo2 p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center; /* Alineación del texto al centro */
  margin-top: 1500px;
  
  
}

.aliados {
  position: relative;
  margin-bottom: 100px;
  margin-left: 8%;
  margin-right: 100px;
  margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
  width: 70px; /* Ancho de la tarjeta */
  height: 100px; /* Altura de la tarjeta */
  perspective: 1000px; /* Perspectiva para el efecto 3D */
  
}

.card-front, .card-back {
  position: relative;
  top: 100;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
}

.aliados:hover .card-front {
  transform: rotateY(180deg);
}

.aliados:hover .card-back {
  transform: rotateY(1deg);
}

.card-back p {
  margin-left: 20px;
  margin-top: -70px;
  width: 200px; /* Ancho de la caja del texto */
  font-size: 0.8rem; /* Tamaño de fuente */
  line-height: 1.6; /* Altura de línea */
  color: #000000; /* Color de texto */  
  text-align: justify; /* Alineación del texto */
  border-radius: 0%; /* Borde redondeado */
  background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
  padding: 20px; /* Espaciado interno */
  position: absolute; /* Posición absoluta */
  
  transform: translate(-50%, -50%); /* Centrar */
  opacity: 0; /* Hacer que el texto no sea visible inicialmente */
  color: #087f18;
}

.container {
  perspective: 100%; /* Establece la perspectiva en el contenedor principal */
}

.aliados {
  transform-style: preserve-3d; /* Conserva la transformación 3D */
  transition: transform 10s ease; /* Transición suave para la rotación */
}


.aliados:hover .card-back p {
  opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
}
.aliados img {
  margin-top: -50px;
  
  margin-left: 30px;
  max-width: 180%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
  max-height: 180%; /* Establece la altura máxima de la imagen al 100% del contenedor */
  width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  
}
.medio{
background-color: #003a75;
margin-top: 10px;
}
.medio p{
  color: #ffffff;
  margin-top: -5px;
  
  }
  .medio h6{
    color: #ffffff;
    margin-top: 50px;
    }
    .medio h7{
      color: #ffffff;
      margin-top: 10px;
      }
#copy{
  margin-top: -67px;
  color: #ffffff;
  height: 10px;
  text-align: center;
  margin-bottom: -100px;

  
}


/* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* porque elegirnos  */
.elegir {
  margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  width: 100%;
  height: 1800px; /* Ajusta la altura según sea necesario */
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2b7; /* Color de fondo gris claro */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
}

.iconos, .texto {
  margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
}

/* Estilos para los iconos */
.iconos {
  /* Estilos para los iconos */
}

/* Estilos para los textos */
.texto {
  /* Estilos para los textos */
}



/* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.titulop{
  
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: 100px;
 margin-top: -200px;
}


  @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
  @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");

  .container5{
   height: 500px ;
   width: 100%;
   margin-bottom:-3% ;
   margin-left: 0%;

  
   background-color: rgba(220, 216, 216, 0.8);
    
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.5em;
  }

  .item p {
    margin-top: -250px;
    margin-left: -80px;
    width: 160px;
    height: 300px;
    font-size: 1rem; 
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
}

 
  .item h3 {   
    width: 170px;
    height: 300px;    
    margin-left: -80px;
    margin-top: -90px;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    
    color: var(---color);
  }
  .item2 p {
    width: 160px;
    height: 300px;
    font-size: 1rem; /* Tamaño de fuente */
    margin-left: -70px;
    
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.3; 

    color: #555;
   
  }
  
  .item2 h3 {
    margin-left: -70px;
    margin-top: -80px;
    width: 170px;
    
    font-weight: 700;
    text-align: justify;
    color: var(---color);
    font-size: 1.2rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .item{
    margin-left: -25%;
    --color: #28a745;
    width: 220px;
    height: 350px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item2{
    margin-left: -25%;
    --color: #003a75;
    width: 220px;
    height: 350px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 20px 20px 20px 20px;
    filter:drop-shadow( 2px 0 2px #00000094);
    transition: filter .5s;
  }
  .item2::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 40px 40px 40px 40px;
    filter:drop-shadow( 5px 0 4px #00000094);
    transition: filter .5s;
  }

  .item:nth-child(2){
    ---color:#813085
  }

  .item:nth-child(3){
    ----color: #119630
  }
  .item2:nth-child(2){
    ---color:#813085
  }

  .item2:nth-child(3){
    ----color: #119630
  }
  .layer{
    
    height:  91%;
    margin: 20px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  .layer1{
    
    height:  92%;
    margin: 15px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47.6%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  span{
    width: 22%;
    height: 20%;
    color:#fff;
    background-color: var(--color);
    border-radius: 50%;
    display: grid;
    place-content: center;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      font-size: 14px;
      position: absolute;
      right: 10px;
      top: 80%;
  }
  

  .item:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item:hover .layer{
    left: 40px;
  }
  .item:hover .layer1{
    left: 40px;
  }
  .item2:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item2:hover .layer{
    left: 40px;
  }
  .item2:hover .layer1{
    left: 70px;
  }
  .item .layer1 i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item2 .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }




  

/* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
.titulo_catalogo h2 {
  margin-left: 0%;
  font-size: 35px; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 3rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  font-size: 3vw;
}
.titulo_catalogo p{
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  color: #003a75; /* Color del texto */
  text-align: center;


}
.container7{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  font-family: sans-serif;
  overflow: hidden;
  transform:  skew(5deg);
}
.card3{
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.card3:not(:nth-child(5)){
  margin-right: 1em;
}
#imagen_catalogo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(0%);
}
.head3{
  color: black;
  background: #ff1eadbf;
  padding: 0.5em;
  transform:  rotate(-90deg);
  transform-origin: 0% 0%;
  transition:  all 0.5s ease-in-out;
  min-width:100% ;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}


.card3:hover{
  flex-grow: 10;
}
.card3:hover #imagen_catalogo {
filter:grayscale(0);
}

.card3:hover .head3{
  text-align: center;
  top: calc(100% -2em);
  color: white;
  background: #00000080;
  font-size: 2em;
  transform: rotate(0deg) skew(-5deg);
}


/* detalle */

.container8{

  background-color: #d9d8d8;
  width: 100%;
  height: 100%;
}
#enz_tajr{
  margin-top: 50px;
  margin-left: 2.8%;
  width: 100%;
  height: 100%;
}
.card7 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}

.card8 {
  width: 100%;
  height:820px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  border-radius: 10px; /* Hace que los bordes sean curvos */
}

.card7:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card8:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}

.card7 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card7 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card7 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
.card8 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card8 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card8 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

.productos {
  margin-top: 160px;
  text-align: center; /* Centra el contenido del contenedor */
  margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
}

.productos h6 {
  font-size: 35px; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 3rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  font-size: 3vw;
  
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Comienza con opacidad 0 */
    transform: translateY(-20px); /* Desplazamiento hacia arriba */
  }
  to {
    opacity: 1; /* Termina con opacidad 1 */
    transform: translateY(0); /* Sin desplazamiento */
  }
}




/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container9{
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr2{
  margin-top: 110px;
  margin-left: 5.8%;
  width: 100%;
  height: 100%;
}
.card11 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card11 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card11 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
/* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {
  position: relative; /* Establece la posición relativa */
}

.footer-container {
  position: relative; /* Establece la posición relativa */
}

/* Estilos para el botón "move-top" */
.move-top {
  position: absolute; 
  bottom: 30px; 
  right: 30px; 
  z-index: 999; 
  width: 40px;
  height: 40px;
  background-color: #28a745; 
  border-radius: 50%; 
  color: #ffffff; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  transition: background-color 0.3s ease; 
}

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container10{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr3{
 
  margin-top: 110px;
  margin-left: 29.8%;
  width: 100%;
  height: 100%;
}
.card12 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card12 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card12 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

/* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container11{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 90%;
}
#enz_tajr4{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
#enz_tajr5{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
.card13 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}
.card14 {
  width: 100%;
  height: 600px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}


.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card13 h4,.card14 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card13 p,.card14 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}


.form-demo {
  padding:1.5rem 0;
}
.form-demo h6, hr {
  font-size: 1.5rem;
  margin-bottom:1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  
}


}

@media screen and (min-width: 768px) and (max-width: 1024px) {

 
  
  

  .navbar-nav .nav-link {
    font-size: 1.4rem; 
    color: #003a75;
    font-family: Arial, Helvetica, sans-serif; 
    
    max-width: 100%;
    height: auto;
  }
  .dropdown-menu {
    font-size: 1.3rem; 
     
    font-family: Arial, Helvetica, sans-serif; 
    color: #003a75; 
  }
  


  
  .empresas {
    margin-top: 10%;
    margin-bottom: 10%;
    width: 40px;
    margin-left: 47%;
}

.box1 {
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
    transition: transform 3s;
    margin-top: 50%;
    margin-bottom: 57%;
}

.box1 span img {
    width: 100px;
    height: 100px;
    border-radius: 100%; /* Circular */
    background-color: transparent;
}


.box1 span:nth-child(2) {
  transform: rotate(135deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}

.box1 span:nth-child(3) {
  transform: rotate(225deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}

.box1 span:nth-child(4) {
  transform: rotate(315deg) translate(-100px, -100px); /* Ajuste más preciso en la traslación */
}




.box1 span img {
    width: 100px; /* Tamaño ajustado para las imágenes */
    height: 100px;
    object-fit: cover;
    border-radius: 100%; /* Circular */
    background-color: transparent;
}

.btns {
    margin-top: 150px;
    display: flex;
    gap: 10px;
    margin-bottom: -10%;
}


  
  

  
  
  
  .Datos_contacto{
    width: 250px;
    margin-left: 50px;
  }
  .Datos_contacto .direccion{
    margin-bottom: -320px;
    margin-left: 0%;
    margin-top: 10%;
    
  }
  .Datos_contacto .telefono{

    margin-bottom: -35%;
    
    margin-left: 0;
    margin-right: 30px ;
    margin-top: -50px;
    
  }
  .Datos_contacto .correo{
    
    
    margin-right: 30px ;
    
    margin-top: 250px;
    
  }






 
 


 
 
 
 
 
  .carousel-item img {
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    
  }
  #imagen3 {
    
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    
  }
  
  
  
  .carousel-caption1 h1 {
    position: relative;
    top: -120px;
    left: -80%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #003a75;
  
    max-width: 100%;
    height: auto;
  }
  
  
  
  .carousel-caption1 p {
    max-width: 100%;
    height: auto;
    position: relative;
    top: -115px;
    left: -50%;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #003a75;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    max-width: 1000px;
    height: auto;
  }

  .carousel-caption2 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
    width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption2 h2 {
    position: relative;
    top: -190px;
    margin-left: -40%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color:#FFF; /* Color del texto */
    transform: scale(1.1);
    width: 100%;
    height: auto;
  }
  
  
  .carousel-caption2 p {
    position: relative;
    top: -170px;
    margin-left: -5%;
    font-size: 1.5vw; 
    font-family: Helvetica, sans-serif;
    text-align:justify;
    color:#FFFF; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    max-width: 35%;
    height: auto;
  }
  
  /* Estilo para el texto en el carrusel */
  .carousel-caption3 h2 {
    max-width: 100%;
    
    height: auto;
    position: relative;
    top: -540px;
    left: 380px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #003a75; /* Color del texto */
    transform: scale(1.1);
   
    height: auto;
  }
  
  /* Estilo para el texto de manera más moderna */
  .carousel-caption3 p {
    position: relative;
    top: -520px;
    left: 560px;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    max-width: 100%;
    height: auto;
  }

  
  
  .informacion{
    background-color: #087f18;
    height: 28px;
    width: 100%;
    
    
    
    
    
    
    }
  
  .informacion p{
    
  
    
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 1rem;
      height: 100%;
      width: 90%; 
      color: #003a75;
      margin-left: 10%;
      
      
    }

 


 

  

   
 
  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 12%;
    font-size: 1rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }  


  .whatsapp-link i {
    color: #003a75; /* Cambia el color del icono a blanco */
}

  
  



#mapa .flex-shrink-0 iframe {
  width: 400px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
  height: 500px;
}






  
  



  #oterra{
    margin-left: 5%;
  }





  .flex-wrap {
    margin-left: 3%;
}


  #whatsapp {
    position: fixed;
    bottom: 10px;
    right: 1%;
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}
svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
}
circle {
    fill: #25d366;
    width: 10px;
    
}
path {
    fill: #fff;
}


  

  .titulo_blog2 {
    width: 90%; /* Ancho del div */
 
  margin-left: 5%;
  margin-top: 2%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1  rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

    
  
  .titulo_blog {
    width: 80%;
    height: auto;
    align-items: center;
    margin-left: 10%;
    background-image: url('../img/fondoprobiotico.png');
    
    background-position: center; /* Centrar la imagen */
    background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
}

  .blog {
    display: flex; /* Activar el modelo de caja flexible */
    align-items: center; /* Alinear verticalmente los elementos */
}

.blog > div {
    flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
}

.blog img {
    width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
    margin-left: 8%;
}
.texto1 {
  width: 40%; /* Ancho del div */
  max-width: 700px;
  margin-right: 5%;
  margin-top: 5%;
  height: auto; /* Altura automática */
  /* Otros estilos */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #003a75;
  text-align: justify;
}

  
  




.titulo_blog h2{
  width: 70%;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  margin-top: 100px;
 
  font-size: 2rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: left; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #003a75; /* Color del texto */
  margin-left: 8%;
  
}

 

  #marcas .carousel-item img {
    margin-top: 10px;
    
    /* Ajusta el tamaño máximo de las imágenes en el carousel */
    max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
    align-items: center;
    margin-left: 40%;
    color: #003a75;
  }
  






  .container23{
    width: 80%;
    margin-top: 5%;
    align-items: center;
    margin-left: 13%;
  }
   .container23 img{
    width: 100%;
    height: auto;
    margin-top: 90px;
    margin-left: -50%;
    border-radius: 8px;
    

  }
  .contanier23 p{

margin-left: 200pc;

  } 







  /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


#Contacto_qs p{
  width: 95%;
  margin-top: 50%;
  text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-left: -20%;

}
#Contacto_qs .btn{
  width: 35%;
  margin-top: 0%;
 
    margin-left: 10%;

}
.imagen_quienes {
  width: 100%;
  height: auto;
  margin-top: 10%;
  
}
#Contacto_qs button.btn-outline-success {
  margin-top: 10px;
  margin-left: 20%;
  /* Cambiar el color del texto */
  color: #28a745;
  /* Cambiar el color de fondo */
  background-color: transparent;
  /* Agregar borde */
  border: 2px solid #28a745;
  /* Agregar padding */
  padding: 5px 10px;
  /* Añadir bordes redondeados */
  border-radius: 5px;
  /* Establecer el cursor a pointer */
  cursor: pointer;
}
.fondo-imagen {
  margin-top: -100px;
  background-image: url('../img/quienes_somos2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  height: 100px;
  position: relative;
  z-index: -1;

  /* Aplica un color de fondo con opacidad */
  background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
  background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */



  
  /* Ajustes para el div */
  height: 550px; /* Altura del div */
  position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
  text-align: center; /* Centrar texto horizontalmente */
  color: #210075; /* Color del texto */
  margin-bottom: 500px;
}

.texto-superpuesto {
  height: 200px;
  position: relative;
  top: 450px; /* Comienza desde arriba de la pantalla */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar horizontalmente */
  font-size: 1.2rem; /* Tamaño del texto */
  font-weight: 400; /* Hacer el texto más visible */
  text-align: center;
  width: 100%;
  background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
  line-height: 1.2;
  padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
  
  
}





.contenedor11 {
  margin-left: 0%;
  display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 15%;
  margin-top: -35%;
  background-color: rgba(220, 216, 216, 0.8);
  height: 300px;
  width: 100%;
}

.mision {
  width:100%;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  
  
  margin-left: 50px;
  font-size: 1.2rem;
  text-align: justify;
  color: #003a75 ;

}

.mision_img img {
  width: 85%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 50px; /* Espacio entre la imagen y otros elementos */
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}
.contenedor12 {
  margin-left: 0%;
  display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
  align-items: center; /* Centrar verticalmente el texto y la imagen */
  justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
  margin-bottom: 25%;
  margin-top: -10%;
  
  height: 400px;
  width: 100%;
}

.vision {
  width: 1200px;
  padding-right: 20px; /* Espacio entre el texto y la imagen */
  
  
  margin-left: 72px;
  font-size: 1.2rem;
  text-align: justify;
  color: #003a75 ;


}

.vision_img img {
  width: 100%; /* Tamaño de la imagen */
  height: auto; /* Mantener proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-left: 20px; /* Espacio entre la imagen y otros elementos */
  
  animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
}

/* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
@keyframes slideIn {
  from {
    opacity: 0; /* Comienza invisible */
    transform: translateX(-100px); /* Desplaza desde la izquierda */
  }
  to {
    opacity: 1; /* Completamente visible */
    transform: translateX(0); /* Sin desplazamiento */
  }
}





/* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */




  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
  }
 
  .contact-info {
    text-align: left;
    width: 1360PX;
    font-size: 16px; 
    margin: 0 auto;
    margin-left: 850px; 
    background-color: #28a745;
    
  }  
  
  .contact-info p {
     
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.8rem;
    color: #1f0980;
    margin-top: 0%;
    margin-left: -63%;
  }
 
 
  

 
  






  #footer .row {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar las columnas horizontalmente */
    text-align: center; /* Centrar el texto dentro de las columnas */
    margin-left: 6%;
    margin-top: 50%;
    
  }
  #footer .row P {
    font-size: 0.7rem;
    
  }
  #footer .row h6 {
    font-size: 0.7rem;
    
  }
  #footer .row h7 {
    font-size: 0.7rem;
    
  }
 
  
 
  .row {
    margin-top: 0px; /* Márgen superior */
    align-content: center;
    align-items: center;
    margin-left: 10%;
    
    
  }
  #logo2{
    margin-bottom: -30px;
    width: 40%;
    max-width: 100%;
    height: auto;
  }
  
  .col-5 {
    padding: 0px; /* Añade relleno alrededor de cada columna */
    
  }
  #p {
    width: 100%; /* Ancho del contenedor */
    max-width: 800px; /* Ancho máximo */
    padding: 20px; /* Relleno interior */
    text-align: justify; /* Alineación del texto al centro */
    margin-top: 5%;
    margin-left: 50px;
  }


  h2 {
    margin-top: 10%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem; /* Tamaño del texto */
    line-height: 1.6; /* Altura de línea */
    margin-bottom: 20px; /* Espaciado inferior */
    margin-left: 25%;
    
  }
  
  .btn {
    font-size: 0.8rem; /* Tamaño del texto del botón */
    margin-left: 55%;
    margin-bottom: 15%;
    width: 100%;
    height: 100%;
     
    
  }

  #contact-button{
    width: 10%;
  }
  

/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#tarjetas{
  
  width: 87%;
  margin-left: 8%;

}




.card {  
 
  
  height: 250px; /* Establece una altura fija para todas las tarjetas */
  
  width: 125px;
  font-size: 1rem;
  
  
  
  
}
.card-body h4{
  font-size: 0.7rem;
}

.card-body {
  height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
  display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
  flex-direction: column; /* Apila los elementos verticalmente */
  justify-content: center; /* Centra verticalmente los elementos */
  background: linear-gradient(to right, #8786868c, #ffffff);
  border: 1px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  font-size: 0.6rem;
  
}

.col-custom {
  transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
  margin: 1%;
}

.col-custom:hover {
  transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
}

#titulop h3 {
  margin-top: 100px;
  font-size: 3.5rem; /* Tamaño de fuente del título */
  font-weight: bold; /* Peso de la fuente en negrita */
  text-align: center; /* Alineación del texto al centro */
  margin-bottom: 20px; /* Margen inferior */
  color: #011d38; /* Color del texto */
}



#titulop p {
  font-size: 1.2rem; /* Tamaño de fuente del párrafo */
  line-height: 1.6; /* Altura de línea */
  text-align: center; /* Alineación del texto al centro */
  color: #011d38; /* Color del texto */
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Restaura la posición original */
  }
}
/* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#titulop h3{
  margin-top: -5%;
 font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
}
#titulop p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
}
#titulo2 h5 {
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: 15px;
  
}

#titulo2 p {
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #003a75; /* Color del texto */
  text-align: center; /* Alineación del texto al centro */
  
  
}

.aliados {
  position: relative;
  margin-bottom: 100px;
  margin-left: 5%;
  margin-right: 100px;
  margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
  width: 70px; /* Ancho de la tarjeta */
  height: 100px; /* Altura de la tarjeta */
  perspective: 1000px; /* Perspectiva para el efecto 3D */
  
}

.card-front, .card-back {
  position: relative;
  top: 100;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
}

.aliados:hover .card-front {
  transform: rotateY(180deg);
}

.aliados:hover .card-back {
  transform: rotateY(1deg);
}

.card-back p {
  margin-left: 20px;
  margin-top: -70px;
  width: 200px; /* Ancho de la caja del texto */
  font-size: 0.8rem; /* Tamaño de fuente */
  line-height: 1.6; /* Altura de línea */
  color: #000000; /* Color de texto */  
  text-align: justify; /* Alineación del texto */
  border-radius: 0%; /* Borde redondeado */
  background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
  padding: 20px; /* Espaciado interno */
  position: absolute; /* Posición absoluta */
  
  transform: translate(-50%, -50%); /* Centrar */
  opacity: 0; /* Hacer que el texto no sea visible inicialmente */
  color: #087f18;
}

.container {
  perspective: 100%; /* Establece la perspectiva en el contenedor principal */
}

.aliados {
  transform-style: preserve-3d; /* Conserva la transformación 3D */
  transition: transform 10s ease; /* Transición suave para la rotación */
}


.aliados:hover .card-back p {
  opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
}
.aliados img {
  margin-top: -50px;
  
  margin-left: 30px;
  max-width: 180%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
  max-height: 180%; /* Establece la altura máxima de la imagen al 100% del contenedor */
  width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
  
}
.medio{
background-color: #003a75;
margin-top: 10px;
}
.medio p{
  color: #ffffff;
  margin-top: -5px;
  
  }
  .medio h6{
    color: #ffffff;
    margin-top: 50px;
    }
    .medio h7{
      color: #ffffff;
      margin-top: 10px;
      }
#copy{
  margin-top: -69px;
  color: #ffffff;
  height: 10px;
  text-align: center;
  margin-bottom: -100px;
  font-size: 0.8rem;

  
}


/* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* porque elegirnos  */
.elegir {
  margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  width: 100%;
  height: 1800px; /* Ajusta la altura según sea necesario */
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2b7; /* Color de fondo gris claro */
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
}

.iconos, .texto {
  margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
}

/* Estilos para los iconos */
.iconos {
  /* Estilos para los iconos */
}

/* Estilos para los textos */
.texto {
  /* Estilos para los textos */
}



/* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.titulop{
  
  font-size: 2rem;
 font-weight: bold; /* Texto en negrita */
 color: #090909; /* Color del texto */
 text-transform: uppercase; /* Convierte el texto en mayúsculas */
 animation: fadeIn 1s ease; /* Animación de entrada suave */
 text-align: center;
 font-weight: bold; /* Negrita */
 color: #003a75; /* Color del texto */
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
 margin-bottom: 100px;
 margin-top: -200px;
}


  @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
  @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");

  .container5{
   height: 330px ;
   width: 100%;
   margin-bottom:-3% ;
   margin-left: 0%;

  
   background-color: rgba(220, 216, 216, 0.8);
    
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.5em;
  }

  .item p {
    margin-top: -250px;
    margin-left: -80px;
    width: 160px;
    height: 300px;
    font-size: 0.9rem; 
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.1; /* Ajusta este valor según desees aumentar el espacio entre líneas */
}

 
  .item h3 {   
    width: 130px;
    height: 300px;    
    margin-left: -80px;
    margin-top: -90px;
    font-weight: 700;
    font-size: 1rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    
    color: var(---color);
  }
  .item2 p {
    width: 130px;
    height: 300px;
    font-size: 0.9rem; /* Tamaño de fuente */
    margin-left: -70px;
    
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    line-height: 1.1; 

    color: #555;
   
  }
  
  .item2 h3 {
    margin-left: -70px;
    margin-top: -80px;
    width: 130px;
    
    font-weight: 700;
    text-align: justify;
    color: var(---color);
    font-size: 1rem;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .item{
    margin-left: -25%;
    --color: #28a745;
    width: 220px;
    height: 280px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item2{
    margin-left: -25%;
    --color: #003a75;
    width: 220px;
    height: 280px;
    background-color:var(--color) ;
    border-radius: 10px;
    padding: 10px 5px;
    box-shadow: #3c40434d 0px 1px 2px 0px;
    box-shadow: #3c404326 0px 1px 3px 1px;
    position: relative;
    cursor: pointer;

  }
  .item::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 20px 20px 20px 20px;
    filter:drop-shadow( 2px 0 2px #00000094);
    transition: filter .5s;
  }
  .item2::after{
    content: "";
    position: absolute;
    top:8px;
    left: 0;
    z-index: 2;
    height: 60%;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent transparent transparent var(--color);
    border-width: 40px 40px 40px 40px;
    filter:drop-shadow( 5px 0 4px #00000094);
    transition: filter .5s;
  }

  .item:nth-child(2){
    ---color:#813085
  }

  .item:nth-child(3){
    ----color: #119630
  }
  .item2:nth-child(2){
    ---color:#813085
  }

  .item2:nth-child(3){
    ----color: #119630
  }
  .layer{
    
    height:  91%;
    margin: 20px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  .layer1{
    
    height:  92%;
    margin: 15px;
    background-color: #f2f2f2;
    border: 1px solid #fff;
    border-radius: inherit;
    padding: 47.6%;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      position: relative;

      left:1px;
      transition: left 1s;
  }
  span{
    width: 22%;
    height: 20%;
    color:#fff;
    background-color: var(--color);
    border-radius: 50%;
    display: grid;
    place-content: center;
    box-shadow: 
    #00000012 0px 1px 2px,
      #00000012 0px 2px 4px,
      #00000012 0px 4px 8px,
      #00000012 0px 8px 16px,
      #00000012 0px 16px 32px,
      #00000012 0px 32px 64px;
      font-size: 14px;
      position: absolute;
      right: 10px;
      top: 80%;
  }
  

  .item:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item:hover .layer{
    left: 40px;
  }
  .item:hover .layer1{
    left: 40px;
  }
  .item2:hover:after{
    filter:drop-shadow(5px 0 4px #0000001a)


  }
  .item2:hover .layer{
    left: 40px;
  }
  .item2:hover .layer1{
    left: 70px;
  }
  .item .layer1 i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item2 .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }
  .item .layer i {
    font-size: 30px; /* Tamaño deseado para el icono */
  }




  

/* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
.titulo_catalogo h2 {
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 0%;
  font-size: 35px; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 3rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  font-size: 3vw;
}
.titulo_catalogo p{
  animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  color: #003a75; /* Color del texto */
  text-align: center;


}
.container7{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  font-family: sans-serif;
  overflow: hidden;
  transform:  skew(5deg);
}
.card3{
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.card3:not(:nth-child(5)){
  margin-right: 1em;
}
#imagen_catalogo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(0%);
}
.head3{
  color: black;
  background: #ff1eadbf;
  padding: 0.5em;
  transform:  rotate(-90deg);
  transform-origin: 0% 0%;
  transition:  all 0.5s ease-in-out;
  min-width:100% ;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}


.card3:hover{
  flex-grow: 10;
}
.card3:hover #imagen_catalogo {
filter:grayscale(0);
}

.card3:hover .head3{
  text-align: center;
  top: calc(100% -2em);
  color: white;
  background: #00000080;
  font-size: 2em;
  transform: rotate(0deg) skew(-5deg);
}


/* detalle */

.container8{

  background-color: #d9d8d8;
  width: 100%;
  height: 100%;
}
#enz_tajr{
  margin-top: 50px;
  margin-left: 2.8%;
  width: 100%;
  height: 100%;
}
.card7 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}

.card8 {
  width: 100%;
  height:820px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  border-radius: 10px; /* Hace que los bordes sean curvos */
}

.card7:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card8:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}

.card7 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card7 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card7 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
.card8 h5{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}
.card8 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card8 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

.productos {
  margin-top: 160px;
  text-align: center; /* Centra el contenido del contenedor */
  margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
}

.productos h6 {
  font-size: 35px; /* Tamaño de fuente grande */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /*Convierte el texto en mayúsculas */
  animation: fadeIn 3s ease; /* Animación de entrada suave */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 3rem; /* Tamaño de fuente inicial */
  font-weight: bold; /* Negrita */
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */

  /* Tamaño de fuente responsivo */
  font-size: 3vw;
  
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Comienza con opacidad 0 */
    transform: translateY(-20px); /* Desplazamiento hacia arriba */
  }
  to {
    opacity: 1; /* Termina con opacidad 1 */
    transform: translateY(0); /* Sin desplazamiento */
  }
}




/* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container9{
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr2{
  margin-top: 110px;
  margin-left: 5.8%;
  width: 100%;
  height: 100%;
}
.card11 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card11:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card11 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card11 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}
/* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {
  position: relative; /* Establece la posición relativa */
}

.footer-container {
  position: relative; /* Establece la posición relativa */
}

/* Estilos para el botón "move-top" */
.move-top {
  position: absolute; 
  bottom: 30px; 
  right: 30px; 
  z-index: 999; 
  width: 40px;
  height: 40px;
  background-color: #28a745; 
  border-radius: 50%; 
  color: #ffffff; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  transition: background-color 0.3s ease; 
}

/* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container10{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 70%;
}
#enz_tajr3{
 
  margin-top: 110px;
  margin-left: 29.8%;
  width: 100%;
  height: 100%;
}
.card12 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}



.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card12:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card12 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card12 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}

/* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.container11{
  margin: center;
  background-image: url('/img/descarga.png');
  background-color: #d9d8d8;
  width: 100%;
  height: 90%;
}
#enz_tajr4{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
#enz_tajr5{
 
  margin-top: 110px;
  margin-left: 7%;
  width: 100%;
  height: 100%;
}
.card13 {
  width: 100%;
  height: 400px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}
.card14 {
  width: 100%;
  height: 600px;
  border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
  border-radius: 10px; /* Hace que los bordes sean curvos */
  background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
  transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
}


.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}
.card13:hover,.card14:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
}


.card13 h4,.card14 h4{
  margin-top: 15px; ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}
.card13 p,.card14 p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
}


.form-demo {
  padding:1.5rem 0;
}
.form-demo h6, hr {
  font-size: 1.5rem;
  margin-bottom:1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  
}


.compañia{
  margin-top: 10%;
  margin-bottom: 10%;
  background-color: #d9d8d8;
  width: 95%;
  margin-left: 2.7%;
}

.compañia h2{
  margin-left: -70%;
  margin-top: -2s0px;
  font-size: 1rem;
  
 

}


}

@media (min-width: 1150px) and (max-width:1359px){

  .medio{
    background-color: #003a75;
    margin-top: 15%;
    
    }
    .medio p{
      margin-left: -10%;
      color: #ffffff;
      margin-top: -10px;
      font-size: 0.7rem;
      
      
      }
      .medio h6{
        margin-left: -10%;
        color: #ffffff;
        margin-top: 30px;
        font-size: 0.8rem;
        
        }
  
  .nuestros{
    margin-left: -20px;
    
    
    
  }
  
  .datos{
    width: 50%;
    margin-left: -200px;
    margin-top: -20px;
    margin-right: 2%;
  }
  .registrada{
    width: 30%;
    margin-top: -20px;
    margin-left: -40px;
    margin-right: 2%;
    
  }
  
  
  
  
  
  .compañia{
    margin-top: 10%;
    background-color: #d9d8d8;
    width: 95%;
    margin-left: 2.7%;
  }

  .compañia h2{
    margin-left: -30%;
    margin-top: 30px;
    font-size: 1rem;
    
   

  }
  
  .Datos_contacto{
    width: 450px;
    margin-left: 100px;
  }
  .Datos_contacto .direccion{
    margin-bottom: -320px;
    margin-left: 0%;
    margin-top: 10%;
    
  }
  .Datos_contacto .telefono{

    margin-bottom: -35%;
    
    margin-left: 0;
    margin-right: 30px ;
    margin-top: -50px;
    
  }
  .Datos_contacto .correo{
    
    
    margin-right: 30px ;
    
    margin-top: 250px;
    
  }






  .dropdown-menu {
    font-size: 1.4rem; 
     
    font-family: Arial, Helvetica, sans-serif; 
    color: #003a75; 
  }
  

  .navbar-nav .nav-link {
    font-size: 1.6rem; 
    color: #003a75;
    font-family: Arial, Helvetica, sans-serif; 
    
    max-width: 100%;
    height: auto;
  }
  
  .navbar-brand {
    font-size: 1.6rem; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #003a75; 
  }  
 
 
 
  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8%;
    margin-top: -5%;
    width: 85%;
  }
  
  .box1 {
    position: relative;
    width: 220px;
    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
}

.box1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(390px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.box1 span img {
    width: 150px; /* Asegúrate de que la imagen sea cuadrada */
    height: 150px; /* Igual que el ancho */
    object-fit: cover;
    border-radius: 100%; /* Hace que la imagen sea circular */
   
    background-color: transparent;
}
  
  .btns {
    margin-top: 250px;
    display: flex;
    gap: 30px;
    margin-bottom: -10%;
    
  }
  
  .btns .btn1 {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #011d38;
    border-radius: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .btns .btn1:active {
    background-color: #011d38;
  }
  
  .btns .btn1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #011d38;
    border-right: 3px solid #011d38;
    transform: rotate(45deg) translate(-2.5px, 2.5px);
  }
  
  .btns .btn1.prev::before {
    transform: rotate(225deg) translate(-2.5px, 2.5px);
  }
  
  .btns .btn1.next::before {
    transform: rotate(45deg) translate(-2.5px, 2.5px);
  }


 
 
 
 
 
  .carousel-item img {
    width: 100%; 
    height: 600px; 
    object-fit: cover; 
    
  }
  #imagen3 {
    
    width: 100%; 
    height: 600px; 
    object-fit: cover; 
    
  }
  
  
  
  .carousel-caption1 h1 {
    position: relative;
    top: -150px;
    left: -80%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #003a75;
  
    max-width: 100%;
    height: auto;
  }
  
  
  
  .carousel-caption1 p {
    max-width: 100%;
    height: auto;
    position: relative;
    top: -150px;
    left: -55%;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #003a75;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    max-width: 1000px;
    height: auto;
  }

  .carousel-caption2 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
    width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption2 h2 {
    position: relative;
    top: -130px;
    margin-left: -33%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color:#FFF; /* Color del texto */
    transform: scale(1.1);
    width: 100%;
    height: auto;
  }
  
  
  .carousel-caption2 p {
    position: relative;
    top: -150px;
    margin-left: 0%;
    font-size: 1.5vw; 
    font-family: Helvetica, sans-serif;
    text-align:justify;
    color:#FFFF; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    max-width: 35%;
    height: auto;
  }
  
  /* Estilo para el texto en el carrusel */
  .carousel-caption3 h2 {
    max-width: 100%;
    
    height: auto;
    position: relative;
    top: -530px;
    left: 580px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #003a75; /* Color del texto */
    transform: scale(1.1);
   
    height: auto;
  }
  
  /* Estilo para el texto de manera más moderna */
  .carousel-caption3 p {
    position: relative;
    top: -550px;
    left: 840px;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    max-width: 100%;
    height: auto;
  }

  
  
  .informacion{
    background-color: #087f18;
    height: 30px;
    width: 100%;
    
    
    
    
    
    
    }
  
  .informacion p{
    
  
    
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 1rem;
      height: 100%;
      width: 79%; 
      color: #003a75;
      margin-left: 11%;
      
      
    }
  
  .t_datos h2 {
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 7%;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 22%;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }  
 

  .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
  }
  
  
    
    .whatsapp-link i {
      color: #003a75; /* Cambia el color del icono a blanco */
  }
  
    #mapa .flex-shrink-0 iframe {
      width: 500px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
    }
  
    #mapa .flex-grow-1 {
      margin-left: 0%; /* Reducir el margen izquierdo */
    }
  
  
    #telefono1{
      width: 1400px;
      margin-left: 20px;
    }
  
    #mapa .container .row .telefono1,  
    #mapa .container .row .col-sm-3 {
      width: 1400px;
      margin-left: 0px;
    }
  
    /* Ajustes adicionales para alinear el contenido horizontalmente */
    #mapa .row {
      display: flex;
      margin-left: 10%;
      
     
      
    }
  
    #mapa .col-sm-1, #mapa .col-sm-3 {
      
      width: 1300px;
      padding-left: 30px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
    }
  
    #mapa .telefono1 h8, #mapa .col-sm-3 h8 {
      display: block;
      margin-bottom: 15px; /* Reducir el margen inferior de los encabezados */
    }
  
    #mapa .col-sm-1 p, #mapa .col-sm-3 p {
      margin-bottom: 5px; /* Reducir el margen inferior de los párrafos */
    }
  
  
  
  
    
    .flex-wrap {
      margin-left: 5%;
  }
  #oterra{
    margin-left: 25%;
  }
  
  
    #whatsapp {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
  }
  svg {
      width: 80px;
      height: 80px;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
      cursor: pointer; /* Cambia el cursor para indicar que es clicable */
  }
  circle {
      fill: #25d366;
  }
  path {
      fill: #fff;
  }
  
  
    
  
    .titulo_blog2 {
      width: 90%; /* Ancho del div */
   
    margin-left: 5%;
    margin-top: 2%;
    height: auto; /* Altura automática */
    /* Otros estilos */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #003a75;
    text-align: justify;
  }
  
      
    
    .titulo_blog {
      width: 80%;
      height: auto;
      align-items: center;
      margin-left: 10%;
      background-image: url('../img/fondoprobiotico.png');
      
      background-position: center; /* Centrar la imagen */
      background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
    background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
  }
  
    .blog {
      display: flex; /* Activar el modelo de caja flexible */
      align-items: center; /* Alinear verticalmente los elementos */
  }
  
  .blog > div {
      flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
  }
  
  .blog img {
      width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
      margin-left: 8%;
  }
  .texto1 {
    width: 40%; /* Ancho del div */
    max-width: 700px;
    margin-right: 5%;
    margin-top: 5%;
    height: auto; /* Altura automática */
    /* Otros estilos */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #003a75;
    text-align: justify;
  }
  
    
    
  
  
  
  
  .titulo_blog h2{
    width: 70%;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    margin-top: 100px;
    margin-left: 2%;
   
    font-size: 3.5rem; /* Tamaño de fuente del título */
    font-weight: bold; /* Peso de la fuente en negrita */
    text-align: center; /* Alineación del texto al centro */
    margin-bottom: 20px; /* Margen inferior */
    color: #003a75; /* Color del texto */
    
  }
  
   
  
    #marcas .carousel-item img {
      margin-top: 10px;
      
      /* Ajusta el tamaño máximo de las imágenes en el carousel */
      max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
      height: auto; /* Mantiene la proporción de aspecto */
      align-items: center;
      margin-left: 40%;
      color: #003a75;
    }
    
  
  
  
  
  
  
    .container23{
      width: 80%;
      margin-top: 5%;
      align-items: center;
      margin-left: 13%;
    }
     .container23 img{
      width: 80%;
      height: 280px;
      margin-top: 70px;
      margin-left: -320px;
      border-radius: 8px;
  
    }
    .contanier23 p{
  
  margin-left: 200pc;
  
    } 
  
  
  
  
  
  
  
    /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  #Contacto_qs p{
    width: 100%;
    margin-top: 20%;
    text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.5rem;
      margin-left: -10%;
  
  }
  .imagen_quienes {
    width: 90%;
    height: auto;
    margin-top: 0px;
    
  }
  #Contacto_qs button.btn-outline-success {
    margin-top: 10px;
    margin-left: 42px;
    /* Cambiar el color del texto */
    color: #28a745;
    /* Cambiar el color de fondo */
    background-color: transparent;
    /* Agregar borde */
    border: 2px solid #28a745;
    /* Agregar padding */
    padding: 5px 10px;
    /* Añadir bordes redondeados */
    border-radius: 5px;
    /* Establecer el cursor a pointer */
    cursor: pointer;
  }
  .fondo-imagen {
    margin-top: -80px;
    background-image: url('../img/quienes_somos2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    height: 400px;
    position: relative;
    z-index: -1;
  
    /* Aplica un color de fondo con opacidad */
    background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
    background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
  
  
  
    
    /* Ajustes para el div */
    height: 1000px; /* Altura del div */
    position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
    text-align: center; /* Centrar texto horizontalmente */
    color: #210075; /* Color del texto */
    margin-bottom: 500px;
  }
  
  .texto-superpuesto {
    position: relative;
    top: 850px; /* Comienza desde arriba de la pantalla */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Centrar horizontalmente */
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: 400; /* Hacer el texto más visible */
    text-align: center;
    width: 100%;
    background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
    line-height: 1.2;
    padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
    
    
  }
  
  
  
  
  
  .contenedor11 {
    margin-left: 0;
    display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
    align-items: center; /* Centrar verticalmente el texto y la imagen */
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    margin-bottom: 15%;
    margin-top: -15%;
    background-color: rgba(220, 216, 216, 0.8);
    height: 500px;
    width: 100%;
  }
  
  .mision {
    width: 600PX;
    padding-right: 20px; /* Espacio entre el texto y la imagen */
    
    
    margin-left: 50px;
    font-size: 1.5rem;
    text-align: justify;
    color: #003a75 ;
  
  }
  
  .mision_img img {
    width: 600px; /* Tamaño de la imagen */
    height: auto; /* Mantener proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    margin-left: 0px; /* Espacio entre la imagen y otros elementos */
    
    animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
  }
  
  /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
  @keyframes slideIn {
    from {
      opacity: 0; /* Comienza invisible */
      transform: translateX(-100px); /* Desplaza desde la izquierda */
    }
    to {
      opacity: 1; /* Completamente visible */
      transform: translateX(0); /* Sin desplazamiento */
    }
  }
  .contenedor12 {
    margin-left: 0PX;
    display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
    align-items: center; /* Centrar verticalmente el texto y la imagen */
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    margin-bottom: 25%;
    margin-top: -10%;
    
    height: 500px;
    width: 100%;
  }
  
  .vision {
    width: 600PX;
    padding-right: 20px; /* Espacio entre el texto y la imagen */
    
    
    margin-left: 72px;
    font-size: 1.5rem;
    text-align: justify;
    color: #003a75 ;
  
  
  }
  
  .vision_img img {
    width: 600px; /* Tamaño de la imagen */
    height: auto; /* Mantener proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    margin-left: 10px; /* Espacio entre la imagen y otros elementos */
    
    animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
  }
  
  /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
  @keyframes slideIn {
    from {
      opacity: 0; /* Comienza invisible */
      transform: translateX(-100px); /* Desplaza desde la izquierda */
    }
    to {
      opacity: 1; /* Completamente visible */
      transform: translateX(0); /* Sin desplazamiento */
    }
  }
  
  
  
  
  
  /* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  
  
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffff;
    }
   
    .contact-info {
      text-align: left;
      width: 1360PX;
      font-size: 16px; 
      margin: 0 auto;
      margin-left: 850px; 
      background-color: #28a745;
      
    }  
    
    .contact-info p {
       
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 1.4rem;
      color: #1f0980;
      margin-top: -0.5%;
      margin-left: -30%;
    }
   
  
   
    
   
    .row {
      margin-top: 0px; /* Márgen superior */
      align-content: center;
      align-items: center;
      margin-left: 10%;
      
      
    }
    #logo2{
      margin-bottom: 0px;
      width: 400px;
      max-width: 100%;
      height: auto;
    }
    
    .col-5 {
      padding: 0px; /* Añade relleno alrededor de cada columna */
      
    }
    #p {
      width: 100%; /* Ancho del contenedor */
      max-width: 800px; /* Ancho máximo */
      padding: 20px; /* Relleno interior */
      text-align: justify; /* Alineación del texto al centro */
      margin-top: 120px;
      margin-left: 50px;
    }
    
    h2 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.5rem; /* Tamaño del texto */
      line-height: 1.5; /* Altura de línea */
      margin-bottom: 20px; /* Espaciado inferior */
      margin-left: -16%;
    }
    
    .btn {
      font-size: 18px;
      margin-left: 40%;
      padding: 10px 20px;
      
      
    }
  
    #texto{
      width: 88%;
    }
  
  /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  #tarjetas{
    margin-left: 8%;
    width: 92%;
    
  }
  #tarjetas h4{
    font-size: 1rem;
    
  }
  #tarjetas p{
    font-size: 0.9rem;
    
  }
  .card {  
    margin-top: 20px;
    height: 350px; /* Establece una altura fija para todas las tarjetas */
    margin-left: 40px;
    width: 100%;
    
  }
  .card-body {
    height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
    display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: center; /* Centra verticalmente los elementos */
    background: linear-gradient(to right, #8786868c, #ffffff);
    border: 2px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  }
  
  .col-custom {
    transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
  }
  
  .col-custom:hover {
    transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
  }
  
  #titulop h3 {
    margin-top: 100px;
    font-size: 3.5rem; /* Tamaño de fuente del título */
    font-weight: bold; /* Peso de la fuente en negrita */
    text-align: center; /* Alineación del texto al centro */
    margin-bottom: 20px; /* Margen inferior */
    color: #011d38; /* Color del texto */
  }
  
  #titulop p {
    font-size: 1.2rem; /* Tamaño de fuente del párrafo */
    line-height: 1.6; /* Altura de línea */
    text-align: center; /* Alineación del texto al centro */
    color: #011d38; /* Color del texto */
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
    }
    to {
      opacity: 1;
      transform: translateX(0); /* Restaura la posición original */
    }
  }
  /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  #titulop h3{
   font-size: 3.5rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  }
  #titulop p {
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
  }
  #titulo2 h5 {
    font-size: 3.5rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
   margin-bottom: 15px;
    
  }
  
  #titulo2 p {
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
    text-align: center; /* Alineación del texto al centro */
    
    
  }
  
  .aliados {
    position: relative;
    margin-bottom: 100px;
    margin-left: 200px;
    margin-right: 100px;
    margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
    width: 200px; /* Ancho de la tarjeta */
    height: 200px; /* Altura de la tarjeta */
    perspective: 1000px; /* Perspectiva para el efecto 3D */
    
  }
  
  .card-front, .card-back {
    position: relative;
    top: 100;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
  }
  
  .aliados:hover .card-front {
    transform: rotateY(180deg);
  }
  
  .aliados:hover .card-back {
    transform: rotateY(1deg);
  }
  
  .card-back p {
    margin-left: 20px;
    margin-top: -110px;
    width: 120%; /* Ancho de la caja del texto */
    font-size: 15px; /* Tamaño de fuente */
    line-height: 1.6; /* Altura de línea */
    color: #000000; /* Color de texto */  
    text-align: justify; /* Alineación del texto */
    border-radius: 0%; /* Borde redondeado */
    background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
    padding: 20px; /* Espaciado interno */
    position: absolute; /* Posición absoluta */
    
    transform: translate(-50%, -50%); /* Centrar */
    opacity: 0; /* Hacer que el texto no sea visible inicialmente */
    color: #087f18;
  }
  
  .container {
    perspective: 100px; /* Establece la perspectiva en el contenedor principal */
  }
  
  .aliados {
    transform-style: preserve-3d; /* Conserva la transformación 3D */
    transition: transform 10s ease; /* Transición suave para la rotación */
  }
  
  
  .aliados:hover .card-back p {
    opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
  }
  .aliados img {
    margin-top: -50px;
    
    margin-left: 30px;
    max-width: 130%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
    max-height: 130%; /* Establece la altura máxima de la imagen al 100% del contenedor */
    width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
    height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
    
  }
  

.nuestro{
  width: 50%;
  
  
}

.datos{
  width: 50%;
  margin-left: -100px;
  margin-top: -20px;
  margin-right: 2%;
}
.registrada{
  width: 30%;
  margin-top: -20px;
  margin-left: 40px;
  margin-right: 2%;
  
}

.medio h7{
margin-left: 25%;
color: #ffffff;
margin-top: -10px;
        
        }
  #copy{
    margin-top: -72px;
    color: #ffffff;
    height: 10px;
    text-align: center;
    margin-bottom: -100px;
    font-size: 0.8rem;
  }
  
  /* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  /* porque elegirnos  */
  .elegir {
    margin-top: -100px;
    margin-bottom: -100px;
    position: relative;
    width: 100%;
    height: 1800px; /* Ajusta la altura según sea necesario */
    overflow: hidden;
  }
  
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2b7; /* Color de fondo gris claro */
    z-index: -1;
  }
  
  .content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
  }
  
  .iconos, .texto {
    margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
  }
  
  /* Estilos para los iconos */
  .iconos {
    /* Estilos para los iconos */
  }
  
  /* Estilos para los textos */
  .texto {
    /* Estilos para los textos */
  }
  
  
  
  /* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  .titulop{
    
    font-size: 3rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
   margin-bottom: 100px;
   margin-top: -300px;
  }
  
  
    @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
    @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");
  
    .container5{
     height: 500px ;
     width: 95%;
     margin-bottom:-3% ;
     margin-left: 3%;
  
    
     background-color: rgba(220, 216, 216, 0.8);
      
      display: flex;
      gap: 50px;
      align-items: center;
      justify-content: center;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5em;
    }
  
    .item p {
      margin-top: -200px;
      margin-left: -100px;
      width: 200px;
      height: 300px;
      font-size: 1rem; 
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      color: #555;
      line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
  }
  
   
    .item h3 {   
      width: 180px;
      height: 300px;    
      margin-left: -110px;
      margin-top: -120px;
      font-weight: 700;
      font-size: 1.5rem;
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      
      color: var(---color);
    }
    .item2 p {
      width: 180px;
      height: 300px;
      font-size: 1rem; /* Tamaño de fuente */
      margin-left: -100px;
      
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      color: #555;
      line-height: 1.3; 
  
      color: #555;
     
    }
    
    .item2 h3 {
      margin-left: -120px;
      margin-top: -120px;
      width: 200px;
      
      font-weight: 700;
      text-align: justify;
      color: var(---color);
      font-size: 1.5rem;
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .item{
      margin-left: -23%;
      --color: #28a745;
      width: 280px;
      height: 350px;
      background-color:var(--color) ;
      border-radius: 10px;
      padding: 10px 5px;
      box-shadow: #3c40434d 0px 1px 2px 0px;
      box-shadow: #3c404326 0px 1px 3px 1px;
      position: relative;
      cursor: pointer;
  
    }
    .item2{
      margin-left: -23%;
      --color: #003a75;
      width: 280px;
      height: 350px;
      background-color:var(--color) ;
      border-radius: 10px;
      padding: 10px 5px;
      box-shadow: #3c40434d 0px 1px 2px 0px;
      box-shadow: #3c404326 0px 1px 3px 1px;
      position: relative;
      cursor: pointer;
  
    }
    .item::after{
      content: "";
      position: absolute;
      top:8px;
      left: 0;
      z-index: 2;
      height: 60%;
      box-sizing: border-box;
      border-style: solid;
      border-color: transparent transparent transparent var(--color);
      border-width: 40px 40px 40px 40px;
      filter:drop-shadow( 5px 0 4px #00000094);
      transition: filter .5s;
    }
    .item2::after{
      content: "";
      position: absolute;
      top:8px;
      left: 0;
      z-index: 2;
      height: 60%;
      box-sizing: border-box;
      border-style: solid;
      border-color: transparent transparent transparent var(--color);
      border-width: 40px 40px 40px 40px;
      filter:drop-shadow( 5px 0 4px #00000094);
      transition: filter .5s;
    }
  
    .item:nth-child(2){
      ---color:#813085
    }
  
    .item:nth-child(3){
      ----color: #119630
    }
    .item2:nth-child(2){
      ---color:#813085
    }
  
    .item2:nth-child(3){
      ----color: #119630
    }
    .layer{
      
      height:  91%;
      margin: 20px;
      background-color: #f2f2f2;
      border: 1px solid #fff;
      border-radius: inherit;
      padding: 47%;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        position: relative;
  
        left:1px;
        transition: left 1s;
    }
    .layer1{
      
      height:  92%;
      margin: 15px;
      background-color: #f2f2f2;
      border: 1px solid #fff;
      border-radius: inherit;
      padding: 47.6%;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        position: relative;
  
        left:1px;
        transition: left 1s;
    }
    span{
      width: 22%;
      height: 20%;
      color:#fff;
      background-color: var(--color);
      border-radius: 20%;
      display: grid;
      place-content: center;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        font-size: 14px;
        position: absolute;
        right: 15px;
        
        top: 78%;
    }
   
    
  
    .item:hover:after{
      filter:drop-shadow(5px 0 4px #0000001a)
  
  
    }
    .item:hover .layer{
      left: 40px;
    }
    .item:hover .layer1{
      left: 40px;
    }
    .item2:hover:after{
      filter:drop-shadow(5px 0 4px #0000001a)
  
  
    }
    .item2:hover .layer{
      left: 40px;
    }
    .item2:hover .layer1{
      left: 70px;
    }
    .item .layer1 i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
    .item2 .layer i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
    .item .layer i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
  
  
  
  
    
  
  /* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
  .titulo_catalogo h2 {
    margin-left: 0%;
    font-size: 35px; /* Tamaño de fuente grande */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /*Convierte el texto en mayúsculas */
    animation: fadeIn 3s ease; /* Animación de entrada suave */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3rem; /* Tamaño de fuente inicial */
    font-weight: bold; /* Negrita */
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  
    /* Tamaño de fuente responsivo */
    font-size: 3vw;
  }
  .titulo_catalogo p{
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
    text-align: center;
  
  
  }
  .container7{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    font-family: sans-serif;
    overflow: hidden;
    transform:  skew(5deg);
  }
  .card3{
    flex: 1;
    transition: all 1s ease-in-out;
    height: 75vmin;
    position: relative;
  }
  .card3:not(:nth-child(5)){
    margin-right: 1em;
  }
  #imagen_catalogo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s ease-in-out;
    filter: grayscale(0%);
  }
  .head3{
    color: black;
    background: #ff1eadbf;
    padding: 0.5em;
    transform:  rotate(-90deg);
    transform-origin: 0% 0%;
    transition:  all 0.5s ease-in-out;
    min-width:100% ;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;
    white-space: nowrap;
  }
  
  
  .card3:hover{
    flex-grow: 10;
  }
  .card3:hover #imagen_catalogo {
  filter:grayscale(0);
  }
  
  .card3:hover .head3{
    text-align: center;
    top: calc(100% -2em);
    color: white;
    background: #00000080;
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
  }
  
  
  /* detalle */
  
  .container8{
  
    background-color: #d9d8d8;
    width: 100%;
    height: 100%;
  }
  #enz_tajr{
    margin-top: 50px;
    margin-left: 2.8%;
    width: 100%;
    height: 100%;
  }
  .card7 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  .card8 {
    width: 100%;
    height:820px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    border-radius: 10px; /* Hace que los bordes sean curvos */
  }
  
  .card7:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card8:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  .card7 h5{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
  }
  .card7 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card7 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  .card8 h5{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
  }
  .card8 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card8 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  .productos {
    margin-top: 160px;
    text-align: center; /* Centra el contenido del contenedor */
    margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
  }
  
  .productos h6 {
    font-size: 35px; /* Tamaño de fuente grande */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /*Convierte el texto en mayúsculas */
    animation: fadeIn 3s ease; /* Animación de entrada suave */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3rem; /* Tamaño de fuente inicial */
    font-weight: bold; /* Negrita */
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  
    /* Tamaño de fuente responsivo */
    font-size: 3vw;
    
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0; /* Comienza con opacidad 0 */
      transform: translateY(-20px); /* Desplazamiento hacia arriba */
    }
    to {
      opacity: 1; /* Termina con opacidad 1 */
      transform: translateY(0); /* Sin desplazamiento */
    }
  }
  
  
  
  
  /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  /* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container9{
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 70%;
  }
  #enz_tajr2{
    margin-top: 110px;
    margin-left: 5.8%;
    width: 100%;
    height: 100%;
  }
  .card11 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  
  .card11:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card11:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card11 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card11 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  /* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
  
  /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  .footer {
    position: relative; /* Establece la posición relativa */
    margin-left: -50%;
    
  }
  
  
  .footer-container {
    position: relative; /* Establece la posición relativa */
    margin-left: -50%;
  }
  .move-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 40px;
    height: 40px;
    background-color: #28a745;
    border-radius: 50%;
    color: #ffffff;
    display: none; /* Ocultar el botón por defecto */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .move-top.show {
    display: flex; /* Mostrar el botón cuando se agrega la clase 'show' */
  }
  
  .move-top:hover {
    background-color: #218838;
  }
  
  
  /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container10{
    margin: center;
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 70%;
  }
  #enz_tajr3{
   
    margin-top: 110px;
    margin-left: 29.8%;
    width: 100%;
    height: 100%;
  }
  .card12 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  
  .card12:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card12:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card12 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card12 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  /* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container11{
    margin: center;
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 90%;
  }
  #enz_tajr4{
   
    margin-top: 110px;
    margin-left: 7%;
    width: 100%;
    height: 100%;
  }
  #enz_tajr5{
   
    margin-top: 110px;
    margin-left: 7%;
    width: 100%;
    height: 100%;
  }
  .card13 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  .card14 {
    width: 100%;
    height: 600px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  .card13:hover,.card14:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card13:hover,.card14:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card13 h4,.card14 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card13 p,.card14 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  
  .form-demo {
    padding:1.5rem 0;
  }
  .form-demo h6, hr {
    font-size: 1.5rem;
    margin-bottom:1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    
  }
  
 
  
  
  
  
  
  
  }
  
@media (min-width: 1360px) and (max-width: 1441px) {
 




  .medio{
    background-color: #003a75;
    margin-top: 15%;
    
    }
    .medio p{
      margin-left: 25%;
      color: #ffffff;
      margin-top: -10px;
      font-size: 0.8rem;
      
      
      }
      .medio h6{
        margin-left: 5%;
        color: #ffffff;
        margin-top: 30px;
        font-size: 0.8rem;
        
        }
  
  .nuestros{
    margin-left: 40px;
    
    
    
  }
  
  .datos{
    width: 50%;
    margin-left: -100px;
    margin-top: -20px;
    margin-right: 2%;
  }
  .registrada{
    width: 30%;
    margin-top: -20px;
    margin-left: 40px;
    margin-right: 2%;
    
  }




  .tarjetasppal{
    width: 98.9%;
  }
  
 

  .Datos_contacto{
    width: 550px;
    margin-left: 100px;
  }
  .Datos_contacto .direccion{
    margin-bottom: 52px;
    margin-left: -220px;
    
    
  }
  
  .Datos_contacto .telefono{
    
    margin-left: -50px;
    margin-right: 30px ;
    margin-top: -50%;
    
    
    
  }
  .Datos_contacto .correo{
    
    margin-left: -300px;
    margin-right: 30px ;
    margin-bottom: -162px;
    
    
  }



  .compañia{
    margin-top: 5%;
    background-color: #d9d8d8;
    width: 95%;
    margin-left: 2.7%;
    height: 350px;
  }

  .compañia h2{
    margin-left: -30%;
    margin-top: 10px;
    font-size: 1.4rem;
    margin-bottom: -8%;
    
    
   

  }


  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10%;
  }

  .box1 {
    position: relative;
    width: 200px;
    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
}

.box1 span {
    position: absolute;
    width: 80%;
    height: 100%;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(390px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.box1 span img {
    width: 150px; /* Asegúrate de que la imagen sea cuadrada */
    height: 150px; /* Igual que el ancho */
    object-fit: cover;
    border-radius: 100%; /* Hace que la imagen sea circular */
   
    background-color: transparent;
}


.btns {
    margin-top: 270px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.btns .btn1 {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #011d38;
    border-radius: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btns .btn1:active {
    background-color: #011d38;
}

.btns .btn1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #011d38;
    border-right: 3px solid #011d38;
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}

.btns .btn1.prev::before {
    transform: rotate(225deg) translate(-2.5px, 2.5px);
}

.btns .btn1.next::before {
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}
 
 
 
 
 
  #carouselControls2 {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next2{
    margin-right: 180px;
  }
  
  
  .informacion{
    height: 90%;
  }
  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.2rem;
    height: 150%;
    width: 79%; 
    color: #003a75;
    margin-left: 21%;
    
    
    
  }

  .t_datos h2 {
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 12%;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 22%;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }


    .dropdown-menu {
      font-size: 1rem; 
       
      font-family: Arial, Helvetica, sans-serif; 
      color: #003a75; 
    }
    
  
    .carousel{
      height: 200px;
    }


    .carousel-item img {
      width: 100%;
      height: 600px;
      object-fit: cover;
  }

.carousel-caption1 h1 {
  position: relative;
  top: -200px;
  left: -77%;
  transform: translateY(-50%);
  text-align: right;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color: #000000;
  transform: scale(1.1);
  color: #003a75;

  max-width: 100%;
  height: auto;
}



.carousel-caption1 p {
  max-width: 100%;
  height: auto;
  position: relative;
  top: -200px;
  left: -60%;
  font-size: 1.2vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-family: Helvetica, sans-serif;
  text-align: right;
  color: #003a75;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
  max-width: 1000px;
  height: auto;
}

.carousel-caption2 {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* Color del texto */
  width: 100%;
  height: auto;
}
/* Estilo para el texto en el carrusel */
.carousel-caption2 h2 {
  position: relative;
  top: -180px;
  margin-left: -36%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color:#FFF; /* Color del texto */
  transform: scale(1.1);
  width: 100%;
  height: auto;
}


.carousel-caption2 p {
  position: relative;
  top: -210px;
  margin-left: -2%;
  font-size: 1.5vw; 
  font-family: Helvetica, sans-serif;
  text-align:justify;
  color:#FFFF; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  max-width: 35%;
  height: auto;
}
.carousel-caption3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: right;
  color: #FFFF; /* Color del texto */
  max-width: 100%;
  height: auto;
}
/* Estilo para el texto en el carrusel */
.carousel-caption3 h2 {
  max-width: 100%;
  
  height: auto;
  position: relative;
  top: -250px;
  left: 550px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color: #003a75; /* Color del texto */
  transform: scale(1.1);
 
  height: auto;
}

/* Estilo para el texto de manera más moderna */
.carousel-caption3 p {
  position: relative;
  top: -270px;
  left: 480px;
  font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-family: Helvetica, sans-serif;
  text-align: left;
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
  max-width: 100%;
  height: auto;
}
  
    .navbar-nav .nav-link {
      font-size: 1.5rem; 
      color: #003a75;
      font-family: Arial, Helvetica, sans-serif; 
      
      max-width: 100%;
      height: auto;
    }
    
    .navbar-brand {
      font-size: 1.5rem; 
      font-weight: bold; 
      font-family: Arial, Helvetica, sans-serif; 
      color: #003a75; 
    }  
  
  .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
  }
  
  
    
    .whatsapp-link i {
      color: #003a75; /* Cambia el color del icono a blanco */
  }
  
    #mapa .flex-shrink-0 iframe {
      width: 600px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
    }
  
    #mapa .flex-grow-1 {
      margin-left: 0%; /* Reducir el margen izquierdo */
    }
  
  
  
  
  
  
    /* Ajustes adicionales para alinear el contenido horizontalmente */
   
  
    #mapa .col-sm-1, #mapa .col-sm-3 {
      
      width: 1800px;
      padding-left: 30px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
    }
  
    #mapa .telefono1 h8, #mapa .col-sm-3 h8 {
      display: block;
      margin-bottom: 15px; /* Reducir el margen inferior de los encabezados */
    }
  
    #mapa .col-sm-1 p, #mapa .col-sm-3 p {
      margin-bottom: 5px; /* Reducir el margen inferior de los párrafos */
    }
  
  
    #footer .row {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      margin: 6%;
     
  }
  #footer .row P {
    font-size: 0.7rem;
  }
  
    
    .flex-wrap {
      margin-left: 5%;
  }
  #oterra{
    margin-left: 15%;
  }
  
  
  #whatsapp {
    width: 90px; /* Tamaño más pequeño */
    height: 90px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 800; /* Asegúrate de que esté por encima de otros elementos */
}

svg {
    width: 80px; /* Tamaño más pequeño */
    height: 80px; /* Tamaño más pequeño */
    filter: drop-shadow(0 -1px -5px rgba(0,0,0,.4));
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    /* Asegúrate de tener el viewBox correcto */
    viewBox: "0 0 64 64"; /* Ajusta el valor si es necesario según tu icono */
}

circle {
    fill: #25d366;
}

path {
    fill: #fff;
}


  
  
    
  
    .titulo_blog2 {
      width: 90%; /* Ancho del div */
   
    margin-left: 5%;
    margin-top: 2%;
    height: auto; /* Altura automática */
    /* Otros estilos */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #003a75;
    text-align: justify;
  }
  
      
    
    .titulo_blog {
      width: 80%;
      height: auto;
      align-items: center;
      margin-left: 10%;
      background-image: url('../img/fondoprobiotico.png');
      
      background-position: center; /* Centrar la imagen */
      background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
    background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
  }
  
    .blog {
      display: flex; /* Activar el modelo de caja flexible */
      align-items: center; /* Alinear verticalmente los elementos */
  }
  
  .blog > div {
      flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
  }
  
  .blog img {
      width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
      margin-left: 8%;
  }
  .texto1 {
    width: 40%; /* Ancho del div */
    max-width: 700px;
    margin-right: 5%;
    margin-top: 5%;
    height: auto; /* Altura automática */
    /* Otros estilos */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #003a75;
    text-align: justify;
  }
  
    
    
  
  
  
  
  .titulo_blog h2{
    width: 70%;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    margin-top: 100px;
    margin-left: 2%;
   
    font-size: 3.5rem; /* Tamaño de fuente del título */
    font-weight: bold; /* Peso de la fuente en negrita */
    text-align: center; /* Alineación del texto al centro */
    margin-bottom: 20px; /* Margen inferior */
    color: #003a75; /* Color del texto */
    
  }
  
   
  
    #marcas .carousel-item img {
      margin-top: 10px;
      
      /* Ajusta el tamaño máximo de las imágenes en el carousel */
      max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
      height: auto; /* Mantiene la proporción de aspecto */
      align-items: center;
      margin-left: 40%;
      color: #003a75;
    }
    
  
  
  
  
  
  
    .container23{
      width: 80%;
      margin-top: 5%;
      align-items: center;
      margin-left: 13%;

    }
     .container23 img{
      width: 70%;
      height: 280px;
      margin-top: 80px;
      margin-left: -220px;
      border-radius: 8px;
  
    }
    .contanier23 p{
  
  margin-left: 200pc;
  
    } 
    
  
  
  
  
  
  
    /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  .blog-boton{
    margin-top: 10px;
    margin-left: 42px;
    /* Cambiar el color del texto */
    color:  #28a745;
    /* Cambiar el color de fondo */
    background-color: transparent;
    /* Agregar borde */
    border: 2px solid #28a745;
    /* Agregar padding */
    padding: 5px 10px;
    /* Añadir bordes redondeados */
    border-radius: 5px;
    /* Establecer el cursor a pointer */
    cursor: pointer;
  }
  
  #Contacto_qs p{
    width: 95%;
    margin-top: 20%;
    text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1rem;
      margin-left: -30%;
  
  }
  .imagen_quienes {
    width: 90%;
    height: auto;
    margin-top: 20px;
    
  }
  #Contacto_qs button.btn {
    margin-top: 10px;
    margin-left: 42px;
    /* Cambiar el color del texto */
    color: #fff;
    /* Cambiar el color de fondo */

    /* Agregar borde */
    border: 2px solid #28a745;
    /* Agregar padding */
    padding: 5px 10px;
    /* Añadir bordes redondeados */
    border-radius: 5px;
    /* Establecer el cursor a pointer */
    cursor: pointer;
  }
  .fondo-imagen {
    margin-top: -100px;
    background-image: url('../img/quienes_somos2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    
    position: relative;
    z-index: -1;
  
    /* Aplica un color de fondo con opacidad */
    background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
    background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
  
  
  
    
    /* Ajustes para el div */
    height: 700px; /* Altura del div */
    position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
    text-align: center; /* Centrar texto horizontalmente */
    color: #210075; /* Color del texto */
    margin-bottom: 500px;
  }
  
  .texto-superpuesto {
    position: relative;
    top: 650px; /* Comienza desde arriba de la pantalla */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Centrar horizontalmente */
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: 400; /* Hacer el texto más visible */
    text-align: center;
    width: 1332px;
    background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
    line-height: 1.2;
    padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
    
    
  }
  
  
  
  
  
  .contenedor11 {
    margin-left: 0.7%;
    display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
    align-items: center; /* Centrar verticalmente el texto y la imagen */
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    margin-bottom: 15%;
    margin-top: -15%;
    background-color: rgba(220, 216, 216, 0.8);
    height: 400px;
    width: 1332pX;
  }
  
  .mision {
    width: 600PX;
    padding-right: 20px; /* Espacio entre el texto y la imagen */
    
    
    margin-left: 10%;
    font-size: 1.5rem;
    text-align: justify;
    color: #003a75 ;
  
  }
  
  .mision_img img {
    width: 500px; /* Tamaño de la imagen */
    height: auto; /* Mantener proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    margin-left: 50px; /* Espacio entre la imagen y otros elementos */
    
    animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
  }
  
  /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
  @keyframes slideIn {
    from {
      opacity: 0; /* Comienza invisible */
      transform: translateX(-100px); /* Desplaza desde la izquierda */
    }
    to {
      opacity: 1; /* Completamente visible */
      transform: translateX(0); /* Sin desplazamiento */
    }
  }
  .contenedor12 {
    margin-left: 0.7%;
    display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
    align-items: center; /* Centrar verticalmente el texto y la imagen */
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    margin-bottom: 25%;
    margin-top: -10%;
    
    height: 500px;
    width: 1332PX;
  }
  
  .vision {
    width: 600PX;
    padding-right: 20px; /* Espacio entre el texto y la imagen */
    
    
    margin-left: 10%;
    font-size: 1.5rem;
    text-align: justify;
    color: #003a75 ;
  
  
  }
  
  .vision_img img {
    width: 500px; /* Tamaño de la imagen */
    height: auto; /* Mantener proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    margin-left: 20%; /* Espacio entre la imagen y otros elementos */
    
    animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
  }
  
  /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
  @keyframes slideIn {
    from {
      opacity: 0; /* Comienza invisible */
      transform: translateX(-100px); /* Desplaza desde la izquierda */
    }
    to {
      opacity: 1; /* Completamente visible */
      transform: translateX(0); /* Sin desplazamiento */
    }
  }
  
  
  
  
  
  /* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  
  
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffff;
    }
   
    .contact-info {
      text-align: left;
      width: 1360PX;
      font-size: 16px; 
      margin: 0 auto;
      margin-left: 850px; 
      background-color: #28a745;
      
    }  
    
    .contact-info p {
       
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 1rem;
      color: #1f0980;
      margin-top: -0.5%;
      margin-left: -40%;
    }
   
  
   
    
   
    .row {
      margin-top: 0px; /* Márgen superior */
      align-content: center;
      align-items: center;
      margin-left: 10%;
      
      
    }
  
    
    #logo2{
      margin-bottom: 0px;
      width: 25%;
      max-width: 100%;
      height: auto;
    }
    
    .col-5 {
      padding: 0px; /* Añade relleno alrededor de cada columna */
      
    }
    #p {
      width: 100%; /* Ancho del contenedor */
      max-width: 800px; /* Ancho máximo */
      padding: 20px; /* Relleno interior */
      text-align: justify; /* Alineación del texto al centro */
      margin-top: 120px;
      margin-left: 50px;
    }
    
    h2 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.5rem; /* Tamaño del texto */
      line-height: 1.5; /* Altura de línea */
      margin-bottom: 20px; /* Espaciado inferior */
      margin-left: -16%;
    }
    
   
    .btn {
      font-size: 18px;
      margin-left: 65%;
      padding: 10px 20px;
     
      
      
      
    }
  
    #texto{
      width: 88%;
    }
  
  /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  #tarjetas{
    margin-left: 10%;
    width: 90.5%;
  }
  
  .card {  
    margin-top: 20px;
    height: 400px; /* Establece una altura fija para todas las tarjetas */
    margin-left: 50px;
    width: 98%;
    
  }
  .card-body {
    height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
    display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: center; /* Centra verticalmente los elementos */
    background: linear-gradient(to right, #8786868c, #ffffff);
    border: 2px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
  }
  
  .col-custom {
    transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
  }
  
  .col-custom:hover {
    transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
  }
  
  #titulop h3 {
    margin-top: 100px;
    font-size: 3.5rem; /* Tamaño de fuente del título */
    font-weight: bold; /* Peso de la fuente en negrita */
    text-align: center; /* Alineación del texto al centro */
    margin-bottom: 20px; /* Margen inferior */
    color: #011d38; /* Color del texto */
  }
  
  #titulop p {
    font-size: 1.2rem; /* Tamaño de fuente del párrafo */
    line-height: 1.6; /* Altura de línea */
    text-align: center; /* Alineación del texto al centro */
    color: #011d38; /* Color del texto */
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
    }
    to {
      opacity: 1;
      transform: translateX(0); /* Restaura la posición original */
    }
  }
  /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  #titulop h3{
   font-size: 3.5rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  }
  #titulop p {
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
  }
  #titulo2 h5 {
    font-size: 3.5rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
   margin-bottom: 15px;
    
  }
  
  #titulo2 p {
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
    text-align: center; /* Alineación del texto al centro */
    
    
  }
  
  .aliados {
    position: relative;
    margin-bottom: 100px;
    margin-left: 200px;
    margin-right: 100px;
    margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
    width: 200px; /* Ancho de la tarjeta */
    height: 200px; /* Altura de la tarjeta */
    perspective: 1000px; /* Perspectiva para el efecto 3D */
    
  }
  
  .card-front, .card-back {
    position: relative;
    top: 100;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
  }
  
  .aliados:hover .card-front {
    transform: rotateY(180deg);
  }
  
  .aliados:hover .card-back {
    transform: rotateY(1deg);
  }
  
  .card-back p {
    margin-left: 20px;
    margin-top: -110px;
    width: 120%; /* Ancho de la caja del texto */
    font-size: 15px; /* Tamaño de fuente */
    line-height: 1.6; /* Altura de línea */
    color: #000000; /* Color de texto */  
    text-align: justify; /* Alineación del texto */
    border-radius: 0%; /* Borde redondeado */
    background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
    padding: 20px; /* Espaciado interno */
    position: absolute; /* Posición absoluta */
    
    transform: translate(-50%, -50%); /* Centrar */
    opacity: 0; /* Hacer que el texto no sea visible inicialmente */
    color: #087f18;
  }
  
  .container {
    perspective: 100px; /* Establece la perspectiva en el contenedor principal */
  }
  
  .aliados {
    transform-style: preserve-3d; /* Conserva la transformación 3D */
    transition: transform 10s ease; /* Transición suave para la rotación */
  }
  
  
  .aliados:hover .card-back p {
    opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
  }
  .aliados img {
    margin-top: -50px;
    
    margin-left: 30px;
    max-width: 130%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
    max-height: 130%; /* Establece la altura máxima de la imagen al 100% del contenedor */
    width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
    height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
    
  }
  .medio{
  background-color: #003a75;
  margin-top: 10px;
  }
  .medio p{
    margin-left: 25%;
    color: #ffffff;
    margin-top: -10px;
    
    }
    .medio h6{
      margin-left: 25%;
      color: #ffffff;
      margin-top: 30px;
      }
      .medio h7{
        margin-left: 25%;
        color: #ffffff;
        margin-top: -10px;
        }
  #copy{
    margin-top: -110px;
    color: #ffffff;
    height: 10px;
    text-align: center;
    margin-bottom: -100px;
  }
  
  /* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  /* porque elegirnos  */
  .elegir {
    margin-top: -150px;
    margin-bottom: -100px;
    position: relative;
    width: 100%;
    height: 1800px; /* Ajusta la altura según sea necesario */
    overflow: hidden;
  }
  
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2b7; /* Color de fondo gris claro */
    z-index: -1;
  }
  
  .content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
  }
  
  .iconos, .texto {
    margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
  }
  
  /* Estilos para los iconos */
  .iconos {
    /* Estilos para los iconos */
  }
  
  /* Estilos para los textos */
  .texto {
    /* Estilos para los textos */
  }
  
  
  
  /* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  .titulop{
    
    font-size: 2.5rem;
   font-weight: bold; /* Texto en negrita */
   color: #090909; /* Color del texto */
   text-transform: uppercase; /* Convierte el texto en mayúsculas */
   animation: fadeIn 1s ease; /* Animación de entrada suave */
   text-align: center;
   font-weight: bold; /* Negrita */
   color: #003a75; /* Color del texto */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
   margin-bottom: 100px;
   margin-top: -300px;
  }
  
  
    @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
    @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");
  
    .container5{
     height: 400px ;
     width: 1332px;
     margin-bottom:-3% ;
     margin-left: 0.7%;
  
    
     background-color: rgba(220, 216, 216, 0.8);
      
      display: flex;
      gap: 50px;
      align-items: center;
      justify-content: center;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5em;
    }
  
    .item p {
      margin-top: -200px;
      margin-left: -100px;
      width: 200px;
      height: 300px;
      font-size: 1rem; 
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      color: #555;
      line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
  }
  
   
    .item h3 {   
      width: 200px;
      height: 300px;    
      margin-left: -90px;
      margin-top: -120px;
      font-weight: 700;
      font-size: 1.2rem;
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      
      color: var(---color);
    }
    .item2 p {
      width: 200px;
      height: 300px;
      font-size: 1rem; /* Tamaño de fuente */
      margin-left: -100px;
      
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
      color: #555;
      line-height: 1.3; 
  
      color: #555;
     
    }
    
    .item2 h3 {
      margin-left: -100px;
      margin-top: -120px;
      width: 200px;
      
      font-weight: 700;
      text-align: justify;
      color: var(---color);
      font-size: 1.2rem;
      text-align: justify;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .item{
      margin-left: -20%;
      --color: #28a745;
      width: 280px;
      height: 350px;
      background-color:var(--color) ;
      border-radius: 10px;
      padding: 10px 5px;
      box-shadow: #3c40434d 0px 1px 2px 0px;
      box-shadow: #3c404326 0px 1px 3px 1px;
      position: relative;
      cursor: pointer;
  
    }
    .item2{
      margin-left: -20%;
      --color: #003a75;
      width: 280px;
      height: 350px;
      background-color:var(--color) ;
      border-radius: 10px;
      padding: 10px 5px;
      box-shadow: #3c40434d 0px 1px 2px 0px;
      box-shadow: #3c404326 0px 1px 3px 1px;
      position: relative;
      cursor: pointer;
  
    }
    .item::after{
      content: "";
      position: absolute;
      top:8px;
      left: 0;
      z-index: 2;
      height: 60%;
      box-sizing: border-box;
      border-style: solid;
      border-color: transparent transparent transparent var(--color);
      border-width: 40px 40px 40px 40px;
      filter:drop-shadow( 5px 0 4px #00000094);
      transition: filter .5s;
    }
    .item2::after{
      content: "";
      position: absolute;
      top:8px;
      left: 0;
      z-index: 2;
      height: 60%;
      box-sizing: border-box;
      border-style: solid;
      border-color: transparent transparent transparent var(--color);
      border-width: 40px 40px 40px 40px;
      filter:drop-shadow( 5px 0 4px #00000094);
      transition: filter .5s;
    }
  
    .item:nth-child(2){
      ---color:#813085
    }
  
    .item:nth-child(3){
      ----color: #119630
    }
    .item2:nth-child(2){
      ---color:#813085
    }
  
    .item2:nth-child(3){
      ----color: #119630
    }
    .layer{
      
      height:  91%;
      margin: 20px;
      background-color: #f2f2f2;
      border: 1px solid #fff;
      border-radius: inherit;
      padding: 47%;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        position: relative;
  
        left:1px;
        transition: left 1s;
    }
    .layer1{
      
      height:  92%;
      margin: 15px;
      background-color: #f2f2f2;
      border: 1px solid #fff;
      border-radius: inherit;
      padding: 47.6%;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        position: relative;
  
        left:1px;
        transition: left 1s;
    }
    span{
      width: 22%;
      height: 20%;
      color:#fff;
      background-color: var(--color);
      border-radius: 20%;
      display: grid;
      place-content: center;
      box-shadow: 
      #00000012 0px 1px 2px,
        #00000012 0px 2px 4px,
        #00000012 0px 4px 8px,
        #00000012 0px 8px 16px,
        #00000012 0px 16px 32px,
        #00000012 0px 32px 64px;
        font-size: 14px;
        position: absolute;
        right: 15px;
        
        top: 78%;
    }
   
    
  
    .item:hover:after{
      filter:drop-shadow(5px 0 4px #0000001a)
  
  
    }
    .item:hover .layer{
      left: 40px;
    }
    .item:hover .layer1{
      left: 40px;
    }
    .item2:hover:after{
      filter:drop-shadow(5px 0 4px #0000001a)
  
  
    }
    .item2:hover .layer{
      left: 40px;
    }
    .item2:hover .layer1{
      left: 70px;
    }
    .item .layer1 i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
    .item2 .layer i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
    .item .layer i {
      font-size: 30px; /* Tamaño deseado para el icono */
    }
  
  
  
  
    
  
  /* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
  .titulo_catalogo h2 {
    margin-left: 0%;
    font-size: 35px; /* Tamaño de fuente grande */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /*Convierte el texto en mayúsculas */
    animation: fadeIn 3s ease; /* Animación de entrada suave */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3rem; /* Tamaño de fuente inicial */
    font-weight: bold; /* Negrita */
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  
    /* Tamaño de fuente responsivo */
    font-size: 3vw;
  }
  .titulo_catalogo p{
    animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #003a75; /* Color del texto */
    text-align: center;
  
  
  }
  .container7{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    font-family: sans-serif;
    overflow: hidden;
    transform:  skew(5deg);
  }
  .card3{
    flex: 1;
    transition: all 1s ease-in-out;
    height: 75vmin;
    position: relative;
  }
  .card3:not(:nth-child(5)){
    margin-right: 1em;
  }
  #imagen_catalogo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s ease-in-out;
    filter: grayscale(0%);
  }
  .head3{
    color: black;
    background: #ff1eadbf;
    padding: 0.5em;
    transform:  rotate(-90deg);
    transform-origin: 0% 0%;
    transition:  all 0.5s ease-in-out;
    min-width:100% ;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;
    white-space: nowrap;
  }
  
  
  .card3:hover{
    flex-grow: 10;
  }
  .card3:hover #imagen_catalogo {
  filter:grayscale(0);
  }
  
  .card3:hover .head3{
    text-align: center;
    top: calc(100% -2em);
    color: white;
    background: #00000080;
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
  }
  
  
  /* detalle */
  
  .container8{
  
    background-color: #d9d8d8;
    width: 100%;
    height: 100%;
  }
  #enz_tajr{
    margin-top: 50px;
    margin-left: 2.8%;
    width: 100%;
    height: 100%;
  }
  .card7 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  .card8 {
    width: 100%;
    height:820px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    border-radius: 10px; /* Hace que los bordes sean curvos */
  }
  
  .card7:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card8:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  .card7 h5{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
  }
  .card7 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card7 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  .card8 h5{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
  }
  .card8 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card8 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  .productos {
    margin-top: 160px;
    text-align: center; /* Centra el contenido del contenedor */
    margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
  }
  
  .productos h6 {
    font-size: 35px; /* Tamaño de fuente grande */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /*Convierte el texto en mayúsculas */
    animation: fadeIn 3s ease; /* Animación de entrada suave */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3rem; /* Tamaño de fuente inicial */
    font-weight: bold; /* Negrita */
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
  
    /* Tamaño de fuente responsivo */
    font-size: 3vw;
    
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0; /* Comienza con opacidad 0 */
      transform: translateY(-20px); /* Desplazamiento hacia arriba */
    }
    to {
      opacity: 1; /* Termina con opacidad 1 */
      transform: translateY(0); /* Sin desplazamiento */
    }
  }
  
  
  
  
  /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  /* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container9{
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 70%;
  }
  #enz_tajr2{
    margin-top: 110px;
    margin-left: 5.8%;
    width: 100%;
    height: 100%;
  }
  .card11 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  
  .card11:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card11:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card11 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card11 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  /* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
  
  /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  .footer {
    position: relative; /* Establece la posición relativa */
    margin-left: -50%;
    
  }
  
  
  .footer-container {
    position: relative; /* Establece la posición relativa */
    margin-left: -50%;
  }
  .move-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 40px;
    height: 40px;
    background-color: #28a745;
    border-radius: 50%;
    color: #ffffff;
    display: none; /* Ocultar el botón por defecto */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .move-top.show {
    display: flex; /* Mostrar el botón cuando se agrega la clase 'show' */
  }
  
  .move-top:hover {
    background-color: #218838;
  }
  
  
  /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  
  /* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container10{
    margin: center;
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 70%;
  }
  #enz_tajr3{
   
    margin-top: 110px;
    margin-left: 29.8%;
    width: 100%;
    height: 100%;
  }
  .card12 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  
  .card12:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card12:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card12 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card12 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  /* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  
  .container11{
    margin: center;
    background-image: url('/img/descarga.png');
    background-color: #d9d8d8;
    width: 100%;
    height: 90%;
  }
  #enz_tajr4{
   
    margin-top: 110px;
    margin-left: 7%;
    width: 100%;
    height: 100%;
  }
  #enz_tajr5{
   
    margin-top: 110px;
    margin-left: 7%;
    width: 100%;
    height: 100%;
  }
  .card13 {
    width: 100%;
    height: 400px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  .card14 {
    width: 100%;
    height: 600px;
    border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
    border-radius: 10px; /* Hace que los bordes sean curvos */
    background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
    transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
  }
  
  
  .card13:hover,.card14:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  .card13:hover,.card14:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
  }
  
  
  .card13 h4,.card14 h4{
    margin-top: 15px; ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
  }
  .card13 p,.card14 p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
  }
  
  
  .form-demo {
    padding:1.5rem 0;
  }
  .form-demo h6, hr {
    font-size: 1.5rem;
    margin-bottom:1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    
  }
  
  
  
  
  
  
  }

@media (min-width: 1442px)and (max-width: 1599px) {
  
  .carousel-caption1 h1 {
      position: relative;
      top: -150px;
      left: -80%;
      transform: translateY(-50%);
      text-align: right;
      font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
      font-weight: bold;
      font-family: Helvetica, sans-serif;
      text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
      transition: all 0.3s ease-in-out;
      color: #000000;
      transform: scale(1.1);
      color: #003a75;
    
      max-width: 100%;
      height: auto;
    }
    
    
    
    .carousel-caption1 p {
      max-width: 100%;
      height: auto;
      position: relative;
      top: -150px;
      left: -60%;
      font-size: 1.2vw; /* Utiliza vw para un tamaño de fuente responsivo */
      font-family: Helvetica, sans-serif;
      text-align: right;
      color: #003a75;
      text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
      max-width: 1000px;
      height: auto;
    }
  
    .carousel-caption2 {
      position: absolute;
      top: 50%;
      left: 60%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff; /* Color del texto */
      width: 100%;
      height: auto;
    }
    /* Estilo para el texto en el carrusel */
    .carousel-caption2 h2 {
      position: relative;
      top: -130px;
      margin-left: -35%;
      transform: translateY(-50%);
      text-align: center;
      font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
      font-weight: bold;
      font-family: Helvetica, sans-serif;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
      transition: all 0.3s ease-in-out;
      color:#FFF; /* Color del texto */
      transform: scale(1.1);
      width: 100%;
      height: auto;
    }
    
    
    .carousel-caption2 p {
      position: relative;
      top: -150px;
      margin-left: 0%;
      font-size: 1.5vw; 
      font-family: Helvetica, sans-serif;
      text-align:justify;
      color:#FFFF; 
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
      max-width: 35%;
      height: auto;
    }
    
    /* Estilo para el texto en el carrusel */
    .carousel-caption3 h2 {
      max-width: 100%;
      
      height: auto;
      position: relative;
      top: -430px;
      left: 380px;
      transform: translateY(-50%);
      text-align: center;
      font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
      font-weight: bold;
      font-family: Helvetica, sans-serif;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
      transition: all 0.3s ease-in-out;
      color: #003a75; /* Color del texto */
      transform: scale(1.1);
     
      height: auto;
    }
    
    /* Estilo para el texto de manera más moderna */
    .carousel-caption3 p {
      position: relative;
      top: -450px;
      left: 600px;
      font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
      font-family: Helvetica, sans-serif;
      text-align: left;
      color: #003a75; /* Color del texto */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
      max-width: 100%;
      height: auto;
    }
  
  
  
  .registrada{
    width: 30%;
    margin-top: -20px;
    margin-left: -180px;
    margin-right: 2%;
    
  }
  .Datos_contacto{
    width: 900px;
    margin-left: 100px;
  }
  .Datos_contacto .direccion{
    margin-bottom: 112px;
    margin-left: 10px;
    
  }
  .Datos_contacto .telefono{
    
    margin-left: -50px;
    margin-right: 30px ;
    margin-top: -8%;
    
  }
  .Datos_contacto .correo{
    
    margin-left: 30px;
    margin-right: 30px ;
    margin-bottom: 92px;
    
  }



  .compañia{
    margin-top: 10%;
    background-color: #d9d8d8;
    width: 95%;
    margin-left: 2.7%;
  }

  .compañia h2{
    margin-left: -30%;
    margin-top: -100px;
    
   

  }


  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10%;
  }

  .box1 {
    position: relative;
    width: 200px;
    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
}

.box1 span {
    position: absolute;
    width: 80%;
    height: 100%;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(390px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.box1 span img {
    width: 200px; /* Asegúrate de que la imagen sea cuadrada */
    height: 200px; /* Igual que el ancho */
    object-fit: cover;
    border-radius: 100%; /* Hace que la imagen sea circular */
   
    background-color: transparent;
}


.btns {
    margin-top: 270px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.btns .btn1 {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #011d38;
    border-radius: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btns .btn1:active {
    background-color: #011d38;
}

.btns .btn1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #011d38;
    border-right: 3px solid #011d38;
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}

.btns .btn1.prev::before {
    transform: rotate(225deg) translate(-2.5px, 2.5px);
}

.btns .btn1.next::before {
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}
 
 
 
 
 
  #carouselControls2 {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next2{
    margin-right: 180px;
  }
  
  
  
  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.3rem;
    height: 100%;
    width: 75%; 
    color: #003a75;
    margin-left: 25%;
    
    
  }

  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 22%;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }


    .carousel-control-next-icon, .carousel-control-prev-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: no-repeat 50% / 100% 100%;
    }
    
    
      
      .whatsapp-link i {
        color: #003a75; /* Cambia el color del icono a blanco */
    }
    
      #mapa .flex-shrink-0 iframe {
        width: 800px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
      }
    
      #mapa .flex-grow-1 {
        margin-left: 0%; /* Reducir el margen izquierdo */
      }
    
    
      #telefono1{
        width: 1400px;
        margin-left: 20px;
      }
    
      #mapa .container .row .telefono1,  
      #mapa .container .row .col-sm-3 {
        width: 1400px;
        margin-left: 0px;
      }
    
      /* Ajustes adicionales para alinear el contenido horizontalmente */
      #mapa .row {
        display: flex;
        margin-left: 10%;
        
       
        
      }
    
      #mapa .col-sm-1, #mapa .col-sm-3 {
        
        width: 1800px;
        padding-left: 30px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
      }
    
      #mapa .telefono1 h8, #mapa .col-sm-3 h8 {
        display: block;
        margin-bottom: 15px; /* Reducir el margen inferior de los encabezados */
      }
    
      #mapa .col-sm-1 p, #mapa .col-sm-3 p {
        margin-bottom: 5px; /* Reducir el margen inferior de los párrafos */
      }
    
    
      #footer .row {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin: 6%;
       
    }
    
      
      .flex-wrap {
        margin-left: 5%;
    }
    #oterra{
      margin-left: 25%;
    }
    
    
      #whatsapp {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    }
    svg {
        width: 80px;
        height: 80px;
        filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
        cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    }
    circle {
        fill: #25d366;
    }
    path {
        fill: #fff;
    }
    
    
      
    
      .titulo_blog2 {
        width: 90%; /* Ancho del div */
     
      margin-left: 5%;
      margin-top: 2%;
      height: auto; /* Altura automática */
      /* Otros estilos */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.4rem;
      line-height: 1.4;
      color: #003a75;
      text-align: justify;
    }
    
        
      
      .titulo_blog {
        width: 80%;
        height: auto;
        align-items: center;
        margin-left: 10%;
        background-image: url('../img/fondoprobiotico.png');
        
        background-position: center; /* Centrar la imagen */
        background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
      background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
    }
    
      .blog {
        display: flex; /* Activar el modelo de caja flexible */
        align-items: center; /* Alinear verticalmente los elementos */
    }
    
    .blog > div {
        flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
    }
    
    .blog img {
        width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
        margin-left: 8%;
    }
    .texto1 {
      width: 40%; /* Ancho del div */
      max-width: 700px;
      margin-right: 5%;
      margin-top: 5%;
      height: auto; /* Altura automática */
      /* Otros estilos */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.4rem;
      line-height: 1.4;
      color: #003a75;
      text-align: justify;
    }
    
      
      
    
    
    
    
    .titulo_blog h2{
      width: 70%;
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2.5rem;
      margin-top: 100px;
      margin-left: 2%;
     
      font-size: 3.5rem; /* Tamaño de fuente del título */
      font-weight: bold; /* Peso de la fuente en negrita */
      text-align: center; /* Alineación del texto al centro */
      margin-bottom: 20px; /* Margen inferior */
      color: #003a75; /* Color del texto */
      
    }
    
     
    
      #marcas .carousel-item img {
        margin-top: 10px;
        
        /* Ajusta el tamaño máximo de las imágenes en el carousel */
        max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
        height: auto; /* Mantiene la proporción de aspecto */
        align-items: center;
        margin-left: 40%;
        color: #003a75;
      }
      
    
    
    
    
    
    
      .container23{
        width: 80%;
        margin-top: 5%;
        align-items: center;
        margin-left: 13%;
      }
       .container23 img{
        width: 80%;
        height: 350px;
        margin-top: 90px;
        margin-left: -320px;
        border-radius: 8px;
    
      }
      .contanier23 p{
    
    margin-left: 200px;
    
      } 
    
    
    
    
    
    
    
      /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .contact-button{
      margin-left: 20%;
    }

    #Contacto_qs p{
      width: 95%;
      margin-top: 20%;
      text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        margin-left: -30%;
    
    }
    .imagen_quienes {
      width: 80%;
      height: auto;
      margin-top: 130px;
      
    }
    #Contacto_qs button.btn-outline-success {
      margin-top: 10px;
      margin-left: 42px;
      /* Cambiar el color del texto */
      color: #28a745;
      /* Cambiar el color de fondo */
      background-color: transparent;
      /* Agregar borde */
      border: 2px solid #28a745;
      /* Agregar padding */
      padding: 5px 10px;
      /* Añadir bordes redondeados */
      border-radius: 5px;
      /* Establecer el cursor a pointer */
      cursor: pointer;
    }
    .fondo-imagen {
      margin-top: -100px;
      background-image: url('../img/quienes_somos2.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      
      height: 400px;
      position: relative;
      z-index: -1;
    
      /* Aplica un color de fondo con opacidad */
      background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
      background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
    
    
    
      
      /* Ajustes para el div */
      height: 1000px; /* Altura del div */
      position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
      text-align: center; /* Centrar texto horizontalmente */
      color: #210075; /* Color del texto */
      margin-bottom: 500px;
    }
    
    .texto-superpuesto {
      position: relative;
      top: 850px; /* Comienza desde arriba de la pantalla */
      left: 50%; /* Centrar horizontalmente */
      transform: translateX(-50%); /* Centrar horizontalmente */
      font-size: 1.5rem; /* Tamaño del texto */
      font-weight: 400; /* Hacer el texto más visible */
      text-align: center;
      width: 1332px;
      background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
      line-height: 1.2;
      padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
      
      
    }
    
    
    
    
    
    .contenedor11 {
      margin-left: 284PX;
      display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
      align-items: center; /* Centrar verticalmente el texto y la imagen */
      justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
      margin-bottom: 15%;
      margin-top: -15%;
      background-color: rgba(220, 216, 216, 0.8);
      height: 500px;
      width: 1332pX;
    }
    
    .mision {
      width: 600PX;
      padding-right: 20px; /* Espacio entre el texto y la imagen */
      
      
      margin-left: 50px;
      font-size: 1.5rem;
      text-align: justify;
      color: #003a75 ;
    
    }
    
    .mision_img img {
      width: 600px; /* Tamaño de la imagen */
      height: auto; /* Mantener proporción de la imagen */
      border-radius: 8px; /* Bordes redondeados */
      margin-left: 50px; /* Espacio entre la imagen y otros elementos */
      
      animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
    }
    
    /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
    @keyframes slideIn {
      from {
        opacity: 0; /* Comienza invisible */
        transform: translateX(-100px); /* Desplaza desde la izquierda */
      }
      to {
        opacity: 1; /* Completamente visible */
        transform: translateX(0); /* Sin desplazamiento */
      }
    }
    .contenedor12 {
      margin-left: 284PX;
      display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
      align-items: center; /* Centrar verticalmente el texto y la imagen */
      justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
      margin-bottom: 25%;
      margin-top: -10%;
      
      height: 500px;
      width: 1332PX;
    }
    
    .vision {
      width: 600PX;
      padding-right: 20px; /* Espacio entre el texto y la imagen */
      
      
      margin-left: 72px;
      font-size: 1.5rem;
      text-align: justify;
      color: #003a75 ;
    
    
    }
    
    .vision_img img {
      width: 600px; /* Tamaño de la imagen */
      height: auto; /* Mantener proporción de la imagen */
      border-radius: 8px; /* Bordes redondeados */
      margin-left: 50px; /* Espacio entre la imagen y otros elementos */
      
      animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
    }
    
    /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
    @keyframes slideIn {
      from {
        opacity: 0; /* Comienza invisible */
        transform: translateX(-100px); /* Desplaza desde la izquierda */
      }
      to {
        opacity: 1; /* Completamente visible */
        transform: translateX(0); /* Sin desplazamiento */
      }
    }
    
    
    
    
    
    /* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    
    
      body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
      }
     
      .contact-info {
        text-align: left;
        width: 1360PX;
        font-size: 16px; 
        margin: 0 auto;
        margin-left: 850px; 
        background-color: #28a745;
        
      }  
      
      .contact-info p {
         
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 1.4rem;
        color: #1f0980;
        margin-top: -0.5%;
        margin-left: -30%;
      }
     
    
     
      
     
      .row {
        margin-top: 0px; /* Márgen superior */
        align-content: center;
        align-items: center;
        margin-left: 10%;
        
        
      }
      #logo2{
        margin-bottom: 0px;
        width: 400px;
        max-width: 100%;
        height: auto;
      }
      
      .col-5 {
        padding: 0px; /* Añade relleno alrededor de cada columna */
        
      }
      #p {
        width: 100%; /* Ancho del contenedor */
        max-width: 800px; /* Ancho máximo */
        padding: 20px; /* Relleno interior */
        text-align: justify; /* Alineación del texto al centro */
        margin-top: 120px;
        margin-left: 50px;
      }
      
      h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem; /* Tamaño del texto */
        line-height: 1.5; /* Altura de línea */
        margin-bottom: 20px; /* Espaciado inferior */
        margin-left: -16%;
      }
      
      .btn {
        font-size: 18px;
        margin-left: 75%;
        padding: 10px 20px;
        
        
      }
    
      #texto{
        width: 88%;
      }
    
    /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    #tarjetas{
      margin-left: 10%;
    }
    
    .card {  
      margin-top: 20px;
      height: 400px; /* Establece una altura fija para todas las tarjetas */
      margin-left: 50px;
      width: 100%;
      
    }
    .card-body {
      height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
      display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
      flex-direction: column; /* Apila los elementos verticalmente */
      justify-content: center; /* Centra verticalmente los elementos */
      background: linear-gradient(to right, #8786868c, #ffffff);
      border: 2px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
    }
    
    .col-custom {
      transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
    }
    
    .col-custom:hover {
      transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
    }
    
    #titulop h3 {
      margin-top: 100px;
      font-size: 3.5rem; /* Tamaño de fuente del título */
      font-weight: bold; /* Peso de la fuente en negrita */
      text-align: center; /* Alineación del texto al centro */
      margin-bottom: 20px; /* Margen inferior */
      color: #011d38; /* Color del texto */
    }
    
    #titulop p {
      font-size: 1.2rem; /* Tamaño de fuente del párrafo */
      line-height: 1.6; /* Altura de línea */
      text-align: center; /* Alineación del texto al centro */
      color: #011d38; /* Color del texto */
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
      }
      to {
        opacity: 1;
        transform: translateX(0); /* Restaura la posición original */
      }
    }
    /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    #titulop h3{
     font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    }
    #titulop p {
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
    }
    #titulo2 h5 {
      font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
     margin-bottom: 15px;
      
    }
    
    #titulo2 p {
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
      text-align: center; /* Alineación del texto al centro */
      
      
    }
    
    .aliados {
      position: relative;
      margin-bottom: 100px;
      margin-left: 200px;
      margin-right: 100px;
      margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
      width: 200px; /* Ancho de la tarjeta */
      height: 200px; /* Altura de la tarjeta */
      perspective: 1000px; /* Perspectiva para el efecto 3D */
      
    }
    
    .card-front, .card-back {
      position: relative;
      top: 100;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
      backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
    }
    
    .aliados:hover .card-front {
      transform: rotateY(180deg);
    }
    
    .aliados:hover .card-back {
      transform: rotateY(1deg);
    }
    
    .card-back p {
      margin-left: 20px;
      margin-top: -110px;
      width: 120%; /* Ancho de la caja del texto */
      font-size: 15px; /* Tamaño de fuente */
      line-height: 1.6; /* Altura de línea */
      color: #000000; /* Color de texto */  
      text-align: justify; /* Alineación del texto */
      border-radius: 0%; /* Borde redondeado */
      background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
      padding: 20px; /* Espaciado interno */
      position: absolute; /* Posición absoluta */
      
      transform: translate(-50%, -50%); /* Centrar */
      opacity: 0; /* Hacer que el texto no sea visible inicialmente */
      color: #087f18;
    }
    
    .container {
      perspective: 100px; /* Establece la perspectiva en el contenedor principal */
    }
    
    .aliados {
      transform-style: preserve-3d; /* Conserva la transformación 3D */
      transition: transform 10s ease; /* Transición suave para la rotación */
    }
    
    
    .aliados:hover .card-back p {
      opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
    }
    .aliados img {
      margin-top: -50px;
      
      margin-left: 30px;
      max-width: 130%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
      max-height: 130%; /* Establece la altura máxima de la imagen al 100% del contenedor */
      width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
      height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
      
    }
    .medio{
    background-color: #003a75;
    margin-top: 10px;
    }
    .medio p{
      margin-left: 25%;
      color: #ffffff;
      margin-top: -10px;
      
      }
      .medio h6{
        margin-left: 25%;
        color: #ffffff;
        margin-top: 30px;
        }
        .medio h7{
          margin-left: 25%;
          color: #ffffff;
          margin-top: -10px;
          }
    #copy{
      margin-top: -110px;
      color: #ffffff;
      height: 10px;
      text-align: center;
      margin-bottom: -100px;
    }
    
    /* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* porque elegirnos  */
    .elegir {
      margin-top: -100px;
      margin-bottom: -100px;
      position: relative;
      width: 100%;
      height: 1800px; /* Ajusta la altura según sea necesario */
      overflow: hidden;
    }
    
    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f2f2f2b7; /* Color de fondo gris claro */
      z-index: -1;
    }
    
    .content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
    }
    
    .iconos, .texto {
      margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
    }
    
    /* Estilos para los iconos */
    .iconos {
      /* Estilos para los iconos */
    }
    
    /* Estilos para los textos */
    .texto {
      /* Estilos para los textos */
    }
    
    
    
    /* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    .titulop{
      
      font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
     margin-bottom: 100px;
     margin-top: -400px;
    }
    
    
      @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
      @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");
    
      .container5{
       height: 500px ;
       width: 1332px;
       margin-bottom:-3% ;
       margin-left: 15%;
    
      
       background-color: rgba(220, 216, 216, 0.8);
        
        display: flex;
        gap: 50px;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5em;
      }
    
      .item p {
        margin-top: -200px;
        margin-left: -100px;
        width: 200px;
        height: 300px;
        font-size: 1.3rem; 
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        color: #555;
        line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
    }
    
     
      .item h3 {   
        width: 200px;
        height: 300px;    
        margin-left: -110px;
        margin-top: -120px;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        
        color: var(---color);
      }
      .item2 p {
        width: 200px;
        height: 300px;
        font-size: 20px; /* Tamaño de fuente */
        margin-left: -100px;
        
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        color: #555;
        line-height: 1.3; 
    
        color: #555;
       
      }
      
      .item2 h3 {
        margin-left: -120px;
        margin-top: -120px;
        width: 200px;
        
        font-weight: 700;
        text-align: justify;
        color: var(---color);
        font-size: 1.5rem;
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      .item{
        margin-left: -20%;
        --color: #28a745;
        width: 350px;
        height: 450px;
        background-color:var(--color) ;
        border-radius: 10px;
        padding: 10px 5px;
        box-shadow: #3c40434d 0px 1px 2px 0px;
        box-shadow: #3c404326 0px 1px 3px 1px;
        position: relative;
        cursor: pointer;
    
      }
      .item2{
        margin-left: -20%;
        --color: #003a75;
        width: 350px;
        height: 450px;
        background-color:var(--color) ;
        border-radius: 10px;
        padding: 10px 5px;
        box-shadow: #3c40434d 0px 1px 2px 0px;
        box-shadow: #3c404326 0px 1px 3px 1px;
        position: relative;
        cursor: pointer;
    
      }
      .item::after{
        content: "";
        position: absolute;
        top:8px;
        left: 0;
        z-index: 2;
        height: 60%;
        box-sizing: border-box;
        border-style: solid;
        border-color: transparent transparent transparent var(--color);
        border-width: 40px 40px 40px 40px;
        filter:drop-shadow( 5px 0 4px #00000094);
        transition: filter .5s;
      }
      .item2::after{
        content: "";
        position: absolute;
        top:8px;
        left: 0;
        z-index: 2;
        height: 60%;
        box-sizing: border-box;
        border-style: solid;
        border-color: transparent transparent transparent var(--color);
        border-width: 40px 40px 40px 40px;
        filter:drop-shadow( 5px 0 4px #00000094);
        transition: filter .5s;
      }
    
      .item:nth-child(2){
        ---color:#813085
      }
    
      .item:nth-child(3){
        ----color: #119630
      }
      .item2:nth-child(2){
        ---color:#813085
      }
    
      .item2:nth-child(3){
        ----color: #119630
      }
      .layer{
        
        height:  91%;
        margin: 20px;
        background-color: #f2f2f2;
        border: 1px solid #fff;
        border-radius: inherit;
        padding: 47%;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          position: relative;
    
          left:1px;
          transition: left 1s;
      }
      .layer1{
        
        height:  92%;
        margin: 15px;
        background-color: #f2f2f2;
        border: 1px solid #fff;
        border-radius: inherit;
        padding: 47.6%;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          position: relative;
    
          left:1px;
          transition: left 1s;
      }
      span{
        width: 22%;
        height: 20%;
        color:#fff;
        background-color: var(--color);
        border-radius: 20%;
        display: grid;
        place-content: center;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          font-size: 14px;
          position: absolute;
          right: 15px;
          
          top: 78%;
      }
     
      
    
      .item:hover:after{
        filter:drop-shadow(5px 0 4px #0000001a)
    
    
      }
      .item:hover .layer{
        left: 40px;
      }
      .item:hover .layer1{
        left: 40px;
      }
      .item2:hover:after{
        filter:drop-shadow(5px 0 4px #0000001a)
    
    
      }
      .item2:hover .layer{
        left: 40px;
      }
      .item2:hover .layer1{
        left: 70px;
      }
      .item .layer1 i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
      .item2 .layer i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
      .item .layer i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
    
    
    
    
      
    
    /* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
    .titulo_catalogo h2 {
      margin-left: 0%;
      font-size: 35px; /* Tamaño de fuente grande */
      font-weight: bold; /* Texto en negrita */
      text-transform: uppercase; /*Convierte el texto en mayúsculas */
      animation: fadeIn 3s ease; /* Animación de entrada suave */
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: 3rem; /* Tamaño de fuente inicial */
      font-weight: bold; /* Negrita */
      color: #003a75; /* Color del texto */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    
      /* Tamaño de fuente responsivo */
      font-size: 3vw;
    }
    .titulo_catalogo p{
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
      text-align: center;
    
    
    }
    .container7{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10vmin;
      font-family: sans-serif;
      overflow: hidden;
      transform:  skew(5deg);
    }
    .card3{
      flex: 1;
      transition: all 1s ease-in-out;
      height: 75vmin;
      position: relative;
    }
    .card3:not(:nth-child(5)){
      margin-right: 1em;
    }
    #imagen_catalogo{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 1s ease-in-out;
      filter: grayscale(0%);
    }
    .head3{
      color: black;
      background: #ff1eadbf;
      padding: 0.5em;
      transform:  rotate(-90deg);
      transform-origin: 0% 0%;
      transition:  all 0.5s ease-in-out;
      min-width:100% ;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 1em;
      white-space: nowrap;
    }
    
    
    .card3:hover{
      flex-grow: 10;
    }
    .card3:hover #imagen_catalogo {
    filter:grayscale(0);
    }
    
    .card3:hover .head3{
      text-align: center;
      top: calc(100% -2em);
      color: white;
      background: #00000080;
      font-size: 2em;
      transform: rotate(0deg) skew(-5deg);
    }
    
    
    /* detalle */
    
    .container8{
    
      background-color: #d9d8d8;
      width: 100%;
      height: 100%;
    }
    #enz_tajr{
      margin-top: 50px;
      margin-left: 2.8%;
      width: 100%;
      height: 100%;
    }
    .card7 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    .card8 {
      width: 100%;
      height:820px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      border-radius: 10px; /* Hace que los bordes sean curvos */
    }
    
    .card7:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card8:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    .card7 h5{
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
    }
    .card7 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card7 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    .card8 h5{
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
    }
    .card8 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card8 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    .productos {
      margin-top: 160px;
      text-align: center; /* Centra el contenido del contenedor */
      margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
    }
    
    .productos h6 {
      font-size: 35px; /* Tamaño de fuente grande */
      font-weight: bold; /* Texto en negrita */
      text-transform: uppercase; /*Convierte el texto en mayúsculas */
      animation: fadeIn 3s ease; /* Animación de entrada suave */
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: 3rem; /* Tamaño de fuente inicial */
      font-weight: bold; /* Negrita */
      color: #003a75; /* Color del texto */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    
      /* Tamaño de fuente responsivo */
      font-size: 3vw;
      
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0; /* Comienza con opacidad 0 */
        transform: translateY(-20px); /* Desplazamiento hacia arriba */
      }
      to {
        opacity: 1; /* Termina con opacidad 1 */
        transform: translateY(0); /* Sin desplazamiento */
      }
    }
    
    
    
    
    /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container9{
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 70%;
    }
    #enz_tajr2{
      margin-top: 110px;
      margin-left: 5.8%;
      width: 100%;
      height: 100%;
    }
    .card11 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    
    .card11:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card11:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card11 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card11 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    /* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
    
    /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    .footer {
      position: relative; /* Establece la posición relativa */
      margin-left: -50%;
      
    }
    
    
    .footer-container {
      position: relative; /* Establece la posición relativa */
      margin-left: -50%;
    }
    .move-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 999;
      width: 40px;
      height: 40px;
      background-color: #28a745;
      border-radius: 50%;
      color: #ffffff;
      display: none; /* Ocultar el botón por defecto */
      justify-content: center;
      align-items: center;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    
    .move-top.show {
      display: flex; /* Mostrar el botón cuando se agrega la clase 'show' */
    }
    
    .move-top:hover {
      background-color: #218838;
    }
    
    
    /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container10{
      margin: center;
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 70%;
    }
    #enz_tajr3{
     
      margin-top: 110px;
      margin-left: 29.8%;
      width: 100%;
      height: 100%;
    }
    .card12 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    
    .card12:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card12:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card12 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card12 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    /* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container11{
      margin: center;
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 90%;
    }
    #enz_tajr4{
     
      margin-top: 110px;
      margin-left: 7%;
      width: 100%;
      height: 100%;
    }
    #enz_tajr5{
     
      margin-top: 110px;
      margin-left: 7%;
      width: 100%;
      height: 100%;
    }
    .card13 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    .card14 {
      width: 100%;
      height: 600px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    .card13:hover,.card14:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card13:hover,.card14:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card13 h4,.card14 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card13 p,.card14 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    
    .form-demo {
      padding:1.5rem 0;
    }
    .form-demo h6, hr {
      font-size: 1.5rem;
      margin-bottom:1.5rem;
      font-family: Arial, Helvetica, sans-serif;
      
    }
    
    
    
    
    
    
    
    
    }
@media (min-width: 1600px)and (max-width: 1900px){


  .registrada{
    width: 30%;
    margin-top: -20px;
    margin-left: -180px;
    margin-right: 2%;
    
  }
  .Datos_contacto{
    width: 900px;
    margin-left: 100px;
  }
  .Datos_contacto .direccion{
    margin-bottom: 112px;
    margin-left: 10px;
    
  }
  .Datos_contacto .telefono{
    
    margin-left: -50px;
    margin-right: 30px ;
    margin-top: -8%;
    
  }
  .Datos_contacto .correo{
    
    margin-left: 30px;
    margin-right: 30px ;
    margin-bottom: 92px;
    
  }



  .compañia{
    margin-top: 5%;
    background-color: #d9d8d8;
    width: 94%;
    height: 400px;
    margin-left: 2.7%;
  }

  .compañia h2{
    margin-left: -30%;
    margin-top: 10%;
    
   

  }


  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10%;
  }

  .box1 {
    position: relative;
    width: 200px;
    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
}

.box1 span {
    position: absolute;
    width: 80%;
    height: 100%;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(390px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.box1 span img {
    width: 200px; /* Asegúrate de que la imagen sea cuadrada */
    height: 200px; /* Igual que el ancho */
    object-fit: cover;
    border-radius: 100%; /* Hace que la imagen sea circular */
   
    background-color: transparent;
}


.btns {
    margin-top: 270px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.btns .btn1 {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #011d38;
    border-radius: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btns .btn1:active {
    background-color: #011d38;
}

.btns .btn1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #011d38;
    border-right: 3px solid #011d38;
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}

.btns .btn1.prev::before {
    transform: rotate(225deg) translate(-2.5px, 2.5px);
}

.btns .btn1.next::before {
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}
 
 
 
 
 
  #carouselControls2 {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next2{
    margin-right: 180px;
  }
  
  
  
  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.3rem;
    height: 100%;
    width: 75%; 
    color: #003a75;
    margin-left: 25%;
    
    
  }
  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 22%;
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }
 .carousel2{
  height: 200px;
}

.carousel-caption1 h1 {
  position: relative;
  top: -200px;
  left: -77%;
  transform: translateY(-50%);
  text-align: right;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color: #000000;
  transform: scale(1.1);
  color: #003a75;

  max-width: 100%;
  height: auto;
}



.carousel-caption1 p {
  max-width: 100%;
  height: auto;
  position: relative;
  top: -200px;
  left: -60%;
  font-size: 1.2vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-family: Helvetica, sans-serif;
  text-align: right;
  color: #003a75;
  text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
  max-width: 1000px;
  height: auto;
}

.carousel-caption2 {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* Color del texto */
  width: 100%;
  height: auto;
}
/* Estilo para el texto en el carrusel */
.carousel-caption2 h2 {
  position: relative;
  top: -180px;
  margin-left: -36%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color:#FFF; /* Color del texto */
  transform: scale(1.1);
  width: 100%;
  height: auto;
}


.carousel-caption2 p {
  position: relative;
  top: -210px;
  margin-left: -2%;
  font-size: 1.5vw; 
  font-family: Helvetica, sans-serif;
  text-align:justify;
  color:#FFFF; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  max-width: 35%;
  height: auto;
}
.carousel-caption3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: right;
  color: #FFFF; /* Color del texto */
  max-width: 100%;
  height: auto;
}
/* Estilo para el texto en el carrusel */
.carousel-caption3 h2 {
  max-width: 100%;
  
  height: auto;
  position: relative;
  top: -250px;
  left: 600px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
  transition: all 0.3s ease-in-out;
  color: #003a75; /* Color del texto */
  transform: scale(1.1);
 
  height: auto;
}

/* Estilo para el texto de manera más moderna */
.carousel-caption3 p {
  position: relative;
  top: -270px;
  left: 580px;
  font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
  font-family: Helvetica, sans-serif;
  text-align: left;
  color: #003a75; /* Color del texto */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
  max-width: 100%;
  height: auto;
}
  
  
  
  
  
  
  
 
    
    
      .carousel-control-next-icon, .carousel-control-prev-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat 50% / 100% 100%;
      }
      
      
        
        .whatsapp-link i {
          color: #003a75; /* Cambia el color del icono a blanco */
      }
      
        #mapa .flex-shrink-0 iframe {
          width: 500px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
        }
      
        #mapa .flex-grow-1 {
          margin-left: 0%; /* Reducir el margen izquierdo */
        }
      
      
        #telefono1{
          width: 1000px;
          margin-left: 20px;
        }
      
        #mapa .container .row .telefono1,  
        #mapa .container .row .col-sm-3 {
          width: 1400px;
          margin-left: 0px;
        }
      
        /* Ajustes adicionales para alinear el contenido horizontalmente */
        #mapa .row {
          display: flex;
          margin-left: 10%;
          
         
          
        }
      
        #mapa .col-sm-1, #mapa .col-sm-3 {
          
          width: 1800px;
          padding-left: 30px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
        }
      
        #mapa .telefono1 h8, #mapa .col-sm-3 h8 {
          display: block;
          margin-bottom: 15px; /* Reducir el margen inferior de los encabezados */
        }
      
        #mapa .col-sm-1 p, #mapa .col-sm-3 p {
          margin-bottom: 5px; /* Reducir el margen inferior de los párrafos */
        }
      
      
        #footer .row {
          width: 90%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          text-align: center;
          margin: 6%;
         
      }
      
        
        .flex-wrap {
          margin-left: -4%;
      }
      #oterra{
        margin-left: 25%;
      }
      
      
        #whatsapp {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
      }
      svg {
          width: 80px;
          height: 80px;
          filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
          cursor: pointer; /* Cambia el cursor para indicar que es clicable */
      }
      circle {
          fill: #25d366;
      }
      path {
          fill: #fff;
      }
      
      
        
      
        .titulo_blog2 {
          width: 90%; /* Ancho del div */
       
        margin-left: 5%;
        margin-top: 2%;
        height: auto; /* Altura automática */
        /* Otros estilos */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4rem;
        line-height: 1.4;
        color: #003a75;
        text-align: justify;
      }
      
          
        
        .titulo_blog {
          width: 80%;
          height: auto;
          align-items: center;
          margin-left: 10%;
          background-image: url('../img/fondoprobiotico.png');
          
          background-position: center; /* Centrar la imagen */
          background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
        background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
      }
      
        .blog {
          display: flex; /* Activar el modelo de caja flexible */
          align-items: center; /* Alinear verticalmente los elementos */
      }
      
      .blog > div {
          flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
      }
      
      .blog img {
          width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
          margin-left: 8%;
      }
      .texto1 {
        width: 40%; /* Ancho del div */
        max-width: 700px;
        margin-right: 5%;
        margin-top: 5%;
        height: auto; /* Altura automática */
        /* Otros estilos */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4rem;
        line-height: 1.4;
        color: #003a75;
        text-align: justify;
      }
      
        
        
      
      
      
      
      .titulo_blog h2{
        width: 70%;
        
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 100px;
        margin-left: 2%;
       
        font-size: 3.5rem; /* Tamaño de fuente del título */
        font-weight: bold; /* Peso de la fuente en negrita */
        text-align: center; /* Alineación del texto al centro */
        margin-bottom: 20px; /* Margen inferior */
        color: #003a75; /* Color del texto */
        
      }
      
       
      
        #marcas .carousel-item img {
          margin-top: 10px;
          
          /* Ajusta el tamaño máximo de las imágenes en el carousel */
          max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
          height: auto; /* Mantiene la proporción de aspecto */
          align-items: center;
          margin-left: 40%;
          color: #003a75;
        }
        
      
      
      
      
      
      
        .container23{
          width: 80%;
          margin-top: 5%;
          align-items: center;
          margin-left: 13%;
        }
         .container23 img{
          width: 80%;
          height: 350px;
          margin-top: 90px;
          margin-left: -320px;
          border-radius: 8px;
      
        }
        .contanier23 p{
      
      margin-left: 200pc;
      
        } 
      
      
      
      
      
      
      
        /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
        
      
      #Contacto_qs p{
        width: 95%;
        margin-top: 20%;
        text-align: justify;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.5rem;
          margin-left: -30%;
      
      }
      .imagen_quienes {
        width: 90%;
        height: auto;
        margin-top: 15px;
        
      }

      #Contacto_qs button.btn {
        margin-top: 10px;
        margin-left: 42px;
        color: #fff;
        background-color: transparent;
        border: 2px solid #28a745;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
    }


      #Contacto_qs button.btn-outline-success {
        margin-top: 10px;
        margin-left: 0%;
        /* Cambiar el color del texto */
        color: #28a745;
        /* Cambiar el color de fondo */
        background-color: transparent;
        /* Agregar borde */
        border: 2px solid #28a745;
        /* Agregar padding */
        padding: 5px 10px;
        /* Añadir bordes redondeados */
        border-radius: 5px;
        /* Establecer el cursor a pointer */
        cursor: pointer;
      }
      .fondo-imagen {
        margin-top: -100px;
        background-image: url('../img/quienes_somos2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        height: 400px;
        position: relative;
        z-index: -1;
      
        /* Aplica un color de fondo con opacidad */
        background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
        background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
      
      
      
        
        /* Ajustes para el div */
        height: 1000px; /* Altura del div */
        position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
        text-align: center; /* Centrar texto horizontalmente */
        color: #210075; /* Color del texto */
        margin-bottom: 500px;
      }
      
      .texto-superpuesto {
        position: relative;
        top: 850px; /* Comienza desde arriba de la pantalla */
        left: 50%; /* Centrar horizontalmente */
        transform: translateX(-50%); /* Centrar horizontalmente */
        font-size: 1.5rem; /* Tamaño del texto */
        font-weight: 400; /* Hacer el texto más visible */
        text-align: center;
        width: 1332px;
        background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
        line-height: 1.2;
        padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
        
        
      }
      
      
      
      
      
      .contenedor11 {
        margin-left: 166PX;
        display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
        align-items: center; /* Centrar verticalmente el texto y la imagen */
        justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
        margin-bottom: 15%;
        margin-top: -15%;
        background-color: rgba(220, 216, 216, 0.8);
        height: 500px;
        width: 1332pX;
      }
      
      .mision {
        width: 600PX;
        padding-right: 20px; /* Espacio entre el texto y la imagen */
        
        
        margin-left: 50px;
        font-size: 1.5rem;
        text-align: justify;
        color: #003a75 ;
      
      }
      
      .mision_img img {
        width: 600px; /* Tamaño de la imagen */
        height: auto; /* Mantener proporción de la imagen */
        border-radius: 8px; /* Bordes redondeados */
        margin-left: 50px; /* Espacio entre la imagen y otros elementos */
        
        animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
      }
      
      /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
      @keyframes slideIn {
        from {
          opacity: 0; /* Comienza invisible */
          transform: translateX(-100px); /* Desplaza desde la izquierda */
        }
        to {
          opacity: 1; /* Completamente visible */
          transform: translateX(0); /* Sin desplazamiento */
        }
      }
      .contenedor12 {
        margin-left: 166PX;
        display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
        align-items: center; /* Centrar verticalmente el texto y la imagen */
        justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
        margin-bottom: 25%;
        margin-top: -10%;
        
        height: 500px;
        width: 1332PX;
      }
      
      .vision {
        width: 600PX;
        padding-right: 20px; /* Espacio entre el texto y la imagen */
        
        
        margin-left: 72px;
        font-size: 1.5rem;
        text-align: justify;
        color: #003a75 ;
      
      
      }
      
      .vision_img img {
        width: 600px; /* Tamaño de la imagen */
        height: auto; /* Mantener proporción de la imagen */
        border-radius: 8px; /* Bordes redondeados */
        margin-left: 50px; /* Espacio entre la imagen y otros elementos */
        
        animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
      }
      
      /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
      @keyframes slideIn {
        from {
          opacity: 0; /* Comienza invisible */
          transform: translateX(-100px); /* Desplaza desde la izquierda */
        }
        to {
          opacity: 1; /* Completamente visible */
          transform: translateX(0); /* Sin desplazamiento */
        }
      }
      
      
      
      
      
      /* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      
      
      
        body {
          margin: 0;
          padding: 0;
          background-color: #ffffff;
        }
       
        .contact-info {
          text-align: left;
          width: 1360PX;
          font-size: 16px; 
          margin: 0 auto;
          margin-left: 850px; 
          background-color: #28a745;
          
        }  
        
        .contact-info p {
           
          font-family: Arial, Helvetica, sans-serif; 
          font-size: 1.4rem;
          color: #1f0980;
          margin-top: -0.5%;
          margin-left: -47%;
        }
       
      
       
        
       
        .row {
          margin-top: 0px; /* Márgen superior */
          align-content: center;
          align-items: center;
          margin-left: 10%;
          
          
        }
        #logo2{
          margin-bottom: 0px;
          width: 400px;
          max-width: 100%;
          height: auto;
        }
        
        .col-5 {
          padding: 0px; /* Añade relleno alrededor de cada columna */
          
        }
        #p {
          width: 100%; /* Ancho del contenedor */
          max-width: 800px; /* Ancho máximo */
          padding: 20px; /* Relleno interior */
          text-align: justify; /* Alineación del texto al centro */
          margin-top: 120px;
          margin-left: 50px;
        }
        
        h2 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.5rem; /* Tamaño del texto */
          line-height: 1.5; /* Altura de línea */
          margin-bottom: 20px; /* Espaciado inferior */
          margin-left: -16%;
        }
        
        .btn {
          font-size: 18px;
          margin-left: 70%;
          padding: 10px 20px;
          
          
        }
      
        #texto{
          width: 88%;
        }
      
      /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      #tarjetas{
        margin-left: 10%;
        
      }
      
      .card {  
        margin-top: 20px;
        height: 400px; /* Establece una altura fija para todas las tarjetas */
        margin-left: 50px;
        width: 100%;
        
      }
      .card-body {
        height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
        display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
        flex-direction: column; /* Apila los elementos verticalmente */
        justify-content: center; /* Centra verticalmente los elementos */
        background: linear-gradient(to right, #8786868c, #ffffff);
        border: 2px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
      }
      
      .col-custom {
        transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
      }
      
      .col-custom:hover {
        transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
      }
      

      .tarjetasppal{
        width: 99.1%;
      }

      #titulop h3 {
        margin-top: 100px;
        font-size: 3.5rem; /* Tamaño de fuente del título */
        font-weight: bold; /* Peso de la fuente en negrita */
        text-align: center; /* Alineación del texto al centro */
        margin-bottom: 20px; /* Margen inferior */
        color: #011d38; /* Color del texto */
        
      }
      
      #titulop p {
        font-size: 1.2rem; /* Tamaño de fuente del párrafo */
        line-height: 1.6; /* Altura de línea */
        text-align: center; /* Alineación del texto al centro */
        color: #011d38; /* Color del texto */
      }
      
      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
        }
        to {
          opacity: 1;
          transform: translateX(0); /* Restaura la posición original */
        }
      }
      /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      #titulop h3{
       font-size: 3.5rem;
       font-weight: bold; /* Texto en negrita */
       color: #090909; /* Color del texto */
       text-transform: uppercase; /* Convierte el texto en mayúsculas */
       animation: fadeIn 1s ease; /* Animación de entrada suave */
       text-align: center;
       font-weight: bold; /* Negrita */
       color: #003a75; /* Color del texto */
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
      }
      #titulop p {
        animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        color: #003a75; /* Color del texto */
      }
      #titulo2 h5 {
        font-size: 3.5rem;
       font-weight: bold; /* Texto en negrita */
       color: #090909; /* Color del texto */
       text-transform: uppercase; /* Convierte el texto en mayúsculas */
       animation: fadeIn 1s ease; /* Animación de entrada suave */
       text-align: center;
       font-weight: bold; /* Negrita */
       color: #003a75; /* Color del texto */
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
       margin-bottom: 15px;
        
      }
      
      #titulo2 p {
        animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        color: #003a75; /* Color del texto */
        text-align: center; /* Alineación del texto al centro */
        
        
      }
      
      .aliados {
        position: relative;
        margin-bottom: 100px;
        margin-left: 200px;
        margin-right: 100px;
        margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
        width: 200px; /* Ancho de la tarjeta */
        height: 200px; /* Altura de la tarjeta */
        perspective: 1000px; /* Perspectiva para el efecto 3D */
        
      }
      
      .card-front, .card-back {
        position: relative;
        top: 100;
        left: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease;
        backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
      }
      
      .aliados:hover .card-front {
        transform: rotateY(180deg);
      }
      
      .aliados:hover .card-back {
        transform: rotateY(1deg);
      }
      
      .card-back p {
        margin-left: 20px;
        margin-top: -110px;
        width: 120%; /* Ancho de la caja del texto */
        font-size: 15px; /* Tamaño de fuente */
        line-height: 1.6; /* Altura de línea */
        color: #000000; /* Color de texto */  
        text-align: justify; /* Alineación del texto */
        border-radius: 0%; /* Borde redondeado */
        background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
        padding: 20px; /* Espaciado interno */
        position: absolute; /* Posición absoluta */
        
        transform: translate(-50%, -50%); /* Centrar */
        opacity: 0; /* Hacer que el texto no sea visible inicialmente */
        color: #087f18;
      }
      
      .container {
        perspective: 100px; /* Establece la perspectiva en el contenedor principal */
      }
      
      .aliados {
        transform-style: preserve-3d; /* Conserva la transformación 3D */
        transition: transform 10s ease; /* Transición suave para la rotación */
      }
      
      
      .aliados:hover .card-back p {
        opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
      }
      .aliados img {
        margin-top: -50px;
        
        margin-left: 30px;
        max-width: 130%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
        max-height: 130%; /* Establece la altura máxima de la imagen al 100% del contenedor */
        width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
        height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
        
      }
      .medio{
      background-color: #003a75;
      margin-top: 10px;
      }
      .medio p{
        margin-left: 25%;
        color: #ffffff;
        margin-top: -10px;
        
        }
        .medio h6{
          margin-left: 25%;
          color: #ffffff;
          margin-top: 30px;
          }
          .medio h7{
            margin-left: 25%;
            color: #ffffff;
            margin-top: -10px;
            }
      #copy{
        margin-top: -110px;
        color: #ffffff;
        height: 10px;
        text-align: center;
        margin-bottom: -100px;
      }
      
      /* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      
      /* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      /* porque elegirnos  */
      .elegir {
        margin-top: -100px;
        margin-bottom: -100px;
        position: relative;
        width: 100%;
        height: 1800px; /* Ajusta la altura según sea necesario */
        overflow: hidden;
      }
      
      .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f2f2f2b7; /* Color de fondo gris claro */
        z-index: -1;
      }
      
      .content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
      }
      
      .iconos, .texto {
        margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
      }
      
      /* Estilos para los iconos */
      .iconos {
        /* Estilos para los iconos */
      }
      
      /* Estilos para los textos */
      .texto {
        /* Estilos para los textos */
      }
      
      
      
      /* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      
      .titulop{
        
        font-size: 3.5rem;
       font-weight: bold; /* Texto en negrita */
       color: #090909; /* Color del texto */
       text-transform: uppercase; /* Convierte el texto en mayúsculas */
       animation: fadeIn 1s ease; /* Animación de entrada suave */
       text-align: center;
       font-weight: bold; /* Negrita */
       color: #003a75; /* Color del texto */
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
       margin-bottom: 100px;
       margin-top: -400px;
      }
      
      
        @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
        @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");
      
        .container5{
         height: 500px ;
         width: 1332px;
         margin-bottom:-3% ;
         margin-left: 10%;
      
        
         background-color: rgba(220, 216, 216, 0.8);
          
          display: flex;
          gap: 50px;
          align-items: center;
          justify-content: center;
          font-family: Arial, Helvetica, sans-serif;
          line-height: 1.5em;
        }
      
        .item p {
          margin-top: -200px;
          margin-left: -100px;
          width: 200px;
          height: 300px;
          font-size: 1.3rem; 
          text-align: justify;
          font-family: Arial, Helvetica, sans-serif;
          color: #555;
          line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
      }
      
       
        .item h3 {   
          width: 200px;
          height: 300px;    
          margin-left: -110px;
          margin-top: -120px;
          font-weight: 700;
          font-size: 1.5rem;
          text-align: justify;
          font-family: Arial, Helvetica, sans-serif;
          
          color: var(---color);
        }
        .item2 p {
          width: 200px;
          height: 300px;
          font-size: 20px; /* Tamaño de fuente */
          margin-left: -100px;
          
          text-align: justify;
          font-family: Arial, Helvetica, sans-serif;
          color: #555;
          line-height: 1.3; 
      
          color: #555;
         
        }
        
        .item2 h3 {
          margin-left: -120px;
          margin-top: -120px;
          width: 200px;
          
          font-weight: 700;
          text-align: justify;
          color: var(---color);
          font-size: 1.5rem;
          text-align: justify;
          font-family: Arial, Helvetica, sans-serif;
        }
        
        .item{
          margin-left: -20%;
          --color: #28a745;
          width: 350px;
          height: 450px;
          background-color:var(--color) ;
          border-radius: 10px;
          padding: 10px 5px;
          box-shadow: #3c40434d 0px 1px 2px 0px;
          box-shadow: #3c404326 0px 1px 3px 1px;
          position: relative;
          cursor: pointer;
      
        }
        .item2{
          margin-left: -20%;
          --color: #003a75;
          width: 350px;
          height: 450px;
          background-color:var(--color) ;
          border-radius: 10px;
          padding: 10px 5px;
          box-shadow: #3c40434d 0px 1px 2px 0px;
          box-shadow: #3c404326 0px 1px 3px 1px;
          position: relative;
          cursor: pointer;
      
        }
        .item::after{
          content: "";
          position: absolute;
          top:8px;
          left: 0;
          z-index: 2;
          height: 60%;
          box-sizing: border-box;
          border-style: solid;
          border-color: transparent transparent transparent var(--color);
          border-width: 40px 40px 40px 40px;
          filter:drop-shadow( 5px 0 4px #00000094);
          transition: filter .5s;
        }
        .item2::after{
          content: "";
          position: absolute;
          top:8px;
          left: 0;
          z-index: 2;
          height: 60%;
          box-sizing: border-box;
          border-style: solid;
          border-color: transparent transparent transparent var(--color);
          border-width: 40px 40px 40px 40px;
          filter:drop-shadow( 5px 0 4px #00000094);
          transition: filter .5s;
        }
      
        .item:nth-child(2){
          ---color:#813085
        }
      
        .item:nth-child(3){
          ----color: #119630
        }
        .item2:nth-child(2){
          ---color:#813085
        }
      
        .item2:nth-child(3){
          ----color: #119630
        }
        .layer{
          
          height:  91%;
          margin: 20px;
          background-color: #f2f2f2;
          border: 1px solid #fff;
          border-radius: inherit;
          padding: 47%;
          box-shadow: 
          #00000012 0px 1px 2px,
            #00000012 0px 2px 4px,
            #00000012 0px 4px 8px,
            #00000012 0px 8px 16px,
            #00000012 0px 16px 32px,
            #00000012 0px 32px 64px;
            position: relative;
      
            left:1px;
            transition: left 1s;
        }
        .layer1{
          
          height:  92%;
          margin: 15px;
          background-color: #f2f2f2;
          border: 1px solid #fff;
          border-radius: inherit;
          padding: 47.6%;
          box-shadow: 
          #00000012 0px 1px 2px,
            #00000012 0px 2px 4px,
            #00000012 0px 4px 8px,
            #00000012 0px 8px 16px,
            #00000012 0px 16px 32px,
            #00000012 0px 32px 64px;
            position: relative;
      
            left:1px;
            transition: left 1s;
        }
        span{
          width: 22%;
          height: 20%;
          color:#fff;
          background-color: var(--color);
          border-radius: 20%;
          display: grid;
          place-content: center;
          box-shadow: 
          #00000012 0px 1px 2px,
            #00000012 0px 2px 4px,
            #00000012 0px 4px 8px,
            #00000012 0px 8px 16px,
            #00000012 0px 16px 32px,
            #00000012 0px 32px 64px;
            font-size: 14px;
            position: absolute;
            right: 15px;
            
            top: 78%;
        }
       
        
      
        .item:hover:after{
          filter:drop-shadow(5px 0 4px #0000001a)
      
      
        }
        .item:hover .layer{
          left: 40px;
        }
        .item:hover .layer1{
          left: 40px;
        }
        .item2:hover:after{
          filter:drop-shadow(5px 0 4px #0000001a)
      
      
        }
        .item2:hover .layer{
          left: 40px;
        }
        .item2:hover .layer1{
          left: 70px;
        }
        .item .layer1 i {
          font-size: 30px; /* Tamaño deseado para el icono */
        }
        .item2 .layer i {
          font-size: 30px; /* Tamaño deseado para el icono */
        }
        .item .layer i {
          font-size: 30px; /* Tamaño deseado para el icono */
        }
      
      
      
      
        
      
      /* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      
      /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
        
      .titulo_catalogo h2 {
        margin-left: 0%;
        font-size: 35px; /* Tamaño de fuente grande */
        font-weight: bold; /* Texto en negrita */
        text-transform: uppercase; /*Convierte el texto en mayúsculas */
        animation: fadeIn 3s ease; /* Animación de entrada suave */
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 3rem; /* Tamaño de fuente inicial */
        font-weight: bold; /* Negrita */
        color: #003a75; /* Color del texto */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
      
        /* Tamaño de fuente responsivo */
        font-size: 3vw;
      }
      .titulo_catalogo p{
        animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        color: #003a75; /* Color del texto */
        text-align: center;
      
      
      }
      .container7{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10vmin;
        font-family: sans-serif;
        overflow: hidden;
        transform:  skew(5deg);
      }
      .card3{
        flex: 1;
        transition: all 1s ease-in-out;
        height: 75vmin;
        position: relative;
      }
      .card3:not(:nth-child(5)){
        margin-right: 1em;
      }
      #imagen_catalogo{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 1s ease-in-out;
        filter: grayscale(0%);
      }
      .head3{
        color: black;
        background: #ff1eadbf;
        padding: 0.5em;
        transform:  rotate(-90deg);
        transform-origin: 0% 0%;
        transition:  all 0.5s ease-in-out;
        min-width:100% ;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 1em;
        white-space: nowrap;
      }
      
      
      .card3:hover{
        flex-grow: 10;
      }
      .card3:hover #imagen_catalogo {
      filter:grayscale(0);
      }
      
      .card3:hover .head3{
        text-align: center;
        top: calc(100% -2em);
        color: white;
        background: #00000080;
        font-size: 2em;
        transform: rotate(0deg) skew(-5deg);
      }
      
      
      /* detalle */
      
      .container8{
      
        background-color: #d9d8d8;
        width: 100%;
        height: 100%;
      }
      #enz_tajr{
        margin-top: 50px;
        margin-left: 2.8%;
        width: 100%;
        height: 100%;
      }
      .card7 {
        width: 100%;
        height: 400px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        border-radius: 10px; /* Hace que los bordes sean curvos */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      }
      
      .card8 {
        width: 100%;
        height:820px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
        border-radius: 10px; /* Hace que los bordes sean curvos */
      }
      
      .card7:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      .card8:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      
      .card7 h5{
        
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        text-align: center;
      }
      .card7 h4{
        margin-top: 15px; ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-align: center;
      }
      .card7 p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
      }
      .card8 h5{
        
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        text-align: center;
      }
      .card8 h4{
        margin-top: 15px; ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-align: center;
      }
      .card8 p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
      }
      
      .productos {
        margin-top: 160px;
        text-align: center; /* Centra el contenido del contenedor */
        margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
      }
      
      .productos h6 {
        font-size: 35px; /* Tamaño de fuente grande */
        font-weight: bold; /* Texto en negrita */
        text-transform: uppercase; /*Convierte el texto en mayúsculas */
        animation: fadeIn 3s ease; /* Animación de entrada suave */
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 3rem; /* Tamaño de fuente inicial */
        font-weight: bold; /* Negrita */
        color: #003a75; /* Color del texto */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
      
        /* Tamaño de fuente responsivo */
        font-size: 3vw;
        
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0; /* Comienza con opacidad 0 */
          transform: translateY(-20px); /* Desplazamiento hacia arriba */
        }
        to {
          opacity: 1; /* Termina con opacidad 1 */
          transform: translateY(0); /* Sin desplazamiento */
        }
      }
      
      
      
      
      /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      /* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      .container9{
        background-image: url('/img/descarga.png');
        background-color: #d9d8d8;
        width: 100%;
        height: 70%;
      }
      #enz_tajr2{
        margin-top: 110px;
        margin-left: 5.8%;
        width: 100%;
        height: 100%;
      }
      .card11 {
        width: 100%;
        height: 400px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        border-radius: 10px; /* Hace que los bordes sean curvos */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      }
      
      
      
      .card11:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      .card11:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      
      
      .card11 h4{
        margin-top: 15px; ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-align: center;
      }
      .card11 p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
      }
      /* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
      
      /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      .footer {
        position: relative; /* Establece la posición relativa */
        margin-left: -50%;
        
      }
      
      
      .footer-container {
        position: relative; /* Establece la posición relativa */
        margin-left: -50%;
      }
      .move-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        width: 40px;
        height: 40px;
        background-color: #28a745;
        border-radius: 50%;
        color: #ffffff;
        display: none; /* Ocultar el botón por defecto */
        justify-content: center;
        align-items: center;
        text-decoration: none;
        transition: background-color 0.3s ease;
      }
      
      .move-top.show {
        display: flex; /* Mostrar el botón cuando se agrega la clase 'show' */
      }
      
      .move-top:hover {
        background-color: #218838;
      }
      
      
      /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      
      /* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      .container10{
        margin: center;
        background-image: url('/img/descarga.png');
        background-color: #d9d8d8;
        width: 100%;
        height: 70%;
      }
      #enz_tajr3{
       
        margin-top: 110px;
        margin-left: 29.8%;
        width: 100%;
        height: 100%;
      }
      .card12 {
        width: 100%;
        height: 400px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        border-radius: 10px; /* Hace que los bordes sean curvos */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      }
      
      
      
      .card12:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      .card12:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      
      
      .card12 h4{
        margin-top: 15px; ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-align: center;
      }
      .card12 p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
      }
      
      /* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
      .container11{
        margin: center;
        background-image: url('/img/descarga.png');
        background-color: #d9d8d8;
        width: 100%;
        height: 90%;
      }
      #enz_tajr4{
       
        margin-top: 110px;
        margin-left: 7%;
        width: 100%;
        height: 100%;
      }
      #enz_tajr5{
       
        margin-top: 110px;
        margin-left: 7%;
        width: 100%;
        height: 100%;
      }
      .card13 {
        width: 100%;
        height: 400px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        border-radius: 10px; /* Hace que los bordes sean curvos */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      }
      .card14 {
        width: 100%;
        height: 600px;
        border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
        border-radius: 10px; /* Hace que los bordes sean curvos */
        background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
        transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      }
      
      
      .card13:hover,.card14:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      .card13:hover,.card14:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
      }
      
      
      .card13 h4,.card14 h4{
        margin-top: 15px; ;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-align: center;
      }
      .card13 p,.card14 p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
      }
      
      
      .form-demo {
        padding:1.5rem 0;
      }
      .form-demo h6, hr {
        font-size: 1.5rem;
        margin-bottom:1.5rem;
        font-family: Arial, Helvetica, sans-serif;
        
      }
      
    }     
      
@media (min-width: 1901px){

  
  .carousel-item img {
    width: 100%; 
    height: 750px; 
    object-fit: cover; 
    
  }
 
  
  
  .informacion p{
    
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.4rem;
    height: 100%;
    width: 100%; 
    color: #003a75;
    margin-left: 39%;
    
    
  }
  #carouselControls2 {  
    max-width: 100%;
    height: auto; 
  }
  .carousel-control-next2{
    margin-right: 180px;
  }
  
  

  .empresas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10%;
  }

  .box1 {
    position: relative;
    width: 220px;
    
    transform-style: preserve-3d;
    transition: transform 3s;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
}

.box1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(390px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.box1 span img {
    width: 200px; /* Asegúrate de que la imagen sea cuadrada */
    height: 200px; /* Igual que el ancho */
    object-fit: cover;
    border-radius: 100%; /* Hace que la imagen sea circular */
   
    background-color: transparent;
}


.btns {
    margin-top: 270px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.btns .btn1 {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #011d38;
    border-radius: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btns .btn1:active {
    background-color: #011d38;
}

.btns .btn1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #011d38;
    border-right: 3px solid #011d38;
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}

.btns .btn1.prev::before {
    transform: rotate(225deg) translate(-2.5px, 2.5px);
}

.btns .btn1.next::before {
    transform: rotate(45deg) translate(-2.5px, 2.5px);
}


  .carousel2{
    height: 200px;
  }

  .carousel-caption1 h1 {
    position: relative;
    top: -200px;
    left: -80%;
    transform: translateY(-50%);
    text-align: right;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #000000;
    transform: scale(1.1);
    color: #003a75;
  
    max-width: 100%;
    height: auto;
  }
  
  
  
  .carousel-caption1 p {
    max-width: 100%;
    height: auto;
    position: relative;
    top: -200px;
    left: -60%;
    font-size: 1.2vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: right;
    color: #003a75;
    text-shadow: 2px 2px 4px rgba(6, 6, 6, 0.5);
    max-width: 1000px;
    height: auto;
  }

  .carousel-caption2 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Color del texto */
    width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption2 h2 {
    position: relative;
    top: -180px;
    margin-left: -40%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color:#FFF; /* Color del texto */
    transform: scale(1.1);
    width: 100%;
    height: auto;
  }
  
  
  .carousel-caption2 p {
    position: relative;
    top: -210px;
    margin-left: -2%;
    font-size: 1.5vw; 
    font-family: Helvetica, sans-serif;
    text-align:justify;
    color:#FFFF; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    max-width: 35%;
    height: auto;
  }
  .carousel-caption3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: right;
    color: #FFFF; /* Color del texto */
    max-width: 100%;
    height: auto;
  }
  /* Estilo para el texto en el carrusel */
  .carousel-caption3 h2 {
    max-width: 100%;
    
    height: auto;
    position: relative;
    top: -250px;
    left: 600px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Utiliza rgba para un sombreado con transparencia */
    transition: all 0.3s ease-in-out;
    color: #003a75; /* Color del texto */
    transform: scale(1.1);
   
    height: auto;
  }
  
  /* Estilo para el texto de manera más moderna */
  .carousel-caption3 p {
    position: relative;
    top: -270px;
    left: 580px;
    font-size: 1.5vw; /* Utiliza vw para un tamaño de fuente responsivo */
    font-family: Helvetica, sans-serif;
    text-align: left;
    color: #003a75; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    max-width: 100%;
    height: auto;
  }






  .t_datos h2 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    margin-top: 100px;
    margin-left: 2%;
    font-size: 3.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003a75;
}
 .tratamiento_datos{
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 100px;
    margin-left: 22%;
    font-size: 1.5rem;
    text-align: justify;
    margin-bottom: 20px;
    color: #000000;
 }


.Datos_contacto{
  width: 1000px;
  margin-left: 100px;
}
.Datos_contacto .direccion{
  margin-bottom: 120px;
  margin-left: 10px;
  
}
.Datos_contacto .telefono{
  
  margin-left: -50px;
  margin-right: 30px ;
  margin-top: -8%;
  
}
.Datos_contacto .correo{
  
  margin-left: 30px;
  margin-right: 30px ;
  margin-bottom: 100px;
  
}
    .carousel-control-next-icon, .carousel-control-prev-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: no-repeat 50% / 100% 100%;
    }
    
    
      
      .whatsapp-link i {
        color: #003a75; /* Cambia el color del icono a blanco */
    }
    
      #mapa .flex-shrink-0 iframe {
        width: 700px; /* Ajustar el ancho del iframe al 50% del contenedor padre */
      }
    
      #mapa .flex-grow-1 {
        margin-left: 0%; /* Reducir el margen izquierdo */
      }
    
    
      #telefono1{
        width: 1400px;
        margin-left: 20px;
      }
    
      #mapa .container .row .telefono1,  
      #mapa .container .row .col-sm-3 {
        width: 1400px;
        margin-left: 0px;
      }
    
      /* Ajustes adicionales para alinear el contenido horizontalmente */
      #mapa .row {
        display: flex;
        margin-left: 10%;
        
       
        
      }
    
      #mapa .col-sm-1, #mapa .col-sm-3 {
        
        width: 1800px;
        padding-left: 30px; /* Ajustar el padding izquierdo para reducir el espacio entre columnas */
      }
    
      #mapa .telefono1 h8, #mapa .col-sm-3 h8 {
        display: block;
        margin-bottom: 15px; /* Reducir el margen inferior de los encabezados */
      }
    
      #mapa .col-sm-1 p, #mapa .col-sm-3 p {
        margin-bottom: 5px; /* Reducir el margen inferior de los párrafos */
      }
    
    
      #footer .row {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin: 6%;
       
    }
    
      
      .flex-wrap {
        margin-left: 5%;
    }
    #oterra{
      margin-left: 25%;
    }
    
    
      #whatsapp {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    }
    svg {
        width: 80px;
        height: 80px;
        filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
        cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    }
    circle {
        fill: #25d366;
    }
    path {
        fill: #fff;
    }
    
    
      
    
      .titulo_blog2 {
        width: 90%; /* Ancho del div */
     
      margin-left: 5%;
      margin-top: 2%;
      height: auto; /* Altura automática */
      /* Otros estilos */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.4rem;
      line-height: 1.4;
      color: #003a75;
      text-align: justify;
    }
    
        
      
      .titulo_blog {
        width: 80%;
        height: auto;
        align-items: center;
        margin-left: 10%;
        background-image: url('../img/fondoprobiotico.png');
        
        background-position: center; /* Centrar la imagen */
        background-color: rgba(255, 255, 255, 0.90); /* Blanco con 50% de opacidad */
      background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
    }
    
      .blog {
        display: flex; /* Activar el modelo de caja flexible */
        align-items: center; /* Alinear verticalmente los elementos */
    }
    
    .blog > div {
        flex: 1; /* El texto y la imagen ocuparán el mismo espacio */
    }
    
    .blog img {
        width: 90%; /* Asegurarse de que la imagen no supere su contenedor */
        margin-left: 8%;
    }
    .texto1 {
      width: 40%; /* Ancho del div */
      max-width: 700px;
      margin-right: 5%;
      margin-top: 5%;
      height: auto; /* Altura automática */
      /* Otros estilos */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.4rem;
      line-height: 1.4;
      color: #003a75;
      text-align: justify;
    }
    
      
      
    
    
    
    
    .titulo_blog h2{
      width: 70%;
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2.5rem;
      margin-top: 100px;
      margin-left: 2%;
     
      font-size: 3.5rem; /* Tamaño de fuente del título */
      font-weight: bold; /* Peso de la fuente en negrita */
      text-align: center; /* Alineación del texto al centro */
      margin-bottom: 20px; /* Margen inferior */
      color: #003a75; /* Color del texto */
      
    }
    
     
    
      #marcas .carousel-item img {
        margin-top: 10px;
        
        /* Ajusta el tamaño máximo de las imágenes en el carousel */
        max-width: 20%; /* Ajusta el ancho máximo al 100% del contenedor */
        height: auto; /* Mantiene la proporción de aspecto */
        align-items: center;
        margin-left: 40%;
        color: #003a75;
      }
      
    
    
    
    
    
    
      .container23{
        width: 80%;
        margin-top: 5%;
        align-items: center;
        margin-left: 13%;
      }
       .container23 img{
        width: 80%;
        height: 350px;
        margin-top: 90px;
        margin-left: -320px;
        border-radius: 8px;
    
      }
      .contanier23 p{
    
    margin-left: 200pc;
    
      } 
    
    
    
    
    
    
    
      /* Contactto quienes somos ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .compañia{
      margin-top: 10%;
      background-color: #d9d8d8;
      width: 95%;
      margin-left: 2.7%;
    }

    .compañia h2{
      margin-left: -30%;
      margin-top: -50px;
      
     

    }

    #Contacto_qs button.btn-outline-success {
      margin-top: 10px;
      margin-left: 20%;
      color: #ffff;
      
      border: 2px solid #28a745;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
  }


    #Contacto_qs p{
      width: 95%;
      margin-top: 5%;
      text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        margin-left: -20%;
    
    }
    .imagen_quienes {
      width: 80%;
      height: auto;
      margin-top: 0px;
      
    }
    #Contacto_qs button.bg-success {
      margin-top: 10px;
      margin-left: 200px;
      /* Cambiar el color del texto */
      color: #fff;
      /* Cambiar el color de fondo */
      background-color: transparent;
      /* Agregar borde */
      border: 2px solid #28a745;
      /* Agregar padding */
      padding: 5px 10px;
      /* Añadir bordes redondeados */
      border-radius: 5px;
      /* Establecer el cursor a pointer */
      cursor: pointer;
    }
    .fondo-imagen {
      margin-top: -100px;
      background-image: url('../img/quienes_somos2.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      
      height: 400px;
      position: relative;
      z-index: -1;
    
      /* Aplica un color de fondo con opacidad */
      background-color: rgba(255, 255, 255, 0.0); /* Blanco con 50% de opacidad */
      background-blend-mode: overlay; /* Mezcla la imagen de fondo con el color de fondo */
    
    
    
      
      /* Ajustes para el div */
      height: 1000px; /* Altura del div */
      position: relative; /* Para permitir la posición absoluta de elementos dentro del div */
      text-align: center; /* Centrar texto horizontalmente */
      color: #210075; /* Color del texto */
      margin-bottom: 500px;
    }
    
    .texto-superpuesto {
      position: relative;
      top: 850px; /* Comienza desde arriba de la pantalla */
      left: 50%; /* Centrar horizontalmente */
      transform: translateX(-50%); /* Centrar horizontalmente */
      font-size: 1.5rem; /* Tamaño del texto */
      font-weight: 400; /* Hacer el texto más visible */
      text-align: center;
      width: 1332px;
      background-color: rgba(220, 216, 216, 0.8); /* Hace el fondo transparente */
      line-height: 1.2;
      padding: 20px; /* Ajusta el relleno interno para mejorar la legibilidad */
      
      
    }
    
    
    
    
    
    .contenedor11 {
      margin-left: 284PX;
      display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
      align-items: center; /* Centrar verticalmente el texto y la imagen */
      justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
      margin-bottom: 15%;
      margin-top: -15%;
      background-color: rgba(220, 216, 216, 0.8);
      height: 500px;
      width: 1332pX;
    }
    
    .mision {
      width: 600PX;
      padding-right: 20px; /* Espacio entre el texto y la imagen */
      
      
      margin-left: 50px;
      font-size: 1.5rem;
      text-align: justify;
      color: #003a75 ;
    
    }
    
    .mision_img img {
      width: 600px; /* Tamaño de la imagen */
      height: auto; /* Mantener proporción de la imagen */
      border-radius: 8px; /* Bordes redondeados */
      margin-left: 50px; /* Espacio entre la imagen y otros elementos */
      
      animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
    }
    
    /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
    @keyframes slideIn {
      from {
        opacity: 0; /* Comienza invisible */
        transform: translateX(-100px); /* Desplaza desde la izquierda */
      }
      to {
        opacity: 1; /* Completamente visible */
        transform: translateX(0); /* Sin desplazamiento */
      }
    }
    .contenedor12 {
      margin-left: 284PX;
      display: flex; /* Utiliza Flexbox para alinear elementos en una fila */
      align-items: center; /* Centrar verticalmente el texto y la imagen */
      justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
      margin-bottom: 25%;
      margin-top: -10%;
      
      height: 500px;
      width: 1332PX;
    }
    
    .vision {
      width: 600PX;
      padding-right: 20px; /* Espacio entre el texto y la imagen */
      
      
      margin-left: 72px;
      font-size: 1.5rem;
      text-align: justify;
      color: #003a75 ;
    
    
    }
    
    .vision_img img {
      width: 600px; /* Tamaño de la imagen */
      height: auto; /* Mantener proporción de la imagen */
      border-radius: 8px; /* Bordes redondeados */
      margin-left: 50px; /* Espacio entre la imagen y otros elementos */
      
      animation: slideIn 1.5s ease-in-out; /* Aplica la animación al ingresar */
    }
    
    /* Define la animación para que la imagen deslice desde la izquierda y se desvanezca */
    @keyframes slideIn {
      from {
        opacity: 0; /* Comienza invisible */
        transform: translateX(-100px); /* Desplaza desde la izquierda */
      }
      to {
        opacity: 1; /* Completamente visible */
        transform: translateX(0); /* Sin desplazamiento */
      }
    }
    
    
    
    
    
    /* contacto quieenes somos----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    
    
      body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
      }
     


      .informacion{
        background-color: #28a745;
        height: 40px;
        width: 100%;
        
        
        
        
        
        
        }
        .informacion p{
          
          font-family: Arial, Helvetica, sans-serif; 
          font-size: 1.5rem;
          height: 100%;
          width: 67%; 
          color: #003a75;
          margin-left: 33%;
          text-align: center;
          align-items: center;
         
          
        }    
     
      
     
      .row {
        margin-top: 0px; /* Márgen superior */
        align-content: center;
        align-items: center;
        margin-left: 10%;
        
        
      }
      #logo2{
        margin-top: 0;
        margin-bottom: -30px;
        width: 600px;
        max-width: 100%;
        height: auto;
      }
      
      .col-5 {
        padding: 0px; /* Añade relleno alrededor de cada columna */
        
      }
      #p {
        width: 100%; /* Ancho del contenedor */
        max-width: 800px; /* Ancho máximo */
        padding: 20px; /* Relleno interior */
        text-align: justify; /* Alineación del texto al centro */
        margin-top: 120px;
        margin-left: 50px;
      }
      
      h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem; /* Tamaño del texto */
        line-height: 1.5; /* Altura de línea */
        margin-bottom: 20px; /* Espaciado inferior */
        margin-left: -16%;
      }
      
      .btn {
        font-size: 18px;
        margin-left: 75%;
        padding: 10px 20px;
        
        
      }
    
      #texto{
        width: 88%;
      }
    
    /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    #tarjetas{
      margin-left: 9%;
      width: 91%;
    }
    
    .card {  
      margin-top: 20px;
      height: 500px; /* Establece una altura fija para todas las tarjetas */
      margin-left: 70px;
      width: 100%;
      border-radius: 30px; /* Bordes redondeados para la tarjeta */
      border-radius: 30px; /* Bordes redondeados para la tarjeta */
     
   
      
    }

    .card-img-top {
      border-top-left-radius: 30px; /* Bordes redondeados en la parte superior izquierda de la imagen */
      border-top-right-radius: 30px; /* Bordes redondeados en la parte superior derecha de la imagen */
  }
    .card-body {
      height: 100%; /* Establece la altura del cuerpo de la tarjeta al 100% */
      display: flex; /* Utiliza flexbox para alinear verticalmente los elementos */
      flex-direction: column; /* Apila los elementos verticalmente */
      justify-content: center; /* Centra verticalmente los elementos */
      background: linear-gradient(to right, #8786868c, #ffffff);
      border: 2px solid #0a8118; /* Agrega un borde sólido de 2px de ancho de color negro */
      border-bottom-left-radius: 30px; /* Bordes redondeados en la parte inferior izquierda del cuerpo */
      border-bottom-right-radius: 30px;
    }
    
    .col-custom {
      transition: transform 0.3s ease; /* Agrega una transición suave para el efecto de zoom */
    }
    
    .col-custom:hover {
      transform: scale(1.1); /* Hace que el elemento se agrande un 10% al pasar el mouse */
    }
    
    #titulop h3 {
      margin-top: 100px;
      font-size: 3.5rem; /* Tamaño de fuente del título */
      font-weight: bold; /* Peso de la fuente en negrita */
      text-align: center; /* Alineación del texto al centro */
      margin-bottom: 20px; /* Margen inferior */
      color: #011d38; /* Color del texto */
    }
    
    #titulop p {
      font-size: 1.2rem; /* Tamaño de fuente del párrafo */
      line-height: 1.6; /* Altura de línea */
      text-align: center; /* Alineación del texto al centro */
      color: #011d38; /* Color del texto */
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-50px); /* Desplaza los elementos hacia la izquierda */
      }
      to {
        opacity: 1;
        transform: translateX(0); /* Restaura la posición original */
      }
    }
    /* TARJETA DE PRODUCTOS INICIO -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    #titulop h3{
     font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    }
    #titulop p {
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
    }
    #titulo2 h5 {
      font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
     margin-bottom: 15px;
      
    }
    
    #titulo2 p {
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
      text-align: center; /* Alineación del texto al centro */
      
      
    }
    
    .aliados {
      position: relative;
      margin-bottom: 100px;
      margin-left: 200px;
      margin-right: 100px;
      margin-top: 60px; /* Ajusta el margen inferior según sea necesario */
      width: 200px; /* Ancho de la tarjeta */
      height: 200px; /* Altura de la tarjeta */
      perspective: 1000px; /* Perspectiva para el efecto 3D */
      
    }
    
    .card-front, .card-back {
      position: relative;
      top: 100;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
      backface-visibility: hidden; /* Oculta la parte trasera de la tarjeta */
    }
    
    .aliados:hover .card-front {
      transform: rotateY(180deg);
    }
    
    .aliados:hover .card-back {
      transform: rotateY(1deg);
    }
    
    .card-back p {
      margin-left: 20px;
      margin-top: -110px;
      width: 120%; /* Ancho de la caja del texto */
      font-size: 15px; /* Tamaño de fuente */
      line-height: 1.6; /* Altura de línea */
      color: #000000; /* Color de texto */  
      text-align: justify; /* Alineación del texto */
      border-radius: 0%; /* Borde redondeado */
      background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */
      padding: 20px; /* Espaciado interno */
      position: absolute; /* Posición absoluta */
      
      transform: translate(-50%, -50%); /* Centrar */
      opacity: 0; /* Hacer que el texto no sea visible inicialmente */
      color: #087f18;
    }
    
    .container {
      perspective: 100px; /* Establece la perspectiva en el contenedor principal */
    }
    
    .aliados {
      transform-style: preserve-3d; /* Conserva la transformación 3D */
      transition: transform 10s ease; /* Transición suave para la rotación */
    }
    
    
    .aliados:hover .card-back p {
      opacity: 1; /* Mostrar el texto al pasar el mouse sobre la tarjeta */
    }
    .aliados img {
      margin-top: -50px;
      
      margin-left: 30px;
      max-width: 130%; /* Establece el ancho máximo de la imagen al 100% del contenedor */
      max-height: 130%; /* Establece la altura máxima de la imagen al 100% del contenedor */
      width: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
      height: auto; /* Permite que la imagen se ajuste automáticamente según el tamaño del contenedor */
      
    }
    .medio{
    background-color: #003a75;
    margin-top: 10px;
    }
    .medio p{
      margin-left: 25%;
      color: #ffffff;
      margin-top: -10px;
      
      }
      .medio h6{
        margin-left: 25%;
        color: #ffffff;
        margin-top: 30px;
        }
        .medio h7{
          margin-left: 25%;
          color: #ffffff;
          margin-top: -10px;
          }
    #copy{
      margin-top: -110px;
      color: #ffffff;
      height: 10px;
      text-align: center;
      margin-bottom: -100px;
    }
    
    /* Imagen de Quienes somos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* Imagen de contactenos --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* porque elegirnos  */
    .elegir {
      margin-top: -100px;
      margin-bottom: -100px;
      position: relative;
      width: 100%;
      height: 1800px; /* Ajusta la altura según sea necesario */
      overflow: hidden;
    }
    
    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f2f2f2b7; /* Color de fondo gris claro */
      z-index: -1;
    }
    
    .content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding-top: 0px; /* Ajusta el espaciado superior según sea necesario */
    }
    
    .iconos, .texto {
      margin-top: 20px; /* Espaciado entre los iconos/textos y el borde superior */
    }
    
    /* Estilos para los iconos */
    .iconos {
      /* Estilos para los iconos */
    }
    
    /* Estilos para los textos */
    .texto {
      /* Estilos para los textos */
    }
    
    
    
    /* Porque elegirnos -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    .titulop{
      
      font-size: 3.5rem;
     font-weight: bold; /* Texto en negrita */
     color: #090909; /* Color del texto */
     text-transform: uppercase; /* Convierte el texto en mayúsculas */
     animation: fadeIn 1s ease; /* Animación de entrada suave */
     text-align: center;
     font-weight: bold; /* Negrita */
     color: #003a75; /* Color del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
     margin-bottom: 100px;
     margin-top: -400px;
    }
    
    
      @import url("https://fonst.googleapis.com/css2?family=Varela+Round");
      @import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");
    
      .container5{
       height: 500px ;
       width: 1332px;
       margin-bottom:-3% ;
       margin-left: 15%;
    
      
       background-color: rgba(220, 216, 216, 0.8);
        
        display: flex;
        gap: 50px;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5em;
      }
    
      .item p {
        margin-top: -200px;
        margin-left: -100px;
        width: 200px;
        height: 300px;
        font-size: 1.3rem; 
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        color: #555;
        line-height: 1.3; /* Ajusta este valor según desees aumentar el espacio entre líneas */
    }
    
     
      .item h3 {   
        width: 200px;
        height: 300px;    
        margin-left: -110px;
        margin-top: -120px;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        
        color: var(---color);
      }
      .item2 p {
        width: 200px;
        height: 300px;
        font-size: 20px; /* Tamaño de fuente */
        margin-left: -100px;
        
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        color: #555;
        line-height: 1.3; 
    
        color: #555;
       
      }
      
      .item2 h3 {
        margin-left: -120px;
        margin-top: -120px;
        width: 200px;
        
        font-weight: 700;
        text-align: justify;
        color: var(---color);
        font-size: 1.5rem;
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      .item{
        margin-left: -20%;
        --color: #28a745;
        width: 350px;
        height: 450px;
        background-color:var(--color) ;
        border-radius: 10px;
        padding: 10px 5px;
        box-shadow: #3c40434d 0px 1px 2px 0px;
        box-shadow: #3c404326 0px 1px 3px 1px;
        position: relative;
        cursor: pointer;
    
      }
      .item2{
        margin-left: -20%;
        --color: #003a75;
        width: 350px;
        height: 450px;
        background-color:var(--color) ;
        border-radius: 10px;
        padding: 10px 5px;
        box-shadow: #3c40434d 0px 1px 2px 0px;
        box-shadow: #3c404326 0px 1px 3px 1px;
        position: relative;
        cursor: pointer;
    
      }
      .item::after{
        content: "";
        position: absolute;
        top:8px;
        left: 0;
        z-index: 2;
        height: 60%;
        box-sizing: border-box;
        border-style: solid;
        border-color: transparent transparent transparent var(--color);
        border-width: 40px 40px 40px 40px;
        filter:drop-shadow( 5px 0 4px #00000094);
        transition: filter .5s;
      }
      .item2::after{
        content: "";
        position: absolute;
        top:8px;
        left: 0;
        z-index: 2;
        height: 60%;
        box-sizing: border-box;
        border-style: solid;
        border-color: transparent transparent transparent var(--color);
        border-width: 40px 40px 40px 40px;
        filter:drop-shadow( 5px 0 4px #00000094);
        transition: filter .5s;
      }
    
      .item:nth-child(2){
        ---color:#813085
      }
    
      .item:nth-child(3){
        ----color: #119630
      }
      .item2:nth-child(2){
        ---color:#813085
      }
    
      .item2:nth-child(3){
        ----color: #119630
      }
      .layer{
        
        height:  91%;
        margin: 20px;
        background-color: #f2f2f2;
        border: 1px solid #fff;
        border-radius: inherit;
        padding: 47%;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          position: relative;
    
          left:1px;
          transition: left 1s;
      }
      .layer1{
        
        height:  92%;
        margin: 15px;
        background-color: #f2f2f2;
        border: 1px solid #fff;
        border-radius: inherit;
        padding: 47.6%;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          position: relative;
    
          left:1px;
          transition: left 1s;
      }
      span{
        width: 22%;
        height: 20%;
        color:#fff;
        background-color: var(--color);
        border-radius: 20%;
        display: grid;
        place-content: center;
        box-shadow: 
        #00000012 0px 1px 2px,
          #00000012 0px 2px 4px,
          #00000012 0px 4px 8px,
          #00000012 0px 8px 16px,
          #00000012 0px 16px 32px,
          #00000012 0px 32px 64px;
          font-size: 14px;
          position: absolute;
          right: 15px;
          
          top: 78%;
      }
     
      
    
      .item:hover:after{
        filter:drop-shadow(5px 0 4px #0000001a)
    
    
      }
      .item:hover .layer{
        left: 40px;
      }
      .item:hover .layer1{
        left: 40px;
      }
      .item2:hover:after{
        filter:drop-shadow(5px 0 4px #0000001a)
    
    
      }
      .item2:hover .layer{
        left: 40px;
      }
      .item2:hover .layer1{
        left: 70px;
      }
      .item .layer1 i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
      .item2 .layer i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
      .item .layer i {
        font-size: 30px; /* Tamaño deseado para el icono */
      }
    
    
    
    
      
    
    /* elegirnos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
      
    .titulo_catalogo h2 {
      margin-left: 0%;
      font-size: 35px; /* Tamaño de fuente grande */
      font-weight: bold; /* Texto en negrita */
      text-transform: uppercase; /*Convierte el texto en mayúsculas */
      animation: fadeIn 3s ease; /* Animación de entrada suave */
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: 3rem; /* Tamaño de fuente inicial */
      font-weight: bold; /* Negrita */
      color: #003a75; /* Color del texto */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    
      /* Tamaño de fuente responsivo */
      font-size: 3vw;
    }
    .titulo_catalogo p{
      animation: slideIn 0.5s ease-in-out forwards; /* Aplica la animación */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #003a75; /* Color del texto */
      text-align: center;
    
    
    }
    .container7{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10vmin;
      font-family: sans-serif;
      overflow: hidden;
      transform:  skew(5deg);
    }
    .card3{
      flex: 1;
      transition: all 1s ease-in-out;
      height: 75vmin;
      position: relative;
    }
    .card3:not(:nth-child(5)){
      margin-right: 1em;
    }
    #imagen_catalogo{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 1s ease-in-out;
      filter: grayscale(0%);
    }
    .head3{
      color: black;
      background: #ff1eadbf;
      padding: 0.5em;
      transform:  rotate(-90deg);
      transform-origin: 0% 0%;
      transition:  all 0.5s ease-in-out;
      min-width:100% ;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 1em;
      white-space: nowrap;
    }
    
    
    .card3:hover{
      flex-grow: 10;
    }
    .card3:hover #imagen_catalogo {
    filter:grayscale(0);
    }
    
    .card3:hover .head3{
      text-align: center;
      top: calc(100% -2em);
      color: white;
      background: #00000080;
      font-size: 2em;
      transform: rotate(0deg) skew(-5deg);
    }
    
    
    /* detalle */
    
    .container8{
    
      background-color: #d9d8d8;
      width: 100%;
      height: 100%;
    }
    #enz_tajr{
      margin-top: 50px;
      margin-left: 2.8%;
      width: 100%;
      height: 100%;
    }
    .card7 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    .card8 {
      width: 100%;
      height:820px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
      border-radius: 10px; /* Hace que los bordes sean curvos */
    }
    
    .card7:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card8:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    .card7 h5{
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
    }
    .card7 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card7 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    .card8 h5{
      
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
    }
    .card8 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card8 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    .productos {
      margin-top: 160px;
      text-align: center; /* Centra el contenido del contenedor */
      margin-bottom: 140px; /* Añade un margen inferior para separar el título del contenido siguiente */
    }
    
    .productos h6 {
      font-size: 35px; /* Tamaño de fuente grande */
      font-weight: bold; /* Texto en negrita */
      text-transform: uppercase; /*Convierte el texto en mayúsculas */
      animation: fadeIn 3s ease; /* Animación de entrada suave */
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: 3rem; /* Tamaño de fuente inicial */
      font-weight: bold; /* Negrita */
      color: #003a75; /* Color del texto */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.546); /* Sombra de texto */
    
      /* Tamaño de fuente responsivo */
      font-size: 3vw;
      
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0; /* Comienza con opacidad 0 */
        transform: translateY(-20px); /* Desplazamiento hacia arriba */
      }
      to {
        opacity: 1; /* Termina con opacidad 1 */
        transform: translateY(0); /* Sin desplazamiento */
      }
    }
    
    
    
    
    /* enzimas----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* ASEO ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container9{
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 70%;
    }
    #enz_tajr2{
      margin-top: 110px;
      margin-left: 5.8%;
      width: 100%;
      height: 100%;
    }
    .card11 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    
    .card11:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card11:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card11 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card11 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    /* aseo------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
    
    /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    .footer {
      position: relative; /* Establece la posición relativa */
      margin-left: -50%;
      
    }
    
    
    .footer-container {
      position: relative; /* Establece la posición relativa */
      margin-left: -50%;
    }
    .move-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 999;
      width: 40px;
      height: 40px;
      background-color: #28a745;
      border-radius: 50%;
      color: #ffffff;
      display: none; /* Ocultar el botón por defecto */
      justify-content: center;
      align-items: center;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    
    .move-top.show {
      display: flex; /* Mostrar el botón cuando se agrega la clase 'show' */
    }
    
    .move-top:hover {
      background-color: #218838;
    }
    
    
    /* BONTON DE SUBIR EN FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    
    /* LABORATORIO --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container10{
      margin: center;
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 70%;
    }
    #enz_tajr3{
     
      margin-top: 110px;
      margin-left: 29.8%;
      width: 100%;
      height: 100%;
    }
    .card12 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    
    .card12:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card12:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card12 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card12 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    /* colorantes  quimicos ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    .container11{
      margin: center;
      background-image: url('/img/descarga.png');
      background-color: #d9d8d8;
      width: 100%;
      height: 90%;
    }
    #enz_tajr4{
     
      margin-top: 110px;
      margin-left: 7%;
      width: 100%;
      height: 100%;
    }
    #enz_tajr5{
     
      margin-top: 110px;
      margin-left: 7%;
      width: 100%;
      height: 100%;
    }
    .card13 {
      width: 100%;
      height: 400px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    .card14 {
      width: 100%;
      height: 600px;
      border: 1px solid #28a745; /* Establece un borde de 1px de ancho y color #28a745 */
      border-radius: 10px; /* Hace que los bordes sean curvos */
      background: linear-gradient(45deg, #fff, #d2d2ee48); /* Aplica un fondo en tornasol */
      transition: all 0.3s ease; /* Agrega una transición suave a todos los cambios */
    }
    
    
    .card13:hover,.card14:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    .card13:hover,.card14:hover {
      transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse sobre la tarjeta */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra alrededor de la tarjeta */
    }
    
    
    .card13 h4,.card14 h4{
      margin-top: 15px; ;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
      text-align: center;
    }
    .card13 p,.card14 p{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-align: center;
    }
    
    
    .form-demo {
      padding:1.5rem 0;
    }
    .form-demo h6, hr {
      font-size: 1.5rem;
      margin-bottom:1.5rem;
      font-family: Arial, Helvetica, sans-serif;
      
    }
    
    
    
    
    
    
    
    
    }