/* LAYOUT — Topbar, Navbar, Hero Slider, Marquee */
/* ═══════════════════════════════════════════════════════════════ */

/* ── TOP BAR ──────────────────────────────────────────────── */
#topbar           { background: var(--navy); color: rgba(255,255,255,.85); font-size: .76rem; padding: 8px 0; transition: all .35s ease; overflow: hidden; max-height: 60px; }
.tb-inner         { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-item          { display: flex; align-items: center; gap: 5px; }
.tb-item i        { color: var(--sky); font-size: .72rem; }
#topbar a         { color: rgba(255,255,255,.75); transition: color .2s; }
#topbar a:hover   { color: var(--gold); }

/* ── NAVBAR ───────────────────────────────────────────────── */
#navbar           { background: #fff; box-shadow: 0 2px 20px rgba(2,136,209,.1); position: sticky; top: 0; z-index: 999; transition: all .35s ease; }
#navbar.scrolled  { backdrop-filter: blur(12px); background: rgba(255,255,255,.92); box-shadow: 0 4px 28px rgba(2,136,209,.18); }
#topbar.hidden    { max-height: 0; padding: 0; }
.nav-inner        { display: flex; align-items: center; justify-content: space-between; height: 70px; transition: height .35s ease; }
.logo             { display: flex; align-items: center; gap: 12px; }
.logo-circle      { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,var(--navy),var(--sky)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow); }
.logo-circle svg  { width: 24px; height: 24px; fill: #fff; }
.logo-text .name  { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.1; display: block; }
.logo-text .tagline { font-size: .50rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.nav-links        { display: flex; gap: 1px; align-items: center; flex-shrink: 1; min-width: 0; }
.nav-links li     { position: relative; }
.nav-links a      { display: block; padding: 7px 10px; font-size: .78rem; font-weight: 600; color: var(--text); border-radius: var(--rad-sm); transition: var(--trans); white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); background: var(--pale); }
.has-dropdown:hover .dropdown { display: block; }
.dropdown         { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--rad); box-shadow: var(--shadow-lg); min-width: 210px; z-index: 400; padding: 8px 0; }
.dropdown a       { padding: 10px 18px; font-size: .82rem; border-radius: 0; border-bottom: 1px solid var(--pale); }
.dropdown a:last-child { border-bottom: none; }
.nav-cta          { background: var(--blue)!important; color: #fff!important; border-radius: var(--rad-sm)!important; padding: 10px 20px!important; font-weight: 700!important; }
.nav-cta:hover    { background: var(--navy)!important; color: #fff!important; }
#mob-btn          { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--rad-sm); background: var(--pale); color: var(--navy); font-size: 1.2rem; }
#mob-menu         { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px 20px; max-height: 80vh; overflow-y: auto; }
#mob-menu a       { display: flex; align-items: center; gap: 11px; padding: 12px 14px; font-size: .9rem; font-weight: 600; border-radius: var(--rad-sm); color: var(--text); border-bottom: 1px solid var(--pale); transition: var(--trans); }
#mob-menu a i     { width: 18px; text-align: center; color: var(--blue); font-size: .85rem; flex-shrink: 0; }
#mob-menu a:hover { background: var(--pale); color: var(--blue); }
#mob-menu a:last-child { border-bottom: none; background: var(--blue); color: #fff; text-align: center; margin-top: 8px; justify-content: center; }
#mob-menu a:last-child i { color: #fff; }

/* ── HERO SLIDER ──────────────────────────────────────────── */
#hero             { position: relative; overflow: hidden; background: var(--navy); }
.slides-track     { display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.slide            { min-width: 100%; min-height: 88vh; position: relative; display: flex; align-items: center; overflow: hidden; }
.slide-content    { position: relative; z-index: 2; padding: 40px 20px 140px; max-width: 1240px; margin: 0 auto; width: 100%; }
.slide-badge      { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,202,40,.55); color: #FFD700; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 7px 18px; border-radius: 100px; margin-bottom: 18px; backdrop-filter: blur(6px); }
.slide-motto      { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.08rem; margin-bottom: 10px; }
.slide-h1         { font-family: var(--serif); font-size: clamp(2.2rem,6vw,4rem); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.slide-h1 em      { font-style: italic; color: var(--gold); }
.slide-p          { font-size: clamp(.88rem,2vw,1.02rem); color: rgba(255,255,255,.88); line-height: 1.78; max-width: 520px; margin-bottom: 34px; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.slide-btns       { display: flex; gap: 14px; flex-wrap: wrap; }
.s1 { background: linear-gradient(135deg,rgba(1,51,92,.80) 0%,rgba(1,51,92,.65) 60%,rgba(2,136,209,.45) 100%),
       url('https://images.unsplash.com/photo-1551190822-a9333d879b1f?w=1400&q=80') center/cover no-repeat; }
.s2 { background: linear-gradient(135deg,rgba(1,51,92,.85) 0%,rgba(1,87,155,.72) 60%,rgba(2,136,209,.50) 100%),
       url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?w=1400&q=80') center/cover no-repeat; }
.s3 { background: linear-gradient(135deg,rgba(0,60,64,.85) 0%,rgba(0,96,100,.75) 60%,rgba(1,119,189,.55) 100%),
       url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1400&q=80') center/cover no-repeat; }
.slide-deco       { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); opacity: .1; pointer-events: none; }
.stats-bar        { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(1,31,56,.82); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.15); }
.stats-row        { display: flex; justify-content: space-around; flex-wrap: wrap; }
.stat-item        { padding: 16px 10px; text-align: center; flex: 1; min-width: 88px; border-right: 1px solid rgba(255,255,255,.15); white-space: nowrap; }
.stat-item:last-child { border-right: none; }
.stat-num         { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: #FFD700; line-height: 1; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.stat-lbl         { font-size: .63rem; color: rgba(255,255,255,.82); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; font-weight: 600; }
.slide-arrow      {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.85);
  background: rgba(1,31,56,.65);
  color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.slide-arrow:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(2,136,209,.5); }
.arrow-prev       { left: 14px; }
.arrow-next       { right: 14px; }
.slide-dots       { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.dot              { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: var(--trans); border: none; cursor: pointer; }
.dot.active       { background: var(--gold); width: 24px; border-radius: 4px; }

/* ── MARQUEE ──────────────────────────────────────────────── */
#marquee   { background: var(--blue); padding: 11px 0; overflow: hidden; white-space: nowrap; }
.mq-track  { display: inline-flex; animation: mq 35s linear infinite; }
.mq-item   { display: inline-flex; align-items: center; gap: 10px; font-size: .73rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 0 28px; }
.mq-dot    { width: 5px; height: 5px; background: rgba(255,255,255,.45); border-radius: 50%; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }