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

/* Contenido interno */
.sectcontact .content {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Alinea el contenido desde el inicio del eje transversal */
  justify-content: center; /* Centra el contenido horizontalmente */
  text-align: left; /* Para que el texto dentro del párrafo esté alineado a la izquierda */
  gap: 20px; /* Espaciado entre el texto y la imagen */
  max-width: 1000px; /* Ancho máximo del contenedor */
  width: 100%; /* Usa todo el ancho disponible */
}

.sectcontact p {
  width: 65%; /* Aumentado de 50% a 65% para hacer el texto más ancho */
  margin: 0; /* Elimina el margen del párrafo */
  text-align: justify;
  flex: 1; /* Permite que el párrafo sea flexible */
}

.sectcontact img {
  max-width: 35%; /* Reducido proporcionalmente para dar más espacio al texto */
  height: auto;
  flex-shrink: 0; /* Evita que la imagen se comprima */
}

/****************************************************/
.row {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centra las columnas horizontalmente */
  gap: 40px; /* Espaciado entre las columnas */
  margin-top: 20px; /* Espaciado superior para la fila */
  max-width: 1200px; /* Ancho máximo para las filas */
  width: 100%;
}

.column {
  flex: 1; /* Ajusta el ancho de las columnas para ocupar todo el espacio disponible */
  max-width: 600px; /* Aumentado de 550px para columnas más anchas */
  text-align: center; /* Centra el texto dentro de cada columna */
}

.column h4, .column h5 {
  text-align: center;
}

.column p {
  text-align: justify; /* Justifica el texto dentro de los párrafos */
  width: 100%; /* Ajusta el ancho del párrafo */
  margin: 0;
}

/****************************************************/
/* 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 */
}

/**********************************************************/
/* Estilos para el modal */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
}

.close-button {
  color: rgba(255, 255, 255, 0.5);
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  background: none;
  border: none;
}

.close-button:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Consultas de medios para adaptabilidad */
@media (max-width: 768px) {
  .sectcontact .content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .sectcontact p {
    width: 100%; /* Ancho completo para pantallas pequeñas */
    text-align: justify;
  }
  
  .sectcontact img {
    margin-bottom: 20px; /* Espacio inferior para la imagen en pantallas pequeñas */
    max-width: 100%; /* Imagen a ancho completo en móviles */
  }
  
  .row {
    flex-direction: column;
    gap: 20px;
  }
  
  .column {
    max-width: 100%; /* Ancho completo para columnas en pantallas pequeñas */
  }
  
  #horizontal-line {
    width: 80%; /* Ajusta el ancho para pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .sectcontact {
    padding: 15px; /* Reduce el relleno del contenedor en pantallas muy pequeñas */
  }
  
  .sectcontact p {
    padding: 0 10px; /* Ajusta el espaciado interior según sea necesario */
  }
  
  .row {
    gap: 10px;
  }
  
  .column {
    padding: 10px; /* Reduce el relleno en columnas para pantallas muy pequeñas */
  }
}