@charset "UTF-8";

@font-face {
  font-family: "IBM Plex Sans Arabic Regular";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic Regular"),
    url("IBMPlexSansArabic-Regular.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic Thin";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic Thin"),
    url("IBMPlexSansArabic-Thin.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic ExtraLight";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic ExtraLight"),
    url("IBMPlexSansArabic-ExtraLight.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic Light";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic Light"),
    url("IBMPlexSansArabic-Light.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic Medium";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic Medium"),
    url("IBMPlexSansArabic-Medium.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic SemiBold";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic SemiBold"),
    url("IBMPlexSansArabic-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans Arabic Bold" !important;
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Arabic Bold"),
    url("IBMPlexSansArabic-Bold.woff") format("woff");
}

:root {
  --scale: 1;
  --fs-72: calc(72px * var(--scale));
  --fs-60: calc(60px * var(--scale));
  --fs-48: calc(48px * var(--scale));
  --fs-36: calc(36px * var(--scale));
  --fs-30: calc(30px * var(--scale));
  --fs-24: calc(24px * var(--scale));
  --fs-20: calc(20px * var(--scale));
  --fs-18: calc(18px * var(--scale));
  --fs-16: calc(16px * var(--scale));
  --fs-14: calc(14px * var(--scale));
  --fs-12: calc(12px * var(--scale));
  --colors-brand-400: #54c08a;
  --white: #ffffff;
  --black: var(--dga-black);
  --dark-gray: #384250;
  --gray: #1f2a37;
  --light-gray: #6c737f;
  --gray-bg: #f9fafb;
  --gray-bg2: #f3f4f6;
  --primary-green: #1b8354;
  --secondary-green: #166a45;
  --green-gradient: linear-gradient(90deg, #1b8354 0%, #25935f 100%);
  --light-green: #f7fdf9;
  --border-color1: #e5e7eb;
  --border-color2: #d2d6db;
  --border-color3: #f3fcf6;
  --light-green-bg: #f3fcf6;
  --light-mint: #dcfae6;
  --breadcrumb-light-green: var(--light-mint);
  --shadow: #1018280d;
  --radius: 5px;
  --btn-radius: 4px; /* DGA spec: corner radius for all buttons */
  --card-shadow1: #1018281a;
  --card-shadow2: #1018280f;
  --dga-black: #161616;
  --darker-dray: #0d121c;
  --gray-400: #9da4ae;
  --green-success-800: #085d3a;
  --darker-green: #074d31;
  --blue-info-800: #1849a9;
  --light-blue-info-200: #b2ddff;
  --light-green-success-200: #b8eacb;
  --danger-red: #b42318;
  --green-hover: #074d31;

  /* ── DGA Full Color Palette (CodePlatform) ───────────────────────────── */
  /* Gray scale */
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb; /* = --gray-bg */
  --gray-100: #f3f4f6; /* = --gray-bg2 */
  --gray-200: #e5e7eb; /* = --border-color1 */
  --gray-300: #d2d6db; /* = --border-color2 */
  --gray-400: #9da4ae;
  --gray-500: #6c737f; /* = --light-gray */
  --gray-600: #4d5761; /* tertiary text */
  --gray-700: #384250; /* secondary text = --dark-gray */
  --gray-800: #1f2a37; /* = --gray */
  --gray-900: #111927;
  --gray-950: #0d121c; /* primary text = --darker-dray */

  /* SA Green (Saudi Arabia brand) */
  --sa-25: #f7fdf9; /* = --light-green */
  --sa-50: #f3fcf6; /* = --light-green-bg */
  --sa-100: #dff6e7;
  --sa-200: #b8eacb; /* = --light-green-success-200 */
  --sa-300: #88d8ad;
  --sa-400: #54c08a; /* = --colors-brand-400 */
  --sa-500: #25935f;
  --sa-600: #1b8354; /* = --primary-green */
  --sa-700: #166a45; /* = --secondary-green */
  --sa-800: #14573a;
  --sa-900: #104631;
  --sa-950: #092a1e;

  /* Success */
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #dcfae6; /* = --light-mint */
  --success-200: #abefc6;
  --success-300: #75e0a7;
  --success-400: #47cd89;
  --success-500: #17b26a;
  --success-600: #079455;
  --success-700: #067647;
  --success-800: #085d3a; /* = --green-success-800 */
  --success-900: #074d31; /* = --darker-green */
  --success-950: #053321;

  /* Warning / Amber */
  --warning-25: #fffcf5;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022; /* star rating amber */
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --warning-950: #4e1d09;

  /* Error / Red */
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318; /* = --danger-red */
  --error-800: #912018;
  --error-900: #7a271a;
  --error-950: #55160c;

  /* Info / Blue */
  --info-25: #f5faff;
  --info-50: #eff8ff;
  --info-100: #d1e9ff;
  --info-200: #b2ddff; /* = --light-blue-info-200 */
  --info-300: #84caff;
  --info-400: #53b1fd;
  --info-500: #2e90fa;
  --info-600: #1570ef;
  --info-700: #175cd3;
  --info-800: #1849a9; /* = --blue-info-800 */
  --info-900: #194185;
  --info-950: #102a56;

  /* ── DGA Layout & Spacing Tokens ─────────────────────────────────────── */
  /* Source: design.dga.gov.sa/guidelines/foundations/layout-and-spacing    */
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 56px;
  --spacing-8xl: 64px;
  --spacing-9xl: 80px;
  --spacing-10xl: 96px;
  --spacing-11xl: 160px;

  /* Container */
  --container-padding-mobile: 16px;
  --container-padding-desktop: 32px;
  --container-max-width: 1280px;
  --paragraph-max-width: 720px;

  /* ── DGA Alpha / Focus / Overlay Tokens ─────────────────────────────── */
  --sa-focus-ring: rgba(27, 131, 84, 0.2); /* alpha-green-20 — focus rings */
  --sa-focus-ring-sm: rgba(
    27,
    131,
    84,
    0.15
  ); /* alpha-green-15 — input rings  */
  --overlay-dark: rgba(22, 22, 22, 0.76); /* dga-black 76% — card overlays */
  --warning-alpha-20: rgba(
    253,
    176,
    34,
    0.2
  ); /* warning-400 20% — star shadow */

  /* ── DGA Shadow Color Percentages (#101828 = shadow base) ───────────── */
  --shadow-3pct: rgba(16, 24, 40, 0.03); /* #10182808 */
  --shadow-5pct: rgba(16, 24, 40, 0.05); /* #1018280d */
  --shadow-6pct: rgba(16, 24, 40, 0.06); /* #1018280f */
  --shadow-8pct: rgba(16, 24, 40, 0.08); /* #10182814 */
  --shadow-10pct: rgba(16, 24, 40, 0.1); /* #1018281a */
  --shadow-14pct: rgba(16, 24, 40, 0.14); /* #10182824 */
  --shadow-18pct: rgba(16, 24, 40, 0.18); /* #1018282e */

  /* ── DGA Full Shadow Tokens ──────────────────────────────────────────── */
  --shadow-xs: 0px 1px 2px 0px var(--shadow-5pct);
  --shadow-sm: 0px 1px 2px 0px var(--shadow-6pct),
    0px 1px 3px 0px var(--shadow-10pct);
  --shadow-md: 0px 2px 4px -2px var(--shadow-6pct),
    0px 4px 8px -2px var(--shadow-10pct);
  --shadow-lg: 0px 4px 6px -2px var(--shadow-3pct),
    0px 12px 16px -4px var(--shadow-8pct);
  --shadow-xl: 0px 8px 8px -4px var(--shadow-3pct),
    0px 20px 24px -4px var(--shadow-8pct);
  --shadow-2xl: 0px 24px 48px -12px var(--shadow-18pct);
  --shadow-3xl: 0px 32px 64px -12px var(--shadow-14pct);

  /* ── DGA Gradient Alpha Stops ────────────────────────────────────────── */
  --white-0: rgba(255, 255, 255, 0); /* transparent white for gradients  */
  --white-80: rgba(255, 255, 255, 0.8); /* #ffffffcc — card fade overlays    */
  --gray-bg-0: rgba(249, 250, 251, 0); /* #f9fafb00 — gray-50 transparent   */
  --sa-600-0: rgba(27, 131, 84, 0); /* primary-green transparent         */
  --sa-500-33: rgba(37, 147, 95, 0.33); /* #25935f54 — brand gradient tint   */
}

/*.darkmode {*/
/*    --white:#161616;*/
/*    --black: #ffffff;*/
/*    --dark-gray: #ffff;*/
/*    --gray: #E5E7EB;*/
/*    --light-gray: #ffff;*/
/*    --gray-bg: #1F2A37;*/
/*    --gray-bg2: #1F2A37;*/
/*    --primary-green: #1B8354;*/
/*    --secondary-green: #067647;*/
/*    --green-hover: #074D31;*/
/*    --green-gradient: linear-gradient(90deg, #1B8354 0%, #25935F 100%);*/
/*    --light-green: #053321;*/
/*    --border-color1: #E5E7EB;*/
/*    --border-color2: #D2D6DB;*/
/*    --border-color3: #F3FCF6;*/
/*    --breadcrumb-light-green: #88D8AD;*/
/*    --radius: 8px;*/
/*    --shadow: #1018280D;*/
/*    --dga-black: #FCFCFD;*/
/*    --darker-dray: #FCFCFD;*/
/*    --gray-400:#9DA4AE;*/
/*    --green-success-800:#085D3A;*/
/*    --darker-green:#074D31;*/
/*    --blue-info-800:#1849A9;*/
/*    --light-blue-info-200:#B2DDFF;*/
/*    --light-green-success-200:#B8EACB;*/
/*    --danger-red:#B42318;*/
/*}*/

* {
  /* font-size:var(--fs-16); */
  font-size: calc(16px * var(--scale));
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  line-height: normal;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body.darkmode {
  background-color: var(--gray-25) !important;
  filter: grayscale(100%);
}

/*.darkmode img {*/
/* filter: grayscale(1);*/
/*}*/

a {
  text-decoration: none;
  color: var(--primary-green);
}

a:hover {
  color: var(--secondary-green);
}

.fw-400,
.fw-300 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.object-fit-cover {
  object-fit: cover;
}

.text-dark-gray {
  color: var(--dark-gray) !important;
}

.text-darker-gray {
  color: var(--darker-gray) !important;
}

.text-black,
.dga-text-black {
  color: var(--dga-black) !important;
}

.text-color {
  color: var(--dag-black);
}

.text-gray {
  color: var(--gray) !important;
}

.text-green {
  color: var(--primary-green) !important;
}

.text-dark-green {
  color: var(--secondary-green);
}

.text-light-green {
  color: var(--);
}

.text-light-gray {
  color: var(--light-gray) !important;
}

.text-primary {
  color: var(--primary-green) !important;
}

.text-secondary {
  color: var(--secondary-green) !important;
}

.text-justify {
  text-align: justify;
}

.gray-border-color {
  border-color: var(--gray-bg2);
}

.border-bottom-gray {
  border-bottom: 1px solid var(--border-color1);
  margin: 8px 0;
}

.nav-item.border-bottom-gray {
  margin: 0 !important;
}

.gray-bg {
  background-color: var(--gray-bg);
}

.bg-white {
  background-color: var(--white) !important;
}

.darkmode .bg-white.city-content {
  background-color: var(--gray-200) !important;
}
.darkmode .bg-white.city-content h5,
.darkmode .bg-white.city-content p {
  color: var(--dark-gray) !important;
}

.light-green-bg {
  background: var(--light-green-bg);
}

.cursor-pointer {
  cursor: pointer;
}

h4.text-dark-gray {
  font-size: var(--fs-20);
}

/* h3.text-dark-gray {
    font-size:var(--fs-20);
} */

h5.text-light-gray {
  font-size: var(--fs-18);
}

h3.text-primary {
  font-size: var(--fs-24) !important;
}

.btn-black {
  background-color: var(--darker-dray);
  color: var(--white) !important;
}

.btn-black img {
  filter: brightness(25);
}

/*.darkmode .desktop-menu-wrapper img.chevron ,.darkmode .hcis-navbrand-side img ,.darkmode .header-search-lang-side img ,.darkmode .header-search-lang-side svg {*/
/*    filter: brightness(25)!important;*/
/*}*/

.darkmode .table-responsive tr td {
  color: var(--dark-gray) !important;
}

/*.darkmode img[alt="Sort"] , .darkmode img[alt="Search Arrow"] {*/
/*    filter: brightness(25);*/
/*}*/

.darkmode .btn-black img {
  filter: brightness(0);
}

.btn-black span {
  color: var(--white) !important;
}

.text-decoration-underlined {
  text-decoration: underline !important;
}

.btn-black:hover,
.btn-black:active {
  background-color: transparent;
  border-color: var(--darker-dray);
  color: var(--darker-dray) !important;
}

.btn-black:hover img,
.btn-black.show img {
  filter: unset;
}

.btn-black:hover span {
  color: var(--darker-dray) !important;
}

.btn-black.show span {
  color: var(--darker-dray) !important;
}

button {
  outline: 0 !important;
}

h5 {
  font-size: var(--fs-20);
}

html[lang="ar"] ol li {
  list-style: arabic-indic;
}

.banner-title {
  font-size: var(--fs-36) !important;
  font-weight: 600;
  text-shadow: 0px 1px 3px var(--shadow);
}

.bod-card img {
  width: 100%;
  object-fit: contain;
}

.tags-list .tag-li {
  border-radius: var(--btn-radius);
  padding: 2px 8px;
  display: inline-block;
}

.tag-li.tag-li-blue {
  border: 1px solid var(--light-blue-info-200);
  color: var(--blue-info-800);
  background: var(--gray-bg);
}

.tag-li.tag-li-green {
  border: 1px solid var(--light-green-success-200);
  color: var(--green-success-800);
  background: var(--gray-bg);
}

.object-position-top {
  object-position: top;
}

.object-position-center {
  object-position: center;
}

.object-position-bottom {
  object-position: bottom;
}

.object-position-left {
  object-position: left;
}

.object-position-left {
  object-position: right;
}

.tag-li.tag-li-gray {
  border: 1px solid var(--border-color1);
  color: var(--dark-gray);
  background: var(--gray-bg);
}

a.card-arrow-link:hover img {
  transform: translateX(-5px);
  transition: 0.2s ease all;
}

/* DGA "With Stroke" — border only, no shadow */
.card-border {
  border: 1px solid var(--border-color2);
  box-shadow: none;
}

/* DGA "With Shadow" — sm shadow only, override Bootstrap default border */
.card-border-shadow {
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
  border: none;
}

/* Shadows-shadow-xs (0 1 2 0, 5%) */
.shadows-shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Shadows-shadow-sm (0 1 3 0, 10%) */
.shadows-shadow-sm {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

/* Shadows-shadow-sm alt (0 1 2 0, 6%) */
.shadows-shadow-sm-2 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Shadows-shadow-md (0 4 8 -2, 10%) */
.shadows-shadow-md {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
}

/* Shadows-shadow-md alt (0 2 4 -2, 6%) */
.shadows-shadow-md-2 {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Shadows-shadow-lg (0 12 16 -6, 8%) */
.shadows-shadow-lg {
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
}

/* Shadows-shadow-lg alt (0 4 6 -2, 3%) */
.shadows-shadow-lg-2 {
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Shadows-shadow-xl (0 20 24 -4, 8%) */
.shadows-shadow-xl {
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.08);
}

/* Shadows-shadow-xl alt (0 8 8 -4, 3%) */
.shadows-shadow-xl-2 {
  box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.04);
}

/* Shadows-shadow-2xl (0 24 48 -12, 18%) */
.shadows-shadow-2xl {
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
}

/* Shadows-shadow-3xl (0 32 64 -12, 14%) */
.shadows-shadow-3xl {
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
}

/* Base styles for green/primary buttons */
.btn-green,
.btn-primary {
  background-color: var(--primary-green);
  border: none !important;
  color: var(--white);
  display: inline-block;
  border-radius: var(--btn-radius); /* DGA: 4px for all buttons */
  box-shadow: unset;
  transition: 0.3s ease all;
}

/* Hover state */
.btn-green:hover,
.btn-primary:hover {
  background-color: var(--secondary-green) !important;
  color: var(--white);
  border: none !important;
}

/* Active state */
.btn-green:active,
.btn-primary:active {
  background-color: var(--darker-green);
  color: var(--white);
  border: none !important;
}

.btn-green.active,
.btn-primary.active {
  background-color: var(--darker-green);
  color: var(--white) !important;
  border: none !important;
}

.btn-green:focus-visible,
.btn-primary:focus-visible,
.btn-darker-gray:focus-visible {
  /* background-color: var(--primary-green) !important; */
  /* border: 2px solid var(--white) !important; */
  outline: 3px solid var(--dga-black) !important;
  outline-offset: 0 !important;
  /* color: var(--white) !important; */
}

/* Disabled button */
.btn-green.disable,
.btn-green:disabled,
.btn-green[disabled] {
  background-color: var(--border-color1);
  color: var(--gray-400) !important;
  border: none !important;
  pointer-events: none;
  opacity: 0.6;
}

/* Darker gray button (styled similarly to green button) */
.btn-darker-gray {
  background-color: var(--primary-green);
  /* border: none !important; */
  color: var(--white);
  display: inline-block;
  border-radius: var(--btn-radius);
  box-shadow: unset;
  transition: 0.3s ease all;
}

.btn-darker-gray:hover {
  background-color: var(--secondary-green) !important;
  color: var(--white);
  /* border: none !important; */
}

.btn-darker-gray:hover img {
  filter: brightness(20%);
  transition: 0.2s all;
}

.btn-gray {
  background-color: var(--primary-green);
  /* background-color: var(--gray-bg2);
    border-color: var(--gray-bg2);
    color: var(--dark-gray); */
  color: var(--white) !important;
  display: inline-block;
  border-radius: var(--btn-radius);
  box-shadow: unset;
  border: none !important;
  transition: 0.3s all ease;
}

/*.btn-gray:hover {
    /* background-color: var(--primary-green); */
/* border-color: var(--dark-gray); */
/* color: var(--white);   
}*/

.btn-gray:active,
.btn-gray:hover {
  background-color: var(--border-color1);
  transition: 0.3s all ease;
  color: var(--dga-black) !important;
  border: none !important;
  background-color: var(--secondary-green) !important;
  color: var(--white);
}

/* .btn-gray:active img,
.btn-gray:hover img {
    filter: unset !important;
} */

.btn-gray img {
  filter: brightness(26.5);
}

.btn-gray:hover img,
.btn-gray:active img,
.btn-gray:focus img {
  filter: brightness(26.5);
  transition: 0.3s all;
}

/* DGA focused state for btn-gray */
.btn-gray:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sa-focus-ring);
}

/* DGA disabled state for btn-gray */
.btn-gray:disabled,
.btn-gray.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-white {
  background-color: var(--white);
  color: var(--dark-gray);
  border: 1px solid var(--border-color2);
  border-radius: var(--btn-radius);
  box-shadow: unset;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* DGA ghost/secondary hover: subtle gray tint, keep dark text */
.btn-white:hover {
  background-color: var(--gray-bg2);
  color: var(--dark-gray);
  border-color: var(--border-color2);
}

/* DGA pressed: slightly darker tint */
.btn-white:active {
  background-color: var(--border-color2);
  color: var(--dark-gray);
}

/* DGA focused: 2px black outline */
.btn-white:focus-visible {
  background-color: var(--white);
  color: var(--dark-gray);
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-color: var(--border-color2);
}

/* DGA disabled */
.btn-white:disabled,
.btn-white.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-white:hover img {
  filter: none;
}

.section-paddings {
  padding-right: var(--container-padding-desktop);
  padding-left: var(--container-padding-desktop);
}

.hcis-radius {
  border-radius: 8px;
}

.hcis-inputs {
  background: var(--gray-bg);
  border: 1px solid var(--border-color1) !important; /* #E5E7EB — visible border */
  padding: 8px 16px;
  border-radius: 4px;
  height: calc(2em + 0.75rem + 2px);
  font-size: var(--fs-14);
  box-shadow: none !important;
  color: var(--dga-black) !important; /* #161616 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hovered: slightly darker border */
.hcis-inputs:hover {
  border-color: var(--border-color2) !important; /* #D2D6DB */
}

/* Pressed/Active: border color shifts; animated line from .dga-field-wrap::after */
.hcis-inputs:active {
  border-color: var(--border-color2) !important;
  box-shadow: none !important;
}

/* Focused: green border + green ring */
.hcis-inputs:focus {
  border-color: var(--primary-green) !important; /* #1B8354 */
  box-shadow: 0 0 0 3px var(--sa-focus-ring-sm) !important;
  outline: none;
}

/* Disabled: gray bg, muted text, not-allowed */
.hcis-inputs:disabled {
  background-color: var(--gray-bg2) !important; /* #F3F4F6 */
  color: var(--gray-400) !important; /* #9DA4AE muted */
  border-color: var(--border-color1) !important;
  cursor: not-allowed;
  opacity: 1;
}

.hcis-inputs:disabled::placeholder {
  color: var(--border-color2) !important; /* extra muted */
}

/* Read-Only: lighter bg, readable text, default cursor */
.hcis-inputs[readonly] {
  background-color: var(--gray-bg) !important; /* #F9FAFB */
  color: var(--dark-gray) !important; /* #384250 readable */
  border-color: var(--border-color1) !important;
  cursor: default;
}

/* Placeholder */
.hcis-inputs::placeholder {
  color: var(--light-gray); /* #6C737F */
}

.hcis-select {
  background: var(--gray-bg) url(../images/down-chevron.svg);
  border: 1px solid var(--border-color1) !important;
  padding: 12px 12px 12px 48px;
  background-repeat: no-repeat;
  background-position: center left 20px;
  background-size: 14px;
  box-shadow: unset !important;
  border-radius: var(--btn-radius);
  height: calc(2em + 0.75rem + 2px);
  font-size: var(--fs-14);
  color: var(--black);
}

.hcis-select-white {
  background-color: var(--white);
}

.hcis-saudi-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 390px;
  padding: 48px 0;
}

.darkmode .hcis-saudi-bg {
  background-image: url("../../assets/images/bg-saudi-dakmode.svg") !important;
}

.hcis-green-bg {
  background-repeat: no-repeat;
  background-position: bottom 100% right 100%;
  background-size: 35%;
}

.header-with-search {
  background-color: var(--gray-bg);
  padding-top: 96px;
  padding-bottom: 96px;
}

.search-input {
  background: var(--gray-bg) url(../images/search.svg);
  background-repeat: no-repeat;
  background-position: center right 20px;
  background-size: 20px;
  border: 1px solid var(--border-color1);
  padding: 12px 48px 12px 12px;
  transition: 0.3s ease all;
  position: relative;
}

.search-input:hover {
  border: 1px solid var(--dark-gray) !important;
}

.search-input:active {
  border: 1px solid var(--gray-400) !important;
  background-color: var(--gray-bg2) !important;
}

/* search-input ::after is handled by .dga-field-wrap::after (JS wraps at runtime) */

.search-input:focus {
  border: 1px solid var(--gray-400) !important;
  background-color: var(--gray-bg2) !important;
}

.white-bg-search {
  background-color: var(--white);
}

.header-with-search .search-input {
  width: calc(100% - 60px);
}

.filter-dropdown-one button {
  box-shadow: unset !important;
  border: 1px solid var(--border-color2);
  border-radius: var(--btn-radius);
  color: var(--black) !important;
}

.decision-points li {
  margin-bottom: 10px !important;
}

.filter-dropdown-one button::after {
  content: unset;
}

.filter-dropdown-one .dropdown-menu a:hover,
.filter-dropdown-one .dropdown-menu a.active {
  background-color: var(--gray-bg2) !important;
  color: var(--dark-gray) !important;
}

.search-results .search-result:not(:last-child) {
  border-bottom: 1px solid var(--border-color2);
}

.header-with-title {
  min-height: 470px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.header-with-title-row {
  min-height: 450px;
  padding: 24px 0;
}

.header-video-Img-only {
  height: 475px;
}

.header-video-Img-only video,
.header-video-Img-only img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center;
}

.header-video-Img-only::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gray-bg2);
}

.header-video-Img-only.transparent-bg::after {
  background-color: transparent;
}

.hcis-tabs {
  padding: 0;
  border-bottom: 1px solid var(--border-color2);
  margin: 12px 0;
}

.hcis-tabs li:not(:first-child) {
  margin: 0 16px;
}

.hcis-tabs li a {
  color: var(--light-gray);
  position: relative;
  margin: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 12px 4px 16px;
  font-size: var(--fs-18);
}

.hcis-tabs li a:hover {
  color: var(--dark-gray) !important;
  font-weight: 500;
}

.hcis-tabs li a:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: var(--btn-radius);
  background-color: var(--primary-green);
  left: 0;
  width: 100%;
  height: 3px;
}

.hcis-tabs .active {
  color: var(--dark-gray);
  font-weight: 500;
}

.hcis-tabs a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: var(--btn-radius);
  background-color: var(--primary-green);
  left: 0;
  width: 100%;
  height: 3px;
}

/* DGA "With Shadow" variant on green-tinted cards */
.green-card {
  background-color: var(--light-green);
  border-color: var(--light-green);
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
}

.bod-img-with-shadow {
  position: relative;
  display: inline-block;
}

.bod-img-with-shadow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, var(--white-0) 0%, var(--white-80) 100%);
}

.header-title-with-icon {
  margin-bottom: 12px;
}

.header-title-with-icon img {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.sector-gray-box img {
  width: 24px;
  height: 24px;
  display: inline-block;
  /* padding: 12px;
    border-radius: 50%;
    border: 1px solid var(--primary-green); */
}

.hcis-service-box {
  display: inline-block !important;
}

.hcis-service-box .header-title-with-icon img {
  width: 24px;
  height: 24px;
}

.header-title-with-icon span {
  width: calc(100% - 45px);
  display: inline-block;
}

.green-link-with-icon {
  display: inline-block;
  padding: 0 0 0 24px;
  color: var(--primary-green);
  position: relative;
  margin-top: 10px !important;
  border: 2px solid transparent !important;
}

.green-link-with-icon.link-icon-two:active,
.green-link-with-icon.link-icon-two:focus {
  border: 2px solid var(--white) !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 0 !important;
}

.green-link-with-icon::after {
  content: "";
  background-image: url(../images/link-icon.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  position: absolute;
  /* left: 0; */
  top: 5px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.link-icon-two.green-link-with-icon::after {
  background-image: url(../images/link-icon-2.svg) !important;
}

.green-gradient-bg {
  background: var(--green-gradient);
}

.hcis-table {
  border-collapse: separate;
  /* Important */
  border-spacing: 0;
  border-radius: var(--radius);
  table-layout: fixed;
}

.hcis-table th {
  padding: 16px 12px;
  color: var(--dark-gray);
}

.hcis-table td {
  padding: 20px 12px;
  color: var(--black);
}

.hcis-table th:not(:last-child) {
  border-left: 1px solid var(--border-color2);
}

.hcis-table.gray-thead-table thead th {
  background-color: var(--gray-bg2);
}

.hcis-table tr:last-child td:first-child {
  border-radius: 0px 0px var(--radius) 0px;
}

.hcis-table tr:last-child td:last-child {
  border-radius: 0 0px 0px var(--radius);
}

.hcis-table tr th:first-child {
  border-radius: 0px var(--radius) 0px 0px;
}

.hcis-table tr th:last-child {
  border-radius: var(--radius) 0px 0px 0px;
}

.breadcrumbs-list li:not(:last-child) {
  margin-left: 32px;
  position: relative;
}

.breadcrumbs-list.colored-breadcrumbs-list li:not(:last-child) {
  color: var(--white) !important;
}

.breadcrumbs-list {
  z-index: 1 !important;
}

.breadcrumbs-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22%3E%3Cpath d%3D%22M15 6s-6 4.419-6 6 6 6 6 6%22 stroke%3D%22%239DA4AE%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  width: 24px;
  height: 24px;
  top: 0;
}

.breadcrumbs-list li a {
  color: var(--gray-700) !important;
}

.colored-breadcrumbs-list li a {
  color: var(--white);
}

.breadcrumbs-list li a.active-breadcrumb {
  /* color: var(--primary-green); */
  color: #9da4ae !important;
  pointer-events: none;
}

.breadcrumbs-list.colored-breadcrumbs-list li a.active-breadcrumb {
  color: var(--sa-25) !important;
}

.breadcrumbs-list.colored-breadcrumbs-list li:not(:last-child)::after {
  filter: brightness(0) invert(1);
}

.breadcrumbs-list li a {
  font-weight: 500 !important;
}

.header-top-bar-accordion {
  background-color: var(--gray-bg2);
}

/* DGA icon sizing: inline chevron next to text = 16px (XS) */
.header-top-bar-accordion button[aria-expanded="false"] img.green-arrow,
.header-top-bar-accordion button img.green-arrow {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  transition: 0.2s ease all;
}

.header-top-bar-accordion button[aria-expanded="true"] img.green-arrow {
  transform: rotate(0deg);
  transition: 0.2s ease all;
}

.top-bar-info-item img {
  width: 52px;
  height: 52px;
}

.top-bar-info-item .top-bar-info-item-content {
  width: calc(100% - 65px);
}

.dga-contact-num img {
  width: 22px;
  height: 32px;
}

.dga-contact-num h6 {
  width: calc(100% - 40px);
}

.hcis-label {
  color: var(--dark-gray);
  position: relative;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

/* .navbar-nav a[href="https://eservices.sais.gov.sa/"] , .navbar-nav a[href="https://eservices.sais.gov.sa"] {
    display: none !important;
} */

.hcis-label.required-label {
  padding-right: 12px;
}

.hcis-label.required-label::before {
  content: "*";
  color: var(--danger-red);
  position: absolute;
  top: 0;
  right: 0;
}

.form-phone-number-wrapper {
  background: var(--gray-bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: 4px;
}

.form-control:focus,
.form-control:active {
  background-color: var(--white);
}

.form-phone-number-wrapper select {
  width: 25%;
  border: 0 !important;
}

.form-phone-number-wrapper input {
  width: 74%;
}

.hcis-form-submit a {
  display: block !important;
}

.hcis-text-list > ul {
  list-style: disc !important;
}

.hcis-text-list ul li {
  margin-bottom: 4px;
}

.hcis-text-list.nested-list ul {
  list-style: decimal;
}

.hcis-text-list.nested-list ul li ul {
  list-style: disc;
}

.min-height-300 {
  min-height: 300px;
}

.btns-sections-location a {
  background: var(--gray-bg2);
  padding: 8px 12px;
  color: var(--dark-gray);
  font-size: var(--fs-14);
}

.btns-sections-location a:not(:last-child) {
  border-left: 1px solid var(--border-color2);
}

.btns-sections-location a:first-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.btns-sections-location a:last-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.btns-sections-location a.active,
.btns-sections-location a:active,
.btns-sections-location a:focus {
  background-color: var(--primary-green);
  color: var(--white);
}

.hcis-governor-section .graybox-img img {
  object-fit: contain;
  transition: 0.3s ease all;
  height: auto;
  max-width: 480px;
  width: 100%;
}

.hcis-governor-section .graybox-img {
  position: relative;
  display: inline-block;
}

.hcis-governor-section .graybox-img::after {
  content: "";
  position: absolute;
  top: -180px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% + 308px);
  background: linear-gradient(
    180deg,
    var(--gray-bg-0) 85%,
    var(--gray-bg) 100%
  );
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.hcis-governor-section > h3.text-dark-gray {
  font-size: var(--fs-36) !important;
}

.hcis-governor-section.greybox-with-image {
  margin: 128px 0 !important;
}

.sector-box-over-section {
  /* position: absolute;
    top: 7%;
    bottom: 0;
    right: auto;
    left: 0; */
  /* display: inline-block; */
  /* width: 30%; */
  margin-top: 32px;
}

/* .sector-main-wrapper>div.position-relative {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
} */

.sector-main-wrapper
  > .position-relative
  > .section-paddings.my-4.bg-white.py-5 {
  width: 60%;
}

.sector-main-wrapper .section-paddings.my-4.bg-white.py-5 > .p-2.w-50 {
  width: 100% !important;
}

.sector-image-div img {
  max-width: 620px;
  float: left;
  margin: 0 20px 20px 0 !important;
}

.sector-box-over-section .gray-bg {
  min-width: 360px;
}

/***** News Cards Styles *****/

.news-card__item {
  /* background-color: var(--dga-black); */
  /* background-image: url(../images/white-pattern-5.svg); */
  background-repeat: no-repeat;
  background-position: left bottom;
  padding: 32px 16px 16px;
  border-radius: 17px;
  margin: 24px 0;
  height: 100%;
  min-height: 423px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: end;
  background-image: unset !important;
  background: linear-gradient(
    90deg,
    var(--sa-600-0) 0%,
    var(--sa-500-33) 100%
  ) !important;
}

.d-flex.flex-column .news-card.card {
  height: 100% !important;
}

.news-card .card-body img {
  object-position: center 20%;
}

.news-card__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 17.83px;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    transparent 0%,
    var(--overlay-dark) 100%
  );
}

.news-card__item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 1;
  mix-blend-mode: multiply;
}

.news-card__content h4 {
  line-height: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
  position: relative;
  z-index: 2;
  width: 100%;
  font-size: var(--fs-20);
  font-weight: 700 !important;
}

.media-item h5 {
  line-height: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.news-card__content h4::after {
  content: "“";
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--fs-36);
  color: var(--white);
  z-index: 2;
  font-weight: 500;
  line-height: inherit;
}

.news-card__content h5 {
  position: relative;
  z-index: 2;
  line-height: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 95%;
  font-size: var(--fs-16);
  font-weight: 400 !important;
}

.news-item-action__wrapper .btn-primary {
  /* border-radius: 4.5px; */
  margin-top: 32px;
}

.owl-dots button:focus {
  outline: none !important;
}

.news-item-action__wrapper {
  display: block;
  text-align: end;
  z-index: 2;
  position: relative;
}

.owl-carousel .owl-dots .owl-dot span {
  width: 12px !important;
  height: 12px !important;
  margin: 4px 8px !important;
  background: var(--border-color1) !important;
  display: block !important;
  border-radius: 24px !important;
}

.owl-carousel .owl-dots .owl-dot:hover span {
  background: var(--border-color1) !important;
}

.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--primary-green) !important;
}

.owl-nav {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
}

.owl-prev,
.owl-next {
  background: #1b8354 !important;
  margin: 12px 12px !important;
  font-size: var(--fs-18) !important;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  text-align: center;
  box-shadow: unset !important;
  outline: unset !important;
}

.owl-prev:hover,
.owl-next:hover {
  background-color: #166a45 !important;
}

.owl-prev:active,
.owl-next:active {
  background-color: #104631 !important;
}

.owl-prev:focus,
.owl-next:focus {
  background-color: var(--primary-green) !important;
  /* border: 2px solid var(--white) !important; */
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px !important;
}

.owl-carousel .owl-nav .owl-prev.disabled,
.owl-carousel .owl-nav .owl-next.disabled,
.owl-carousel .owl-nav .owl-prev.disabled:hover,
.owl-carousel .owl-nav .owl-next.disabled:hover,
.owl-carousel .owl-nav .owl-prev.disabled:focus,
.owl-carousel .owl-nav .owl-next.disabled:focus,
.owl-carousel
  .owl-nav
  .owl-prev.disabled:active
  .owl-carousel
  .owl-nav
  .owl-next.disabled:active {
  background: var(--border-color1) !important;
  outline: none !important;
  width: 32px;
  height: 32px;
  color: var(--gray-400) !important;
  border: none !important;
}

.owl-carousel .owl-nav .owl-prev.disabled span {
  color: var(--gray-400) !important;
}

.owl-prev span,
.owl-next span {
  font-size: var(--fs-18);
}

.owl-prev:active span,
.owl-prev:focus span,
.owl-next:active span,
.owl-next:focus span {
  color: var(--white) !important;
}

.home-banners-item,
.mobile-banner-item {
  height: 600px;
  overflow: hidden;
  cursor: pointer;
}

.home-banners-wrapper img {
  object-fit: cover;
  object-position: bottom;
  min-height: 600px !important;
}

.home-banners-item .banner-hover-img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.home-banners-item:hover .banner-hover-img {
  opacity: 1 !important;
  transition: opacity 0.5s ease-in-out;
}

.home-banners-item:hover .banner-default-img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.card-onhover:hover {
  box-shadow: 0px 4px 8px -2px var(--card-shadow1),
    0px 2px 4px -2px var(--card-shadow1);
}

.hcis-logos-carousel .owl-nav {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -113px;
}

.e-services-carousel .owl-stage,
.all-sectors-carousel .owl-stage {
  display: flex;
}

.card.bg-white .card-body {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.card.bg-white .card-body a.btn-green {
  margin-top: auto !important;
}

.all-sectors-carousel .card {
  height: 100%;
}

.e-services-carousel.owl-drag .owl-item,
.all-sectors-carousel .owl-item {
  display: flex;
  flex-direction: column;
}

.hcis-logos-carousel button.owl-prev {
  position: relative;
  right: -50px;
}

.hcis-logos-carousel button.owl-next {
  position: relative;
  left: -50px;
}

/* DGA Default card — sm shadow at resting state */
.sector-box-item {
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
  border: 1px solid var(--border-color2);
  padding: 20px;
  border-radius: var(--radius);
  background-color: var(--white);
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  /* flex: 1; */
}

.all-sectors-carousel .owl-item {
  display: flex !important;
  flex: 1 0 auto !important;
}

.all-sectors-carousel .owl-nav {
  text-align: center;
}

html[dir="rtl"] .owl-theme .owl-dots {
  direction: rtl !important;
}

path.hcis-branch.active-city {
  fill: var(--primary-green);
  stroke: var(--primary-green);
  fill-opacity: 1 !important;
  position: relative;
}

path.hcis-branch {
  fill-opacity: 1;
  fill: var(--light-mint);
}

.hcis-branch.active-city::after {
  content: "";
  position: absolute;
  background-image: url(../images/location-share.svg);
  background-position: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.hcis-map path {
  pointer-events: all;
  cursor: pointer;
  stroke: var(--primary-green) !important;
  stroke-width: 0.6 !important;
  stroke-opacity: 0.9 !important;
  transition: all ease 0.5s;
}

.city-content {
  display: none;
  transition: all ease 0.5s;
}

.city-content.active {
  display: block;
}

.e-services-carousel .card-body > h4.text-dark-gray,
.related-services-carousel .card-body > h4.text-dark-gray {
  min-height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.all-sectors-carousel .sector-box-item h5.text-dark-gray,
.e-services-carousel .card .card-body h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* min-height: 35px; */
  margin-bottom: 5px;
}

.e-services-carousel .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.e-services-carousel .card .card-body .btn-green {
  margin-top: auto;
}

.home-statistics__item {
  display: flex;
  flex-direction: column;
}

/* DGA Featured Icon — lg (48px), circle, light-brand background */
.img-border-rounded {
  width: 48px;
  height: 48px;
  min-width: 48px;
  /* background: var(--light-green-bg); */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid var(--primary-green);
}

.home-statistics__item .img-border-rounded {
  margin-bottom: 24px;
}

.related-services-item .img-border-rounded svg path {
  fill: var(--primary-green) !important;
}

.green-gradiant {
  position: relative;
}

.green-gradiant::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  background: var(--secondary-green);
  z-index: -1;
}

.header-with-title-row {
  position: relative;
  z-index: 1 !important;
}

.related-services-item img {
  display: inline-block !important;
  width: auto !important;
}

.sector-inner-slider .owl-stage,
.sector-inner-other-sectors .owl-stage {
  display: flex;
  flex-wrap: wrap;
}

.sector-inner-slider .owl-item,
.sector-inner-other-sectors .owl-item,
.news-cards .owl-item {
  display: flex;
  height: auto;
}

.related-services-carousel .owl-stage,
.news-cards .owl-stage,
.related-services-carousel-en .owl-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23161616'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat;
}

.sector-inner-slider .card,
.sector-inner-other-sectors .card,
.news-cards .card {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.related-services-item {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.related-services-item .card-body {
  display: flex;
  flex-direction: column;
}

.related-services-item .card-body a.text-end.d-block.card-arrow-link {
  margin-top: auto !important;
}

.links-submit-button .feedback-submit-li {
  flex: 1 !important;
  text-align: end !important;
}

.home-banners-main-wrapper .home-main-banner-div img,
.home-banners-main-wrapper .banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  cursor: pointer;
  transition: all ease 0.3s;
}

.sector-inner-slider img {
  width: auto !important;
}

.banner-item {
  position: relative;
  overflow: hidden;
}

.banner-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.4s ease;
}

.banner-item .colored-version {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.banner-item:hover .colored-version {
  opacity: 1;
}

.hcis-management-team img {
  width: 100%;
  /* max-width: 1000px; */
  object-fit: cover;
}

.hcis-about-img-wrapper img {
  width: 100%;
  max-width: 1280px;
  object-fit: cover;
}

h3.text-dark-gray {
  font-size: var(--fs-30) !important;
}

.media-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-second .footer-logo {
  width: 110px !important;
  height: 100px !important;
}

/* .home-statistics__item img {
    width: 56px;
    border: 1px solid green;
    padding: 12px 8px;
    border-radius: 50%;
    height: 56px;
} */

.header-title-with-icon p {
  color: var(--black);
}

.card.card-border.hcis-radius .card-body > img[alt="Icon"] {
  max-width: 48px;
  height: 48px;
  /* padding: 12px 12px;
    border-radius: 50%;
    border: 1px solid var(--primary-green); */
}

/* .sector-inner-slider .card.card-border.hcis-radius .card-body>img[alt="Icon"] {
    padding: 12px 12px !important;
} */

.hcis-media-card .card-img-overlay {
  background: linear-gradient(
    to top,
    var(--border-color1) 30%,
    transparent,
    transparent
  );
}

.news-inner-image img {
  width: 100%;
  max-width: 470px;
  border-radius: var(--btn-radius);
}

.owl-carousel.news-cards .owl-item img {
  object-position: center 20% !important;
}

.card.learned-lesson-card {
  height: 100%;
}

.incident-desc h4.text-dark-gray,
.incident-causes .hcis-text-list ul li,
.learned-lessons ol li {
  font-size: var(--fs-18) !important;
}

.green-pattern-bg {
  background: url(../../assets/images/green-pattern-bg.svg);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: right 100% bottom 100%;
}

.page-question-yes ul.d-flex > li.form-check,
.page-question-no ul.d-flex > li.form-check {
  flex: 1 !important;
  text-align: end !important;
}

.page-question-yes ul.d-flex > li,
.page-question-no ul.d-flex > li {
  margin-bottom: 0.5rem !important;
}

.page-question-yes .form-check-input,
.page-question-no .form-check-input {
  width: 24px;
  height: 24px;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--light-gray);
  box-shadow: none;
  border-radius: 2px;
  background-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover — DGA neutral-100 ring */
.page-question-yes .form-check-input:hover,
.page-question-no .form-check-input:hover {
  box-shadow: 0 0 0 1px var(--gray-bg2);
  /* background-color: var(--secondary-green); */
}

/* Pressed */
.page-question-yes .form-check-input:active,
.page-question-no .form-check-input:active {
  /* box-shadow: 0 0 0 1px var(--gray-bg2); */
  background-color: var(--border-color2);
}

/* Checked — DGA brand green */
.page-question-yes .form-check-input:checked,
.page-question-no .form-check-input:checked {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

.page-question-yes .form-check-input:checked:hover,
.page-question-no .form-check-input:checked:active {
  background-color: #14573a;
  border-color: #14573a;
}

.page-question-yes .form-check-input:checked:focus-visible{
/* .page-question-no .form-check-input:checked:focus  */
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px !important;
}

/* Focused — DGA: green outline + focus ring shadow */
.page-question-yes .form-check-input:focus-visible,
.page-question-no .form-check-input:focus-visible {
  outline: 2px solid var(--dga-black);
  outline-offset: 2px;
  /* box-shadow: 0 0 0 2px var(--gray-bg2); */
  /* background-color: var(--secondary-green); */
}

/* Remove Bootstrap's default blue focus glow */
.page-question-yes .form-check-input:focus,
.page-question-no .form-check-input:focus {
  /* background-color: var(--secondary-green); */
  box-shadow: none;
}

input[type="radio"].form-check-input {
  border-radius: 50%;
  border: 1px solid var(--light-gray);
  margin: 0 8px;
}

.form-check {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

label.form-check-label {
  color: var(--black);
}

ul.d-flex.flex-wrap li span {
  color: var(--black);
}

.feedback-btns > a {
  text-decoration: underline !important;
}

/* DGA Default card hover — shadow handled by general.css, keep white bg */
.all-services-row .card:hover,
.related-services-carousel .card:hover {
  background: var(--white);
}

.all-services-row .card,
.related-services-carousel .card {
  border: 1px solid var(--border-color2);
  box-shadow: 0px 1px 3px 0px var(--shadow);
  cursor: pointer;
}

.all-services-row .card .card-body {
  display: flex;
  flex-direction: column;
}

.all-services-row .card .card-body a {
  margin-top: auto !important;
}

/* DGA focus handled via :focus-within outline in general.css */

/* .about-sector-section {
    width: 50% !important;
} */

/* Rating Stars Styles */

.rating {
  display: inline-flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
}

.rating button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.rating button svg {
  width: 100%;
  height: 100%;
}

.star svg {
  display: block;
}

.star path {
  fill: var(--border-color1);
  transition: fill 0.15s ease, filter 0.15s ease;
}

.star .half {
  fill: transparent;
}

/* Hover state - gray with shadow */
.star.hover path:not(.half) {
  fill: var(--gray-bg2);
  filter: drop-shadow(0px 12px 16px -6px var(--shadow-8pct));
}

.star.half-hover path:not(.half) {
  fill: var(--gray-bg2);
  filter: drop-shadow(0px 12px 16px -6px var(--shadow-8pct));
}

.star.half-hover .half {
  fill: var(--gray-bg2);
  filter: drop-shadow(0px 12px 16px -6px var(--shadow-8pct));
}

/* Locked state - green */
.star.locked path:not(.half) {
  fill: var(--primary-green);
  filter: none;
}

.star.half-locked path:not(.half) {
  fill: var(--border-color1);
}

.star.half-locked .half {
  fill: var(--primary-green);
  filter: none;
}

/*.darkmode .close-button svg  {*/
/*    filter: brightness(25);*/
/*}*/

.search-input {
  display: none !important;
}

.governor-speech-ul {
  list-style: disc;
  padding: 0 12px;
}

.governor-speech-ul li {
  font-size: var(--fs-16);
  margin-bottom: 4px;
  color: var(--dga-black);
  font-weight: 500;
}

.news-seemore-section {
  margin-top: 12px !important;
}

.news-seemore-section > h3 {
  margin-bottom: 0 !important;
}
.news-seemore-section > div.d-flex.justify-content-between {
  align-items: center !important;
}

.activities-card-item .card-body.p-3 > img {
  object-position: center 2% !important;
}

.green-card .btn.btn-green {
  display: none !important;
}

@media only screen and (min-width: 1400px) {
  .home-banners-wrapper img {
    min-height: 843px;
  }

  .home-banners-item,
  .mobile-banner-item {
    height: 798px;
  }
}

@media only screen and (max-width: 1200px) {
  .hcis-governor-section > h3.text-dark-gray {
    font-size: var(--fs-30) !important;
  }

  /* .about-sector-section {
        width: 100% !important;
    } */

  .sector-main-wrapper
    > .position-relative
    > .section-paddings.my-4.bg-white.py-5 {
    width: 100%;
  }

  .header-burger-side button {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  h3.text-dark-gray {
    font-size: var(--fs-18) !important;
    font-weight: 600 !important;
  }

  .btn-green,
  .btn-primary {
    padding: 8px 16px !important;
  }

  .hcis-map {
    width: 100%;
    height: 100%;
    margin-bottom: 32px;
  }

  .sector-box-item {
    min-height: 190px;
  }

  /* .hcis-governor-section .graybox-img img {
        max-width: 700px !important;
        min-height: 700px !important;

    } */

  .hcis-governor-section .graybox-img::after {
    background: transparent !important;
  }

  .hcis-governor-section > .d-flex {
    align-items: self-end !important;
  }

  .hcis-governor-section .graybox-img {
    margin-bottom: 12px;
  }

  .hcis-governor-section .graybox-img::after {
    top: 0 !important;
    /* Reset to match image position */
    height: 100%;
  }

  .sector-box-over-section .gray-bg {
    width: 100% !important;
    min-width: unset;
  }

  .sector-box-over-section {
    position: relative !important;
  }

  .sector-main-wrapper .w-50 {
    width: 100% !important;
  }
}

@media only screen and (min-width: 990px) {
  .home-news {
    padding-left: 0 !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sector-image-div img {
    max-width: 491px;
  }
}

@media only screen and (max-width: 992px) {
  .sector-image-div img {
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .about-sector-section {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}

@media only screen and (max-width: 959px) {
  .news-card__item {
    min-height: 450px;
  }

  .section-paddings {
    padding-right: var(--spacing-3xl); /* 24px — tablet */
    padding-left: var(--spacing-3xl);
  }

  .header-with-search {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .header-with-search .search-input {
    width: calc(100% - 45px);
    padding: 12px 40px 12px 12px;
    background-size: 17px;
    background-position: center right 17px;
  }

  .top-bar-info-item img {
    width: 40px;
    height: 40px;
  }

  .top-bar-info-item .top-bar-info-item-content {
    width: calc(100% - 50px);
  }

  .top-bar-info-item .top-bar-info-item-content h5 {
    font-size: var(--fs-18);
  }

  .form-phone-number-wrapper select {
    width: 40%;
    border: 0 !important;
  }

  .form-phone-number-wrapper input {
    width: 59%;
  }
}

@media only screen and (max-width: 768px) {
  * {
    font-size: var(--fs-14);
  }

  .banner-item .colored-version {
    position: static;
    opacity: 1;
  }

  .banner-item .green-version {
    display: none;
  }

  .hcis-logos-carousel button.owl-prev {
    right: -42px;
  }

  .hcis-logos-carousel button.owl-next {
    left: -42px;
  }

  .home-banners-item,
  .mobile-banner-item {
    height: 962px !important;
  }

  .home-banners-item img,
  .mobile-banner-item img {
    min-height: 962px !important;
  }
}

@media only screen and (max-width: 600px) {
  .section-paddings {
    padding-right: var(--container-padding-mobile); /* 16px — DGA mobile */
    padding-left: var(--container-padding-mobile);
  }

  .home-banners-item img,
  .mobile-banner-item img {
    min-height: 600px !important;
  }

  .home-banners-item,
  .mobile-banner-item {
    height: 600px !important;
  }

  .hcis-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hcis-tabs li a {
    white-space: nowrap;
  }

  .hcis-governor-section .graybox-img img {
    max-width: 100% !important;
  }
}