/* Updated CSS for #peelfooter with proper height control */

#peelfooter {
  position: relative;
  width: 100%;
  /* Set a default height instead of 100vh */
  height: 700px;
  overflow: hidden; /* Prevent content overflow */
  
}

/* Keep your existing turn-page styles */
#peelfooter  .turn-page {
  background-color: #FFF;
  /* Ensure pages fill the container */
  width: 100%;
  height: 100%; 
}

#peelfooter .cover {
  background-color: #2e2e2e !important; /* Dark background for footer content */
  width: 100%;
  height: 100%;
  position: relative;
}

/* Your existing styles remain the same */
#peelfooter .loader {
  background-image: url(loader.gif);
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  top: 238px;
  left: 188px;
}
/* 
.footer-behind::after {
    content: '';
    position: absolute;
    bottom: -7rem;
    right: -7rem;
    width: 200px;
    height: 200px;
    background-image: url('/assets/images/logo/legacy_icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
} */


#peelfooter .data {
  text-align: center;
  font-size: 40px;
  color: #999;
  line-height: 500px;
}

/* Controls styling */
#controls {
  width: 20vw;
  text-align: center;
  margin: 20px 0px;
  font: 30px arial;
}

/* Gradient styles remain the same */
#peelfooter .odd {
  background: linear-gradient(to right, #FFF 95%, #ddd 100%);
  background: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
  background: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
  background: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
  background: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-color: #FFF;
}

#peelfooter .even {
  background: linear-gradient(to left, #FFF 95%, #ddd 100%);
  background: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
  background: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
  background: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
  background: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-color: #FFF;
}

/* Responsive adjustments with controlled heights */
@media (max-width: 1200px) {
  #peelfooter {
    height: 700px;
    max-height: 1200px;
  }
}

@media (max-width: 992px) {
  #peelfooter {
    height: 1000px;
    max-height: 1200px;
  }
}

@media (max-width: 768px) {
  #peelfooter {
    /* Reduced from 100vh */
    height: auto;
    /* max-height: 100vh; */
    height: 1600px !important;
    min-height: 350px;
    max-height: 1800px;
  }
  
  #peelfooter .data {
    font-size: 24px;
    line-height: 300px;
  }
  
  #controls {
    width: 80vw;
    font-size: 20px;
  }
  
  /* More pronounced gradients for mobile */
  #peelfooter .odd {
    background: linear-gradient(to right, #FFF 90%, #ccc 100%);
    background: -webkit-linear-gradient(left, #FFF 90%, #ccc 100%);
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.1);
    background: #FFF;
  }

  #peelfooter .even {
    background: linear-gradient(to left, #FFF 90%, #ccc 100%);
    background: -webkit-linear-gradient(right, #FFF 90%, #ccc 100%);
    box-shadow: inset 2px 0 4px rgba(0,0,0,0.1);
    background: #FFF;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  #peelfooter {
    height: 1600px !important;
    min-height: 350px;
    max-height: 1800px;
  }
  
  #peelfooter .data {
    font-size: 18px;
    line-height: 250px;
  }
  
  #controls {
    width: 90vw;
    font-size: 16px;
  }
  
  /* Even more pronounced gradients for small screens */
  #peelfooter .odd {
    background: linear-gradient(to right, #FFF 85%, #bbb 100%);
    background: -webkit-linear-gradient(left, #FFF 85%, #bbb 100%);
    box-shadow: inset -3px 0 6px rgba(0,0,0,0.15);
  }

  #peelfooter .even {
    background: linear-gradient(to left, #FFF 85%, #bbb 100%);
    background: -webkit-linear-gradient(right, #FFF 85%, #bbb 100%);
    box-shadow: inset 3px 0 6px rgba(0,0,0,0.15);
  }
}

@media (max-width: 360px) {
  #peelfooter {
    height: 1700px !important;
    min-height: 350px;
    max-height: 1800px;
  }
}

@media (max-width: 1200px) and (min-height:1000px) {
  #peelfooter {
    height: 1000px !important;
    min-height: 350px;
    max-height: 1800px;
  }
}


/* Footer behind text styles */
.footer-behind {
  position: absolute;
  bottom: 20% !important;
  left: 55% !important;
  transform: translateX(-50%);
  text-align: start;
  z-index: 10;
  width: 80%;
  color: #000;
  font-size: clamp(20px, 1.5vw, 2rem);
}


/* @media (max-width: 375px) {
  .footer-behind {
    top: 65% !important;
    left: 45% !important;
    width: 80%;
    text-align: center;
    font-size: clamp(10px, 6vw, 0.9rem);
    padding: 0 5px;
  }


} */

@media (max-width: 480px) and (min-width: 300px) {
  .footer-behind {
    top:72% !important;
    left: 50% !important;
  }

  .footer-img {
    width: 90% !important;
  }

}

@media (max-width: 575px) and (min-width: 481px) {
  .footer-behind {
    top: 70% !important;
    left: 50% !important;
  }

  .footer-img {
    width: 90% !important;
  }

}

@media (max-width: 767px) and (min-width: 576px) {
  .footer-behind {
    top: 70% !important;
    left: 55% !important;
   
  }

  .footer-img {
    width: 90% !important;
  }

}

/* Responsive text adjustments remain the same */
@media (max-width: 993px) and (min-width: 768px) {
  .footer-behind {
    top: 50% !important;
    left: 55% !important;
  }

  .footer-img {
  width: 90% !important;
}

}

@media (max-width: 1199px) and (min-width: 992px) {
    .footer-behind {
      top: 20% !important;
      left: 45% !important;
      width: 100%;
    }
}

@media (max-width: 1599px) and (min-width: 1200px) {
  .footer-behind {
    top: 20% !important;
    left: 65% !important;
    width: 100%;
  }

}

@media (min-width: 1600px) {
  .footer-behind {
    bottom: 20% !important;
    left: 60% !important;
    width: 80%;
  }
}


  
        #book, #peelfooter {
            width: 100%;
            margin: 0;
            position: relative;
            overflow: hidden;
        }
        
        .page {
            background: #f5f5f5;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            width: 100%;
            height: 100%;
        }
        
        .data {
            padding: 20px;
            text-align: center;
            font-size: 18px;
        }
        
        /* Ensure turn.js wrapper takes full width */
        .turn-page-wrapper {
            width: 100% !important;
        }