@font-face {
  font-family: "GE SS Light";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/GE-SS-Light.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "GE SS Light";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/GE-SS-Text-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Diodrum";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/Diodrum Light-1.ttf") format("truetype");
  font-display: swap;
}

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

@font-face {
  font-family: "Diodrum";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Diodrum. bold.ttf") format("truetype");
  font-display: swap;
}

html:lang(ar),
body:lang(ar),
[lang="ar"] {
  font-family: "GE SS Light", "Diodrum", "Tahoma", "Arial", sans-serif;
  font-weight: 300;
}

html:lang(en),
body:lang(en),
[lang="en"] {
  font-family:
    "Diodrum",
    system-ui,
    -apple-system,
    "Segoe UI",
    "Inter",
    Arial,
    sans-serif;
  font-weight: 400;
}

/*  hover animation */
.underline-hover-effect {
  position: relative;
  display: inline-block;
  /* Make underline match text width */
  transition: color 0.3s;
  text-decoration: none !important;
}

/* underline effect  */
.underline-hover-effect::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  width: 100%;
  height: 2px;
  /* thick underline */
  background-color: #1f97d3;
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.underline-hover-effect:hover,
.underline-hover-effect:focus {
  color: #1f97d3 !important;
}

.underline-hover-effect:hover::after,
.underline-hover-effect:focus::after,
.underline-hover-effect.underline::after {
  transform: scaleX(1);
}

#header {
  backdrop-filter: saturate(150%) blur(8px);
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

#header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.12)
  );
  pointer-events: none;
}

#header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Mobile */
@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sheet-enter {
  animation: sheetIn 0.22s ease-out forwards;
}

#header .site-logo {
  height: clamp(64px, 8vw, 90px) !important;
  width: auto !important;
  /* preserve aspect ratio */
  max-height: none !important;
}