@charset "UTF-8";
/* ==========================================================================
   EduNav.az — haqqimizda.html only
   Loaded AFTER assets/css/style.css. Every selector is prefixed .hq- and is
   used on this single page. Nothing here overrides a shared class.
   Tokens come from style.css :root — no new colours, radii or shadows.
   ========================================================================== */

/* --- text + contact, side by side ----------------------------------------
   Stacked, the two blocks made a thin strip down the middle of a 1440px
   screen with 300px of nothing on either side. Side by side they fill the
   measure: the prose keeps a readable line length and the form becomes a
   panel with an edge instead of loose fields on the page background. */

.hq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 44px;
  align-items: start;
}

.hq-text .prose { max-width: 66ch; }
.hq-text .prose p:last-child { margin-bottom: 0; }

.hq-form {
  position: sticky;
  /* clears the fixed header plus a little air */
  top: calc(var(--header-h) + 20px);
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--sh-2);
}
.hq-form .h4 { margin-top: 8px; }
.hq-form-sub {
  margin: 6px 0 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.hq-form .form-grid { gap: 14px; }
.hq-form .btn-brand { width: 100%; justify-content: center; }
.hq-form .alert { margin-bottom: 16px; }

@media (max-width: 1024px) {
  .hq-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Nothing left to scroll past once the form sits under the text. */
  .hq-form { position: static; max-width: 560px; }
  .hq-text .prose { max-width: none; }
}