/* Paleta de colores */
:root {
    --highlight-color: #fab917; /* Amarillo */
    --dark-green: #055d3d; /* Verde oscuro */
    --aqua-green: #75d2c1; /* Verde aguamarina */
    --deep-green: #055c3c; /* Verde profundo */
    --sunny-yellow: #f6c341; /* Amarillo soleado */
    --light-cream: #f8faec; /* Crema claro */
    --forest-green: #387965; /* Verde bosque */
    --golden-yellow: #fbac05; /* Amarillo dorado */
    --sea-green: #309177; /* Verde mar */
    --pure-white: #ffffff; /* Blanco puro */
  }
  
  /* Estilos del Header */
  header {
    border-bottom: 4px solid var(--highlight-color);
  }
  
  .logo-container img, .logo-footer-container img {
    max-height: 100%;
    margin-right: 20px;
  }
  
  /* Estilos para el texto junto al logo */
  .company-name {
    color: var(--highlight-color);
    font-weight: bold;
    font-size: 2em;
    margin-left: 10px;
  }
  
/* Footer */
.main-footer {
  background-color: var(--light-cream);
  color: var(--dark-green);
  padding: 20px 0;
}

.footer-logo {
  max-width: 100%;
  height: auto;
  max-height: 150px; /* Ajusta el logo de manera responsiva */
}

.servicios-links a {
  color: var(--dark-green);
}

.footer-bottom {
  background-color: var(--deep-green);
  padding: 20px 0;
  color: var(--pure-white);
}

.social-icons a {
  color: var(--pure-white);
  margin-right: 15px;
}

/* Aplicar el color blanco a todos los enlaces en el footer */
.main-footer a:link, .main-footer a:visited, .main-footer a:hover, .main-footer a:active {
  color: var(--dark-green);
}

/* Asegurar que los contenidos de cada columna del footer estén centrados verticalmente */
.main-footer .col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Opcional: Ajustes para los enlaces para asegurar coherencia visual */
.main-footer ul {
  padding: 0;
  list-style-type: none; /* Remueve los bullets de la lista */
}

.main-footer ul li a {
  padding: 5px 0; /* Añade un poco de padding para separar los enlaces */
}

.footer-line {
  height: 4px; /* Ajusta el grosor de la línea */
  background-color: var(--highlight-color); /* Utiliza el color amarillo definido */
}



@media (max-width: 768px) {
  .footer-bottom {
      flex-direction: column;
      text-align: center;
  }
  .social-icons a {
      margin: 0 10px 10px 10px; /* Ajusta el margen de los iconos de redes sociales para pantallas pequeñas */
  }
}

  
  /* Estilos personalizados para secciones y tarjetas */
  .section-home-1, .section-home-2, .section-home-4 {
    background-color: var(--pure-white);
    color: var(--deep-green);
    padding: 5% 0;
  }
  
.row {
    display: flex;
    flex-wrap: wrap;
}

.col-lg-6 {
    display: flex;
    flex: 1; /* Hace que las columnas ocupen todo el espacio disponible */
}
.custom-card {
  background: linear-gradient(to bottom, var(--deep-green), var(--aqua-green));
  color: var(--pure-white);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Esto distribuye el espacio interior de manera uniforme */
}

/* Asegúrate de que la imagen se ajuste al tamaño de su contenedor */
.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto hace que la imagen cubra completamente el contenedor sin perder sus proporciones */
}
  
.custom-card2 {
  background: linear-gradient(135deg, var(--deep-green), var(--aqua-green));
  color: var(--pure-white);
  border: none;
  display: flex; /* Activa Flexbox */
  flex-direction: column; /* Distribuye los elementos en una columna */
  justify-content: space-between; /* Distribuye el espacio de manera uniforme */
  min-height: 500px; /* Establece una altura mínima en lugar de una fija */
}

.custom-card3 {
  background: linear-gradient(135deg, var(--deep-green), var(--aqua-green));
  color: var(--pure-white);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye el espacio interior de manera uniforme */
  width: 100%
}




