@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700&display=swap');

:root{
    --primary-color:#2c5aa0;
    --secondary-color:#1a4480;
    --accent-color:#dc3545;
    --gold-color:#ffc107;
    --light-gray:#f8f9fa;
    --light-navy:#cbd5e1;
    --dark-navy:#123b66;
    --deep-blue:#0d2a49;
    --blue:#3a7bd5;
    --nav-offset: 72px;
    --ink:#0f172a;
    --muted:#64748b;
    --ring:#dbe6ff;
    --card:#ffffff;
    --line:#e6ecf6;
    --surface:#f8fafc;
}

/* === Bootstrap Solid Buttons === */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-danger {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #b52a36 !important;
  border-color: #b52a36 !important;
}

.btn-warning {
  background-color: var(--gold-color) !important;
  border-color: var(--gold-color) !important;
  color: #000 !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
}

.btn-light {
  background-color: var(--light-gray) !important;
  border-color: var(--light-gray) !important;
  color: #000 !important;
}
.btn-light:hover,
.btn-light:focus {
  background-color: var(--light-navy) !important;
  border-color: var(--light-navy) !important;
}


/* === Bootstrap Outline Buttons === */
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

.btn-outline-warning {
  color: var(--gold-color) !important;
  border-color: var(--gold-color) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--gold-color) !important;
  color: #000 !important;
}

.btn-outline-light {
  color: #000 !important;
  border-color: var(--light-gray) !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--light-gray) !important;
  color: #000 !important;
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden !important;}
body{font-family: 'Roboto Condensed', sans-serif; line-height:1.6;}

iframe, video {
  autoplay: false;
}

