.book-carousel {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to right, #d7d0c7, #1d1d1d);
  position: relative;
  overflow: hidden;
}

.slide {
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 80px 8%;
  min-height: 100vh;
}

.slide.active {
  display: flex;
}

.book-image img {
  width: 380px;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.4));
  transition: 0.4s;
}

.book-content {
  max-width: 550px;
  color: #fff;
}

.subtitle {
  color: #d6b04d;
  letter-spacing: 4px;
  margin-bottom: 15px;
}

.book-content h1 {
  font-size: 70px;
  line-height: 1;
  margin-bottom: 25px;
  color: #efe4d5;
}

.book-content h2 {
  color: #d6b04d;
  margin-bottom: 25px;
  font-size: 38px;
}

.description {
  font-size: 22px;
  line-height: 1.7;
  color: #ddd;
  margin-bottom: 40px;
}

.buttons {
  display: flex;
  gap: 20px;
}

.btn {
  text-decoration: none;
  padding: 16px 35px;
  border-radius: 50px;
  transition: 0.3s;
  font-weight: bold;
}

.primary {
  background: #d6b04d;
  color: white;
}

.primary:hover {
  background: #b68f2d;
}

.secondary {
  border: 2px solid #d6b04d;
  color: #d6b04d;
}

.secondary:hover {
  background: #d6b04d;
  color: white;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  border: none;
  border-radius: 50%;
  background: #ffffff24;
  color: #333;
  font-size: 25px;
  cursor: pointer;
}

.prev {
  left: 25px;
}

.next {
  right: 25px;
}

@media (max-width: 900px) {
  .slide.active {
    flex-direction: column;
    text-align: center;
  }

  .book-image img {
    width: 260px;
    margin-bottom: 40px;
  }

  .book-content h1 {
    font-size: 50px;
  }

  .book-content h2 {
    font-size: 30px;
  }

  .description {
    font-size: 18px;
  }

  .buttons {
    justify-content: center;
  }
}

.book-carousel {
  position: relative;
  min-height: 100vh;
  background-image: url("Images/home page bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.book-image {
  transform: translateX(50px);
}

.book-content {
  transform: translateX(-50px);
}

/* =========================================
   CINEMATIC HOME PAGE ANIMATION
========================================= */

.book-carousel {
  position: relative;
  overflow: hidden;
}

/* =========================================
   BACKGROUND MOVEMENT
========================================= */

.book-carousel::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: inherit;
  z-index: 0;
  animation: backgroundMove 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes backgroundMove {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.08);
  }
}

/* =========================================
   MAKE CONTENT APPEAR ABOVE BACKGROUND
========================================= */

.slide {
  position: relative;
  z-index: 2;
}

/* =========================================
   FLOATING BOOK
========================================= */

.slide.active .book-image img {
  animation:
    bookEntrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    floatingBook 5s ease-in-out 1.2s infinite;

  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.45));
}

/* Book entrance */

@keyframes bookEntrance {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(30px) scale(0.85) rotate(-4deg);
  }

  60% {
    opacity: 1;
    transform: translateX(10px) translateY(-5px) scale(1.03) rotate(1deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
}

/* Gentle floating effect */

@keyframes floatingBook {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

/* =========================================
   BOOK GLOW
========================================= */

.slide.active .book-image::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: rgba(255, 210, 100, 0.15);
  filter: blur(70px);

  border-radius: 50%;

  z-index: -1;

  animation: bookGlow 4s ease-in-out infinite;
}

@keyframes bookGlow {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.1);
  }

  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* =========================================
   TEXT ANIMATION
========================================= */

.slide.active .subtitle {
  animation: textReveal 0.8s ease 0.2s both;
}

.slide.active h1 {
  animation: textReveal 0.8s ease 0.4s both;
}

.slide.active h2 {
  animation: textReveal 0.8s ease 0.6s both;
}

.slide.active .description {
  animation: textReveal 0.8s ease 0.8s both;
}

.slide.active .buttons {
  animation: textReveal 0.8s ease 1s both;
}

@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =========================================
   NAVIGATION BUTTONS
========================================= */

