/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
      font-family: "Agu Display", serif;
  font-weight: 400;
  font-size: 20px;
  overflow-x: hidden;
}
/* Header layout */
.site-header {
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 20px;
  background:white;
  color: white;
  position: relative;
  z-index: 100;
}
.logo {
  font-size: 1.5em;
  font-weight: bold;
}
.logo img{
    max-width: 150px;
    max-height: 100px;

}


.menu-toggle {
z-index: 3300;
padding: 0px;
  border: none;
  background-color: white;
  color:rgb(63, 63, 2);
  font-size: 1em;
  cursor: pointer;
}

/* Slide-in menu */
.slide-menu {
  position: fixed;
  top: 0;
  background-image: url(./compressed_31373543-c59b-4ff0-a21b-2bb9a2b3964a.png);
  right: -340px;
  height: 100%;
  width: 300px;
  background-color:white;
  color: black;
  transition: right 0.4s ease;
  padding-top: 60px;
  z-index: 999;
}

.slide-menu.active {
  right: 0;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px; 
  border: none;
  font-size: 1.5em;
  color: rgb(0, 0, 0);
  cursor: pointer;
}

 .menu-links {
  list-style: none;
  padding: 20px;
 }

 .menu-links li {
  margin: 20px 0;
 }

.menu-links a {
  font-family: "Agu Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color:#251c01;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s ease;
 }

 .menu-tops img{
   max-width: 30px;
 }

.menu-tops  a:hover {
  color: #664d00;
  transform: translateX(5px);
}
.menu-tops {
    height: 50px;
    background-color: rgba(178, 192, 149, 0.329);
    border-radius: 50px;
    gap: 30px;
    margin-top: 10px;
    align-items: center;
    padding: 0 30px;
    display: flex;
    list-style: none;
    flex-wrap: wrap; /* allow wrapping on smaller screens */
    justify-content: center; /* center items on smaller screens */
}

.menu-tops li {
    margin: 10px;
}

.menu-tops a {
    font-family: "Agu Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: #a17900;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

/* Responsive Design */
@media (max-width: 1024px) {
        #prev-btn, #next-btn {
       
        top: 74%;
        }
    .menu-tops {
        padding: 0 20px;
        gap: 20px;
    }
    .menu-tops a {
        font-size: 1.1em;
    }

}

@media (max-width: 768px) {
        #prev-btn, #next-btn {
      
        top: 37%;
        }

.front, .back {
    /*position: absolute;*/
    width: 343px;
    height: 530px;
}
    .menu-tops {
        /*flex-direction: column;*/
        height: auto;
        /*border-radius: 20px;*/
        /*padding: 15px;*/
    }
    .menu-tops a {
        font-size: 1em;
    }
}


@media (max-width: 480px) {
    .book_image {
     height: 75% !important;   
    }
     .menu-tops a {
        font-size: 14px;
    }
    .menu-tops {
        gap: 10px;
    }
      #prev-btn, #next-btn {
      
        top: 34%;
      }
}


/* ========== Tablet Responsive (768px–1024px) ========== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .material-symbols-outlined {
    font-size: 50px !important;
    }
    /*.menu-tops{*/
    /*height: 5vh !important;*/
    /*}*/
  body {
      height: 78vh;
    font-size: 18px;
  }

  .site-header {
    padding: 10px 16px;
  }

  .logo img {
    max-width: 120px;
    max-height: 150px;
  }

  /*.menu-tops {*/
    display: none; /* hide horizontal nav on tablets */
  /*}*/

  .menu-toggle {
    display: block; /* show hamburger icon on tablets */
  }

  .slide-menu {
    width: 330px;
    padding-top: 50px;
  }

  .menu-links a {
    font-size: 1em;
  }

  .menu-links li {
    margin: 18px 0;
  }

  .close-btn {
    font-size: 1.3em;
  }
}



