/* =========================================================
   Institute compact sizing system — 2026-08-17
   Real CSS sizing only: no body/page zoom and no layout scaling.
   Shared sizing utilities live here; selector-specific typography is defined in its source stylesheet.
   University typeface weights available in the supplied project: 400, 700.
   ========================================================= */

:root {
  /* Canonical typography tokens — single source of truth */
  --type-font: "Almaarefa", sans-serif;
  --type-weight-regular: 400;
  --type-weight-bold: 700;

  --type-display: 44px;
  --type-page-title: 34px;
  --type-program-title: 31px;
  --type-section-title: 28px;
  --type-subsection-title: 24px;
  --type-card-title: 20px;
  --type-card-title-sm: 17px;
  --type-body-lg: 16px;
  --type-body: 14.5px;
  --type-body-small: 13px;
  --type-caption: 12px;
  --type-micro: 10.5px;

  --type-nav: 13px;
  --type-button: 13.5px;
  --type-label: 13px;
  --type-input: 13px;
  --type-breadcrumb: 12.5px;
  --type-footer: 12.5px;

  --leading-solid: 1;
  --leading-display: 1.15;
  --leading-heading: 1.2;
  --leading-subheading: 1.25;
  --leading-control: 1.3;
  --leading-card: 1.35;
  --leading-caption: 1.45;
  --leading-small: 1.55;
  --leading-title-loose: 1.6;
  --leading-body: 1.7;
  --leading-relaxed: 1.8;

  /* Backward-compatible aliases used by layout/component code. */
  --ui-font: var(--type-font);
  --ui-weight-regular: var(--type-weight-regular);
  --ui-weight-bold: var(--type-weight-bold);
  --ui-display: var(--type-display);
  --ui-h1: var(--type-page-title);
  --ui-h2: var(--type-section-title);
  --ui-h3: var(--type-card-title);
  --ui-h4: var(--type-card-title-sm);
  --ui-body-lg: var(--type-body-lg);
  --ui-body: var(--type-body);
  --ui-body-sm: var(--type-body-small);
  --ui-caption: var(--type-caption);
  --ui-nav: var(--type-nav);
  --ui-button: var(--type-button);
  --ui-label: var(--type-label);
  --ui-input: var(--type-input);
  --ui-breadcrumb: var(--type-breadcrumb);
  --ui-footer: var(--type-footer);

  --font-size-display: var(--type-display);
  --font-size-h1: var(--type-page-title);
  --font-size-h2: var(--type-section-title);
  --font-size-h3: var(--type-card-title);
  --font-size-h4: var(--type-card-title-sm);
  --font-size-body-lg: var(--type-body-lg);
  --font-size-body: var(--type-body);
  --font-size-small: var(--type-body-small);
  --font-size-caption: var(--type-caption);
  --font-size-label: var(--type-label);
  --font-size-input: var(--type-input);
  --font-size-button: var(--type-button);
  --font-size-nav: var(--type-nav);
  --font-size-breadcrumb: var(--type-breadcrumb);
  --font-size-footer: var(--type-footer);


  /* Layout */
  --container: 1120px;
  --ui-container: 1120px;
  --ui-button-height: 40px;
  --ui-button-height-sm: 36px;
  --ui-input-height: 42px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-card: 16px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

}

/* University font is the only named font used by the website UI. */
html, body, button, input, textarea, select, summary{
  font-family:var(--type-font);
}

body {
  font-weight:var(--type-weight-regular);
  line-height:var(--leading-body);
}

/* -----------------------------------------------------------
   Horizontal-overflow safety net (typography-only concern).
   Does not touch layout, spacing, colors or element order —
   it only stops a text run from ever pushing the frame wider
   than the viewport at any of the sizes below.
   ----------------------------------------------------------- */
html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
p, span, a, li, label, button, input, textarea,
.container, .card, .card-title, .card-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

.container {
  width: min(var(--ui-container), calc(100% - 40px)) !important;
  margin-inline: auto;
}

/* =========================================================
   Shared header
   ========================================================= */
.site-header .header-inner,
.site-header.program-white-header .header-inner {
  min-height: 80px !important;
  grid-template-columns: 185px minmax(0, 1fr) auto !important;
  gap: 18px !important;
}

.site-header .brand img,
.site-header.program-white-header .brand img {
  width: 180px !important;
  height: 50px !important;
  object-fit: contain !important;
}

.site-header .desktop-nav,
.site-header.program-white-header .desktop-nav {
  gap: 22px !important;


}


.site-header:not(.program-white-header) .desktop-nav a {
  padding: 25px 0 19px !important;
}

.site-header.program-white-header .desktop-nav a {
  padding: 10px 0 !important;
}

.header-actions,
.site-header.program-white-header .header-actions {
  gap: 7px !important;
}

.account-button,
.certificate-button,
.language-switch select,
.site-header.program-white-header .account-button,
.site-header.program-white-header .certificate-button,
.site-header.program-white-header .language-switch select {
  min-height: 36px !important;
  height: 36px !important;


}

.account-button,
.site-header.program-white-header .account-button {
  padding: 6px 14px !important;
}

.certificate-button,
.site-header.program-white-header .certificate-button {
  padding: 6px 12px !important;
}

.language-switch select,
.site-header.program-white-header .language-switch select {
  min-width: 56px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.site-header .mobile-menu summary,
.site-header.program-white-header .mobile-menu summary {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--ui-radius-sm) !important;
}

.site-header .mobile-menu summary i,
.site-header.program-white-header .mobile-menu summary i {
  width: 18px !important;
}

.site-header .mobile-panel,
.site-header.program-white-header .mobile-panel {
  width: min(280px, calc(100vw - 28px)) !important;
  padding: 10px !important;
  border-radius: var(--ui-radius-md) !important;
}

.site-header .mobile-panel a,
.site-header.program-white-header .mobile-panel a {
  padding: 9px 11px !important;

}

/* =========================================================
   Shared footer
   ========================================================= */
.site-footer {
  padding: 26px 0 8px !important;
}

.site-footer::before {
  top: 17px !important;
}

.footer-content {
  grid-template-columns: 1.05fr 1fr 1.38fr .82fr !important;
  gap: 24px !important;
}

.footer-brand img {
  width: 190px !important;
  height: 108px !important;
}

.footer-column h3,
.footer-social h3 {
  margin-bottom: 6px !important;


}


.footer-social > div {
  gap: 8px !important;
}

.footer-social a {
  width: 40px !important;
  height: 40px !important;
}

.footer-social svg {
  width: 20px !important;
  height: 20px !important;
}

.footer-bottom {
  width: min(var(--ui-container), calc(100% - 40px)) !important;
  margin-top: 4px !important;


}

/* =========================================================
   Landing page
   ========================================================= */
body[data-page="index"] .section {
  padding: 62px 0;
}

body[data-page="index"] .hero {
  min-height: 620px !important;
}

body[data-page="index"] .hero-content {
  padding-top: 48px !important;
  padding-bottom: 66px !important;
}

body[data-page="index"] .hero-copy {
  max-width: 560px !important;
}

body[data-page="index"] .hero h1 {
  margin-bottom: 12px !important;


}

body[data-page="index"] .hero h3 {
  margin: 0 0 13px !important;


}

body[data-page="index"] .hero-copy > p:not(.hero-kicker) {
  margin-bottom: 22px !important;


}

body[data-page="index"] .primary-button {
  min-height: var(--ui-button-height) !important;
  padding: 7px 17px !important;
  gap: 6px !important;

  border-radius: 5px !important;
}

body[data-page="index"] .hero-wave {
  height: 82px !important;
}

body[data-page="index"] .director-message.section {
  padding-top: 34px !important;
  padding-bottom: 32px !important;
}

body[data-page="index"] .director-title-row {
  margin-bottom: 14px !important;
  gap: 18px !important;
}

body[data-page="index"] .director-title-row h2 {
  padding: 7px 13px 7px 0 !important;


}

body[data-page="index"] .director-top-line {
  height: 28px !important;
  margin-top: 13px !important;
}

body[data-page="index"] .director-text {
  width: min(980px, 82%) !important;
  margin-bottom: 16px !important;
}

body[data-page="index"] .director-text p {
  margin-bottom: 7px !important;


}


body[data-page="index"] .director-signature .director-email {
  margin-top: 5px !important;
  gap: 5px !important;
}


body[data-page="index"] .director-signature .director-email-icon svg {
  width: 14px !important;
  height: 14px !important;
}

body[data-page="index"] .about {
  padding-top: 66px !important;
}

body[data-page="index"] .about-intro h2,
body[data-page="index"] .section-heading h2 {
  margin-bottom: 12px !important;


}


body[data-page="index"] .about-body,
body[data-page="index"] .about-grid {
  gap: 54px !important;
}

body[data-page="index"] .about-image img {
  height: 510px !important;
  border-radius: 28px !important;
}

body[data-page="index"] .about-cards {
  gap: 14px !important;
}

body[data-page="index"] .identity-card {
  grid-template-columns: 64px 1fr !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border-radius: var(--ui-radius-card) !important;
}

body[data-page="index"] .identity-card + .identity-card {
  margin-top: 14px !important;
}

body[data-page="index"] .identity-card img {
  width: 52px !important;
  height: 52px !important;
}

/* Objectives icon is visually denser than the vision/mission artwork at the
   same box size, so it is sized down slightly to read as visually balanced.
   Card size, text and alignment are untouched. */
body[data-page="index"] .objectives-card .objectives-heading-icon {
  width: 40px !important;
  height: 40px !important;
}


body[data-page="index"] .why.section {
  padding-top: 56px !important;
  padding-bottom: 20px !important;
}

body[data-page="index"] .why .section-heading h2::after {
  width: 46px !important;
  height: 2px !important;
  margin-top: 10px !important;
}

