html, body, button, input, textarea, select, a, p, h1, h2, h3, h4, h5, h6, span, li, div {
  font-family: 'Tajawal', sans-serif !important;
}

.font-english,
.font-arabic,
[dir="ltr"],
[dir="rtl"] {
  font-family: 'Tajawal', sans-serif !important;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

footer a[aria-label="Facebook"],
footer a[aria-label="LinkedIn"],
footer a[aria-label="X"],
nav a[aria-label="Facebook"],
nav a[aria-label="LinkedIn"],
nav a[aria-label="X"] {
  transition: transform .2s ease, opacity .2s ease;
}

footer a[aria-label="Facebook"]:hover,
footer a[aria-label="LinkedIn"]:hover,
footer a[aria-label="X"]:hover,
nav a[aria-label="Facebook"]:hover,
nav a[aria-label="LinkedIn"]:hover,
nav a[aria-label="X"]:hover {
  transform: translateY(-1px);
}

@supports selector(html:has(body)) {
  html:has(button[class*="fixed inset-0"][class*="z-40"]) ,
  html:has(button[class*="fixed inset-0"][class*="z-40"]) body {
    overflow: hidden !important;
    touch-action: none;
  }
}

@media (max-width: 767px) {
  nav button {
    -webkit-tap-highlight-color: transparent;
  }

  button[class*="md:hidden"][class*="fixed inset-0"][class*="z-40"] {
    inset: 0 !important;
    z-index: 70 !important;
    background: rgba(7, 22, 36, 0.58) !important;
    backdrop-filter: blur(6px) !important;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 80 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: calc(1rem + env(safe-area-inset-top)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,254,.98) 100%),
      linear-gradient(135deg, rgba(18,59,99,.06), rgba(212,175,55,.08)) !important;
    overflow-y: auto !important;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(212,175,55,.12), transparent 30%);
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] > * {
    position: relative;
    z-index: 1;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] > div:first-child {
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="space-y-2"] {
    display: grid !important;
    gap: .85rem !important;
    margin-top: .25rem;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="space-y-2"] a {
    min-height: 56px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1rem !important;
    border-radius: 1rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(18,59,99,.10) !important;
    box-shadow: 0 10px 30px rgba(18,59,99,.05);
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="space-y-2"] a::after {
    content: "›";
    opacity: .55;
    font-size: 1.15rem;
    line-height: 1;
  }

  html[dir="rtl"] div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="space-y-2"] a::after {
    content: "‹";
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] a[href*="wa.me/"] {
    margin-top: 1rem !important;
    min-height: 58px;
    border-radius: 1rem !important;
    font-size: 1rem !important;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="grid grid-cols-1 gap-2"] {
    display: grid !important;
    gap: .75rem !important;
    margin-top: .25rem;
  }

  div[class*="md:hidden"][class*="fixed top-0"][class*="max-w-sm"][class*="h-screen"] div[class*="grid grid-cols-1 gap-2"] a {
    min-height: 54px;
    border-radius: 1rem !important;
    background: rgba(255,255,255,.84) !important;
    border: 1px solid rgba(18,59,99,.10) !important;
    box-shadow: 0 10px 30px rgba(18,59,99,.04);
  }

  nav .md\:hidden > button:last-child {
    min-height: 44px;
  }
}