body { font-family: Arial, sans-serif; margin:0; padding:0; background:#f9f9f9; color:#333; }
header, footer { background:#0073e6; color:#fff; text-align:center; padding:20px; }
header h1 { margin:0; }
nav { background:#005bb5; text-align:center; padding:10px; }
nav a { color:#fff; margin:0 15px; text-decoration:none; font-weight:bold; }
nav a:hover { text-decoration:underline; }
nav a.active { text-decoration:underline; color:#ff0; }
main { max-width:900px; margin:30px auto; padding:0 20px; }
h2 { color:#0073e6; }
h3 { margin-top:20px; }
ul { margin-left:20px; }

/* Cards and hero section */
.hero { text-align:center; margin-bottom:30px; }
.hero .actions a { margin:0 10px; padding:10px 20px; border-radius:6px; text-decoration:none; }
.button.primary { background:#0073e6; color:#fff; }
.button.secondary { background:#00c6ff; color:#fff; }
.grid { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.card { background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 5px rgba(0,0,0,0.1); width:250px; text-align:center; }
.card h3 { color:#0073e6; }
/* Center the form on the page */
.form-container {
  max-width: 500px;       /* keeps it narrow */
  margin: 0 auto;         /* centers horizontally */
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* Modern form layout */
.modern-form {
  display: flex;
  flex-direction: column;
  gap: 18px;              /* adds vertical spacing between fields */
}

/* Each field group */
.form-group {
  display: flex;
  flex-direction: column;
}

/* Labels */
.modern-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #0073e6;
}

/* Inputs and selects */
.modern-form input,
.modern-form select {
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
}

/* Button styling */
.modern-form .button.primary {
  background: linear-gradient(135deg,#0073e6,#00c6ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.modern-form .button.primary:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg,#005bb5,#0099cc);
}