/* overall page */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f4f7fb;
  color: #1f2e3d;
}

/* NAVBAR - soft gradient background */
.custom-navbar {
  background: linear-gradient(90deg, #e9f7ff 0%, #f0f7ff 100%);
  border-bottom: 1px solid rgba(20,40,60,0.05);
  position: relative;
}

/* container inside nav */
.custom-navbar .container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 16px;
}

/* left: logo */
.nav-left { flex: 0 0 auto; display:flex; align-items:center; }
.site-logo {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;           /* circle shape */
  box-shadow: 0 3px 8px rgba(15,40,80,0.12);
  background: #fff;             /* if logo has transparency */
  padding: 4px;
}

/* center: nav links centered absolutely */
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  align-items: center;
  z-index: 2;
}
.nav-center .nav-link {
  color: #0f3a6b;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
}
.nav-center .nav-link:hover {
  background: rgba(15,58,107,0.08);
  color: #06315a;
}

/* right reserved area */
.nav-right { flex: 0 0 160px; text-align: right; }

/* main page cards & buttons */
.container-main {
  margin-top: 28px;
}

.main-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(18,37,62,0.06);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.category-btn {
  width: 80%;
  font-size: 1.05rem;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* version buttons area (shown after clicking category) */
.version-options {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* version page subject buttons */
.subject-btn {
  margin: 8px 0;
}

/* question content styling */
.question-set {
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(20,40,60,0.04);
  box-shadow: 0 3px 10px rgba(12,30,60,0.04);
}

/* minor responsive */
@media (max-width: 767px) {
  .nav-center { position: static; transform:none; margin-left:auto; margin-right:auto; }
  .nav-right { display: none; }
  .category-btn { width: 100%; }
}