html, body {height:100%; margin:0; font-family:Arial, sans-serif; display:flex; flex-direction:column;}
body {padding-top:30px;}
.navbar {background-color:#244; padding:0.5rem 1rem; color:#fff; display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; width:100%; z-index:999;}
.logo-img {height:80px; transition: height 0.3s;}
@media(max-width:768px){.logo-img{height:60px;}}
.menu-toggle {font-size:30px; cursor:pointer; color:#fff;}
.navbar-social {display:flex; gap:15px; align-items:center;}
.navbar-social a {color:#fff; font-size:22px; transition:0.3s;}
.navbar-social a:hover {color:#ffc107; transform:scale(1.2);}
.sidebar {height:100%; width:0; position:fixed; z-index:10000; top:0; right:0; background-color:#244; overflow-x:hidden; transition:0.3s; padding-top:60px; color:#fff;}
.sidebar a {display:block; padding:10px 20px; text-decoration:none; color:orange;}
.sidebar a:hover {background-color:#333;}
.sidebar ul {list-style:none; padding-left:20px; display:none;}
.sidebar h4 {cursor:pointer; padding:5px 20px; margin:0;font-size: 16px;font-family:'Courier New', Courier, monospace;}
.sidebar .social-icons {display:flex; justify-content:space-around; gap:8px; margin-bottom:20px;}
#close-btn {position:absolute; top:15px; right:20px; font-size:30px; cursor:pointer; color:#fff;}
.card-row{width:100%; display:flex; justify-content:center; margin-bottom:30px;}
.card-container{width:85%; max-width:900px; background:#fff; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s;}
.card-container:hover{transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.2);}
.card-header h2{margin:15px 0 5px; font-size:1.5em;}
.card-header p{margin:0 0 10px; color:#555;}
.card-body{padding:0 15px 15px; text-align:left;}
footer {background:#244; color:#fff; padding:20px 0; text-align:center; width:100%; margin-top:auto;}
footer .social-icons {display:flex; justify-content:center; gap:15px; flex-wrap:wrap;}
footer .social-icons a {font-size:22px; color:#fff; transition:0.3s;}
footer .social-icons a:hover {color:#ffc107; transform:scale(1.2);}
main.container {max-width:1200px; margin:0 auto; padding:20px;}
.filter-controls {margin-bottom:20px; display:flex; gap:10px; justify-content:center;}
.filter-controls select, .filter-controls input {padding:5px 10px; font-size:16px;}
.card-container {background:#fff; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15); width:100%; max-width:600px; padding:15px; margin-bottom:20px;}
.card-header .card-title {font-size:24px; margin-bottom:5px;}
.card-header .p1 {font-weight:bold;}
.card-header .p2 {color:#555;}
.card-body {margin-top:10px;}
.solution-button {background:#222; color:#fff; border:none; padding:8px 12px; border-radius:5px; cursor:pointer; transition:0.3s;}
.solution-button:hover {background:#ffcc00; color:#000;}
.solution-content {display:none; margin-top:10px; background:#f1f1f1; padding:10px; border-radius:5px; overflow:auto; max-height:500px;}
.highlight {background-color:yellow;}



/* Only footer social icons black */
#footer-icons a i {
    color: #000000; /* black color */
    transition: color 0.3s; /* smooth hover */
}

/* Hover effect */
#footer-icons a:hover i {
    color: #555555; /* lighter black/gray on hover */
}




/* Style for the wave text */




  
  /* Section styling */
  #book-library {
    max-width: 1200px;
    margin: auto;
    padding-top: 20px;
  }

  h2.section-title {
    text-align: center;
    margin: 70px 0;
    font-size: 3rem;
    color: #2d3436;
  }

  /* Disclaimer Card */
  .disclaimer-card {
    background: #fffbe6;
    border-left: 6px solid #f39c12;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .disclaimer-card a {
    color: #e67e22;
    font-weight: bold;
    text-decoration: none;
  }
  .disclaimer-card a:hover {
    text-decoration: underline;
  }

  /* Book grid */
  .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  /* Book Card */
  .book-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
     width: 300px;           /* control card width */
  border: 1px solid #ddd; 
  border-radius: 10px;
 
  text-align: center;
  }
  
  
  .book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* Book Image */
.book-img {
  width: 100%;           /* image always fits card width */
  height: 450px;         /* fixed height so all images look same */
  object-fit: cover;     /* crop edges if image ratio differs */
  display: block;
}
  

  /* Book Content */
  .book-content {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .book-title {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 8px;
  }
  .book-meta {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 12px;
  }
  .book-desc {
    flex-grow: 1;
    font-size: 1rem;
    margin-bottom: 15px;
  }
  .book-btn {
    display: inline-block;
    padding: 10px 14px;
    background: #3498db;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  .book-btn:hover {
    background: #2980b9;
  }


.read-book-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background: #1e90ff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s;
}

.read-book-btn:hover {
  background: #0066cc;
}
  /* Responsive heading size */
  @media(max-width: 600px) {
    h2.section-title {
      font-size: 1.5rem;
    }
  }
  
  
     /* Animation */
  .wave-text {
      display: inline-block;
      font-size: 3.5rem;
      font-weight: bold;
      color: #2c3e50;
      letter-spacing: 2px;
      overflow: hidden;
      white-space: nowrap;
    }

    /* Target each span inside the text */
    .wave-text span {
      display: inline-block;
      animation: wave 1.5s infinite;
    }

    /* Delay each letter for wave effect */
    .wave-text span:nth-child(1) { animation-delay: 0s; }
    .wave-text span:nth-child(2) { animation-delay: 0.1s; }
    .wave-text span:nth-child(3) { animation-delay: 0.2s; }
    .wave-text span:nth-child(4) { animation-delay: 0.3s; }
    .wave-text span:nth-child(5) { animation-delay: 0.4s; }
    .wave-text span:nth-child(6) { animation-delay: 0.5s; }
    .wave-text span:nth-child(7) { animation-delay: 0.6s; }
    .wave-text span:nth-child(8) { animation-delay: 0.7s; }
    .wave-text span:nth-child(9) { animation-delay: 0.8s; }
    .wave-text span:nth-child(10){ animation-delay: 0.9s; }
    .wave-text span:nth-child(11){ animation-delay: 1s; }

    /* Wave animation */
    @keyframes wave {
      0%   { transform: translateY(0); color: #2c3e50; }
      30%  { transform: translateY(-10px); color: #e67e22; }
      60%  { transform: translateY(0); color: #3498db; }
      100% { transform: translateY(0); color: #2c3e50; }
    }