:root{
  --brand:#0f4c97;
  --brand-2:#1f7ad6;
  --brand-soft:#eaf4ff;
  --panel:#ffffff;
  --sidebar:#f5f8fc;
  --text:#18324b;
  --muted:#5d738a;
  --border:#d7e5f4;
  --shadow:0 12px 28px rgba(15,76,151,.12);
  --radius:18px;
}
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
html,body{max-width:100%;overflow-x:hidden}
body{
  width:auto !important;
  max-width:1200px;
  margin:0 auto !important;
  padding:14px;
  background:linear-gradient(180deg,#f5f9ff 0%,#eef5fb 100%);
  color:var(--text);
}
a{transition:all .22s ease}
a:hover{text-decoration:none}

/* Base header shell from working modern CSS, but tuned to preserve the .old logo/header/button layout */
#topmain{
  position:relative;
  z-index:50;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  width:100% !important;
  min-height:150px !important;
  height:auto !important;
  padding:16px 16px 20px 16px !important;
  margin:0 0 16px 0 !important;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%) !important;
  border:0 !important;
  border-radius:24px !important;
  box-shadow:var(--shadow);
  overflow:visible !important;
}

#topmain .floatleft{
  float:none !important;
  width:auto !important;
  height:auto !important;
  display:block;
  min-width:0 !important;
}

#topmain .floatleft:first-child,
#topmain .top-logo-col{
  flex:0 0 300px !important;
  width:300px !important;
}

#topmain .logo{
  margin:0 !important;
  display:block !important;
}

#topmain .logo img{
  display:block !important;
  width:220px !important;
  max-width:100% !important;
  height:auto !important;
  border:0 !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

#topmain .floatleft + .floatleft{
  flex:1 1 auto !important;
  min-width:0 !important;
}

/* Preserve .old message-box spacing/alignment because it was already tuned */
#topmain .floatleft > div[style*="margin-left:70px"],
#topmain .top-message-box{
  width:100% !important;
  max-width:680px !important;
  height:auto !important;
  margin:0 0 10px 0 !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  box-sizing:border-box !important;
  backdrop-filter:blur(4px);
}

#topmain .floatleft > div[style*="margin-left:70px"] table,
#topmain .floatleft > div[style*="margin-left:70px"] tbody,
#topmain .floatleft > div[style*="margin-left:70px"] tr,
#topmain .top-message-box table,
#topmain .top-message-box tbody,
#topmain .top-message-box tr{
  width:100% !important;
  display:block !important;
}

#topmain .floatleft > div[style*="margin-left:70px"] td,
#topmain .top-message-box td{
  display:block !important;
  width:auto !important;
  padding:2px 0 !important;
}

.MessageTop,
.MessageTop a,
#topmain strong,
#topmain span{
  color:#fff !important;
}

.MessageTop{
  width:auto !important;
  font-size:.9rem !important;
  line-height:1.35 !important;
}

/* Keep .old header buttons because they were adjusted correctly around logo/header */
.nav,
#topmain ul.nav{
  width:100% !important;
  height:auto !important;
  float:none !important;
  overflow:visible !important;
  margin:8px 0 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

.nav li,
#topmain ul.nav li{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

.nav li a,
#topmain ul.nav li a,
#topmain ul.nav li a.hover{
  display:inline-block !important;
  width:auto !important;
  min-width:100px !important;
  height:auto !important;
  padding:8px 12px !important;
  background:#ffffff !important;
  border:1px solid var(--brand) !important;
  color:var(--brand) !important;
  border-radius:10px !important;
  text-decoration:none !important;
  text-align:center !important;
  font:700 13px/1.1 Arial, Helvetica, sans-serif !important;
  box-shadow:none !important;
}

#topmain ul.nav li a:hover,
#topmain ul.nav li a.hover{
  background:#fff !important;
  color:var(--brand) !important;
  transform:translateY(-1px);
}