.hero_section{
    position: relative;
    width: 100%;
   padding: 20px 5px;
    height: 100%;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    font-family: sans-serif;
    background-color: #dac400;
    background-image: url(./Images/8810736.jpg);
}

/* Button */
button {
    border: none;
  background-color: transparent;
    padding: 1px;
    z-index: 200;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.5s;
}

button:focus {
    outline: none;
}

.book_image{
    object-fit: fill;
    height: 100%;
    /*padding: 1px;*/
   /*background-color: yellow;*/
    width: 100%;
    
}

/*button:hover i {*/
/*    color: rgb(102, 102, 102);*/
/*}*/

i {
    color: gray;
    font-size: 4em;
}

/* Book */
.book {
   /* overflow: hidden;
   overflow-y: hidden; */
    width: 500px;
    height: 700px;
    position: relative;
    transition: transform 0.5s;
}

.paper {
    object-fit: cover;
    height: 94%;
    width:94%;
    position: absolute;
    top: 0;
    left: 0;
    perspective: 1500px;
}

.front {
    backface-visibility: hidden;
    border-left: 3px solid #dac400;
}

.front, 
.back {
    position: absolute;
       width: 369px;
    height: 587px;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    transform-origin: left;
    transition: transform 0.5s;
}

.front {
    z-index: 1;
}

.back {
    z-index: 0;
}

.front-content,
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.back-content {
    transform: rotateY(180deg)
}

/* Paper Flipped */
.flipped .front,
.flipped .back {
    transform: rotateY(-180deg)
}

/* Paper Z-index */
#p1 {
    z-index: 4;
}

#p2 {
    z-index: 3;
}

#p3 {
    z-index: 2;
}
#p4 {
    z-index: 1;
}


.book-title {
    font-size: 3em;
    margin-bottom: 40px;
}

.cover-img {
    width: 100%;
    /* margin-left: 20px; */
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
}
@media screen and (min-width: 768px) and (max-width: 1180px) {
    /*   .menu-tops{*/
    /*height: 5vh !important;*/
    /*}*/
    .cover-img {
    width: auto !important;
        
    }
        #prev-btn, #next-btn:hover {
         background-color: transparent !important;   
        }
.book {
   /* overflow: hidden;
   overflow-y: hidden; */
        width: 755px;
        height: 995px;
   
    position: relative;
    transition: transform 0.5s;
}
.material-symbols-outlined {
 font-size: 30px !important;   
}
 button {
     padding: 5px !important;
 }
 body {
        font-size: 16px;
        height: 94vh;
    }
}
@media (max-width: 1180px) {
    #prev-btn, #next-btn {
        color: black;
 
    }

    #prev-btn {
      align-items: center;
    }

    #next-btn {
      align-items: center;
    }
   
    }
}
  /* Mobile Styles Only */
  @media screen and (max-width: 768px) {
  
    .hero_section {
      position: relative;
      display: flex;
      justify-content: center;
      /*align-items: center;*/
      height: 82vh;
      overflow: hidden;
    }

    #book {
     width: 420px;
    height: 600px;
    }

    .cover-img, .book_image {
       
      /*max-width: 77%;*/
      max-height: 75% !important;
      object-fit: contain;
      border-radius: 10px;

    }

    #prev-btn, #next-btn {
      position: absolute;
      border: none;
      color: #fff;
      font-size: 2rem;
      padding: 5px;
      /*top: 50%;*/
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 10;
    }

    #prev-btn {
      left: 10px;
    }

    #next-btn {
      right: 10px;
    }

    .site-header,
    .site-footer {
      text-align: center;
      padding: 10px;
    }

    
    /*.menu-tops {*/
    /*  display: none !important;*/
    /*}*/
 


  }


.site-footer {

  text-align: center;
  background-color: white;
  color: rgb(107, 105, 2);
  padding: 15px 20px;
  font-size: 0.95em;
  position: relative;
  bottom: 0;
  width: 100%;
}

.site-footer p {
  margin: 0;
}