.year {
    text-align: center;
    font-weight: bold;
}
.book-title {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }

.cover-img {
    width: 75%;
    height: auto;
    align-items: center;
  }

.booklet {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    margin:1em;
    flex-direction: column;
}

 p {
    font-size: .8em;
    text-indent: 1.5em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0;
    text-align: left;
 } 
.first-paragraph {
    font-size: .8em;
    text-indent: 0em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0;
    text-align: left;
 } 
 li {
    Margin-left:1.5em;
    }

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

button:focus {
    outline: none;
}

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

i {
    color: #F4D35E;
    font-size: 3em;
}


.carousel-nav {
    display: none;}

  
  /* Make the carousel container hidden on larger screens */
  .carousel-container {
    display: none;
    margin-top:2em;
  }

.Quick-links{
    display: flex;
    flex-direction: row;
}


.links{
    font-size: 1.5em;
    color: #F4D35E;
}

table{
    font-size: .8em;
}

  /* Flipbook styles for larger screens */
  @media (min-width: 930px) {
  
    .Desktop {
        color: #0D3B66;
        font-size: 1.5em;
    }
    
    table{
        width:35vw;
    }

    #prev-desktop{
        z-index:10000;
        position: fixed;
        top: 50%;
        right:90%;
    }
    #next-desktop{
        position:fixed;
        top:50%;
        right:5%;
    }
    .carousel-slide.left.carousel-cover {
        width: 40vw;
        flex-direction: column;

    }
    ul {
        font-size: .8em;

    }

    
    .carousel-slide.right.carousel-cover {
            display: none;
          }

    .carousel-container {
      display: none; /* Hide carousel for larger screens */
    }

    .desktop-carousel {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        max-width: 75vw;
      }

      .carousel-cover {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90vh;
        z-index: 10; /* Keep cover in front initially */
        opacity: 1; /* Make sure cover is fully visible initially */
        visibility: visible; /* Ensure cover is visible */
        background-color: red!important;
      }
      
      /* Flip the cover when clicked or after some delay */
.carousel-cover.flipped {
    opacity: 0;
    visibility: hidden; /* Hide cover after flip */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition */
  }
      .carousel-page {
        display: none; /* Hide all pages by default */
        width: 100%;
        align-items: stretch;
        transition: transform 0.7s ease-in-out;
      }
      
      .carousel-slide {
        width: 49%;
        background: white;
        padding-top: 1.5em;
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 1.25em;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px #ddd;
        transition: transform 1s ease-in-out;
      }
      
      .carousel-slide.right {
        transform-origin: left center; /* Flip the right slide */
      }
      
      /* Flip animation for right slide */
      .carousel-slide.right.flipping {
        transform: rotateY(-180deg);
        z-index: 10;
      }
      
      /* Optional flip-like animation */
      .carousel-page.flipped .carousel-slide {
        transform: rotateY(0deg); /* Customize for animation style */
      }
      
      .desktop-nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1em;
        margin-top: 1em;
      }
      
      .desktop-nav button {
        padding: 0.75em 1.5em;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      
      .desktop-nav button:disabled {
        cursor: not-allowed;
      }
      .desktop-nav button:disabled i {
       color: #ccc;
      }
   
  }
  

/* Mobile Styles: Carousel for smaller screens */
@media (max-width: 930px) {
  .zoom-controls{
  visibility: hidden;}

    .Mobile{
        color:#0D3B66;
        font-size: 1em;
    }

.booklet{
    flex-direction: column;
    margin:.25em;
}
.book {
    display: none; /* Hide flipbook */
}

.cover-slide {
    background-color: red;
    margin:-1em;
    }
    

.cover-slide .content {
    
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 45em;
}

 p {
    font-size: .8em;
    text-indent: 1.5em;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    text-align: left;
 } 
 .first-paragraph {
    font-size: .8em;
    text-indent: 1.5em;
    padding-left: 0em;
    padding-right: 0em;
    margin: 0;
    text-align: left;
 } 

      
    
  /* General carousel container styling */
.carousel-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 1em;
  }
  
/* Restore generic carousel behavior */
.carousel-slide {
    display: none;
  }
  
  .carousel-slide.active {
    display: flex; /* Flex only when it's visible */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* Navigation buttons */
  .carousel-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    padding: 10px;
  }
  
  .carousel-nav button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .carousel-nav button:disabled {
    background-color: #ddd;
  }
  #prev-desktop {
    display: none;
  }
  #restart-desktop{
    display: none;
  }
  #next-desktop{
    display: none;
  }

  table{
    width:90vw;
  }
}
  
.zoomtext {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}
.zoom-controls {
  position: relative;
  z-index: 9999; /* Ensure it's on top of zoomed content */
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  justify-content: center;

}