.omar-menu-toggle,.omar-side-toggle{
  display:none;
  appearance:none;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  font:700 14px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.omar-menu-toggle{background:#fff;color:var(--brand);margin:0 0 10px auto}
.omar-side-toggle{width:100%;background:var(--brand);color:#fff;margin:0 0 12px 0}

/* Follow .old spacing so header/button alignment stays correct */
#midBody{
  display:grid !important;
  grid-template-columns:minmax(240px,280px) minmax(0,1fr);
  gap:18px !important;
  width:100% !important;
  align-items:start !important;
  overflow:visible !important;
  margin-top:18px !important;
}

#bLeft,#bRight{
  float:none !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  border-radius:24px !important;
  box-shadow:var(--shadow);
}

/* Preserve .old sidebar behavior so it doesn't shift header spacing */
#bLeft{
  background:var(--sidebar) !important;
  padding:18px !important;
  position:relative;
  top:auto;
}

#bLeft h4{
  margin:0 0 12px 0 !important;
  padding:0 !important;
  font-size:1.1rem !important;
  color:var(--brand) !important;
}
#bLeft ul{padding:0 !important}
#bLeft ul li{margin:0 0 8px 0 !important;line-height:1.35 !important}
#bLeft ul li a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  color:var(--text) !important;
  border:1px solid var(--border);
  font-size:14px !important;
  font-weight:700;
  box-shadow:0 4px 10px rgba(15,76,151,.04)
}
#bLeft ul li a:hover{background:var(--brand);color:#fff !important;transform:translateX(4px)}

/* Critical fix from working CSS: clip overflowing content in the main content panel */
#bRight{
  background:var(--panel) !important;
  padding:24px !important;
  min-height:auto !important;
  overflow:hidden !important;
}

#bRight h4{font-size:clamp(1.35rem,2vw,1.8rem) !important;color:var(--brand) !important;margin:0 0 14px 0 !important}
#bRight p{font-size:1rem !important;line-height:1.72 !important;color:var(--text) !important}
#green,#bRight p[style*="text-align:center"]{display:flex;justify-content:center;align-items:center}

#green img,
#bRight img,
.flash-replacement img,
a[href$=".jpg"] img,
a[href$=".jpeg"] img,
a[href$=".png"] img,
a[href$=".gif"] img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  border-radius:18px;
}

#bRight > p > img,
#bRight > div > p > img,
#bRight table img{
  width:min(100%,1000px) !important;
  height:auto !important;
  object-fit:contain;
}

.specials-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}

.special-card{
  display:grid !important;
  grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  align-items:start !important;
  gap:18px !important;
  padding:18px !important;
  border:1px solid var(--border) !important;
  background:linear-gradient(180deg,#fff 0%,#f9fcff 100%) !important;
  border-radius:22px !important;
  box-shadow:0 10px 22px rgba(15,76,151,.08);
}
.special-card > a{display:block;width:100%}
.special-card img{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#f3f8fd;
  padding:10px;
  border:1px solid var(--border);
  margin:0 !important;
}
.special-name{font-size:clamp(1.1rem,1.8vw,1.35rem) !important;line-height:1.25 !important}
.special-desc{font-size:1rem !important;color:var(--muted) !important}

}
#footerMain td{display:block;padding:0 !important}
#footerMain img{width:min(100%,220px);height:auto}
#footerMain a{color:var(--brand);font-weight:700}
#footerMain td[style*="padding-left:450px"]{padding-left:0 !important}

iframe,table{max-width:100%}

@media (max-width: 980px){
  body{padding:10px}
  #topmain{position:relative;flex-direction:column;align-items:stretch}
  #midBody{grid-template-columns:1fr !important}
  #bLeft{position:relative;top:auto}
  .special-card{grid-template-columns:1fr !important}
}

@media (max-width: 760px){
  .omar-menu-toggle,.omar-side-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px}
  body.js-nav-ready .nav{display:none !important}
  body.js-nav-ready .nav.is-open{display:flex !important;flex-direction:column}
  body.js-nav-ready #bLeft ul{display:none !important}
  body.js-nav-ready #bLeft ul.is-open{display:block !important}
  .nav li a,#topmain ul.nav li a,#topmain ul.nav li a.hover{width:100% !important;text-align:center}
  #topmain .floatleft > div[style*="margin-left:70px"],
  #topmain .top-message-box{padding:12px !important}
  .special-card{padding:14px !important}
  #bRight,#bLeft,#footerMain{border-radius:20px !important}
}