body[data-page="index"] .features-grid {
  gap: 18px !important;
}

body[data-page="index"] .feature-card {
  min-height: 176px !important;
  padding: 20px 22px !important;
  border-radius: var(--ui-radius-md) !important;
}

body[data-page="index"] .feature-card h3,
body[data-page="index"] .feature-card h4 {
  margin-bottom: 10px !important;


}


body[data-page="index"] .programs.section {
  padding-top: 18px !important;
  padding-bottom: 58px !important;
}

body[data-page="index"] .programs-title {
  margin-bottom: 26px !important;
}

body[data-page="index"] .programs-breadcrumb {
  gap: 6px !important;
  margin-bottom: 18px !important;

}


body[data-page="index"] .program-choice-grid,
body[data-page="index"] .program-paths-grid,
body[data-page="index"] .health-track-grid {
  gap: 14px !important;
}

body[data-page="index"] .choice-card {
  min-height: 225px !important;
  border-radius: 12px !important;
}

body[data-page="index"] .choice-base,
body[data-page="index"] .choice-hover {
  padding: 20px !important;
}


body[data-page="index"] .program-paths-grid {
  width: min(1000px, 100%) !important;
}

body[data-page="index"] .program-path-card {
  min-height: 142px !important;
  border-radius: 11px !important;
}

body[data-page="index"] .program-path-base {
  right: 14px !important;
  left: 14px !important;
  bottom: 11px !important;
}


body[data-page="index"] .program-path-hover {
  padding: 18px 16px !important;
}

body[data-page="index"] .health-track-grid {
  width: min(1010px, 100%) !important;
  margin-top: 18px !important;
}

body[data-page="index"] .health-track-card {
  height: 190px !important;
  min-height: 190px !important;
  border-radius: 12px !important;
}

body[data-page="index"] .health-track-base {
  right: 16px !important;
  left: 16px !important;
  bottom: 14px !important;
}

body[data-page="index"] .health-track-base h3,
body[data-page="index"] .health-track-hover h3 {
  margin-bottom: 5px !important;

}


body[data-page="index"] .health-track-hover {
  padding: 20px 18px !important;
}

body[data-page="index"] .life-support-courses-grid {
  width: min(980px, 100%) !important;
  gap: 20px 18px !important;
}

body[data-page="index"] .life-support-course-card,
body[data-page="index"] .life-support-course-media,
body[data-page="index"] .life-support-course-image {
  min-height: 245px !important;
}

body[data-page="index"] .life-support-course-card {
  border-radius: 13px !important;
}

body[data-page="index"] .life-support-course-content {
  padding: 20px 21px !important;
}

body[data-page="index"] .life-support-course-content h3 {
  min-height: 44px !important;
  margin-bottom: 14px !important;

}


body[data-page="index"] .life-support-course-facts {
  gap: 13px 11px !important;
}

body[data-page="index"] .course-fact {
  gap: 7px !important;

}

body[data-page="index"] .course-fact img {
  width: 29px !important;
  height: 29px !important;
  flex-basis: 29px !important;
}

body[data-page="index"] .life-support-course-arrow {
  left: 18px !important;
  bottom: 16px !important;
  width: 40px !important;
  height: 40px !important;
}

body[data-page="index"] .life-support-course-arrow img {
  width: 47px !important;
  height: 47px !important;
}

