:root {
  --sxmu-primary: #003366;
  --sxmu-primary-600: #00264d;
  --sxmu-primary-700: #001933;
  --accent-1: #1fb6ff;
  --accent-2: #ffb703;
}

.text-bg-primary { background-color: var(--sxmu-primary) !important; }
.btn-primary { background-color: var(--sxmu-primary); border-color: var(--sxmu-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--sxmu-primary-600); border-color: var(--sxmu-primary-600); }
.link-primary { color: var(--sxmu-primary) !important; }
.text-primary { color: var(--sxmu-primary) !important; }
.border-primary { border-color: var(--sxmu-primary) !important; }

/* Header */
.brandbar { background: var(--sxmu-primary); color: #fff; }
.brandbar .site-title { font-weight: 700; letter-spacing: .05em; }
.brandbar .subtitle { opacity: .85; }

/* New banner header */
.container-1200 { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; width: 100%; }
.header-banner { background: var(--sxmu-primary); color: #fff; }
.header-banner .top-strip { min-height: 40px; display: flex; align-items: center; }
.header-banner .top-strip .welcome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-banner .top-strip .search-area { display: flex; align-items: center; gap: .5rem; }
.header-banner .top-strip .search-group { position: relative; }
.header-banner .top-strip .search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .7; font-size: .9rem; color: #666; }
.header-banner .top-strip .search-input { max-width: 320px; padding-left: 2rem; border-radius: 999px; background-color: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: none; }
.header-banner .top-strip .search-input:focus { border-color: var(--sxmu-primary-600); box-shadow: 0 0 0 .2rem rgba(0,51,102,.15); }
.header-banner .top-strip .btn { border-radius: 999px; }
.header-banner .logo-area { min-height: 150px; display: flex; align-items: center; justify-content: center; }
.header-banner .logo-area img { max-height: 150px; width: 100%; object-fit: cover; border-radius: 4px; }

/* Mobile adjustments for header (welcome + search + link) */
@media (max-width: 575.98px) {
  .header-banner .container-1200 { padding-left: .75rem; padding-right: .75rem; }
  .header-banner .top-strip { flex-wrap: wrap; gap: .5rem .75rem; padding-top: .25rem; padding-bottom: .25rem; }
  .header-banner .top-strip .welcome { width: 100%; white-space: normal; line-height: 1.4; }
  .header-banner .top-strip .search-area { width: 100%; justify-content: space-between; }
  .header-banner .top-strip .search-group { flex: 1 1 auto; }
  .header-banner .top-strip .search-input { max-width: none; width: 100%; height: 34px; }
  .header-banner .top-strip .btn { padding: .25rem .6rem; height: 34px; line-height: 1.2; }
  .header-banner .logo-area { min-height: 100px; }
  .header-banner .logo-area img { max-height: 100px; }
}

.menubar.bg-primary-sxmu { background: var(--sxmu-primary) !important; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.9); }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #fff; text-decoration: underline; }
.navbar-dark .navbar-nav .nav-link.active { color: #fff; font-weight: 600; }

/* Menu evenly distributed in one line */
.navbar .navbar-nav.menu-fill { flex: 1 1 auto; justify-content: space-between; width: 100%; flex-wrap: nowrap; }
.navbar .navbar-nav.menu-fill .nav-item { flex: 1 1 0; text-align: center; }
.navbar .navbar-nav.menu-fill .nav-link { padding-left: .5rem; padding-right: .5rem; }

/* Menu item borders/shadows */
.navbar-dark .navbar-nav.menu-fill .nav-link {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .375rem;
  margin: .25rem .35rem;
  background: transparent;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.navbar-dark .navbar-nav.menu-fill .nav-link:hover, .navbar-dark .navbar-nav.menu-fill .nav-link:focus {
  background-color: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  text-decoration: none;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.15) inset;
}
.navbar-dark .navbar-nav.menu-fill .nav-link.active {
  background-color: rgba(255,255,255,.18);
  border-color: #fff;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.18) inset;
}

/* Dropdown (second-level menu) */
.navbar .dropdown-menu { border-radius: .5rem; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: .25rem; min-width: 12rem; }
.navbar .dropdown-item { padding: .45rem .75rem; }
.navbar .dropdown-item:hover { background: rgba(0,51,102,.08); color: var(--sxmu-primary-700); }
@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

/* Hero */
.hero .hero-slide { min-height: 380px; background-size: cover; background-position: center; }
@media (min-width: 992px) {
  .hero .hero-slide { min-height: 440px; }
}

/* Ensure image-based carousel slides have height */
.hero .carousel-item { min-height: 380px; }
@media (min-width: 992px) {
  .hero .carousel-item { min-height: 440px; }
}
.hero .carousel-item > img { width: min(1320px, 100%); max-width: 1320px; height: 100%; object-fit: cover; display: block; margin-left: auto; margin-right: auto; }

/* Keep carousel controls within 1320px central width */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .95;
  background: linear-gradient(180deg, rgba(31,182,255,.85), rgba(255,183,3,.85));
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { background: linear-gradient(180deg, rgba(31,182,255,1), rgba(255,183,3,1)); }
.hero .carousel-control-prev { left: 12px; }
.hero .carousel-control-next { right: 12px; }
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon { filter: drop-shadow(0 0 4px rgba(0,0,0,.35)); }

/* Utility: limit section content width to 1320 and center */
.section-1320 { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* Section title */
.section-title h3 { border-left: 4px solid transparent; padding-left: 10px; background: linear-gradient(var(--accent-1), var(--accent-2)) left center/4px 1.2em no-repeat; }
.section-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(0,0,0,.06); padding-bottom: .5rem; margin-bottom: .75rem; }
.section-head .more-link { color: var(--sxmu-primary); text-decoration: none; }
.section-head .more-link:hover { text-decoration: underline; }
/* Section title decoration */
.section-head h3 { position: relative; padding-left: 12px; margin: 0; }
.section-head h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 1.2em; background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); border-radius: 3px; }

