@font-face {
  font-family: MotazInterface;
  src: url("/fonts/NotoSansArabic.ttf") format("truetype");
  font-display: swap;
}
body {
  font-family: MotazInterface, Arial, sans-serif !important;
  background: #f5f7fb !important;
  color: #19233a !important;
}
.bar {
  background: #15213a !important;
  box-shadow: none !important;
  border-bottom: 1px solid #253555 !important;
}
.bar b {
  font-family: Arial, sans-serif !important;
}
.bar .logo {
  width: 190px !important;
  height: 64px !important;
  background: #fff !important;
  border: 0 !important;
  padding: 6px !important;
  border-radius: 8px !important;
}
.bar .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.premium-page-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.premium-page-brand img {
  width: 190px;
  height: 64px;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
}
.bar a {
  color: #fff !important;
  font-size: 14px !important;
}
.paper,
.hero,
.card {
  background: #fff !important;
  box-shadow: none !important;
  border-color: #dce1eb !important;
  border-radius: 16px !important;
}
h1,
h2,
h3 {
  font-family: MotazInterface, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}
p,
li {
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.card :is(p, li) {
  font-size: 15px !important;
}
.eyebrow,
.foot a {
  color: #3150d9 !important;
}
.step b,
.save-row b {
  font-size: 15px !important;
}
.step small,
.save-row span {
  font-size: 13px !important;
  line-height: 1.8 !important;
}
.steps .step {
  border-color: #dce1eb !important;
}
.step span {
  background: #3150d9 !important;
}
.cta {
  background: #15213a !important;
}
.cta a {
  background: #3150d9 !important;
  color: #fff !important;
  font-size: 15px !important;
}
.card a,
.paper a {
  color: #3150d9 !important;
}
.notice {
  background: #f1f5ff !important;
  border-inline-start: 4px solid #3150d9 !important;
}
.premium-guide-update {
  margin-block: 24px;
  background: #fff;
  border: 1px solid #dce1eb;
  padding: 24px;
  border-radius: 14px;
}
.premium-guide-update a {
  color: #3150d9;
}
.premium-guide-update h2 {
  margin-top: 0;
}
@media (max-width: 600px) {
  .bar .brand b {
    font-size: 12px !important;
  }
  .bar .logo {
    width: 82px !important;
    height: 34px !important;
  }
  .premium-page-brand img {
    width: 82px;
    height: 34px;
  }
  .bar a {
    font-size: 12px !important;
  }
  .bar nav {
    flex-wrap: wrap;
  }
  .paper {
    padding: 24px 18px !important;
  }
  .hero h1 {
    font-size: 26px !important;
  }
}
