/* Teaser page shell. Loaded after the site stylesheet so the teaser
   fonts, blue page, and hidden site header win. */

html.gt-doc,
body.gt-page {
  max-width: 100%;
  overflow-x: hidden !important;
}

body.gt-page {
  margin: 0 !important;
  background: #1e1466 !important;
  color: #fff;
}

/* "QF" is a webfont. Using it before the file arrives draws the letters as
   boxes, so the page stays on a font that is already installed until then. */
body.gt-page .gt-teaser,
body.gt-page .gt-teaser *:not(i.fa):not(i.fas):not(.fab),
body.gt-page .ec-header,
body.gt-page .ec-header *:not(i.fa):not(i.fas):not(.fab),
body.gt-page .al-ghorrah-footer,
body.gt-page .al-ghorrah-footer *:not(i.fa):not(i.fas):not(.fab),
body.gt-page .site-header-mount,
body.gt-page .site-header-mount *:not(i.fa):not(i.fas):not(.fab) {
  font-family: "QF Arabic", "Geeza Pro", "SF Arabic", Tahoma, sans-serif !important;
}

html.gt-fonts body.gt-page .gt-teaser,
html.gt-fonts body.gt-page .gt-teaser *:not(i.fa):not(i.fas):not(.fab),
html.gt-fonts body.gt-page .ec-header,
html.gt-fonts body.gt-page .ec-header *:not(i.fa):not(i.fas):not(.fab) {
  font-family: "QF", "QF Arabic", "Geeza Pro", "SF Arabic", Tahoma, sans-serif !important;
}

html.gt-fonts body.gt-page .al-ghorrah-footer,
html.gt-fonts body.gt-page .al-ghorrah-footer *:not(i.fa):not(i.fas):not(.fab),
html.gt-fonts body.gt-page .site-header-mount,
html.gt-fonts body.gt-page .site-header-mount *:not(i.fa):not(i.fas):not(.fab) {
  font-family: "qffont", "QF Arabic", "Geeza Pro", "SF Arabic", Tahoma, sans-serif !important;
}

.gt-teaser img {
  max-width: none;
}

.ec-header {
  z-index: 50;
}

@media (min-width: 1024px) {
  .ec-nav {
    align-items: center;
  }

  .ec-drop {
    position: relative;
  }

  .ec-drop__toggle,
  .ec-nav > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font: inherit;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 8px 0;
    cursor: pointer;
  }

  .ec-drop__toggle::after,
  .ec-nav > a::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 2px;
    width: 50%;
    height: 3px;
    background-color: #f9a22b;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .ec-drop:hover .ec-drop__toggle::after,
  .ec-drop:focus-within .ec-drop__toggle::after,
  .ec-nav > a:hover::after,
  .ec-nav > a:focus-visible::after {
    width: 100%;
    opacity: 1;
  }

  .ec-drop__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 245px;
    max-width: 260px;
    padding: 0;
    border: 1px solid #d2d6df;
    border-radius: 6px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top center;
    transition: opacity 0.5s ease, visibility 0.4s ease, transform 0.5s ease;
    z-index: 60;
  }

  .ec-drop__menu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -12px;
    height: 12px;
  }

  .ec-drop:hover .ec-drop__menu,
  .ec-drop:focus-within .ec-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }

  .ec-drop__menu a {
    padding: 10px 25px;
    color: #111f48;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
  }

  .ec-drop__menu a::after {
    content: none;
  }

  .ec-drop__menu a:hover {
    background: #f9f9f9;
    opacity: 1;
  }
}

.ec-menu__toggle {
  border: 0;
  background: transparent;
  color: inherit;
}

/* The site header stays in the page so its burger menu, login modal, and
   scripts are the live ones. Only the menu panel is shown, and only after
   the teaser burger is opened. */
body.gt-page .site-header-mount .header {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.gt-page .site-header-mount .headerNew {
  background: transparent !important;
}

/* The hidden site header is 0 wide; its container gutters would stick out past
   the page edge in Arabic and add a horizontal scroll. */
body.gt-page .site-header-mount .container-lg,
body.gt-page .site-header-mount .navbar {
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.gt-page .site-header-mount .navbar > :not(#headerNav),
body.gt-page .site-header-mount .navbar-toggler {
  display: none !important;
}

@media (min-width: 1024px) {
  body.gt-page #headerNav {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  body.gt-page #headerNav.collapse:not(.show) {
    display: none !important;
  }

  body.gt-page #headerNav.collapse.show {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: auto;
    padding-top: 100px;
    background: #021d49 url("../../../images/menu-bg.png") no-repeat right top 80px;
  }

  body.gt-page .headerNew .header-nav .navbar-nav .nav-item .dropdown-menu {
    display: none;
    visibility: visible;
    opacity: 1;
    min-width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
  }
}

body.gt-page .al-ghorrah-footer {
  background: #1e1466;
  color: #fff;
}

body.gt-page .gt-footer-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
}

body.gt-page .al-ghorrah-footer p,
body.gt-page .al-ghorrah-footer li,
body.gt-page .al-ghorrah-footer a {
  color: #fff;
}

body.gt-page .ec-header .profile-drop {
  position: relative;
}

body.gt-page .ec-header .profile-pic {
  width: 40px;
  height: 40px;
  margin: 0;
}

body.gt-page .ec-header .profile-pic img {
  width: 40px;
  height: 40px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

/* Same as the site layout: reCAPTCHA v3 still runs for login, the badge stays hidden. */
body.gt-page .grecaptcha-badge {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.gt-page .grecaptcha-badge iframe {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}