:root{--color-primary: #455465;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #0074be;--color-state-hover: #006ab4;--color-state-focus: #006ab4;--color-state-active: #0059a3;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fafafa;--nav-text-color: var(--color-text);--nav-selected-color: var(--color-state);--nav-border-colour: rgba(128, 128, 128, 0.2);--nav-width: 15rem;--nav-collapsed-width: 5rem;--nav-button-size: 1.25rem;--nav-logo-width: 7.5rem;--nav-logo-height: 7.5rem;--nav-logomark-width: 2.5rem;--nav-logomark-height: 2.5rem;--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled);--page-content-padding-desktop: calc(var(--gap-base) * 8)}.tui-theme_inspire-navItem{--tui-theme_inspire-navItem-height: 2.75rem;--tui-theme_inspire-navItem-indicator-height: 2rem;--tui-theme_inspire-navItem-top-level-nav-item-padding: 10px;--tui-theme_inspire-navItem-nav-item-padding: 6px;display:flex;flex-grow:1;flex-wrap:wrap;height:var(--tui-theme_inspire-navItem-height);padding-top:calc(var(--gap-base) * 1);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem--navExpanded{height:100%}.tui-theme_inspire-navItem__icon{width:1.2em;height:1.2em;margin:auto}.tui-theme_inspire-navItem__icon--navExpanded{margin:calc(var(--gap-base) * 3) auto auto calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem .tui-theme_inspire-navItem{padding-top:0}.tui-theme_inspire-navItem--selected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem--selected:before{height:var(--tui-theme_inspire-navItem-indicator-height);margin-top:calc(var(--gap-base) * 1);border-right:calc(var(--gap-base) * 1) solid var(--nav-selected-color);border-top-right-radius:calc(var(--gap-base) * 1);border-bottom-right-radius:calc(var(--gap-base) * 1);content:""}.tui-theme_inspire-navItem .tui-theme_inspire-navItem--selected:before{margin-top:0}.tui-theme_inspire-navItem--link{flex-wrap:nowrap}.tui-theme_inspire-navItem__heading{display:flex;flex-grow:1;align-items:flex-start;padding:0;background-color:inherit;border:none;border-radius:var(--btn-radius)}.tui-theme_inspire-navItem__heading--childSelected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem__heading--depth-0{margin-left:calc(var(--gap-base) * 5);font-weight:600}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 4)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-0 .tui-theme_inspire-navItem__headingAction{margin:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-1{margin-left:calc(var(--gap-base) * 10);font-weight:400}.tui-theme_inspire-navItem__heading--depth-1.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 9)}.tui-theme_inspire-navItem__heading--depth-2{margin-left:calc(var(--gap-base) * 13)}.tui-theme_inspire-navItem__heading--depth-2.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 12)}.tui-theme_inspire-navItem__heading--link{color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__heading--link:hover,.tui-theme_inspire-navItem__heading--link:focus{color:var(--nav-tab-text-color);text-decoration:none}.tui-theme_inspire-navItem__heading--link.tui-theme_inspire-navItem__heading--selected{color:var(--nav-selected-color)}@media (hover:hover){.tui-theme_inspire-navItem__heading:hover{background-color:color-mix(in srgb, var(--nav-tab-text-color) 10%, transparent)}}.tui-theme_inspire-navItem__heading:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navItem__headingText{flex-grow:1;margin:auto;padding:var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 3);text-align:left;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.tui-theme_inspire-navItem__headingText--depth-0{padding:var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__headingAction{flex-basis:1.5rem;flex-shrink:0;height:1.5rem;margin:calc(var(--gap-base) * 1) calc(var(--gap-base) * 2);padding:var(--tui-theme_inspire-navItem-nav-item-padding);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__children{flex-basis:100%;margin-bottom:calc(var(--gap-base) * 2);margin-left:0;list-style:none}.tui-theme_inspire-navigation__toggle{position:absolute;z-index:1;width:var(--nav-button-size);height:var(--nav-button-size);margin:calc(var(--gap-base) * 4);color:var(--color-text)}.tui-theme_inspire-navigation__toggle--overlay{display:block}.tui-theme_inspire-navigation__toggle--expand{display:none}@media (min-width:992px){.tui-theme_inspire-navigation__toggle{left:var(--nav-collapsed-width);margin-left:calc(var(--gap-base) * 5)}.tui-theme_inspire-navigation__toggle--overlay{display:none}.tui-theme_inspire-navigation__toggle--expand{display:block}.tui-theme_inspire-navigation__toggle--navExpanded{left:var(--nav-width)}}.tui-theme_inspire-navigation__toggle--navHidden{left:0}.tui-theme_inspire-navigation{position:relative;z-index:var(--zindex-navbar);display:none;flex-direction:column;overflow:visible}@media (min-width:992px){.tui-theme_inspire-navigation{display:flex;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__nav{position:fixed;display:flex;flex-direction:column;width:var(--nav-collapsed-width);height:100%;background-color:var(--nav-bg-color);border-right:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__heading{margin:auto;border-bottom:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logomark-width);max-height:var(--nav-logomark-height);margin:calc(var(--gap-base) * 8) 0}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse{float:right;width:var(--nav-button-size);height:var(--nav-button-size);margin-top:calc(var(--gap-base) * 4);margin-right:calc(var(--gap-base) * -3);color:var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__items{display:flex;flex-direction:column;gap:calc(var(--gap-base) * 1);height:100%;margin:0;padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) 0;overflow-y:auto;list-style:none}.tui-theme_inspire-navigation--overlaid{position:fixed;z-index:var(--zindex-nav-overlay);display:flex;width:var(--nav-width)}@media (min-width:992px){.tui-theme_inspire-navigation--overlaid{position:relative;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}.tui-theme_inspire-navigation--desktopExpanded{display:none}@media (min-width:992px){.tui-theme_inspire-navigation--desktopExpanded{display:flex;width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}}.tui-theme_inspire-navigation--hidden{display:none}.tui-settingsFormBrand__testEmailInfoButton{align-self:center}.tui-themeSettings__content{margin-top:var(--gap-8)}.tui-themeSettings__forms>*+*{margin-top:var(--gap-8)}:root{--color-primary: #455465;--color-state: #008DC3;--color-text: #2D2926;--footer-bg-color: #ffc629;--footer-text-color: #2D2926;--color-state-hover: #0083b9;--color-state-focus: #0083b9;--color-state-active: #0072a8;--footer-text-color-hover: #231f1c;--nav-bg-color: #fafafa;--nav-text-color: #2D2926;--nav-selected-color: #0074be;}
/* ========= Dark Theme: Tokens ========= */
:root{
  --pscems-bg: #0C1C2B;                       /* deep navy */
  --pscems-bg-2:#0F2236;                      /* slightly lighter navy */
  --pscems-ink:#F5F7FA;                       /* white-ish text */
  --pscems-ink-dim:#C8D2DF;                   /* dimmed text */
  --pscems-accent:#2DA0FF;                    /* bright accent blue */
  --pscems-gold:#D9B25F;                      /* gold kicker */
  --pscems-border: rgba(255,255,255,.12);
  --pscems-border-strong: rgba(255,255,255,.22);
  --pscems-card-bg: rgba(255,255,255,.06);
  --pscems-card-elev: 0 4px 14px rgba(0,0,0,.35);
  --pscems-card-elev-hover: 0 10px 28px rgba(0,0,0,.45);
  --pscems-radius: 18px;

  /* Hero image overlayed with dark */
  --pscems-hero-image: url('https://qacademy.skillupmena.com/draftfile.php/5/user/draft/346125081/kings.png');

}

/* ========= HERO container ========= */
.pscems-hero{
  background: var(--pscems-bg);
  color: var(--pscems-ink);
  font-family: ui-sans-serif, system-ui, "Almarai", "Segoe UI", Arial, sans-serif;
}

.pscems-hero__wrap{
  max-width: 1200px;
  margin: 0 auto;
padding : 2vmin;

  border: 1px solid var(--pscems-border);
  border-radius: var(--pscems-radius);
    background-position: inherit !important;
  background:
    radial-gradient(80% 60% at 80% 20%, rgba(45,160,255,.18) 0%, rgba(45,160,255,0) 60%),
    radial-gradient(70% 50% at 10% 80%, rgba(0,210,178,.14) 0%, rgba(0,210,178,0) 60%),
    linear-gradient(rgba(12,28,43,0.35), rgba(12,28,43,0.35)),
   center/cover no-repeat,
    var(--pscems-bg-2);


  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ========= Text ========= */
.pscems-hero__kicker{
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pscems-gold);
  margin: 0 0 6px 0;
}

.pscems-hero__title{
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin: .45em 0 .25em;
  color: var(--pscems-ink);
}

.pscems-hero__subtitle{
  max-width: 760px;
  color: var(--pscems-ink-dim);
  margin: 0 0 28px;
  font-size: clamp(15px, 2vw, 18px);
    padding-block: 5vmin;

}

/* ========= Card links ========= */
.pscems-hero__cards{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
    justify-content: center;
    padding-block: 5vmin;
}

.pscems-card{
  flex: 1 1 240px;
  min-width: 240px;
  max-width: 320px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 24px;
  border-radius: 16px;
  text-decoration: none;

  background: var(--pscems-card-bg);
  color: var(--pscems-ink);
  border: 1px solid var(--pscems-border);
  box-shadow: var(--pscems-card-elev);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.pscems-card:hover,
.pscems-card:focus{
  transform: translateY(-4px);
  background: rgba(255,255,255,.11);
  border-color: var(--pscems-border-strong);
  box-shadow: var(--pscems-card-elev-hover);
  outline: none;
}

.pscems-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(45,160,255,.5), var(--pscems-card-elev-hover);
}

.pscems-card__icon{
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 1;
}

.pscems-card__title{
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--pscems-ink);
}