body[data-page="index"] .partners.section,
body[data-page="index"] .faq.section {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

body[data-page="index"] .faq-item summary {
  min-height: 48px !important;
  padding: 12px 18px !important;

}

body[data-page="index"] .faq-answer {
  padding: 0 18px 15px !important;
}


/* =========================================================
   Programme detail pages: BLS / ACLS / Heartsaver / PHTLS / OBA
   ========================================================= */
.program-detail-page .program-detail-hero {
  height: 230px !important;
  min-height: 230px !important;
}


.oba-program-page .oba-hero-title h1 {
  max-width: 680px !important;
  padding: 12px 20px !important;
}

.program-detail-page .program-detail-content {
  padding: 38px 0 36px !important;
}

.program-detail-page .program-detail-grid {
  grid-template-columns: minmax(260px, .76fr) minmax(0, 1.24fr) !important;
  gap: 24px !important;
}

.program-detail-page .program-detail-side,
.program-detail-page .program-detail-primary {
  gap: 20px !important;
}

.program-detail-page .detail-card {
  border-radius: 12px !important;
}

.program-detail-page .intro-card,
.program-detail-page .program-detail-primary .intro-card {
  padding: 20px 24px !important;
  margin-bottom: 0 !important;
}

.program-detail-page .program-meta-card,
.program-detail-page .topics-card,
.program-detail-page .objectives-card-detail,
.program-detail-page .features-card-detail,
.program-detail-page .audience-card {
  padding: 20px 22px !important;
}

.program-detail-page .detail-card-heading {
  gap: 9px !important;
}

.program-detail-page .detail-card-heading img {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
}


.program-detail-page .program-meta-card h2 {
  margin-bottom: 12px !important;
}

.program-detail-page .program-price {
  margin-bottom: 13px !important;
}


.program-detail-page .program-price img {
  width: 29px !important;
  height: 29px !important;
}


.program-detail-page .meta-row {
  grid-template-columns: 26px 1fr !important;
  gap: 8px !important;
  padding: 9px 0 !important;

}

.program-detail-page .meta-row img {
  width: 21px !important;
  height: 21px !important;
}

.program-detail-page .register-button {
  min-height: var(--ui-button-height) !important;
  margin-top: 10px !important;
  border-radius: var(--ui-radius-sm) !important;

}

.program-detail-page .detail-card ul {
  margin-top: 12px !important;
  padding-right: 18px !important;


}

.program-detail-page .trainer-panel {
  grid-template-columns: 160px minmax(0, 1fr) !important;
  gap: 22px !important;
  min-height: 180px !important;
  padding: 20px 26px 16px 30px !important;
  margin-top: 24px !important;
}

.program-detail-page .trainer-icon-wrap {
  width: 140px !important;
  height: 145px !important;
}

.program-detail-page .trainer-icon-wrap img {
  width: 135px !important;
  height: 140px !important;
}

.program-detail-page .trainer-copy p {
  margin-top: 9px !important;
}

.program-detail-page .trainer-contact {
  margin-top: 12px !important;
  gap: 8px !important;
}

.program-detail-page .trainer-contact a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

.program-detail-page .trainer-contact img {
  width: 18px !important;
  height: 18px !important;
}

/* OBA interest form remains part of OBA but follows the same compact controls. */
.oba-program-page .oba-interest-card {
  margin-top: 24px !important;
  padding: 24px !important;
  gap: 24px !important;
  border-radius: 12px !important;
}


.oba-program-page .oba-interest-form-grid {
  gap: 11px !important;
}

.oba-program-page .oba-interest-form input,
.oba-program-page .oba-interest-form select {
  min-height: var(--ui-input-height) !important;
  height: var(--ui-input-height) !important;
  padding: 7px 10px !important;

  border-radius: var(--ui-radius-sm) !important;
}

/* =========================================================
   Actuarial programme
   ========================================================= */
body[data-page="actuarial"] .actuarial-program-hero {
  min-height: 250px !important;
}

body[data-page="actuarial"] .actuarial-breadcrumb {
  gap: 6px !important;
  margin-bottom: 16px !important;

}

body[data-page="actuarial"] .actuarial-program-hero h1 {
  max-width: 700px !important;


}

body[data-page="actuarial"] .actuarial-program-hero p {
  max-width: 680px !important;
  margin-top: 9px !important;


}

body[data-page="actuarial"] .actuarial-program-content {
  padding: 40px 0 38px !important;
}

body[data-page="actuarial"] .actuarial-layout {
  gap: 24px !important;
}

body[data-page="actuarial"] .actuarial-side,
body[data-page="actuarial"] .actuarial-main {
  gap: 18px !important;
}

body[data-page="actuarial"] .actuarial-card {
  padding: 20px 22px !important;
  border-radius: 12px !important;
}

body[data-page="actuarial"] .actuarial-card-title {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body[data-page="actuarial"] .actuarial-card-title img {
  width: 27px !important;
  height: 27px !important;
}


body[data-page="actuarial"] .actuarial-stages {
  gap: 8px !important;
}

body[data-page="actuarial"] .actuarial-stages li,
body[data-page="actuarial"] .actuarial-opportunities span {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 8px !important;
}


body[data-page="actuarial"] .actuarial-interest-card {
  gap: 24px !important;
  margin-top: 22px !important;
  padding: 24px !important;
  border-radius: 12px !important;
}

body[data-page="actuarial"] .actuarial-interest-copy h2 {
  margin: 5px 0 8px !important;

}


body[data-page="actuarial"] .actuarial-form-grid {
  gap: 11px !important;
}

body[data-page="actuarial"] .actuarial-form label,
body[data-page="actuarial"] .actuarial-field-title {
  gap: 5px !important;

}

body[data-page="actuarial"] .actuarial-form input,
body[data-page="actuarial"] .actuarial-form select {
  min-height: var(--ui-input-height) !important;
  height: var(--ui-input-height) !important;
  padding: 7px 10px !important;
  border-radius: var(--ui-radius-sm) !important;

}

/* =========================================================
   Registration request
   ========================================================= */
body[data-page="registration-request"] .registration-hero {
  height: 235px !important;
  min-height: 235px !important;
}

body[data-page="registration-request"] .registration-hero::before {
  height: 36px !important;
}

body[data-page="registration-request"] .registration-hero-content h1 {
  margin-bottom: 7px !important;


}


body[data-page="registration-request"] .registration-main {
  padding: 36px 0 34px !important;
}

body[data-page="registration-request"] .registration-container {
  width: min(100% - 40px, 840px) !important;
}

body[data-page="registration-request"] .registration-card {
  padding: 34px 40px 38px !important;
  border-radius: 22px !important;
}

body[data-page="registration-request"] .registration-section-heading {
  gap: 9px !important;
  margin-bottom: 22px !important;
}


body[data-page="registration-request"] .registration-section-icon,
body[data-page="registration-request"] .registration-phone-icon {
  width: 33px !important;
  height: 33px !important;
  flex-basis: 33px !important;
}

body[data-page="registration-request"] .registration-grid-three {
  gap: 18px 22px !important;
}

body[data-page="registration-request"] .registration-grid-two {
  gap: 18px 36px !important;
}

body[data-page="registration-request"] .registration-grid-compact {
  max-width: 530px !important;
  margin-top: 24px !important;
}

body[data-page="registration-request"] .registration-field {
  gap: 5px !important;

}

body[data-page="registration-request"] .registration-field > span {
  min-height: 18px !important;
}

body[data-page="registration-request"] .registration-field input,
body[data-page="registration-request"] .registration-field select,
body[data-page="registration-request"] .birth-date-control,
body[data-page="registration-request"] .birth-date-display,
body[data-page="registration-request"] .birth-date-native {
  height: var(--ui-input-height) !important;
  min-height: var(--ui-input-height) !important;
}

body[data-page="registration-request"] .registration-field input,
body[data-page="registration-request"] .registration-field select {
  padding-inline: 13px !important;
  border-radius: var(--ui-radius-sm) !important;

}

body[data-page="registration-request"] .registration-field select {
  padding-left: 40px !important;
  background-position: left 12px center !important;
  background-size: 16px 16px !important;
}

body[data-page="registration-request"] .field-title-with-icon svg {
  width: 22px !important;
  height: 22px !important;
}


body[data-page="registration-request"] .registration-divider {
  margin-top: 22px !important;
  margin-bottom: 20px !important;
}

body[data-page="registration-request"] .registration-major-divider {
  margin-top: 30px !important;
  margin-bottom: 21px !important;
}

body[data-page="registration-request"] .registration-contact-section .registration-section-heading {
  margin-bottom: 22px !important;
}

body[data-page="registration-request"] .registration-declaration-box {
  padding: 14px 16px !important;
  border-radius: 11px !important;
}

body[data-page="registration-request"] .registration-declaration-check {
  grid-template-columns: 18px 1fr !important;
  gap: 9px !important;


}

body[data-page="registration-request"] .declaration-checkmark {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  border-radius: 4px !important;
}

body[data-page="registration-request"] .registration-actions {
  width: min(100% - 50px, 590px) !important;
  margin-top: 19px !important;
  gap: 14px !important;
}

body[data-page="registration-request"] .registration-button {
  min-height: var(--ui-button-height) !important;
  height: var(--ui-button-height) !important;
  border-radius: var(--ui-radius-sm) !important;

}

body[data-page="registration-request"] .registration-page-triangles {
  width: 110px !important;
  height: 200px !important;
  background-size: 105px auto !important;
}

body[data-page="registration-request"] .registration-page-dots {
  width: 50px !important;
  height: 50px !important;
}

/* =========================================================
   Policies
   ========================================================= */
body[data-page="policies"] .policies-main {
  min-height: 0 !important;
  padding: 44px 0 54px !important;
}

body[data-page="policies"] .policies-card {
  width: min(100% - 40px, 840px) !important;
  padding: 42px 44px 40px !important;
  border-radius: 10px !important;
}

body[data-page="policies"] .policies-heading h1 {
  margin-bottom: 10px !important;


}

body[data-page="policies"] .policies-heading p {
  max-width: 640px !important;


}

body[data-page="policies"] .policies-accordion {
  gap: 16px !important;
}

body[data-page="policies"] .policy-item,
body[data-page="policies"] .policy-toggle {
  border-radius: 9px !important;
}

body[data-page="policies"] .policy-toggle {
  min-height: 48px !important;
  gap: 12px !important;
  padding: 10px 16px !important;


}

body[data-page="policies"] .policy-toggle img,
body[data-page="policies"] .policy-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

body[data-page="policies"] .policy-panel-inner {
  padding: 19px 24px 22px !important;


}


/* =========================================================
   Certificate inquiry
   ========================================================= */
body[data-page="certificate-inquiry"] .certificate-inquiry-main {
  min-height: 58vh !important;
  padding: 46px 0 54px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-card {
  width: min(680px, calc(100% - 40px)) !important;
  padding: 30px 34px !important;
  border-radius: 14px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-heading {
  grid-template-columns: 46px 1fr !important;
  gap: 12px !important;
  margin-bottom: 21px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-heading img {
  width: 42px !important;
  height: 42px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-heading h1 {
  margin-bottom: 4px !important;

}


body[data-page="certificate-inquiry"] .certificate-inquiry-form {
  gap: 10px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-form label {
  gap: 5px !important;

}

body[data-page="certificate-inquiry"] .certificate-inquiry-form input,
body[data-page="certificate-inquiry"] .certificate-inquiry-form button {
  height: var(--ui-input-height) !important;
  min-height: var(--ui-input-height) !important;
  border-radius: var(--ui-radius-sm) !important;

}

body[data-page="certificate-inquiry"] .certificate-inquiry-form input {
  padding-inline: 12px !important;
}

body[data-page="certificate-inquiry"] .certificate-inquiry-form button {
  padding: 7px 18px !important;

}

body[data-page="certificate-inquiry"] .certificate-inquiry-status {
  min-height: 20px !important;
  margin-top: 10px !important;

}

/* =========================================================
   Export integration page
   ========================================================= */
.export-integration-page .export-shell {
  padding: 24px 18px !important;
}

.export-integration-page .export-card {
  width: min(610px, 100%) !important;
  padding: 28px !important;
  border-radius: 14px !important;
}

.export-integration-page .export-card header {
  grid-template-columns: 155px 1fr !important;
  gap: 17px !important;
  margin-bottom: 22px !important;
}

.export-integration-page .export-card header img {
  width: 155px !important;
  height: 48px !important;
}

.export-integration-page .export-card h1 {
  margin-bottom: 4px !important;

}


.export-integration-page #classification-export-form {
  gap: 10px !important;
}

.export-integration-page #export-classification,
.export-integration-page #classification-export-button {
  height: var(--ui-input-height) !important;
  min-height: var(--ui-input-height) !important;
  border-radius: var(--ui-radius-sm) !important;

}

.export-integration-page .export-scope {
  gap: 7px !important;
  margin: 5px 0 1px !important;
}

.export-integration-page .export-scope span {
  padding: 7px 8px !important;
  border-radius: var(--ui-radius-sm) !important;

}

.export-integration-page .export-status {
  min-height: 18px !important;
  margin-top: 9px !important;

}

/* =========================================================
   Payment gateway placeholder
   ========================================================= */
.payment-preview-page .payment-page {
  grid-template-columns: minmax(390px, 1fr) minmax(390px, 1fr) !important;
}


.payment-preview-page .back-button {
  top: 32px !important;
  left: 32px !important;
  width: 38px !important;
  height: 38px !important;
}

.payment-preview-page .back-button svg {
  width: 18px !important;
  height: 18px !important;
}

.payment-preview-page .payment-header {
  min-height: 78px !important;
  padding: 8px 26px !important;
}

.payment-preview-page .payment-header img {
  width: 178px !important;
  height: 54px !important;
}

.payment-preview-page .payment-content {
  min-height: calc(100vh - 78px) !important;
  padding: 26px 24px 16px !important;
}

.payment-preview-page .payment-content__inner {
  width: min(100%, 380px) !important;
}

.payment-preview-page .payment-title {
  gap: 8px !important;
  margin-bottom: 17px !important;
}

.payment-preview-page .payment-title svg {
  width: 29px !important;
  height: 29px !important;
}


.payment-preview-page .payment-gateway-shell {
  gap: 11px !important;
}

.payment-preview-page .payment-gateway-mount {
  min-height: 215px !important;
  padding: 26px 24px !important;
  border-radius: 12px !important;
}


.payment-preview-page .payment-gateway-mount h2 {
  margin: 6px 0 7px !important;

}

.payment-preview-page .payment-gateway-mount p {
  max-width: 310px !important;


}

.payment-preview-page .payment-return {
  min-height: 36px !important;
  border-radius: var(--ui-radius-sm) !important;

}

.payment-preview-page .payment-security {
  padding-top: 18px !important;

}


.payment-preview-page .copyright {
  margin-top: 14px !important;

}

/* =========================================================
   Responsive sizing
   ========================================================= */
@media (max-width: 1199px) {
  :root {
    --ui-container: 1040px;
  }

  .site-header .header-inner,
  .site-header.program-white-header .header-inner {
    min-height: 74px !important;
  }

  .site-header .brand img,
  .site-header.program-white-header .brand img {
    width: 170px !important;
    height: 47px !important;
  }
}

@media (max-width: 980px) {
  :root {
    --ui-container: 900px;
  }

  .program-detail-page .program-detail-grid,
  body[data-page="actuarial"] .actuarial-layout {
    grid-template-columns: 1fr !important;
  }

  .program-detail-page .program-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --type-display: 31px;
    --type-page-title: 28px;
    --type-program-title: 28px;
    --type-section-title: 24px;
    --type-subsection-title: 21px;
    --type-card-title: 18px;
    --type-card-title-sm: 16px;
    --type-body-lg: 15px;
    --type-body: 13.5px;
    --type-body-small: 12.5px;
    --type-caption: 12px;
    --type-micro: 10px;
    --type-label: 12.5px;
    --ui-input-height: 43px;
    --ui-button-height: 42px;
  }

  .container {
    width: calc(100% - 26px) !important;
  }

  .site-header .header-inner,
  .site-header.program-white-header .header-inner {
    min-height: 68px !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    width: calc(100% - 26px) !important;
  }

  .site-header .brand img,
  .site-header.program-white-header .brand img {
    width: 155px !important;
    height: 43px !important;
  }

  body[data-page="index"] .section {
    padding: 46px 0;
  }

  body[data-page="index"] .hero {
    min-height: 500px !important;
  }

  body[data-page="index"] .hero-content {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }


  body[data-page="index"] .director-message.section {
    padding: 26px 0 !important;
  }


  body[data-page="index"] .director-text {
    width: 100% !important;
  }


  body[data-page="index"] .about {
    padding-top: 48px !important;
  }

  body[data-page="index"] .about-body,
  body[data-page="index"] .about-grid {
    gap: 28px !important;
  }

  body[data-page="index"] .about-image img {
    height: 360px !important;
    border-radius: 20px !important;
  }

  body[data-page="index"] .identity-card {
    grid-template-columns: 54px 1fr !important;
    padding: 16px !important;
  }

  body[data-page="index"] .identity-card img {
    width: 46px !important;
    height: 46px !important;
  }

  body[data-page="index"] .objectives-card .objectives-heading-icon {
    width: 35px !important;
    height: 35px !important;
  }

  body[data-page="index"] .feature-card {
    min-height: 0 !important;
    padding: 18px !important;
  }

  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body[data-page="index"] .program-path-card {
    min-height: 128px !important;
  }

  body[data-page="index"] .health-track-card {
    height: 175px !important;
    min-height: 175px !important;
  }

  body[data-page="index"] .life-support-courses-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body[data-page="index"] .life-support-course-media,
  body[data-page="index"] .life-support-course-image {
    height: 210px !important;
    min-height: 210px !important;
  }

  body[data-page="index"] .life-support-course-content {
    padding: 18px 17px 58px !important;
  }

  .program-detail-page .program-detail-hero {
    height: 195px !important;
    min-height: 195px !important;
  }


  .program-detail-page .program-detail-content {
    padding: 30px 0 28px !important;
  }

  .program-detail-page .program-detail-side {
    grid-template-columns: 1fr !important;
  }

  .program-detail-page .intro-card,
  .program-detail-page .program-detail-primary .intro-card,
  .program-detail-page .program-meta-card,
  .program-detail-page .topics-card,
  .program-detail-page .objectives-card-detail,
  .program-detail-page .features-card-detail,
  .program-detail-page .audience-card {
    padding: 18px 16px !important;
  }

  .program-detail-page .trainer-panel {
    grid-template-columns: 1fr !important;
    padding: 18px 16px 0 !important;
  }

  .program-detail-page .trainer-icon-wrap {
    width: 120px !important;
    height: 125px !important;
  }

  .program-detail-page .trainer-icon-wrap img {
    width: 116px !important;
    height: 120px !important;
  }

  body[data-page="actuarial"] .actuarial-program-hero {
    min-height: 220px !important;
  }


  body[data-page="actuarial"] .actuarial-program-content {
    padding: 30px 0 !important;
  }

  body[data-page="actuarial"] .actuarial-card,
  body[data-page="actuarial"] .actuarial-interest-card {
    padding: 18px 16px !important;
  }

  body[data-page="actuarial"] .actuarial-interest-card {
    grid-template-columns: 1fr !important;
  }

  body[data-page="actuarial"] .actuarial-form-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="registration-request"] .registration-hero {
    height: 205px !important;
    min-height: 205px !important;
  }


  body[data-page="registration-request"] .registration-main {
    padding: 28px 0 !important;
  }

  body[data-page="registration-request"] .registration-container {
    width: calc(100% - 20px) !important;
  }

  body[data-page="registration-request"] .registration-card {
    padding: 26px 18px 30px !important;
    border-radius: 18px !important;
  }


  body[data-page="registration-request"] .registration-grid-three,
  body[data-page="registration-request"] .registration-grid-two {
    gap: 16px !important;
  }

  body[data-page="registration-request"] .registration-actions {
    width: 100% !important;
    gap: 10px !important;
  }

  body[data-page="policies"] .policies-main {
    padding: 30px 0 40px !important;
  }

  body[data-page="policies"] .policies-card {
    width: calc(100% - 20px) !important;
    padding: 30px 18px !important;
  }

  body[data-page="certificate-inquiry"] .certificate-inquiry-main {
    padding: 34px 0 42px !important;
  }

  body[data-page="certificate-inquiry"] .certificate-inquiry-card {
    width: calc(100% - 24px) !important;
    padding: 24px 18px !important;
  }


  body[data-page="certificate-inquiry"] .certificate-inquiry-form {
    grid-template-columns: 1fr !important;
  }

  .payment-preview-page .payment-cover {
    min-height: 300px !important;
  }


  .payment-preview-page .payment-header {
    min-height: 70px !important;
    justify-content: center !important;
  }

  .payment-preview-page .payment-header img {
    width: 165px !important;
    height: 50px !important;
  }

  .payment-preview-page .payment-content {
    min-height: auto !important;
    padding: 22px 16px 20px !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .footer-brand {
    justify-content: center !important;
  }

  .footer-brand img {
    width: 180px !important;
    height: 100px !important;
  }

  .footer-column,
  .footer-social {
    align-items: center !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {


  body[data-page="index"] .hero {
    min-height: 470px !important;
  }


  body[data-page="index"] .about-image img {
    height: 300px !important;
  }

  body[data-page="index"] .health-track-card {
    height: 165px !important;
    min-height: 165px !important;
  }

  .program-detail-page .program-detail-hero {
    height: 180px !important;
    min-height: 180px !important;
  }

  body[data-page="registration-request"] .registration-hero {
    height: 190px !important;
    min-height: 190px !important;
  }

  body[data-page="registration-request"] .registration-card {
    padding: 22px 15px 26px !important;
  }

  body[data-page="registration-request"] .registration-actions {
    grid-template-columns: 1fr !important;
  }

  .export-integration-page .export-card {
    padding: 22px 16px !important;
  }

  .export-integration-page .export-card header {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .export-integration-page .export-card header img {
    margin-inline: auto !important;
  }

  .export-integration-page .export-scope {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   2026-08-17 — programme card family unification
   Reference: the two main cards (Developmental Programmes / Diplomas).
   Real dimensions only — no page zoom or root/container scaling.
   ========================================================= */
:root {
  --program-card-min-height: 276px;
  --program-card-radius: 12px;
  --program-card-gap: 20px;
  --program-card-title:var(--type-card-title-sm);
  --program-card-body:var(--type-caption);
  --program-card-content-x: 24px;
  --program-card-content-y: 22px;
}

body[data-page="index"] .program-choice-grid,
body[data-page="index"] .program-paths-grid,
body[data-page="index"] .health-track-grid,
body[data-page="index"] .life-support-courses-grid {
  width: min(1080px, 100%) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: center !important;
  gap: var(--program-card-gap) !important;
  margin-inline: auto !important;
  transform: none !important;
  left: auto !important;
}

body[data-page="index"] .program-choice-grid {
  margin-top: 0 !important;
}

body[data-page="index"] .program-paths-grid,
body[data-page="index"] .health-track-grid,
body[data-page="index"] .life-support-courses-grid {
  margin-top: 20px !important;
}

/* Same external dimensions and visual ratio across every programme level. */
body[data-page="index"] .choice-card,
body[data-page="index"] .program-path-card,
body[data-page="index"] .health-track-card,
body[data-page="index"] .life-support-course-card {
  width: 100% !important;
  max-width: none !important;
  min-height: var(--program-card-min-height) !important;
  height: var(--program-card-min-height) !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: var(--program-card-radius) !important;
  border: 0 !important;
  background: var(--navy) !important;
  box-shadow: 0 7px 17px rgba(2, 45, 56, .16) !important;
  isolation: isolate !important;
}

/* Shared image treatment. Original images remain untouched. */
body[data-page="index"] .choice-card > img,
body[data-page="index"] .program-path-card > img,
body[data-page="index"] .health-track-card > img,
body[data-page="index"] .life-support-course-media,
body[data-page="index"] .life-support-course-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

body[data-page="index"] .choice-card > img,
body[data-page="index"] .program-path-card > img,
body[data-page="index"] .health-track-card > img,
body[data-page="index"] .life-support-course-image {
  transition: transform .45s ease !important;
}

/* Keep deliberate image framing without distorting or over-cropping. */
body[data-page="index"] .program-path-card:nth-child(1) > img { object-position: 50% 46% !important; }
body[data-page="index"] .program-path-card:nth-child(2) > img { object-position: 50% 43% !important; }
body[data-page="index"] .program-path-card:nth-child(3) > img { object-position: 50% 54% !important; }
body[data-page="index"] .program-path-card:nth-child(4) > img { object-position: 50% 49% !important; }
body[data-page="index"] .program-path-card:nth-child(5) > img { object-position: 50% 44% !important; }
body[data-page="index"] .program-path-card:nth-child(6) > img { object-position: 50% 49% !important; }

body[data-page="index"] .health-track-card:nth-child(1) > img { object-position: 50% 50% !important; }
body[data-page="index"] .health-track-card:nth-child(2) > img { object-position: 50% 48% !important; }
body[data-page="index"] .health-track-card:nth-child(3) > img { object-position: 50% 48% !important; }

/* Same lower-gradient language used by the two master cards. */
body[data-page="index"] .choice-card::before,
body[data-page="index"] .program-path-card::before,
body[data-page="index"] .health-track-card::before,
body[data-page="index"] .life-support-course-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(2, 45, 56, .05) 16%, rgba(2, 45, 56, .86) 100%) !important;
  pointer-events: none !important;
}

body[data-page="index"] .choice-card::after,
body[data-page="index"] .program-path-card::after,
body[data-page="index"] .health-track-card::after,
body[data-page="index"] .life-support-course-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  opacity: 0 !important;
  background: linear-gradient(to bottom,
    rgba(3, 52, 63, .18) 0%,
    rgba(3, 52, 63, .72) 44%,
    rgba(2, 51, 62, .98) 100%) !important;
  transition: opacity .30s ease !important;
  pointer-events: none !important;
}

body[data-page="index"] .choice-base,
body[data-page="index"] .program-path-base,
body[data-page="index"] .health-track-base {
  right: var(--program-card-content-x) !important;
  left: var(--program-card-content-x) !important;
  bottom: var(--program-card-content-y) !important;
  padding: 0 !important;
}

body[data-page="index"] .choice-base h3,
body[data-page="index"] .choice-hover h3,
body[data-page="index"] .program-path-base h3,
body[data-page="index"] .program-path-hover h3,
body[data-page="index"] .health-track-base h3,
body[data-page="index"] .health-track-hover h3,
body[data-page="index"] .life-support-course-content h3 {
  margin: 0 0 7px !important;


}

body[data-page="index"] .choice-base p,
body[data-page="index"] .choice-hover p,
body[data-page="index"] .program-path-base p,
body[data-page="index"] .program-path-hover p,
body[data-page="index"] .health-track-base p,
body[data-page="index"] .health-track-hover p {
  max-width: 430px !important;
  margin: 0 auto !important;


}

body[data-page="index"] .choice-hover,
body[data-page="index"] .program-path-hover,
body[data-page="index"] .health-track-hover {
  padding: 30px var(--program-card-content-x) !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Course cards now belong to the same visual family without removing their facts. */
body[data-page="index"] .life-support-course-card {
  position: relative !important;
  display: block !important;
  direction: rtl !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

body[data-page="index"] .life-support-course-media {
  z-index: 0 !important;
  overflow: hidden !important;
  background: #e9eff0 !important;
}

body[data-page="index"] .life-support-course-content {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto var(--program-card-content-x) var(--program-card-content-y) var(--program-card-content-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title arrow"
    "facts arrow" !important;
  align-items: end !important;
  gap: 8px 16px !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-align: right !important;
}

body[data-page="index"] .life-support-course-content h3 {
  grid-area: title !important;
  min-height: 0 !important;
  color: #fff !important;
  text-align: right !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28) !important;
}


body[data-page="index"] .life-support-course-facts {
  grid-area: facts !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 14px !important;
}

body[data-page="index"] .course-fact,
body[data-page="index"] .course-fact-wide {
  width: auto !important;
  min-width: 0 !important;
  grid-column: auto !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .92) !important;


  text-align: right !important;
}

body[data-page="index"] .course-fact img,
body[data-page="index"] .course-fact-wide img {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  filter: brightness(0) invert(1) !important;
  opacity: .95 !important;
}

body[data-page="index"] .life-support-course-arrow {
  grid-area: arrow !important;
  position: static !important;
  align-self: end !important;
  width: 40px !important;
  height: 40px !important;
}

body[data-page="index"] .life-support-course-arrow img {
  width: 40px !important;
  height: 40px !important;
}

body[data-page="index"] .life-support-course-card:hover,
body[data-page="index"] .life-support-course-card:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(2, 45, 56, .18) !important;
}

body[data-page="index"] .choice-card:hover::after,
body[data-page="index"] .choice-card:focus-visible::after,
body[data-page="index"] .program-path-card:hover::after,
body[data-page="index"] .program-path-card:focus-visible::after,
body[data-page="index"] .health-track-card:hover::after,
body[data-page="index"] .health-track-card:focus-visible::after,
body[data-page="index"] .life-support-course-card:hover::after,
body[data-page="index"] .life-support-course-card:focus-within::after {
  opacity: 1 !important;
}

body[data-page="index"] .choice-card:hover > img,
body[data-page="index"] .choice-card:focus-visible > img,
body[data-page="index"] .program-path-card:hover > img,
body[data-page="index"] .program-path-card:focus-visible > img,
body[data-page="index"] .health-track-card:hover > img,
body[data-page="index"] .health-track-card:focus-visible > img,
body[data-page="index"] .life-support-course-card:hover .life-support-course-image,
body[data-page="index"] .life-support-course-card:focus-within .life-support-course-image {
  transform: scale(1.035) !important;
}

@media (max-width: 900px) {
  :root {
    --program-card-min-height: 250px;
    --program-card-gap: 16px;
    --program-card-content-x: 20px;
    --program-card-content-y: 18px;
  }

  body[data-page="index"] .program-choice-grid,
  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid,
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
  }
}

@media (max-width: 650px) {
  :root {
    --program-card-min-height: 230px;
    --program-card-gap: 14px;
    --program-card-title:var(--type-card-title-sm);
    --program-card-body:var(--type-caption);
    --program-card-content-x: 18px;
    --program-card-content-y: 17px;
  }

  body[data-page="index"] .program-choice-grid,
  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid,
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  body[data-page="index"] .choice-card,
  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card,
  body[data-page="index"] .life-support-course-card {
    min-height: var(--program-card-min-height) !important;
    height: var(--program-card-min-height) !important;
  }

  body[data-page="index"] .life-support-course-content {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 6px 10px !important;
  }

  body[data-page="index"] .life-support-course-facts {
    gap: 5px 9px !important;
  }


  body[data-page="index"] .course-fact img,
  body[data-page="index"] .course-fact-wide img {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  body[data-page="index"] .life-support-course-arrow,
  body[data-page="index"] .life-support-course-arrow img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* =========================================================
   2026-08-17 — readability rebalance
   Keeps the compact layout while correcting text that became visually too small.
   ========================================================= */


@media (max-width: 720px) {


}


/* =========================================================
   2026-08-17 — header micro-adjustments only
   - Move the top institute logo slightly left.
   - Replace language list with the supplied icon only.
   - Keep login label as “تسجيل الدخول”.
   ========================================================= */
.site-header .brand,
.site-header.program-white-header .brand {
  position: relative !important;
  right: 10px !important;
}

.language-switch,
.mobile-language-switch {
  display: none !important;
}

.language-icon-button,
.mobile-language-icon-button {
  appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.language-icon-button {
  width: 30px !important;
  height: 30px !important;
}

.language-icon-button img,
.mobile-language-icon-button img {
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  object-fit: contain !important;
}

.site-header:not(.program-white-header) .language-icon-button img {
  filter: none !important;
}

.site-header.program-white-header .language-icon-button img,
.mobile-language-icon-button img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(19%) saturate(1029%) hue-rotate(145deg) brightness(94%) contrast(96%) !important;
}

.mobile-language-icon-button {
  width: 100% !important;
  min-height: 38px !important;
  margin-top: 7px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(2,45,56,.08) !important;
}

@media (max-width: 720px) {
  .site-header .brand,
  .site-header.program-white-header .brand {
    right: 5px !important;
  }
}


/* =========================================================
   2026-08-17 — latest header order + programme spacing polish
   Requested changes only:
   - Pull the programmes heading slightly upward.
   - Keep header actions visually ordered from the right:
     certificate inquiry, login, language.
   - Reduce the language icon size.
   ========================================================= */
body[data-page="index"] .why.section {
  padding-bottom: 10px !important;
}

body[data-page="index"] .programs.section {
  padding-top: 8px !important;
}

.header-actions,
.site-header.program-white-header .header-actions {
  direction: rtl !important;
  justify-content: flex-start !important;
  position: relative !important;
  right: -8px !important;
  gap: 8px !important;
}

.language-icon-button {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.language-icon-button img {
  width: 21px !important;
  height: 21px !important;
}

.mobile-language-icon-button img {
  width: 22px !important;
  height: 22px !important;
}

@media (max-width: 720px) {
  body[data-page="index"] .why.section {
    padding-bottom: 8px !important;
  }

  body[data-page="index"] .programs.section {
    padding-top: 6px !important;
  }

  .header-actions,
  .site-header.program-white-header .header-actions {
    right: 0 !important;
  }
}


/* =========================================================
   2026-08-17 — health sub-track row
   دعم الحياة / التأهيل المهني الدولي / التعلم المستمر
   Three balanced cards in one desktop row only.
   ========================================================= */
@media (min-width: 901px) {
  body[data-page="index"] .health-track-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 20px !important;
  }

  body[data-page="index"] .health-track-card {
    min-height: 230px !important;
    height: 230px !important;
  }

  body[data-page="index"] .health-track-base {
    right: 20px !important;
    left: 20px !important;
    bottom: 18px !important;
  }

  body[data-page="index"] .health-track-hover {
    padding: 24px 20px !important;
  }


}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .health-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(760px, 100%) !important;
  }
}


/* =========================================================
   2026-08-17 — equal track card sizing
   Main programme tracks and health sub-tracks use identical dimensions.
   ========================================================= */
@media (min-width: 901px) {
  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 210px !important;
    height: 210px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 200px !important;
    height: 200px !important;
  }
}


/* =========================================================
   2026-08-17 — make all main track cards match health sub-track cards
   Main tracks now use the same desktop card width/height/grid as:
   دعم الحياة / التأهيل المهني الدولي / التعلم المستمر
   ========================================================= */
@media (min-width: 901px) {
  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 20px !important;
  }

  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 230px !important;
    height: 230px !important;
    border-radius: 12px !important;
  }

  body[data-page="index"] .program-path-base,
  body[data-page="index"] .health-track-base {
    right: 20px !important;
    left: 20px !important;
    bottom: 18px !important;
  }

  body[data-page="index"] .program-path-hover,
  body[data-page="index"] .health-track-hover {
    padding: 24px 20px !important;
  }


}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 210px !important;
    height: 210px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .program-paths-grid,
  body[data-page="index"] .health-track-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card {
    min-height: 200px !important;
    height: 200px !important;
  }
}


/* =========================================================
   2026-08-17 — master programme cards match track cards
   Developmental Programmes / Diplomas now use the same visual size
   as the main tracks and health sub-tracks.
   ========================================================= */
@media (min-width: 901px) {
  body[data-page="index"] .program-choice-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .choice-card {
    min-height: 230px !important;
    height: 230px !important;
    border-radius: 12px !important;
  }

  body[data-page="index"] .choice-base {
    right: 20px !important;
    left: 20px !important;
    bottom: 18px !important;
  }

  body[data-page="index"] .choice-hover {
    padding: 24px 20px !important;
  }


}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .program-choice-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body[data-page="index"] .choice-card {
    min-height: 210px !important;
    height: 210px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .program-choice-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .choice-card {
    min-height: 200px !important;
    height: 200px !important;
  }
}


/* =========================================================
   2026-08-18 — requested final layout refinements
   ========================================================= */

/* Life-support course cards: keep the current visual design, change dimensions only. */
@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 210px !important;
    height: 210px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 200px !important;
    height: 200px !important;
  }
}

