:root {
    --spacing-xs: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --radius-sm: 6px;
    --radius-full: 9999px;
    --colors-base-white: #fff;
    --colors-base-black: #000;
    --colors-brand-400: #54c08a;
    --colors-brand-600: #1b8354;
    --colors-brand-700: #166a45;
    --colors-brand-800: #14573a;
    --colors-brand-900: #104631;
    --colors-gray-neutral-100: #f3f4f6;
    --colors-gray-neutral-200: #e5e7eb;
    --colors-gray-neutral-400: #dee2e6;
    --colors-gray-neutral-700: #384250;
    --colors-gray-neutral-950: #161616;
    --colors-error-700: #b42318;
}

/* Base */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "IBM Plex Sans", sans-serif !important;
    color: #161616 !important;
    margin: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html[dir="rtl"] body {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
}

html[dir="ltr"] body {
    direction: ltr !important;
    text-align: left !important;
}

html[dir="rtl"] .header-menu__item-label {
    font-family: "IBM Plex Sans", sans-serif !important;
}

html[dir="ltr"] .header-menu__item-label {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

html[dir="rtl"] .input__feedback-icon--error:before {
    top: 1px;
    display: inline-block;
    content: "";
    height: 16px !important;
    min-width: 16px !important;
    width: 16px !important;
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.05998 5.99998C6.21672 5.55442 6.52608 5.17872 6.93328 4.9394C7.34048 4.70009 7.81924 4.61261 8.28476 4.69245C8.75028 4.7723 9.17252 5.01433 9.4767 5.37567C9.78087 5.737 9.94735 6.19433 9.94665 6.66665C9.94665 7.99998 7.94665 8.66665 7.94665 8.66665M7.99998 11.3333H8.00665M14.6666 7.99998C14.6666 11.6819 11.6819 14.6666 7.99998 14.6666C4.31808 14.6666 1.33331 11.6819 1.33331 7.99998C1.33331 4.31808 4.31808 1.33331 7.99998 1.33331C11.6819 1.33331 14.6666 4.31808 14.6666 7.99998Z" stroke="%23B42318" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    left: 0;
    right: auto;
    margin-left: 3px;
}

html[dir="ltr"] .input__feedback-icon--error:before {
    top: 1px;
    right: 0;
    display: inline-block;
    content: "";
    height: 16px !important;
    min-width: 16px !important;
    width: 16px !important;
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.05998 5.99998C6.21672 5.55442 6.52608 5.17872 6.93328 4.9394C7.34048 4.70009 7.81924 4.61261 8.28476 4.69245C8.75028 4.7723 9.17252 5.01433 9.4767 5.37567C9.78087 5.737 9.94735 6.19433 9.94665 6.66665C9.94665 7.99998 7.94665 8.66665 7.94665 8.66665M7.99998 11.3333H8.00665M14.6666 7.99998C14.6666 11.6819 11.6819 14.6666 7.99998 14.6666C4.31808 14.6666 1.33331 11.6819 1.33331 7.99998C1.33331 4.31808 4.31808 1.33331 7.99998 1.33331C11.6819 1.33331 14.6666 4.31808 14.6666 7.99998Z" stroke="%23B42318" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 8px;
    left: 0;
    right: auto;
    margin-right: 3px;
    margin-left: 0px;
}

/* Font Helpers */
.Arabic,
html[dir="rtl"] label,
html[dir="rtl"] .form-control,
html[dir="rtl"] .custom-select,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn--secondary,
html[dir="rtl"] .navbar,
html[dir="rtl"] footer,
html[dir="rtl"] .input__field,
html[dir="rtl"] .digitalStamp-title,
html[dir="rtl"] .digitalStamp-BTN,
html[dir="rtl"] .digitalStamp-text p,
html[dir="rtl"] .digitalStamp-text p:first-child,
html[dir="ltr"] .digitalStamp-moreText p,
html[dir="ltr"] .digitalStamp-text p:first-child,
html[dir="ltr"] #today-date,
html[dir="ltr"] #today-time,
html[dir="ltr"] .footer-title,
html[dir="ltr"] .footer-column ul li,
html[dir="ltr"] .LegalCaption-col nav a,
html[dir="ltr"] .copyright-temp,
html[dir="ltr"] .footer-lastModifiedDate {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
}
/* Red side line */
html[dir="rtl"] .alert-danger::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background-color: #d92d20;
}


.English,
html[dir="ltr"] label,
html[dir="ltr"] .form-control,
html[dir="ltr"] .custom-select,
html[dir="ltr"] .btn-primary,
html[dir="ltr"] .btn--secondary,
html[dir="ltr"] .navbar,
html[dir="ltr"] footer,
html[dir="ltr"] .input__field,
html[dir="ltr"] .digitalStamp-title,
html[dir="ltr"] .digitalStamp-BTN,
html[dir="ltr"] .digitalStamp-text p,
html[dir="ltr"] .digitalStamp-text p:first-child,
html[dir="ltr"] .digitalStamp-moreText p,
html[dir="ltr"] .digitalStamp-text p:first-child,
html[dir="ltr"] #today-date,
html[dir="ltr"] #today-time,
html[dir="ltr"] .footer-title,
html[dir="ltr"] .footer-column ul li,
html[dir="ltr"] .LegalCaption-col nav a,
html[dir="ltr"] .copyright-temp,
html[dir="ltr"] .footer-lastModifiedDate {
    font-family: "IBM Plex Sans", sans-serif !important;
}

html[dir="ltr"] .alert-danger::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background-color: #d92d20;
}
/* Layout Helpers */
.container {
    /*width: 100%;*/
    margin-inline: auto;
    padding-inline: 1rem;
}


@media (min-width: 640px) {
    .container {
        /* max-width: 640px;*/
        padding-inline: 2rem;
    }
}

@media (max-width: 440px) {
    .display-md-semibold {
        margin:0px !important
    }
}

@media (min-width: 768px) {
    .container {
        /* max-width: 768px;*/
    }
}

@media (min-width: 1024px) {
    .container {
        /*   max-width: 1024px;*/
        padding-inline: 4rem;
    }
}

@media (min-width: 1280px) {
    .container {
        /*       max-width: 1280px;*/
        padding-inline: 5rem;
    }
}

