body { 
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
}

/* ==== Slider Image ==== */
.slider-img {
  width: 100%;          /* সেকশনের পুরো প্রস্থ */
  height: auto;         /* অনুপাত বজায় থাকবে */
  max-height: unset;    /* 520px লিমিট তুলে দেওয়া হলো */
  object-fit: contain;  /* ক্রপ হবে না, পুরো ইমেজ দেখা যাবে */
  display: block;
  margin: 0 auto;
}

.teacher-photo { 
  width: 160px; 
  height: 160px; 
  object-fit: cover; 
}
.navbar-brand { letter-spacing: .2px; }

:root{
  --brand-1:#0d6efd;
  --brand-2:#6610f2;
  --card-radius: 1.25rem;
}
/* Animated underline for navbar items */
.navbar .nav-link{
  padding: .5rem .75rem;
  font-weight: 600;
  opacity: .9;
}
.navbar .nav-link:hover{ opacity: 1; }
.navbar .nav-link.active{ color: #fff; }
.nav-underline{
  position:absolute;left:10%;right:10%;bottom:6px;height:2px;background:rgba(255,255,255,.0);
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease, background .25s ease;
}
.navbar .nav-link:hover .nav-underline,
.navbar .nav-link.active .nav-underline{ transform:scaleX(1); background:rgba(255,255,255,.9); }

/* Section title with accent rule */
.section-title{
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; font-weight:800;
}
.section-title span{ position:relative; z-index:1; padding:.25rem .5rem; }
.section-title::after{
  content:""; flex:1; height:4px; border-radius:3px;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
  opacity:.3;
}

/* Section Menu Grid */
.section-menu{}
.section-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; min-height:110px; border-radius: var(--card-radius);
  text-decoration:none; color:#fff; font-weight:700;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.section-card i{ font-size:1.75rem; }
.section-card span{ font-size:1.05rem; letter-spacing:.2px; }
.section-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120px 80px at 20% -10%, rgba(255,255,255,.35), transparent 60%);
  transition: opacity .25s ease, transform .25s ease;
}
.section-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.section-card:hover::after{ transform: translateY(-4px); }