/* Move the desktop action group a little to the right only. */
@media (min-width: 1200px) {
  .header-actions,
  .site-header.program-white-header .header-actions {
    transform: translateX(18px) !important;
  }
}

/* New inline objective icon follows the existing identity-card sizing. */
body[data-page="index"] .objectives-target-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
}

body[data-page="index"] .objectives-target-icon svg {
  width: 44px !important;
  height: 44px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* =========================================================
   2026-08-18 — requested revision pass
   Only the explicitly requested presentation corrections below.
   ========================================================= */

/* A) Restore the original horizontal/white Life Support course-card presentation,
      while keeping the new compact dimensions. */
body[data-page="index"] .life-support-course-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 39% 61% !important;
  overflow: hidden !important;
  border: 1px solid rgba(2, 45, 56, .06) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 11px rgba(2, 45, 56, .15) !important;
  isolation: auto !important;
}

body[data-page="index"] .life-support-course-card::before,
body[data-page="index"] .life-support-course-card::after {
  content: none !important;
  display: none !important;
}

body[data-page="index"] .life-support-course-media {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #e9eff0 !important;
}

body[data-page="index"] .life-support-course-image {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

body[data-page="index"] .life-support-course-content {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  padding: 16px 15px 48px !important;
  color: var(--navy) !important;
  background: #ffffff !important;
  text-align: center !important;
}

body[data-page="index"] .life-support-course-content h3 {
  min-height: 42px !important;
  margin: 0 0 11px !important;
  color: var(--navy) !important;


  text-align: center !important;
  text-shadow: none !important;
}

body[data-page="index"] .life-support-course-content h3 span[lang="en"] {
  color: inherit !important;

}

body[data-page="index"] .life-support-course-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px 7px !important;
  align-items: center !important;
}