/* Page header (title + breadcrumb) */
.page-header { background: #f8fafc; }
.page-header .page-title { position: relative; padding-left: .75rem; margin: 0; font-weight: 700; }
.page-header .page-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 1.25em; background: var(--sxmu-primary); border-radius: 3px; }
.page-header .breadcrumb { --bs-breadcrumb-divider: ">"; }
.page-header .breadcrumb .breadcrumb-item a { color: var(--sxmu-primary); text-decoration: none; }
.page-header .breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }

/* Sidebar nav for second-level categories */
.side-nav { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: .5rem; overflow: hidden; }
.side-nav-head { background: linear-gradient(90deg, var(--sxmu-primary) 0%, var(--sxmu-primary-600) 40%, var(--accent-1) 100%); color: #fff; padding: .75rem 1rem; font-weight: 700; }
.side-nav-list a::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--accent-1); vertical-align: middle; }
.side-nav-list .active > a::before, .side-nav-list a.active::before { background: var(--accent-2); }
.side-nav-list { list-style: none; margin: 0; padding: .25rem 0; }
.side-nav-list li { border-top: 1px solid rgba(0,0,0,.06); }
.side-nav-list li:first-child { border-top: 0; }
.side-nav-list a { display: block; padding: .6rem 1rem; color: #334155; text-decoration: none; }
.side-nav-list a:hover { background: rgba(0,0,0,.03); color: var(--sxmu-primary); }
.side-nav-list .active > a, .side-nav-list a.active { background: rgba(0,51,102,.08); color: var(--sxmu-primary); font-weight: 600; }
.side-nav.no-children .side-nav-list { display: none; }

/* Cards & lists */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }
.list-ruled .list-group-item { border: 0; border-top: 1px solid rgba(0,0,0,.075); }
.list-ruled .list-group-item:first-child { border-top: 0; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: .6rem 0; border-top: 1px solid rgba(0,0,0,.075); display: flex; gap: .75rem; align-items: center; }
.news-list li:first-child { border-top: 0; }
.news-list .date { color: #6c757d; font-weight: 500; width: 52px; flex: 0 0 52px; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.news-list a { color: var(--sxmu-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease, text-underline-offset .15s ease; }
.news-list a:hover { color: var(--sxmu-primary-600); text-decoration: underline; text-underline-offset: .2rem; text-decoration-thickness: 2px; }
.news-list li:hover { background-color: rgba(0,0,0,.02); }
.news-list a:focus-visible { outline: none; color: var(--sxmu-primary-600); text-decoration: underline; text-underline-offset: .2rem; text-decoration-thickness: 2px; }
/* Variant: date on the right */
.news-list.right-date a { flex: 1 1 auto; }
@media (max-width: 575.98px) {
  .news-list .date { width: 64px; flex-basis: 64px; }
}

/* Quick links & footer */
.quick-link { background: white; border: 1px solid rgba(0,0,0,.075); border-radius: .5rem; color: var(--sxmu-primary); font-weight: 600; }
.quick-link:hover { background: var(--sxmu-primary); color: #fff; }
.footer { background: var(--sxmu-primary); border-top: none; color: #fff; }
.footer .brand { font-weight: 700; color: #fff; font-size: 1.125rem; letter-spacing: .03em; margin-bottom: .25rem; }
.footer .info { color: rgba(255,255,255,.85); }
.footer .copy { color: rgba(255,255,255,.82); }
.footer .footer-link { color: #fff; text-decoration: none; opacity: .9; }
.footer .footer-link:hover { text-decoration: underline; opacity: 1; }
.footer .meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.footer .meta .item { position: relative; color: rgba(255,255,255,.85); padding-right: 1rem; }
.footer .meta .item:not(:last-child)::after { content: ""; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 1px; height: 1em; background: rgba(255,255,255,.25); }
@media (max-width: 575.98px) {
  .footer .meta .item { padding-right: 0; }
  .footer .meta .item::after { display: none; }
}

/* Back to top */
.btn-back-to-top { position: fixed; right: 16px; bottom: 16px; display: none; z-index: 1030; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

/* Carousel numeric indicators for news */
.carousel-indicators.numeric { bottom: .25rem; }
.carousel-indicators.numeric button { width: auto; height: 1.75rem; padding: 0 .4rem; margin: 0 .15rem; text-indent: 0; color: #fff; background-color: rgba(31,182,255,.45); border: 1px solid rgba(255,255,255,.6); border-radius: .25rem; opacity: .95; }
.carousel-indicators.numeric .active { background-color: var(--accent-2); border-color: #fff; }
.carousel-indicators [data-bs-target] { background-color: rgba(31,182,255,.6); }
.carousel-indicators .active { background-color: var(--accent-2); }

/* Feature tiles above quick links */
.feature-link { display: block; text-decoration: none; padding: .85rem 1rem; background: #fff; border: 1px solid rgba(0,0,0,.075); border-radius: .25rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.feature-link strong { display: block; color: var(--sxmu-primary); font-size: 1.05rem; }
.feature-link span { display: block; color: #6c757d; font-size: .875rem; margin-top: .25rem; }
.feature-link:hover { background: var(--sxmu-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.feature-link:hover strong, .feature-link:hover span { color: #fff; }

/* Features section spacing and variation */
#features { scroll-margin-top: 80px; }
#features .section-head { margin-top: .25rem; margin-bottom: .75rem; }
#features .news-list li { padding: .8rem 0; }
#features .news-list li:nth-child(odd) { background-color: transparent; }
#features .news-list li + li { border-top-color: rgba(0,0,0,.075); }

/* Article typography */
.article-content p { text-indent: 2em; font-size: 18px; line-height: 1.8; }
.article-title { text-align: center; font-weight: 700; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.article-meta { text-align: center; }

/* Add visual separation between the two rows of the six-feature grid */
@media (min-width: 768px) {
  #features .col-md-4 { position: relative; }
  #features .col-md-4:nth-child(n+4) {
    margin-top: .5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
  }

}

/* Slogan strip */
.slogan-strip { position: relative; background: none; color: inherit; border-radius: 6px; overflow: hidden; text-align: center; min-height: 120px; }
.slogan-strip img { width: 100%; height: 120px; object-fit: cover; display: block; opacity: 1; }
.slogan-strip .slogan-text { display: none; }