
:root {
  --colors-base-white: #ffffff;
  --colors-base-black: #161616;
  --colors-primary-sa-flag-25: #f7fdf9;
  --colors-primary-sa-flag-50: #f3fcf6;
  --colors-primary-sa-flag-100: #dff6e7;
  --colors-primary-sa-flag-200: #b8eacb;
  --colors-primary-sa-flag-300: #88d8ad;
  --colors-primary-sa-flag-400: #54c08a;
  --colors-primary-sa-flag-500-alpha-10: #25935f19;
  --colors-primary-sa-flag-500: #25935f;
  --colors-primary-sa-flag-600-primary: #1b8354;
  --colors-primary-sa-flag-700: #166a45;
  --colors-primary-sa-flag-800: #14573a;
  --colors-primary-sa-flag-900: #104631;
  --colors-primary-sa-flag-950: #092a1e;
  --colors-secondary-gold-25: #fffef7;
  --colors-secondary-gold-50: #fffef2;
  --colors-secondary-gold-100: #fffce6;
  --colors-secondary-gold-200: #fcf3bd;
  --colors-secondary-gold-300: #fae996;
  --colors-secondary-gold-400: #f7d54d;
  --colors-secondary-gold-500: #f5bd02;
  --colors-secondary-gold-600-primary: #dba102;
  --colors-secondary-gold-700: #b87b02;
  --colors-secondary-gold-800: #945c01;
  --colors-secondary-gold-900: #6e3c00;
  --colors-secondary-gold-950: #472400;
  --colors-tertiary-lavendar-25: #fefcff;
  --colors-tertiary-lavendar-50: #f9f5fa;
  --colors-tertiary-lavendar-100: #f2e9f5;
  --colors-tertiary-lavendar-200: #e1cce8;
  --colors-tertiary-lavendar-300: #ccadd9;
  --colors-tertiary-lavendar-400: #a57bba;
  --colors-tertiary-lavendar-500-primary: #80519f;
  --colors-tertiary-lavendar-600: #6d428f;
  --colors-tertiary-lavendar-700: #532d75;
  --colors-tertiary-lavendar-800: #3d1d5e;
  --colors-tertiary-lavendar-900: #281047;
  --colors-tertiary-lavendar-950: #16072e;
  --colors-neutral-25: #fcfcfd;
  --colors-neutral-50: #f9fafb;
  --colors-neutral-100: #f3f4f6;
  --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d2d6db;
  --colors-neutral-400: #9da4ae;
  --colors-neutral-500: #6c727e;
  --colors-neutral-600: #4d5761;
  --colors-neutral-700: #384250;
  --colors-neutral-800: #1f2a37;
  --colors-neutral-900: #111927;
  --colors-neutral-950: #0c111b;
  --colors-blue-25: #f5faff;
  --colors-blue-50: #eff8ff;
  --colors-blue-100: #d1e9ff;
  --colors-blue-200: #b2ddff;
  --colors-blue-300: #84caff;
  --colors-blue-400: #53b0fd;
  --colors-blue-500: #2e90fa;
  --colors-blue-600: #156fee;
  --colors-blue-700: #175cd3;
  --colors-blue-800: #1849a9;
  --colors-blue-900: #194084;
  --colors-blue-950: #102a56;
  --colors-green-25: #f6fef9;
  --colors-green-50: #ecfdf3;
  --colors-green-100: #dcfae6;
  --colors-green-200: #abefc6;
  --colors-green-300: #75dfa6;
  --colors-green-400: #47cd89;
  --colors-green-500: #17b169;
  --colors-green-600: #069454;
  --colors-green-700: #067647;
  --colors-green-800: #085d3a;
  --colors-green-900: #074c30;
  --colors-green-950: #053321;
  --colors-yellow-25: #fffcf5;
  --colors-yellow-50: #fffaeb;
  --colors-yellow-100: #fef0c7;
  --colors-yellow-200: #fedf89;
  --colors-yellow-300: #fec84b;
  --colors-yellow-400: #fdb022;
  --colors-yellow-500: #f79009;
  --colors-yellow-600: #dc6803;
  --colors-yellow-700: #b54707;
  --colors-yellow-800: #93370c;
  --colors-yellow-900: #7a2e0e;
  --colors-yellow-950: #4e1d09;
  --colors-red-25: #fffbfa;
  --colors-red-50: #fef3f2;
  --colors-red-100: #fee4e2;
  --colors-red-200: #fecdca;
  --colors-red-300: #fca19b;
  --colors-red-400: #f97066;
  --colors-red-500: #f04437;
  --colors-red-600: #d92c20;
  --colors-red-700: #b42318;
  --colors-red-800: #912018;
  --colors-red-900: #7a2619;
  --colors-red-950: #54150c;
  --colors-gray-300: #cecfd2;
  --colors-gray-neutral-50: #f9fafb;  
  --colors-gray-neutral-200: #e5e7eb;
  --colors-gray-neutral-500: #6c737f;
  --colors-text-primary: #161b26;
  --colors-text-placeholder: #85888e;
  --colors-alpha-alpha-white-0: #ffffff00;
  --colors-alpha-alpha-white-10: #ffffff19;
  --colors-alpha-alpha-white-20: #ffffff33;
  --colors-alpha-alpha-white-30: #ffffff4c;
  --colors-alpha-alpha-white-40: #ffffff66;
  --colors-alpha-alpha-white-50: #ffffff7f;
  --colors-alpha-alpha-white-60: #ffffff99;
  --colors-alpha-alpha-white-70: #ffffffb2;
  --colors-alpha-alpha-white-80: #ffffffcc;
  --colors-alpha-alpha-white-90: #ffffffe5;
  --colors-alpha-alpha-white-100: #ffffff;
  --colors-alpha-alpha-black-0: #16161600;
  --colors-alpha-alpha-black-10: #16161619;
  --colors-alpha-alpha-black-20: #16161633;
  --colors-alpha-alpha-black-30: #1616164c;
  --colors-alpha-alpha-black-40: #16161666;
  --colors-alpha-alpha-black-50: #1616167f;
  --colors-alpha-alpha-black-60: #16161699;
  --colors-alpha-alpha-black-70: #161616b2;
  --colors-alpha-alpha-black-80: #161616cc;
  --colors-alpha-alpha-black-90: #161616e5;
  --colors-alpha-alpha-black-100: #161616;
  --colors-alpha-alpha-green-10: #1b835419;
  --colors-alpha-alpha-green-20: #1b835433;
  --colors-alpha-alpha-green-30: #1b83544c;
  --colors-alpha-alpha-green-40: #1b835466;
  --colors-alpha-alpha-green-50: #1b83547f;
  --colors-alpha-alpha-green-60: #1b835499;
  --colors-alpha-alpha-green-70: #1b8354b2;
  --colors-alpha-alpha-green-80: #1b8354cc;
  --colors-alpha-alpha-green-90: #1b8354e5;
  --colors-alpha-alpha-green-100: var(--colors-primary-sa-flag-600-primary);
  --field-border-error: #B42318;
  

  
}

