@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap');


@font-face 
    {
        font-family: 'Author';
        src: url('fonts/author.woff2') format('woff2'),
         url('fonts/author.ttf') format('truetype');

    }

body 
{
    font-family: 'Author', sans-serif;
   
    

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #1D1D1B;
    color: white;
}



footer {
    background-color: transparent;
    color: white;
    text-align: left;
    padding: 1rem;
    position: fixed;
    width: 90%;
    bottom: 0;
    
}

header {
    position: absolute;
    top: 0;
    width: 90%;
    display: flex;
    justify-content: space-between;/* Logo a la izquierda, menú a la derecha */
    align-items: center;/* Centrar verticalmente */
    padding: 10px 20px; /* Ajustar espaciado */
    background-color: transparent; /* Hacer el fondo del header transparente */
	margin-right: 0px; /* Ajusta el valor según sea necesario */
    flex-wrap: wrap; /* Permite que el contenido se ajuste en pantallas pequeñas */
    font-size: 20px;
}



nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en líneas nuevas si es necesario */
    justify-content: flex-start; /* Alinea los elementos a la izquierda */
    align-items: flex-end;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 20px;
}

nav ul li a:hover {
    color: #E0F561;
}

























		
.logo {
    height: 60px; /* Tamaño base del logotipo */
    width: auto; /* Mantener la proporción del logotipo */
}

@media (max-width: 768px) {
    .logo {
        height: 40px; /* Ajustar el tamaño del logotipo para pantallas medianas */
    }
}

@media (max-width: 480px) {
    .logo {
        height: 30px; /* Ajustar el tamaño del logotipo para pantallas pequeñas */
    }
}		

























main {
    padding: 0rem;
}

section {
    margin-bottom: 0rem;
}


.banner {
    width: 100%;

    max-height: 4000px; /* Ajusta la altura máxima del banner según sea necesario */
    margin: 0; /* Eliminar márgenes */
    margin-bottom: 0rem;
}
.banner2 {
    width: 100%;
    height: 100vh;
    height: 150px; /* Cambia este valor según el alto que desees */
    margin: 0; /* Eliminar márgenes */

}
.banner2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* o contain, según el efecto que quieras */
}

.section-3 {
    height: 100px;
    width: 100%;
    background-color:#E0F561;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2%; /* Superposición del 10% sobre la sección anterior */
    padding: 0; /* Asegura que no haya espacios internos */
    position: relative; /* Asegura que no sea afectado por otros elementos */   
}

.section-3 p {
    font-size: 40px;
    color: #1D1D1B;;
    text-align: center;
    margin: 0;
}

/* Ocultar en pantallas pequeñas */
@media (max-width: 768px) {
    .section-3 {
        display: none;
    }
}





@media (max-width: 768px) {
    header {
        flex-direction: column; /* Cambiar a una columna en pantallas medianas */
        align-items: center; /* Centrar los elementos */
    }

    .logo {
        margin-bottom: 1rem; /* Añadir margen inferior al logotipo */
    }

    .banner-text {
        top: 100%;
        left: 5%;
        font-size: 1rem; /* Ajusta el tamaño de fuente para pantallas más pequeñas */
        
    }
    nav ul {
        justify-content: center; /* Centrar el menú en pantallas pequeñas */
    }  
    /* Reducir el tamaño de la fuente en el menú para pantallas pequeñas */
    nav ul li a {
        font-size: 12px;
    }    
}

@media (max-width: 480px) {
    header {
        flex-direction: column; /* Cambiar a una columna en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
        padding: 0.1rem; /* Reducir el padding en pantallas pequeñas */
    }

    .logo {
        height: 30px; /* Ajustar el tamaño del logotipo para pantallas pequeñas */
        margin-bottom: 1rem; /* Añadir margen inferior al logotipo */
    }

    nav {
        display: none; /* Ocultar la sección de navegación */
    }

    .banner-text {
        display: none; /* Ocultar la sección de texto del banner */
	}		

    
}











