body {
  font-family: Arial, sans-serif;
  background-image: url('../img/bogota.jpg');
  margin: 0;
  padding: 0;
  height: 100%;

}

header {
  color: #fff; /* Color del texto para que sea legible sobre el fondo */
  background-color: rgba(0, 0, 0, 0);
  width: 100%; /* Define el ancho del div */
  height: 25%; /* Define la altura del div */  
  min-height: 25%;
  max-height: 25%;
  margin-top: 0%;
  position: absolute;
  overflow: hidden; /* Oculta el contenido que excede la altura máxima */
  justify-content: center;
  top: 0;
}
/******************************************************************************/

#menuPaginas {
  background-color: rgba(1, 65, 77, 0);
  color: #000000;
  display: flex;
  box-sizing: border-box;
  left: 50%;
  width: 50%;
  transform: translate(-50%); /* Ajusta la posición a la mitad del ancho y alto de la imagen */
   
  height: 5;
  min-height: 3%; /* Define la altura del div */
  
  border-width: 1px;
  border-radius: 10px; /* define el radio del borde */
  
  position: absolute;
  bottom: 10%;
  justify-content: center;
  overflow: hidden; /* Oculta el contenido que excede la altura máxima */

}

#menuPaginas nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px;
  
  border: 3px solid #ffffff;
  
  background-color: rgba(5, 87, 103, 1);
}

#menuPaginas nav ul li a:hover {
  background-color: #ffffff;
  color: #000000;
  border-width: 3px;
  border-style: solid;
  border-color: #000000;
  border-radius: 10px; /* define el radio del borde */
  
}

/******************************************************/

#menuSesion {
  min-height: 5%;
  max-height: 80%;
  max-width: 20%;
  border-radius: 10px;
  position: absolute;
  right: 2%;
  top: 10%;
  background-color: rgba(5, 87, 103, 0);
  overflow: hidden;
}

#menuSesion nav {
  display: flex;
  align-items: center;
}

#menuSesion nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column; /* Cambia la dirección del flujo a vertical */
}

#menuSesion nav ul li {
  margin-bottom: 10px;
}

#menuSesion nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 5px;
  border: 3px solid #ffffff;
  background-color: rgba(5, 87, 103, 1);
}

#menuSesion nav ul li a:hover {
  background-color: #ffffff;
  color: #000000;
  font-weight: bold;
  border: 3px solid #000000;
  border-radius: 10px;
}


/**************************************************************************************************************/

li {
      float: left;
    }

li a {
      display: block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      border-radius: 10px; /* define el radio del borde */
      color: #fff; /* Color del texto para que sea legible sobre el fondo */
    }
  
 
 ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      justify-content: center;
      display: flex;
    }

    .slideshow-container {
      width: 99%;
      height: 99%;
      background-color: rgba(0, 0, 0, 0);
      justify-content: center;
      align-items: center;
      border: 1px solid #ffffff;
      border-radius: 5px;
      color: #333;
      overflow: hidden; /* Oculta el contenido que excede la altura máxima */
      overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
  
      /* Estilos para la barra de desplazamiento */
      scrollbar-width: thin; /* Ancho del scrollbar (no es compatible con todos los navegadores) */
      scrollbar-color: #999 transparent; /* Color del scrollbar y del fondo */
  }
  
  /* Estilos específicos para WebKit (Chrome, Safari) */
  .slideshow-container::-webkit-scrollbar {
      width: 5px; /* Ancho de la barra de desplazamiento */
  }
  
  /* Estilos para el pulgar de la barra de desplazamiento */
  .slideshow-container::-webkit-scrollbar-thumb {
      background-color: #999; /* Color del pulgar de la barra de desplazamiento */
      border-radius: 6px; /* Borde redondeado del pulgar */
  }
  
  /* Estilos específicos para Firefox */
  .slideshow-container {
      scrollbar-width: thin; /* Ancho del scrollbar */
      scrollbar-color: #999 transparent; /* Color del scrollbar y del fondo */
  }
  
  /* Estilos para el pulgar de la barra de desplazamiento en Firefox */
  .slideshow-container {
      scrollbar-color: #999 transparent; /* Color del scrollbar y del fondo */
  }
  
  

  .slide {
    display: none;
  }
  
  .slide img {
    width: 100%; /* Hacer que la imagen ocupe el 100% del contenedor */
    height: 100%; /* Mantener la proporción de aspecto de la imagen */
    object-fit:contain;
  }
  .prev, .next {
    margin: 2%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 1%;
    color: rgb(0, 0, 0);
    font-size: 40px;
    cursor:pointer;
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }
  h1, p {
    text-align: center;
    padding: 30px;
    margin-bottom: 10px;
  }


  .logo {
    position: relative; /* Establece el contexto de posición para la imagen */
    width: 100%; /* Asegura que el contenedor tenga un ancho */
    height: 100%; /* Cambia la altura según tu diseño */
  }
  
  .logo img {
    min-height: 30%;
    max-height: 80%;
    
    position: absolute; /* Posiciona la imagen */
    top: 0; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%); /* Ajusta la posición a la mitad del ancho y alto de la imagen */
    min-width: 30%;
    max-width: 80%;
    border-radius: 10px;
  }