:root {
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
}

:root {
  --link-primary: var(--colors-primary-sa-flag-600-primary);
  --link-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-primary-visited: var(--colors-primary-sa-flag-800);
}

:root {
      --text-success: var(--colors-green-700);
      --text-info: var(--colors-blue-700);
      --background-brand-light: var(--colors-primary-sa-flag-50);
      --radius-full: 9999px;
}
.contat-icon {
    color: var(--colors-primary-sa-flag-600-primary);
}

.section-bg-color {
  background-color: var(--colors-primary-sa-flag-50);
}

.s-ion-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.kfu-section-title {
  font-size: 1.5rem;
  line-height: 2.375rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: #161616;

}

[dir="ltr"] .kfu-section-title {
  font-size: 1.5rem;
}

.dga-card {
    background-color: var(--colors-base-white);
    border: 1px solid var(--colors-neutral-100);
    border-radius: 1rem;
    border: 1px solid var(--colors-neutral-100) !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
    gap: 1.5rem;
    box-sizing: border-box;
    overflow: hidden;
}
#homeNewsContainer .dga-card{
  min-height: 414px;
}
.dga-card {
  cursor: pointer;
}
.dga-card:hover {
    background-color: var(--colors-neutral-50);
    border: 1px solid var(--colors-base-white) !important;
}

