/* Header */

:root {
  --primary-color: #2C030B;
  --secondary-color: #2C030B;
  --third-color: #FB6A7C;
  --text-color: #ffffff;
}





.books-header {
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.7)),
    url(images/library.webp) center no-repeat;
}


.prose{
  width: 75%;
  }

  .text-content{
    max-width: 90%;
    position: relative;
    left: 15rem;
  }



/* End of Header */

/* Books Section */
.books-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15rem 0;
}

.books-section .books-list {
  width: 80%;
  display: flex;
  justify-content: cente;
  flex-wrap: wrap;
}


.book3-header{
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.7)),
      url(images/FORSAKEN\ HOMETOWN.png) center no-repeat;

}
.book1-2-header{
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.7)), url(images/testimonials-img.png) 50% 40% no-repeat;

}

.book4-header{
  background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(33, 33, 33, 0.7)), url(images/book4-bg.webp) 50% 40% no-repeat;

}


.book-header {
  width: 100%;
  height: 40rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size:cover;
}

.book-description {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  margin: auto;
  padding: 4vh 0;
  color: #fff;
  font-size: 2rem;
}

.book-description img {
  width: 75%; 
  height: auto;
  border-radius: 5%;
  margin-right: 2rem;
  object-fit: cover;
  position: absolut;
}

.book-description  .book-img-3 {
  width: 30%; 
  height: auto;
  border-radius: 5%;
  margin-right: 2rem;
  object-fit: cover;
  position: absolut;


}


.book-description  .book-img-4 {
  width: 35%; 
  height: auto;
  border-radius: 5%;
  margin-right: 2rem;
  object-fit: cover;
  position: absolut;


}


.book-description .text-content h3 {
  font-size: 2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;

  text-align: center;
  font-weight: bold;
  color:  var(--third-color); 
  font-style: italic;
}
p:nth-of-type(5){
  font-weight: bold;
  margin-top: 5rem;
  text-align: center;
  font-style: italic;
}





/*QUIZZ SECTION*/
.quiz-container {
  max-width: 600px;
  text-align: center;
  margin: auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.quiz-title {
  font-size: 24px;
  font-weight: bol;
  margin-bottom: 15px;
  color: var(--third-color);
}

.quiz-description {
  font-size: 18px;
  margin-bottom: 20px;
  color: #ffffff;
}

.quiz-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 18px;
  color: white;
  background: var(--third-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
}

.quiz-button:hover {
  background: #e63946;
}

.quiz-button:active {
  transform: scale(0.95);
}

/*END OF QUIZZ SECTION*/











/* End of Books Section */

/* Responsive */
@media (max-width: 1600px) {
  .book {
    margin: 6rem 3rem;
    
  }

 
}

@media (max-width: 853px) {
  .text-content{
    max-width: 90%;
    position: relative;
    left: 0rem;
}
.book-description {
  flex-direction: column;
  width: 100vw;
  text-align: center;
  justify-content: center;
}

.book-description img {
margin: 0 auto;
position: relative;
order: 1;
width: 45rem;
height: auto;
}


.book-description  .book-img-3 {
width: 25rem; 
height: auto;
border-radius: 5%;
margin-right: 22.5%;
object-fit: cover;
position: relative;
order: 1;
left: 0%;


}

.book-description  .book-img-4 {
  width: 45%; 
  height: auto;
  border-radius: 5%;
  margin-right: 26.5%;
  object-fit: cover;
  position: relative;
  order: 1;
  left: 0%;
  
  
  }




.prose{
order: 2;
}



}




@media (max-width: 768px) {
   
    





  .book-description {
    flex-direction: column;
    width: 100vw;
    text-align: center;
    justify-content: center;
}

.book-description img {
  margin: 0 auto;
  position: relative;
  order: 1;
}


.book-description  .book-img-3 {
  width: 25rem; 
  height: auto;
  border-radius: 5%;
  margin-right: 22.5%;
  object-fit: cover;
  position: relative;
  order: 1;
  left:-6%;


}
.prose{
order: 2;
}








.book-description .text-content h3 {
  font-size: 3rem;
  margin-top: 2rem;
  text-align: center;
  font-weight: bold;
}

.text-content {
  max-width: 100%;
  
}

}
/* End of Responsive */