:root{
  --paper:#F7F3E8; --paper-deep:#F0E9D8; --ink:#2B2418; --ink-soft:#5A5140; --ink-faint:#8B8168;
  --green-deep:#14432A; --green-mid:#1F5C3D; --green-pale:#E6EEE7;
  --gold:#A9822E; --gold-soft:#D9C48B; --gold-line:#CBB77E;
  --card:#FFFDF7; --border:#E3DCC7; --shadow:0 4px 24px rgba(43,36,24,0.07); --radius:4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Hind Siliguri','Noto Serif Bengali',serif; line-height:1.75;}
.ar{font-family:'Amiri','Noto Naskh Arabic',serif; direction:rtl;}
h1,h2,h3,h4{font-family:'Noto Serif Bengali',serif; color:var(--green-deep); margin:0; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.hashiya-divider{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto; width:100%; max-width:420px; padding:18px 0;}
.hashiya-divider .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--gold-line), transparent);}
.hashiya-divider .diamond{width:9px;height:9px; background:var(--gold-soft); border:1px solid var(--gold); transform:rotate(45deg); flex-shrink:0;}
.hashiya-divider .diamond.mid{width:13px;height:13px; background:var(--green-mid); border-color:var(--green-deep);}

header{position:sticky; top:0; z-index:100; background:rgba(247,243,232,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
/* ２０２６-０৯-２৩ (বাগ-ফিক্স, ব্যবহারকারীর রিপোর্ট -- "একটা কাজ করলে আরেকটা সমস্যা, এখন মেনুবারই নেই"):
   .nav-wrap আগে max-width:1180px-এ বাঁধা ছিল -- স্ক্রিন যত চওড়াই হোক, header content কখনো ১১৮০px-এর
   বেশি জায়গা পেত না। ১১টা মেনু-আইটেমের জন্য দরকারি জায়গার (~৭৭৮px) তুলনায় nav-কে বরাদ্দ থাকা জায়গা
   (~৬২৫px) কম হয়ে যাচ্ছিল প্রায় সব সাধারণ ডেস্কটপ-প্রস্থেই -- ফলে nav-compact (হ্যামবার্গার) JS
   প্রায় সবসময়ই সক্রিয় হয়ে যাচ্ছিল, ডেস্কটপেও পুরো মেনু-নাম লুকিয়ে যেত। max-width বাড়িয়ে (১৩৬０px)
   ও .nav-divider-এর মার্জিন কমিয়ে nav-কে বেশি জায়গা দেওয়া হলো, যাতে সাধারণ ডেস্কটপ-প্রস্থে পুরো
   মেনু স্বাভাবিকভাবেই (হ্যামবার্গার ছাড়া) ফিট করে -- nav-compact JS এখন শুধু সত্যিকারের সংকীর্ণ
   উইন্ডো/স্ক্রিনের জন্য fallback হিসেবে থেকে যায়। */
.nav-wrap{max-width:1360px; margin:0 auto; display:flex; align-items:center; justify-content:flex-start; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.nav-divider{width:0; align-self:stretch; margin:2px 20px; border-inline-start:3px double var(--gold-line); flex-shrink:0;}
.brand-emblem{width:44px;height:44px; border:1.5px solid var(--gold); border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--green-deep); color:var(--gold-soft); font-family:'Amiri',serif; font-size:20px; flex-shrink:0;}
/* ２０২৬-１０-０１ (লোগো-ছবি + নাম দুটোই একসাথে, দেখুন core/templates/core/base.html-এর brand ব্লক) */
.brand > img{width:44px;height:44px; border-radius:50%; object-fit:cover; border:1.5px solid var(--gold); flex-shrink:0;}
.brand-text .bn{font-size:16px; font-weight:700; color:var(--green-deep); line-height:1.3;}
.brand-text .ar-small{font-size:13px; color:var(--ink-faint); font-family:'Amiri',serif;}
nav{flex:1 1 auto; min-width:0; overflow:visible;}
nav ul{list-style:none; display:flex; flex-wrap:nowrap; gap:18px; margin:0; padding:2px 2px; width:max-content;}
nav > ul > li{position:relative; flex-shrink:0;}
nav a{font-size:14px; color:var(--ink-soft); font-weight:500; white-space:nowrap;}
nav > ul > li > a{font-weight:700;}
nav a:hover, nav a.active{color:var(--green-deep);}
.submenu{
  display:none; position:absolute; top:100%; left:0; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); min-width:180px; padding:8px 0; z-index:50;
}
nav > ul > li:hover > .submenu{display:block;}
.submenu li{padding:0; position:relative;}
.submenu a{display:block; padding:9px 16px; font-size:13.5px;}
.submenu a:hover{background:var(--paper-deep);}
/* ２０２৬-０８-０２ (Task #28): তৃতীয়+ লেভেলের সাবমেনু (সাবমেনুর সাব) — প্যারেন্ট সাবমেনুর ভেতরের
   .submenu কে ডানপাশে ফ্লাইআউট করে দেখানো হয়, যাতে যেকোনো গভীরতার মেনু ঠিকঠাক দেখা যায়। */
.submenu .submenu{top:0; left:100%;}
.submenu li:hover > .submenu{display:block;}
.nav-toggle{display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--green-deep); display:block;}

