/* About Us Page CSS */

/* Hero section About us */
.hero-books-section {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: var(--font-color);
  position: relative;
  overflow: hidden;
}

    :root {
      --bg-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color));
      --box-glow: 0 12px 24px rgba(0, 0, 0, 0.4);
      --box-hover: 0 20px 38px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 255, 255, 0.15);
      --font-color: white;
      --primary-color: #2B3990;
      --secondary-color: #008eb1;
    }

    .hero-about-us {
      background: var(--bg-gradient);
      color: var(--font-color);
      /* padding: 5.65rem 0 5.65rem; */
      /* overflow: hidden; */
    }

    .hero-text {
      max-width: 900px;
      margin: 0 auto;
      padding-top: 12px;
    }

    .hero-title {
      font-weight: 700;
      font-size: clamp(28px, 4.5vw, 44px);
      line-height: 1.05;
      margin-bottom: 18px;
    }


    .books-stage {
      position: relative;
      max-width: 1200px;
      height: 420px;
      margin: 48px auto 0;
      pointer-events: none;
    }

    .connectors {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .connector {
      fill: none;
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 3;
      stroke-linecap: round;
    }

    .book {
      position: absolute;
      pointer-events: auto;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      padding: 6px;
      z-index: 10;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      box-shadow: var(--box-glow);
    }

    .book img {
      width: 100%;
      height: auto;
      border-radius: 6px;
      display: block;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    /* Left & Right Book Hover Effects: pop, rotate, scale */
    .book.small:hover {
      transform: translateY(-14px) scale(1.06) rotate(-1.5deg);
      z-index: 999;
      box-shadow: var(--box-hover);
    }

    /* Center Book: scale only on hover, no movement to right */
    .center-book {
      width: 400px;
      left: 50%;
      bottom: -60px;
      transform: translateX(-50%);
      z-index: 1000000;
    }

    .center-book:hover {
      transform: translateX(-50%) scale(1.05);
      z-index: 999;
      box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
    }

    /* Book Sizes */
    .small {
      width: 210px;
    }

    /* Positioning Left */
    .top-left {
      top: 40px;
      left: 12%;
    }

    .mid-left {
      top: 150px;
      left: 10%;
    }

    .bottom-left {
      bottom: 44px;
      left: 13%;
    }

    /* Positioning Right */
    .top-right {
      top: 40px;
      right: 12%;
    }

    .mid-right {
      top: 150px;
      right: 10%;
    }

    .bottom-right {
      bottom: 44px;
      right: 13%;
    }

    /* Responsive Styles */
    @media (max-width: 1200px) {
      .center-book {
        width: 300px;
        /* border: 2px solid red; */
      }

      .small {
        width: 160px;
      }
    }

    @media (max-width: 991px) {
      .center-book {
        width: 240px;
        /* border: 2px solid green */
      }

      .small {
        width: 120px;
      }
    }

@media (max-width: 768px) {
  .center-book {
    width: 260px;
  }

  .small {
    width: 130px;
  }

  .top-left {
    top: 20px;
    left: 6%;
  }

  .mid-left {
    top: 140px;
    left: 6%;
  }

  .bottom-left {
    bottom: 30px;
    left: 7%;
  }

  .top-right {
    top: 20px;
    right: 6%;
  }

  .mid-right {
    top: 140px;
    right: 6%;
  }

  .bottom-right {
    bottom: 30px;
    right: 7%;
  }
}

@media (max-width: 480px) {
  .center-book {
    width: 200px;
  }

  .small {
    width: 100px;
  }

  .top-left {
    top: 20px;
    left: 4%;
  }

  .mid-left {
    top: 130px;
    left: 4%;
  }

  .bottom-left {
    bottom: 24px;
    left: 5%;
  }

  .top-right {
    top: 20px;
    right: 4%;
  }

  .mid-right {
    top: 130px;
    right: 4%;
  }

  .bottom-right {
    bottom: 24px;
    right: 5%;
  }

  .hero-title {
    font-size: 20px;
  }

  .btn-viewmore {
    padding: 8px 16px;
    font-size: 14px;
  }
}


/* Our-Journey Section-2 Styling */
.our-Journey img{
max-width: 100%;
object-fit: contain;
}

  .our-journey-section {
    background-color: #fff9f0;
    padding: 4rem 0;
  }

  .text-primary {
    color: var(--primary-color)!important;
  }

  .quote-box {
    background-color: var(--secondary-color);
  }

  .quote-text {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
  }

  .paragraph-block {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
  }

  /* Responsive Fixes for spacing */
  @media (max-width: 991.98px) {
    .our-journey-section {
      padding: 3rem 1.25rem;
    }

    .our-journey-section .col-lg-6 {
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 2rem;
    }

    .paragraph-block {
      padding-left: 0.875rem;
      margin-bottom: 1.5rem;
    }

    .quote-box {
      font-size: 0.95rem;
      padding: 1.25rem 1rem;
    }

    .quote-text {
      padding-left: 0.875rem;
    }
  }

  @media (max-width: 576px) {
    .our-journey-section {
      padding: 2.5rem 1rem;
    }

    .quote-box {
      padding: 1rem;
    }

    .quote-text {
      font-size: 0.95rem;
    }
  }

  
  /* Why us Section-3 Styling */

  .why-us-section-3 {
  background-color: #ffffff;
  padding: 4rem 0;
}

.publisher-color {
  color: #2b3990;
}

.book-stack {
  position: relative;
  width: 350px;
  height: 500px;
}

/* Common book image style */
.book-img {
  position: absolute;
  width: 250px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* ✨ Modern layered shadow */
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

.book-img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Desktop layout */
.book-back {
  top: 0;
  left: 0;
  z-index: 1;
}

.book-middle {
  top: 30px;
  left: 190px;
  z-index: 2;
}

.book-front {
  top: 160px;
  left: 60px;
  z-index: 3;
}

/* Medium screen layout */
@media (max-width: 1100px) {
  .book-img {
    width: 200px;
  }

  .book-back {
    top: 0;
    left: 0;
  }

  .book-middle {
    top: 30px;
    left: 120px;
  }

  .book-front {
    top: 160px;
    left: 60px;
  }
}

/* Tablet & below */
@media (max-width: 991.98px) {
  .book-stack {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 420px;
    margin: 0 auto;
  }

  .book-img {
    width: 220px;
  }

  .book-back {
    top: 0;
    left: 0;
   

  }

  .book-middle {
    top: 0;
    right: 0;
    left: auto;
  
  }

     .book-front {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 👇 Fix the hover animation without removing translateX */
  .book-front:hover {
    transform: translateX(-50%) translateY(-4px) scale(1.02);
  }

  /* Optional: Add hover for other books too if needed */
  .book-back:hover,
  .book-middle:hover {
    transform: translateY(-4px) scale(1.02);
  }
}
footer p {
  word-break: break-word;
  line-height: 1.6;
  max-width: 100%;
}



footer p {
  word-break: break-word;
  line-height: 1.6;
  font-size: 0.85rem;
  color: #d1d1d1;
}


/* Hero section padding issue styling fixes */
 .padding-top-extra-class{
        padding-top: 5.65rem!important;

 }
    @media (max-width: 992px) {
      .padding-top-extra-class{
        padding-top: 6rem!important;
      }
    }