@media (min-width: 1440px) {
    .container {
        /*   max-width: 1440px;*/
        padding-inline: 6rem;
    }
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex {
    display: flex;
}

.hidden {
    display: none !important;
}

.mx-auto {
    margin-inline: auto;
}

.my-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.my-32 {
    margin-top: 32px;
    margin-bottom: 32px;
}

.my-120 {
    margin-top: 120px;
}

.max-w-400,
.max-w-\[400px\] {
    max-width: 400px;
}

.text-center {
    text-align: center !important;
}

/* Typography */
.text-md-regular {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.display-md-semibold {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    color: #000;
}

.display-lg-semibold {
    font-size: 52px;
    line-height: 60px;
    font-weight: 700;
    color: #000;
}

.bd-title,
h3 {
    font-weight: 700 !important;
    font-size: 30px !important;
    line-height: 32px;
    color: #1b8354;
}

.font-m {
    font-size: 18px !important;
    color: #1b8354;
}

/* General Spacing */
.content {
    margin-top: 32px;
}

.formList {
    margin-top: 18px;
}

.UpldFile,
.magint {
    margin-top: 32px;
}

form {
    margin-top: 18px;
}

/* Main */
main:not(.auth-main) {
    padding: 16px;
    background: white;
    border-radius: 10px 16px;
}

.auth-main {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

main,
.auth-container {
    flex: 1;
}

body.auth-container {
    margin-bottom: 0;
    min-height: 100vh;
}

/* Header */

.header-nav--full {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    border-bottom: 1px solid #d2d6db;
    gap: 16px;
}

    /*    .header-nav--full img {
       width: 155px;
       margin-top: 5px;
    }*/

    .header-nav--full ul {
        list-style: none;
        padding: 0;
        margin: 3px;
        display: flex;
    }

/* ===============================
  Header Menu Item
================================ */
.header-menu__item {
    position: relative;
    display: inline-flex;
    height: 72px;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background-color: transparent;
    border-radius: 4px;
    outline: none;
    text-decoration: none;
    color: #161616 !important;
}

/* Text & Icons */
.header-menu__item-icon,
.header-menu__item-arrow {
    color: #333741;
    font-weight: 500;
    color: #333741;
}

.header-menu__item-label{
    font-size:16px;
    font-weight:600;

}


.header-menu__item-arrow {
    display: flex;
    align-items: center;
}

/* ===============================
  Hover
================================ */
.header-menu__item:hover {
    background: #f3f4f6;
}

    .header-menu__item:hover::after {
        content: "";
        position: absolute;
        display: block;
        width: calc(100% - 16px);
        height: 8px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 9999px;
        background-color: #9da4ae;
    }

/* ===============================
  Active Click
================================ */
.header-menu__item:active {
    background-color: #e5e7eb !important;
}

    .header-menu__item:active::after {
        background-color: #61646c !important;
    }

/* ===============================
  Focus
================================ */
.header-menu__item:focus {
    outline: #161616 solid 2px !important;
    outline-offset: 1px;
    border-radius: 4px;
    z-index: 99;
    box-shadow: none;
}

/* ===============================
  Selected Active Menu
================================ */
.header-menu__item--active,
.header-menu__item--active:hover,
.header-menu__item--active:focus,
.header-menu__item--active:active {
    position: relative;
    background: #14573a;
    outline: none;
}

    .header-menu__item--active::after,
    .header-menu__item--active:hover::after,
    .header-menu__item--active:focus::after,
    .header-menu__item--active:active::after {
        content: "";
        position: absolute;
        display: block;
        width: calc(100% - 16px);
        height: 8px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 9999px;
        background-color: #54c08a;
    }

    .header-menu__item--active:focus {
        outline: 2px solid black;
    }

    /* Active Text Color */
    .header-menu__item--active .header-menu__item-label,
    .header-menu__item--active .header-menu__item-icon,
    .header-menu__item--active .header-menu__item-arrow {
        color: white;
    }

html[dir="rtl"] .header-nav--full {
    flex-direction: row;
}

html[dir="ltr"] .header-nav--full {
    flex-direction: row;
}

/* Navbar */
.navbar {
    position: relative;
    padding: 0 32px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
}

body.dark-mode .header-menu__item-arrow svg path,
body.dark-mode .header-menu__item-arrow svg {
    fill: #fff !important;
}

/* Labels */
label {
    font-style: normal;
}

html[dir="rtl"] label {
    text-align: right;
}

html[dir="ltr"] label {
    text-align: left;
}

/* Inputs */
.form-control:focus {
    border-bottom: solid 2px #161616;
    border-color: #384250;
    transition: transform .9s ease-in-out;
    transform: scaleX(1);
    box-shadow: none;
}

.form-control:hover {
    border-color: #384250;
}

.input {
    width: 100%;
}

.input--lg {
    margin-top: 6px;
}

.input__field {
    width: 100%;
    height: 40px;
    border: 1px solid var(--colors-gray-neutral-400);
    border-radius: 4px;
    padding-inline: 12px;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
}

    .input__field:hover {
        border: 1px solid #384250;
    }


    .input__field:focus {
        border-color: var(--colors-gray-neutral-700);
        /* border-bottom: 2px solid var(--colors-gray-neutral-950);*/
        outline: none;
        box-shadow: none;
    }

.input {
    position: relative;
}


    .input:after {
        background-color: var(--colors-gray-neutral-950);
        bottom: 1px;
        content: "";
        height: 2px !important;
        left: 50%;
        position: absolute;
        transform: translate(-50%);
        transition: width .5s ease-in-out !important;
        width: 0;
    }

    .input:focus-within::after {
        background-color: var(--colors-gray-neutral-950);
        width: 100% !important;
    }

    .input.input-error::after {
        width: 100% !important;
        background-color: #B42318 !important;
    }

    .input.input-error:focus-within::after {
        width: 100% !important;
        background-color: #B42318 !important;
    }


.input__feedback-icon--error {
    color: var(--colors-error-700);
    font-size: 14px;
}

.input__field.input-error {
    border: 1px solid #B42318 !important;
}

    .input__field.input-error:focus {
        border-color: #B42318 !important;
        outline: none !important;
    }



/* Custom Select */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #161b26;
    vertical-align: middle;
    border: 1px solid #9da4ae;
    border-radius: 0.25rem;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="currentColor"><path d="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>');
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

html[dir="ltr"] .custom-select {
    background-position: right .75rem center;
}

html[dir="rtl"] .custom-select {
    background-position: left .75rem center;
}

.custom-select:hover,
.custom-select:focus {
    border-color: #384250;
    box-shadow: none;
}

/* Buttons */
.btn,
.btn-primary,
.btn--secondary {
    appearance: none;
    border-radius: 6px !important;
    margin: 4px !important;
    cursor: pointer !important;
    border: 0 !important;
    outline: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: 40px;
    padding-inline: 16px;
    font-weight: 500 !important;
}

.btn--lg {
    height: 40px;
    padding-inline: var(--spacing-xl);
}

.btn-primary,
.btn--primary-brand {
    background-color: var(--colors-brand-600) !important;
    color: var(--colors-base-white) !important;
    font-size: 16px;
}

    .btn-primary:focus,
    .btn--primary-brand:focus {
        background: var(--colors-brand-600) !important;
        outline: 2px solid var(--colors-base-black);
        box-shadow: none !important;
        border: 1px solid #fff !important;
    }

    .btn-primary:hover,
    .btn--primary-brand:hover {
        background: var(--colors-brand-700) !important;
    }

    .btn-primary:active,
    .btn--primary-brand:active {
        background-color: var(--colors-brand-900) !important;
    }



.btn--secondary {
    background-color: var(--colors-gray-neutral-100) !important;
    color: #161b26 !important;
}

    .btn--secondary:hover {
        background: var(--colors-gray-neutral-200) !important;
    }

    .btn--secondary:focus {
        background: var(--colors-gray-neutral-100) !important;
        outline: 2px solid var(--colors-base-black);
        box-shadow: none !important;
    }

/* Captcha */
.captchaInput {
    position: relative;
    width: 100%;
}

#refresh_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    cursor: pointer;
}

html[dir="ltr"] #refresh_btn {
    right: 10px;
}

html[dir="rtl"] #refresh_btn {
    left: 10px;
}