.map, .map iframe {
  min-height: 450px; /* Establece una altura mínima para el mapa */
}

  .custom-card4 {
    background: linear-gradient(135deg, var(--deep-green), var(--aqua-green));
    color: var(--pure-white);
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Esto distribuye el espacio interior de manera uniforme */
  }
  

  .card-img-top {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* Ajustes adicionales según necesidad, asegurándote de usar solo colores de tu paleta */
  /* Nosotros */
.section-title {
  color: var(--forest-green);
}

/* Nosotros */
.section-title {
  color: var(--forest-green);
}

.custom-card-nosotros {
  background: linear-gradient(135deg, var(--deep-green), var(--aqua-green));
  color: var(--pure-white);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Esto distribuye el espacio interior de manera uniforme */
}

/* Video */
.video-container {
  width: 100%;
  position: relative;
  padding-top: 56.25%; /* Mantener la relación de aspecto de 16:9 */
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre el área del contenedor manteniendo las proporciones */
}


  /*Vacantes  */
  .vacante-card {
    background: linear-gradient(135deg, var(--deep-green), var(--aqua-green));
    color: var(--pure-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
  }
  
  
  /* Servicios*/
  /* Título de la Sección */
  .section-title {
    color: var(--golden-yellow); /* Utiliza una variable de color existente o define una nueva si es necesario */
  }
  
  /* Tarjetas de Servicios */
  .service-card {
    background: linear-gradient(to right, var(--deep-green), var(--aqua-green)); /* Ajusta los colores según tu paleta */
    color: var(--pure-white);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 15px;
    overflow: hidden;
  }
  
  /* Títulos de las Tarjetas de Servicios */
  .service-card-title {
    color: var(--golden-yellow); /* Asegúrate de usar un color de tu paleta que ofrezca suficiente contraste */
  }
  
  
  /* BLOG**/
  
  /* Título de la Sección de Blog */
  .blog-title {
    color: var(--deep-green); /* Cambiado de azul a verde profundo */
  }
  
  /* Título de las Entradas del Blog */
  .blog-entry-title {
    color: var(--deep-green); /* Cambiado de azul a verde profundo */
  }
  
  /* Texto de las Entradas del Blog */
  .blog-text, .full-content p {
    color: var(--dark-green); /* Ajustado a un color oscuro de tu paleta, si no existe --dark-green, reemplázalo con un color adecuado */
  }
  
  /* Separador de las Entradas del Blog */
  .blog-separator {
    border-top: 3px solid var(--sea-green); /* Mantenido en amarillo para el separador */
  }
  
  /* Imagen del Blog */
  .blog-image {
    height: 200px;
    width: 100%;
    object-fit: cover;
  }
  
  
  /** Contacto */
  
  /* Título de la Sección de Contacto */
  .contact-title {
    color: var(--deep-green); /* Ajusta el color según tu paleta */
  }
  
  /* Texto de la Sección de Contacto */
  .contact-text {
    color: var(--dark); /* Ajusta el color según tu paleta, por ejemplo, un gris oscuro */
  }
  
  /* Tarjeta de la Sección de Contacto */
  .contact-card {
    background-color: var(--light-cream); /* Ajusta el color según tu paleta, por ejemplo, un gris claro o crema */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  
  /* Título de la Tarjeta en la Sección de Contacto */
  .card-title {
    color: var(--golden-yellow); /* Asegúrate de que el color proporcione suficiente contraste */
  }
  
  /* Aviso de privacidad*/

  main {
    width: 100%;
    overflow: hidden; /* Asegura que todo el contenido se mantenga dentro de los límites del elemento principal */
  }
  
  .content {
    margin: 0 auto; /* Centra el contenido */
    padding: 20px; /* Añade algo de espacio alrededor del contenido */
    max-width: 1200px; /* Establece un ancho máximo para evitar que el contenido se extienda demasiado en monitores grandes */
  }
  
  .wrapper {
    margin: 20px; /* Añade espacio alrededor del contenido para mejorar la legibilidad */
  }
  
  @media (max-width: 768px) {
    .wrapper {
      margin: 10px; /* Reduce el margen en dispositivos más pequeños */
    }
  
    .content h3, .content p {
      font-size: smaller; /* Reduce el tamaño del texto para una mejor legibilidad en pantallas pequeñas */
    }
  }
  
  /* Estilos para la tabla, si es necesario */
  .table-container {
    width: 100%;
    overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es más ancha que la pantalla */
  }
  
  .table-cell, .table-row {
    display: block; /* Hace que las celdas y las filas de la tabla se comporten como bloques para una mejor adaptación en pantallas pequeñas */
  }

  main {
    text-align: justify;
  }