.dga-card:focus-visible {
  /* outline: 2px solid var(--colors-neutral-900); */
  outline-offset: 1px;
}

.dga-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.dga-card__title {
  font-size: 1.125rem;
  line-height: 30px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #161616;
}

[dir="ltr"] .dga-card__title
{
   font-size: 1rem;
}

.dga-card__desc {
  font-size: 1rem;
  line-height: 24px;
  margin: 0 0 24px;
  color: #161616;
}

.dga-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b8354;
  color: #fff;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 600;
}

a.btn.btn-offcanvas-black.me-3.d-flex.align-items-center.decoration-none {
    display: none !important;
}


/*e-participation*/
[dir="rtl"] .icon-inner {
    transform: scaleX(-1);
}

.icon-inner {
    transform: scaleX(-1);
}

button.btn.btn-gray.d-flex.justify-content-end {
    transform: scaleX(-1);
}

[dir="rtl"] button.btn.btn-gray.d-flex.justify-content-end {
    transform: scaleX(1);
}

.dga-card-participation {
    background-color: var(--colors-base-white);
    border: 1px solid var(--colors-neutral-100);
    border-radius: 1rem;
    border: 1px solid var(--colors-neutral-100) !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
    gap: 1.5rem;
    box-sizing: border-box;
    overflow: hidden;
}

.card-content {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.dga-card-title {
    color: var(--colors-neutral-800);

    font: 700 1.125rem / 1.75rem 'IBM Plex Sans Arabic';
    margin-bottom: 0;
}

.btn-gray {
  background-color: var(--colors-neutral-100) !important;
  color: var(--colors-text-primary) !important;
  border: 0 !important;
}

.btn-gray:hover {
  background-color: var(--colors-base-white) !important;
  color: var(--colors-text-primary) !important;
  border: 0 !important;
}

/*tabs*/
.nav-underline .nav-item .nav-link {
    color: var(--colors-neutral-700);
    font-weight: 400;
    font-size: .9rem;
}

.border-bottom-nav{
  border-bottom: 2px solid var(--colors-neutral-200);;
}

.nav-underline .nav-link:hover{
  background-color: var(--colors-neutral-100);
  font-weight: 400;
  border-bottom: 3px solid var(--colors-neutral-950);
}

.nav-underline .nav-link:active{
  background-color: var(--colors-neutral-200);
  font-weight: 400;
  border-bottom: 3px solid var(--colors-neutral-950);
}

.nav-underline .nav-link.active{
  color: var(--colors-neutral-900) !important;
  font-weight: 500;
  border-bottom: 3px solid var(--colors-primary-sa-flag-600-primary);
}
.nav-item .nav-link.active i{
   color: var(--colors-neutral-900) !important;
  font-weight: 500;
}


/*CARD*/
.dga-card {
    background-color: var(--colors-base-white);
    border: 1px solid var(--colors-neutral-100);
    border-radius: 1rem;
    border: 1px solid var(--colors-neutral-100) !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
    gap: 1.5rem;
    box-sizing: border-box;
    overflow: hidden;
}

.dga-card {
  cursor: pointer;
}
.dga-card:hover {
    background-color: var(--colors-neutral-50);
    border: 1px solid var(--colors-base-white) !important;
}

.dga-card:focus-visible {
  /* outline: 2px solid var(--colors-neutral-900); */
  outline-offset: 1px;
}

.dga-icon-wrapper {
    width: 48px;
    height: 48px;
    background-color: var(--colors-primary-sa-flag-50);
    /* Pale green background */
    color: var(--colors-green-700);
    /* DGA Solid Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.3rem;
}

.tab-overflow{
  flex-wrap: nowrap;
}