@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-leading: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-outline-style: solid;
      --tw-font-weight: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans: madani-regular, helvetica, arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-main: #163e37;
    --color-sec: #69ee00;
    --font-madani: "Madani Arabic", sans-serif;
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
  html {
    overflow-y: auto;
    scroll-behavior: smooth !important;
  }
  body {
    margin: calc(var(--spacing) * 0);
    box-sizing: border-box;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 0);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    flex-direction: column;
    display: flex;
    font-family: var(--font-madani) !important;
  }
  @media (min-width: 40rem) {
    body {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  @font-face {
    font-family: Madani Arabic;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/MadaniArabic-Light.woff2) format("woff2"),
      url(../fonts/MadaniArabic-Light.woff) format("woff");
  }
  @font-face {
    font-family: Madani Arabic;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/MadaniArabic-Regular.woff2) format("woff2"),
      url(../fonts/MadaniArabic-Regular.woff) format("woff");
  }
  @font-face {
    font-family: Madani Arabic;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/MadaniArabic-Medium.woff2) format("woff2"),
      url(../fonts/MadaniArabic-Medium.woff) format("woff");
  }
  @font-face {
    font-family: Madani Arabic;
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/MadaniArabic-SemiBold.woff2) format("woff2"),
      url(../fonts/MadaniArabic-SemiBold.woff) format("woff");
  }
}
@layer components;
@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .container {
    width: 100%;
  }
  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }
  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }
  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }
  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }
  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }
  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
      var(--tw-skew-x) var(--tw-skew-y);
  }
  .resize {
    resize: both;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
  .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
  }
  .madani-font {
    font-family: Madani Arabic, sans-serif !important;
  }
  .light-font {
    font-family: Madani Arabic, sans-serif !important;
    font-weight: 300 !important;
  }
  .regular-font {
    font-family: Madani Arabic, sans-serif !important;
    font-weight: 400 !important;
  }
  .medium-font {
    font-family: Madani Arabic, sans-serif !important;
    font-weight: 500 !important;
  }
  .semibold-font {
    font-family: Madani Arabic, sans-serif !important;
    font-weight: 600 !important;
  }
  .hgi-stroke {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-family: hgi-stroke-rounded, sans-serif !important;
  }
  .hgi-custom-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(/Style%20Library/assets/images/Indivisal.svg) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }
  .featured-icon {
    border-radius: var(--radius-sm);
    justify-content: center;
    align-items: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: flex;
  }
  .featured-icon--lg {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
  .featured-icon--circle {
    border-radius: var(--radius-full);
  }
  .featured-icon--hard-brand {
    color: var(--secondary) !important;
    background-color: var(--off-white) !important;
  }
  .primary-btn,
  .secondary-btn {
    height: calc(var(--spacing) * 10);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 16);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out);
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-in-out);
    display: flex;
  }
  .primary-btn {
    background-color: var(--color-main) !important;
    color: var(--color-white) !important;
  }
  @media (hover: hover) {
    .primary-btn:hover {
      border-style: var(--tw-border-style) !important;
      border-width: 1px !important;
      border-color: var(--color-main) !important;
      background-color: var(--color-white) !important;
      color: var(--color-main) !important;
    }
  }
  .secondary-btn {
    color: var(--color-main) !important;
    outline-style: var(--tw-outline-style) !important;
    outline-width: 1px !important;
    outline-color: var(--color-gray-400) !important;
    background-color: #0000 !important;
  }
  @media (hover: hover) {
    .secondary-btn:hover {
      border-style: var(--tw-border-style) !important;
      border-width: 1px !important;
      border-color: var(--color-main) !important;
      background-color: var(--color-neutral-200) !important;
      color: var(--color-main) !important;
    }
  }
  .custom-container {
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    margin-inline: auto;
    max-width: 90rem !important;
  }
  .main {
    min-height: 100vh;
    padding-bottom: calc(var(--spacing) * 10);
    margin-top: 72px;
    font-family: var(--font-madani) !important;
  }
  .grid-wrapper {
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    display: grid;
  }
  @media (min-width: 40rem) {
    .grid-wrapper {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 48rem) {
    .grid-wrapper {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .pagination-container {
    margin-block: calc(var(--spacing) * 10);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }
  .pagination-nav,
  .pagination-page,
  .pagination-active {
    aspect-ratio: 1;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    cursor: pointer;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 0.2s;
    --tw-ease: linear;
    background-color: #0000;
    border-width: 0;
    justify-content: center;
    align-items: center;
    text-decoration-line: none;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    display: inline-flex;
  }
  .pagination-nav {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main) !important;
  }
  .pagination-nav:hover {
    text-decoration-line: none;
    background-color: var(--color-neutral-100) !important;
    color: var(--color-main) !important;
  }
  .pagination-page:hover {
    text-decoration-line: none;
    background-color: var(--color-neutral-100) !important;
    color: var(--color-neutral-800) !important;
  }
  .pagination-active {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-main) !important;
    color: var(--color-white) !important;
  }
  .pagination-active:hover {
    text-decoration-line: none;
    background-color: var(--color-main) !important;
    color: var(--color-white) !important;
  }
  .pagination-dots {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-400);
  }
  .pagination-arrow {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .page-link,
  .prev-next {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    border-radius: 0.25rem;
    text-decoration-line: none;
  }
  .active-page {
    cursor: default;
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    border-width: 1px;
    border-radius: 0.25rem;
    border-color: var(--color-main) !important;
    background-color: var(--color-main) !important;
    color: var(--color-white) !important;
  }
  .page-link.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
    border: 1px solid #ccc;
  }
  .error-message {
    color: #e53935;
    margin-top: 4px;
    font-size: 0.85rem;
  }
  .input-field.error {
    border-color: #e53935;
  }
  .input-error {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: var(--color-red-500) !important;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .copywrite {
    margin-top: calc(var(--spacing, 0.25rem) * 10);
  }
  .copywrite-text {
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    color: #fff !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer components {
  .footer-menu {
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-wrap: wrap;
    display: flex;
  }
  .footer-menu-link {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    text-wrap: nowrap !important;
    color: #fff !important;
    text-decoration-line: underline !important;
  }
  .footer-menu-link:hover {
    color: var(--color-sec) !important;
  }
}
@layer components {
  .footer {
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: var(--color-main, #163e37) !important;
  }
  .footer-container {
    margin-block: calc(var(--spacing, 0.25rem) * 0);
    width: 100%;
    padding-block: calc(var(--spacing, 0.25rem) * 6);
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }
  .footer-wrapper {
    gap: calc(var(--spacing, 0.25rem) * 6);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 0);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    display: flex;
  }
  @media (min-width: 48rem) {
    .footer-wrapper {
      flex-direction: row;
    }
  }
  .footer-left {
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    flex: 1;
    display: flex;
  }
  .footer-right {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    display: flex;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-duration: initial;
    }
  }
}
@layer components {
  .social-icon-wrapper {
    gap: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
  }
  .social-icon-link {
    height: calc(var(--spacing, 0.25rem) * 8);
    width: calc(var(--spacing, 0.25rem) * 8);
    border-style: var(--tw-border-style);
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    border-width: 1px;
    border-radius: 3.40282e38px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
    display: flex;
    color: #fff !important;
    border-color: #fff !important;
    outline-color: #fff !important;
  }
  .social-icon-link:hover {
    background-color: var(--color-sec, #69ee00) !important;
    color: #fff !important;
  }
  .social-icon-icon {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(
      --tw-leading,
      var(--text-xl--line-height, calc(1.75 / 1.25))
    );
  }
}
@layer components {
  .locale-button {
    cursor: pointer;
    --tw-border-style: none !important;
    background: var(--color-main) !important;
    color: #fff !important;
    border-style: none !important;
  }
  .locale-button:hover {
    color: #fff !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}
@layer components {
  .desktop-menu {
    justify-content: space-between;
    align-items: center;
    display: none;
  }
  @media (min-width: 48rem) {
    .desktop-menu {
      display: flex;
    }
  }
  .desktop-nav-ul {
    align-items: center;
    display: flex;
    gap: calc(var(--spacing, 0.25rem) * 6) !important;
    min-width: fit-content !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    color: var(--color-white, #fff) !important;
  }
  @media (min-width: 48rem) {
    .desktop-nav-ul {
      font-size: var(--text-base, 1rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-base--line-height, 1.5)
      ) !important;
    }
  }
  .desktop-nav-link,
  .link-base {
    position: relative;
    --tw-border-style: none !important;
    background-color: var(--color-main, #163e37) !important;
    min-width: fit-content !important;
    padding-inline: calc(var(--spacing, 0.25rem) * 0) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    color: var(--color-white, #fff) !important;
    border-style: none !important;
  }
  @media (min-width: 48rem) {
    .desktop-nav-link,
    .link-base {
      font-size: var(--text-base, 1rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-base--line-height, 1.5)
      ) !important;
    }
  }
  .desktop-nav-link:after {
    content: "";
    opacity: 1 !important;
    background-color: var(--color-sec, #69ee00) !important;
  }
  .desktop-nav-link:hover:after {
    background: var(--color-sec) !important;
  }
  .desktop-nav-link-trigger {
    --tw-border-style: none !important;
    min-width: fit-content !important;
    padding: calc(var(--spacing, 0.25rem) * 0) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    border-style: none !important;
  }
  @media (min-width: 48rem) {
    .desktop-nav-link-trigger {
      font-size: var(--text-base, 1rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-base--line-height, 1.5)
      ) !important;
    }
  }
  .desktop-nav-link-trigger {
    position: relative;
    color: #fff !important;
    background: var(--color-main) !important;
  }
  .desktop-nav-link-trigger[data-active="true"]:after {
    content: "";
    opacity: 1 !important;
    background: var(--color-sec) !important;
  }
  .desktop-nav-link-trigger:hover {
    color: #fff !important;
  }
  .desktop-submenu-nav-group {
    visibility: hidden;
    min-width: calc(var(--spacing, 0.25rem) * 80);
    border-radius: var(--radius-lg, 0.5rem);
    text-wrap: nowrap;
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    position: absolute;
    inset-inline-start: calc(var(--spacing, 0.25rem) * -5);
  }
  @media (hover: hover) {
    .desktop-submenu-nav-group:is(:where(.group):hover *) {
      visibility: visible;
      margin-top: calc(var(--spacing, 0.25rem) * 7);
      opacity: 1;
    }
  }
  .desktop-submenu-nav-group {
    color: #000 !important;
    background: #fff !important;
    font-weight: 400 !important;
  }
  .desktop-submenu-nav:after {
    content: "";
    opacity: 1 !important;
    background: var(--color-sec) !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}
@layer components {
  header .desktop-nav-ul a,
  header .desktop-nav-ul a:visited,
  header .desktop-nav-ul a:hover {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    text-decoration-line: none !important;
  }
  .desktop-nav-ul button {
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
  }
  .header {
    z-index: 99;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 72px;
    display: flex;
    position: fixed;
    background-color: var(--color-main, #163e37) !important;
  }
  .header-container {
    margin-inline: auto;
    margin-block: calc(var(--spacing, 0.25rem) * 0);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 0);
    max-width: var(--container-md, 28rem) !important;
  }
  @media (min-width: 48rem) {
    .header-container {
      max-width: 1400px !important;
    }
  }
  .link-base,
  .desktop-nav-link-trigger {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
  }
  @media (min-width: 40rem) {
    .link-base,
    .desktop-nav-link-trigger {
      font-size: var(--text-base, 1rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-base--line-height, 1.5)
      ) !important;
    }
  }
  .link-base {
    align-items: center;
    height: 4.5rem;
    margin-block: auto;
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    padding: calc(var(--spacing, 0.25rem) * 0) !important;
    display: flex !important;
  }
  @media (hover: hover) {
    .link-base:hover {
      color: var(--color-white, #fff) !important;
    }
  }
  .after-sideline {
    margin: calc(var(--spacing, 0.25rem) * 2);
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    text-wrap: wrap;
    color: var(--color-white, #fff);
    text-transform: capitalize;
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
    display: block;
    position: relative;
  }
  @media (hover: hover) {
    .after-sideline:hover {
      border-radius: var(--radius-md, 0.375rem);
      background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
      color: var(--color-white, #fff);
    }
  }
  .after-sideline:after {
    content: "";
    --tw-translate-y: -50%;
    width: 3px;
    height: 70%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    top: 50%;
    background-color: #0000;
    border-radius: 3.40282e38px;
    transition-duration: 0.2s;
    position: absolute;
    inset-inline-start: 12px;
  }
  .after-sideline:hover:after,
  .after-sideline.active:after {
    background-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
    opacity: 1;
  }
  .after-underline {
    cursor: pointer;
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    display: inline-block;
    position: relative;
    --tw-font-weight: var(--font-weight-normal, 400) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    color: var(--color-white, #fff) !important;
  }
  .after-underline:after,
  .desktop-nav-link-trigger.active:after,
  .desktop-nav-link-trigger:not(.active):hover:after {
    content: "";
    pointer-events: none;
    bottom: calc(var(--spacing, 0.25rem) * 0);
    height: calc(var(--spacing, 0.25rem) * 2);
    --tw-translate-x: -50%;
    width: calc(100% + 12px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    background-color: var(--color-sec);
    border-radius: 3.40282e38px;
    transition-duration: 0.3s;
    position: absolute;
    left: 50%;
  }
  .after-underline.active:after {
    opacity: 1;
    background-color: var(--color-sec);
  }
  .after-underline:not(.active):hover:after {
    background-color: var(--color-white, #fff);
    opacity: 1;
  }
  .after-underline.active:hover:after {
    background-color: var(--color-white, #fff);
  }
  .desktop-menu {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    width: 100%;
    display: none;
  }
  @media (min-width: 64rem) {
    .desktop-menu {
      display: flex;
    }
  }
  .desktop-nav-ul {
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    display: flex;
  }
  .desktop-nav-ul li {
    position: relative;
  }
  .desktop-nav-link-trigger {
    margin: calc(var(--spacing, 0.25rem) * 0);
    cursor: pointer;
    appearance: none;
    border-style: var(--tw-border-style);
    height: 4.5rem;
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    color: var(--color-white, #fff);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    background-color: #0000;
    border-width: 0;
    transition-duration: 0.3s;
    position: relative;
  }
  .desktop-nav-link-trigger.active {
    color: var(--color-white, #fff) !important;
  }
  .desktop-nav-link-trigger.active:after {
    opacity: 1;
    background-color: var(--color-sec);
  }
  .desktop-nav-link-trigger:not(.active):hover:after {
    background-color: var(--color-white, #fff);
    opacity: 1;
  }
  .desktop-submenu-nav-group {
    visibility: hidden;
    left: calc(var(--spacing, 0.25rem) * 0);
    z-index: 50;
    width: calc(var(--spacing, 0.25rem) * 56);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--color-white, #fff);
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
    position: absolute;
  }
  .group:hover .desktop-submenu-nav-group,
  .desktop-submenu-nav-group:hover {
    visibility: visible;
    --tw-translate-y: calc(var(--spacing, 0.25rem) * -7);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 1;
  }
  .group:hover > .desktop-nav-link-trigger:after,
  .group:focus-within > .desktop-nav-link-trigger:after {
    background-color: var(--color-white, #fff);
    opacity: 1;
  }
  .desktop-submenu-nav-group a {
    color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  @media (hover: hover) {
    .desktop-submenu-nav-group a:hover {
      color: var(--color-gray-900, oklch(21% 0.034 264.665));
    }
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .mobile-menu {
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  @media (min-width: 64rem) {
    .mobile-menu {
      display: none;
    }
  }
  .mobile-menu-button {
    cursor: pointer;
    border-radius: var(--radius-xl, 0.75rem);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    justify-content: center;
    align-items: center;
    display: inline-flex;
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    height: calc(var(--spacing, 0.25rem) * 10) !important;
    width: calc(var(--spacing, 0.25rem) * 10) !important;
    min-width: calc(var(--spacing, 0.25rem) * 10) !important;
    --tw-border-style: none !important;
    padding: calc(var(--spacing, 0.25rem) * 0) !important;
    --tw-outline-style: none !important;
    background-color: #0000 !important;
    background-image: none !important;
    border-style: none !important;
    outline-style: none !important;
  }
  @media (hover: hover) {
    .mobile-menu-button:hover {
      background-color: var(--color-neutral-100, oklch(97% 0 0));
    }
  }
  .mobile-overlay {
    pointer-events: none;
    visibility: hidden;
    inset: calc(var(--spacing, 0.25rem) * 0);
    z-index: 50;
    opacity: 0;
    position: fixed;
  }
  .mobile-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }
  .mobile-backdrop {
    inset: calc(var(--spacing, 0.25rem) * 0);
    background-color: #0006;
    position: absolute;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .mobile-backdrop {
      background-color: color-mix(
        in oklab,
        var(--color-black, #000) 40%,
        transparent
      );
    }
  }
  .mobile-backdrop {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
  }
  .mobile-overlay.is-open .mobile-backdrop {
    opacity: 1;
  }
  .mobile-panel {
    top: calc(var(--spacing, 0.25rem) * 0);
    width: 83.3333%;
    height: 100%;
    max-width: var(--container-sm, 24rem);
    border-color: var(--color-neutral-200, oklch(92.2% 0 0));
    background-color: var(--color-white, #fff);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a),
      0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    position: absolute;
    overflow-y: auto;
  }
  html[dir="ltr"] .mobile-panel {
    left: 0;
    transform: translate(-100%);
  }
  html[dir="rtl"] .mobile-panel {
    right: 0;
    transform: translate(100%);
  }
  .mobile-overlay.is-open .mobile-panel {
    transform: translate(0);
  }
  .mobile-panel-header {
    top: calc(var(--spacing, 0.25rem) * 0);
    z-index: 10;
    background-color: var(--color-white, #fff);
    position: sticky;
  }
  .mobile-panel-header-row {
    padding: calc(var(--spacing, 0.25rem) * 4);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .mobile-close-btn {
    height: calc(var(--spacing, 0.25rem) * 9);
    width: calc(var(--spacing, 0.25rem) * 9);
    cursor: pointer;
    color: var(--color-neutral-700, oklch(37.1% 0 0));
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }
  @media (hover: hover) {
    .mobile-close-btn:hover {
      background-color: var(--color-neutral-100, oklch(97% 0 0));
    }
  }
  .mobile-divider {
    background-color: var(--color-neutral-200, oklch(92.2% 0 0));
    width: 100%;
    height: 1px;
  }
  .mobile-nav {
    padding: calc(var(--spacing, 0.25rem) * 2);
  }
  :where(.mobile-nav-ul > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--color-neutral-200, oklch(92.2% 0 0));
  }
  .mobile-li {
    padding-block: calc(var(--spacing, 0.25rem) * 1);
  }
  .mobile-subnav-ul {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    padding-inline-start: calc(var(--spacing, 0.25rem) * 4);
  }
  .mobile-subnav-li {
    padding-block: calc(var(--spacing, 0.25rem) * 1);
  }
  .mobile-nav-link {
    border-radius: var(--radius-2xl, 1rem);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
    color: var(--color-neutral-900, oklch(20.5% 0 0));
    display: block;
    position: relative;
  }
  @media (hover: hover) {
    .mobile-nav-link:hover {
      background-color: var(--color-neutral-50, oklch(98.5% 0 0));
    }
  }
  .mobile-nav-link:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: #163e374d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .mobile-nav-link:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-main, #163e37) 30%,
        transparent
      );
    }
  }
  .mobile-nav-link:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .mobile-nav-link:after {
    content: "";
    height: 83.3333%;
    width: calc(var(--spacing, 0.25rem) * 1.5);
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
    border-radius: 3.40282e38px;
    position: absolute;
    top: 50%;
  }
  html[dir="ltr"] .mobile-nav-link:hover:after {
    left: calc(var(--spacing, 0.25rem) * 1.5);
    background-color: var(--color-neutral-300, oklch(87% 0 0));
    opacity: 1;
  }
  html[dir="rtl"] .mobile-nav-link:hover:after {
    right: calc(var(--spacing, 0.25rem) * 1);
    background-color: var(--color-neutral-300, oklch(87% 0 0));
    opacity: 1;
  }
  .mobile-nav-link.is-active {
    background-color: var(--color-neutral-100, oklch(97% 0 0));
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
  }
  html[dir="ltr"] .mobile-nav-link.is-active:after {
    content: "";
    left: calc(var(--spacing, 0.25rem) * 1.5);
    background-color: var(--color-main, #163e37);
    opacity: 1;
  }
  html[dir="rtl"] .mobile-nav-link.is-active:after {
    content: "";
    right: calc(var(--spacing, 0.25rem) * 1);
    background-color: var(--color-main, #163e37);
    opacity: 1;
  }
  .mobile-nav-link-trigger {
    cursor: default;
  }
  .mobile-nav-link-trigger[data-active="true"]:after {
    opacity: 1;
  }
  .mobile-subnav-link {
    border-radius: var(--radius-xl, 0.75rem);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    color: var(--color-neutral-800, oklch(26.9% 0 0));
    display: block;
    position: relative;
  }
  @media (hover: hover) {
    .mobile-subnav-link:hover {
      background-color: var(--color-neutral-50, oklch(98.5% 0 0));
    }
  }
  .mobile-subnav-link:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: #163e374d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .mobile-subnav-link:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-main, #163e37) 30%,
        transparent
      );
    }
  }
  .mobile-subnav-link:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .mobile-subnav-link:after {
    content: "";
    height: 83.3333%;
    width: calc(var(--spacing, 0.25rem) * 1.5);
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
    border-radius: 3.40282e38px;
    position: absolute;
    top: 50%;
  }
  html[dir="ltr"] .mobile-subnav-link:hover:after {
    left: calc(var(--spacing, 0.25rem) * 2);
    background-color: var(--color-neutral-300, oklch(87% 0 0));
    opacity: 1;
  }
  html[dir="rtl"] .mobile-subnav-link:hover:after {
    right: calc(var(--spacing, 0.25rem) * 2);
    background-color: var(--color-neutral-300, oklch(87% 0 0));
    opacity: 1;
  }
  .mobile-subnav-link.is-active {
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--color-neutral-100, oklch(97% 0 0));
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-neutral-900, oklch(20.5% 0 0));
  }
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .page-header {
    padding-block: calc(var(--spacing, 0.25rem) * 10);
  }
  .page-header-bg {
    background-color: var(--color-header, #f7fdf9);
    width: 100%;
  }
  .page-header-container-content-center,
  .page-header-container-content-start {
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    display: flex;
  }
  .page-header-container-content-start {
    align-items: flex-start;
  }
  .page-header-container-content-center {
    align-items: center;
  }
  .page-title,
  .page-header-desc {
    margin-bottom: calc(var(--spacing, 0.25rem) * 4) !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .page-title {
    margin-inline: calc(var(--spacing, 0.25rem) * 0) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-size: 2rem !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--color-black, #000) !important;
  }
  .page-header-desc {
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .terms {
    margin-bottom: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 10);
    max-width: var(--container-md, 28rem) !important;
  }
  @media (min-width: 48rem) {
    .terms {
      max-width: 934px !important;
    }
  }
  .terms-content {
    background-color: #f3f9f9;
    width: 100%;
    font-family: var(
      --font-sans,
      madani-regular,
      helvetica,
      arial,
      sans-serif
    ) !important;
  }
  .terms-paragraph {
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
    --tw-leading: var(--leading-relaxed, 1.625) !important;
    line-height: var(--leading-relaxed, 1.625) !important;
  }
  .terms-title {
    --tw-leading: var(--leading-relaxed, 1.625);
    line-height: var(--leading-relaxed, 1.625);
    font-size: var(--text-lg, 1.125rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-lg--line-height, calc(1.75 / 1.125))
    ) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
  }
  .terms-divider {
    margin-block: calc(var(--spacing, 0.25rem) * 2);
    height: calc(var(--spacing, 0.25rem) * 2);
    background-color: var(--color-white, #fff);
    width: 100%;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-outline-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}
@layer components {
  button.filter-link-variant {
    margin-left: calc(var(--spacing, 0.25rem) * 2.5);
    cursor: pointer;
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-bottom: calc(var(--spacing, 0.25rem) * 4);
    text-wrap: nowrap;
    color: #444;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    border-width: 1px;
    border-color: #ababab;
    position: relative;
    --tw-border-style: none !important;
    min-width: fit-content !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
    --tw-outline-style: none !important;
    border-style: none !important;
    outline-style: none !important;
  }
  @media (hover: hover) {
    button.filter-link-variant:hover {
      background-color: #f3f4f6;
    }
  }
  .filter-primary-btn,
  .filter-secondary-btn {
    height: calc(var(--spacing, 0.25rem) * 10);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 16);
    border-radius: var(--radius-md, 0.375rem);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    text-wrap: nowrap;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    display: flex;
    min-width: fit-content !important;
  }
  .filter-primary-btn {
    background-color: var(--color-main, #163e37) !important;
    color: var(--color-white, #fff) !important;
  }
  .filter-secondary-btn {
    color: var(--color-main, #163e37) !important;
    outline-style: var(--tw-outline-style) !important;
    outline-width: 1px !important;
    outline-color: var(--color-gray-400, oklch(70.7% 0.022 261.325)) !important;
    background-color: #0000 !important;
  }
  .filter-link-variant:hover:after {
    content: "";
    bottom: calc(var(--spacing, 0.25rem) * 0);
    --tw-translate-x: -50%;
    width: 83.3333%;
    height: 3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    position: absolute;
    left: 50%;
  }
  .filter-link-variant.active:after {
    content: "";
    bottom: calc(var(--spacing, 0.25rem) * 0);
    --tw-translate-x: -50%;
    width: 83.3333%;
    height: 3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    background-color: #1b8354;
    position: absolute;
    left: 50%;
  }
  .filter-link-variant.active:after:hover {
    content: "";
    bottom: calc(var(--spacing, 0.25rem) * 0);
    height: calc(var(--spacing, 0.25rem) * 1);
    --tw-translate-x: -50%;
    width: 83.3333%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    position: absolute;
    left: 50%;
  }
  .filter-container,
  .filter-button-container {
    align-items: center;
    display: flex;
  }
  .filter-container {
    justify-content: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 1);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    overflow-x: auto;
  }
  @media (min-width: 48rem) {
    .filter-container {
      padding-inline: calc(var(--spacing, 0.25rem) * 0);
    }
  }
  .filter-button-container {
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-wrap: wrap;
  }
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .page-card {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-xl, 0.75rem);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: var(--color-neutral-400, oklch(70.8% 0 0)) !important;
    background-color: var(--color-white, #fff) !important;
  }
  @media (hover: hover) {
    .page-card:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
        0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .page-card-container {
    gap: calc(var(--spacing, 0.25rem) * 6);
    width: 100%;
    padding: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    display: flex;
  }
  .page-card-status {
    top: calc(var(--spacing, 0.25rem) * -16);
    aspect-ratio: 1;
    height: calc(var(--spacing, 0.25rem) * 32);
    width: calc(var(--spacing, 0.25rem) * 32);
    padding-bottom: calc(var(--spacing, 0.25rem) * 2);
    color: var(--color-white, #fff);
    border-start-start-radius: 3.40282e38px;
    border-start-end-radius: 3.40282e38px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    position: absolute;
    font-size: var(--text-xs, 0.75rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-xs--line-height, calc(1 / 0.75))
    ) !important;
  }
  .page-card-status > p {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
  }
  html[dir="rtl"] .page-card-status {
    left: calc(var(--spacing, 0.25rem) * -16);
    rotate: -45deg;
  }
  html[dir="ltr"] .page-card-status {
    right: calc(var(--spacing, 0.25rem) * -16);
    rotate: 45deg;
  }
  .page-card-status-soon {
    background-color: var(--color-sec, #69ee00);
  }
  .page-card-status-launched {
    background-color: var(--color-main, #163e37);
  }
  .page-card-body {
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    margin-block: auto;
    display: flex;
  }
  .page-card-icon {
    width: calc(var(--spacing, 0.25rem) * 12);
    height: calc(var(--spacing, 0.25rem) * 12);
    background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .page-card-title {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-leading: var(--leading-snug, 1.375) !important;
    line-height: var(--leading-snug, 1.375) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
  }
  .page-card-desc {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-leading: var(--leading-relaxed, 1.625) !important;
    line-height: var(--leading-relaxed, 1.625) !important;
    color: var(--color-neutral-700, oklch(37.1% 0 0)) !important;
  }
  .page-card-btn {
    width: fit-content;
  }
  .page-card-icon-btn {
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    display: flex;
    gap: calc(var(--spacing, 0.25rem) * 0) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer components {
  .search-container {
    width: 100%;
    max-width: var(--container-md, 28rem);
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    display: flex;
    position: relative;
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
  }
  @media (min-width: 48rem) {
    .search-container {
      gap: calc(var(--spacing, 0.25rem) * 6);
      width: 33.3333%;
      max-width: 1400px;
    }
  }
  .search-input {
    height: calc(var(--spacing, 0.25rem) * 11);
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300, oklch(87% 0 0));
    width: 100%;
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
    --tw-font-weight: var(--font-weight-normal, 400);
    font-weight: var(--font-weight-normal, 400);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .search-input:focus {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-bottom-color: var(--color-black, #000);
    --tw-outline-style: none;
    outline-style: none;
  }
  html[dir="rtl"] .search-input {
    padding-right: calc(var(--spacing, 0.25rem) * 12);
  }
  @media (min-width: 48rem) {
    html[dir="rtl"] .search-input {
      padding-right: calc(var(--spacing, 0.25rem) * 8);
    }
  }
  html[dir="ltr"] .search-input {
    padding-left: calc(var(--spacing, 0.25rem) * 12);
  }
  @media (min-width: 48rem) {
    html[dir="ltr"] .search-input {
      padding-left: calc(var(--spacing, 0.25rem) * 8);
    }
  }
  .search-icon {
    width: calc(var(--spacing, 0.25rem) * 4);
    height: calc(var(--spacing, 0.25rem) * 4);
    color: var(--color-neutral-400, oklch(70.8% 0 0));
    position: absolute;
    inset-inline-start: calc(var(--spacing, 0.25rem) * 6);
  }
  @media (min-width: 48rem) {
    .search-icon {
      inset-inline-start: calc(var(--spacing, 0.25rem) * 3);
    }
  }
}
@layer components;
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-leading: initial;
    }
  }
}
@layer components {
  .accordion {
    margin-inline: auto;
    margin-top: calc(var(--spacing, 0.25rem) * 8);
    width: 100%;
    max-width: var(--container-4xl, 56rem);
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .accordion-item {
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    border-top-style: var(--tw-border-style) !important;
    border-top-width: 1px !important;
    border-color: var(--color-neutral-200, oklch(92.2% 0 0)) !important;
  }
  @media (min-width: 48rem) {
    .accordion-item {
      padding-block: calc(var(--spacing, 0.25rem) * 3);
    }
  }
  .accordion-trigger {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-lg, 0.5rem);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    --tw-border-style: none !important;
    text-align: start !important;
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
    --tw-font-weight: var(--font-weight-semibold, 600) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    border-style: none !important;
  }
  @media (hover: hover) {
    .accordion-trigger:hover {
      color: var(--color-neutral-900, oklch(20.5% 0 0));
      background-color: var(--color-neutral-100, oklch(97% 0 0)) !important;
    }
  }
  .accordion-trigger:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: #163e3780;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .accordion-trigger:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-main, #163e37) 50%,
        transparent
      );
    }
  }
  .accordion-trigger:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .accordion-icon {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    flex-shrink: 0;
    rotate: 180deg;
  }
  .accordion-icon-open {
    rotate: none;
  }
  .accordion-panel {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    grid-template-rows: 0fr;
    display: grid;
  }
  .accordion-panel.open {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    grid-template-rows: 1fr;
  }
  .accordion-content {
    height: calc(var(--spacing, 0.25rem) * 0);
    --tw-leading: var(--leading-relaxed, 1.625);
    line-height: var(--leading-relaxed, 1.625);
    color: var(--color-neutral-700, oklch(37.1% 0 0));
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.5s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.5s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    display: none;
    overflow: hidden;
    padding: calc(var(--spacing, 0.25rem) * 2) !important;
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
  }
  .accordion-content.active {
    height: auto;
    display: block;
  }
  .accordion-content > p {
    padding-inline: calc(var(--spacing, 0.25rem) * 2) !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
    }
  }
}
@layer components {
  .faq {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 10);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .faq-search {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 6) !important;
    width: 100% !important;
    max-width: var(--container-4xl, 56rem) !important;
    font-size: var(--text-base, 1rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-base--line-height, 1.5)
    ) !important;
  }
  @media (min-width: 48rem) {
    .faq-search {
      gap: calc(var(--spacing, 0.25rem) * 6);
      padding-inline: calc(var(--spacing, 0.25rem) * 0);
    }
  }
  .faq-title {
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    margin-right: calc(var(--spacing, 0.25rem) * 0) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
    margin-left: calc(var(--spacing, 0.25rem) * 0) !important;
    text-align: center !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-size: 2rem !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--color-black, #000) !important;
  }
  .faq-content {
    margin-inline: auto;
    margin-top: calc(var(--spacing, 0.25rem) * 20);
    width: 100%;
    max-width: var(--container-4xl, 56rem);
    border-bottom-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    border-bottom-width: 1px;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .faq-item {
    cursor: pointer;
    border-top-style: var(--tw-border-style);
    padding-top: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 8);
    border-top-width: 1px;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-xl, 1.25rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-xl--line-height, calc(1.75 / 1.25))
    ) !important;
  }
  @media (hover: hover) {
    .faq-item:hover {
      background-color: var(--color-neutral-100, oklch(97% 0 0)) !important;
    }
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer components {
  .contact-and-support-container {
    gap: calc(var(--spacing, 0.25rem) * 4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
    display: grid;
  }
  @media (min-width: 40rem) {
    .contact-and-support-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .contact-and-support-container {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .contact-and-support-container-vertical {
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    width: 100%;
    display: flex;
  }
  .contact-and-support-card {
    border-radius: var(--radius-xl, 0.75rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300, oklch(87% 0 0));
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 8);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  @media (hover: hover) {
    .contact-and-support-card:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
        0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .contact-and-support-card-container {
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 6);
    width: 100%;
    display: flex;
  }
  .contact-and-support-card-body {
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    flex: 1;
    display: flex;
  }
  .contact-and-support-title {
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
  }
  .contact-and-support-link {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
  }
  @media (hover: hover) {
    .contact-and-support-link:hover {
      color: #1b8354 !important;
      text-decoration-line: underline !important;
    }
  }
  .contact-and-support-attachment {
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    display: flex;
  }
  .contact-and-support-attachment-text {
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .contact-and-support-attachment-input {
    display: none;
  }
  .contact-and-support-attachment-button {
    cursor: pointer;
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300, oklch(87% 0 0));
    width: fit-content;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  @media (hover: hover) {
    .contact-and-support-attachment-button:hover {
      border-color: var(--color-main, #163e37);
      color: var(--color-main, #163e37);
    }
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer components {
  .input-container {
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }
  .input-label {
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 1);
    padding-inline: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-main, #163e37);
    display: flex;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .input-required {
    color: var(--color-red-600, oklch(57.7% 0.245 27.325));
  }
  .input-wrap {
    width: 100%;
    position: relative;
  }
  .input-field {
    height: calc(var(--spacing, 0.25rem) * 10);
    border-radius: var(--radius-md, 0.375rem);
    border-bottom-style: var(--tw-border-style);
    background-color: #163e370d;
    border-color: #0000;
    border-bottom-width: 4px;
    width: 100%;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .input-field {
      background-color: color-mix(
        in oklab,
        var(--color-main, #163e37) 5%,
        transparent
      );
    }
  }
  .input-field {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    color: var(--color-neutral-900, oklch(20.5% 0 0));
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.2s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.2s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .input-field::placeholder {
    color: var(--color-neutral-400, oklch(70.8% 0 0));
  }
  .input-field:focus {
    --tw-outline-style: none;
    outline-style: none;
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 4px !important;
    border-color: var(--color-main, #163e37) !important;
  }
  .input-field[required]:focus,
  .input-field.is-invalid,
  .input-field[aria-invalid="true"],
  .input-field.is-invalid:focus,
  .input-field[aria-invalid="true"]:focus {
    border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
  }
  .input-field[data-state="success"],
  .input-field[data-state="success"]:focus {
    border-color: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
  }
  .input-field:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .input-sm .input-field {
    height: calc(var(--spacing, 0.25rem) * 9);
    padding-inline: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
  }
  .input-lg .input-field {
    height: calc(var(--spacing, 0.25rem) * 12);
    padding-inline: calc(var(--spacing, 0.25rem) * 5);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
  }
  .input-help {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
    color: var(--color-neutral-500, oklch(55.6% 0 0));
  }
  .input-error {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
    color: var(--color-red-600, oklch(57.7% 0.245 27.325));
  }
  .input-icon-left {
    pointer-events: none;
    inset-block: calc(var(--spacing, 0.25rem) * 0);
    left: calc(var(--spacing, 0.25rem) * 3);
    align-items: center;
    display: flex;
    position: absolute;
  }
  .input-icon-right {
    inset-block: calc(var(--spacing, 0.25rem) * 0);
    right: calc(var(--spacing, 0.25rem) * 3);
    align-items: center;
    display: flex;
    position: absolute;
  }
  .input-with-icon-left .input-field {
    padding-left: calc(var(--spacing, 0.25rem) * 10);
  }
  .input-with-icon-right .input-field {
    padding-right: calc(var(--spacing, 0.25rem) * 10);
  }
}
@layer components {
  .select-container {
    gap: calc(var(--spacing, 0.25rem) * 2);
    flex-direction: column;
    display: flex;
  }
  .select-input {
    height: calc(var(--spacing, 0.25rem) * 10);
    border-radius: var(--radius-md, 0.375rem);
    background-color: #163e370d;
    width: 100%;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .select-input {
      background-color: color-mix(
        in oklab,
        var(--color-main, #163e37) 5%,
        transparent
      );
    }
  }
  .select-input {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}
@layer components {
  .contact {
    width: 100%;
    padding-bottom: calc(var(--spacing, 0.25rem) * 10);
  }
  .contact-content {
    gap: calc(var(--spacing, 0.25rem) * 4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
    width: 100% !important;
  }
  @media (min-width: 48rem) {
    .contact-content {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .contact-content > form {
      grid-column: span 2 / span 2;
    }
  }
  .contact-form {
    gap: calc(var(--spacing, 0.25rem) * 4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
    display: grid;
  }
  @media (min-width: 48rem) {
    .contact-form {
      grid-column: span 2 / span 2;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .form-column {
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    width: 100%;
    display: flex;
  }
  .submit-btn {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    width: fit-content;
  }
  .contact-and-support-attachment-button {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-xl, 0.75rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
    background-color: var(--color-white, #fff);
    width: fit-content;
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000);
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
      filter, -webkit-backdrop-filter, backdrop-filter, display,
      content-visibility, overlay, pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    display: flex;
  }
  .selected-file-display {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-2xl, 1rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
    background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    display: none;
  }
  .file-name-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lg, 1.125rem);
    line-height: var(
      --tw-leading,
      var(--text-lg--line-height, calc(1.75 / 1.125))
    );
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-black, #000);
    text-align: right;
    direction: rtl;
    max-width: 85%;
    overflow: hidden;
  }
  .remove-file-btn {
    cursor: pointer;
    font-size: var(--text-2xl, 1.5rem);
    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
  @media (hover: hover) {
    .remove-file-btn:hover {
      color: var(--color-black, #000);
    }
  }
  .remove-file-btn {
    line-height: 1;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .section-row-container {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 6);
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .section-header {
    padding-block: calc(var(--spacing, 0.25rem) * 6);
  }
  .section-header-text {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .section-header-title {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-xl, 1.25rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-xl--line-height, calc(1.75 / 1.25))
    ) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
  }
  @media (min-width: 40rem) {
    .section-header-title {
      font-size: var(--text-3xl, 1.875rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-3xl--line-height, 1.2)
      ) !important;
    }
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}
@layer components {
  .hero-section {
    background-position: 50%;
    background-size: cover;
    width: 100%;
    position: relative;
    aspect-ratio: 3/1.5 !important;
    background-image: url(/Style%20Library/assets/images/hero-bg.svg) !important;
  }
  .hero-image-container {
    inset: calc(var(--spacing, 0.25rem) * 0);
    z-index: 10;
    position: absolute;
  }
  .hero-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .hero-buttons-container {
    z-index: 20;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hero-button-wrapper {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 8);
    display: flex;
  }
  .hero-button-image {
    width: calc(var(--spacing, 0.25rem) * 32);
    height: calc(var(--spacing, 0.25rem) * 32);
    cursor: pointer;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
  }
  @media (min-width: 48rem) {
    .hero-button-image {
      width: calc(var(--spacing, 0.25rem) * 44);
      height: calc(var(--spacing, 0.25rem) * 44);
    }
  }
  .hero-button-image:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}
@layer components {
  .ia_carousel {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after;
    -webkit-overflow-scrolling: touch;
    margin-inline: auto;
    animation: 4s linear infinite ia-carousel-timer;
    display: flex;
    overflow-x: hidden;
  }
  .ia_carousel:hover {
    animation-play-state: paused;
  }
  .ia_carousel_card {
    scroll-snap-align: start;
    flex: 0 0 100%;
    margin-inline-end: 1rem;
  }
  @media (min-width: 640px) {
    .ia_carousel_card {
      flex: 0 0 calc(50% - 0.5rem);
    }
  }
  @media (min-width: 1024px) {
    .ia_carousel_card {
      flex: 0 0 calc(33.3333% - 0.666667rem);
    }
  }
  .ia_carousel::scroll-marker-group {
    justify-content: center;
    gap: 0.5em;
    margin-block: 2rem;
    display: flex;
  }
  .ia_carousel_card > div {
    height: 100%;
  }
  .ia_carousel_card::scroll-marker {
    content: "";
    height: calc(var(--spacing, 0.25rem) * 4);
    width: calc(var(--spacing, 0.25rem) * 4);
    background-color: var(--color-dot, #d1d5db);
    border-radius: 3.40282e38px;
  }
  .ia_carousel_card.is-active-dot::scroll-marker {
    background-color: var(--color-main, #163e37);
  }
  .ia_carousel_card[data-dot="off"]::scroll-marker {
    content: none;
  }
  .ia_carousel::-webkit-scrollbar {
    display: none;
  }
  @keyframes ia-carousel-timer {
    0% {
      transform: translate(0);
    }
    to {
      transform: translate(0);
    }
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}
@layer components {
  .news-card,
  .news-card-image,
  .news-card-image-container {
    border-radius: var(--radius-2xl, 1rem);
  }
  .news-card {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-200, oklch(92.2% 0 0));
    background-color: var(--color-white, #fff);
    height: 420px;
    padding: calc(var(--spacing, 0.25rem) * 4);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    flex-direction: column;
    display: flex;
    position: relative;
  }
  .news-card:hover {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .news-card-image-container {
    margin: calc(var(--spacing, 0.25rem) * 0);
    height: calc(var(--spacing, 0.25rem) * 64);
    width: 100%;
    overflow: hidden;
  }
  .news-card-image {
    object-fit: cover;
    width: 100%;
    height: auto;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-ease: linear;
    transition-timing-function: linear;
    display: block;
  }
  .news-card-image:hover {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .date-badge {
    inset-inline-start: calc(var(--spacing, 0.25rem) * 2.5);
    top: calc(var(--spacing, 0.25rem) * 2.5);
    z-index: 10;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--color-sec, #69ee00);
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    text-align: center;
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
    --tw-leading: 1.2;
    color: var(--color-white, #fff);
    line-height: 1.2;
    position: absolute;
  }
  @media (min-width: 40rem) {
    .date-badge {
      inset-inline-start: calc(var(--spacing, 0.25rem) * 6);
      top: calc(var(--spacing, 0.25rem) * 5);
    }
  }
  .date-badge .day,
  .date-badge .month,
  .date-badge .year {
    font-weight: 700;
    display: block;
  }
  .news-card-title {
    margin-top: calc(var(--spacing, 0.25rem) * 3);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    --tw-leading: var(--leading-snug, 1.375);
    line-height: var(--leading-snug, 1.375);
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-neutral-800, oklch(26.9% 0 0));
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    flex-grow: 1 !important;
  }
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@layer components;
@layer components;
@layer components {
  .communication-content {
    margin-bottom: calc(var(--spacing, 0.25rem) * 16);
    gap: calc(var(--spacing, 0.25rem) * 6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
    display: grid;
  }
  @media (min-width: 48rem) {
    .communication-content {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
@layer components;
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-content: "";
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-leading: initial;
    }
  }
}
@layer components {
  .type-of-licenses-section {
    padding-block: calc(var(--spacing, 0.25rem) * 10);
  }
  .type-of-licenses-title {
    margin-bottom: calc(var(--spacing, 0.25rem) * 8) !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-size: 1.875rem !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--color-black, #000) !important;
  }
  .type-of-licenses-container {
    gap: calc(var(--spacing, 0.25rem) * 4);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
  }
  @media (min-width: 48rem) {
    .type-of-licenses-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .type-of-license-card {
    justify-content: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300, oklch(87% 0 0));
    padding: calc(var(--spacing, 0.25rem) * 6);
    flex-direction: column;
    display: flex;
  }
  @media (hover: hover) {
    .type-of-license-card:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
        0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .type-of-license-number {
    aspect-ratio: 1;
    height: calc(var(--spacing, 0.25rem) * 10);
    width: calc(var(--spacing, 0.25rem) * 10);
    min-width: calc(var(--spacing, 0.25rem) * 10);
    background-color: var(--color-sec, #69ee00);
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-white, #fff);
    border-radius: 3.40282e38px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .type-of-license-type {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
    --tw-font-weight: var(--font-weight-semibold, 600) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
  }
  .licenses-guidelines__title {
    margin-bottom: calc(var(--spacing, 0.25rem) * 4);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    text-align: start !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-3xl, 1.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-3xl--line-height, 1.2)
    ) !important;
    --tw-font-weight: var(--font-weight-semibold, 600) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
  }
  @media (min-width: 48rem) {
    .licenses-guidelines__title {
      padding-inline: calc(var(--spacing, 0.25rem) * 0);
    }
  }
  .licenses-guidelines__grid {
    margin-top: calc(var(--spacing, 0.25rem) * 8);
    gap: calc(var(--spacing, 0.25rem) * 2);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
  }
  @media (min-width: 48rem) {
    .licenses-guidelines__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .licenses-guidelines__filters {
    justify-content: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 4);
    text-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    display: flex;
    overflow-x: auto;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    align-items: flex-start !important;
  }
  @media (min-width: 48rem) {
    .licenses-guidelines__filters {
      flex-direction: column;
    }
  }
  .licenses-guidelines__filter-item {
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    );
    display: flex;
    position: relative;
    padding: calc(var(--spacing, 0.25rem) * 3) !important;
  }
  .licenses-guidelines__filter-item:before {
    content: var(--tw-content);
    height: 66.6667% !important;
    width: calc(var(--spacing, 0.25rem) * 1) !important;
    --tw-translate-y: -50% !important;
    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
    transition-property: all !important;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    ) !important;
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    ) !important;
    --tw-duration: 0.3s !important;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) !important;
    transition-duration: 0.3s !important;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    ) !important;
    --tw-content: "" !important;
    content: var(--tw-content) !important;
    inset-inline-start: calc(var(--spacing, 0.25rem) * 0) !important;
    border-radius: 3.40282e38px !important;
    position: absolute !important;
    top: 50% !important;
  }
  @media (hover: hover) {
    .licenses-guidelines__filter-item:hover {
      background-color: var(--color-neutral-100, oklch(97% 0 0)) !important;
    }
    .licenses-guidelines__filter-item:hover:before {
      content: var(--tw-content);
      background-color: var(--color-neutral-300, oklch(87% 0 0)) !important;
    }
  }
  .licenses-guidelines__filter-item.is-active {
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
  }
  .licenses-guidelines__filter-item.is-active:after {
    inset-inline-start: calc(var(--spacing, 0.25rem) * 3);
    bottom: calc(var(--spacing, 0.25rem) * -2);
    height: calc(var(--spacing, 0.25rem) * 1);
    background-color: var(--color-main, #163e37);
    width: 100%;
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    --tw-content: "";
    content: var(--tw-content);
    border-radius: 3.40282e38px;
    position: absolute;
  }
  .licenses-guidelines__content {
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 16);
    flex-direction: column;
    width: 100%;
    display: flex;
  }
  @media (min-width: 48rem) {
    .licenses-guidelines__content {
      grid-column: span 2 / span 2;
    }
  }
  .licenses-guidelines__article {
    gap: calc(var(--spacing, 0.25rem) * 4);
    width: 100%;
    padding-top: calc(var(--spacing, 0.25rem) * 10);
    flex-direction: column;
    scroll-margin-top: 72px;
    display: flex;
  }
  .licenses-guidelines__heading {
    padding-inline: calc(var(--spacing, 0.25rem) * 1);
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    text-align: start !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-2xl, 1.5rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-2xl--line-height, calc(2 / 1.5))
    ) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
  }
  .licenses-guidelines__description {
    padding-inline: calc(var(--spacing, 0.25rem) * 1);
    --tw-leading: var(--leading-relaxed, 1.625);
    line-height: var(--leading-relaxed, 1.625);
    color: var(--color-neutral-700, oklch(37.1% 0 0));
    margin-bottom: calc(var(--spacing, 0.25rem) * 4) !important;
    text-align: start !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
  }
  .licenses-guidelines__cards {
    gap: calc(var(--spacing, 0.25rem) * 4);
    width: 100%;
    padding: calc(var(--spacing, 0.25rem) * 0);
    flex-direction: column;
    display: flex;
  }
  .licenses-guidelines__card {
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-neutral-300, oklch(87% 0 0));
    width: 100%;
    padding: calc(var(--spacing, 0.25rem) * 4);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    justify-content: space-between !important;
    align-items: center !important;
    display: flex !important;
  }
  @media (hover: hover) {
    .licenses-guidelines__card:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
        0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .licenses-guidelines__card-title {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    text-align: start !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    --tw-font-weight: var(--font-weight-medium, 500) !important;
    font-weight: var(--font-weight-medium, 500) !important;
  }
  .licenses-guidelines__download-btn {
    height: calc(var(--spacing, 0.25rem) * 10);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 16);
    border-radius: var(--radius-md, 0.375rem);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    display: flex;
    background-color: var(--color-main, #163e37) !important;
    color: var(--color-white, #fff) !important;
  }
  @media (hover: hover) {
    .licenses-guidelines__download-btn:hover {
      border-style: var(--tw-border-style) !important;
      border-width: 1px !important;
      border-color: var(--color-main, #163e37) !important;
      background-color: var(--color-white, #fff) !important;
      color: var(--color-main, #163e37) !important;
    }
  }
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer components;
@layer components {
  .eservice {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 6);
    flex-direction: column;
    width: 100%;
    display: flex;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .eservice-search-wrapper {
    margin-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
  }
  .eservice-search {
    width: 100%;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-leading: initial;
    }
  }
}
@layer components {
  .details-page {
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius-2xl, 1rem);
    background-color: var(--color-white, #fff);
    width: 100%;
    max-width: 1000px;
    height: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 12);
    padding-block: calc(var(--spacing, 0.25rem) * 20);
    flex-direction: column;
    margin-inline: auto;
    transition: all 0.2s linear;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .details-page-date {
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
    color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  }
  .details-page-title,
  .details-title,
  .details-subtitle {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--color-black, #000) !important;
  }
  .details-page-title {
    font-size: var(--text-sm, 0.875rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-sm--line-height, calc(1.25 / 0.875))
    ) !important;
  }
  @media (min-width: 48rem) {
    .details-page-title {
      font-size: var(--text-base, 1rem) !important;
      line-height: var(
        --tw-leading,
        var(--text-base--line-height, 1.5)
      ) !important;
    }
  }
  .details-page-image-container {
    margin: calc(var(--spacing, 0.25rem) * 0);
    border-radius: var(--radius-2xl, 1rem);
    width: 100%;
    height: auto;
    max-height: 550px;
    overflow: hidden;
  }
  .details-page-image {
    border-radius: inherit;
    object-fit: cover;
    width: 100%;
    height: auto;
    transition: all 0.2s linear;
    display: block;
  }
  .details-page-desc {
    width: clamp(320px, 100%, 1000px);
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
    --tw-leading: var(--leading-relaxed, 1.625) !important;
    line-height: var(--leading-relaxed, 1.625) !important;
    --tw-font-weight: var(--font-weight-light, 300) !important;
    font-weight: var(--font-weight-light, 300) !important;
  }
  .details-page-desc div {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
  }
  .details-page-desc h1,
  .details-page-desc h2,
  .details-page-desc h3,
  .details-page-desc h4,
  .details-page-desc h5,
  .details-page-desc h6 {
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-weight: var(--font-weight-bold, 700) !important;
  }
  .details-subtitle-container {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .details-title,
  .details-subtitle {
    margin: calc(var(--spacing, 0.25rem) * 0) !important;
    font-size: var(--text-xl, 1.25rem) !important;
    line-height: var(
      --tw-leading,
      var(--text-xl--line-height, calc(1.75 / 1.25))
    ) !important;
  }
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-leading: initial;
    }
  }
}
@layer components {
  .member {
    margin-block: calc(var(--spacing, 0.25rem) * 16);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
  }
  .member-title {
    padding: calc(var(--spacing, 0.25rem) * 2);
    font-family: var(--font-madani, "Madani Arabic", sans-serif);
    font-size: var(--text-3xl, 1.875rem);
    line-height: var(--tw-leading, var(--text-3xl--line-height, 1.2));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-black, #000);
  }
  .member-content {
    margin-block: calc(var(--spacing, 0.25rem) * 16);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
  }
  @media (min-width: 48rem) {
    .member-content {
      gap: calc(var(--spacing, 0.25rem) * 14);
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .member-card {
    border-radius: var(--radius-2xl, 1rem);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    width: 100%;
    max-width: 320px;
    min-height: 450px;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
    );
    transition-duration: var(
      --tw-duration,
      var(--default-transition-duration, 0.15s)
    );
    --tw-duration: 0.3s;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: 0.3s;
    transition-timing-function: var(
      --ease-in-out,
      cubic-bezier(0.4, 0, 0.2, 1)
    );
    background-color: #0000;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .member-image-container {
    width: 100%;
    height: 100%;
    max-height: 280px;
    overflow: hidden;
  }
  .member-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 280px;
  }
  .member-card-text-container {
    flex: auto;
    align-items: center;
    flex-direction: column !important;
    display: flex !important;
  }
  .member-name,
  .member-role {
    text-align: center;
    font-family: var(--font-madani, "Madani Arabic", sans-serif);
    font-size: var(--text-lg, 1.125rem);
    line-height: var(
      --tw-leading,
      var(--text-lg--line-height, calc(1.75 / 1.125))
    );
    --tw-leading: calc(var(--spacing, 0.25rem) * 7);
    line-height: calc(var(--spacing, 0.25rem) * 7);
    color: var(--color-black, #000);
  }
  .member-name {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  }
  .member-link {
    bottom: calc(var(--spacing, 0.25rem) * 4);
    border-top-right-radius: var(--radius-2xl, 1rem);
    border-bottom-left-radius: var(--radius-2xl, 1rem);
    background-color: var(--color-main, #163e37);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 2);
    text-align: center;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    position: absolute;
    color: var(--color-sec, #69ee00) !important;
  }
  @media (min-width: 48rem) {
    .member-card {
      grid-column: span 2 / span 2;
    }
    .member-card:first-child,
    .member-card:nth-child(7) {
      grid-column: span 6 / span 6;
    }
    .member-card:nth-child(2),
    .member-card:nth-child(3) {
      grid-column: span 3 / span 3;
    }
  }
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
} /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
    }
  }
}
@layer components {
  .about,
  .about-title,
  .about-content,
  .about-item {
    font-family: var(--font-madani, "Madani Arabic", sans-serif) !important;
  }
  .about {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-bottom: calc(var(--spacing, 0.25rem) * 10);
    flex-direction: column;
    display: flex;
  }
  .about-search {
    gap: calc(var(--spacing, 0.25rem) * 2);
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    width: 100% !important;
    max-width: var(--container-4xl, 56rem) !important;
  }
  @media (min-width: 48rem) {
    .about-search {
      gap: calc(var(--spacing, 0.25rem) * 6);
      padding-inline: calc(var(--spacing, 0.25rem) * 0);
    }
  }
  .about-title {
    margin-top: calc(var(--spacing, 0.25rem) * 10) !important;
    margin-right: calc(var(--spacing, 0.25rem) * 0) !important;
    margin-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
    margin-left: calc(var(--spacing, 0.25rem) * 0) !important;
    text-align: center !important;
    --tw-font-weight: var(--font-weight-bold, 700) !important;
    font-size: 2rem !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--color-black, #000) !important;
  }
  .about-content {
    width: 100%;
    max-width: var(--container-4xl, 56rem);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    margin-inline: auto;
  }
  .about-item {
    cursor: pointer;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-neutral-400, oklch(70.8% 0 0));
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-top: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 8);
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
  }
  @media (hover: hover) {
    .about-item:hover {
      background-color: var(--color-neutral-100, oklch(97% 0 0));
    }
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}