:root {
      --light-bg: linear-gradient(135deg, #e3f2fd, #ffffff);
      --dark-bg: linear-gradient(135deg, #121212, #1f1f1f);
      --light-text: #212529;
      --dark-text: #e0e0e0;
    }

    body {
      background: var(--light-bg);
      color: var(--light-text);
      font-family: "Noto Sans Bengali", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;;
      transition: background 0.5s, color 0.5s;
      overflow-x: hidden;
    }
    body.dark-mode { background: var(--dark-bg); color: var(--dark-text); }





    .header-section::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.4); }
    .header-section h1, .header-section p { position:relative; z-index:1; }

    .login-card { transition:.4s; border-radius:20px; border:none; background:linear-gradient(to bottom right,#fff,#f8f9fa); }
    body.dark-mode .login-card { background:linear-gradient(to bottom right,#2c2c2c,#3a3a3a); }
    .login-card:hover { transform:translateY(-8px); box-shadow:0 12px 20px rgba(0,0,0,.15); }

    .login-icon { font-size:3rem; margin-bottom:10px; color:#0d6efd; animation:float 3s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    .floating-icons i { font-size:4rem; color:rgba(0,123,255,.2); position:absolute; animation:float 6s ease-in-out infinite alternate; }
    .icon-1{top:100px;left:10%} .icon-2{top:150px;right:12%} .icon-3{bottom:100px;left:20%} .icon-4{bottom:150px;right:15%}

    .toggle-buttons { position:absolute; right:20px; top:15px; z-index:1000; }
    .toggle-buttons button { margin-left:10px; }

    footer { background:#f8f9fa; font-size:15px; box-shadow:0 -1px 5px rgba(0,0,0,.05); }
    body.dark-mode footer { background:#121212; }
    footer i.bi { vertical-align:middle; font-size:1.1rem; }

    @media (max-width:576px){
      .login-card{padding:2rem 1rem;margin-bottom:1rem}
      .navbar-brand h4{font-size:1rem}
      .login-icon{font-size:2.2rem}
      footer small{font-size:.85rem}
    }


 

 /* ===== TICKER (shared) ===== */
  .panel { margin: 14px 0; }
  .panel-title {
    margin: 0 0 8px;
    font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    display:flex; align-items:center; gap:.5rem;
  }
  :root { --notice-accent:#0d6efd; }

  
  .ticker{
    --duration:30s; 
    --distance:100%;
    border-radius:12px; 
    background:#fff; 
    overflow:hidden; 
    position:relative;
    border:1px solid rgba(13,110,253,.12); 
    box-shadow:0 8px 24px rgba(13,110,253,.06);
  }
  .ticker:hover .track{ animation-play-state:paused; }
  .ticker:before,.ticker:after{ content:""; position:absolute; z-index:2; pointer-events:none; }

  /* masks */
  .ticker--vertical:before,.ticker--vertical:after{
    left:0; right:0; height:24px;
    background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .ticker--vertical:before{ top:0; }
  .ticker--vertical:after{ bottom:0; transform:rotate(180deg); }

  .ticker--ltr:before,.ticker--ltr:after{
    top:0; bottom:0; width:28px;
    background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .ticker--ltr:before{ left:0; }
  .ticker--ltr:after{ right:0; transform:rotate(180deg); }

  /* ===== Notice (vertical, bottom->top) ===== */
  .notice-head{
    display:flex; align-items:center; gap:.6rem; padding:10px 14px;
    background:linear-gradient(180deg, rgba(13,110,253,.05), rgba(13,110,253,0));
    border-bottom:1px solid rgba(13,110,253,.12); font-weight:600;
  }
  .ticker--vertical{ height:300px; }
  .ticker--vertical .track{
    display:inline-block; will-change:transform; animation:scroll-up var(--duration) linear infinite;
    padding:6px 6px 10px;
  }
  @keyframes scroll-up{ 0%{transform:translateY(0)} 100%{transform:translateY(calc(-1 * var(--distance)))} }

  .notice-item{
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#f8fbff,#ffffff);
    border:1px solid rgba(13,110,253,.12); border-left:4px solid var(--notice-accent);
    border-radius:10px; padding:8px 12px; margin:6px 8px;
    box-shadow:0 4px 10px rgba(13,110,253,.05);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .notice-item:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(13,110,253,.10); }
  .notice-icon{
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    color:#fff; background:var(--notice-accent); border-radius:8px; box-shadow:0 2px 6px rgba(13,110,253,.35);
    flex:0 0 auto;
  }
  .notice-title{ font-size:14px; font-weight:600; color:#0b2239; }
  .notice-meta{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:#395b82; }
  .tag{ font-size:11px; padding:2px 8px; border-radius:999px; color:#0b2239; background:#e9f2ff; border:1px solid rgba(13,110,253,.25); }
  .tag.new{ color:#fff; background:#dc3545; border-color:#dc3545; position:relative; }
  .tag.new:after{ content:""; position:absolute; top:50%; right:-6px; width:6px; height:6px; background:#dc3545; border-radius:50%;
                  transform:translateY(-50%); box-shadow:0 0 0 0 rgba(220,53,69,.7); animation:pulse 1.6s infinite; }
  @keyframes pulse{ to{ box-shadow:0 0 0 8px rgba(220,53,69,0); } }

  /* Dark mode tweaks (optional) */
  body.dark-mode .ticker{ background:#1c1c1c; border-color:rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.4); }
  body.dark-mode .notice-item{ background:linear-gradient(135deg,#1f2733,#1a1a1a); border-color:rgba(255,255,255,.08); }
  body.dark-mode .notice-title{ color:#e8f1ff; }
  body.dark-mode .notice-meta{ color:#bcd0ff; }
  body.dark-mode .tag{ color:#dbe9ff; background:#0b2447; border-color:#123; }

  /* ===== Important News (Left -> Right) ===== */
  .ticker--ltr{ height:48px; display:flex; align-items:center; }
  .ticker--ltr .track{ display:inline-block; white-space:nowrap; will-change:transform; animation:scroll-ltr var(--duration) linear infinite; padding:8px; }
  .ticker--ltr .item{
    display:inline-block; padding:6px 14px; font:600 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    color:#fff; background:rgba(0,0,0,.25); border-radius:999px; text-shadow:0 1px 2px rgba(0,0,0,.35); box-shadow:0 2px 6px rgba(0,0,0,.2);
    margin:0 6px;
  }
  .ticker--ltr .sep{ color:rgba(255,255,255,.95); margin:0 6px; }

  /* Colorful container bar */
  .ticker--colorful{
    background:linear-gradient(90deg,#0d6efd,#20c997,#ffc107,#d63384,#6610f2);
    background-size:400% 100%; animation:barflow 16s linear infinite; border:0;
  }
  @keyframes barflow{ 0%{background-position:0% 50%} 100%{background-position:400% 50%} }
  /* @keyframes scroll-ltr{ 0%{transform:translateX(0)} 100%{transform:translateX(var(--distance))} } */
@keyframes scroll-ltr{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--distance))); }
}

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    .track{ animation:none !important; }
    .ticker--colorful{ animation:none !important; }
  }


/* Navbar উপরে রাখুন */
.navbar { position: sticky; top: 0; z-index: 2000; }
.navbar .navbar-collapse { z-index: 2001; }

/* Header overlay/floating icons যাতে মেনুর উপর না আসে */
.header-section::after { z-index: 0; }
.floating-icons { z-index: 0; pointer-events: none; }




/* ডিফল্ট: সব স্ক্রিনে hover/focus স্টাইল */
.navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link {
  transition: color .15s ease, background-color .15s ease;
  border-radius: .5rem;
}
.navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link:focus {
  background: rgba(255,255,255,0.9);  /* সাদা ব্যাকগ্রাউন্ড */
  color: #0d6efd;                     /* প্রাইমারি টেক্সট */
}

/* Active লিঙ্ক আলাদা রাখলে ভালো লাগে */
.navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
}


/* মোবাইলে টগলারকে জায়গা দিন: toggle-buttons একটু বামে, টগলার একদম ডানে */
@media (max-width: 991.98px) {
  .toggle-buttons {
    position: absolute;
    right: 80px;   /* <- টগলারের জন্য স্পেস */
    top: 12px;
    z-index: 1000; /* collapse-এর চেয়ে কম */
    
  }
 
  .navbar-toggler {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 2002; /* সবকিছুর ওপরে যেন থাকে */
  }
  /* collapse খুললে ব্যাকগ্রাউন্ড দিন যাতে স্পষ্ট দেখা যায় */
  .navbar .navbar-collapse {
     background: linear-gradient(90deg, var(--coral-deep) 0%, var(--amber-deep) 100%) !important;
    color: var(--ink-on-dark) !important;
    /* background: rgba(13,110,253,.95); */
    backdrop-filter: blur(3px);
    padding: .75rem 1rem;
    border-radius: 0 0 12px 12px;
   
  }
  .navbar .nav-link { color: #fff; }

    h4{
    display:none;
  }

 .navbar .navbar-collapse {
    background: rgba(13,110,253,.95);  /* আপনার আগের সেটিংের সাথে মানানসই */
  }
  .navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link {
    margin: .2rem 0; padding: .5rem .75rem;
  }
  .navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link:hover,
  .navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link:focus {
    background: #ffffff;  /* একদম সাদা, বেশি কনট্রাস্ট */
    color: #0d6efd;
  }
  .navbar.navbar-dark .navbar-collapse .navbar-nav .nav-link.active {
    background: #0b5ed7; /* একটু ডার্কার ব্লু */
    color: #fff;
  }

}


/* Ensure text is visible on the colorful bar */
.ticker--ltr a { text-decoration: none; }
.ticker--ltr .item { color: #fff !important; display: inline-block; }
.ticker--ltr .sep  { color: rgba(255,255,255,.95) !important; }

/* Small screens: keep items readable */
@media (max-width: 576px){
  .ticker--ltr .item { font-size: 13px; padding: 6px 10px; }
}


/* টগলার আইকন দৃশ্যমান রাখতে (ঐচ্ছিক) */
.navbar-toggler { border-color: rgba(255,255,255,.55); }
.navbar-dark .navbar-toggler-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }


/* Carousel Styles */
  /* Responsive height for carousel images */
  .carousel-inner img{ object-position: center 30%;  }

  .carousel-inner img {
    height: 450px;
    object-fit: cover;
  }
  @media (max-width: 576px) {
    .carousel-inner img {
      height: 250px;
    }
  }



/* Stylish caption design */
.carousel-caption {
  background: rgba(0, 0, 0, 0.45); /* semi-transparent bg */
  padding: 15px 25px;
  border-radius: 15px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-block;
  animation: fadeInUp 1s ease both;
}

.carousel-caption h5 {
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 8px;
}

.carousel-caption p {
  font-size: 1rem;
  font-weight: 400;
  color: #f1f1f1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* Small devices (mobile) */
/* @media (max-width: 576px) {
   .carousel-inner img {
    height: 250px !important;
  }
  
  .carousel-caption {
    padding: 10px 15px;
    border-radius: 10px;
  }
  .carousel-caption h5 {
    font-size: 1.2rem;
  }
  .carousel-caption p {
    font-size: 0.85rem;
  }
}
 */



/* Hover করলে dropdown খোলা */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* position fix */
}

/* Dropdown-এর ব্যাকগ্রাউন্ড */
.dropdown-menu {
  background: linear-gradient(135deg, #f8f9fa, #e3f2fd); /* হালকা নীল-সাদা */
  border: 1px solid #0d6efd;
  border-radius: 8px;
}

/* Hover করলে সাবমেনু আইটেম কালার */
.dropdown-item:hover {
  background-color: #0d6efd;
  color: #fff;
  border-radius: 5px;
}

/* === GPT Override: Fix unreadable white text (president/secretary v2 + h5.mb-1) === */
#presidentMessage2,
#secretaryMessage2,
#presidentMessage2 *,
#secretaryMessage2 *{
  color: #0f172a !important;      /* deep slate for light backgrounds */
  text-shadow: none !important;
}

/* Make headings readable by default */
#presidentMessage2 h5,
#presidentMessage2 h5.mb-1,
#secretaryMessage2 h5,
#secretaryMessage2 h5.mb-1,
h5.mb-1{
  color: #0f172a !important;
  text-shadow: none !important;
}

/* If these sections are placed on a dark background, add .on-dark on a parent */
.on-dark #presidentMessage2,
.on-dark #secretaryMessage2,
.on-dark #presidentMessage2 *,
.on-dark #secretaryMessage2 *,
.on-dark #presidentMessage2 h5,
.on-dark #presidentMessage2 h5.mb-1,
.on-dark #secretaryMessage2 h5,
.on-dark #secretaryMessage2 h5.mb-1{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}

/* === PATCH: President & Secretary message text fix === */
#presidentMessage,
#secretaryMessage,
#presidentMessage *,
#secretaryMessage *{
  color: #0f172a !important;      /* deep slate for light backgrounds */
  text-shadow: none !important;   /* remove glow */
}

/* Links inside these blocks: readable on light backgrounds */
#presidentMessage a, #presidentMessage a:visited,
#secretaryMessage a, #secretaryMessage a:visited{
  color: var(--purple-2, #1D4ED8) !important;   /* fallback blue if purple var missing */
  text-decoration-color: currentColor !important;
}
#presidentMessage a:hover,
#secretaryMessage a:hover{ opacity: .9; }

/* If you place these on a dark background, add .on-dark to a parent */
.on-dark #presidentMessage,
.on-dark #secretaryMessage,
.on-dark #presidentMessage *,
.on-dark #secretaryMessage *{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}


/* === PATCH: Body dark Coral/Pink + Bright Amber gradient === */
:root{
  --coral-deep:#C92A54;  /* dark vibrant coral/pink */
  --amber-deep:#D88B00;  /* dark bright amber */
  --ink-on-dark:#F8FAFC; /* near-white body text */
}

html, body { min-height: 100%; }

body{
  /* fallback solid for very old browsers */
  background: #7A0F2D !important;

  /* turn off any images and apply high-contrast gradient */
  background-image: none !important;
  background: linear-gradient(
    135deg,
    #7A0F2D 0%,
    var(--coral-deep) 28%,
    #FF5A7A 52%,
    var(--amber-deep) 100%
  ) !important;

  color: var(--ink-on-dark) !important;
}

/* keep links readable on dark bg */
a, a:visited { color: #ddae07 !important; }
a:hover { opacity: .9; }

/* Navbar-specific dropdown override to ensure dark theme matches */
.navbar .dropdown-menu{ background: rgba(18,10,8,.92) !important; border-color: rgba(255,255,255,.12) !important; }