.site-banner{width:100%; overflow:hidden;}
.site-banner img{width:100%; height:auto; max-height:180px; object-fit:cover; display:block;}
.banner-fallback{background:linear-gradient(135deg, var(--green-deep), var(--green-mid)); color:#fff; text-align:center; padding:16px 24px;}
.banner-fallback h2{color:#fff; font-size:20px; margin:0;}

.hero{max-width:820px; margin:0 auto; padding:70px 24px 40px; text-align:center;}
.hero-eyebrow{font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px; display:block;}
.hero h1.bn-title{font-size:34px; margin-bottom:18px; color:var(--ink);}
.hero p.tagline{color:var(--ink-soft); font-size:16.5px; max-width:560px; margin:0 auto 28px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.hero .btn-row{justify-content:center;}
.btn{display:inline-block; padding:13px 26px; border-radius:2px; font-size:15px; font-weight:600; border:1.5px solid transparent; cursor:pointer; transition:all .2s ease;}
.btn-primary{background:var(--green-deep); color:#fff;}
.btn-primary:hover{background:var(--green-mid);}
.btn-outline{border-color:var(--green-deep); color:var(--green-deep);}
.btn-outline:hover{background:var(--green-deep); color:#fff;}
.btn-call{background:var(--gold); color:#fff; border-color:var(--gold);}
.btn-call:hover{background:transparent; color:var(--gold);}
.btn-whatsapp{background:#25D366; color:#fff; border-color:#25D366;}
.btn-whatsapp:hover{background:#1EBE5A; border-color:#1EBE5A;}

.hero-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 22px; margin:30px auto 0; position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 30px;}
.hero-panel::before{content:''; position:absolute; top:6px; left:6px; right:6px; bottom:6px; border:1px solid var(--gold-line); pointer-events:none; opacity:.5;}
.info-row{display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:none; font-size:14px;}
.info-row:last-child{border-bottom:none;}
.info-row .label{color:var(--ink-faint);}
.info-row .label::after{content:':'; margin-inline-start:1px;}
.info-row .value{font-weight:600; color:var(--green-deep);}

section{max-width:1180px; margin:0 auto; padding:60px 24px;}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head .eyebrow-ar{font-family:'Amiri',serif; direction:rtl; color:var(--gold); font-size:19px; margin-bottom:6px; display:block;}
.section-head h2{font-size:28px; margin-bottom:12px;}
.section-head p{color:var(--ink-soft); font-size:15px;}
.bg-alt{background:var(--paper-deep);}

.margin-note{position:relative; padding-left:22px; border-left:2px solid var(--gold);}
.margin-note .ar-note{font-family:'Amiri',serif; direction:rtl; color:var(--gold); font-size:15px; display:block; margin-bottom:4px;}

.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:start;}
.about-grid h3{font-size:22px; margin-bottom:14px;}
.about-grid p{color:var(--ink-soft); margin-bottom:14px; font-size:15.5px;}
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px;}
.stat-box{text-align:center; padding:18px 10px; border:1px solid var(--border); background:var(--card); border-radius:var(--radius);}
.stat-box .num{font-family:'Noto Serif Bengali',serif; font-size:26px; font-weight:700; color:var(--green-deep);}
.stat-box .lbl{font-size:12.5px; color:var(--ink-faint); margin-top:4px;}

.dept-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:26px;}
.dept-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px 26px; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.dept-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.dept-card .dept-ar{font-family:'Amiri',serif; direction:rtl; font-size:26px; color:var(--green-deep); margin-bottom:4px;}
.dept-card h3{font-size:19px; margin-bottom:6px; color:var(--ink);}
.dept-card .dept-tag{display:inline-block; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:16px;}
.dept-card ul{padding-left:18px; margin:0 0 18px; color:var(--ink-soft); font-size:14.5px;}
.dept-card ul li{margin-bottom:6px;}
.dept-meta{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-faint); border-top:1px dashed var(--border); padding-top:14px;}

.teacher-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.teacher-card{text-align:center;}
.teacher-photo{width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--green-pale); border:2px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-size:34px; color:var(--green-deep); margin-bottom:14px; overflow:hidden;}
.teacher-photo img{width:100%; height:100%; object-fit:cover;}
.teacher-card h4{font-size:16px; margin-bottom:3px;}
.teacher-card .role{font-size:13px; color:var(--gold); font-weight:600; margin-bottom:4px;}
.teacher-card .sub{font-size:12.5px; color:var(--ink-faint);}

.admission-wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
.step-list{list-style:none; margin:0; padding:0; counter-reset:step;}
.step-list li{counter-increment:step; position:relative; padding:14px 0 14px 44px; border-bottom:1px dashed var(--border);}
.step-list li:last-child{border-bottom:none;}
.step-list li::before{content:counter(step); position:absolute; left:0; top:12px; width:28px; height:28px; border-radius:50%; background:var(--green-deep); color:var(--gold-soft); font-family:'Noto Serif Bengali',serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}
.step-list h4{font-size:15.5px; margin-bottom:3px; color:var(--ink);}
.step-list p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.req-box{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.req-box h4{font-size:16px; margin-bottom:14px; color:var(--green-deep);}
.req-box ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:14.5px;}
.req-box ul li{margin-bottom:8px;}

.notice-list{display:flex; flex-direction:column; gap:0;}
.notice-item{display:flex; gap:22px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border); transition:background .15s;}
.notice-item:hover{background:var(--paper-deep);}
.notice-date{flex-shrink:0; width:74px; text-align:center; background:var(--green-deep); color:var(--gold-soft); padding:10px 6px; border-radius:2px; font-family:'Noto Serif Bengali',serif;}
.notice-date .d{font-size:20px; font-weight:700; display:block; line-height:1;}
.notice-date .m{font-size:11px; display:block; margin-top:3px;}
.notice-body h4{font-size:16px; margin-bottom:4px; color:var(--ink);}
.notice-body p{font-size:14px; color:var(--ink-soft); margin:0;}
.notice-tag{display:inline-block; font-size:11px; color:var(--gold); font-weight:700; margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px;}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.blog-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.blog-thumb{height:150px; background:var(--green-pale); display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-size:30px; color:var(--green-mid);}
.blog-thumb-img{padding:0;}
.blog-thumb-img img{width:100%; height:100%; object-fit:cover;}
.blog-body{padding:20px;}
.blog-cat{font-size:11px; color:var(--gold); text-transform:uppercase; font-weight:700; letter-spacing:.5px;}
.blog-body h4{font-size:16px; margin:8px 0 8px; color:var(--ink);}
.blog-body p{font-size:13.5px; color:var(--ink-soft); margin:0 0 12px;}
.blog-meta{font-size:12px; color:var(--ink-faint); display:flex; justify-content:space-between; border-top:1px dashed var(--border); padding-top:10px;}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto;}
.gallery-card{display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; text-decoration:none;}
.gallery-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.gallery-card img{width:100%; height:150px; object-fit:cover; display:block;}
.gallery-card-body{padding:10px 12px;}
.gallery-card-body h4{font-size:14px; margin:0 0 4px; color:var(--ink);}
.gallery-card-body p{font-size:12.5px; color:var(--ink-soft); margin:0;}

