/* Contenedor principal */
.sectcontact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px; /* Ajusta el espaciado interior según sea necesario */
}

/* Contenedor para imagen y lista */
.content-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Estilo para imágenes */
.responsive-img {
  margin-right: 20px;
}

/* Estilo para secciones de texto */
.text-section {
  max-width: 100%; /* Ajusta el ancho máximo según tus necesidades */
  margin-bottom: 20px;
  padding: 0 20px; /* Ajusta el espaciado interior según sea necesario */
  text-align: justify; /* Justifica el texto */
}

/* Estilos para la línea horizontal */
#horizontal-line {
  width: 60%;
  height: 10px;
  background-color: #9CBF50;
  border-radius: 5px;
  margin: 20px 0; /* Ajusta el margen superior e inferior según sea necesario */
}

/* Estilo para las imágenes */
.pdf {
  transition: transform 0.3s ease;
}

.pdf:hover {
  transform: translateY(-5px);
}

/* Estilos para preguntas y glosario */
#preguntas, #glosario {
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.5; /* Espaciado entre líneas */
  letter-spacing: 1px; /* Espaciado entre letras */
  display: inline-block; /* Coloca los elementos en línea */
  width: calc(50% - 10px); /* Establece el ancho al 50% del contenedor menos el espacio */
  max-width: 500px; /* Establece el ancho máximo */
  margin: 10px; /* Espacio alrededor de los elementos */
  padding: 20px; /* Agrega un espacio alrededor del contenido dentro del div */
  background-color: #f0f0f0; /* Color de fondo del div */
  border: 1px solid #ccc; /* Agrega un borde alrededor del div */
  box-sizing: border-box; /* Incluye el borde y el relleno en el ancho y alto del div */
  vertical-align: top; /* Alinea los elementos verticalmente en la parte superior */
}

/* Consultas de medios para adaptabilidad */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .responsive-img {
    margin-right: 0;
    margin-bottom: 20px;
  }

  #preguntas, #glosario {
    width: 100%; /* Ancho completo para pantallas pequeñas */
    max-width: none; /* Sin límite de ancho */
    margin: 10px 0; /* Espacio superior e inferior */
  }

  #horizontal-line {
    width: 80%; /* Ajusta el ancho para pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  #preguntas, #glosario {
    padding: 15px; /* Reduce el relleno en pantallas muy pequeñas */
    font-size: 14px; /* Tamaño de fuente más pequeño */
  }

  .sectcontact {
    padding: 15px; /* Reduce el relleno del contenedor en pantallas muy pequeñas */
  }
}