body {margin: 0;padding: 0;overflow-x: hidden;background-color: #f8f9fa;}
         
            #book {
                 width: 100%;
                 max-width: 100%;
                 height: 100vh;
                 margin: 0 auto;
                 position: relative;
                 }
                .page {
                     position: relative;
                     border: none;
                     height: 100%;
                     background-color: #fff;
                    }
                .page img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                 }
                .prev-btn, .next-btn {
                     position: absolute;
                     top: 50%;
                     transform: translateY(-50%);
                     z-index: 1000;
                     background-color: #fda31b;
                     color: #fff;
                     border: none;
                     border-radius: 50%;
                     width: 50px;
                     height: 50px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     font-size: 1.5rem;
                     cursor: pointer;
                 }
                 .prev-btn:hover, .next-btn:hover {
                    background-color: #0056b3;
                    
                 }
                 .prev-btn {
                    left: 10px;
                 }
                 .next-btn {
                    right: 10px;
                 }
                 
                 
         @media (max-width: 768px) {
            .prev-btn, .next-btn {
                display: flex; /* Ensure visibility on mobile */
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
        }
        
        @media (max-width: 430px) {
            #book {
                height: 100vh;
                position: relative;
                width: 100%;
                height: 519px;
                overflow: hidden;
                margin-top:15px;
            }
            
            .page {
                 position: relative;
                 border: none;
                 height: 100%;
                 background-color: #fff;
             }
             
            .page img {
                width: 100%;
                height: auto;
            }

            .prev-btn, .next-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
                margin-top: -180px;
            }
        }
         
        @media (max-width: 414px) {
            #book {
                height: 100vh;
                position: relative;
                width: 100%;
                height: 498px;
                overflow: hidden;
                margin-top:15px;
            }
            
            .page {
                 position: relative;
                 border: none;
                 height: 100%;
                 background-color: #fff;
             }
             
            .page img {
                width: 100%;
                height: auto;
            }

            .prev-btn, .next-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
                margin-top: -180px;
            }
        }
        
        
        @media (max-width: 390px) {
            #book {
                height: 100vh;
                position: relative;
                width: 100%;
                height: 468px;
                overflow: hidden;
                margin-top:15px;
            }
            
            .page {
                 position: relative;
                 border: none;
                 height: 100%;
                 background-color: #fff;
             }
             
            .page img {
                width: 100%;
                height: auto;
            }

            .prev-btn, .next-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
                margin-top: -180px;
            }
        }
       
        @media (max-width: 375px) {
            #book {
                height: 100vh;
                position: relative;
                width: 100%;
                height: 449px;
                overflow: hidden;
                margin-top:15px;
            }
            
            .page {
                 position: relative;
                 border: none;
                 height: 100%;
                 background-color: #fff;
             }
             
            .page img {
                width: 100%;
                height: auto;
            }

            .prev-btn, .next-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
                margin-top: -180px;
            }
        }
        
        @media (max-width: 320px) {
            #book {
                height: 100vh;
                position: relative;
                width: 100%;
                height: 378px;
                overflow: hidden;
                margin-top:15px;
            }
            
            .page {
                 position: relative;
                 border: none;
                 height: 100%;
                 background-color: #fff;
             }
             
            .page img {
                width: 100%;
                height: auto;
            }

            .prev-btn, .next-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
                margin-top: -180px;
            }
        }
        
        /* Ipaid view */
        @media (min-width: 768px) and (max-width: 800px) {
            #book {
                width: 85%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: auto;
            }
            .prev-btn, .next-btn {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
                top: 50%;
                transform: translateY(-50%);
            }
            .prev-btn {
                left: 10px;
            }
            .next-btn {
                right: 10px;
            }
        }
        
        @media (min-width: 801px) and (max-width: 834px) {
            #book {
                width: 100%;
                height: 100vh;
                margin: 0 auto;
                margin-top:12px;
            }
            .page img {
                width: 100%;
                height: auto;
            }
            .prev-btn, .next-btn {
                width: 45px;
                height: 45px;
                font-size: 1.4rem;
            }
        }
         
        @media (min-width: 835px) and (max-width: 1023px) {
           #book {
                width: 100%;
                height: 100vh;
                margin: 0 auto;
                margin-top:10px;
            }
            .page img {
                width: 100%;
                height: auto;
            }
            .prev-btn, .next-btn {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
        }
         /* Desktop view */
         
         @media (min-width: 1024px) and (max-width: 1152px) {
            #book {
                width: 100%;
                height: 100vh;
                margin: 0 auto;
                margin-top:12px;
            }
            .page img {
                width: 100%;
                height: auto;
            }
            .prev-btn, .next-btn {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            } 
         }
         
         @media (min-width: 1153px) and (max-width: 1200px) {
            
            #book {
                width: 100%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 45px;
                height: 45px;
                font-size: 1.4rem;
            } 
         }
        
        @media (min-width: 1201px) and (max-width: 1280px) {
            #book {
                width: 92%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
        }
         
         @media (min-width: 1281px) and (max-width: 1366px) {
             #book {
                width: 95%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 45px;
                height: 45px;
                font-size: 1.4rem;
            }
         }
         
         @media (min-width: 1367px) and (max-width: 1440px) {
            #book {
                width: 90%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            } 
         }
         
        @media (min-width: 1441px) and (max-width: 1600px) {
            #book {
                width: 85%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            } 
        }
        
        @media (min-width: 1601px) and (max-width: 1920px) {
            #book {
                width: 80%;
                height: 100vh;
                margin: 0 auto;
            }
            .page img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .prev-btn, .next-btn {
                width: 55px;
                height: 55px;
                font-size: 1.6rem;
            }
        }
      
        .zoom-btn:hover {
            background-color: #0056b3;
        }
        
        .zoom-controls {
            position: absolute;
            right: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;
        }
        
        .zoom-in-btn, .zoom-out-btn {
            background-color: #fda31b;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }
        
        .zoom-in-btn:hover, .zoom-out-btn:hover {
            background-color: #0056b3;
        }
        
/*  @media (min-width: 1920px) {
     #book {
         width: 90%;
         max-width: 90%;
         height: 100vh;
         margin: 0 auto;
         position: relative;
     }
     .page {
         position: relative;
         border: none;
         height: 100%;
         background-color: #fff;
     }
     .page img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
     .prev-btn, .next-btn {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         z-index: 1000;
         background-color: #fda31b;
         color: #fff;
         border: none;
         border-radius: 50%;
         width: 50px;
         height: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         cursor: pointer;
     }
     .prev-btn:hover, .next-btn:hover {
        background-color: #0056b3;
     }
     .prev-btn {
        left: 10px;
     }
     .next-btn {
        right: 10px;
     }
 }
*/