body[data-page="index"] .course-fact,
body[data-page="index"] .course-fact-wide {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 !important;
  color: #234c57 !important;


  text-align: right !important;
}

body[data-page="index"] .course-fact-wide {
  grid-column: 1 / -1 !important;
  justify-content: center !important;
}

body[data-page="index"] .course-fact img,
body[data-page="index"] .course-fact-wide img {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

body[data-page="index"] .life-support-course-arrow {
  position: absolute !important;
  left: 13px !important;
  bottom: 11px !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
}

body[data-page="index"] .life-support-course-arrow img {
  width: 34px !important;
  height: 34px !important;
}

body[data-page="index"] .life-support-course-card:hover,
body[data-page="index"] .life-support-course-card:focus-within {
  transform: translateY(-3px) !important;
  box-shadow: 0 11px 24px rgba(2, 45, 56, .16) !important;
}

body[data-page="index"] .life-support-course-card:hover .life-support-course-image,
body[data-page="index"] .life-support-course-card:focus-within .life-support-course-image {
  transform: none !important;
}

@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 20px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: 348px !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 150px !important;
  }

  body[data-page="index"] .life-support-course-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 16px 15px 52px !important;
  }
}

/* B) Actuarial card: restore the original single centered presentation,
      but use the same compact programme-card size. */