#container-center {
  width: 60%; /* Ocupa el 100% del ancho de la ventana */
  height: 60%;/* Define la altura del div */
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translate(-50%);
  overflow: hidden; /* Oculta el contenido que excede la altura máxima */
  /*overflow-y:auto;  Agrega una barra de desplazamiento vertical si es necesario */

}

.contenedor-central {
  position: absolute;
  width: 100%;
  top: 85%;
  left: 40%;
  background-color:rgba(0, 0, 0, 0);
}

.contenedor-central a{
  min-width: 11%;
  max-width: 100%;
  left: 50%;
  background-color:rgba(5, 56, 56, 0.1);
  border-radius: 10px;
}

.contenedor-central a:hover {
  min-width: 11%;
  max-width: 100%;
  left: 50%;
  background-color:rgba(0, 0, 0, 1);
  border-radius: 10px;
  border-color: #fff;
  color: #fff;
}
/*************/
.whatsapp-icon {
  text-decoration: none;
  color: #000; /* Color del texto */
  margin-bottom: 10px; /* Espacio entre los enlaces */
  font-size: 16px; /* Tamaño del texto */
  float: left; /* Hace que los elementos floten hacia la izquierda */
  
}


.icono{
  display: inline-block;
  width: 20px; /* Ancho del icono */
  height: 20px; /* Altura del icono */
  margin-right: 5px; /* Espacio entre el icono y el texto */
  background-image: url('img/wa.png'); /* Ruta de la imagen del icono */
  background-size: cover; /* Ajusta el tamaño de la imagen del icono */
}

/****************************************************/
footer {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 95%;
  
  width: 100%;
  height: auto; /* Define la altura del div */
  overflow-y:auto; /* Agrega una barra de desplazamiento vertical si es necesario */

  height: 30%; /* Define la altura del div */
  overflow-y:auto; /* Agrega una barra de desplazamiento vertical si es necesario */

}

.columna {
  flex: 1;
  margin: 0 15px;
}

.columna h4 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.columna ul {
  list-style-type: none;
  padding: 0;
}

.columna ul li {
  margin-bottom: 5px;
}

