/* ========== GENERAL RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== BODY BACKGROUND AND FONT ========== */
body {
  background-color: #c61114;
  color: white;
  font-family: 'Aileron', sans-serif;
  height: 100vh;
  overflow-x: hidden;
}

/* ========== FLEX CONTAINER STRUCTURE ========== */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 0 2vw;
}

/* ========== LEFT-SIDE (Book Page Image) ========== */
.left-side {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}

.left-side .background-image {
  max-height: 80vh;
  max-width: 90%;
  object-fit: contain;
  transform: translateX(-75px); /* NEW: shift left */
}


/* ========== LEFT-SIDE (Black Knight Image) ========== */
.left-side-front {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}

.left-side-front .background-image {
  max-height: 80vh;
  max-width: 90%;
  object-fit: contain
}

/* ========== LEFT-SIDE (Author Image) ========== */
.left-side-author {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.left-side-author .background-image {
  max-height: 100vh;
  max-width: 90%;
  object-fit: contain;
}


/* ========== LEFT-SIDE (Cause Image) ========== */
.left-side-cause {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
}

.left-side-cause .background-image {
  max-height: 70vh;
  max-width: 90%;
  object-fit: contain;
}


/* ========== LEFT-SIDE (Works Image) ========== */
.left-side-works {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95%;
}

.left-side-works .background-image {
  max-height: 70vh;
  max-width: 90%;
  object-fit: contain;
}

/* ========== LEFT-SIDE (Socials Image) ========== */
.left-side-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75%;
}

.left-side-socials .background-image {
  max-height: 60vh;
  max-width: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translateX(100px); /* NEW: shift right */
}

/* ========== LEFT-SIDE (Socials Image) ========== */
.left-side-press {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75%;
}

.left-side-press .background-image {
  max-height: 60vh;
  max-width: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translateX(150px); /* NEW: shift right */
}


/* ========== CENTER TEXT CONTAINER ========== */
.center-text {
  flex-grow: 1;
  max-width: 800px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  margin-top: 0px;
  margin-left: -300px; /* NEW: move text container 200px left */
}

.center-text-author {
  flex-grow: 1;
  max-width: 600px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  margin-top: 0px;
  margin-left: -200px; /* This is your intended shift */
}

.center-text-front {
  flex-grow: 1;
  max-width: 800px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  margin-top: 0px;
  margin-left: -100px; 
}


.center-text-cause {
  flex-grow: 1;
  max-width: 800px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  margin-top: 0px;
    margin-left: 0px; 
}

/* Books Container */
.books-container {
  flex-grow: 1;
  max-width: 800px;
  padding: 0 20px;    
  background-color: #333;
  display: flex;
  justify-content: center;
  gap: 60px;
  border-radius: 10px;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-left: 0px; 
}

/* Book Item */
.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-item h2 {
  font-family: 'Avenir Black', sans-serif;
  font-size: 20pt;
  color: orange;
  margin-top: 10px;
  margin-bottom: 10px;

}

.book-item h3 {
  font-family: 'Avenir Black', sans-serif;
  font-size: 20pt;
  color: white;
  margin-top: -10px;
  margin-bottom: -10px;
  line-height: 1.2;
}

.author-heading {
  font-family: 'Avenir Black', sans-serif;
  font-size: 2rem;
  color: black;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 30px;
  margin-left:220px;
}

.text-block-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Book Cover Styling */
.book-cover {
  width: 200px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-cover:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
}


.text-box {
  background-color: #101211;
  padding: 30px 20px;
  border-radius: 12px;
  transform: none; /* REMOVE or reset this */
  max-width: 600px; /* NEW: increase width by 100px */
  width: 100%;
}

.center-text .text-box {
  max-width: 700px; /* Increase width */
  width: 100%;
  transform: translateX(100px);
}


.text-box h1 {
  font-family: 'Avenir Black', sans-serif;
  font-size: 2rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.text-box h2 {
  font-family: 'Avenir Black', sans-serif;
  font-size: 14pt; /* Updated to 14pt */
  font-style: italic;
  color: orange;
  margin-bottom: 20px;
  line-height: 1.2;
}


.text-box p {
  font-family: 'Aileron', sans-serif;
  font-size: 12pt; /* Updated to 12pt */
  line-height: 1.6;
}


/* Socials Container */
.socials-container {
  background-color: #2b2b33;
  padding: 40px;
  display: flex;
  justify-content: center;
  gap: 60px;
  border-radius: 10px;
  flex-wrap: wrap;
}

.social-icon {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.1);
}



