@font-face {
  font-family: "Golden Hopes";
  src: url("../../../fonts/ScriptFont/GoldenHopes.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --portal-navy: #09273b;
  --portal-navy-deep: #041722;
  --portal-blue: #60c8d5;
  --portal-blue-deep: #399fad;
  --portal-orange: #e96123;
  --portal-cream: #fffaf0;
  --portal-gold: #fbb03b;
  --portal-ink: #15252f;
  --portal-muted: #66747c;
  --portal-line: rgba(9, 39, 59, .13);
  --portal-surface: #ffffff;
  --portal-soft-blue: #edf9fa;
  --portal-soft-orange: #fff0e7;
  --portal-soft-gold: #fff6db;
  --portal-success: #28745b;
  --portal-warning: #81520a;
  --portal-danger: #97443e;
  --portal-radius-sm: 15px;
  --portal-radius: 24px;
  --portal-radius-lg: 34px;
  --portal-shadow-sm: 0 12px 35px rgba(9, 39, 59, .08);
  --portal-shadow: 0 24px 70px rgba(9, 39, 59, .14);
  --portal-focus: 0 0 0 4px rgba(96, 200, 213, .26);
  --portal-content: 1220px;
  --portal-script: "Golden Hopes", cursive;
}

html { overflow-x: hidden; }

body.shabq-portal {
  min-width: 0;
  overflow-x: hidden;
  color: var(--portal-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(251, 176, 59, .14), transparent 25rem),
    radial-gradient(circle at 94% 42%, rgba(96, 200, 213, .13), transparent 28rem),
    linear-gradient(180deg, var(--portal-cream) 0, #f8fbfa 34rem, #eef5f4 100%);
  font-family: "Poppins", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.shabq-portal *,
body.shabq-portal *::before,
body.shabq-portal *::after { box-sizing: border-box; }

body.shabq-portal img,
body.shabq-portal svg { max-width: 100%; }

body.shabq-portal a,
body.shabq-portal button,
body.shabq-portal input,
body.shabq-portal select,
body.shabq-portal textarea { min-width: 0; }

body.shabq-portal :focus-visible {
  outline: none;
  box-shadow: var(--portal-focus);
}

body.shabq-portal .eyebrow {
  color: var(--portal-orange);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .15em;
}