@media (min-width: 901px) {
  body[data-page="index"] .administrative-track-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: minmax(0, 348px) !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  body[data-page="index"] .administrative-program-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (max-width: 900px) {
  body[data-page="index"] .administrative-track-grid {
    grid-template-columns: minmax(0, min(348px, 100%)) !important;
    justify-content: start !important;
  }
}

/* C) Slightly enlarge the two master cards while keeping them close to track sizing. */
@media (min-width: 901px) {
  body[data-page="index"] .program-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 356px)) !important;
    gap: 18px !important;
  }

  body[data-page="index"] .choice-card {
    width: 356px !important;
    max-width: 356px !important;
    min-height: 234px !important;
    height: 234px !important;
  }
}

/* E) Registration icons: one consistent, slightly larger field-icon size. */
body[data-page="registration-request"] .field-title-with-icon {
  gap: 9px !important;
  align-items: center !important;
}

body[data-page="registration-request"] .field-title-with-icon svg,
body[data-page="registration-request"] .birth-date-calendar svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  stroke-width: 1.7 !important;
}

body[data-page="registration-request"] .registration-section-icon,
body[data-page="registration-request"] .registration-contact-icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  stroke-width: 1.7 !important;
}

@media (max-width: 720px) {
  body[data-page="registration-request"] .field-title-with-icon svg,
  body[data-page="registration-request"] .birth-date-calendar svg {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }

  body[data-page="registration-request"] .registration-section-icon,
  body[data-page="registration-request"] .registration-contact-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}


/* =========================================================
   2026-08-18 — final requested cleanup pass
   ========================================================= */

/* Life Support course cards: keep the dark-overlay design shown in the reference,
   but scale them down to the same footprint as track cards. */
body[data-page="index"] .life-support-course-card {
  position: relative !important;
  display: block !important;
  direction: rtl !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(2,45,56,.06) !important;
  background: #123d49 !important;
  box-shadow: 0 7px 18px rgba(2,45,56,.14) !important;
}

body[data-page="index"] .life-support-course-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8,47,61,.16) 0%, rgba(6,52,63,.48) 52%, rgba(5,53,66,.82) 100%) !important;
  z-index: 1 !important;
}

body[data-page="index"] .life-support-course-card::after {
  content: none !important;
}

body[data-page="index"] .life-support-course-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #d9e3e7 !important;
}

body[data-page="index"] .life-support-course-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1) !important;
  transition: transform .25s ease !important;
}

body[data-page="index"] .life-support-course-content {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 18px 16px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas: "title title" "facts arrow" !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  text-align: right !important;
}

body[data-page="index"] .life-support-course-content h3 {
  grid-area: title !important;
  min-height: 0 !important;
  margin: 0 0 2px !important;
  color: #fff !important;


  text-align: right !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.26) !important;
}


body[data-page="index"] .life-support-course-facts {
  grid-area: facts !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 10px !important;
}

body[data-page="index"] .course-fact,
body[data-page="index"] .course-fact-wide {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.94) !important;


  text-align: right !important;
}

body[data-page="index"] .course-fact-wide {
  width: auto !important;
}

body[data-page="index"] .course-fact img,
body[data-page="index"] .course-fact-wide img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: .95 !important;
}

body[data-page="index"] .life-support-course-arrow {
  grid-area: arrow !important;
  position: static !important;
  align-self: end !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
}

body[data-page="index"] .life-support-course-arrow img {
  width: 38px !important;
  height: 38px !important;
}

body[data-page="index"] .life-support-course-card:hover,
body[data-page="index"] .life-support-course-card:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(2,45,56,.16) !important;
}

body[data-page="index"] .life-support-course-card:hover .life-support-course-image,
body[data-page="index"] .life-support-course-card:focus-within .life-support-course-image {
  transform: scale(1.035) !important;
}

@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }

  body[data-page="index"] .choice-card,
  body[data-page="index"] .program-path-card,
  body[data-page="index"] .health-track-card,
  body[data-page="index"] .administrative-program-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }

  body[data-page="index"] .program-choice-grid {
    width: min(1080px,100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  body[data-page="index"] .administrative-track-grid {
    width: min(1080px,100%) !important;
    grid-template-columns: minmax(0, 348px) !important;
    justify-content: start !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-content {
    inset: auto 16px 14px 16px !important;
  }


  body[data-page="index"] .course-fact img,
  body[data-page="index"] .course-fact-wide img {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }
}

/* Keep the OBA title treatment, while the banner itself follows the shared program hero sizing. */
.oba-program-page .oba-hero-title h1 {
  max-width: 700px !important;
  padding: 14px 22px !important;
}


/* =========================================================
   2026-08-18 — programmes section hierarchy + English language label
   ========================================================= */
.language-icon-button,
.mobile-language-icon-button {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;


  transition: color .2s ease !important;
}

.site-header:not(.program-white-header) .language-icon-button {
  color: #ffffff !important;
}

.site-header.program-white-header .language-icon-button,
.mobile-language-icon-button {
  color: var(--navy) !important;
}

.language-icon-button:hover,
.language-icon-button:focus-visible,
.mobile-language-icon-button:hover,
.mobile-language-icon-button:focus-visible {
  color: var(--gold) !important;
}

body[data-page="index"] .program-subheading {
  width: min(1080px, 100%) !important;
  margin: 4px auto 20px !important;
  text-align: right !important;
}

body[data-page="index"] .program-subheading h3 {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding-bottom: 9px !important;
  color: var(--navy) !important;


}

body[data-page="index"] .program-subheading h3::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 42px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--gold) !important;
}

body[data-page="index"] .program-paths-grid {
  margin-top: 0 !important;
}

body[data-page="index"] .diploma-programs-section {
  width: min(1080px, 100%) !important;
  margin: 58px auto 0 !important;
  scroll-margin-top: 90px !important;
}

body[data-page="index"] .diploma-programs-heading {
  margin-bottom: 20px !important;
}