.prev,
.next {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.prev:hover,
.next:hover {
  transform: scale(1.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================
   BUTTON HOVER
========================================= */

.btn {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ===========================
   AUTHOR SECTION
=========================== */

.author-section {
  padding: 70px 20px;
  background: linear-gradient(135deg, #f4e7c8, #e8d2a5);
  position: relative;
  overflow: hidden;
}

/* subtle paper texture */
.author-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(Images/books-background.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.08;
}

/* ===========================
   CONTAINER
=========================== */

.author-container {
  position: relative;
  max-width: 950px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 45px;
  z-index: 1;
}

/* ===========================
   AUTHOR IMAGE
=========================== */

.author-image img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 5px solid #b28a45;
  padding: 5px;
  background: #fff7e6;
  box-shadow: 0 10px 25px rgba(75, 46, 29, 0.25);
}

/* ===========================
   AUTHOR CONTENT
=========================== */

.author-content {
  max-width: 550px;
}

.author-content p {
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: #8b7355;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-content h2 {
  font-family: Georgia, serif;
  font-size: 2.6rem;
  color: #3b2415;
  margin-bottom: 15px;
}

.author-content span {
  display: block;
  font-family: Georgia, serif;
  color: #5a4030;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
}

/* ===========================
   BUTTON
=========================== */

.author-button {
  display: inline-block;
  text-decoration: none;
  background: #8b7355;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  transition: 0.3s ease;
}

.author-button:hover {
  background: #5f4935;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(75, 46, 29, 0.25);
}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width: 768px) {
  .author-container {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .author-image img {
    width: 140px;
    height: 140px;
  }

  .author-content h2 {
    font-size: 2rem;
  }

  .author-content span {
    font-size: 14px;
  }
}

/* ===========================
   BOOK TRAILER SECTION
=========================== */

.book-trailer-section {
  padding: 70px 20px;
  background-image:
    linear-gradient(rgba(246, 230, 193, 0.88), rgba(246, 230, 193, 0.88)),
    url("Images/books-background.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Container */

.trailer-container {
  max-width: 950px;
  margin: auto;
}

/* Heading */

.trailer-heading {
  text-align: center;
  margin-bottom: 35px;
}

.trailer-heading p {
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: 4px;
  color: #8b7355;
  font-weight: bold;
  margin-bottom: 8px;
}

.trailer-heading h2 {
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #4b2e1d;
  margin-bottom: 12px;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.trailer-heading span {
  display: block;
  max-width: 550px;
  margin: auto;
  color: #5a4030;
  font-size: 15px;
  line-height: 1.7;
}

/* Video */

.trailer-video-wrapper {
  display: flex;
  justify-content: center;
}

.trailer-video {
  width: 100%;
  max-width: 850px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 15px 35px rgba(75, 46, 29, 0.25);
}

/* Mobile */

@media (max-width: 768px) {
  .book-trailer-section {
    padding: 50px 15px;
  }

  .trailer-heading h2 {
    font-size: 2.2rem;
  }

  .trailer-video {
    border-radius: 12px;
  }
}

.author-section {
  padding: 80px 20px;
  background-image: url("Images/nice.png");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f6e6c1;
}




.trailer-heading h2{
    font-family: Georgia, serif;
    font-size: clamp(3rem, 3vw, 2rem);
    font-weight: bold;
    letter-spacing: 1px;
    color: #4b2e18;
    text-shadow: 0 8px 25px rgba(139, 111, 34, 0.5);
}



/*=========================================
        BOOK TITLE
=========================================*/

.book-content h1{

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(3rem, 4vw, 4.8rem);

    font-weight: 700;

    line-height: 0.92;

    letter-spacing: -0.5px;

    text-transform: uppercase;

    color: #f7f1e7;

    margin: 18px 0 18px;

    max-width: 650px;

    text-wrap: balance;

    text-shadow:
        0 3px 12px rgba(0,0,0,.35);

}



/*=========================================
        BOOK DESCRIPTION
=========================================*/

.book-content .description{

    font-family: Georgia, serif;

    font-size: 1.42rem;

    line-height: 2.1;

    letter-spacing: .25px;

    text-align: justify;

    text-indent: 2em;

    color: rgba(255, 255, 255, 0.88);

    max-width: 600px;

    margin-bottom: 40px;

    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);

}









.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;

    width:60px;
    height:60px;

    border:none;
    border-radius:50%;

    cursor:pointer;
}

.prev{
    left:30px;
}

.next{
    right:30px;
}














/*=========================================
        BOOK TRAILER ANIMATION
=========================================*/

.trailer-heading,
.trailer-video-wrapper{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.trailer-heading.show{

    opacity:1;

    transform:translateY(0);

}

.trailer-video-wrapper.show{

    opacity:1;

    transform:translateY(0);

    transition-delay:.35s;

}










.trailer-heading span{
    display: block;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 25px;

    font-weight: 700;

    line-height: 1.7;

    letter-spacing: 0.3px;

    max-width: 750px;

    margin: 0 auto;

    color:#60432a;

    text-align: center;
}

.book-content h2{
    font-family: Georgia, serif;
    font-size: 1.7rem;
    font-weight: bold;
    color: #d6b04d;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 15px 0;
}