.body {
  background-color: white;
}

.bookContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  /* padding: 20px; */
  max-width: 100%;
  overflow: hidden;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 20px; */
  font-family: 'Georgia', serif;
  font-size: 1.2rem;
  color: #333;
  background-color: #fdfcf5;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ddd;
  /* position: relative; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transition: all 0.3s ease; */
}
.blurred-image {
  filter: blur(8px); /* Adjust the blur amount as needed */
}



.lastPageButtonContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

}

.orderButtonOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}


.page:nth-child(odd) {
  background-color: #fafafa;
}

.image {
  max-width: 100%;
  max-height: 100%;
  /* margin-bottom: 10px; */
  object-fit: cover; /* Ensures image scales without being cut */
}

.buttonContainer {
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.prevButton, .nextButton {
  /* position: absolute; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 10px 15px;
  font-size: 10px;
  font-weight: bold;
  background-color: #dc4282;
  border: none;
  color: white;
  cursor: pointer;
}

/* .prevButton {
  left: 2px;
}

.nextButton {
  right: 2px; 
} */

.controlsContainer{
  margin: 20px;
}

.booksliderbutton {
  background-color: #dc4282;
  border: none;
  color: white;
  padding: 10px 15px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  
 
}


.navButton:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.flip {
  background-color: #ffffff;
  color: #e44672;
  border: 1px solid #e44672;
  align-items: center;
  border-radius: 25px;
  cursor: pointer;
  height: 50px;
  transition: background-color 0.3s ease;
}

.flip:hover {
  background-color: #e44672;
  border: 1px solid #e44672;
  border-radius: 25px;
}
@media (max-width: 991px) {
 
  .orderButtonOverlay {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  }  

  .flip {
    background-color: #ffffff;
    color: #e44672;
    border: 1px solid #e44672;
    align-items: center;
    border-radius: 25px;
    cursor: pointer;
    height: 20px;
    transition: background-color 0.3s ease;
  }
  
  .flip:hover {
    background-color: #e44672;
    border: 1px solid #e44672;
    border-radius: 25px;
  }
}