#container-right {
  width: 25%;
  height: auto;/* Define la altura del div */
  min-height: 50%;
  max-height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border-radius: 10px;
  text-align: justify;
  position: absolute;
  right: 0%;
  top: 30%;
  transition: background-color 0.3s; /* Agregamos una transición suave para mejorar la experiencia visual al cambiar el color de fondo */
  overflow: hidden; /* Evitar que los contenidos se sobrepongan */
  overflow-y:auto; /* Agrega una barra de desplazamiento vertical si es necesario */
}
#container-right :hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #000000;
  transition: background-color 0.3s; /* Agregamos una transición suave para mejorar la experiencia visual al cambiar el color de fondo */
  border-radius: 10px;
}
#container-right h3 {
  text-align: center;
}
#container-left {
  width: 25%;
  height: auto;/* Define la altura del div */
  min-height: 50%;
  max-height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border-radius: 10px;
  text-align: justify;
  position: absolute;
  left: 0;
  top: 30%;
  transition: background-color 0.3s; /* Agregamos una transición suave para mejorar la experiencia visual al cambiar el color de fondo */
  overflow: hidden; /* Evitar que los contenidos se sobrepongan */
  overflow-y:auto; /* Agrega una barra de desplazamiento vertical si es necesario */
}

#container-left :hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #000000;
  transition: background-color 0.3s; /* Agregamos una transición suave para mejorar la experiencia visual al cambiar el color de fondo */
  border-radius: 10px;
}
#container-left h3 {
  text-align: center;
}

#enlaces li {
  margin-right: 15px; /* Agrega un espacio entre los enlaces */
  margin-bottom: 15px; /* Agrega un espacio entre las filas de enlaces */
}

#enlaces a {
  text-decoration: none;
  color: #fff; /* Color del texto para que sea legible sobre el fondo */
  padding: 1px 1%;  
  border-width: 1px;
  border-style:dashed;
  border-color: #ffffff;
  border-radius: 5px; /* define el radio del borde */
  margin: 5px; /* Agrega espacio entre los enlaces */
  display: inline-block; /* Permite que los enlaces se muestren en línea */
}


/***************************************************************
/* Estilos generales */

@media only screen and (max-width: 800px) {
  /* Reglas específicas para tamaños de pantalla pequeños */


  header {
    /* Ajustes específicos para la barra de navegación en dispositivos móviles */
    min-height: 30%;
    max-height: 30%;
    
  }

  #menuPaginas {
    /* Ajustes específicos para el menú de páginas en dispositivos móviles */
    left: 0;
    transform: translate(-10%);
    top: 40%;
    font-size: 75%;
    width: 100%;
    height: 35%;
  }

  #menuSesion {
    /* Ajustes específicos para el menú de sesión en dispositivos móviles */
    right: 0;
    top: 1%;
    font-size: 75%;
  }

  .slideshow-container {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
/*
    .slideshow-container {
      width: 80%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      border: 1px solid #333;
      border-radius: 5px;
      color: #333;
      overflow: hidden;
      margin-left: auto; 
      margin-right: auto; 
      margin-top: 0%;
      
    overflow: hidden; 
    overflow-y:auto; 
  }
*/
  }
  .slide img{
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    width: 100%;
    height: 100%;

    
  }

  #container-center {
    /* Ajustes específicos para el contenedor central en dispositivos móviles */
    width: 100%;
    height: 60%;
    top: 20%;
    right: 0;
    margin-left: auto; 
    margin-right: auto; 
  }

  .prev, .next {
    position: absolute;
    top: 25%;
    transform: translateY(-50%);
    padding: 0%;
    color: rgb(0, 0, 0);
    font-size: 40px;
    cursor:pointer;
  }
  li a {
    display: block;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 10px; /* define el radio del borde */
    color: #fff; /* Color del texto para que sea legible sobre el fondo */
  }

  
.contenedor-central {
  position: absolute;
 width: 40%;
  top: 75%;
  left: 55%;
  transform: translate(-50%); /* Ajusta la posición a la mitad del ancho y alto de la imagen */
   
}

.logo img{
  position: relative; /* Establece el contexto de posición para la imagen */
  width: auto; /* Asegura que el contenedor tenga un ancho */
  height: auto; /* Cambia la altura según tu diseño */
  left: 40%;
}
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 90%;
  
  width: 100%;
  height: auto; /* Define la altura del div */
  overflow-y:auto; /* Agrega una barra de desplazamiento vertical si es necesario */
  font-size: 75%;
}

}