#home {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
	background-color: #1D1D1B; /* Cambiar el color de fondo */
}


.section-8 {
    display: flex;
    width: 100%;
    min-height: 400px;
    background-color: #1D1D1B; /* Cambiar el color de fondo */
    
}

/* Primera columna - Imagen */
.section-8 .col-1 {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita desbordamientos */
}

/* Segunda columna - Contenido */
.section-8 .col-2 {
    width: 45%;
    background-color: #1D1D1B;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 50px;
}

/* Título centrado */
.section-8 .title {
    font-size: 40px;
    text-align: center;
    font-weight: bold;
}

/* Filas con títulos y párrafos */
.section-8 .row {
    margin-top: 10px;
}

.section-8 .row h3 {
    text-align: center;
    font-size: 20px;
}

.section-8 .row p {
    text-align: justify;
    font-size: 18px;
}

/* Ocultar primera columna en pantallas pequeñas */
@media (max-width: 768px) {
    .section-8 {
        flex-direction: column;
    }
    .section-8 .col-1 {
        display: none;
    }
    .section-8 .col-2 {
        width: 80%;
    }
}





.section-9 {
   width: 100%;
    height: 100vh; /* Ajusta según necesidad */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    position: relative;
    text-align: center; /* Asegura que todo el contenido esté centrado */
    margin-top: -11%; /* Superposición del 10% sobre la sección anterior */
}

.section-9 img 
{
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción sin cortar la imagen */
}

/* Ocultar la sección 9 en pantallas pequeñas */
@media (max-width: 768px) {
    .section-9 {
        display: none;
    }
}




























.section-2 {
    margin: 5px;
    display: flex;
    width: 90%;
    min-height: 400px;
}

/* Primera columna (33%) con imagen */
.col-1 {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita desbordamientos */
}

.col-1 img {
    width: 100%;
    height: 100%;
    display: block; /* Elimina espacios en blanco */
}

/* Segunda columna (67%) */
.col-2 {
    width: 67%;
    display: flex;
    flex-direction: column;
    padding: 0px;
    background-color: #1D1D1B;
}

/* Líneas dentro de la segunda columna */
.linea {
    display: flex;
    width: 100%;
    margin-bottom: 0px;
}

/* Línea 1: 1 columna */
.col-full {
    width: 100%;
    background-color: #1D1D1B;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 35px; /* Cambia el tamaño de la letra aquí */
    font-weight: bold; /* Opcional: hace el texto más grueso */   
}

/* Línea 2 y 3: 2 columnas */
.col-half {
    width: 50%;
    background-color: #1D1D1B;
    color: white;
    padding: 10px;
    text-align: center;
}

/* RESPONSIVE: Ocultar la primera columna en pantallas pequeñas */
@media (max-width: 768px) 
{
    .col-1 
    {
        display: none;
    }
    
    .col-2 
    {
        width: 100%;
    }

    /* Adaptar las columnas en pantallas pequeñas */
    .col-half 
    {
        width: 100%;
        margin-bottom: 10px;
    }
    
}


.col-full, .col-half {
    text-align: justify; /* Justifica el texto */
}
.col-full {
    width: 100%;
    background-color: #1D1D1B;
    color: white;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    text-align: justify; /* Justifica el texto */
}

.col-half {
    width: 50%;
    background-color: #1D1D1B5;
    color: white;
    padding: 15px;
    text-align: justify; /* Justifica el texto */
}
@media (max-width: 768px) {
    .col-full, .col-half {
        font-size: 16px; /* Reduce el tamaño en pantallas pequeñas */
        text-align: justify;
    }
}







.enlace1 
    {
        color: #E0F561;
    }

.enlace1:hover 
    {
        color: white;
    }


.enlace2 
    {
        color: white;
        font-size: 16px;
        text-decoration: NONE; /* Subraya el enlace */
    }

.enlace1:hover 
    {
        color: #E0F561;
    }