.pscems-card__desc{
  margin-top: 6px;
  color: var(--pscems-ink-dim);
  font-size: .95rem;
}

/* ========= Responsive ========= */
@media (max-width: 640px){
  .pscems-card{ min-width: 100%; }
}

/* ========= RTL tweaks ========= */
html[dir="rtl"] .pscems-hero__cards{ justify-content: flex-start; }

/* ========= Motion safety ========= */
@media (prefers-reduced-motion: reduce){
  .pscems-card{ transition: none; }
}



.pscems-about {
  background: #0C1C2B !important;       /* your dark background */
  color: #F5F7FA;
  font-family: ui-sans-serif, system-ui, "Almarai", Arial, sans-serif;

  /* force full width */
  width: 100%;
  display: block;

  /* optional: ensure it spans horizontally in Totara containers */
  margin: 0;
  padding: 0;
}


.pscems-about__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* Left column */
.pscems-about__left {
  flex: 1 1 380px;
  min-width: 320px;
}

.pscems-about__title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
}

.pscems-about__intro {
  color: #C8D2DF;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
}

/* Facts list */
.pscems-about__facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pscems-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px;
}

.pscems-fact__icon {
  font-size: 22px;
}

.pscems-fact__desc {
  color: #C8D2DF;
  font-size: 14px;
}

/* Right column */
.pscems-about__right {
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pscems-box {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #1E6E7E;
  padding: 20px;
}

.pscems-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pscems-box__icon {
  font-size: 22px;
}

.pscems-box__title {
  margin: 0;
  font-size: 20px;
}

.pscems-box__text {
  margin: 10px 0 0;
  color: #EAF2F6;
  font-size: 15px;
  line-height: 1.5;
}

/* ====== STRATEGIC PILLARS ====== */
.pscems-pillars {
  background: #0C1C2B;
  color: #F5F7FA;
  font-family: ui-sans-serif, system-ui, "Almarai", Arial, sans-serif;
}

.pscems-pillars__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px;
  background: #0D1E30;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Title */
.pscems-pillars__title {
  font-size: clamp(22px,3vw,32px);
  margin: 0 0 14px;
  font-weight: 700;
}

/* Card container */
.pscems-pillars__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Each card */
.pscems-pillar {
  flex: 1 1 320px;
  min-width: 280px;
  background: #0F2236;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

/* Image wrapper */
.pscems-pillar__image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #123044;
}

.pscems-pillar__image img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* Headings */
.pscems-pillar__heading {
  margin: 12px 0 6px;
  font-size: 18px;
  font-weight: 600;
}

/* Descriptions */
.pscems-pillar__desc {
  color: #C8D2DF;
  font-size: 15px;
}
/* ===== BLOCK 4 · WHAT'S HAPPENING ===== */
.pscems-what{
  background:#0C1C2B; /* page strip */
  color:#0C1C2B;
  font-family:ui-sans-serif,system-ui,"Almarai",Arial,sans-serif;
}
.pscems-what__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:34px 16px;
}

