/* === Sellar Group (Pure Blue #0000FF) — Multi‑page === */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#0f172a;background:#f7f9fc}
:root{
  --primary:#123a8a; /* requested pure blue */
  --primary-2:#0e2f73;
  --text:#0f172a;
  --muted:#667085;
  --card:#ffffff;
  --border:#e4e7ec;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:16px}

.topbar{position:sticky;top:0;background:var(--primary);color:#fff;z-index:20;backdrop-filter:saturate(180%) blur(6px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between; min-height:60px}
.brand{font-weight:900;letter-spacing:.4px}
.nav a{color:#e6e8ff;font-weight:600;margin-left:16px;padding:10px 8px;border-radius:10px;text-decoration:none;transition:.2s}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav .cta{background:#fff;color:var(--primary);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);margin-left:16px}
.nav .cta:hover{transform:translateY(-1px)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center;padding:28px 0}
.hero .tag{display:inline-block;background:#e6e8ff;color:#001BFF;padding:4px 10px;border-radius:999px;font-size:.85rem;margin-bottom:8px}
.hero h1{font-size:2.2rem;margin:.2em 0}
.hero p{color:var(--muted)}
.hero .card{box-shadow:var(--shadow)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .thumb{height:150px;border-radius:12px;overflow:hidden;margin-bottom:10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e6e8ff;color:#001BFF;font-size:.85rem;margin-bottom:6px}
.price{font-size:1.6rem;font-weight:800;margin:.2em 0}
.dim{color:var(--muted)}

.primary{background:var(--primary);border:none;color:#fff;border-radius:12px;padding:12px 16px;cursor:pointer;transition:.2s}
.primary:hover{background:var(--primary-2);transform:translateY(-1px)}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.filters{display:flex;gap:10px;align-items:center}
.input{padding:12px;border:1px solid var(--border);border-radius:10px}
.result{padding:12px;border:1px dashed #c7c9d3;border-radius:12px}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.form input,.form select,.form textarea{padding:12px;border-radius:10px;border:1px solid var(--border)}

.footer{background:#0a0a23;color:#e6e8ff;margin-top:28px}
.footer a{color:#e6e8ff;text-decoration:underline}

.reveal{opacity:0;transform:translateY(12px);animation:reveal .7s .1s forwards ease}
@keyframes reveal{to{opacity:1;transform:none}}

.brand img{display:none}

.hero-banner{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); margin:18px 0; background:#0a0a0a}
.hero-banner .img{width:100%; height:260px; background-size:cover; background-position:center}
@media(min-width:900px){ .hero-banner .img{height:360px} }

.brand img{display:none}

.brand{font-weight:800;font-size:18px;color:#fff;white-space:nowrap}
@media(min-width:900px){.brand{font-size:19px}}

.topbar .cta{font-size:16px;padding:10px 16px;border-radius:14px}


/* Hero banner responsive full width */
.hero-banner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.hero-banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}


/* Mobile hamburger menu */
.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 60px;
    right: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 10px;
    z-index: 1000;
  }

  .nav a {
    padding: 10px;
    display: block;
  }

  .menu-toggle {
    display: block;
  }

  .nav.active {
    display: flex;
  }
}


/* --- Navigation Enhancements with Yellow Highlight --- */

/* Desktop nav underline */
.topbar .nav a {
  position: relative;
  padding: 8px 12px;
  text-decoration: none;
  color: #ffffff; /* keep white text */
}

.topbar .nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #000000; /* yellow underline */
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.topbar .nav a:hover::after,
.topbar .nav a:focus::after {
  transform: scaleX(1);
}

/* Mobile dropdown with bold colors */
@media (max-width: 768px) {
  .nav {
    background: #002366; /* deep blue */
    border: 2px solid #FFD700; /* yellow outline */
  }

  .nav a {
    color: #000000; /* yellow text */
    font-weight: bold;
  }

  .nav a:hover {
    background: #FFD700; /* yellow background */
    color: #002366; /* blue text */
  }
}


/* === Mobile Menu Fixes (overlay dropdown) === */
@media (max-width: 768px) {
  .topbar { position: sticky; top: 0; z-index: 1200; }

  .menu-toggle { 
    display: block; 
    z-index: 1300; 
  }

  /* Dropdown panel overlays content */
  #nav-menu {
    display: none;
    position: fixed;
    top: 60px;
    right: 12px;
    width: 78vw;
    max-width: 360px;
    background: #002366; /* deep blue */
    border: 2px solid #FFD700; /* yellow */
    box-shadow: 0 12px 24px rgba(0,0,0,.22);
    border-radius: 12px;
    padding: 8px;
    z-index: 1290;
  }

  #nav-menu.active { display: flex; flex-direction: column; }

  #nav-menu a {
    color: #000000; 
    font-weight: 700; 
    padding: 12px 14px;
    border-radius: 8px;
  }

  #nav-menu a:hover {
    background: #FFD700;
    color: #002366;
  }

  /* Prevent parent containers from clipping the menu */
  header, .topbar, .wrap { overflow: visible; }
}


/* === Yellow Accent Theme === */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #000000;
}

/* Cards (like Locations) */
.card, .location-card {
  border: 1px solid #FFD700;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}

/* Key labels or subtitles */
label, .subtitle, .tagline {
  color: #000000;
  font-weight: 600;
}

/* Buttons: yellow background with blue hover */
button, .btn, .cta {
  background: #FFD700;
  color: #002366;
  font-weight: bold;
  border-radius: 6px;
  padding: 10px 16px;
  border: none;
}
button:hover, .btn:hover, .cta:hover {
  background: #002366;
  color: #000000;
}


.nav.active a {
  color: #FFD700 !important;
}


.nav a {
  position: relative;
  padding-bottom: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #FFD700;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: bottom right;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}