/* ============================
 🌈 Reset & Font Setup
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ✅ সুন্দর বাংলা ফন্ট */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@400;600;700&display=swap');

body {
  font-family: 'Noto Serif Bengali', serif;
  line-height: 1.8;
  background: linear-gradient(180deg, #0a052a, #160279);
  color: #EAF5FF;
  min-height: 100vh;
  padding-bottom: 60px;
  overflow-x: hidden; /* ⚙️ মোবাইলে স্ক্রল কাটার সমস্যা দূর */
}

/* Slideshow */ .slideshow-container { max-width: 1200px; margin: auto; position: relative; } .mySlides { display: none; } .mySlides img { width: 100%; border-radius: 8px; } .dots { margin-top: 10px; } .dot { height: 15px; width: 15px; margin: 0 4px; background-color: #bbb; border-radius: 50%; display: inline-block; cursor: pointer; } .active { background-color: #717171; }
/* ============================
 🖼️ Content Section (Image + Text)
============================ */
.content-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 60px 60px;
  background-color: rgba(22, 2, 121, 0.85);
  border-top: 2px solid #2BF44C;
  border-bottom: 2px solid #2BF44C;
  flex-wrap: nowrap;
}

/* উল্টানো সেকশন */
.content-section.reverse {
  flex-direction: row-reverse;
}

/* ইমেজ ব্লক */
.content-img {
  flex: 1 1 50%;
  text-align: center;
  min-width: 300px;
}
.content-img img {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.content-img img:hover {
  transform: scale(1.05);
}

/* টেক্সট ব্লক */
.content-text {
  flex: 1 1 50%;
  padding: 20px;
  color: #E0E6FF;
  word-break: break-word; /* ✅ মোবাইলে লাইন ঠিকভাবে ভাঙবে */
  word-wrap: break-word;
  white-space: normal;
}
.content-text h2 {
  font-size: 30px;
  font-weight: 700;
  color: #67EE49;
  margin-bottom: 18px;
  text-shadow: 0 0 6px rgba(103,238,73,0.4);
}
.content-text p {
  font-size: 18px;
  line-height: 1.9;
  text-align: justify;
  color: #E0E6FF;
  word-break: break-word;
  white-space: normal;
}

/* ============================
 🌟 আলরদিশা লিঙ্ক (হলুদ + আইকন)
============================ */
.alor-link {
  color: #FFD700;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alor-link:hover {
  color: #FFF36D;
  text-decoration: underline;
}
.alor-link .arrow {
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.alor-link:hover .arrow {
  transform: translateX(6px);
  color: #2BF44C;
}

/* ============================
 📱 Responsive (Mobile)
============================ */
@media (max-width: 1024px) {
  .content-section {
    flex-wrap: wrap;
    padding: 40px 30px;
  }
  .content-img img {
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  .slideshow-container {
    margin: 20px auto;
    padding: 0 10px;
  }

  .mySlides img {
    max-width: 100%;
  }

  .content-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 25px 15px;
  }

  .content-img,
  .content-text {
    width: 100%;
    flex: none;
  }

  .content-text h2 {
    font-size: 22px;
    line-height: 1.5;
  }

  .content-text p {
    font-size: 16px;
    line-height: 1.8;
    padding: 0 10px;
    text-align: justify;
    word-break: break-word;
    white-space: normal;
  }
}

@media (max-width: 400px) {
  .content-text h2 {
    font-size: 18px;
  }
  .content-text p {
    font-size: 15px;
    line-height: 1.7;
  }
}



/* ---------- দ্বিতীয় ডিজাইন ---------- */
:root {
  --bg:#0b1020;--card:#0f172a;--muted:#94a3b8;--text:#e2e8f0;
  --accent:#22d3ee;--ring:#38bdf8;
  --shadow:0 20px 50px rgba(0,0,0,.35);
}
* { box-sizing:border-box }
html,body { height:100%; }
body {
  margin:0;
  background:linear-gradient(120deg,#0b1020,#111827 55%,#0b1324);
  font-family:"Noto Sans Bengali",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
}
.app {
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100dvh
}
header {
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(10,14,25,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bar {
  display:flex;align-items:center;gap:.8rem;
  padding:.75rem 1rem;
  max-width:1200px;margin:0 auto
}
.logo {
  display:flex;align-items:center;gap:.6rem;
  font-weight:800;letter-spacing:.4px
}
.logo .dot {
  width:12px;height:12px;border-radius:50%;
  background:conic-gradient(#22d3ee,#a78bfa,#22d3ee)
}
.spacer { flex:1 }
.btn,button {
  appearance:none;border:0;cursor:pointer;
  border-radius:16px;padding:.6rem .9rem;
  background:#111827;color:#e5e7eb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:.2s ease;
}
.btn:hover { box-shadow:inset 0 0 0 1px var(--ring); }
.btn:active { transform:translateY(1px) }
.content {
  max-width:1200px;margin:0 auto;padding:1rem;
  display:grid;gap:1rem;grid-template-columns:280px 1fr
}
@media (max-width: 960px){.content{grid-template-columns:1fr}}

/* Sidebar */
.side { position:relative }
.card {
  background:rgba(15,23,42,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;box-shadow:var(--shadow)
}
.side .card { padding:.75rem }
.search {
  display:flex;gap:.5rem
}
.search input {
  flex:1;border:0;border-radius:12px;
  padding:.65rem .8rem;
  background:#0b1222;color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)
}
.chapter-list {
  margin-top:.5rem;max-height:68dvh;
  overflow:auto;padding-right:.25rem
}
.chapter-item {
  display:flex;gap:.6rem;align-items:center;
  padding:.55rem .5rem;
  border-radius:12px;cursor:pointer
}
.chapter-item:hover { background:rgba(255,255,255,.05) }
.chapter-item.active {
  outline:2px solid var(--ring);
  background:rgba(56,189,248,.08)
}
.thumb {
  width:46px;height:46px;border-radius:10px;
  background:#0b1222;flex:none;overflow:hidden;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}
.thumb img { width:100%;height:100%;object-fit:cover }
.meta { display:grid }
.meta small { color:var(--muted) }

/* Stage */
.stage { position:relative;min-height:68dvh }
.slide {
  position:relative;overflow:hidden;
  border-radius:22px;border:1px solid rgba(255,255,255,.08);
  height:100%;display:grid;grid-template-columns:1.2fr 1fr;
  background:#0b1222
}
@media (max-width: 960px){.slide{grid-template-columns:1fr;min-height:70dvh}}

.media { position:relative;overflow:hidden }
.media .img { position:absolute;inset:0 }
.media .img img {
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.05) saturate(1.08)
}
.media::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 65%)
}

.copy {
  position:relative;padding:1.2rem 1.2rem 1rem;
  background:linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.6));
  display:grid;gap:.8rem
}
.badges { display:flex;flex-wrap:wrap;gap:.4rem }
.badge {
  font-size:.75rem;padding:.25rem .5rem;
  border-radius:999px;background:rgba(255,255,255,.08);color:#e5e7eb
}
h2 { margin:0;font-weight:900;line-height:1.15;letter-spacing:.2px }
p { margin:0;color:#cbd5e1 }
.quote { font-style:italic;color:#e2e8f0;opacity:.95 }
.actions { display:flex;align-items:center;gap:.5rem;margin-top:.3rem }

/* Controls */
.controls {
  display:flex;align-items:center;gap:.5rem;
  justify-content:space-between;margin-top:.6rem
}
.progress {
  height:8px;background:#0b1222;border-radius:999px;
  overflow:hidden;border:1px solid rgba(255,255,255,.08)
}
.bar-inner {
  height:100%;width:0;
  background:linear-gradient(90deg,#22d3ee,#a78bfa);
  transition:width .3s ease
}

.nav { display:flex;gap:.5rem }
.round {
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:#0b1222;color:#e5e7eb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}
.round:hover { box-shadow:inset 0 0 0 1px var(--ring) }

/* Theming per chapter via gradient ring */
.theme-ring {
  position:absolute;inset:auto auto -40% -30%;
  width:90vmin;height:90vmin;border-radius:50%;
  filter:blur(60px);opacity:.35;pointer-events:none
}

/* Footer */
    footer {
      background: #000;
      padding: 40px 20px 20px;
      margin-top: auto;
    }

    .footer-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: auto;
    }

    .footer-col h3 {
      margin-bottom: 15px;
      color: gold;
    }

    .footer-col p, .footer-col a {
      color: #ccc;
      font-size: 14px;
      text-decoration: none;
      display: block;
      margin: 6px 0;
      transition: 0.3s;
    }

    .footer-col a:hover {
      color: gold;
      transform: translateX(5px);
    }

    .footer-social a {
      display: inline-block;
      margin-right: 10px;
      color: #ccc;
      font-size: 18px;
      transition: 0.3s;
    }

    .footer-social a:hover {
      color: gold;
      transform: scale(1.2);
    }

    .footer-bottom {
      text-align: center;
      padding-top: 20px;
      font-size: 13px;
      color: #888;
      border-top: 1px solid #333;
      margin-top: 20px;
     /*footer end*/ 
      
    }