/* ========== RIGHT-SIDE (Vertical Menu + Logo) ========== */
.right-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end; /* align items to right */
  width: 300px; /* NEW: Set a defined width */
  height: 80%;
}


/* ========== VERTICAL MENU (UPDATED FOR COLOR #757272) ========== */
.vertical-menu {
  padding-right: 50px;
}

.vertical-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

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

.vertical-menu a {
  display: inline-block;
  text-decoration: none;
  color: #ffffff; /* Updated color */
  font-family: 'Aileron', sans-serif;
  font-weight: 350; /* Light version */
  font-size: 1.6rem;
  padding: 10px 20px;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 8px;
}

/* ========== INDIVIDUAL HOVER COLORS (STILL ACTIVE) ========== */
.menu-book:hover {
  background-color: limegreen;
  color: black;
}

.menu-author:hover {
  background-color: purple;
  color: black;
}

.menu-cause:hover {
  background-color: crimson;
  color: black;
}

.menu-works:hover {
  background-color: royalblue;
  color: black;
}

.menu-socials:hover {
  background-color: gold;
  color: black;
}

.menu-press:hover {
  background-color: orange;
  color: black;
}

/* ========== INDIVIDUAL PRESSED COLORS (STILL ACTIVE) ========== */
.menu-book-pressed {
  background-color: limegreen; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}

.menu-author-pressed {
  background-color: purple; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}

.menu-cause-pressed {
  background-color: crimson; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}

.menu-works-pressed {
  background-color: royalblue; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}

.menu-socials-pressed {
  background-color: gold; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}

.menu-press-pressed {
  background-color: orange; /* Match hover color */
  color: black; /* Match hover text color */
  border-radius: 8px;
}



/* ========== LOGO INLINE WITH MENU (FIXED PROPORTIONS) ========== */
.logo-item {
  margin-top: 40px; /* Space above logo */
}

.logo-item img {
  max-width: 120px;
  height: auto;
  transition: filter 0.3s ease, transform 0.3s ease;
  margin-right: -10px; /* NEW: shift 10px to the left */
}


.logo-item img:hover {
  transform: scale(1.05); /* Nice small hover zoom effect */
}



/* ========== FADE-IN ANIMATION ========== */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ========== RESPONSIVE TWEAKS FOR MOBILE ========== */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    padding: 2vh 2vw;
    text-align: center;
  }

  .left-side, .center-text, .right-side {
    width: 100%;
    margin-bottom: 30px;
  }

  .vertical-menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .vertical-menu li {
    margin: 10px 15px;
  }

  .logo-item {
    margin-top: 20px;
  }
}

/* ========== BLACK KNIGHT LOGO (Top Left) ========== */
.bk-logo {
  position: absolute;
  top: 20px;
  left: 100px;
  z-index: 1000;
}

.bk-logo-image {
  width: 200px;
  height: auto;
}

/* Top-right Rainbow Ranger Logo */
    .bk-logo-top-right {
      position: absolute;
      top: 20px;
      right: 75px;
      z-index: 1000;
    }

    .bk-logo-top-right img {
      width: 200px;
      height: auto;
    }

/* ========== BLACK KNIGHT LOGO (Top Left) ========== */
.bk-logo {
  position: absolute;
  top: 20px;
  left: 100px;
  z-index: 1000;
}

.bk-logo-image {
  width: 200px;
  height: auto;
}

/* Top-right Rainbow Ranger Logo */
    .rr-logo-top-right {
      position: absolute;
      top: 20px;
      right: 75px;
      z-index: 1000;
    }

    .rr-logo-top-right img {
      width: 200px;
      height: auto;
    }



/* ========== BACK ARROW (Top Right, shifted left 100px) ========== */
.back-arrow {
  position: absolute;
  top: 20px;
  right: 120px; /* Previously 20px — now 100px leftward */
  z-index: 1000;
}


.back-arrow-image {
  width: 40px; /* Size of arrow */
  height: auto;
  transition: transform 0.3s ease;
}

.back-arrow-image:hover {
  transform: scale(1.1);
}