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

.og-wordmark {
    --og-blue: var(--ogs-primary, #9F0B56);
    --og-gold: var(--ogs-accent, #087F83);
    --og-en: #5f6d73;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.og-logo-image {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Header branding stays transparent on desktop and mobile. The uploaded
   regular logo is shown as-is, without a colored tile or shadow behind it. */
.ogs-header .ogs-logo,
.ogs-header .ogs-menu-mobile-head > a {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ogs-header .ogs-logo .og-logo-image,
.ogs-header .ogs-menu-mobile-head .og-logo-image {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.og-logo-image--xs { max-height: 30px; }
.og-logo-image--sm { max-height: 40px; }
.og-logo-image--md { max-height: 54px; }
.og-logo-image--lg { max-height: 68px; }
.og-logo-image--xl { max-height: 86px; }

.og-wordmark__ar {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .20em;
    direction: rtl;
    unicode-bidi: isolate;
    font-family: "Orphan Noor", "Noor", Tahoma, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.og-wordmark__blue { color: var(--og-blue); }
.og-wordmark__gold { color: var(--og-gold); }

.og-wordmark__en {
    display: block;
    margin-top: 7px;
    padding-inline-start: .18em;
    color: var(--og-en);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.og-wordmark--dark {
    --og-blue: #fff;
    --og-en: rgba(255,255,255,.78);
}

.og-wordmark--admin {
    --og-blue: var(--ogs-primary, #9F0B56);
    --og-en: #5f6d73;
}

.og-wordmark--xs .og-wordmark__ar { font-size: 16px; }
.og-wordmark--xs .og-wordmark__en { font-size: 5px; margin-top: 4px; }

.og-wordmark--sm .og-wordmark__ar { font-size: 19px; }
.og-wordmark--sm .og-wordmark__en { font-size: 6px; margin-top: 5px; }

.og-wordmark--md .og-wordmark__ar { font-size: 26px; }
.og-wordmark--md .og-wordmark__en { font-size: 7px; }

.og-wordmark--lg .og-wordmark__ar { font-size: 32px; }
.og-wordmark--lg .og-wordmark__en { font-size: 8px; margin-top: 8px; }

.og-wordmark--xl .og-wordmark__ar { font-size: 40px; }
.og-wordmark--xl .og-wordmark__en { font-size: 10px; margin-top: 9px; }

.ogs-logo .og-wordmark,
.ogs-menu-mobile-head .og-wordmark,
.login-brand-link .og-wordmark,
.oa-logo .og-wordmark {
    align-items: center;
}

.ogs-footer__logo .og-wordmark {
    align-items: flex-end;
    text-align: right;
}

.ogs-footer__logo .og-logo-image { max-width: 190px; }
.page-logo .og-logo-image { max-width: 180px; }
.oa-logo .og-logo-image { max-width: 100%; }

.page-logo .og-wordmark {
    height: 46px;
    align-items: center;
}

@media (max-width: 767.98px) {
    .ogs-logo .og-wordmark,
    .ogs-menu-mobile-head .og-wordmark {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .ogs-logo .og-wordmark__ar {
        font-size: 25px;
    }

    .ogs-logo .og-wordmark__en {
        font-size: 6px;
        margin-top: 6px;
    }

    .ogs-menu-mobile-head .og-wordmark__ar {
        font-size: 27px;
    }

    .ogs-menu-mobile-head .og-wordmark__en {
        font-size: 7px;
        margin-top: 7px;
    }

    .ogs-footer__logo .og-wordmark {
        align-items: center;
        text-align: center;
    }
}