#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0rem;
    background-color: #1D1D1B; /* Mantener el color de fondo consistente */
    color: white;
}

#about img {
    width: 100%;
    height: auto;
    max-width: 1200px; /* Ajusta el tamaño máximo de la imagen según sea necesario */
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    #about {
        display: none; /* Ocultar la sección en pantallas pequeñas */
    }
}




/* Estilos generales para tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: white;
    border-radius: 0px;
    overflow: hidden;
}

/* Encabezados centrados */
th {
    background-color: #1D1D1B;
    color: white;
    padding: 0px;
    text-align: center;
    font-size: 24px;
}

/* Celdas de la tabla */
td {
    background-color: #1D1D1B;
    border: 0px solid #ddd;
    padding: 0px;
    text-align: justify;
    font-size: 12px;
}

/* Ajuste responsive */
@media (max-width: 768px) {
    .col-half {
        width: 100%; /* Hace que las tablas ocupen todo el ancho en móviles */
        margin-bottom: 10px;
    }
}




/* Primera columna: texto de 12px */
.col-text 
    {
      width: 95%;
      margin: 20px;
      font-size: 34px;
      color:#1D1D1B; /* Opcional: para que el texto se vea sobre fondo rojo */
      display: flex;
      align-items: center; /* Centra verticalmente el texto */
      

      font-family: 'Author Semibold ', sans-serif;
      font-weight: 600;
      font-style: normal;
    }

/* Segunda columna: imagen con link */
.col-image {
  width: 5%;
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
}

.col-image img {
  width: 100%;
  height: auto;
  max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
}


















.section-6 
    {
      background-color: inherit;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      font-size: 14px;
    }

.section-6 .col 
    {
      flex: 1;
      padding: 10px;
      color: white;
      text-align: center;
      align-items: center; 
    }


/* Para pantallas pequeñas, las columnas se apilan verticalmente */
@media (max-width: 768px) 
    {
      .section-6 {
        flex-direction: column;
        height: 20px; /* Ajustar el tamaño del logotipo para pantallas pequeñas */ 
      }
    }
    
.contact-info {
  display: flex;
  align-items: center; /* Centra verticalmente los elementos */
  justify-content: center; /* Centra horizontalmente los elementos */
  gap: 10px; /* Espacio entre los elementos */
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
  text-align: center; /* Asegura que el texto esté alineado correctamente */
  width: 100%; /* Ocupa todo el ancho disponible */  
}

.contact-info img {
   width: 25px;
  height: 25px; 
}