/* Fix for missing images - use fallbacks */
.avatar-ring img,
.teacher-photo img,
.info-logoImg {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
/* Fix for Facebook plugin */
.fb-page {
  min-height: 200px;
}

/* Add loading states for images */
img {
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}
/* Top Bar (desktop only – hidden by d-none d-lg-block) */
.top-bar{
    position: relative;
    z-index: 1030;
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    padding:8px 0; color:#fff; font-size:.9rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.quick-links-top{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end;}
.quick-links-top a{color:#fff; text-decoration:none; padding:5px 12px; border-radius:5px; border:1px solid rgba(255,255,255,.3); transition:.2s;}
.quick-links-top a:hover{background:var(--gold-color); transform: scale(1.2); color:var(--primary-color); box-shadow:0 3px 10px rgba(255,193,7,.3)}
.contact-info{display:flex; align-items:center; gap:12px;}

/* Logo header (desktop) */
.logo-header{background:#fff; padding:5px 0; border-bottom:1px solid #eef0f4; box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.university-logo{display:flex; align-items:center; gap:15px;}
.university-logo img{height:84px; width:auto; object-fit:contain; display:block;}
.brand-text h3{font-family: "Mozilla Headline", sans-serif;color:var(--primary-color); font-weight:700; font-size:22px; margin:0; line-height:1.3;}
.brand-text h4{font-weight:600; font-size:13px; margin:0; color:#666; line-height:1.2;}

/* Desktop menu (sticky) */
.menu-section{position: sticky; top: 0; left: 0; right: 0; z-index: 1020; background:#fff; border-bottom:1px solid #eef0f4; transition: box-shadow .25s ease;}
.menu-section.stuck{ box-shadow:0 8px 28px rgba(0,0,0,.14); }
.navbar-nav{ width:100%; }
.nav-link{ color:var(--primary-color)!important; font-weight:700; border-radius:5px; padding:.6rem .8rem!important; margin:0 .2rem; transition:.15s; text-transform: uppercase;}
.nav-link:hover{ background:var(--primary-color); color:#fff!important; transform:translateY(-1px); }
.dropdown-menu{ border-radius:12px; border:1px solid #eef0f4; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.dropdown-item{ font-weight:600;text-transform: uppercase; }
.dropdown-item:hover{ background:var(--primary-color); color:#fff }
@media (min-width:992px){ .navbar .dropdown:hover .dropdown-menu{display:block; margin-top:.1rem} }

/* ---------- MOBILE HEADER (only on <992px) ---------- */
.mobile-header{
    position: sticky; top: 0; z-index: 1050;
    background:#fff; border-bottom:1px solid #eef0f4; box-shadow:0 2px 10px rgba(0,0,0,.1);
    height:56px; padding:0 15px;
}
.mobile-header-inner{
    display:grid; grid-template-columns:48px 1fr 48px; align-items:center; height:100%;
}
.mobile-menu-btn, .mobile-spacer{height:48px; display:flex; align-items:center; justify-content:center;}
.mobile-spacer{opacity:.0; pointer-events:none;}
.offcanvas.offcanvas-start{
    z-index: 10030;
}
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.transition-rotate {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .transition-rotate {
    transform: rotate(180deg);
}

.list-group-item-action {
    border-bottom: 1px solid rgba(58, 123, 213, 0.1) !important;
}
.list-group-item-action:hover {
    background-color: rgba(58, 123, 213, 0.1);
}

.offcanvas-body::-webkit-scrollbar {
    width: 5px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.list-group-item-action{
    text-decoration: none;
}
.icon-btn{background:transparent; border:0; padding:8px; line-height:1; color:var(--primary-color); cursor:pointer;}

/* centered brand */
.du-brand{justify-self:center; display:flex; align-items:center; gap:8px; text-decoration:none; max-width:calc(100vw - 120px); overflow:hidden;}
.du-logo{height:32px; width:auto; object-fit:contain; flex-shrink:0;}
.du-title{display:flex; flex-direction:column; line-height:1.1; overflow:hidden;}
.du-title .bn{font-size:13px; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.du-title .en{font-size:10px; font-weight:600; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ultra-small phones */
@media (max-width:360px){
    .du-logo{height:28px;}
    .du-title .bn{font-size:11.5px;}
    .du-title .en{font-size:9px;}
}

@media (max-width: 991.98px){
    :root{ --nav-offset: 56px; }
}

[id]{ scroll-margin-top: var(--nav-offset); }

/* Hero Slider Styles */
    .hero-slider-container {
      min-height: auto;
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 20px;
    }
    
    .hero-wrap {
      position: relative;
      height: 40vh;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    
    .hero-slider {
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .hero-slider .slide {
      height: 100%; 
      position: relative; 
      display: none;
      background: var(--dark-navy);
    }
    
    .hero-slider .slide.active {
      display: block;
      animation: slideIn 0.8s ease;
    }
    
    .slide-img {
      position: absolute; 
      inset: 0; 
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
      filter: brightness(0.85);
    }
    
    .slider-nav { 
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.25);
      color: #fff;
      z-index: 3; 
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center; 
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    
    .slider-nav:hover {
      background: var(--gold-color);
      color: var(--primary-color);
      transform: translateY(-50%) scale(1.1);
    }
    
    .slider-nav.prev { 
      left: 20px; 
    } 
    
    .slider-nav.next { 
      right: 20px; 
    }
    
    .slider-controls {
      position: absolute;
      bottom: 20px; 
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
      padding: 8px 14px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 20px; 
      backdrop-filter: blur(5px);
    }
    
    .slider-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      cursor: pointer; 
      transition: all 0.3s ease;
    }
    
    .slider-dot.active { 
      background: var(--gold-color);
      transform: scale(1.3);
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); 
    }
    
    .slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
      z-index: 1;
    }
    
    @keyframes slideIn {
      from { opacity: 0.8; transform: scale(1.02); }
      to { opacity: 1; transform: scale(1); }
    }
    
    /* Notice Board Styles */
    .notice-board-container {
      background: var(--card);
      border-radius: 12px;
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      overflow: hidden;
      height: 50vh;
      display: flex;
      flex-direction: column;
    }
    
    .notice-header {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: white;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }
    
    .notice-header h2 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .controls {
      display: flex;
      gap: 8px;
    }
    
    .control-btn {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .control-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }
    
    .notice-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    
    .notice-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      transition: transform 0.8s ease;
    }
    
    .notice-item {
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      transition: all 0.3s ease;
      position: relative;
    }
    
    .notice-item:last-child {
      border-bottom: none;
    }
    
    .notice-item:hover {
      background: var(--surface);
    }
    
    .notice-title {
      margin: 0 0 8px 0;
      color: var(--ink);
      font-size: 1.1rem;
      font-weight: 600;
    }
    
    .notice-text {
      margin: 0 0 12px 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 0.95rem;
    }
    
    .notice-date {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      background: var(--surface);
      padding: 5px 12px;
      border-radius: 20px;
    }
    
    .priority-high {
      border-left: 4px solid var(--accent-color);
    }
    
    .priority-medium {
      border-left: 4px solid var(--gold-color);
    }
    
    .status-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
      color: var(--muted);
      font-size: 0.9rem;
    }
    
    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--primary-color);
      animation: pulse 1.5s infinite;
    }
    
    .notice-actions {
      margin-top: 12px;
      display: flex;
      justify-content: space-between; 
      align-items: center;           
    }
    
    .details-btn {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      text-decoration: none;
    }
    
    .details-btn:hover {
      background: var(--secondary-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
      .notice-board-container {
        margin-top: 10px;
      }
    }

    @media (min-width: 768px) {
      .hero-wrap {
        height: 50vh;
      }
      
      .notice-board-container {
        height: 50vh;
      }
    }
    
    @media (min-width: 992px) {
      .hero-wrap {
        height: 70vh;
      }
      
      .notice-board-container {
        height: 70vh;
      }
      
      .slider-nav {
        width: 50px;
        height: 50px;
      }
      
      .slider-nav.prev { 
        left: 25px; 
      } 
      
      .slider-nav.next { 
        right: 25px; 
      }
      
      .slider-controls {
        bottom: 25px;
      }
    }
    
    /* Scrollbar styling */
    .notice-content::-webkit-scrollbar {
      width: 6px;
    }
    
    .notice-content::-webkit-scrollbar-thumb {
      background: var(--light-navy);
      border-radius: 3px;
    }
    
    .notice-content::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }






.section-title{font-size:2.4rem; font-weight:800; color:var(--primary-color); text-align:center; margin-bottom:50px; position:relative}
.section-title::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px; width:80px; height:4px; background:var(--gold-color); border-radius:2px}


.btn-primary-custom{ background:var(--gold-color); color:var(--primary-color); border:0; padding:12px 26px; border-radius:25px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.btn-primary-custom:hover{ background:#fff; color:var(--primary-color); box-shadow:0 8px 20px rgba(255,193,7,.3) }

.footer{background: var(--secondary-color); color:#fff; padding:60px 0 28px}
.footer-section h5{color:var(--gold-color); margin-bottom:18px}
.footer-section a{color:rgba(255,255,255,.85); text-decoration:none}
.footer-section a:hover{color:var(--gold-color); text-decoration:underline}

@keyframes slideIn{from{opacity:0; transform:translateX(60px)} to{opacity:1; transform:none}}

/* social/app icons (desktop) */
.header-icons { display: flex; align-items: center; gap: 20px; } 
.social-icons { display: flex; gap: 10px; align-items: center; } 
.social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-color); color: #fff; border-radius: 50%; text-decoration: none; transition: .3s; } 
.social-icons a:hover { background: var(--gold-color); color: var(--primary-color); transform: translateY(-2px); } 
.app-download { display: flex; gap: 10px; align-items: center; } 
.app-download a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #fff; text-decoration: none; border-radius: 8px; font-size: 12px; font-weight: 600; transition: .3s; } 
/* .app-download a:hover { background: var(--primary-color); transform: translateY(-1px); }  */
.app-download a i { font-size: 18px; }

/* ===== Latest News Ticker ===== */
.ticker-wrap{
  background:var(--primary-color);    
  color:#fff;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.ticker-inner{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px; min-height:38px;
}
.ticker-label{
  font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  background:rgba(255,255,255,.15); padding:4px 10px; border-radius:999px;
  white-space:nowrap; flex:0 0 auto;font-size: 14px;
}
.ticker-viewport{
  position:relative; overflow:hidden; flex:1 1 auto;
}
.ticker-track{
  display:flex; gap:28px; white-space:nowrap; will-change:transform;
  animation: ticker-scroll var(--ticker-speed, 10s) linear infinite;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600;
}
.ticker-item i{ opacity:.9 }
.ticker-item a{ color:#fff; text-decoration:none;    font-size: 14px; }
.ticker-item a:hover{ text-decoration:underline }

.ticker-wrap:hover .ticker-track{ animation-play-state:paused } 

@keyframes ticker-scroll{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

@media (max-width:575.98px){
  .ticker-inner{ padding:6px 10px }
}


::-webkit-scrollbar{width:8px} 
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--primary-color); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}

.card.shadow-sm:hover { transform: translateY(-2px); transition: .2s ease; }
#vcSlider .splide__slide > .card { height: 100%; }

#teachersSlider .splide__slide > .col-lg-6 { width: 100%; }   /* slide-এর ভেতরের আপনার col wrapper */
#teachersSlider .splide__slide article.teacher-card { height: 100%; }

.splide__arrow{
  background:#fff; border:1px solid #e6ecf6; box-shadow:0 6px 18px rgba(15,23,42,.08)
}
.splide__pagination__page.is-active{ background:#2c5aa0; transform:scale(1.12) }
.teachers-pro .teacher-card{
  display:flex; gap:1rem; padding:1rem; background:#fff;
  border:1px solid #eef2f7; border-radius:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.teachers-pro .teacher-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(15,23,42,.10);
  border-color:#e2e8f0;
}
.teachers-pro .teacher-photo{
  flex:0 0 92px; height:92px; border-radius:999px; overflow:hidden;
  background:#f8fafc; border:1px solid #eef2f7;
  display:flex; align-items:center; justify-content:center;
}
.teachers-pro .teacher-photo img{
  width:100%; height:100%; object-fit:cover;
}
.teachers-pro .teacher-body{ flex:1 1 auto; }

@media (min-width: 992px){
  .teachers-pro .teacher-photo{ flex-basis:104px; height:104px; }
}

/* ===== Professional History Section ===== */
.history-pro{
  background: #ffffff;
}

.eyebrow{
  display:inline-block;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
  color: var(--accent);
  margin-bottom:.25rem;
}

/* .section-title{
  font-weight:800;
  color: var(--ink);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem);
  margin-bottom:.5rem;
} */

.history-body p{ color: var(--muted); margin-bottom: .9rem; text-align: justify; text-wrap: pretty; }
.dropcap:first-letter{
  float:left; font-size:3rem; line-height:.9; font-weight:800;
  margin:.15rem .45rem 0 0; color: var(--accent);
}

/* Image card */
.history-figure{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border:1px solid #e9eef5;
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}
.history-img{
  display: block;
  width: 100%;
  object-fit: contain !important;     
  object-position: center center;
}
.history-figure:hover .history-img{ transform: scale(1.05); }
.history-figure::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 100% 0, rgba(31,94,221,.12), transparent 60%);
  pointer-events:none;
}
@media (max-width:575.98px){ .history-figure .history-img{ max-height:200px; } }
@media (min-width:576px) and (max-width:991.98px){ .history-figure .history-img{ max-height:300px; } }
@media (min-width:992px){ .history-figure .history-img{ max-height:350px; } }
.figure-badge{
  position:absolute; left:16px; bottom:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding:.35rem .75rem;
  font-weight:700; color: var(--ink);
  backdrop-filter: blur(6px);
}

/* Buttons & mini stats */
.btn-primary{ background: var(--accent); border-color: var(--accent); }
.btn-primary:hover{ filter: brightness(.95); }
.mini-stats .caption{ display:block; font-size:.78rem; color:#6b7280; letter-spacing:.04em; text-transform:uppercase; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .figure-badge{ left:12px; bottom:12px; }
}


/* .facts-strip {
    background: var(--light-navy);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.facts-strip .fact-icon {
    width: 54px; 
    height: 54px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 8px; 
    color: #fff; 
    font-size: 22px; 
    flex: 0 0 54px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.facts-strip .fact-title {
    font-weight: 800; 
    letter-spacing: .4px; 
    color: #0f172a; 
    font-size: .9rem;
    margin-bottom: 4px;
}

.facts-strip .fact-value {
    font-weight: 700; 
    color: #0f172a; 
    opacity: .9;
    font-size: 1.2rem;
}

.facts-strip a:hover {
    opacity: 0.85;
}
@media (max-width: 575.98px) {
    .facts-strip .fact-title { 
        font-size: .8rem; 
    }
    
    .facts-strip .fact-value {
        font-size: 1rem;
    }
    
    .fact-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
    }
} */

/* Section background + overlay (DU style) */
.du-facts{
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.du-facts__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(1px);
}

/* Single fact */
.du-fact{ }
.du-fact__icon{
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.06);
}
.du-fact__icon i{
  font-size: 36px;
  color: var(--gold-color); 
}

.du-fact__number{
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
}
.du-plus{ margin-left: 4px; font-weight: 800; }

.du-fact__label{
  margin-top: 6px;
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 600;
  opacity: .95;
}

/* Spacing helper */
.py-lg-6{ padding-top:4rem; padding-bottom:4rem; }
@media (min-width:992px){
  .py-lg-6{ padding-top:5rem; padding-bottom:5rem; }
}

.bg-fixed {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
/* ribbon (simple, no gradient) */
.edu-ribbon-solid{
  position: relative;
  display: block;          
  text-align: center;      
  padding-left: 0;         
}
.edu-ribbon-solid span{
  display:inline-block;
  background:#10269e;
  color:#fff;
  font-weight:800;
  padding:10px 16px;
  border-radius:8px 8px 0 0;
}
.edu-ribbon-solid::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%); 
  bottom:-6px;
  height:2px;
  width:200px;              
  background:var(--primary-color);
}


.edu-box{
  background:#fff; border:2px solid var(--primary-color); border-radius:6px;
  padding:24px 16px; min-height:160px; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.edu-box:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(16,38,158,.12);
  border-color:var(--primary-color); background:#f8fbff;
}


.ico{
  width:60px; height:60px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
}
.ico-green  { background:#16a34a; }   
.ico-blue   { background:#2f74b5; }   
.ico-purple { background:#7c3aed; }   
.ico-orange { background:#f97316; }   

/* label */
.label{
  margin:0; font-weight:800; color:var(--primary-color); letter-spacing:.2px;
}

@media (max-width:575.98px){
  .edu-box{ min-height:140px; }
  .ico{ width:54px; height:54px; font-size:24px; }
}

/* Image-style cards like the screenshot */
.info-fb-event{
  background-color: var(--light-navy);
}
.info-cardPro{
  background:#f9fbff;                  /* white box like image */
  border:1px solid #f9fbff;         /* thin blue-ish border */
  border-radius:8px;
  padding:14px;
  display:flex; align-items:flex-start; gap:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.info-cardPro:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  border-color:#cbd6ea;
}

/* Left logo */
.info-logoImg{
  width:64px; height:64px; object-fit:contain; flex-shrink:0;
}

/* Title link (blue, bold) */
.info-title{ font-weight:800; color:var(--primary-color); font-size:1.05rem; }

/* List with blue dot bullets and links */
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{
  position:relative; padding-left:18px; margin:.35rem 0;
  line-height:1.35;
}
.info-list li::before{
  content:""; position:absolute; left:0; top:.5rem;
  width:8px; height:8px; border-radius:50%; background:var(--primary-color);
}
.info-list a{
  color:#293041; font-weight:600; text-decoration:none; font-size: 12px;
}
.info-list a:hover{
  color:var(--primary-color); text-decoration:underline;
}

/* Small screen tweaks */
@media (max-width:575.98px){
  .info-cardPro{ padding:12px; gap:12px }
  .info-logoImg{ width:56px; height:56px; padding:5px }
}


/* right boxes + ribbon header */
.box{
  background:#fff; border:1px solid #e6ecf6; border-radius:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.06); overflow:hidden;
}
.ribbon .ribbon-head{
  background:var(--primary-color); color:#fff; font-weight:800;
  padding:.6rem .9rem; 
}

/* countdown tiles */
.count-tile{
  background:#eef2ff; border:2px solid var(--primary-color);
  color:var(--primary-color); border-radius:10px; padding:.6rem .2rem;
}
.count-tile > div{
  font-weight:900; font-size:1.25rem; line-height:1; margin-bottom:.1rem;
}
.count-tile small{ font-weight:700; opacity:.85 }

/* footer */
.site-footer{
  background:var(--deep-blue);
  margin-top: 20px;
}
.contact-pill{
  position: relative;
  background:var(--dark-navy); 
  color:#e7eff9;
  border-radius:22px;
  padding:18px 22px;
  margin-top:-38px;              
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  top: -50px;
}
.pill-cell{
  position:relative;
}
.pill-cell + .pill-cell::before{  /* dividers */
  content:"";
  position:absolute; left:0; top:12%; bottom:12%;
  width:1px; background:rgba(255,255,255,.25);
}
.pill-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pill-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  color: var(--gold-color);
  font-size: 20px;
  margin-bottom: 8px;
}

.pill-title{ color:#fff; font-weight:800; margin:4px 0 6px; font-family: 'Roboto Condensed', sans-serif;}
.pill-text, .pill-link{ color:#e7eff9;font-family: 'Roboto Condensed', sans-serif; }
.pill-link{ text-decoration:none; }
.pill-link:hover{ text-decoration:underline; color:#fff; }

/* Link lists */
.footer-link{ margin-top: -10px; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:.35rem 0; }
.footer-links a{
  color:#c6d4e6; text-decoration:none; font-weight:600;
}
.footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-links i{ font-size:.75rem; margin-right:.4rem; opacity:.8; }

/* Contact block */
.footer-contact a{ color:#c6d4e6; text-decoration:none; }
.footer-contact a:hover{ color:#fff; text-decoration:underline; }
.footer-contact p{ color:#c6d4e6; }

/* Bottom bar */
.footer-bottom{ background:#c1c1c1; color: #000; }
.footer-bottom a{ color:var(--gold-color); text-decoration:none; }
.footer-bottom a:hover{ text-decoration:underline; }

/* Back-to-top FAB */
/* Back-to-top FAB */
.back-top{
  position:fixed; right:18px; bottom:18px; z-index:2000;
  width:44px; height:44px; border:0; border-radius:10px;
  background:var(--primary-color); /* root color */
  color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; 
  opacity:0; visibility:hidden;
  transform:translateY(20px);
  transition:all .3s ease;
}
.back-top.show{
  opacity:1; visibility:visible; transform:translateY(0);
}
.back-top:hover{ transform: translateY(-3px); }


/* Responsive */
@media (max-width: 991.98px){
  .contact-pill{ margin-top:-24px; border-radius:16px; }
  .pill-cell + .pill-cell::before{ display:none; } /* hide dividers on small */
}

/* events start */
.ev-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: all 0.3s ease;
}
.ev-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,.15);
}

/* Thumbnail */
.ev-thumb {
  position: relative;
  overflow: hidden;
}
.ev-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ev-card:hover .ev-thumb img {
  transform: scale(1.05);
}

/* Date badge */
.ev-date-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--primary-color);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
}
.ev-date-badge .day {
  font-size: 1.3rem;
  font-weight: 900;
  display: block;
  line-height: 1.2;
}
.ev-date-badge .mon {
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* Card body */
.ev-body {
  padding: 16px;
}
.ev-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  transition: color .3s;
}
.ev-card:hover .ev-title {
  color: var(--primary-color);
}
.ev-excerpt {
  color: #475569;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
/* events end */
/* video start */
/* Splide container & slides height fix */
#videosSplide .splide__slide { height: auto; }

/* Pagination color */
#videosSplide .splide__pagination { position: static; margin-top: .5rem; }
#videosSplide .splide__pagination__page { background: rgba(44,90,160,.35); }
#videosSplide .splide__pagination__page.is-active { background: var(--primary-color); transform: scale(1.1); }

/* Same card styles you already use */
.latest-videos .video-card{
  background:#fff; border:1px solid #e6ecf6; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 18px rgba(15,23,42,.06); cursor:pointer; transition:.25s; height:100%;
}
.latest-videos .video-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(15,23,42,.12); }
.thumb-wrap{ position:relative; overflow:hidden; }
.thumb-wrap img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .35s; }
.video-card:hover .thumb-wrap img{ transform:scale(1.04); }
.play-btn{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  border:none; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; transition:background .2s, transform .2s;
}
.play-btn:hover{ background:rgba(0,0,0,.75); transform:scale(1.05); }
.video-title{ color:#0f172a; font-weight:700; padding:10px 12px 12px; line-height:1.3; }
@media (max-width:575.98px){ .thumb-wrap img{ height:180px; } }
/* video end */
/* student start */


/* Background */
.bg-surface{
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(44,90,160,.06), transparent 40%),
    radial-gradient(900px 320px at 100% 100%, rgba(26,68,128,.06), transparent 40%),
    var(--surface);
}

/* Header */
.dir-title{ font-weight: 800; color: var(--ink); }
.dir-subtitle{ color: var(--muted); }

/* Segmented Tabs */
.dir-tabs .seg-wrap{
  padding:.5rem; border-radius:16px; background:var(--card);
  border:1px solid var(--line); box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.seg-nav{ display:flex; gap:.5rem; flex-wrap:wrap }
.seg-nav .nav-link{
  position:relative; display:flex; align-items:center; gap:.35rem;
  padding:.6rem 1rem; border-radius:12px; border:1px solid transparent;
  background:transparent; color:#334155; font-weight:800; letter-spacing:.1px;
  transition: all .18s ease;
}
.seg-nav .nav-link:hover{ background:#f5f8ff; color:var(--primary-color) !important }
.seg-nav .nav-link.active{
  background:#fff; color:var(--ink); border-color:#e8eef9;
  box-shadow: inset 0 0 0 2px var(--ring), 0 10px 20px rgba(44,90,160,.12);
}
.seg-nav .nav-link.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-8px; height:3px; border-radius:3px; background:var(--primary-color);
}
.count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  font-size:.75rem; border-radius:999px; background:#eef4ff; color:#1d4ed8; padding:0 .4rem; font-weight:700;
}

/* Content Card Frame */
.tab-content{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 24px rgba(15,23,42,.05); padding:1.25rem;
}

/* Person Card */
.person-card{
  background:var(--card); border:1px solid #edf1f9; border-radius:16px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, outline .2s ease;
  outline: 0 solid transparent;
}
.person-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(44,90,160,.16);
  border-color:#e3ebff;
  outline: 3px solid #eef5ff;
}

/* Avatar with subtle animated ring */
.person-top{ padding:20px 20px 0; display:flex; justify-content:center }
.avatar-ring{
  --size:160px;
  width:var(--size); height:var(--size); border-radius:50%; display:inline-grid; place-items:center;
  background:
    radial-gradient(60% 60% at 50% 50%, #ffffff 0 60%, transparent 60%),
    conic-gradient(from 200deg, rgba(44,90,160,.15), rgba(26,68,128,.25), rgba(44,90,160,.15));
  padding:8px;
  box-shadow: inset 0 0 0 6px #f3f6ff, 0 6px 16px rgba(44,90,160,.12);
}
.avatar-ring img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
}

/* Body */
.person-body{ text-align:center; padding:12px 18px 18px }
.person-name{ color:#0a2a82; font-weight:800; margin-bottom:.25rem }
.person-role{ color:var(--muted); margin-bottom:.65rem }
.role-badge{ background:#f1f5ff; color:#1d4ed8; border:1px solid #dbe6ff }

/* Socials */
.person-social a{
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d8e0ef; color:var(--brand); text-decoration:none; margin:0 4px; transition:.15s ease;
}
.person-social a:hover{ background:var(--brand); color:#fff; box-shadow:0 6px 14px rgba(44,90,160,.25) }

/* Pagination */
.dir-pagination .pagination {
  gap: .4rem; /* spacing between buttons */
}

.dir-pagination .pagination .page-link {
  color: var(--brand);
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: .45rem .9rem;
  transition: all 0.25s ease;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.dir-pagination .pagination .page-link:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.dir-pagination .pagination .page-item.active .page-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dir-pagination .pagination .page-item.disabled .page-link {
  color: #9ca3af;
  pointer-events: none;
  background: #f3f4f6;
  border-color: #f3f4f6;
  box-shadow: none;
}


/* Responsive niceties */
@media (max-width: 575.98px){
  .seg-nav{ justify-content:center }
}
/* student end */

/* School info start */
  /* Surface (tokens use) */
.ai-surface{
  background:
    radial-gradient(900px 320px at 0% 0%, color-mix(in oklab, var(--primary-color) 10%, transparent), transparent 40%),
    radial-gradient(900px 320px at 100% 100%, color-mix(in oklab, var(--secondary-color) 12%, transparent), transparent 40%),
    var(--surface);
}

/* Dashboard header */
.dashboard-header h1{
  font-weight:800; color:var(--ink); letter-spacing:.2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dashboard-header p{ color:var(--muted); margin:.25rem 0 0 }

/* Featured center column emphasis */
.ai-col-center .ai-card{ transform: translateY(0) scale(1.01) }
@media (min-width: 992px){
  .ai-col-left, .ai-col-right{ margin-top:.25rem }
  .ai-col-center{ margin-top:0 }
}

/* Card base */
.ai-card{
  position:relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 96%, white 4%), var(--card));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.ai-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--ring) 70%, var(--line));
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}

/* Gradient border for center "featured" card */
.ai-card--featured{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--primary-color), var(--secondary-color)) border-box;
  border:1px solid transparent;
}
.ai-head--featured{
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--ring) 40%, #fff), transparent);
}

/* Head */
.ai-head{ padding:16px 18px 10px }
.ai-title{ color: var(--primary-color); font-weight:800; letter-spacing:.2px; margin:0; font-size:1.25rem }
.ai-title .fa-solid{ color: var(--secondary-color) }
.ai-sub{ color: var(--muted); margin:.25rem 0 0 }

/* Divider */
.ai-split{ height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent) }

/* KPI strip inside center */
.ai-kpis{
  display:grid; grid-template-columns: repeat(4,1fr); gap:10px;
  padding:12px 14px 0;
}
.ai-kpi{
  background: color-mix(in oklab, var(--ring) 45%, white);
  border:1px solid var(--ring);
  border-radius:12px; padding:10px; text-align:center;
}
.ai-kpi-num{ display:block; font-weight:900; color:var(--deep-blue); font-size:1.05rem }
.ai-kpi-label{ color:var(--muted); font-weight:700; font-size:.8rem }

/* Lists */
.ai-list{ list-style:none; margin:0; padding:12px 14px 16px }

/* People list */
.ai-people .ai-item{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, white), var(--card));
  border:1px solid color-mix(in oklab, var(--line) 85%, white);
  border-radius:12px; padding:10px 12px; margin-top:10px;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ai-people .ai-item:hover{
  background: var(--card);
  border-color: color-mix(in oklab, var(--ring) 60%, var(--line));
  box-shadow:0 8px 20px rgba(44,90,160,.12);
}
.ai-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 60%, white) inset }
.ai-avatar img{ width:100%; height:100%; object-fit:cover }
.ai-name{ color: color-mix(in oklab, var(--deep-blue) 85%, var(--ink)); font-weight:800 }
.ai-muted{ color: var(--muted) }
.ai-chip{
  margin-left:auto; font-size:.75rem; font-weight:800;
  background: color-mix(in oklab, var(--ring) 55%, white);
  color: color-mix(in oklab, var(--blue) 80%, var(--ink));
  border:1px solid var(--ring); padding:.2rem .55rem; border-radius:999px;
}

/* Key–Value */
.ai-kv .ai-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 2px; border-bottom:1px dashed color-mix(in oklab, var(--line) 85%, white);
}
.ai-kv .ai-item:last-child{ border-bottom:0 }
.ai-key{ color: color-mix(in oklab, var(--deep-blue) 75%, var(--ink)); font-weight:700 }
.ai-val{ color: color-mix(in oklab, var(--primary-color) 70%, var(--ink)); font-weight:800 }

/* Progress row */
.ai-progress .ai-bar{
  width:100%; height:8px; border-radius:999px;
  background: color-mix(in oklab, var(--ring) 45%, white);
  overflow:hidden; margin-top:8px;
}
.ai-progress .ai-bar span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--blue), color-mix(in oklab, var(--secondary-color) 80%, var(--blue)));
  border-radius:999px; box-shadow:0 6px 18px color-mix(in oklab, var(--secondary-color) 50%, black);
}