/* Notifications */
.notification-toast {
    box-shadow: 0 32px 64px -12px rgba(16, 24, 40, .14);
    display: flex;
    width: 38% !important;
    margin: auto !important;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

    .notification-toast::after {
        content: "";
        display: block;
        height: 100%;
        width: 8px;
        top: 0;
        position: absolute;
    }

html[dir="ltr"] .notification-toast::after {
    left: 0;
}

html[dir="rtl"] .notification-toast::after {
    right: 0;
}

.notification-toast--info::after {
    background-color: #54c08a;
}

.notification-toast--danger::after {
    background-color: #D92D20 !important;
}

.notification-toast__close-btn {
    position: absolute;
    top: 16px;
}

html[dir="ltr"] .notification-toast__close-btn {
    right: 24px;
}

html[dir="rtl"] .notification-toast__close-btn {
    left: 24px;
}

/* Spinner */
.spinner {
    display: inline-flex;
}

.spinner__circle {
    width: 32px;
    height: 32px;
    border: 3px solid var(--colors-gray-neutral-200);
    border-top-color: var(--colors-brand-600);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

.spinner--md .spinner__circle {
    width: 32px;
    height: 32px;
}

.spinner--brand .spinner__circle {
    border-top-color: var(--colors-brand-600);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.max-w-900 {
    max-width: 900px;
}

.py-64 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-32 {
    gap: 32px;
}

.gap-40 {
    gap: 40px;
}

.flex-col {
    flex-direction: column;
}

.text-gray-neutral-700 {
    color: #384250;
}

.display-sm-semibold {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
}

.text-lg-regular {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.my-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.btn--primary-neutral {
    background-color: #161616 !important;
    color: #fff !important;
}

    .btn--primary-neutral:hover {
        background-color: #1f2a37 !important;
    }

.error-svg {
    display: flex;
    justify-content: center;
}

html[dir="rtl"] .error-svg svg,
html[dir="ltr"] .error-svg svg {
    margin-inline: auto;
}


/*Logo Style*/


.header-logo {
    display: flex;
    align-items: center;
    min-width: 213px;
}

    .header-logo a {
        display: flex;
        gap: 8px;
        text-decoration: none;
        height: 58px;
        align-items: center;
        color: #161616;
        font-size: 16px;
        line-height: 24px;
    }

.NghaLogo {
    height: 48px;
}

.NghaLogo {
    height: 48px;
}



.logo-title {
    display: flex;
    color: #161616;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    width: 200px;
    font-weight: 500;
}

@media only screen and (max-width: 1068px) {

    .logo-title {
        display: flex;
        color: #161616;
        font-size: 12px;
        line-height: 20px;
        align-items: center;
        width: 165px;
        font-weight: 700;
    }
}

div#navbarSupportedContent {
    background: #ffffff;
}

.bg-light {
    background-color: #ffffff !important;
}
/* Alert Base */
.alert {
    width: min(100%, 640px);
    margin: 80px auto 0; /* ينزل التنبيه */
    padding: 16px 24px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    background: #fffbfa;
    border: 1px solid #fecdca;
    border-radius: 8px;
    color: #b42318;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .alert {
        margin-top: 40px;
        padding: 12px 16px;
        gap: 8px;
    }

        .alert.alert-icon::before {
            width: 32px;
            height: 32px;
            min-width: 32px;
        }

    .alert-title {
        font-size: 14px;
    }

    .alert-message {
        font-size: 13px;
        line-height: 1.5;
    }
}

/* Content */
.alert-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-title {
    font-size: 16px;
    font-weight: 700;
    color: #b42318;
}

.alert-message {
    font-size: 14px;
    color: #384250;
}

/* Icon */
.alert.alert-icon::before {
    content: "";
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z' fill='%23FEF3F2'/%3E%3Cpath d='M19.9998 16.4583C19.4245 16.4583 18.9582 16.9247 18.9582 17.5C18.9582 17.8451 18.6783 18.125 18.3332 18.125C17.988 18.125 17.7082 17.8451 17.7082 17.5C17.7082 16.2343 18.7342 15.2083 19.9998 15.2083C21.2655 15.2083 22.2915 16.2343 22.2915 17.5C22.2915 17.9552 22.1581 18.3813 21.928 18.7388C21.7839 18.9628 21.6154 19.1766 21.4601 19.3697L21.3763 19.4735C21.2474 19.633 21.1291 19.7795 21.0197 19.9298C20.7501 20.3004 20.6248 20.5789 20.6248 20.8333V21.25C20.6248 21.5951 20.345 21.875 19.9998 21.875C19.6547 21.875 19.3748 21.5951 19.3748 21.25V20.8333C19.3748 20.1672 19.7018 19.6164 20.009 19.1943C20.1387 19.016 20.2809 18.8401 20.4102 18.6802L20.4862 18.586C20.6405 18.3942 20.7719 18.2255 20.8768 18.0624C20.981 17.9005 21.0415 17.7083 21.0415 17.5C21.0415 16.9247 20.5751 16.4583 19.9998 16.4583Z' fill='%23B42318'/%3E%3Cpath d='M19.9933 23.3333C19.5331 23.3333 19.16 23.7064 19.16 24.1666C19.16 24.6269 19.5331 25 19.9933 25H20.0008C20.461 25 20.8341 24.6269 20.8341 24.1666C20.8341 23.7064 20.461 23.3333 20.0008 23.3333H19.9933Z' fill='%23B42318'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0415 20C11.0415 15.0524 15.0523 11.0416 19.9998 11.0416C24.9474 11.0416 28.9582 15.0524 28.9582 20C28.9582 24.9475 24.9474 28.9583 19.9998 28.9583C15.0523 28.9583 11.0415 24.9475 11.0415 20ZM19.9998 12.2916C15.7426 12.2916 12.2915 15.7428 12.2915 20C12.2915 24.2572 15.7426 27.7083 19.9998 27.7083C24.257 27.7083 27.7082 24.2572 27.7082 20C27.7082 15.7428 24.257 12.2916 19.9998 12.2916Z' fill='%23B42318'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =========================
  Digital Stamp
========================= */
.digitalStamp {
    background-color: #F3F4F6;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.digitalStamp-header,
.digitalStamp-textFlag {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 8px;
}

figure.digitalStamp-ksaFlag {
    padding: 0;
    margin: 0;
    height: 14px;
    display: flex;
    align-items: center;
}

.digitalStamp-title {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    color: #161616;
    font-weight:500;
}
/* Button */
.digitalStamp-BTN {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1B8354;
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

    .digitalStamp-BTN::after {
        content: "";
        width: 16px;
        height: 16px;
        min-width: 16px;
        background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.40248 5.70352C4.48374 5.81111 4.72634 6.13227 4.87083 6.31741C5.16021 6.68822 5.55561 7.18094 5.98215 7.67221C6.41085 8.16595 6.86119 8.64681 7.26126 9.00031C7.46187 9.17756 7.63809 9.31225 7.78351 9.39992C7.92028 9.48237 8.00107 9.49951 8.00107 9.49951C8.00107 9.49951 8.07949 9.48236 8.21625 9.39992C8.36167 9.31225 8.53789 9.17757 8.7385 9.00031C9.13858 8.64682 9.58892 8.16595 10.0176 7.6722C10.4441 7.18093 10.8396 6.6882 11.1289 6.31739C11.2734 6.13224 11.5157 5.81154 11.5969 5.70395C11.7607 5.4816 12.074 5.43365 12.2964 5.5974C12.5187 5.76116 12.5662 6.07415 12.4025 6.2965L12.4013 6.29806C12.3162 6.41077 12.0648 6.74363 11.9173 6.93261C11.6214 7.3118 11.2144 7.81907 10.7727 8.32781C10.3332 8.83406 9.84938 9.35319 9.40064 9.74969C9.17684 9.94744 8.94998 10.1253 8.73253 10.2563C8.52882 10.3791 8.27089 10.5 7.99988 10.5C7.72887 10.5 7.47095 10.3791 7.26723 10.2563C7.04979 10.1252 6.82293 9.94744 6.59913 9.74969C6.15038 9.35319 5.6666 8.83406 5.22705 8.32782C4.78535 7.81909 4.3784 7.31182 4.08248 6.93264C3.93494 6.74359 3.68363 6.41086 3.5986 6.29828L3.59752 6.29686C3.43376 6.07451 3.48103 5.76119 3.70337 5.59743C3.92571 5.43368 4.23872 5.48119 4.40248 5.70352Z" fill="%231b8354"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
    }

.digitalStamp.show .digitalStamp-BTN::after {
    transform: rotate(180deg);
}
/* Collapse Content */
.digitalStamp.show .digitalStamp-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.digitalStamp-contentContainer {
    display: flex;
    gap: 20px;
}

.digitalStamp-item {
    display: flex;
    gap: 24px;
    width: 100%;
}
    /* Icons */
    .digitalStamp-item .digitalStamp-icon {
        display: flex;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        background-color: #079455;
        border-radius: 4px;
    }
/* Text */
.digitalStamp-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .digitalStamp-text p {
        margin: 0;
        padding: 0;
        color: #161616;
        font-size: 16px;
        line-height: 24px;
    }

        .digitalStamp-text p:first-child {
            font-weight: 500;
            font-size: 18px;
            line-height: 28px;
        }

            .digitalStamp-text p:first-child span {
                color: #1B8354;
            }

.digitalStamp-BTN:hover {
    color: #54c08a;
}

.digitalStamp-BTN:active {
    color: #88d8ad;
}

.digitalStamp-BTN:focus, .digitalStamp-moreText a:focus {
    outline: 2px solid #161616 !important;
}
/* More Info */
.digitalStamp-moreInfo {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 24px;
    border-radius: 8px;
    background-color: #FFFFFF;
    margin-bottom: 32px;
}

.digitalStamp-moreText {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
}

    .digitalStamp-moreText p {
        margin: 0;
        color: #161616;
    }

    .digitalStamp-moreText a {
        color: #1B8354;
        text-decoration: underline;
    }

        .digitalStamp-moreText a:hover {
            color: #54C08A;
        }
/* =========================
  Responsive
========================= */
@media only screen and (max-width: 1068px) {
    .digitalStamp {
        padding: 0 16px;
    }

    .digitalStamp-contentContainer {
        gap: 16px;
    }

    .digitalStamp-moreText,
    .digitalStamp-text p {
        font-size: 14px;
        line-height: 20px;
    }

        .digitalStamp-text p:first-child {
            font-size: 16px;
            line-height: 24px;
        }
}

@media only screen and (max-width: 768px) {
    .digitalStamp-header {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
    }

    .digitalStamp-contentContainer {
        flex-direction: column;
    }

    .digitalStamp-item {
        gap: 16px;
    }

    .digitalStamp-moreInfo {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .digitalStamp-moreText {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* =========================
  Second Navbar
========================= */
.secondNavBar {
    background-color: #1B8354;
    padding: 0 32px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #D2D6DB;
    border-bottom: 1px solid #D2D6DB;
}

.secondNavBar-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

#today-date,
#today-time {
    padding: 0;
    margin: 0;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
}

    #today-date::before {
        content: "";
        width: 24px;
        height: 24px;
        min-width: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 1.25C6.41421 1.25 6.75 1.58579 6.75 2V2.36589C7.88606 2.24997 9.28402 2.24998 10.9892 2.25H13.0108C14.716 2.24998 16.1139 2.24997 17.25 2.36589V2C17.25 1.58579 17.5858 1.25 18 1.25C18.4142 1.25 18.75 1.58579 18.75 2V2.63479C19.5548 2.86288 20.2335 3.2336 20.7985 3.84436C21.5764 4.68535 21.9222 5.74792 22.0878 7.07951C22.25 8.38431 22.25 10.0565 22.25 12.1901V12.8099C22.25 14.9435 22.25 16.6157 22.0878 17.9205C21.9222 19.2521 21.5764 20.3147 20.7985 21.1556C20.0129 22.0049 19.0072 22.3901 17.7487 22.573C16.5307 22.75 14.9745 22.75 13.0108 22.75H10.9892C9.02555 22.75 7.46932 22.75 6.25129 22.573C4.99276 22.3901 3.98714 22.0049 3.20154 21.1556C2.42363 20.3147 2.07785 19.2521 1.91225 17.9205C1.74998 16.6157 1.74999 14.9435 1.75 12.81V12.19C1.74999 10.0565 1.74998 8.3843 1.91225 7.07951C2.07785 5.74792 2.42363 4.68535 3.20154 3.84436C3.7665 3.2336 4.44524 2.86288 5.25 2.63479V2C5.25 1.58579 5.58579 1.25 6 1.25ZM6 4.75C5.65717 4.75 5.36806 4.51998 5.2786 4.20584C4.87129 4.36791 4.56203 4.58256 4.30269 4.86292C3.83044 5.37347 3.55052 6.07336 3.40261 7.25H20.5974C20.4495 6.07336 20.1696 5.37347 19.6973 4.86292C19.438 4.58256 19.1287 4.36791 18.7214 4.20585C18.6319 4.51998 18.3428 4.75 18 4.75C17.5858 4.75 17.25 4.41421 17.25 4V3.87459C16.189 3.75156 14.8176 3.75 12.95 3.75H11.05C9.18237 3.75 7.81101 3.75156 6.75 3.87459V4C6.75 4.41421 6.41421 4.75 6 4.75ZM20.7111 8.75H3.28892C3.25055 9.70689 3.25 10.8508 3.25 12.2432V12.7568C3.25 14.9551 3.25137 16.5339 3.40078 17.7354C3.54821 18.9208 3.82849 19.6244 4.30269 20.1371C4.76921 20.6414 5.39728 20.9331 6.46704 21.0886C7.56476 21.2481 9.01188 21.25 11.05 21.25H12.95C14.9881 21.25 16.4352 21.2481 17.533 21.0886C18.6027 20.9331 19.2308 20.6414 19.6973 20.1371C20.1715 19.6244 20.4518 18.9208 20.5992 17.7354C20.7486 16.5339 20.75 14.9551 20.75 12.7568V12.2432C20.75 10.8508 20.7495 9.70689 20.7111 8.75Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #today-time::before {
        content: "";
        width: 24px;
        height: 24px;
        min-width: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12ZM12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM12.75 8C12.75 7.58579 12.4142 7.25 12 7.25C11.5858 7.25 11.25 7.58579 11.25 8V12C11.25 12.1989 11.329 12.3897 11.4697 12.5303L13.4697 14.5303C13.7626 14.8232 14.2374 14.8232 14.5303 14.5303C14.8232 14.2374 14.8232 13.7626 14.5303 13.4697L12.75 11.6893V8Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

.secondNavBar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.actionsBTN {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0;
    border: 2px solid transparent !important;
    border-radius: 4px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .actionsBTN:hover {
        background-color: transparent;
    }

        .actionsBTN:hover svg path {
            fill: #54C08A;
        }

    .actionsBTN:active svg path {
        fill: #88D8AD;
    }

    .actionsBTN:focus,
    .actionsBTN:focus-visible {
        outline: 2px solid #FFFFFF !important;
        outline-offset: 2px;
    }

    .actionsBTN.active svg path {
        fill: #54C08A;
    }

/* =========================
  Theme Classes
========================= */
body.dark-mode {
    background-color: #0D121C;
    color: #FFFFFF;
}

    body.dark-mode .secondNavBar {
        background-color: #0D121C;
        border-color: #384250;
    }

body.color-blind-mode .secondNavBar {
    background-color: #005A70;
}

body.color-blind-mode .actionsBTN.active svg path {
    fill: #FFD166;
}

/* =========================
  Responsive
========================= */
@media only screen and (max-width: 1068px) {
    .secondNavBar {
        padding: 0 16px;
    }
}

@media only screen and (max-width: 576px) {
    .secondNavBar {
        height: auto;
        min-height: 40px;
        padding: 8px 16px;
        gap: 8px;
    }

    .secondNavBar-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    #today-date,
    #today-time {
        font-size: 14px;
        line-height: 20px;
    }
}

/* =========================
  Footer
========================= */
.MNGHA-footer {
    background-color: #074D31;
    padding: 0 32px;
    color: #FFFFFF;
}

.MNGHA-footer {
    margin-top: auto;
}

    .MNGHA-footer .MNGHAcontainer {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .MNGHA-footer .footer-navigation {
        display: flex;
        gap: 24px;
        justify-content: space-between;
        padding-top: 16px;
        padding-bottom: 40px;
    }

.footer-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-title {
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}

.footer-column ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .footer-column ul li {
        list-style: none;
        font-size: 14px;
        line-height: 20px;
    }

        .footer-column ul li a,
        .LegalCaption-col nav a {
            color: #FFFFFF;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            width: fit-content;
        }

            .footer-column ul li a:hover,
            .LegalCaption-col nav a:hover {
                color: rgba(255, 255, 255, 0.80);
            }

            .footer-column ul li a:active,
            .LegalCaption-col nav a:active {
                color: rgba(255, 255, 255, 0.60);
            }

            .footer-column ul li a:visited,
            .LegalCaption-col nav a:visited {
                color: rgba(255, 255, 255, 0.90);
            }

            .footer-column ul li a:focus,
            .footer-column ul li a:focus-visible,
            .LegalCaption-col nav a:focus,
            .LegalCaption-col nav a:focus-visible {
                outline: 2px solid #FFFFFF;
                outline-offset: 2px;
            }

/* External Link Icon */
.linkIco a::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.47461 1.3125C6.71596 1.3125 6.91128 1.50773 6.91211 1.74902C6.91211 1.99052 6.71766 2.18749 6.47559 2.1875C4.38084 2.19158 3.40212 2.25354 2.82812 2.82812C2.18731 3.46926 2.1875 4.64952 2.1875 7C2.1875 9.35082 2.18764 10.5308 2.82812 11.1719C3.46859 11.8123 4.64846 11.8125 6.99902 11.8125C9.34986 11.8125 10.5298 11.8124 11.1709 11.1719C11.7454 10.5973 11.8065 9.61903 11.8105 7.52441C11.8106 7.28302 12.0067 7.08801 12.248 7.08789H12.249C12.4904 7.08789 12.6864 7.284 12.6865 7.52539C12.6824 9.6802 12.6382 10.9407 11.79 11.79C10.8929 12.6872 9.59233 12.6875 7 12.6875C4.40825 12.6875 3.10654 12.6872 2.20996 11.79C1.31282 10.8929 1.3125 9.59231 1.3125 7C1.3125 4.4077 1.3128 3.10654 2.20996 2.20996C3.0581 1.36068 4.31836 1.31659 6.47363 1.3125H6.47461ZM9.34473 1.3457C11.8805 1.30954 12.1538 1.58347 12.3008 1.73047C12.4472 1.87747 12.7198 2.15051 12.6836 4.68848C12.6801 4.92995 12.4829 5.12492 12.2402 5.11914C11.9988 5.11564 11.8052 4.91781 11.8086 4.67578C11.8208 3.8037 11.7942 3.2451 11.7598 2.8916L6.75586 7.92578C6.67012 8.01149 6.55787 8.05469 6.44531 8.05469L6.3623 8.04688C6.27989 8.03096 6.20107 7.99121 6.13672 7.92773C5.96523 7.7574 5.96444 7.48009 6.13477 7.30859L11.1445 2.27051C10.7922 2.23551 10.2329 2.20845 9.35742 2.2207H9.35156C9.11303 2.2207 8.91765 2.02913 8.91406 1.79004C8.91056 1.54865 9.10338 1.34938 9.34473 1.3457Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Social + Accessibility */
.social-links,
.accessibility-tools {
    flex-direction: row !important;
    padding-bottom: 24px;
}

    .social-links li,
    .accessibility-tools li {
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.30);
        border-radius: 4px;
    }

        .social-links li a,
        .accessibility-tools li a {
            width: 32px;
            height: 32px;
            min-width: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            cursor: pointer;
        }

            .social-links li a:hover,
            .accessibility-tools li a:hover {
                background-color: rgba(255, 255, 255, 0.20);
            }

            .social-links li a:active,
            .accessibility-tools li a:active {
                background-color: rgba(255, 255, 255, 0.40);
            }

            .social-links li a:focus,
            .social-links li a:focus-visible,
            .accessibility-tools li a:focus,
            .accessibility-tools li a:focus-visible {
                border: 1px solid #FFFFFF !important;
                outline: 1px solid #FFFFFF !important;
                outline-offset: 0 !important;
            }

/* Legal */
.footer-legal {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.LegalCaption-col {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
}

    .LegalCaption-col nav {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

        .LegalCaption-col nav a {
            font-size: 14px;
            line-height: 20px;
            text-decoration: underline;
        }

.legalInfo-Date {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.copyright-temp {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 20px;
}

.footer-lastModifiedDate {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 20px;
}

.copyright-col {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .copyright-col a {
        display: flex;
    }

/* Hidden Text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================
  Dark Mode
========================= */
body.dark-mode .MNGHA-footer {
    background-color: #0D121C;
}

body.dark-mode .footer-title {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

body.dark-mode .social-links li,
body.dark-mode .accessibility-tools li {
    border-color: rgba(255, 255, 255, 0.25);
}

/* =========================
  Color Blind Mode
========================= */
body.color-blind-mode .MNGHA-footer {
    background-color: #005A70;
}

body.color-blind-mode .social-links li a:hover,
body.color-blind-mode .accessibility-tools li a:hover {
    background-color: rgba(255, 209, 102, 0.20);
}

body.color-blind-mode .accessibility-tools svg path {
    fill: #FFD166;
}

/* =========================
  Responsive
========================= */
@media only screen and (max-width: 1068px) {
    .MNGHA-footer {
        padding: 0 16px;
    }

        .MNGHA-footer .footer-navigation {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

    .social-links,
    .accessibility-tools {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .MNGHA-footer .footer-navigation {
        grid-template-columns: 1fr;
    }

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }

    .copyright-col {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 576px) {
    .MNGHA-footer .MNGHAcontainer {
        gap: 32px;
        padding-top: 32px;
        padding-bottom: 20px;
    }

    .LegalCaption-col nav {
        flex-direction: column;
        gap: 8px;
    }

    .copyright-col {
        gap: 12px;
    }
}

/* =========================================================
   FINAL CLEANUP OVERRIDES
   Approved colors:
   Dark mode: second bar stays #1B8354, footer #1B8354
   Color blind mode: primary #585858, footer #272727
========================================================= */

/* ---------- Font direction fixes ---------- */
html[dir="rtl"] body,
html[dir="rtl"] label,
html[dir="rtl"] .form-control,
html[dir="rtl"] .custom-select,
html[dir="rtl"] .btn,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn--secondary,
html[dir="rtl"] .navbar,
html[dir="rtl"] .input__field,
html[dir="rtl"] .header-menu__item-label,
html[dir="rtl"] .header-menu__item-icon,
html[dir="rtl"] .header-menu__item-arrow,
html[dir="rtl"] .digitalStamp-title,
html[dir="rtl"] .digitalStamp-BTN,
html[dir="rtl"] .digitalStamp-text p,
html[dir="rtl"] .digitalStamp-moreText p,
html[dir="rtl"] #today-date,
html[dir="rtl"] #today-time,
html[dir="rtl"] .MNGHA-footer {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

html[dir="ltr"] body,
html[dir="ltr"] label,
html[dir="ltr"] .form-control,
html[dir="ltr"] .custom-select,
html[dir="ltr"] .btn,
html[dir="ltr"] .btn-primary,
html[dir="ltr"] .btn--secondary,
html[dir="ltr"] .navbar,
html[dir="ltr"] .input__field,
html[dir="ltr"] .header-menu__item-label,
html[dir="ltr"] .header-menu__item-icon,
html[dir="ltr"] .header-menu__item-arrow,
html[dir="ltr"] .digitalStamp-title,
html[dir="ltr"] .digitalStamp-BTN,
html[dir="ltr"] .digitalStamp-text p,
html[dir="ltr"] .digitalStamp-moreText p,
html[dir="ltr"] #today-date,
html[dir="ltr"] #today-time,
html[dir="ltr"] .MNGHA-footer {
    font-family: "IBM Plex Sans", sans-serif !important;
}

.arabic-text {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
    direction: rtl;
    unicode-bidi: isolate;
}

/* ---------- Sticky footer fix ---------- */
html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.auth-main,
.auth-container,
#loginForm {
    flex: 1 0 auto;
}

.MNGHA-footer {
    margin-top: auto;
    position: static !important;
}

body.auth-container > footer:not(.MNGHA-footer),
.auth-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 45px;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #074D31 !important;
    color: #FFFFFF !important;
    text-align: center;
    font-size: clamp(12px, 2vw, 16px);
    z-index: 999;
}

/* ---------- Inputs and validation ---------- */
.input.input-error::after,
.input.input-error:focus-within::after {
    width: 100% !important;
    background-color: #B42318 !important;
}

.input__field.input-error,
.input__field.input-error:focus {
    border-color: #B42318 !important;
    outline: none !important;
    box-shadow: none !important;
}

.input__feedback-icon--error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #B42318 !important;
    font-size: 14px;
}

    .input__feedback-icon--error::before {
        content: "";
        display: inline-block;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        flex-shrink: 0;
        margin: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.05998 5.99998C6.21672 5.55442 6.52608 5.17872 6.93328 4.9394C7.34048 4.70009 7.81924 4.61261 8.28476 4.69245C8.75028 4.7723 9.17252 5.01433 9.4767 5.37567C9.78087 5.737 9.94735 6.19433 9.94665 6.66665C9.94665 7.99998 7.94665 8.66665 7.94665 8.66665M7.99998 11.3333H8.00665M14.6666 7.99998C14.6666 11.6819 11.6819 14.6666 7.99998 14.6666C4.31808 14.6666 1.33331 11.6819 1.33331 7.99998C1.33331 4.31808 4.31808 1.33331 7.99998 1.33331C11.6819 1.33331 14.6666 4.31808 14.6666 7.99998Z' stroke='%23B42318' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }

/* ---------- Digital stamp ---------- */
.digitalStamp-content[hidden] {
    display: none !important;
}

.digitalStamp.show .digitalStamp-content {
    display: flex !important;
}

.digitalStamp-BTN:focus,
.digitalStamp-BTN:focus-visible,
.digitalStamp-moreText a:focus,
.digitalStamp-moreText a:focus-visible {
    outline: 2px solid #161616 !important;
    outline-offset: 2px;
}

/* ---------- Alert ---------- */
.alert {
    background-color: #FFFBFA;
    border-color: #FECDCA;
}

.alert-title {
    color: #B42318 !important;
}

.alert-message {
    color: #384250 !important;
}

html[dir="rtl"] .alert-danger::after {
    right: 0;
    left: auto;
}

html[dir="ltr"] .alert-danger::after {
    left: 0;
    right: auto;
}

/* =========================================================
   DARK MODE
   Approved:
   - Page background: #0D121C
   - Second navbar remains green: #1B8354
   - Footer becomes green: #1B8354
========================================================= */
body.dark-mode {
    background-color: #0D121C !important;
    color: #FFFFFF !important;
}

    body.dark-mode .header-nav--full,
    body.dark-mode .navbar,
    body.dark-mode div#navbarSupportedContent,
    body.dark-mode .bg-light {
        background-color: #0D121C !important;
        border-color: #384250 !important;
    }

    body.dark-mode .logo-title,
    body.dark-mode .header-logo a,
    body.dark-mode .header-menu__item-label,
    body.dark-mode .header-menu__item-icon,
    body.dark-mode .header-menu__item-arrow {
        color: #FFFFFF !important;
    }

    body.dark-mode .header-menu__item:hover {
        background-color: #1F2A37 !important;
    }

        body.dark-mode .header-menu__item:hover::after {
            background-color: #9DA4AE !important;
        }

    body.dark-mode .header-menu__item:active {
        background-color: #384250 !important;
    }

    body.dark-mode .header-menu__item:focus,
    body.dark-mode .header-menu__item:focus-visible {
        outline-color: #FFFFFF !important;
    }

    body.dark-mode .header-menu__item--active,
    body.dark-mode .header-menu__item--active:hover,
    body.dark-mode .header-menu__item--active:focus,
    body.dark-mode .header-menu__item--active:active {
        background-color: #1B8354 !important;
    }

        body.dark-mode .header-menu__item--active::after,
        body.dark-mode .header-menu__item--active:hover::after,
        body.dark-mode .header-menu__item--active:focus::after,
        body.dark-mode .header-menu__item--active:active::after {
            background-color: #54C08A !important;
        }

    /* Second navbar stays green in dark mode */
    body.dark-mode .secondNavBar,
    body.dark-mode nav.secondNavBar {
        background-color: #1B8354 !important;
        border-top-color: #1B8354 !important;
        border-bottom-color: #1B8354 !important;
    }

    body.dark-mode #today-date,
    body.dark-mode #today-time {
        color: #FFFFFF !important;
    }

    body.dark-mode .digitalStamp {
        background-color: #161B26 !important;
    }

    body.dark-mode .digitalStamp-title,
    body.dark-mode .digitalStamp-text p,
    body.dark-mode .digitalStamp-moreText p {
        color: #FFFFFF !important;
    }

        body.dark-mode .digitalStamp-BTN,
        body.dark-mode .digitalStamp-text p:first-child span,
        body.dark-mode .digitalStamp-moreText a {
            color: #54C08A !important;
        }

    body.dark-mode .digitalStamp-moreInfo {
        background-color: #0D121C !important;
    }

    body.dark-mode .digitalStamp-icon,
    body.dark-mode .digitalStamp-item .digitalStamp-icon {
        background-color: #1B8354 !important;
    }

    body.dark-mode .input__field,
    body.dark-mode .form-control,
    body.dark-mode .custom-select {
        background-color: #161B26 !important;
        color: #FFFFFF !important;
        border-color: #6C737F !important;
    }

        body.dark-mode .input__field::placeholder,
        body.dark-mode .form-control::placeholder {
            color: #9DA4AE !important;
        }

    body.dark-mode .input::after,
    body.dark-mode .input:focus-within::after {
        background-color: #FFFFFF !important;
    }

    body.dark-mode label,
    body.dark-mode h3,
    body.dark-mode .display-md-semibold,
    body.dark-mode .display-lg-semibold,
    body.dark-mode .bd-title,
    body.dark-mode .font-m {
        color: #FFFFFF !important;
    }

    body.dark-mode .btn-primary,
    body.dark-mode .btn--primary-brand {
        background-color: #1B8354 !important;
        color: #FFFFFF !important;
    }

        body.dark-mode .btn-primary:hover,
        body.dark-mode .btn--primary-brand:hover {
            background-color: #166A45 !important;
        }

        body.dark-mode .btn-primary:active,
        body.dark-mode .btn--primary-brand:active {
            background-color: #104631 !important;
        }

    body.dark-mode .alert {
        background-color: #161B26 !important;
        border-color: #B42318 !important;
    }

    body.dark-mode .alert-title {
        color: #FDA29B !important;
    }

    body.dark-mode .alert-message {
        color: #FFFFFF !important;
    }

    body.dark-mode .alert-danger::after {
        background-color: #D92D20 !important;
    }

    /* Footer becomes green in dark mode */
    body.dark-mode .MNGHA-footer {
        background-color: #1B8354 !important;
        color: #FFFFFF !important;
    }

        body.dark-mode .MNGHA-footer,
        body.dark-mode .MNGHA-footer *,
        body.dark-mode .MNGHA-footer a,
        body.dark-mode .MNGHA-footer a:visited {
            color: #FFFFFF !important;
        }

            body.dark-mode .MNGHA-footer .footer-title {
                border-bottom-color: rgba(255, 255, 255, 0.30) !important;
            }

            body.dark-mode .MNGHA-footer .social-links li,
            body.dark-mode .MNGHA-footer .accessibility-tools li {
                border-color: rgba(255, 255, 255, 0.30) !important;
            }

                body.dark-mode .MNGHA-footer .social-links li a:hover,
                body.dark-mode .MNGHA-footer .accessibility-tools li a:hover {
                    background-color: rgba(255, 255, 255, 0.20) !important;
                }

                body.dark-mode .MNGHA-footer .social-links li a:active,
                body.dark-mode .MNGHA-footer .accessibility-tools li a:active {
                    background-color: rgba(255, 255, 255, 0.40) !important;
                }

            body.dark-mode .MNGHA-footer svg,
            body.dark-mode .MNGHA-footer svg * {
                fill: #FFFFFF !important;
                stroke: #FFFFFF !important;
            }

            body.dark-mode .MNGHA-footer .linkIco a::after {
                filter: brightness(0) invert(1) !important;
            }

/* =========================================================
   COLOR BLIND MODE
   Approved:
   - Primary: #585858
   - Footer: #272727
   - Logos grayscale
========================================================= */
body.color-blind-mode {
    background-color: #FFFFFF !important;
    color: #161616 !important;
}

    body.color-blind-mode .secondNavBar,
    body.color-blind-mode nav.secondNavBar,
    body.color-blind-mode .btn-primary,
    body.color-blind-mode .btn--primary-brand,
    body.color-blind-mode .header-menu__item--active,
    body.color-blind-mode .header-menu__item--active:hover,
    body.color-blind-mode .header-menu__item--active:focus,
    body.color-blind-mode .header-menu__item--active:active,
    body.color-blind-mode .digitalStamp-icon,
    body.color-blind-mode .digitalStamp-item .digitalStamp-icon {
        background-color: #585858 !important;
        border-color: #585858 !important;
    }

    body.color-blind-mode .secondNavBar,
    body.color-blind-mode nav.secondNavBar {
        border-top-color: #585858 !important;
        border-bottom-color: #585858 !important;
    }

    body.color-blind-mode #today-date,
    body.color-blind-mode #today-time {
        color: #FFFFFF !important;
    }

    body.color-blind-mode .secondNavBar .actionsBTN {
        background-color: transparent !important;
        border-color: transparent !important;
    }

        body.color-blind-mode .secondNavBar .actionsBTN svg,
        body.color-blind-mode .secondNavBar .actionsBTN svg * {
            fill: #FFFFFF !important;
        }

        /* Color Blind - actions icon states */
        body.color-blind-mode .secondNavBar .actionsBTN:hover svg,
        body.color-blind-mode .secondNavBar .actionsBTN:hover svg *,
        body.color-blind-mode .secondNavBar .actionsBTN:active svg,
        body.color-blind-mode .secondNavBar .actionsBTN:active svg *,
        body.color-blind-mode .secondNavBar .actionsBTN.active svg,
        body.color-blind-mode .secondNavBar .actionsBTN.active svg * {
            fill: #8E8E8E !important;
        }
        /* بدون خلفية في hover/active */
        body.color-blind-mode .secondNavBar .actionsBTN:hover,
        body.color-blind-mode .secondNavBar .actionsBTN:active,
        body.color-blind-mode .secondNavBar .actionsBTN.active {
            background: transparent !important;
            border: none !important;
        }

    body.color-blind-mode .digitalStamp-BTN,
    body.color-blind-mode .digitalStamp-text p:first-child span,
    body.color-blind-mode .digitalStamp-moreText a,
    body.color-blind-mode .bd-title,
    body.color-blind-mode h3,
    body.color-blind-mode .font-m {
        color: #585858 !important;
    }

    body.color-blind-mode .header-menu__item--active::after,
    body.color-blind-mode .header-menu__item--active:hover::after,
    body.color-blind-mode .header-menu__item--active:focus::after,
    body.color-blind-mode .header-menu__item--active:active::after {
        background-color: #BDBDBD !important;
    }

    body.color-blind-mode .btn-primary:hover,
    body.color-blind-mode .btn--primary-brand:hover {
        background-color: #444444 !important;
    }

    body.color-blind-mode .btn-primary:active,
    body.color-blind-mode .btn--primary-brand:active {
        background-color: #303030 !important;
    }

    body.color-blind-mode .MNGHA-footer {
        background-color: #272727 !important;
        color: #FFFFFF !important;
    }

        body.color-blind-mode .MNGHA-footer,
        body.color-blind-mode .MNGHA-footer *,
        body.color-blind-mode .MNGHA-footer a,
        body.color-blind-mode .MNGHA-footer a:visited {
            color: #FFFFFF !important;
        }

            body.color-blind-mode .MNGHA-footer .footer-title {
                border-bottom-color: rgba(255, 255, 255, 0.30) !important;
            }

            body.color-blind-mode .MNGHA-footer .social-links li,
            body.color-blind-mode .MNGHA-footer .accessibility-tools li {
                border-color: rgba(255, 255, 255, 0.30) !important;
            }

                body.color-blind-mode .MNGHA-footer .social-links li a:hover,
                body.color-blind-mode .MNGHA-footer .accessibility-tools li a:hover {
                    background-color: rgba(255, 255, 255, 0.20) !important;
                }

                body.color-blind-mode .MNGHA-footer .social-links li a:active,
                body.color-blind-mode .MNGHA-footer .accessibility-tools li a:active {
                    background-color: rgba(255, 255, 255, 0.40) !important;
                }

            body.color-blind-mode .MNGHA-footer svg,
            body.color-blind-mode .MNGHA-footer svg * {
                fill: #FFFFFF !important;
                stroke: #FFFFFF !important;
            }

    body.color-blind-mode .input__field.input-error,
    body.color-blind-mode .input__field.input-error:focus {
        border-color: #585858 !important;
    }

    body.color-blind-mode .input.input-error::after,
    body.color-blind-mode .input.input-error:focus-within::after,
    body.color-blind-mode .alert-danger::after {
        background-color: #585858 !important;
    }

    body.color-blind-mode .alert-title,
    body.color-blind-mode .input__feedback-icon--error {
        color: #585858 !important;
    }

    /* Keep normal SVGs sharp; grayscale only official logos/images */
    body.color-blind-mode svg {
        filter: none !important;
    }

    body.color-blind-mode .header-logo img,
    body.color-blind-mode .NghaLogo,
    body.color-blind-mode .digitalStamp-ksaFlag img,
    body.color-blind-mode .copyright-col img,
    body.color-blind-mode .vision2030-img,
    body.color-blind-mode .AiLogo-img {
        filter: grayscale(100%) !important;
    }

    /* Remove old blue/yellow color-blind remnants */
    body.color-blind-mode .accessibility-tools svg path,
    body.color-blind-mode #colorBlindFooter svg path {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

/* =========================================================
   RESPONSIVE FINAL FIXES
========================================================= */
@media only screen and (max-width: 1068px) {
    .header-nav--full,
    .navbar,
    .digitalStamp,
    .secondNavBar,
    .MNGHA-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

        .MNGHA-footer .footer-navigation {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
        }
}

@media only screen and (max-width: 768px) {
    .digitalStamp-header {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
    }

    .digitalStamp-contentContainer {
        flex-direction: column;
    }

    .digitalStamp-moreInfo {
        align-items: flex-start;
        flex-direction: column;
    }

    .MNGHA-footer .footer-navigation {
        grid-template-columns: 1fr !important;
    }

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }

    .copyright-col {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 576px) {
    .secondNavBar {
        height: auto;
        min-height: 40px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        gap: 8px;
    }

    .secondNavBar-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    #today-date,
    #today-time {
        font-size: 14px;
        line-height: 20px;
    }

    .MNGHA-footer .MNGHAcontainer {
        gap: 32px;
        padding-top: 32px;
        padding-bottom: 20px;
    }

    .LegalCaption-col nav {
        flex-direction: column;
        gap: 8px;
    }
}

menu__item-label.Arabic {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* =========================
  404 SVG Responsive
========================= */
.error-svg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .error-svg svg {
        width: min(100%, 458px) !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
/* Mobile */
@media (max-width: 576px) {
    .error-svg {
        padding-inline: 16px;
    }

        .error-svg svg {
            width: 100% !important;
            max-width: 320px !important;
            height: auto !important;
        }
}
/* Very small mobile */
@media (max-width: 360px) {
    .error-svg svg {
        max-width: 280px !important;
    }
}