.gradient-1{ background: linear-gradient(135deg, #4e54c8, #8f94fb); }
.gradient-2{ background: linear-gradient(135deg, #11998e, #38ef7d); }
.gradient-3{ background: linear-gradient(135deg, #ff512f, #dd2476); }
.gradient-4{ background: linear-gradient(135deg, #00c6ff, #0072ff); }

/* Better card/list polish */
.card .card-header{ font-weight:800; letter-spacing:.2px; }
.list-group-item a{ text-decoration:none; font-weight:600; }
.list-group-item a:hover{ text-decoration:underline; }

/* Tweak teacher cards */
.teacher-card{ border:none; box-shadow:0 6px 18px rgba(0,0,0,.08); border-radius: var(--card-radius); }
.teacher-photo{ width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }

/* ======= School Banner ======= */
.bg-school{ background:#0b5ed7; } /* deep blue strip */

.school-banner{
  background: linear-gradient(180deg,#e8f0ff,#f7fbff);
  border-bottom: 1px solid rgba(13,110,253,.15);
}
.school-logo{
  width: 96px; height: 96px; object-fit: cover; border-radius: 50%;
  background:#fff; padding:6px; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
@media (min-width: 768px){
  .school-logo{ width: 120px; height: 120px; }
}
.school-title{
  font-size: clamp(26px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: .3px;
}
.school-sub{
  margin-top: .25rem;
  font-size: clamp(12px, 1.6vw, 18px);
  color:#333;
}
.school-codes{
  font-weight: 700; font-size: 14px;
}
.school-codes div{ line-height: 1.35; }

/* Navbar item separators like tabs */
.navbar.bg-school .navbar-nav .nav-link{
  position:relative; padding:.7rem 1rem;
}
.navbar.bg-school .navbar-nav .nav-item + .nav-item .nav-link::before{
  content:""; position:absolute; left:0; top:30%; bottom:30%;
  width:1px; background:rgba(255,255,255,.35);
}

/* === Header from uploaded sample look === */
.site-main{}
.logo-area img.school-logo{ width:72px;height:72px;border-radius:50%;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.08); }
@media(min-width:768px){ .logo-area img.school-logo{ width:96px;height:96px; } }
.school-title{ font-size:clamp(22px,4.2vw,44px); font-weight:800; letter-spacing:.2px; }
.school-sub{ font-size:clamp(12px,1.6vw,16px); color:#333; }

.navbar.bg-school{ background:#0b5ed7; border-radius:.4rem; }
.navbar.bg-school .navbar-nav .nav-link{
  color:#fff; padding:.8rem 1rem; position:relative; font-weight:600;
}
.navbar.bg-school .navbar-nav .nav-item + .nav-item .nav-link::before{
  content:""; position:absolute; left:0; top:28%; bottom:28%; width:1px; background:rgba(255,255,255,.35);
}
.navbar.bg-school .navbar-nav .nav-link:hover{ background:rgba(255,255,255,.08); }


/* 1) Carousel/parent-এ কোনো ফিক্সড হাইট যেন না থাকে */
.carousel,
.carousel-inner,
.carousel-item {
  height: auto !important;
}

/* 2) স্লাইডার কন্টেইনার – ইচ্ছেমতো */
.slider-frame{
  width: 100%;
  background: #f5f7fb;          /* লেটারবক্সের রঙ */
}

/* 3) ইমেজ: পুরোটা দেখাবে, কিন্তু অতিরিক্ত লম্বা হবে না */
.slider-frame .carousel-item{
  display: flex;                 /* ইমেজ সেন্টার রাখতে */
  justify-content: center;
  align-items: center;
  min-height: 240px;             /* ছোট স্ক্রিনে মিনিমাম উচ্চতা */
}

.slider-frame img.slider-img{
  width: 100%;
  height: auto;                  /* অনুপাত ঠিক থাকে */
  max-height: 62vh;              /* স্ক্রিনের ~62% এর বেশি লম্বা হবে না */
  object-fit: contain;           /* ক্রপ হবে না, পুরোটা দেখাবে */
  display: block;
  margin: 0 auto;
  background: #f5f7fb;           /* ইমেজ ছোট হলে চারপাশে একই রঙ দেখা যাবে */
}

/* আরও responsive টিউন */
@media (max-width: 576px){
  .slider-frame img.slider-img{ max-height: 55vh; }
}

.carousel-item {
  height: 480px;              /* আপনার পছন্দমতো ফিক্সড উচ্চতা */
}

.carousel-item img {
  height: 100%;               /* div এর height অনুযায়ী ইমেজ adjust */
  width: 100%;
  object-fit: cover;          /* ফাঁকা না রেখে ভরবে, ক্রপ হতে পারে */
}

/* ===== HERO / CAROUSEL FIX ===== */
.hero { 
  background:#f5f7fb;
  border-bottom:1px solid #e9eef6;
}

/* Bootstrap এর ডিফল্ট/fixed height যেন না লাগে */
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item { height:auto; }

/* সব স্লাইড একই ফ্রেমে থাকবে – ভিউপোর্ট অনুযায়ী */
.hero .carousel-item{
  min-height:260px;
  height:clamp(260px, 60vh, 520px);  /* ছোটে 260px, বড়ে সর্বোচ্চ ~520px */
  display:flex; align-items:center; justify-content:center;
  background:#f5f7fb;               /* লেটারবক্স রঙ */
  overflow:hidden;
}

/* ইমেজ: পুরোটা দেখাবে, ক্রপ হবে না */
.hero .carousel-item img{
  width:100%;
  height:100%;
  object-fit:contain;               /* contain = কাটা না পড়ে ফিট */
  display:block;
  margin:0 auto;
}

/* যদি আগে কোথাও ছিল: .slider-img { max-height:520px; object-fit:cover; } -> এটাকে নিষ্ক্রিয় করুন */

.navbar-toggler{
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
}

.notice-marquee{
  font-weight:600;
  font-size:15px;
  border-top:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1);
}
.notice-marquee marquee{
  white-space:nowrap;
}

.notice-marquee{
  font-weight:600;
  font-size:15px;
  border-top:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1);
  color:#fff;                     /* সব টেক্সট সাদা */
}
.notice-marquee a{
  color:#fff;                     /* লিঙ্কও সাদা হবে */
  text-decoration:none;
}
.notice-marquee a:hover{
  text-decoration:underline;
}


.section-title span{
  font-size: 20px;
  font-weight: 700;
}

.card p{
  font-size: 15px;
  color: #333;
}

.important-links .list-group-item{
  background-color:#c82333; /* লাল */
  color:#fff;
  font-weight:600;
  border:none;
  margin-bottom:8px;
  border-radius:4px;
  transition:background .3s ease;
}
.important-links .list-group-item:hover{
  background-color:#a71d2a; /* hover লাল */
  color:#fff;
}
.important-links i{
  font-size:14px;
}