/* Section card with soft gradient/glass */
.pscems-what__section{
  background:
    radial-gradient(90% 70% at 95% 10%, rgba(45,160,255,.10) 0%, rgba(45,160,255,0) 60%),
    radial-gradient(70% 60% at 5% 90%, rgba(0,210,178,.10) 0%, rgba(0,210,178,0) 55%),
    linear-gradient(180deg,#F7F9FC,#EFF3F6);
  border:1px solid rgba(12,28,43,.08);
  border-radius:20px;
  padding:26px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

/* Header */
.pscems-what__header{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.pscems-what__title{
  font-size:clamp(22px,3vw,30px);
  color:#0C1C2B;
  font-weight:800;
}
.pscems-what__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#2DA0FF;
  color:#051521;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  box-shadow:0 6px 18px rgba(45,160,255,.35);
}

/* Grid */
.pscems-what__grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .pscems-what__grid{ grid-template-columns:1fr 1fr; }
}

/* Event card */
.pscems-event{
  background:#FFFFFF;
  border:1px solid rgba(12,28,43,.10);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 20px rgba(12,28,43,.10);
  display:flex;
  gap:16px;
  align-items:center;
}

/* Date badge */
.pscems-event__date{
  min-width:82px;
  display:grid;
  place-items:center;
  row-gap:4px;
  background:linear-gradient(180deg,#0E66C5,#2DA0FF);
  color:#FFFFFF;
  border-radius:12px;
  padding:10px 8px;
}
.pscems-event__date-mon{
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pscems-event__date-sep{
  font-size:22px;
  font-weight:800;
  line-height:1;
}

/* Body */
.pscems-event__body{
  flex:1;
}
.pscems-event__head{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:6px;
}
.pscems-event__name{
  margin:0;
  font-size:18px;
  color:#0C1C2B;
  font-weight:700;
}
.pscems-chip{
  border:1px solid rgba(12,28,43,.18);
  padding:4px 10px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
}
.pscems-chip--blue{
  background:#F6FAFF;
  color:#0E3A67;
}
.pscems-chip--orange{
  background:#FFF6F0;
  color:#823900;
}
.pscems-chip--green{
  background:#EEF9F1;
  color:#155E2D;
}
.pscems-event__meta{
  color:#325064;
  font-size:.95rem;
}

/* Link on the right */
.pscems-event__link{
  color:#0E66C5;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}

/* Footer note */
.pscems-what__note{
  text-align:right;
  margin-top:12px;
  color:#325064;
  font-size:.95rem;
}
.pscems-what__note-link{
  color:#0E66C5;
  text-decoration:none;
  font-weight:700;
}

/* Base */
.ai-wrap { background:#0C1C2B; color:#0C1C2B; font-family:ui-sans-serif,system-ui,'Almarai','Segoe UI',Arial; }
.ai-container { max-width:1200px; margin:0 auto; padding:28px 16px; }

/* Hero */
.hero {
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:22px; margin-bottom:16px;
  background:
    radial-gradient(85% 65% at 90% 15%, rgba(45,160,255,.16) 0%, rgba(45,160,255,0) 60%),
    radial-gradient(70% 55% at 10% 85%, rgba(0,210,178,.14) 0%, rgba(0,210,178,0) 60%),
    linear-gradient(180deg,#F7F9FC,#EFF3F6);
  box-shadow:0 16px 40px rgba(12,28,43,.18);
}
.hero-inner { padding:22px 18px 18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.title-xl { display:block; color:#0C1C2B; font-size:clamp(22px,3.6vw,32px); line-height:1.15; font-weight:800; }
.muted { display:block; margin-top:6px; color:#486175; max-width:70ch; }

/* Chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-block; text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:800; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease; }
.chip:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.1); }
.chip-student { border-color:#C9DAFF; background:#EEF4FF; color:#123A7A; }
.chip-faculty { border-color:#E2D3FF; background:#F6F1FF; color:#5B3DBE; }
.chip-staff   { border-color:#BFEAD8; background:#EFFAF6; color:#0B6B4F; }

/* Grid */
.row-2 { display:block; }
@media (min-width:980px) { .row-2 { display:grid; gap:16px; grid-template-columns:1fr 1fr; } }

/* Card */
.card { background:#FFFFFF; border:1px solid rgba(12,28,43,.10); border-radius:18px; overflow:hidden; box-shadow:0 12px 28px rgba(12,28,43,.10); display:flex; flex-direction:column; }
.card-mt { margin-top:16px; }

/* Card header bands */
.card-head { color:#fff; }
.head-student { background:linear-gradient(90deg,#0E66C5,#2DA0FF); }
.head-faculty { background:linear-gradient(90deg,#7A3EF0,#3FA1FF); }
.head-staff   { background:linear-gradient(90deg,#0BB26A,#2CC7A0); }
.head-inner { padding:14px 16px; display:flex; gap:12px; align-items:center; }
.head-icon { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:18px; }
.head-text { display:flex; flex-direction:column; }
.title-md { font-size:18px; font-weight:800; color:#fff; }
.subtle { opacity:.95; font-size:.95rem; color:#fff; }

/* Photos (background images) */
.photo { width:100%; height:180px; position:relative; background-size:cover; background-position:center; }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%); }
.photo-student { background-image:url('https://images.unsplash.com/photo-1529070538774-1843cb3265df?auto=format&fit=crop&w=1400&q=80'); }
.photo-faculty { background-image:url('https://images.pexels.com/photos/5473956/pexels-photo-5473956.jpeg'); }
.photo-staff   { background-image:url('https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1400&q=80'); }

/* Body + box */
.card-body { padding:14px 16px 12px; }
.box { border:1px solid rgba(12,28,43,.12); border-radius:12px; padding:12px; background:#FAFCFF; }
.box-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; user-select:none; font-weight:800; cursor:pointer; }
.box-summary::after { content:"▸"; font-weight:800; line-height:1; transform:rotate(0deg); transition:transform 180ms ease; color:#123A7A; }

/* Accordion animation */
[list-open="true"] .box-summary::after,
.box.is-open .box-summary::after { transform:rotate(90deg); }
.list { overflow:hidden; transition:max-height 240ms ease; }
.box.is-collapsed .list { max-height:0; }
.box.is-open .list { max-height:999px; }

/* List bullets */
.list { margin-top:10px; color:#2B3A48; }
.li { position:relative; line-height:1.7; padding-left:16px; }
.li::before { content:"•"; position:absolute; left:0; top:0; line-height:1.7; color:#2B3A48; }

/* CTAs */
.card-ctas { padding:12px 16px; display:flex; gap:10px; flex-wrap:wrap; border-top:1px solid rgba(12,28,43,.08); background:#fff; }
.btn { display:inline-block; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:800; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.08); filter:brightness(1.02); }
.btn-syllabus { background:#EEF4FF; color:#123A7A; border-color:#C9DAFF; }
.btn-student  { background:#18B17A; color:#052318; border-color:#0f7f57; }
.btn-faculty  { background:#2DA0FF; color:#051521; border-color:#1c80d1; }
.btn-staff    { background:#0BB26A; color:#052318; border-color:#0a8e55; }


/* Wrapper */
.gateway-wrap {
  font-family: ui-sans-serif, system-ui, 'Almarai','Segoe UI', Arial;
  max-width: 1000px;
  margin: 32px auto;
  padding: 0 16px;
  display: block;
}

/* Card */
.gateway-card {
  display: block;
  text-decoration: none;
  color: #EAF4FF;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 36px 22px;
  text-align: center;
  background:
    radial-gradient(140px 140px at 15% 20%, rgba(45,160,255,.35), rgba(45,160,255,0) 70%),
    radial-gradient(160px 160px at 85% 80%, rgba(0,210,178,.30), rgba(0,210,178,0) 70%),
    linear-gradient(135deg, #0E2236, #183B60 60%, #0E2236);
  box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gateway-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px rgba(0,0,0,.45);
}

/* Icon */
.gateway-icon {
  margin: 0 auto 10px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #ffffff;
  background: rgba(255,255,255,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Title */
.gateway-title {
  margin: 6px 0 8px;
  font-size: clamp(22px,3.4vw,32px);
  font-weight: 800;
  letter-spacing: .3px;
  color: #F5FBFF;
  display: block;
}

/* Subtitle */
.gateway-subtitle {
  margin: 0 auto 18px;
  max-width: 60ch;
  color: #CFE0EF;
  font-size: clamp(14px,2.2vw,18px);
  line-height: 1.55;
  display: block;
}

/* CTA */
.gateway-cta {
  display: inline-block;
  background: linear-gradient(90deg,#2DA0FF,#00D2B2);
  color: #051521;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid rgba(28,128,209,1);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: filter .15s ease, transform .15s ease;
}
.gateway-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}








/* Wrap block by the custom class you added in block settings */
.ltp-current-learning {
  /* background and container */
  background: linear-gradient(135deg, #0e2236, #183b60);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  color: #eaf2f7;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(6px);
}

/* soft glows (no pseudo-elements needed) */
.ltp-current-learning::before,
.ltp-current-learning::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  z-index: -1;
}
.ltp-current-learning::before { width: 200px; height: 200px; background:#2da0ff; top:-60px; left:-60px; }
.ltp-current-learning::after  { width: 180px; height: 180px; background:#00d2b2; bottom:-50px; right:-50px; }

/* Title/header (Totara/Moodle block header) */
.ltp-current-learning .header,
.ltp-current-learning .card-header,
.ltp-current-learning .block-header {
  border: none !important;
  background: transparent !important;
  margin: 0 0 10px;
  padding: 0;
}
.ltp-current-learning .header h2,
.ltp-current-learning .card-header h3,
.ltp-current-learning .block-header .title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #ffffff;
  text-transform: none;
}

/* Content area */
.ltp-current-learning .content,
.ltp-current-learning .card-body {
  padding: 0;
  color: #d6e5f0;
}

/* List of courses/items inside the block (handles various themes/outputs) */
.ltp-current-learning ul,
.ltp-current-learning .list,
.ltp-current-learning .course-list,
.ltp-current-learning .content > div {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each item card */
.ltp-current-learning li,
.ltp-current-learning .course-item,
.ltp-current-learning .list > div,
.ltp-current-learning .content > div > div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}

/* Hover effect */
.ltp-current-learning li:hover,
.ltp-current-learning .course-item:hover,
.ltp-current-learning .list > div:hover,
.ltp-current-learning .content > div > div:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Course links */
.ltp-current-learning a {
  color: #f7fbff;
  text-decoration: none;
  font-weight: 700;
}
.ltp-current-learning a:hover { text-decoration: underline; }

/* Progress bars (common Moodle/Totara classes) */
.ltp-current-learning .progress,
.ltp-current-learning .progressbar,
.ltp-current-learning .courseprogress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
  margin-top: 8px;
}
.ltp-current-learning .progress .bar,
.ltp-current-learning .progress .progress-bar,
.ltp-current-learning .courseprogress .bar {
  background: linear-gradient(90deg,#ffd43b,#ff8f2d);
  height: 100%;
}

/* Small meta text (e.g., due dates) */
.ltp-current-learning .muted,
.ltp-current-learning .text-muted,
.ltp-current-learning .small {
  color: #c9d9e6 !important;
  opacity: .9;
}

/* Optional: compact spacing on mobile */
@media (max-width: 640px){
  .ltp-current-learning { padding: 14px; border-radius: 14px; }
}




/* --- Circular Progress Wheel --- */
.progressbar_container {
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* background ring */
.progressbar_container::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: #e0e6ed !important; /* grey track */
}

/* foreground ring using conic gradient */
.progressbar_container::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--pbar-color, #2da0ff) var(--pbar, 0%), transparent 0%) !important;
}

/* inner cutout to form ring */
.progressbar_container .inner {
  position: absolute !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #0e2236 !important;
  z-index: 2 !important;
}

/* hide old bar */
.progressbar_container .progress,
.progressbar_container .bar {
  display: none !important;
}


.panel-footer{
background: linear-gradient(135deg, #0e2236, #183b60);
}


/* ===========================
   Learning Dashboard – Scoped Styles
   =========================== */

/* Optional: customize background via CSS var on the container */
.learning-dashboard-container {
  --ld-bg: url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=1800&h=600&fit=crop");
  max-width: 1800px;
  margin: 0 auto 24px auto;
}

/* Hero section */
.learning-dashboard-hero {
  position: relative;
  display: flex;
  align-items: flex-end; /* push text to bottom */
  justify-content: flex-start;
  min-height: clamp(340px, 55vh, 600px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ld-bg) center/cover no-repeat;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  isolation: isolate; /* so overlay filters don’t bleed out */
}

/* Soft gradient + vignette overlay for readability */
.learning-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.7) 100%),
    radial-gradient(120% 70% at 80% 10%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 60%);
  z-index: 0;
}

/* Content box */
.learning-dashboard-text {
  position: relative;
  z-index: 1;
  margin: 18px;
  padding: clamp(16px, 2.2vw, 32px);
  color: #fff;

  /* Subtle glass card for contrast */
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  max-width: min(90%, 920px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Title */
.learning-dashboard-title {
  display: block;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);

  /* Fluid type: min 28px, scales, max ~46px */
  font-size: clamp(28px, 2.7vw + 10px, 46px);
}

/* Subtitle */
.learning-dashboard-subtitle {
  display: block;
  margin-top: 10px;
  line-height: 1.5;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);

  /* Fluid type: min 16px, scales, max 24px */
  font-size: clamp(16px, 1.2vw + 12px, 24px);
}

/* ---- Hover polish (desktop) ---- */
@media (hover: hover) and (pointer: fine) {
  .learning-dashboard-hero {
    transition: transform 400ms ease, box-shadow 400ms ease;
  }
  .learning-dashboard-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.32);
  }
}

/* ---- Mobile / Tablet responsiveness ---- */
@media (max-width: 992px) {
  .learning-dashboard-text {
    margin: 14px;
    max-width: 94%;
  }
}

@media (max-width: 768px) {
  .learning-dashboard-hero {
    min-height: clamp(300px, 48vh, 520px);
  }
  .learning-dashboard-text {
    text-align: center;
    margin: 12px;
    padding: clamp(14px, 3.5vw, 22px);
  }
}

@media (max-width: 480px) {
  .learning-dashboard-hero {
    min-height: 320px;
    border-radius: 16px;
  }
  .learning-dashboard-text {
    margin: 10px;
    border-radius: 14px;
  }
}

/* ---- Accessibility niceties ---- */
@media (prefers-reduced-motion: reduce) {
  .learning-dashboard-hero {
    transition: none !important;
    transform: none !important;
  }
}

/* ---- Optional RTL support: add .is-rtl on the container if needed ---- */
.learning-dashboard-container.is-rtl .learning-dashboard-text {
  direction: rtl;
  text-align: right;
}









/* Dark elegant KSU-blue gradient for dashboard blocks */
.block_news_items,
.block_badges,
.block_course_summary,
.block_calendar_upcoming {
  background: linear-gradient(135deg, #0e2236, #183b60); /* darker gradient */
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  color: #eaf2f7;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(6px);
}

/* Subtle glowing accents */
.block_news_items::before,
.block_badges::before,
.block_course_summary::before,
.block_calendar_upcoming::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #2d79ff;
  top: -60px;
  left: -60px;
  filter: blur(80px);
  opacity: 0.25;
  z-index: -1;
}

.block_news_items::after,
.block_badges::after,
.block_course_summary::after,
.block_calendar_upcoming::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #00b5a0;
  bottom: -50px;
  right: -50px;
  filter: blur(80px);
  opacity: 0.25;
  z-index: -1;
}

/* Headers inside blocks */
.block_news_items .header,
.block_badges .header,
.block_course_summary .header,
.block_calendar_upcoming .header {
  border: none !important;
  background: transparent !important;
  margin-bottom: 10px;
}

.block_news_items h2,
.block_badges h2,
.block_course_summary h2,
.block_calendar_upcoming h2 {
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}
#instance-32-header,
#instance-34-header,
#instance-26-header,
#instance-33-header {
  color: white;
}


#inst26{


    background: linear-gradient(135deg, #0e2236, #183b60);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #eaf2f7;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(6px);
}

.page-footer , .tui-core_auth-footer{
display:none;
}








body.path-login .tui-core_auth-loginLayout__contentWrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: transparent; /* we’ll paint it via ::before */
  padding: clamp(16px, 3vw, 32px);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

/* Background layer (image) */
body.path-login .tui-core_auth-loginLayout__contentWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://qacademy.skillupmena.com/files/share/Login_page.png")
              center 40% / cover no-repeat;   /* adjust position/zoom here */
  transform: translateY(0);                   /* fine shift: e.g. translateY(-10px) */
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

/* Soft dark tint for contrast */
body.path-login .tui-core_auth-loginLayout__contentWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 90% 10%, rgba(0,210,178,.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7,18,35,.65), rgba(0,65,130,.45));
  z-index: 1;
}

/* Ensure content is above the BG layers */
body.path-login .tui-core_auth-loginLayout__contentWrap > * {
  position: relative;
  z-index: 2;
  color: #EAF1FF; /* readable on dark */
}

/* Optional: make the form itself glassy for readability */
body.path-login .tui-core_auth-loginLayout__contentWrap form {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: clamp(12px, 2.5vw, 24px);
}

/* Inputs/buttons contrast tweaks (optional) */
body.path-login .tui-core_auth-loginLayout__contentWrap input,
body.path-login .tui-core_auth-loginLayout__contentWrap .tui-input {
  background: rgba(255,255,255,0.9);
  color: #0B1220;
}
body.path-login .tui-core_auth-loginLayout__contentWrap .tui-button {
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Responsive nudge for the image framing */
@media (max-width: 768px) {
  body.path-login .tui-core_auth-loginLayout__contentWrap::before {
    background-position: center 30%;  /* show a bit higher on mobile */
    background-size: cover;           /* keep cover */
  }
}



/* Container */
.qa-hero {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 16px;
}

/* Card */
.qa-hero__inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 36px 22px;
  color: #0E2236;
  background:
    radial-gradient(480px 240px at 100% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #41A0E4 0%, #2A86CB 60%, #41A0E4 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,.20);

  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

/* Brand dots layer */
.qa-hero__dots { position: absolute; inset: 0; pointer-events: none; }
.qa-hero__dot { position: absolute; border-radius: 50%; }
.qa-hero__dot--g1 { top: 18px; left: 18px; width: 10px; height: 10px; background: #47D18C; }
.qa-hero__dot--y1 { top: 46px; left: 42px; width: 8px;  height: 8px;  background: #F4B200; }
.qa-hero__dot--w1 { bottom: 18px; right: 26px; width: 12px; height: 12px; background: rgba(255,255,255,.65); }
.qa-hero__dot--g2 { bottom: 40px; right: 64px; width: 8px;  height: 8px;  background: #47D18C; }

/* Columns */
.qa-hero__left  { flex: 1 1 560px; min-width: 280px; }
.qa-hero__right { flex: 1 1 320px; min-width: 260px; display: flex; justify-content: center; }

/* Text */
.qa-hero__kicker {
  display: inline-block;
  font-weight: 800;
  color: #0E2236;
  opacity: .9;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.qa-hero__title {
  margin: 0 0 12px;
  line-height: 1.15;
  color: #0E2236;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 42px);
}

.qa-hero__desc {
  margin: 0 0 18px;
  max-width: 62ch;
  color: #0E2236;
  opacity: .92;
  font-size: 15px;
}

/* CTAs */
.qa-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.qa-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

.qa-btn--primary {
  background: #47D18C;
  color: #06281F;
  border-color: #2EA672;
}

.qa-btn--secondary {
  background: #ffffff;
  color: #0E2236;
  border-color: rgba(255,255,255,.6);
  box-shadow: none;
}







/* Container */
.qa-about {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 16px;
  position: relative;
}

/* Card */
.qa-about__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: stretch;
  border-radius: 22px;
  overflow: hidden;
  background: #F6FAFF;
  border: 1px solid #E2EEF9;
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
}

/* Decorative Circles */
.qa-about__circle {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
}
.qa-about__circle--blue  { left:-60px; top:-60px; width:180px; height:180px; background:#41A0E4; }
.qa-about__circle--green { right:-40px; bottom:-40px; width:160px; height:160px; background:#47D18C; }

/* Columns */
.qa-about__left  { flex: 1 1 560px; min-width: 280px; padding: 24px 20px; }
.qa-about__right { flex: 1 1 420px; min-width: 280px; padding: 18px 18px 18px 0; }

/* Header */
.qa-about__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.qa-about__kicker {
  font-weight: 800;
  color: #183B60;
  letter-spacing: .3px;
}
.qa-about__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.qa-about__dot--blue   { background:#41A0E4; }
.qa-about__dot--green  { background:#47D18C; }
.qa-about__dot--yellow { background:#F4B200; }

/* Title & Text */
.qa-about__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.15;
  color: #0E2236;
  font-weight: 800;
}
.qa-about__desc {
  margin: 10px 0 8px;
  color: #183B60;
  max-width: 72ch;
  font-size: 16px;
}

/* Badges */
.qa-about__badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.qa-badge {
  background:#fff;
  border:1px solid #E2EEF9;
  color:#183B60;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

/* Right Photo */
.qa-about__photo {
  height: 100%;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 28px rgba(0,0,0,.12), inset 0 0 0 1px #E2EEF9;
  background:
    linear-gradient(180deg, rgba(24,59,96,.08), rgba(24,59,96,.18)),
    url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1200&auto=format&fit=crop')
    center/cover no-repeat;
}

/* Tags inside photo */
.qa-about__tags {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.qa-tag {
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 14px;
}
.qa-tag--blue  { background:#41A0E4; color:#fff; }
.qa-tag--green { background:#47D18C; color:#05281B; }
.qa-tag--white { background:#fff; color:#183B60; border:1px solid #E2EEF9; }

/* Responsive */
@media (max-width: 640px) {
  .qa-about__inner { flex-direction: column; }
  .qa-about__right { padding: 12px; }
}


/* Photo (set URL via CSS var or override this rule) */
.qa-hero__photo {
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  background-image: var(--qa-photo, url("https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=800&auto=format&fit=crop"));
  background-size: cover;
  background-position: center;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .qa-hero__inner { padding: 24px 16px; }
  .qa-hero__photo { aspect-ratio: 16 / 10; }
}




/* Container */
.qa-benefits {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 16px;
}

/* Title */
.qa-benefits__title {
  margin: 0 0 10px;
  color: #0E2236;
  font-size: 20px;
  font-weight: 800;
}

/* Grid */
.qa-benefits__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Card */
.qa-benefit {
  flex: 1 1 280px;
  min-width: 240px;
  background: #fff;
  border: 1px solid #E2EEF9;
  border-radius: 16px;
  padding: 14px;
}

/* Header */
.qa-benefit__header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.qa-benefit__title {
  font-weight: 700;
  color: #183B60;
}

/* Dots */
.qa-benefit__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.qa-benefit__dot--blue   { background: #41A0E4; }
.qa-benefit__dot--green  { background: #47D18C; }
.qa-benefit__dot--yellow { background: #F4B200; }

/* Description */
.qa-benefit__desc {
  color: #183B60;
  opacity: .85;
  font-size: 15px;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 640px) {
  .qa-benefit { flex: 1 1 100%; }
}

/* Wrapper */
.qa-cta {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 16px;
}

/* Anchor as block */
.qa-cta__link {
  text-decoration: none;
  display: block;

}


.qa-cta__link span {
 color:black;

}
/* Card */
.qa-cta__card {
  border-radius: 18px;
  overflow: hidden;
  padding: 20px;
  color: #0E2236;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg,#41A0E4,#2A86CB);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover / focus states */
.qa-cta__link:focus-visible .qa-cta__card {
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}
.qa-cta__link:hover .qa-cta__card {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}

/* Content row */
.qa-cta__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* Title */
.qa-cta__title {
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.2;
}

/* Dots */
.qa-cta__dots { display: flex; gap: 8px; }
.qa-cta__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.qa-cta__dot--green  { background: #47D18C; }
.qa-cta__dot--yellow { background: #F4B200; }
.qa-cta__dot--white  { background: #FFFFFF; }

/* Small screens */
@media (max-width: 640px) {
  .qa-cta__title { font-size: 18px; }
}




/* Container */
.qa-journeys {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 16px;
  display: block;
}

/* Title */
.qa-journeys__title {
  display: block;
  margin-bottom: 10px;
  color: #0E2236;
  font-size: 20px;
  font-weight: 800;
}

/* Grid */
.qa-journeys__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Journey Card */
.qa-journey {
  flex: 1 1 320px;
  min-width: 260px;
  text-decoration: none;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
}
.qa-journey:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

/* Icon */
.qa-journey__icon {
  font-size: 28px;
  display: block;
}

/* Name */
.qa-journey__name {
  font-weight: 800;
  margin: 6px 0;
  font-size: 18px;
  display: block;
}

/* Description */
.qa-journey__desc {
  opacity: .95;
  font-size: 15px;
  line-height: 1.4;
  display: block;
}

/* Variants */
.qa-journey--ceo {
  background: #41A0E4;
  border: 1px solid #2A86CB;
  color: #fff;
}
.qa-journey--cto {
  background: #183B60;
  border: 1px solid #0E2236;
  color: #EAF3FF;
}
.qa-journey--cmo {
  background: #47D18C;
  border: 1px solid #2EA672;
  color: #05281B;
}

/* Responsive */
@media (max-width: 640px) {
  .qa-journey { flex: 1 1 100%; }
}



/* Container */
.qa-courses {
  font-family: ui-sans-serif,system-ui,Segoe UI,Arial;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 16px;
  display: block;
}

/* Title */
.qa-courses__title {
  display: block;
  margin-bottom: 10px;
  color: #0E2236;
  font-size: 20px;
  font-weight: 800;
}

/* Grid */
.qa-courses__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Course card (anchor behaves like card) */
.qa-course {
  flex: 1 1 320px;
  min-width: 260px;
  text-decoration: none;
  color: #183B60;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.qa-course:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Variants */
.qa-course--blue   { border-color: #41A0E4; }
.qa-course--green  { border-color: #47D18C; }
.qa-course--yellow { border-color: #F4B200; }

/* Image */
.qa-course__image {
  display: block;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #E2EEF9;
}

/* Body */
.qa-course__body {
  display: block;
  padding: 12px;
}

/* Name */
.qa-course__name {
  display: block;
  font-weight: 800;
  margin-bottom: 4px;
  font-size: 16px;
}

/* Description */
.qa-course__desc {
  display: block;
  font-size: 14px;
  opacity: .85;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 640px) {
  .qa-course { flex: 1 1 100%; }
}






/* ===== Q Academy Hero (no CTAs) ===== */

.qa-hero {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto 28px auto;
  padding: 0 16px;
  position: relative;
}

/* Decorative dots */
.qa-hero__dots { position: absolute; inset: 0; pointer-events: none; }
.qa-hero__dot { position: absolute; border-radius: 50%; display: inline-block; }
.qa-hero__dot--g1 { top: 18px; left: 18px; width: 10px; height: 10px; background: #47D18C; }
.qa-hero__dot--y1 { top: 46px; left: 42px; width: 8px;  height: 8px;  background: #F4B200; }
.qa-hero__dot--w1 { bottom: 18px; right: 26px; width: 12px; height: 12px; background: rgba(255,255,255,.65); }
.qa-hero__dot--g2 { bottom: 40px; right: 64px; width: 8px;  height: 8px;  background: #47D18C; }

/* Card container */
.qa-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #41A0E4 0%, #2A86CB 60%, #41A0E4 100%);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.20);
  padding: 36px 22px;
  color: #0E2236; /* text over gradient is dark for contrast */
}

/* Left text */
.qa-hero__left { flex: 1 1 560px; min-width: 280px; }
.qa-hero__kicker {
  font-weight: 800;
  letter-spacing: .3px;
  display: block;
  margin-bottom: 8px;
  color: #0E2236;
  opacity: .95;
}
.qa-hero__title {
  margin: 0 0 10px 0;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  color: #0E2236;
}
.qa-hero__desc {
  margin: 0;
  max-width: 62ch;
  opacity: .92;
  font-size: 16px;
  line-height: 1.6;
  color: #0E2236;
}

/* Right photo */
.qa-hero__right { flex: 1 1 320px; min-width: 260px; display: flex; justify-content: center; }
.qa-hero__photo {
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  min-height: 240px;
  background: url("https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1200&auto=format&fit=crop")
             center / cover no-repeat;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Responsive tweaks */
@media (max-width: 700px) {
  .qa-hero__inner { padding: 26px 18px; }
  .qa-hero__title { font-size: clamp(24px, 6vw, 34px); }
  .qa-hero__photo { min-height: 200px; }
}




























.ksa-footer {
  position: relative;
  z-index: 9999; /* footer below sidebar */
}

/* If you want footer to push below when sidebar expands dynamically */
.main-content {
  transition: margin-left 0.3s ease;
}

.sidebar-open .main-content {
  margin-left: 250px; /* same width as sidebar */
}

/* Responsive */
@media (max-width: 768px) {
  .ksa-footer-container {
    flex-direction: column;
    text-align: center;
  }
}














/* ==== AI Pathways block (Totara-safe: div/span/a/ul/li only) ==== */
.aiPW-wrap { display:grid; gap:16px; }
@media (min-width:980px){ .aiPW-wrap{ grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .aiPW-wrap{ grid-template-columns:1fr 1fr; } }

/* Cards */
.aiPW-card{
  background:#0f1b28;
  border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
}
.aiPW-head{ padding:16px 16px 8px 16px; position:relative; }
.aiPW-title{ color:#fff; font-size:18px; font-weight:700; line-height:1.25; }
.aiPW-sub{ color:#c9d7e5; font-size:12px; margin-top:4px; }
.aiPW-pill{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  color:#fff; background:linear-gradient(90deg,#2D13EA,#6f5bff);
  box-shadow:0 2px 8px rgba(45,19,234,.4); margin-bottom:10px;
}
.aiPW-student-pill{ background:linear-gradient(90deg,#2D13EA,#6f5bff); }
.aiPW-faculty-pill{ background:linear-gradient(90deg,#00a4a3,#2D13EA); }
.aiPW-admin-pill{ background:linear-gradient(90deg,#00b38f,#2D13EA); }

/* Media banners (CSS gradients, no external images) */
.aiPW-media{ height:180px; background:#1b2a3b; }
.aiPW-media--student{     background: url(https://images.unsplash.com/photo-1529070538774-1843cb3265df?auto=format&fit=crop&w=1400&q=80);
    background-size: cover;
    background-position: center;}
.aiPW-media--faculty{ background: url(https://images.pexels.com/photos/5473956/pexels-photo-5473956.jpeg););
    background-size: cover;
    background-position: center; }
.aiPW-media--admin  {background: url(https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1400&q=80);
    background-size: cover;
    background-position: center; }

/* Dropdown */
.aiPW-dropdown{ background:#0b1521; border-top:1px solid rgba(255,255,255,.06); }
.aiPW-toggle{
  display:flex; justify-content:space-between; align-items:center;
  color:#e9f1fb; text-decoration:none; padding:14px 16px; font-weight:700;
}
.aiPW-toggle:hover{ background:#0a121c; }
.aiPW-caret{ transition:transform .2s ease; opacity:.8; }
.aiPW-toggle[aria-expanded="true"] .aiPW-caret{ transform:rotate(90deg); }

.aiPW-panel{ padding:0 8px 12px 8px; }
.aiPW-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

.aiPW-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:#0e1a29; border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px;
}
.aiPW-name{ color:#f2f7ff; font-size:14px; line-height:1.35; }
.aiPW-actions{ display:flex; align-items:center; gap:10px; }

.aiPW-cta{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background:#FF7800; color:#101621; font-weight:800; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.aiPW-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,120,0,.35); }

.aiPW-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  opacity:.9;
}
.aiPW-badge--soon{ background:rgba(255,255,255,.08); color:#c9d7e5; border:1px dashed rgba(201,215,229,.35); }

/* States */
.aiPW-item.aiPW-soon .aiPW-name{ color:#b7c4d4; }
.aiPW-item.aiPW-soon .aiPW-cta{ display:none; }

/* Overview Section Styles */
.aiPW-overview {
  background-color: #ffffff;  /* White background */
  padding: 12px;
  margin: 16px 0;
  border-radius: 8px;
  color: #0E2236;  /* Dark text color */
  font-size: 14px;
  line-height: 1.6;
}

.aiPW-overview p {
  margin: 0;
}


















/* ===== Spotlight Carousel (Totara-safe) ===== */
.spot-wrap { background:#f2f5f9; padding:16px; border-radius:12px; position:relative;    max-width: 90%;
    margin: auto; }
.spot-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.spot-title { font-weight:800; font-size:22px; color:#101621; }
.spot-controls { display:flex; gap:8px; }
.spot-nav{
  display:inline-block; width:34px; height:34px; line-height:34px; text-align:center;
  border-radius:50%; text-decoration:none; color:#0b1420; background:#ffffff; 
  border:1px solid #e3e9f2; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.spot-nav:hover{ background:#f6f8fb; }

.spot-viewport{ overflow:auto; scroll-behavior:smooth; }
.spot-track{
  display:flex; gap:16px; list-style:none; padding:0; margin:0;
  scroll-snap-type:x mandatory;
}
.spot-slide{ flex:0 0 100%; scroll-snap-align:start; }
@media (min-width:900px){ .spot-slide{ flex-basis:50%; } }

.spot-card{
  position:relative; height:240px; border-radius:18px; overflow:hidden;
  background:#0e1a29; /* fallback if no image */
  box-shadow:0 10px 24px rgba(10,20,33,.15);
}

/* Optional background image via data-bg attribute (set in HTML) */
.spot-slide[data-bg] .spot-card{ background-size:cover; background-position:center; }
.spot-slide[data-bg]:not([data-bg=""]) .spot-card{ background-image:var(--bg-img); }

/* Themed gradients (no images needed) */
.spot-ai{ background: url(https://www.ece.fr/wp-content/uploads/sites/2/2024/04/ai-technology-brain-background-digital-transformation-concept.jpg);
    background-size: cover;
    background-position: center;}
.spot-health{  background: url(https://www.netguru.com/hubfs/scientist%20doctor%20hand%20holds%20virtual%20molecular%20structure%20in%20the%20lab%20as%20concept.jpeg);
    background-size: cover;
    background-position: center; }
.spot-acad{  background: url(https://www.sourcely.net/_next/image?url=https%3A%2F%2Fassets.seobotai.com%2Fsourcely.net%2F678eed990118902285bba61d-1737428359910.jpg&w=3840&q=75);
    background-size: cover;
    background-position: center; }

.spot-fade{
  position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg, rgba(16,22,33,0) 0%, rgba(16,22,33,.84) 100%);
}

.spot-badges{ position:absolute; left:16px; top:14px; display:flex; gap:6px; z-index:2; }
.spot-badge{
  background:#ffffff; color:#0b1420; font-size:11px; font-weight:800; border-radius:8px;
  padding:6px 8px; box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.spot-content{ position:absolute; left:16px; right:16px; bottom:14px; z-index:3; color:#fff; }
.spot-kicker{ display:block; font-weight:800; font-size:12px; opacity:.95; }
.spot-heading{ display:block; font-weight:900; font-size:22px; margin-top:2px; }
.spot-sub{ display:block; font-size:12px; opacity:.9; margin-top:2px; }

.spot-actions{ margin-top:10px; }
.spot-cta{
  display:inline-block; text-decoration:none; font-weight:800; font-size:13px;
  background:#FF7800; color:#0b1420; padding:8px 12px; border-radius:10px;
  box-shadow:0 6px 16px rgba(255,120,0,.35); 
}
.spot-cta:hover{ transform:translateY(-1px); }

/* scrollbar hint (optional) */
.spot-viewport::-webkit-scrollbar{ height:8px; }
.spot-viewport::-webkit-scrollbar-thumb{ background:#d9e1ee; border-radius:8px; }
.spot-viewport::-webkit-scrollbar-track{ background:#eef2f8; border-radius:8px; }



.aiPW-dropdown a:focus , a:hover{
text-decoration:none !important;
}