body[data-page="index"] .diploma-programs-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body[data-page="index"] #developmental-programs-title,
body[data-page="index"] #diploma-programs-title {
  scroll-margin-top: 96px !important;
}

@media (max-width: 900px) {
  body[data-page="index"] .diploma-programs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 650px) {


  body[data-page="index"] .diploma-programs-section {
    margin-top: 42px !important;
  }

  body[data-page="index"] .diploma-programs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* =========================================================
   2026-08-18 — header alignment + Life Support card refinement
   Requested visual changes only.
   ========================================================= */

/* Header: move the action group to the right, logo slightly left,
   and remove all nav underline indicators. */
@media (min-width: 1200px) {
  .site-header .header-inner,
  .site-header.program-white-header .header-inner {
    width: min(1360px, calc(100% - 48px)) !important;
  }

  .site-header .header-actions,
  .site-header.program-white-header .header-actions {
    transform: translateX(34px) !important;
  }

  .site-header .brand,
  .site-header.program-white-header .brand {
    transform: translateX(-20px) !important;
  }
}

.site-header .desktop-nav a::after,
.site-header.program-white-header .desktop-nav a::after {
  content: none !important;
  display: none !important;
}

.site-header .desktop-nav a,
.site-header.program-white-header .desktop-nav a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* Life Support cards: same overlay design as the supplied reference,
   reduced to the track-card footprint. */
body[data-page="index"] .life-support-courses-grid {
  margin-inline: auto !important;
}

body[data-page="index"] .life-support-course-card {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #0a3c49 !important;
  border: 1px solid rgba(2,45,56,.06) !important;
  box-shadow: 0 7px 18px rgba(2,45,56,.15) !important;
}

body[data-page="index"] .life-support-course-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(
      180deg,
      rgba(4, 46, 58, .10) 0%,
      rgba(4, 46, 58, .28) 42%,
      rgba(3, 49, 61, .84) 100%
    ) !important;
  pointer-events: none !important;
}

body[data-page="index"] .life-support-course-card::after {
  content: none !important;
  display: none !important;
}

body[data-page="index"] .life-support-course-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-page="index"] .life-support-course-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .3s ease !important;
}

body[data-page="index"] .life-support-course-content {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 18px 16px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 38px !important;
  grid-template-areas:
    "title title"
    "facts arrow" !important;
  align-items: end !important;
  gap: 8px 10px !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  text-align: right !important;
}

body[data-page="index"] .life-support-course-content h3 {
  grid-area: title !important;
  margin: 0 !important;
  min-height: 0 !important;
  color: #fff !important;


  text-align: right !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.28) !important;
}


body[data-page="index"] .life-support-course-facts {
  grid-area: facts !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 10px !important;
}

body[data-page="index"] .course-fact,
body[data-page="index"] .course-fact-wide {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.95) !important;


  text-align: right !important;
}

body[data-page="index"] .course-fact img,
body[data-page="index"] .course-fact-wide img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: .95 !important;
}

body[data-page="index"] .life-support-course-arrow {
  grid-area: arrow !important;
  position: static !important;
  align-self: end !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
}

body[data-page="index"] .life-support-course-arrow img {
  width: 38px !important;
  height: 38px !important;
}

body[data-page="index"] .life-support-course-card:hover,
body[data-page="index"] .life-support-course-card:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(2,45,56,.18) !important;
}

body[data-page="index"] .life-support-course-card:hover .life-support-course-image,
body[data-page="index"] .life-support-course-card:focus-within .life-support-course-image {
  transform: scale(1.035) !important;
}

@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 220px !important;
    height: 220px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: 348px !important;
    min-height: 220px !important;
    height: 220px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-content {
    inset: auto 15px 14px 15px !important;
  }


  body[data-page="index"] .course-fact img,
  body[data-page="index"] .course-fact-wide img {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }
}


/* =========================================================
   2026-08-18 — breadcrumb placement + wider life-support cards
   ========================================================= */
body[data-page="index"] .program-subheading + .programs-breadcrumb {
  margin: 8px auto 22px !important;
  justify-content: flex-start !important;
  width: min(1080px, 100%) !important;
  color: #56727b !important;
}


body[data-page="index"] .programs-breadcrumb .breadcrumb-chevron {

  color: var(--gold-deep) !important;
}

body[data-page="index"] .life-support-course-card::before {
  background:
    linear-gradient(
      180deg,
      rgba(4, 46, 58, .05) 0%,
      rgba(6, 50, 64, .18) 34%,
      rgba(4, 55, 71, .52) 66%,
      rgba(3, 49, 61, .90) 100%
    ) !important;
}

@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1120px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 392px)) !important;
    gap: 18px !important;
    justify-content: center !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 392px !important;
    max-width: 392px !important;
    min-height: 230px !important;
    height: 230px !important;
  }

  body[data-page="index"] .life-support-course-content {
    inset: auto 20px 16px 20px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(840px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    min-height: 220px !important;
    height: 220px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-course-card {
    max-width: 392px !important;
  }
}


/* =========================================================
   2026-08-18 — final gradient / alignment / header-action fix
   ========================================================= */

/* 1) Header action group: keep English + Login + Certificate visually together,
      and move the whole block farther to the right on desktop. */
@media (min-width: 1200px) {
  .site-header .header-actions,
  .site-header.program-white-header .header-actions {
    transform: translateX(82px) !important;
    gap: 9px !important;
  }
}

/* English is a real visible button, not plain floating text. */
.language-icon-button,
.mobile-language-icon-button {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 60px !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 999px !important;
  background: rgba(2,45,56,.12) !important;
  color: #ffffff !important;


  cursor: pointer !important;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}

.language-icon-button:hover,
.language-icon-button:focus-visible,
.mobile-language-icon-button:hover,
.mobile-language-icon-button:focus-visible {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: rgba(205,177,128,.08) !important;
}

.site-header.program-white-header .language-icon-button,
.mobile-language-icon-button {
  color: var(--navy) !important;
  border-color: rgba(2,45,56,.22) !important;
  background: #ffffff !important;
}

.site-header.program-white-header .language-icon-button:hover,
.site-header.program-white-header .language-icon-button:focus-visible,
.mobile-language-icon-button:hover,
.mobile-language-icon-button:focus-visible {
  color: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
}

/* 2) Life Support cards: same card footprint/alignment as the health sub-track cards. */
@media (min-width: 901px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 348px)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

/* 3) Strong visible navy gradient, matching the supplied reference:
      lighter at the top, progressively darker toward the text area. */
body[data-page="index"] .life-support-course-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(2,45,56,.06) 0%,
      rgba(2,45,56,.18) 30%,
      rgba(2,45,56,.48) 58%,
      rgba(2,45,56,.82) 78%,
      rgba(2,45,56,.96) 100%
    ) !important;
}

/* Keep all four course cards aligned identically. */
body[data-page="index"] .life-support-course-content {
  inset: auto 18px 15px 18px !important;
}

body[data-page="index"] .life-support-course-content h3 {
  margin-bottom: 2px !important;
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 220px !important;
    height: 220px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 100% !important;
    max-width: 348px !important;
    min-height: 220px !important;
    height: 220px !important;
    margin-inline: auto !important;
  }
}


/* =========================================================
   2026-08-18 — compact programme composition + text-only language control
   Keeps the approved typography/card dimensions intact.
   ========================================================= */

/* 1) Life Support composition:
   Keep every card at the approved 348×230 size, but make the title,
   breadcrumb, and grid share one compact visual width so the surrounding
   whitespace feels intentional rather than excessive. */
@media (min-width: 901px) {
  body[data-page="index"] #developmental-programs-title,
  body[data-page="index"] .program-subheading + .programs-breadcrumb,
  body[data-page="index"] .life-support-courses-grid {
    width: 714px !important; /* 348 + 18 + 348 */
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-courses-grid {
    grid-template-columns: repeat(2, 348px) !important;
    justify-content: start !important;
    gap: 18px !important;
  }
}

body[data-page="index"] #developmental-programs-title {
  margin-bottom: 6px !important;
}

body[data-page="index"] .program-subheading + .programs-breadcrumb {
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}

/* 2) English: text-only clickable control, no frame/background.
   Hover/focus uses the institute gold. */
.language-icon-button,
.mobile-language-icon-button {
  appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;


  cursor: pointer !important;
  transition: color .2s ease !important;
}

.language-icon-button:hover,
.language-icon-button:focus-visible,
.mobile-language-icon-button:hover,
.mobile-language-icon-button:focus-visible {
  color: var(--gold) !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
}

.site-header.program-white-header .language-icon-button,
.site-header.program-white-header .language-icon-button:hover,
.site-header.program-white-header .language-icon-button:focus-visible,
.mobile-language-icon-button {
  background: transparent !important;
  border: 0 !important;
}

.site-header.program-white-header .language-icon-button,
.mobile-language-icon-button {
  color: var(--navy) !important;
}

.site-header.program-white-header .language-icon-button:hover,
.site-header.program-white-header .language-icon-button:focus-visible,
.mobile-language-icon-button:hover,
.mobile-language-icon-button:focus-visible {
  color: var(--gold-deep) !important;
}

/* 3) Course detail banners:
   Slightly thicker than the compact 230px banner, but still controlled and
   clearly smaller than a full hero. Typography/card tokens stay untouched. */
