* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'SolaimanLipi','Kalpurush','Noto Sans Bengali',Arial,sans-serif; background:#f1f8e9; color:#1b5e20; line-height:1.6; }
.container { max-width:1280px; margin:0 auto; padding:0 15px; }
a { color:#2e7d32; text-decoration:none; }
a:hover { color:#1b5e20; }

.topbar { background:#1b5e20; color:#fff; font-size:13px; padding:6px 0; }
.topbar-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.header { background:linear-gradient(135deg,#2e7d32,#43a047); color:#fff; padding:15px 0; border-bottom:4px solid #ffd600; }
.header-inner { display:flex; align-items:center; gap:15px; }
.logo-box { display:flex; align-items:center; gap:12px; }
.logo-circle { width:70px; height:70px; border-radius:50%; background:#fff; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:12px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.2); flex-shrink:0; }
.logo-text h1 { font-size:22px; line-height:1.2; }
.logo-text p { font-size:13px; opacity:.95; }
.logo-text small { font-size:11px; opacity:.85; }

.main-nav { background:#1b5e20; position:sticky; top:0; z-index:100; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.main-nav .container { display:flex; align-items:center; }
.nav-list { list-style:none; display:flex; flex-wrap:nowrap; flex:1; }
.nav-list > li { position:relative; flex-shrink:0; }
.nav-list a { color:#fff; padding:12px 14px; display:block; font-weight:500; transition:.2s; font-size:14px; white-space:nowrap; }
.nav-list a:hover { background:#43a047; }
.has-sub:hover .submenu { display:block; }
.submenu { display:none; position:absolute; background:#2e7d32; min-width:200px; box-shadow:0 4px 10px rgba(0,0,0,.2); z-index:101; }
.submenu a { padding:10px 15px; border-bottom:1px solid rgba(255,255,255,.1); font-size:13px; }
.menu-toggle { display:none; background:#43a047; color:#fff; border:none; padding:10px 15px; cursor:pointer; font-size:16px; }

.ticker { background:#fff3e0; border-bottom:2px solid #ffd600; padding:10px 0; }
.ticker-inner { display:flex; align-items:center; gap:15px; }
.ticker-label { background:#c62828; color:#fff; padding:5px 12px; border-radius:3px; font-weight:bold; white-space:nowrap; }
.ticker-wrap { overflow:hidden; flex:1; }
.ticker-content { display:inline-block; white-space:nowrap; animation:scroll 30s linear infinite; }
.ticker-content a { margin-right:30px; color:#c62828; font-weight:500; }
@keyframes scroll { 0%{transform:translateX(100%);} 100%{transform:translateX(-100%);} }

.hero { background:linear-gradient(rgba(46,125,50,.85),rgba(27,94,32,.9)); color:#fff; padding:40px 0; text-align:center; }
.hero h2 { font-size:28px; margin-bottom:8px; }
.hero p { font-size:16px; opacity:.95; }

.main-grid { display:grid; grid-template-columns:240px 1fr 260px; gap:18px; padding:20px 15px; }
.sidebar-left, .sidebar-right { display:flex; flex-direction:column; gap:15px; }

.box { background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08); overflow:hidden; margin-bottom:18px; border:1px solid #c8e6c9; }
.box-title { background:linear-gradient(90deg,#2e7d32,#43a047); color:#fff; padding:10px 15px; font-size:16px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; }
.box-title .view-all { color:#ffd600; font-size:13px; font-weight:normal; }
.box-body { padding:15px; }

.widget { background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08); overflow:hidden; border:1px solid #c8e6c9; }
.widget-title { background:#2e7d32; color:#fff; padding:9px 12px; font-weight:bold; font-size:14px; }
.widget-body { padding:10px 12px; }
.links-list a { display:block; padding:6px 4px; border-bottom:1px dashed #c8e6c9; color:#1b5e20; font-size:13px; }
.links-list a:hover { background:#e8f5e9; padding-left:8px; }

.principal-msg { display:flex; gap:15px; flex-wrap:wrap; }
.principal-photo { text-align:center; min-width:140px; }
.avatar { width:90px; height:90px; border-radius:50%; background:linear-gradient(135deg,#2e7d32,#66bb6a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:bold; margin:0 auto 8px; }
.principal-text { flex:1; min-width:240px; }

.notice-tabs { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.tab-btn { background:#e8f5e9; border:1px solid #a5d6a7; padding:5px 12px; border-radius:20px; cursor:pointer; font-size:12px; transition:.2s; }
.tab-btn:hover, .tab-btn.active { background:var(--tc, #2e7d32); color:#fff; }
.notice-list { list-style:none; }
.notice-item { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed #c8e6c9; flex-wrap:wrap; }
.notice-date { background:#1b5e20; color:#fff; padding:3px 8px; border-radius:3px; font-size:11px; min-width:80px; text-align:center; }
.notice-cat { color:#fff; padding:2px 7px; border-radius:3px; font-size:10px; }
.notice-item a { flex:1; color:#1b5e20; font-weight:500; font-size:14px; }
.notice-item a:hover { color:#c62828; }
.pin { color:#c62828; }

.mini-notice { list-style:none; }
.mini-notice li { padding:6px 0; border-bottom:1px dashed #c8e6c9; }
.mini-notice a { display:block; color:#1b5e20; font-size:13px; }
.mini-notice small { color:#666; font-size:11px; }

/* Teacher/Employee Cards - Clean Design */
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.teacher-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

.card { 
  background:#fff; 
  border:1px solid #c8e6c9; 
  border-radius:10px; 
  padding:20px 15px; 
  text-align:center; 
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:4px;
  background:linear-gradient(90deg,#2e7d32,#66bb6a);
}

.card:hover { 
  transform:translateY(-5px); 
  box-shadow:0 8px 20px rgba(46,125,50,.15);
  border-color:#2e7d32;
}

.card .avatar { 
  width:80px; 
  height:80px; 
  font-size:30px;
  margin-bottom:12px;
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.teacher-photo {
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:12px;
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.card h4 { 
  font-size:16px; 
  color:#1b5e20; 
  margin:0 0 6px;
  line-height:1.3;
}
.card .designation { 
  display:block;
  color:#2e7d32; 
  font-weight:bold; 
  font-size:13px;
  margin-bottom:4px;
}
.card .dept { 
  display:block;
  color:#555; 
  font-size:12px;
  margin-bottom:3px;
}
.card .qual { 
  display:block;
  color:#666; 
  font-size:11px;
  margin-bottom:3px;
}
.card .bio {
  font-size:12px;
  color:#555;
  margin-top:8px;
  line-height:1.5;
  text-align:left;
  padding:8px;
  background:#f1f8e9;
  border-radius:6px;
  border-left:3px solid #2e7d32;
}

/* Employee Card - Blue Theme */
.employee-card::before {
  background:linear-gradient(90deg,#1565c0,#42a5f5);
}
.employee-card:hover {
  border-color:#1565c0;
  box-shadow:0 8px 20px rgba(21,101,192,.15);
}
.employee-card .avatar {
  background:linear-gradient(135deg,#1565c0,#42a5f5);
}
.employee-card .designation {
  color:#1565c0;
}
.employee-card .bio {
  border-left-color:#1565c0;
  background:#e3f2fd;
}

/* Contact Buttons */
.teacher-contact {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #c8e6c9;
}

.contact-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:6px;
  text-decoration:none !important;
  transition:all .2s ease;
  font-size:12px;
  font-weight:500;
  color:#fff !important;
}

.contact-btn span:first-child { font-size:14px; }
.contact-btn span:last-child { word-break:break-all; }

.contact-btn.phone {
  background:linear-gradient(135deg,#2e7d32,#43a047);
}
.contact-btn.phone:hover {
  background:linear-gradient(135deg,#1b5e20,#2e7d32);
  transform:scale(1.03);
}

.contact-btn.email {
  background:linear-gradient(135deg,#1565c0,#1976d2);
}
.contact-btn.email:hover {
  background:linear-gradient(135deg,#0d47a1,#1565c0);
  transform:scale(1.03);
}

.employee-card .contact-btn.phone {
  background:linear-gradient(135deg,#1565c0,#1976d2);
}
.employee-card .contact-btn.phone:hover {
  background:linear-gradient(135deg,#0d47a1,#1565c0);
}

.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:#2e7d32; color:#fff; padding:8px; text-align:left; font-size:13px; }
.data-table td { padding:8px; border-bottom:1px solid #e0e0e0; font-size:13px; }
.data-table tr:hover { background:#f1f8e9; }

.btn { display:inline-block; background:#2e7d32; color:#fff !important; padding:7px 15px; border-radius:4px; border:none; cursor:pointer; font-weight:500; transition:.2s; text-align:center; font-size:13px; }
.btn:hover { background:#1b5e20; }
.btn-danger { background:#c62828; }
.btn-sm { padding:4px 10px; font-size:12px; }

.footer { background:#1b5e20; color:#fff; padding:25px 0 0; margin-top:25px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.footer h4 { color:#ffd600; margin-bottom:8px; border-bottom:2px solid #ffd600; padding-bottom:4px; font-size:15px; }
.footer ul { list-style:none; }
.footer a { color:#c8e6c9; display:block; padding:3px 0; font-size:13px; }
.footer a:hover { color:#ffd600; }
.copyright { background:#0d3d12; text-align:center; padding:10px; margin-top:20px; font-size:12px; }

.page-content { line-height:1.9; }
.page-content h2 { color:#2e7d32; margin:18px 0 8px; }
.page-content h3 { color:#43a047; margin:12px 0 6px; }
.page-content ul { margin-left:18px; }
.page-content p { margin-bottom:8px; }

.search-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:15px; padding:12px; background:#f1f8e9; border-radius:6px; }
.search-form input[type=text] { flex:1; min-width:200px; padding:8px 12px; border:1px solid #c8e6c9; border-radius:4px; }
.search-form select { padding:8px; border:1px solid #c8e6c9; border-radius:4px; }

.pagination { display:flex; gap:5px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.page-btn { padding:6px 12px; background:#fff; border:1px solid #c8e6c9; color:#2e7d32; border-radius:4px; font-size:13px; }
.page-btn:hover, .page-btn.active { background:#2e7d32; color:#fff; border-color:#2e7d32; }

@media(max-width:960px) {
  .main-grid { grid-template-columns:1fr; }
  .sidebar-left, .sidebar-right { order:2; }
  .content-main { order:1; }
}
@media(max-width:900px) {
  .nav-list a { padding:10px 10px; font-size:13px; }
}
@media(max-width:768px) {
  .menu-toggle { display:block; }
  .nav-list { display:none; flex-direction:column; width:100%; }
  .nav-list.open { display:flex; }
  .nav-list a { padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.1); }
  .submenu { position:static; box-shadow:none; }
  .header-inner { flex-direction:column; text-align:center; }
  .logo-text h1 { font-size:18px; }
  .hero h2 { font-size:20px; }
  .topbar-inner { justify-content:center; text-align:center; }
  .principal-msg { flex-direction:column; text-align:center; }
  .grid-cards { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
  .teacher-grid { grid-template-columns:1fr; }
}