.contact-info a, .contact-info span {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px; /* Espaciado entre ícono y texto */
}
/* Estilos para pantallas pequeñas */
@media (max-width: 600px) {
  .contact-info {
    flex-direction: column; /* Cambia el diseño a una columna */
    text-align: center;
    gap: 15px; /* Aumenta el espacio entre los elementos */
  }
  
  .contact-info img {
    width: 20px;
    height: 20px;
  }

  .contact-info a, .contact-info span {
    font-size: 14px;
  }
}

        .contact-form {
            background: #1d1d1b;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(184, 187, 197, 0.1);
            width: 100%;
            max-width: 300px;
            text-align: center;
            
        }

        .contact-form h2 {
            margin-bottom: 15px;
            font-size: 20px;
        }

        .contact-form input,
        .contact-form textarea {
            width: 90%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 20px;
            font-size: 14px;
            background-color: #B8C2C5;
        }

        .contact-form button {
            width: 100%;
            padding: 10px;
            background-color: #E0F561;
            color: black;
            border: none;
            border-radius: 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .contact-form button:hover {
            background-color: #B8C2C5;
        }

        @media (max-width: 600px) {
            .contact-form {
                width: 90%;
            }
        }
        
.section-10 {
    width: 100%;
    max-width: 1450px; /* Evita que se extienda demasiado */

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center; /* Asegura que todo el contenido esté centrado */
    margin-top: -10%; /* Superposición del 10% sobre la sección anterior */

   
}

.section-10 img {
    width: 95%;
    height: 95%;
    object-fit: contain; /* Mantiene la proporción sin cortar la imagen */
}

/* Ocultar la sección 10 en pantallas pequeñas */
@media (max-width: 768px) {
    .section-10 {
        display: none;
    }
}







.section-11 {
     width: 100%;
    max-width: 1450px; /* Evita que se extienda demasiado */
    margin: 0 auto; /* Centra la sección */
    display: flex;
    justify-content: space-between; /* Distribuye las columnas con espacios iguales entre ellas */
    align-items: flex-start; /* Asegura que los títulos queden alineados */
    gap: 20px; /* Espaciado entre las columnas */
    background: linear-gradient(90deg, #E0F561 0%, #B8C2C5 100%); /* Degradado de los colores */
}

.section-11 .column:nth-child(1) {
    flex: 0.2; /* Primera columna más pequeña */
}

.section-11 .column:nth-child(2) {
    flex: 1; /* Segunda columna más grande */
}

.section-11 .column:nth-child(3) {
    flex: 1; /* Tercera columna con tamaño intermedio */
}

.section-11 .column:nth-child(4) {
    flex: 1; /* Tercera columna con tamaño intermedio */
}

.section-11 .column:nth-child(5) {
    flex: 0.2; /* Tercera columna con tamaño intermedio */
}








/* Estilos para las columnas */
.section-11 .column {
    flex: 1; /* Todas las columnas del mismo tamaño */
    
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Asegura que el botón se quede abajo */
    text-align: center;
}

/* Asegura que todos los títulos estén alineados */
.section-11 .column h2 {
    min-height: 50px; /* Ajusta según sea necesario */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: black;
}

/* Justificar el texto dentro de las columnas */
.section-11 .column p {
    text-align: justify;
    flex-grow: 1; /* Hace que el párrafo ocupe el espacio restante */
    color: black;
    font-size: 20px;
}

/* Estilos para el botón */
.btn-ver-mas {
    display: inline-block;
    background-color: #E0F561;
    color: black;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px; /* Espacio entre el párrafo y el botón */
    align-self: center;
}

/* Efecto al pasar el mouse */
.btn-ver-mas:hover {
    background-color: #B8C2C5;
}

/* Diseño responsive: en pantallas pequeñas las columnas se apilan */
@media (max-width: 768px) {
    .section-11 {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .section-11 .column {
        width: 90%;
    }
}


.section-12 {
    width: 100%;
    height: 100vh; /* Ajustar la altura según sea necesario */
    background-image: url("https://regenevetbiotech.com/imagenes/Caballo.png"); /* Cambia por la URL de la imagen */
    background-size: cover; /* Ajusta la imagen al tamaño de la sección */
    background-position: center; /* Centrar la imagen */
    display: flex;
    align-items: flex-start; /* Alinear la columna arriba */
    justify-content: flex-start; /* Alinear la columna a la izquierda */
    margin: 0 auto; /* Centra la sección */
    position: relative;  
}

.section-12 .content {
    max-width: 400px; /* Ajustar el ancho del contenido */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    padding: 20px;
    border-radius: 10px;
    color: white;
    margin-top: 50px;
    margin-left: 80px;
}

.section-12 h2 {
    font-size: 30px;
    margin-bottom: 10px;
    text-align: left;
}

.section-12 p {
    font-size: 20px;
    text-align: left;
}

/* **Estilos para pantallas pequeñas** */
@media (max-width: 768px) {
    .section-12 {
        display: none;
    }
   
}



/* Estilos para la sección 15 */
.section-14 {
    height: 80px;
    width: 100%;

    display: flex;
    justify-content: flex-start;
    padding-left: 0px; 

    background: linear-gradient(180deg,  #B8C2C5 30%,#E0F561 70%); /* Degradado de los colores */
}

/* Estilo del título */
.section-14 h2 {
  font-size: 3vw; /* Escalable según el ancho de la pantalla */
  color: black;
  max-width: 100%;
}
.section-14 h1 {
  font-size: 1.1vw; /* Escalable según el ancho de la pantalla */
  color: black;
  margin-top: 0.5;
  max-width: 100%;
}
.section-14 a {
  text-decoration: none;
  color: black;
}

/* Estilos para la sección 15 */
.section-15 {
    height: 100px;
    width: 100%;
    background-color:#E0F561;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2%; /* Superposición del 10% sobre la sección anterior */
    padding: 0; /* Asegura que no haya espacios internos */
    position: relative; /* Asegura que no sea afectado por otros elementos */   
}

/* Estilo del título */
.section-15 h2 {
  font-size: 3vw; /* Escalable según el ancho de la pantalla */

  color: black;
  margin: 0;
  max-width: 100%;
}


.section-16 {
  display: flex;
  flex-wrap: wrap; /* Permite que las columnas se acomoden en pantallas pequeñas */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.section-16 .columna {
  flex: 1 1 50%; /* Ocupa el 50% del ancho */
  padding: 20px;
  box-sizing: border-box;
}

/* Columna 1 arriba y columna 2 abajo en pantallas pequeñas */
@media (max-width: 768px) {
  .section-16 {
    flex-direction: column;
  }

  .section-16 .columna {
    width: 100%;
    padding: 15px 10px;
  }
}


.section-17 {
  width: 100%;
  padding: 20px 0px;
  text-align: center;
}

.titulo-17 {
  font-size: 28px;
  margin: 0;
  color: white; /* o cualquier otro color */
}

.titulo-172 {
  font-size: 24px;
  margin: 0;
  color: white; /* o cualquier otro color */
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .titulo-17 {
    font-size: 24px;
  }
}

.section-18 {
  width: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
}

.texto-18 {
  text-align: justify;
  font-size: 16px;
  color: white; /* Color del texto */
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsive: ajusta tamaño del texto en pantallas pequeñas */
@media (max-width: 768px) {
  .texto-18 {
    font-size: 14px;
    padding: 0 10px;
  }
}

.section-19 {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: stretch; /* Asegura alturas iguales */

}
.columna-izquierda {
  width: 80%;
  text-align: left;
  padding: 40px;
  color: #E0F561;
}

.columna-derecha {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .section-19 {
    flex-direction: row; /* MANTENER EN FILA */
  }

  .columna-izquierda {
    flex: 9;
  }

  .columna-derecha {
    flex: 1;
    align-items: center;
  }
}



.section-20 {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
}

.col-izquierda {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-izquierda img {
  width: 35%; /* 50% del tamaño original */
  height: auto;
}

.col-derecha {
  width: 80%;
  padding: 0px;
  text-align: justify;
}

/* Responsive: ocultar imagen en pantallas pequeñas */
@media (max-width: 768px) {
  .col-izquierda {
    display: none;
  }

  .col-derecha {
    width: 100%;
  }
}


.section-21 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.section-21 img {
  width: 12%; /* 50% del tamaño original */
  height: auto;
}

/* Ocultar en pantallas pequeñas */
@media (max-width: 768px) {
  .section-21 {
    display: none;
  }
}


.section-22 {
  width: 100%;
  border: 3px solid white; /* Marco blanco delgado */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espacio entre filas */
  background: linear-gradient(90deg, #E0F561 0%, #B8C2C5 100%); /* Degradado de los colores */
}

.section-22 .fila {
  width: 100%;
  text-align: center;
  color: black; /* Opcional para mejor visibilidad */
}

/* Responsive: ya está en una columna, así que solo aseguramos adaptabilidad */
@media (max-width: 768px) {
  .section-22 {
    padding: 10px;
  }

  .section-22 .fila {
    font-size: 14px;
  }
}

.section-23 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.section-23 img {
  width: auto;
  max-width: 50%;
  height: auto;
  display: block;
}

/* Ocultar en pantallas pequeñas */
@media (max-width: 768px) {
  .section-23 {
    display: none;
  }
}