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;
    color:#2980b9;
    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;
  }
  .book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* Book Image */
  .book-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* 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;
  }

  /* 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; }
    }





      body {
        font-family: Arial, sans-serif;
        background-color: #1e1e1e;
        color: #f5f5f5;
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  
      .chapter-card {
        width: 90%;
        background: #2c2c2c;
        margin: 20px auto;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.4);
        transition: all 0.3s ease-in-out;
      }
  
      .chapter-card h3 {
        margin: 0;
        cursor: pointer;
      }
  
      .chapter-content {
        display: none;
        margin-top: 15px;
        line-height: 1.8;
        font-size: 1.1rem;
      }
  
      .chapter-content span.highlight {
        background-color: #ff9800;
        color: #000;
        padding: 2px 4px;
        border-radius: 4px;
      }
  
      .controls {
        margin-top: 15px;
      }
  
      button {
        margin: 5px;
        padding: 8px 12px;
        background-color: #ff9800;
        border: none;
        color: #000;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
      }
  
      button:hover {
        background-color: #ffa733;
      }
  
      select {
        margin-left: 10px;
        padding: 6px;
        border-radius: 6px;
        border: none;
        background: #444;
        color: #fff;
      }
  
      .night-toggle {
        position: fixed;
        top: 65px;
        right: 20px;
        background: #949292;
        color: #1c1b1b;
        border: none;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
      }
  
      .light-mode {
        background-color: #f5f5f5;
        color: #1d1c1c;
      }
  
      .light-mode .chapter-card {
        background: #fff;
        color: #7c7a7a;
      }
  
      .light-mode select {
        background: #ddd;
        color: #6f6d6d;
      }
      @media (max-width: 768px) {
      .chapter-card {
            width: 100%;
          }
      }