@media (min-width: 901px) {
  .program-detail-page .program-detail-hero {
    height: 260px !important;
    min-height: 260px !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .program-detail-page .program-detail-hero {
    height: 225px !important;
    min-height: 225px !important;
  }
}

@media (max-width: 720px) {
  .program-detail-page .program-detail-hero {
    height: 200px !important;
    min-height: 200px !important;
  }
}

.program-detail-page .program-detail-hero > img {
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

/* Keep the established Life Support gradient/card identity exactly as-is. */
body[data-page="index"] .life-support-course-card::before {
  background:
    linear-gradient(
      180deg,
      rgba(2,45,56,.06) 0%,
      rgba(2,45,56,.18) 30%,
      rgba(2,45,56,.48) 58%,
      rgba(2,45,56,.82) 78%,
      rgba(2,45,56,.96) 100%
    ) !important;
}


/* =========================================================
   2026-08-18 — final compact polish without changing approved card sizes
   ========================================================= */
@media (min-width: 901px) {
  body[data-page="index"] #developmental-programs-title,
  body[data-page="index"] .program-subheading + .programs-breadcrumb,
  body[data-page="index"] .life-support-courses-grid {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-courses-grid {
    grid-template-columns: repeat(2, 348px) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 0 !important;
  }
}

body[data-page="index"] #developmental-programs-title {
  margin-bottom: 4px !important;
}

body[data-page="index"] .program-subheading + .programs-breadcrumb {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

body[data-page="index"] .life-support-courses-grid {
  margin-top: 0 !important;
}

/* Text-only English control with no outline, frame, or fill. */
.site-header .language-icon-button,
.site-header .mobile-language-icon-button,
.site-header.program-white-header .language-icon-button,
.site-header.program-white-header .mobile-language-icon-button {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  text-decoration: none !important;
  color: #ffffff !important;


  cursor: pointer !important;
  transition: color .2s ease !important;
}

.site-header.program-white-header .language-icon-button,
.site-header.program-white-header .mobile-language-icon-button {
  color: var(--navy) !important;
}

.site-header .language-icon-button:hover,
.site-header .language-icon-button:focus-visible,
.site-header .mobile-language-icon-button:hover,
.site-header .mobile-language-icon-button:focus-visible {
  color: var(--gold) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.site-header.program-white-header .language-icon-button:hover,
.site-header.program-white-header .language-icon-button:focus-visible,
.site-header.program-white-header .mobile-language-icon-button:hover,
.site-header.program-white-header .mobile-language-icon-button:focus-visible {
  color: var(--gold-deep) !important;
}

/* Course page banners: thicker and more balanced, while staying compact. */
@media (min-width: 901px) {
  .program-detail-page .program-detail-hero {
    height: 290px !important;
    min-height: 290px !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .program-detail-page .program-detail-hero {
    height: 245px !important;
    min-height: 245px !important;
  }
}

@media (max-width: 720px) {
  .program-detail-page .program-detail-hero {
    height: 210px !important;
    min-height: 210px !important;
  }
}


/* =========================================================
   2026-08-18 — programme section interaction/alignment refinement
   Does not change approved typography/card size tokens.
   ========================================================= */

/* English: text only. No circular/rounded frame, no fill, no browser outline. */
.site-header button.language-icon-button,
.site-header button.mobile-language-icon-button,
.site-header.program-white-header button.language-icon-button,
.site-header.program-white-header button.mobile-language-icon-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;


  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .2s ease !important;
}

.site-header.program-white-header button.language-icon-button,
.site-header.program-white-header button.mobile-language-icon-button {
  color: var(--navy) !important;
}

.site-header button.language-icon-button:hover,
.site-header button.language-icon-button:focus,
.site-header button.language-icon-button:focus-visible,
.site-header button.mobile-language-icon-button:hover,
.site-header button.mobile-language-icon-button:focus,
.site-header button.mobile-language-icon-button:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--gold) !important;
}

.site-header.program-white-header button.language-icon-button:hover,
.site-header.program-white-header button.language-icon-button:focus,
.site-header.program-white-header button.language-icon-button:focus-visible,
.site-header.program-white-header button.mobile-language-icon-button:hover,
.site-header.program-white-header button.mobile-language-icon-button:focus,
.site-header.program-white-header button.mobile-language-icon-button:focus-visible {
  color: var(--gold-deep) !important;
}

/* Remove only the secondary/lower programmes dots decoration if markup survives elsewhere. */
body[data-page="index"] .programs-dot-left {
  display: none !important;
}

/* Lift the programmes section slightly after removing the lower decoration.
   This is spacing-only; type/card sizes stay untouched. */
@media (min-width: 901px) {
  body[data-page="index"] .programs.section {
    margin-top: -28px !important;
  }

  body[data-page="index"] .programs-title {
    margin-bottom: 22px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .programs.section {
    margin-top: -14px !important;
  }
}

/* Clickable "البرامج التطويرية" heading: same typography, no button chrome. */
body[data-page="index"] .developmental-programs-back {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;

  cursor: pointer !important;
  transition: color .2s ease !important;
}

body[data-page="index"] .developmental-programs-back:hover,
body[data-page="index"] .developmental-programs-back:focus-visible {
  color: var(--gold-deep) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Life-support courses use the same desktop placement rhythm as main tracks:
   three approved card slots per row, starting from the right in RTL.
   Card dimensions remain 348×230px. */
@media (min-width: 901px) {
  body[data-page="index"] #developmental-programs-title,
  body[data-page="index"] .program-subheading + .programs-breadcrumb,
  body[data-page="index"] .life-support-courses-grid {
    width: min(1080px, 100%) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body[data-page="index"] .life-support-courses-grid {
    direction: rtl !important;
    grid-template-columns: repeat(3, 348px) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin-top: 0 !important;
  }

  body[data-page="index"] .life-support-course-card {
    width: 348px !important;
    max-width: 348px !important;
    min-height: 230px !important;
    height: 230px !important;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  body[data-page="index"] .life-support-courses-grid {
    direction: rtl !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}

@media (max-width: 650px) {
  body[data-page="index"] .life-support-courses-grid {
    direction: rtl !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* =========================================================
   2026-08-18 — header buttons alignment + white English hover
   ========================================================= */

/* Move Login + Certificate Inquiry farther right as one group on desktop. */
@media (min-width: 1200px) {
  .site-header .header-actions,
  .site-header.program-white-header .header-actions {
    transform: translateX(112px) !important;
    gap: 10px !important;
  }
}

/* English stays text-only and remains white on hover/focus in the dark header. */
.site-header:not(.program-white-header) button.language-icon-button,
.site-header:not(.program-white-header) button.language-icon-button:hover,
.site-header:not(.program-white-header) button.language-icon-button:focus,
.site-header:not(.program-white-header) button.language-icon-button:focus-visible,
.site-header:not(.program-white-header) button.mobile-language-icon-button,
.site-header:not(.program-white-header) button.mobile-language-icon-button:hover,
.site-header:not(.program-white-header) button.mobile-language-icon-button:focus,
.site-header:not(.program-white-header) button.mobile-language-icon-button:focus-visible {
  color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* =========================================================
   2026-08-18 — EN label refinement
   ========================================================= */
@media (min-width: 1200px) {
  .site-header button.language-icon-button,
  .site-header.program-white-header button.language-icon-button {
    transform: translateX(-10px) !important;
  }
}


/* =========================================================
   2026-08-18 — programmes heading/grid spacing refinement
   ========================================================= */

/* Reduce the vertical gap between "البرامج التطويرية" and its cards
   without changing the approved card sizes. */
body[data-page="index"] #developmental-programs-title {
  margin-bottom: 8px !important;
}

body[data-page="index"] .program-subheading + .programs-breadcrumb {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

@media (min-width: 901px) {
  body[data-page="index"] .health-track-grid,
  body[data-page="index"] .professional-track-grid,
  body[data-page="index"] .administrative-track-grid,
  body[data-page="index"] .technical-track-grid,
  body[data-page="index"] .tourism-track-grid,
  body[data-page="index"] .executive-track-grid,
  body[data-page="index"] .life-support-courses-grid {
    margin-top: 6px !important;
  }
}


/* =========================================================
   2026-08-18 — actual heading-to-cards gap fix
   ========================================================= */

/* Remove the real top spacing applied to the main developmental tracks grid. */
body[data-page="index"] #developmental-programs-title {
  margin-bottom: 2px !important;
}

body[data-page="index"] #program-paths-grid {
  margin-top: 0 !important;
}

/* When a nested programmes view is open, keep the breadcrumb tight under the title. */
body[data-page="index"] #programs-breadcrumb {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

/* Keep the first visible cards close to the heading/underline without changing card size. */
body[data-page="index"] #health-track-grid,
body[data-page="index"] #administrative-track-grid,
body[data-page="index"] #international-qualification-grid,
body[data-page="index"] #professional-track-grid,
body[data-page="index"] #life-support-courses-grid {
  margin-top: 4px !important;
}


/* =========================================================
   2026-08-18 — balanced heading/card spacing + certificate hover
   ========================================================= */

/* Give the developmental-programmes heading a comfortable visual gap
   before the first row of cards. Card dimensions remain unchanged. */
body[data-page="index"] #developmental-programs-title {
  margin-bottom: 18px !important;
}

body[data-page="index"] #program-paths-grid {
  margin-top: 8px !important;
}

/* Nested programme views: keep a similar breathing space after the breadcrumb. */
body[data-page="index"] #programs-breadcrumb {
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}

body[data-page="index"] #health-track-grid,
body[data-page="index"] #administrative-track-grid,
body[data-page="index"] #international-qualification-grid,
body[data-page="index"] #professional-track-grid,
body[data-page="index"] #life-support-courses-grid {
  margin-top: 8px !important;
}

/* Certificate inquiry button: keep the text white on hover/focus. */
.site-header .certificate-link:hover,
.site-header .certificate-link:focus,
.site-header .certificate-link:focus-visible,
.site-header .inquiry-button:hover,
.site-header .inquiry-button:focus,
.site-header .inquiry-button:focus-visible,
.site-header a[href*="certificate-inquiry"]:hover,
.site-header a[href*="certificate-inquiry"]:focus,
.site-header a[href*="certificate-inquiry"]:focus-visible {
  color: #ffffff !important;
}