.stats-section { background:#1a0f5f; text-align:center; padding:18px 0 25px 0; }
    .books-container { display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; gap:20px; width:70%; margin:0 auto; }
    .book-item { position:relative; width:18%; text-align:center; transition:transform 0.3s ease; }
    .book-item:hover { transform:scale(1.05); }
    .book-item img { width:100%; display:block; border-radius:10px; background:#d7bfff; padding:0; margin:0; }
    .book-text { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); color:#000; font-size:30px; font-weight:bold; text-align:center; pointer-events:none; transition:color 0.3s ease; }
    .book-item:hover .book-text { color:red; }

    @media screen and (max-width:768px) {
      .books-container { flex-wrap:wrap; justify-content:center; gap:25px; width:90%; }
      .book-item { width:35%; }
      .book-text { font-size:18px; }
    }
    @media screen and (max-width:480px) {
      .books-container { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; justify-items:center; width:95%; }
      .book-item { width:80%; }
      .book-item img { border-radius:14px; }
      .book-text { top:44%; font-size:22px; }
    }

    .section { padding:0 10px 15px; max-width:1000px; margin:0 auto; margin-top:-170px; margin-bottom:150px; }
    .section h2, .section h3 { font-size:36px; margin:0 0 15px; text-align:center; }
    .section p { font-size:26px; line-height:1.6; margin:0 auto 20px; text-align:left; }

    footer { text-align:center; padding:5px; font-size:28px; margin-top:-150px; }
    .about-section { position: relative; margin-top: -210px; z-index: 2; }
    
     /* Heading */
.category-heading{
  text-align:center;
  font-size:38px;
  font-weight:700;
  color:#cecbd7;
  background:#1f1462;
  padding:12px 0 5px;
  font-family:'Segoe UI', Tahoma, sans-serif;
}

/* Navy strip */
.qualification-strip{
  background:#1f1462;
  padding:0.5cm 15px;
}

/* Grid */
.category-grid{
  max-width:900px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:45px;
}

/* Image link */
.category-img{
  display:inline-block;
  transition:0.25s ease;
}

.category-img img{
  width:100%;
  height:auto;
  display:block;
}

.category-img:hover{
  transform:scale(1.05);
}

/* Tablet */
@media(max-width:768px){
  .category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
  }
}

/* Mobile */
@media(max-width:480px){

  .category-heading{
    display:block;
    font-size:26px;        /* visible but compact */
    padding:10px 0 6px;
  }

  .category-strip{
    padding:0.7cm 10px;
  }

  .category-grid{
    gap:18px;
  }
}

/* ===== Footer Buttons Styling ===== */
.footer-buttons-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px auto 60px;
  flex-wrap: wrap;
  margin-top: -80px; 
   margin-bottom: 150px;
}


.footer-btn {
  background: #4F2888;
  color: white;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 30px;
  transition: 0.3s ease;
  text-align: center;
}

.footer-btn:hover {
  background: #a333f3;
}

/* ✅ Mobile view */
@media (max-width: 768px) {
  .footer-buttons-section {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .footer-btn {
    width: 80%;
    font-size: 18px;
  }
}

 .telegram-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #0088cc;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Popup effect */
.telegram-float:hover,
.telegram-float:active {
    transform: scale(1.15);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Tooltip text */
.telegram-text {
    position: absolute;
    right: 72px;
    background: #0088cc;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Show text on hover (desktop) and press (mobile) */
.telegram-float:hover .telegram-text,
.telegram-float:active .telegram-text {
    opacity: 1;
    transform: translateY(0);
}
/* Mobile view adjustments */
@media (max-width: 768px) {

    .telegram-text {
        font-size: 12px;       /* smaller text */
        padding: 6px 10px;     /* tighter spacing */
    }

    .telegram-float {
        width: 50px;           /* optional: slightly smaller icon */
        height: 50px;
    }

    .telegram-float svg {
        width: 22px;           /* optional: smaller telegram icon */
        height: 22px;
    }
}