/* Global tweaks */
* { box-sizing: border-box; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Desktop defaults (safe overrides) */
.outer-frame { max-width:1080px; margin:20px auto; background:#fff; border:5px solid #2b5b87; }
.grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:28px; }
.panel { background:#f7fbff; border:1px solid #cfe2f3; padding:18px; }
.form input, .form label, .form button { display:block; width:100%; margin:.6rem 0; }
.form input[type="checkbox"] { width:auto; display:inline-block; margin-right:8px; }
.btn-primary { background:#22679f; color:#fff; border:none; padding:.75rem 1rem; cursor:pointer; }

/* Headings (avoid giant text on mobile) */
.hero h1 { font-weight:700; color:#ff9933; margin:0 0 .25rem 0; }
.hero h2 { color:#ff9933; margin:0; }

/* Navigation: allow horizontal scroll on small screens */
.nav-inner { display:flex; gap:2px; }
.nav-inner a { display:block; padding:12px 18px; color:#fff; text-decoration:none; white-space:nowrap; }

/* --- Mobile overrides --- */
@media (max-width: 900px) {
  .outer-frame { margin:0; border:none; }
  .grid { display:block; }
  .panel { margin:0 12px 16px 12px; padding:14px; }
  .hero { padding:12px; }

  /* Headings scale */
  .hero h1 { font-size:24px; line-height:1.2; }
  .hero h2 { font-size:18px; line-height:1.25; }

  /* Paragraph and list text comfortable size */
  .panel p, .panel li { font-size:16px; line-height:1.45; }

  /* Form: prevent mobile zoom and make controls tappable */
  .form input, .form button, .form label { font-size:16px; }
  .btn-primary { width:100%; }

  /* Nav compact + scrollable */
  .nav-inner { overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .nav-inner a { padding:10px 12px; font-size:14px; }
}

/* Extra small phones */
@media (max-width: 360px) {
  .hero h1 { font-size:22px; }
  .hero h2 { font-size:16px; }
}

/* --- Courses block with images --- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.course-card {
  display: block;
  background: #ffffff;
  border: 1px solid #cfe2f3;
  padding: 14px;
  text-decoration: none;
  color: #123;
  transition: box-shadow .15s ease, transform .15s ease;
  min-height: 220px;
}
.course-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); transform: translateY(-2px); }
.course-thumb { width: 100%; height: auto; margin: 0 0 10px 0; display: block; }
.course-card h4 {
  margin: 0 0 6px 0;
  color: #184b73;
  font-weight: 700;
}
.course-card p { margin: 0 0 10px 0; color: #444; }
.course-card .btn-course {
  display: inline-block;
  background: #22679f;
  color: #fff;
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .course-grid { grid-template-columns: 1fr; }
}