/* Schedule */
.ai-schedule .ai-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 2px; border-bottom:1px dashed color-mix(in oklab, var(--line) 85%, white);
}
.ai-schedule .ai-item:last-child{ border-bottom:0 }
.ai-day{ font-weight:800; color: color-mix(in oklab, var(--dark-navy) 80%, var(--ink)) }
.ai-time{
  font-weight:700; color: color-mix(in oklab, var(--deep-blue) 70%, var(--ink));
  background: color-mix(in oklab, var(--ring) 50%, white);
  border:1px solid var(--ring); padding:.25rem .6rem; border-radius:8px;
}
.ai-time.ai-off{
  background: color-mix(in oklab, var(--gold-color) 25%, white);
  color: color-mix(in oklab, var(--accent-color) 65%, var(--ink));
  border-color: color-mix(in oklab, var(--gold-color) 60%, var(--accent-color));
}

/* Responsive tweak */
@media (max-width: 575.98px){
  .ai-title{ font-size:1.12rem }
  .ai-kpis{ grid-template-columns: repeat(2,1fr) }
}

/* School info end */

/* gallery */
.gallery-section{ background:#f7f9fc; }
.g-img{
  width:100%; height:240px; object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(2,6,23,.08);
}
@media (min-width:992px){ .g-img{ height:260px; } }