:root {
  --primary: #1e3a8a; /* dark blue */
  --primary-dark: #111e50; /* darker blue */
  --bg-light: #f0f4ff; /* light blue background */
  --text-dark: #1a1a1a; /* text color */
}

body {
  margin:0; 
  font-family:'Roboto',sans-serif; 
  background:var(--bg-light); 
  color:var(--text-dark);
}

.container { width:90%; max-width:1200px; margin:auto; padding:60px 0; }

.hero { 
  background:linear-gradient(135deg,var(--primary),#3b5ba3); 
  color:white; text-align:center; padding:80px 20px; 
}
.hero h1 { font-size:3rem; margin:10px 0; }
.hero .tagline { font-size:1.2rem; max-width:650px; margin:auto; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }
.feature-card { background:white; padding:26px; border-radius:18px; box-shadow:0 8px 18px rgba(0,0,0,0.08); text-align:center; cursor:pointer; transition:0.3s; }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.15); }
.feature-card h3 { margin-top:15px; color:var(--primary-dark); }
.feature-icon { width:50px; height:50px; stroke:var(--primary); }

.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); padding-top:50px; }
.modal-content { background:white; margin:auto; padding:30px; border-radius:15px; width:95%; max-width:700px; text-align:left; box-shadow:0 10px 25px rgba(0,0,0,0.2); overflow-y:auto; max-height:90vh; }
.close { float:right; font-size:28px; font-weight:bold; cursor:pointer; }
.close:hover { color:#000; }

.modal-body h4 { margin-top:20px; color:var(--primary-dark); }
.modal-body p { margin:10px 0; line-height:1.6; }
.modal-body ul { margin:10px 0 10px 20px; }

#quizContainer { margin-top:20px; }
#quizContainer button { margin:5px; padding:10px 15px; border:none; border-radius:8px; background:var(--primary); color:white; cursor:pointer; transition:0.2s; }
#quizContainer button:hover { background:var(--primary-dark); }
#quizContainer button:disabled { background:#ccc; cursor:not-allowed; }

/* ---- Submit button styling ---- */
#quizContainer button#submitBtn {
  display: inline-block;
  margin:5px;
  padding:10px 15px;
  border:none;
  border-radius:8px;
  background:#1e3a8a; /* dark blue for submit */
  color:white;
  cursor:pointer;
  transition:0.2s;
}

#quizContainer button#submitBtn:hover {
  background:#111e50;
}

/* ---- Score & wrong/correct answers ---- */
#scoreArea {
  margin-top:15px;
  font-weight:500;
  color:var(--text-dark);
}

#scoreArea .wrong {
  color:red;
}

#scoreArea .correct {
  color:#1e3a8a; /* dark blue for correct answers */
  font-weight:600;
}