.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto;}
.video-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.video-embed{position:relative; width:100%; padding-top:56.25%; background:#000;}
.video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.video-card h4{font-size:14.5px; margin:0; padding:12px 14px; color:var(--ink);}
.see-all{text-align:center; margin-top:34px;}

.filter-bar{max-width:1180px; margin:0 auto; padding:0 24px 30px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.filter-chip{padding:9px 20px; border:1.5px solid var(--border); border-radius:30px; font-size:13.5px; color:var(--ink-soft); background:var(--card); cursor:pointer; transition:all .2s ease; font-weight:500;}
.filter-chip:hover{border-color:var(--gold);}
.filter-chip.active{background:var(--green-deep); color:var(--gold-soft); border-color:var(--green-deep);}

.contact-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px;}
.contact-info .info-line{display:flex; gap:14px; margin-bottom:20px; align-items:flex-start;}
.contact-info .icon{width:38px;height:38px; border-radius:50%; background:var(--green-pale); color:var(--green-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;}
.contact-info h4{font-size:15px; margin-bottom:3px;}
.contact-info p{font-size:14px; color:var(--ink-soft); margin:0;}
form.contact-form{display:flex; flex-direction:column; gap:14px;}
form.contact-form input, form.contact-form textarea{padding:13px 15px; border:1px solid var(--border); border-radius:2px; font-family:'Hind Siliguri',sans-serif; font-size:14.5px; background:var(--card); color:var(--ink);}
form.contact-form textarea{min-height:110px; resize:vertical;}
form.contact-form button{align-self:flex-start;}
.form-success{background:var(--green-pale); color:var(--green-deep); padding:14px 18px; border-radius:var(--radius); margin-bottom:16px; font-size:14px;}

.post-body{max-width:820px; margin:0 auto; padding:0 24px 70px; color:var(--ink-soft); font-size:16px; line-height:1.9; white-space:pre-line;}
.post-header{max-width:820px; margin:0 auto; padding:50px 24px 20px;}
.post-header h1{font-size:30px; margin-bottom:14px;}

footer{background:var(--green-deep); color:#CFC9B4; padding:50px 24px 22px;}
.footer-wrap{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px;}
.footer-brand{text-align:center;}
.footer-brand .ar-small{font-family:'Amiri',serif; color:var(--gold-soft); font-size:18px; display:block; text-align:center; margin-bottom:6px;}
.footer-brand p{font-size:13.5px; color:#B7AF95; margin:12px auto 0; max-width:280px;}
footer h5{color:var(--gold-soft); font-size:14px; margin-bottom:16px; letter-spacing:.5px;}
footer ul{list-style:none; padding:0; margin:0;}
footer ul li{margin-bottom:10px; font-size:13.5px;}
footer ul a:hover{color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:14px;}
.footer-social a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(217,196,139,0.4); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--gold-soft); transition:all .2s ease;}
.footer-social a:hover{background:var(--gold); border-color:var(--gold); color:#fff;}
.footer-bottom{max-width:1180px; margin:36px auto 0; padding-top:20px; border-top:1px solid rgba(217,196,139,0.15); text-align:center; font-size:12.5px; color:#9C9478;}
.footer-date{max-width:1180px; margin:8px auto 0; text-align:center; font-size:11.5px; color:#8A8267;}

.notice-ticker{background:var(--green-pale); color:var(--green-deep); overflow:hidden; white-space:nowrap; position:relative; border-bottom:1px solid var(--gold-line);}
.notice-ticker .ticker-label{position:absolute; top:0; left:0; bottom:0; display:flex; align-items:center; background:var(--gold); color:#fff; font-weight:700; font-size:11.5px; padding:0 14px; z-index:2; letter-spacing:.5px;}
.notice-ticker .ticker-track{display:inline-flex; align-items:center; gap:50px; padding:6px 0 6px 130px; animation:ticker-scroll 28s linear infinite;}
.notice-ticker .ticker-track a, .notice-ticker .ticker-track span{font-size:12.5px; color:var(--green-deep); text-decoration:none;}
.notice-ticker .ticker-track a:hover{color:var(--gold); text-decoration:underline;}
.notice-ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.spotlight-bar{background:linear-gradient(90deg, var(--gold-soft), var(--gold)); color:var(--green-deep); text-align:center; padding:16px 20px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-weight:600; font-size:15px;}
.spotlight-bar .btn{padding:8px 20px; font-size:13.5px;}

.slider{position:relative; max-width:1180px; margin:0 auto; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.slider .slide{display:none; position:relative;}
.slider .slide.active{display:block;}
.slider .slide img{width:100%; height:420px; object-fit:cover; display:block;}
.slider .slide-caption{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg, rgba(20,67,42,0.85), transparent); color:#fff; padding:46px 30px 22px;}
.slider .slide-caption h3{color:#fff; font-size:22px; margin-bottom:6px;}
.slider .slide-caption p{color:var(--gold-soft); font-size:14px; margin:0 0 12px;}
.slider-dots{display:flex; justify-content:center; gap:8px; position:absolute; bottom:14px; left:0; right:0; z-index:3;}
.slider-dots span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.6); cursor:pointer; transition:background .2s ease;}
.slider-dots span.active{background:#fff;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

@media(max-width:980px){
  .nav-wrap{justify-content:space-between;}
  .nav-divider{display:none;}
  nav{overflow:visible;}
  .hero{padding-top:40px;}
  .about-grid, .admission-wrap, .contact-wrap{grid-template-columns:1fr;}
  .teacher-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:1fr;}
  .footer-wrap{grid-template-columns:1fr 1fr;}
  nav > ul{position:fixed; top:70px; left:0; right:0; width:100%; max-width:100%; box-sizing:border-box; background:var(--paper); flex-direction:column; padding:20px 24px 32px; gap:16px; border-bottom:1px solid var(--border); display:none; max-height:calc(100vh - 70px); overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:99;}
  nav > ul.open{display:flex;}
  .submenu{position:static; border:none; box-shadow:none; padding-left:16px; display:block;}
  .nav-toggle{display:flex;}
}
/* ２０２６-０৯-２৩ (ব্যবহারকারীর অনুরোধ -- সার্চ আইকনের উপর মেনু উপচে পড়ার স্থায়ী সমাধান):
   ৯৮０px-এর উপরের স্ক্রিনেও মেনু-আইটেম বেশি/লম্বা হয়ে গেলে .nav-wrap ওভারফ্লো করতে পারে --
   তখন base.html-এর JS (checkNavOverflow) সরাসরি scrollWidth মেপে header-এ এই ক্লাস বসায়,
   আর উপরের ৯৮０px-ব্রেকপয়েন্টের হ্যামবার্গার-মোডের ঠিক একই নিয়মগুলো (শুধু নেভ-সংক্রান্ত অংশটুকু)
   এখানে স্ক্রিন-সাইজ নির্বিশেষে প্রয়োগ হয় -- তাই ভবিষ্যতে মেনু যত/যেমনই বাড়ুক, ওভারল্যাপ সম্ভব না। */
header.nav-compact .nav-wrap{justify-content:space-between;}
header.nav-compact .nav-divider{display:none;}
header.nav-compact nav{overflow:visible;}
header.nav-compact nav > ul{position:fixed; top:70px; left:0; right:0; width:100%; max-width:100%; box-sizing:border-box; background:var(--paper); flex-direction:column; padding:20px 24px 32px; gap:16px; border-bottom:1px solid var(--border); display:none; max-height:calc(100vh - 70px); overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:99;}
header.nav-compact nav > ul.open{display:flex;}
header.nav-compact .submenu{position:static; border:none; box-shadow:none; padding-left:16px; display:block;}
header.nav-compact .nav-toggle{display:flex;}
@media(max-width:600px){
  .hero h1.bn-title{font-size:25px;}
  .stat-strip{grid-template-columns:1fr;}
  .teacher-grid{grid-template-columns:1fr 1fr;}
  .footer-wrap{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important; animation:none !important;}
  .reveal{opacity:1 !important; transform:none !important;}
}

.qa-item{background:#fff; border:1px solid var(--border,#e5e0d0); border-radius:var(--radius,10px); margin-bottom:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.03);}
.qa-q{list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:12px; font-weight:600; color:var(--green-deep); font-size:15.5px;}
.qa-q::-webkit-details-marker{display:none;}
.qa-q-icon{flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--green-pale); color:var(--green-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;}
.qa-cat{margin-inline-start:auto; flex-shrink:0; background:var(--gold-soft,#e9d9a8); color:var(--green-deep); font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;}
.qa-a{padding:2px 20px 20px 60px; color:var(--ink-soft,#444); line-height:1.9; font-size:14.5px;}
.qa-item[open] .qa-q{border-bottom:1px solid var(--border,#e5e0d0);}

.masail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px;}
.masail-card{display:flex; flex-direction:column; gap:10px; background:linear-gradient(145deg,#ffffff,#f6f8f4); border:2px solid #e5e0d0; border-top:4px solid var(--gold,#c9a227); border-radius:18px; padding:24px 22px; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(30,81,40,.08); transition:.25s;}
.masail-card:hover{transform:translateY(-5px); border-color:var(--gold,#c9a227); box-shadow:0 14px 30px rgba(30,81,40,.18); background:linear-gradient(145deg,#ffffff,#fdf6dd);}
.masail-card-top{display:flex; align-items:flex-start; gap:10px;}
.masail-card .qa-q-icon{margin-top:2px;}
.masail-card h3{font-size:16px; color:var(--green-deep); line-height:1.5; margin:0; font-family:'Noto Serif Bengali',serif;}
.masail-card p{font-size:13.5px; color:var(--ink-soft,#555); line-height:1.8; margin:0;}
.masail-card .qa-cat{margin-inline-start:0;}
.masail-more{align-self:flex-start; font-size:13px; font-weight:700; color:var(--green-deep);}

/* ২০২৬-১০-০৬: ইসলামিক জিজ্ঞাসা -- নতুন কার্ড/সার্চ/পেজিনেশন/ডিটেইল ডিজাইন */
.qa2-topbar{max-width:1180px; margin:20px auto 0; padding:0 24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.qa2-search{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.qa2-search input[type=search]{width:290px; max-width:100%; padding:5px 9px; border:1px solid #cfc8b0; border-radius:2px; font-size:13px; font-family:inherit; background:#fff; box-sizing:border-box;}
.qa2-search input[type=search]:focus{outline:none; border-color:var(--gold,#c9a227);}
.qa2-sbtn{padding:5px 12px; border:1px solid var(--green-deep,#14432A); border-radius:2px; background:var(--green-deep,#14432A); color:#fff; font-size:13px; font-family:inherit; cursor:pointer;}
.qa2-sbtn:hover{opacity:.9;}
.qa2-ask{padding:5px 12px; border:1px solid var(--green-deep,#14432A); border-radius:2px; font-size:13px; font-weight:600; color:var(--green-deep,#14432A); text-decoration:none; background:transparent;}
.qa2-ask:hover{background:var(--green-deep,#14432A); color:#fff;}
.qa2-clear{font-size:13px; color:#a94442;}
.qa2-summary{max-width:1180px; margin:0 auto 14px; padding:0 24px; font-size:13.5px; color:var(--ink-faint,#8b8168);}
.qa2-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px;}
.qa2-card{display:flex; flex-direction:column; background:#fff; border:1px solid #e5e0d0; border-top:4px solid var(--gold,#c9a227); border-radius:16px; padding:20px 20px 16px; text-decoration:none; color:inherit; box-shadow:0 4px 14px rgba(30,81,40,.07); transition:.2s; text-align:left; direction:ltr;}
.qa2-card:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(30,81,40,.16); border-color:var(--gold,#c9a227);}
.qa2-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.qa2-card .qa2-meta{margin-bottom:14px;}
.qa2-card .qa-cat{margin:0;}
.qa2-qg,.qa2-ag{display:flex; flex-direction:column; gap:6px;}
.qa2-ag{margin:18px 0 16px;}
.qa2-foot{margin-top:auto; padding-top:12px; border-top:1px dashed #e5e0d0; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.qa2-foot .masail-more{margin:0 0 0 auto;}
.qa2-vid{font-size:11.5px; color:#8a5a00; background:#fff3d6; border-radius:20px; padding:3px 10px; font-weight:600;}
.qa2-tag{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.2px; padding:2px 10px; border-radius:6px;}
.qa2-tag.q{background:var(--green-pale,#E6EEE7); color:var(--green-deep,#14432A);}
.qa2-tag.a{background:#f4efe0; color:#7a5c12;}
.qa2-abox>.qa2-tag.a{display:inline-block; margin-bottom:12px;}
.qa2-q{font-size:16.5px; line-height:1.65; color:var(--green-deep,#14432A); font-family:'Noto Serif Bengali',serif; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.qa2-a{font-size:14px; line-height:1.85; color:var(--ink-soft,#555); margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
@media(max-width:640px){ .qa2-topbar{justify-content:stretch;} .qa2-search{flex:1 1 100%; flex-wrap:nowrap;} .qa2-search input[type=search]{flex:1 1 auto; width:auto; min-width:0;} .qa2-ask{flex:1 1 100%; text-align:center;} }
/* ২০২৬-১০-০৭ (ব্যবহারকারীর মতামত): ডানে আলাদা কলাম -- সার্চ, তার নিচে প্রশ্ন-বাটন; বামে বিষয়-চিপ ও কার্ড-গ্রিড (প্রথম সারিতে ৩টি কার্ড, সার্চ তার ডানে) */
.qa2-wrap{max-width:none; margin:0; padding:0; display:flex; gap:28px; align-items:flex-start;}
.qa2-main{flex:1 1 auto; min-width:0;}
.qa2-main .qa2-chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.qa2-main .qa2-summary{max-width:none; margin:0 0 14px; padding:0;}
.qa2-side{flex:0 0 240px; display:flex; flex-direction:column; gap:8px; position:sticky; top:76px;}
.qa2-side .qa2-search{width:100%; flex-wrap:wrap; justify-content:flex-start;}
.qa2-side .qa2-search input[type=search]{flex:1 1 150px; width:auto; min-width:0;}
.qa2-side .qa2-ask{display:block; text-align:center;}
@media(max-width:900px){ .qa2-wrap{flex-direction:column; gap:16px; align-items:stretch;} .qa2-side{flex:0 0 auto; width:100%; position:static; order:-1;} }
/* ২০২৬-১০-০৭: বিষয়-তালিকা ডান কলামে, সার্চ ও প্রশ্ন-বাটনের নিচে (স্কয়ার, ছোট; মোবাইলে সারিবদ্ধ চিপ) */
.qa2-side{max-height:calc(100vh - 92px); overflow-y:auto;}
.qa2-cats{display:flex; flex-direction:column; margin-top:6px; border:1px solid #e0d9c3; background:#fff;}
.qa2-cats-h{padding:6px 10px; font-size:12px; font-weight:700; color:#7a5c12; background:#f4efe0; border-bottom:1px solid #e0d9c3;}
.qa2-cat{padding:6px 10px; font-size:13px; color:var(--ink-soft,#555); text-decoration:none; border-bottom:1px solid #f0ead8;}
.qa2-cat:last-child{border-bottom:none;}
.qa2-cat:hover{background:#faf6e8; color:var(--green-deep,#14432A);}
.qa2-cat.active{background:var(--green-deep,#14432A); color:#fff; font-weight:600;}
@media(max-width:900px){ .qa2-side{max-height:none; overflow:visible;} .qa2-cats{flex-direction:row; flex-wrap:wrap; gap:6px; border:none; background:none; margin-top:2px;} .qa2-cats-h{display:none;} .qa2-cat{border:1px solid #e0d9c3; background:#fff; border-bottom:1px solid #e0d9c3;} .qa2-cat.active{border-color:var(--green-deep,#14432A);} }
.qa2-pager{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:34px 0 8px;}
.qa2-pager a,.qa2-pager span{min-width:38px; padding:8px 12px; text-align:center; border:1.5px solid var(--border,#e5e0d0); border-radius:10px; font-size:14px; background:#fff; color:var(--green-deep,#14432A); text-decoration:none;}
.qa2-pager a:hover{border-color:var(--gold,#c9a227);}
.qa2-pager .cur{background:var(--green-deep,#14432A); color:#fff; border-color:var(--green-deep,#14432A); font-weight:700;}
.qa2-pager .gap{border:none; background:none;}
.qa2-qbox{background:var(--green-pale,#E6EEE7); border:1px solid #d3e0d5; border-radius:14px; padding:22px 26px; margin-bottom:16px; text-align:left;}
.qa2-title{font-size:23px; line-height:1.7; color:var(--green-deep,#14432A); font-family:'Noto Serif Bengali',serif; margin:10px 0 0; text-align:left;}
.qa2-asker{font-size:13px; color:#6b7a6e; margin:10px 0 0;}
.qa2-abox{background:#fff; border:1px solid #e5e0d0; border-radius:14px; padding:26px 28px 24px; box-shadow:0 6px 20px rgba(0,0,0,.05);}
.qa2-par{margin:0 0 14px;}
.qa2-par.ltr{direction:ltr; text-align:left; font-size:16px; line-height:2; color:#3d3d3d;}
.qa2-par.rtl{direction:rtl; text-align:right; font-family:'Amiri','Noto Naskh Arabic',serif; font-size:23px; line-height:2.3; color:var(--green-deep,#14432A);}
@media(max-width:600px){ .qa2-qbox{padding:18px 18px;} .qa2-abox{padding:20px 18px;} .qa2-title{font-size:20px;} .qa2-par.rtl{font-size:21px;} }

.qa-video-embed{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; margin:18px 0; background:#000;}
.qa-video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.qa-reference{margin-top:18px; padding:16px 18px; background:var(--paper-deep,#f4efe0); border-inline-start:4px solid var(--gold,#c9a227); border-radius:8px; font-size:13.5px; color:var(--ink-soft,#555); line-height:1.9;}
.qa-reference strong{color:var(--green-deep); display:block; margin-bottom:6px;}

.chat-box{background:#fff; border:1px solid var(--border,#e5e0d0); border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.05);}
.chat-messages{max-height:360px; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--paper-deep,#f4efe0);}
.chat-empty{color:var(--ink-faint,#8b8168); font-size:13.5px; text-align:center; margin:24px 0;}
.chat-bubble{max-width:78%; padding:9px 14px; border-radius:14px; font-size:14px; line-height:1.6; word-break:break-word;}
.chat-bubble .chat-text{display:block; white-space:pre-line;}
.chat-bubble.me{align-self:flex-end; background:var(--green-deep); color:#fff; border-bottom-right-radius:3px;}
.chat-bubble.them{align-self:flex-start; background:#fff; color:var(--ink,#2b2418); border:1px solid var(--border,#e5e0d0); border-bottom-left-radius:3px;}
.chat-bubble .chat-time{display:block; font-size:10.5px; opacity:.65; margin-top:4px; text-align:right;}
.chat-input-row{display:flex; flex-direction:column; gap:8px; padding:14px; border-top:1px solid var(--border,#e5e0d0); background:#fff;}
.chat-input-row input[type=text]{padding:11px 14px; border:1px solid var(--border,#e5e0d0); border-radius:8px; font-family:inherit; font-size:14px; width:100%;}
.chat-input-row > div{display:flex; gap:8px;}
.chat-input-row > div input{flex:1;}
.chat-input-row button{white-space:nowrap;}

/* --- ভেন্ডর-মোড থিমিং: মেনু স্টাইল ভ্যারিয়েন্ট (2026-09-09) --- */
.menu-style-pill nav a{ padding:6px 14px; border-radius:999px; transition:.15s; }
.menu-style-pill nav a:hover, .menu-style-pill nav a.active{ background:var(--green-pale); color:var(--green-deep); }
.menu-style-underline nav > ul > li > a{ position:relative; padding-bottom:4px; }
.menu-style-underline nav > ul > li > a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .18s ease; }
.menu-style-underline nav > ul > li > a:hover::after, .menu-style-underline nav > ul > li > a.active::after{ transform:scaleX(1); }

/* --- ভেন্ডর-মোড থিমিং: সাইট পপআপ (2026-09-09) --- */
.site-popup-overlay{ position:fixed; inset:0; background:rgba(20,16,8,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.site-popup-overlay.is-open{ opacity:1; pointer-events:auto; }
.site-popup-box{ position:relative; background:var(--card); border-radius:10px; max-width:420px; width:100%; padding:28px 24px 24px; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; transform:translateY(14px); transition:transform .25s ease; }
.site-popup-overlay.is-open .site-popup-box{ transform:translateY(0); }
.site-popup-close{ position:absolute; top:8px; right:10px; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--ink-faint); }
.site-popup-image{ width:100%; border-radius:6px; margin-bottom:14px; }
.site-popup-box h3{ margin-bottom:10px; }
.site-popup-body{ color:var(--ink-soft); font-size:14.5px; margin-bottom:16px; }
.site-popup-btn{ display:inline-block; background:var(--green-deep); color:#fff !important; padding:10px 22px; border-radius:6px; font-weight:600; font-size:14px; }

/* ================= ডায়নামিক ডিজাইন — কার্ড স্টাইল ও বাটন স্টাইল =================
   ２０২৬-０９-０９ (ব্যবহারকারীর অনুরোধ — "পুরো সাইট ডায়নামিক চাচ্ছি, কোড লেখা ছাড়া প্রত্যেক
   গ্রাহকের চাহিদা মেটাতে পারি"): SiteSettings.card_style/button_style অনুযায়ী <body> ট্যাগে
   বসা ক্লাস দিয়ে নিয়ন্ত্রিত। যেসব এলিমেন্ট ইতিমধ্যে var(--border)/var(--radius) ব্যবহার
   করে "কার্ড"-এর মতো দেখায় (dept-card, hero-panel, stat-box, req-box, blog-card,
   gallery-card, video-card) সেগুলোকেই এই টগল প্রভাবিত করে — teacher-card/notice-item
   ইচ্ছাকৃতভাবে ভিন্ন ডিজাইনের বলে বাদ। */
body.card-style-flat .dept-card, body.card-style-flat .hero-panel, body.card-style-flat .stat-box,
body.card-style-flat .req-box, body.card-style-flat .blog-card, body.card-style-flat .gallery-card,
body.card-style-flat .video-card { border-color:transparent !important; box-shadow:none !important; }
body.card-style-flat .dept-card:hover, body.card-style-flat .blog-card:hover,
body.card-style-flat .gallery-card:hover { box-shadow:none !important; }

body.card-style-shadow .dept-card, body.card-style-shadow .hero-panel, body.card-style-shadow .stat-box,
body.card-style-shadow .req-box, body.card-style-shadow .blog-card, body.card-style-shadow .gallery-card,
body.card-style-shadow .video-card { border-color:transparent !important; box-shadow:var(--shadow); }

body.card-style-both .dept-card, body.card-style-both .hero-panel, body.card-style-both .stat-box,
body.card-style-both .req-box, body.card-style-both .blog-card, body.card-style-both .gallery-card,
body.card-style-both .video-card { box-shadow:var(--shadow); }
/* card-style-bordered (ডিফল্ট) — উপরের স্ট্যাটিক border:1px solid var(--border) নিয়মই যথেষ্ট, ওভাররাইডের দরকার নেই */

body.button-style-outline .btn-primary{ background:transparent; color:var(--green-deep); border-color:var(--green-deep); }
body.button-style-outline .btn-primary:hover{ background:var(--green-deep); color:#fff; }
body.button-style-pill .btn{ border-radius:999px !important; }

/* ２０２৬-０৯-２৪ (ব্যবহারকারীর অনুরোধ — সব পেজে ভাসমান WhatsApp কুইক-কন্টাক্ট বাটন) */
.wa-float-btn{
  position:fixed; right:20px; bottom:20px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.wa-float-btn:hover{ transform:scale(1.08); }
@media (max-width:600px){
  .wa-float-btn{ right:14px; bottom:14px; width:50px; height:50px; }
}