@font-face {
  font-family: Rubik;
  src: url("assets/rubik.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("assets/nastaliq.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; }
a:focus-visible, summary:focus-visible { outline: 3px solid #129bc8; outline-offset: 3px; }
.mobile-menu { display: none; }
@media (max-width: 850px) {
  nav .desktop-links { display: none !important; }
  .mobile-menu { display: block; margin-left: auto; color: white; }
  .mobile-menu summary { padding: 12px 2px; cursor: pointer; }
  .mobile-menu div {
    position: absolute; top: 100%; right: 16px; z-index: 3;
    min-width: 160px; padding: 6px 18px; background: #102748; border-radius: 12px;
  }
  header nav { z-index: 2; }
}
@media (max-width: 480px) {
  header nav { gap: 12px !important; }
  .hero { gap: 28px !important; }
  .hero > div:last-child > div > div[style*="position: absolute"] {
    position: relative !important; inset: auto !important; width: auto !important;
    align-self: stretch; box-shadow: none !important;
  }
  .hero > div:last-child > div { flex-direction: column; align-items: center; gap: 12px; }
}