body {
  margin: 1%;
  padding: 0;
  background-image: url(../img/fondo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.tabla-bengali {
  margin-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

tr {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.galeria {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alojafotos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.slide {
  border: 0.5vh solid #000;
  height: 88vh;
  width: 60vw;
  border-radius: 10%;

}

.descripcion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  padding-left: 4.25vw;
}

.descripcionbengali {
  background-color: white;
  width: 100%;
  border-radius: 5vh;
  border: 0.5vh solid #000;
  padding: 20px;
  padding-bottom: 30px;
}

.descripcionbengali h2 {
  color: rgb(13, 77, 214);
  font-size: 2.5vw;
  
}

.descripcionbengali p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25vw;
}







div.opaco {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.boton {
  font-size: 4vw; /* Ajuste responsivo */
  color: yellow;
  font-weight: bolder;
  background-color: black;
  opacity: 0.5;
  padding: 1%;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.izquierda {
  left: 5%;
}

div.derecha {
  right: 5%;
}

div.opaco div.boton:hover {
  opacity: 1;
  background-color: rgb(0, 0, 0);
}

div.paginacion {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

div.paginacion ul {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Asegura que estén alineadas verticalmente */
  gap: 10px; /* Espaciado entre las bolas */
  padding: 0;
  margin: 0;
  position: relative;
}

div.paginacion li {
  width: 3vw;
  height: 3vw;
  background-color: yellow;
  opacity: 0.5;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  position: relative; /* Asegura que no se desplace fuera del flujo normal */
}


.mueve li:hover {
  opacity: 1;
}

  
.foto-slide {
  width: 100%; /* Ajusta el tamaño de las imágenes al 100% del contenedor */
  height: 100%; /* Asegura que la altura de la imagen se ajuste al 100% del contenedor */
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  border-radius: 10%; /* Mantén el borde redondeado como el contenedor */
}


div.opaco-bajo {
  position: absolute;
  width: 100%;
  bottom: -6%; /* Ajusta la posición debajo de la imagen */
  display: flex;
  justify-content: center;
  
}

div.abajo-izquierda, div.abajo-derecha {
  font-size: 5w;
  color: yellow;
  font-weight: bolder;
  background-color: black;
  opacity: 0.5;
  padding: 1%;
  cursor: pointer;
  border-radius: 40%;
}
div.abajo-izquierda {
  left: 3%;
}

div.abajo-derecha {
  right: 3%;
}
div.abajo-izquierda:hover, div.abajo-derecha:hover {
  opacity: 1;
}


/* Media Query para pantallas pequeñas (768px o menos) */
@media (max-width: 768px) {
  div.paginacion li {
    width: 5vw;  /* Ajuste relativo */
    height: 5vw;  ;
    
  }

  /* Cambiar la tabla a una disposición de una sola columna */
  .tabla-bengali {
     align-items: center;
      
  }

  tr {
      display: block; /* Cada fila ocupa todo el ancho */
  }

  .tabla-bengali .galeria, .tabla-bengali .descripcion {
      width: 100%;  /* Ambas ocupan el 100% del contenedor */
     
  }

  .descripcion {
      margin-top: 20px; /* Espacio entre la galería y la descripción */
      padding-left: 0vw;
  }

  .descripcionbengali {
      width: 80%; /* La descripción ocupa todo el ancho disponible */
  }
  div.slide {
    
    height: 40vh;
    width: 90vw;
    
  
  }
  
  .descripcionbengali h2 {

    font-size: 3.5vw;
    
  }
  
  .descripcionbengali p {
  
    font-size: 2.25vw;
  }
}