:root{--color-primary: #69bd45;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #4b7e2b;--color-state-hover: #3c6721;--color-state-focus: #3c6721;--color-state-active: #30541a;--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: #fff;--nav-text-color: var(--color-text);--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)}:root{--nav-bg-color: #ffffff;--nav-text-color: #005669;--color-primary: #ffffff;--color-state: #00546a;--color-text: #00546a;--footer-bg-color: #ffffff;--footer-text-color: #262626;--color-state-hover: #004a60;--color-state-focus: #004a60;--color-state-active: #00394f;--footer-text-color-hover: #1c1c1c;}



/*helkial comment getback*/

.tui-core_auth-loginForm__content{
display:none !important;
}

.tui-core_auth-loginLayout__panel-interface .tui-core_auth-footer {
padding:0px !important;
margin:0px !important;
} 

.tui-core_auth-loginLayout__panel-interface {
  height: 100vh !important;
}

.tui-core_auth-loginForm__content .tui-formRow ,
.tui-core_auth-loginForm__content .tui-core_auth-loginForm__options
 {
display:none !important;
}




@media (max-width: 768px) {
#inst937 .iframeforallurl-container  {

    height: 525px !important; /* fixed height on mobile */
  }


 #inst937 #iframeforallurl_68e278d232603 .stats-row { width: 85% !important; }
#inst937 #iframeforallurl_68e278d232603 .stat-card  { width: 100% !important; min-width: 0 !important; }



}




.instance-name-actions a {
color:white;
}



#Skillupmena {
text-align:center;
}
html[lang="ar"] .totaraNav {
margin:40px;
}


/* Hide Arabic by default, show only when html[lang="ar"] */
html[lang="en"] .instance-name-values2-row[lang="ar"] {
  display: none !important;
}

html[lang="ar"] .instance-name-values2-row:not([lang="ar"]) {
  display: none !important;
}


#inst1019 .core-competencies-container .title-container h1 , 
#inst1019 .core-competencies-container .title-container h2 ,
#inst1019 .core-competencies-container .title-container p ,
#inst1019 .core-competencies-container .cards-container .card h4 ,
#inst1019 .core-competencies-container .cards-container .card h3 ,
#inst1019 .core-competencies-container .cards-container .card p 
 {
  font-family: 'Neo Sans Arabic', 'Neo Sans Arabic Medium', Tahoma, Arial, sans-serif !important;
direction:rtl !important;
}

html[lang="ar"] #inst1019 .core-competencies-container .title-container h1 , 
html[lang="ar"] #inst1019 .core-competencies-container .title-container h2 ,
html[lang="ar"] #inst1019 .core-competencies-container .title-container p ,
html[lang="ar"] #inst1019 .core-competencies-container .cards-container .card h4 ,
html[lang="ar"] #inst1019 .core-competencies-container .cards-container .card h3 ,
html[lang="ar"] #inst1019 .core-competencies-container .cards-container .card p {
  font-family: 'Neo Sans Arabic', 'Neo Sans Arabic Medium', Tahoma, Arial, sans-serif !important;
direction:ltr !important;
}

html[lang="ar"] body {


  font-family: 'Neo Sans Arabic', 'Neo Sans Arabic Medium', Tahoma, Arial, sans-serif !important;

}

.page-footer .container-fluid {
padding:0 !important;
}


.centered-new-banner{
    text-align: center !important;
}



/* CSS */
/* CSS */
.alm-footer {

  color: #005669;
  text-align: center;

  font-family: "Helvetica Neue", Arial, sans-serif;
}

.alm-footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.alm-footer-logo span img {
  width: 60px;
  height: auto;
  margin-bottom: 20px;
  display: inline-block;
}

/* Navigation */
.alm-footer-nav {
  margin-bottom: 20px;
  font-size: 18px;
}

.alm-footer-nav .alm-link a {
  color: #005669;
  text-decoration: none;
  margin: 0 10px;
}

.alm-footer-nav .alm-link a:hover {
  text-decoration: underline;
}

.alm-footer-nav .alm-sep {
  margin: 0 10px;
  color: #005669;
}

/* Copy */
.alm-footer-copy span {
  font-size: 14px;
  opacity: 0.9;
}

/* Language control */
html[lang="en"] .lang-ar { display: none !important; }
html[lang="ar"] .lang-en { display: none !important; }

/* RTL alignment for Arabic */
html[lang="ar"] .alm-footer-nav {
  direction: rtl;
}





/* Apply flex + centering for both nav types */
@media screen and (min-width: 768px) {
  .totaraNav_prim--list,
  .totaraNav_prim--list.totaraNav_prim--list_hideMobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}




  html[lang="en"] .lang-ar lang-fr { display: none !important; }

  html[lang="ar"] .lang-en lang-fr{ display: none !important; }
  html[lang="fr"] .lang-en lang-ar { display: none !important; }
 
.lang-en, .lang-ar, .lang-fr {
  display: none !important;
}

/* Show English version */
html[lang="en"] .lang-en { display: block !important; }

/* Show Arabic version */
html[lang="ar"] .lang-ar { display: block !important;  
font-family: 'Neo Sans Arabic', sans-serif;
font-family: 'Neo Sans', sans-serif; 
font-weight:500;
}

/* Show French version */
html[lang="fr"] .lang-fr { display: block !important; }

.block-totara-recently-viewed>ul.block-trv-layout-horizontal li  {
margin:1vw ;
}

#block-region-side-pre{
    margin-top: 15vh;
}

.topics-wrapper {
    max-width: 100% !important;
    margin: 40px auto;
    display: flex
;
    flex-wrap: wrap;
    gap: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.totaraNav_prim .masthead_logo--header_img {
        height: 4rem;

 
    }


 
.tui-core_auth-loginNav__image {
    height: 4rem;
}
 
.tui-core_auth-loginLayout__contentWrap {
    background-image: url('https://ebrahimalmanaacademy.almanahospital.com.sa/pluginfile.php/1/totara_core/loginbackground/2485/login22-fa03xmqheqc.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%; /* Slightly increases the image size */
}
.page-footer-poweredby:not(#Skillupmena){
display:none;
}
.tui-core_auth-footer__poweredBy:not(#Skillupmena){
display:none;
}
body#page-login-index .sitemap {
  display: none;
}

.progress, .dndupload-progress-outer {
    height: 44px;
}
.progressbar__text {
    display: inline-block;
    padding-right: 5px;
    padding-top: 9px;
}
.tui-core_auth-loginForm__content{
#display:none;
}

.tui-core_auth-languageSelect__button{
display:none;
}
.card-level-wrapper{
display:flex;
justify-content:space-between;
}
.card-level-wrapper-ar{
display:flex;
justify-content:space-between;
flex-direction: row-reverse;

f
}



input[aria-describedby="mod_scorm--enter_popup"] {
  background-color: #00546a !important;
  color: white !important;
  font-size: 18px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  border: none !important;
}

input[aria-describedby="mod_scorm--enter_popup"]::before {
  content: "Start Course"; /* won't work here, see JS method below for changing text */
}
 .skillup-fixed-logo {

  padding: 20px 20px;

}

.totaraNav_prim{
padding:0 !important;
}

html[lang="en"] .skillup-fixed-logo {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px;
  background: #fff;
  direction: ltr;
}
html[lang="fr"] .skillup-fixed-logo {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px;
  background: #fff;
  direction: ltr;
}

html[lang="en"] .tui-core_auth-loginNav{
  direction: rtl;
}
html[lang="fr"] .tui-core_auth-loginNav{
  direction: rtl;
}

.skillup-fixed-logo img {
  height: 60px;
  width: auto;
}

.masthead_logo{
display:none;
}

/* Hide logo on login page or any not-logged-in page  */
body.notloggedin .skillup-fixed-logo {
  display: none !important;
}
.tui-core_auth-login{
width: max-content;
}









.content block-content .stats-row {
    max-width: 1200px;
    margin: 0 auto 16px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-evenly !important;
}
















/* =========================================================
   Al Mana — Programs Block (Core Competencies + English)
   Brand tokens
========================================================= */
:root {
  --inst-deep:#00546a;   /* primary */
  --inst-teal:#00a4a3;   /* accent */
  --inst-ink:#003b4a;    /* deeper for contrast */
  --inst-white:#ffffff;
}

/* =========================================================
   Global link locking (keep white text, no underline/hover color)
========================================================= */
.instance-name-link,
.instance-name-link:link,
.instance-name-link:visited,
.instance-name-link:hover,
.instance-name-link:focus,
.instance-name-link:active,
.instance-name-hero-head,
.instance-name-hero-head:link,
.instance-name-hero-head:visited,
.instance-name-hero-head:hover,
.instance-name-hero-head:focus,
.instance-name-hero-head:active {
  color: var(--inst-white) !important;
  text-decoration: none !important;
}

/* =========================================================
   Layout
========================================================= */
.instance-name-stage {
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 16px;
}

.instance-name-row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .instance-name-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Cards (hero tiles)
========================================================= */
.instance-name-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--inst-deep);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  isolation: isolate;
  min-height: 220px;
  max-height: fit-content;
}

.instance-name-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.65);
}

/* Background images */
.instance-name-hero-cc::before {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&auto=format&fit=crop");
}

.instance-name-hero-en::before {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55)),
    url("https://images.unsplash.com/photo-1529070538774-1843cb3265df?w=1600&auto=format&fit=crop");
}

/* Clickable head area */
.instance-name-hero-head {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--inst-white);
  text-decoration: none;
  padding: 26px 24px 28px;
  transition: transform .14s ease;
}

.instance-name-hero:hover .instance-name-hero-head {
  transform: translateY(-1px);
}

/* =========================================================
   Typography inside cards
========================================================= */
.instance-name-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.instance-name-badge-alt {
  background: rgba(0,164,163,.22);
}

.instance-name-title {
  display: block;
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

@media (min-width: 900px) {
  .instance-name-title { font-size: 26px; }
}

.instance-name-sub {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  opacity: .98;
}

.instance-name-cta {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  background: var(--inst-teal);
  color: var(--inst-ink);
  padding: 10px 14px;
  border-radius: 12px;
}

.instance-name-caret {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 18px;
}

/* =========================================================
   Panel (dropdown under the card)
========================================================= */
.instance-name-panel {
  position: relative;
  z-index: 1;
  display: none;
  padding: 10px 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.52));
}

/* JS-enhanced state: show panel when the hero has aria-expanded="true" */
.instance-name-hero[aria-expanded="true"] .instance-name-panel { display: block; }
.instance-name-hero[aria-expanded="true"] .instance-name-caret { transform: rotate(180deg); }

/* CSS :target fallback (no JS) */
.instance-name-panel:target { display: block; }
.instance-name-panel:target { scroll-margin-top: 80px; }

/* =========================================================
   Links list inside the panel
========================================================= */
.instance-name-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .instance-name-links { grid-template-columns: 1fr 1fr; }
}

.instance-name-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: rgba(255,255,255,.10);
  padding: 12px 14px;
  border-radius: 12px;
  transition: transform .12s ease, background .12s ease;
  color: #ffffff !important;
}

.instance-name-link span { color: #ffffff !important; }

.instance-name-link:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}

.instance-name-link span:first-child {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--inst-teal);
  color: var(--inst-ink) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* Close-pill visual */
.instance-name-close span:first-child {
  background: rgba(255,255,255,.22);
  color: #ffffff !important;
}

/* =========================================================
   Mini row on English card (level pills)
========================================================= */
.instance-name-mini {
  position: relative;
  z-index: 1;
  padding: 0 24px 18px;
  color: var(--inst-white);
}

.instance-name-pills {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.instance-name-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-weight: 700;
  letter-spacing: .02em;
  color: #ffffff;
}

.instance-name-note {
  display: block;
  font-size: 12px;
  opacity: .95;
}

/* =========================================================
   Focus styles and small cleanup
========================================================= */
.instance-name-hero-head:focus,
.instance-name-link:focus {
  outline: 2px solid var(--inst-teal);
  outline-offset: 2px;
  border-radius: 12px;
}

.breadcrumb { display: none; }











/* Brand */
:root{
  --inst-deep:#00546a;
  --inst-teal:#00a4a3;
  --inst-ink:#003b4a;
  --inst-white:#ffffff;
  --inst-bg:#f6fbfb;
}

/* Layout helpers */

.instance-name-section{max-width:1200px;margin:28px auto;padding:0 16px;}
.instance-name-row{display:grid;gap:18px;}
.instance-name-row.instance-name-3{grid-template-columns:1fr;}
.instance-name-row.instance-name-4{grid-template-columns:1fr;}
@media(min-width:800px){
  .instance-name-row.instance-name-3{grid-template-columns:1fr 1fr 1fr;}
  .instance-name-row.instance-name-4{grid-template-columns:1fr 1fr 1fr 1fr;}
}

/* Hero */
.instance-name-hero{
  background:linear-gradient(135deg, rgba(0,84,106,.85), rgba(0,164,163,.85));
  position:relative;color:var(--inst-white);
}
.instance-name-hero::before{
  content:"";position:absolute;inset:0;opacity:.18;
  background:url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?w=1600&auto=format&fit=crop") center/cover no-repeat;
}
.instance-name-hero-inner{
  max-width:1200px;margin:0 auto;padding:56px 16px;position:relative;z-index:1;
}
.instance-name-eyebrow{display:block;letter-spacing:.08em;font-size:12px;opacity:.9;}
.instance-name-hero-title{display:block;font-weight:800;font-size:28px;margin-top:6px;}
.instance-name-hero-sub{display:block;max-width:820px;opacity:.95;margin-top:8px;line-height:1.6;}
.instance-name-hero-ctas{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.instance-name-btn{
  display:inline-block;padding:10px 14px;border-radius:12px;background:var(--inst-white);
  color:var(--inst-ink);text-decoration:none;font-weight:700;
}
.instance-name-btn-outline{
  background:transparent;border:2px solid var(--inst-white);color:var(--inst-white);
}

/* KPIs */
.instance-name-kpi{
  background:var(--inst-white);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.06);
  text-align:center;
}
.instance-name-kpi-num{display:block;font-weight:800;font-size:22px;color:var(--inst-deep);}
.instance-name-kpi-cap{display:block;opacity:.85;margin-top:6px;}

/* Cards */
.instance-name-card{
  background:var(--inst-white);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.instance-name-card-kicker{display:block;font-size:12px;letter-spacing:.06em;color:var(--inst-deep);}
.instance-name-card-title{display:block;font-weight:800;font-size:18px;margin-top:6px;color:var(--inst-ink);}
.instance-name-card-body{display:block;margin-top:6px;opacity:.95;line-height:1.6;}
.instance-name-list{list-style:none;margin:10px 0 0 0;padding:0;display:grid;gap:6px;}
.instance-name-list li span{background:#eef6f6;border-radius:10px;padding:6px 10px;display:inline-block;}

/* Pillar tiles */
.instance-name-tile{
  position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;
  background:var(--inst-deep);color:var(--inst-white);min-height:160px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.instance-name-tile::before{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:0;
}
.instance-name-tile span{position:relative;z-index:1;display:block;padding:16px;}
.instance-name-tile-title{font-weight:800;font-size:18px;}
.instance-name-tile-sub{opacity:.95;max-width:40ch;}
.instance-name-tile:hover{transform:translateY(-2px);}
.instance-name-pillar1{background:url("https://images.unsplash.com/photo-1579154204601-01588f351e67?w=1200&auto=format&fit=crop") center/cover;}
.instance-name-pillar2{background:url("https://images.unsplash.com/photo-1523246191811-8f1f06f7a9c5?w=1200&auto=format&fit=crop") center/cover;}
.instance-name-pillar3{background:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1200&auto=format&fit=crop") center/cover;}
.instance-name-pillar4{background:url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&auto=format&fit=crop") center/cover;}

/* Ribbon */
.instance-name-ribbon{background:var(--inst-deep);color:var(--inst-white);}
.instance-name-ribbon-list{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;gap:14px;list-style:none;flex-wrap:wrap;}
.instance-name-ribbon-list li{padding:6px 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;}

/* Leadership */
.instance-name-lead{
  position:relative;border-radius:16px;overflow:hidden;color:var(--inst-white);min-height:160px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.instance-name-lead::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);}
.instance-name-lead span{position:relative;z-index:1;display:block;padding:16px;}
.instance-name-lead-name{font-weight:800;font-size:18px;}
.instance-name-lead-role{opacity:.95;}
/* Updated CHRO card background - abstract architecture */
.instance-name-lead1{background:url("https://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=1200&auto=format&fit=crop") center/cover;}
.instance-name-lead2{background:url("https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=1200&auto=format&fit=crop") center/cover;}
.instance-name-lead3{background:url("https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1200&auto=format&fit=crop") center/cover;}

/* Timeline */
.instance-name-timeline{list-style:none;max-width:900px;margin:0 auto;padding:0 16px;display:grid;gap:12px;}
.instance-name-timeline li{display:grid;grid-template-columns:auto 16px 1fr;align-items:start;gap:10px;}
.instance-name-time{font-weight:800;color:var(--inst-deep);}
.instance-name-dot{width:10px;height:10px;background:var(--inst-teal);border-radius:50%;margin-top:6px;}
.instance-name-time-text{opacity:.95;}

/* CTA band */
.instance-name-cta-band{
  background:linear-gradient(90deg, rgba(0,84,106,.08), rgba(0,164,163,.10));
  border:1px solid rgba(0,84,106,.12);border-radius:16px;padding:18px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.instance-name-cta-text{font-weight:700;color:var(--inst-ink);}
.instance-name-cta-actions{display:flex;gap:10px;flex-wrap:wrap;}






/* ========== Al Mana English Journey ========== */
.ema-journey{--deep:#00546a;--teal:#00a4a3;--ink:#003b4a;--white:#fff;--bg:#f6fbfb;font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--ink);}
.ema-hero{background:linear-gradient(180deg, var(--deep), #047188);color:var(--white);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.12);overflow:hidden;}
.ema-hero-inner{max-width:1100px;margin:0 auto;padding:28px 16px 26px;text-align:center;}
.ema-hero h2{margin:0 0 8px;font-size:28px;}
.ema-hero p{margin:0 auto 16px;max-width:800px;opacity:.95}
.ema-btn{display:inline-block;border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none;border:0;cursor:pointer}
.ema-btn-primary{background:var(--teal);color:var(--ink);}
.ema-btn-outline{background:transparent;border:2px solid var(--deep);color:var(--deep);}
.ema-steps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.ema-step{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 10px;display:flex;gap:6px;align-items:center}
.ema-step-num{width:20px;height:20px;border-radius:50%;background:var(--white);color:var(--ink);font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:12px}

.ema-controls{background:linear-gradient(180deg, #e8f5f6, #ffffff);border-radius:16px;margin-top:18px}
.ema-controls-inner{max-width:1100px;margin:0 auto;padding:16px}
.ema-controls h3{margin:0 0 4px;color:var(--deep)}
.ema-controls p{margin:0 0 8px;opacity:.85}
.ema-actions{display:flex;gap:8px;flex-wrap:wrap}

.ema-levels{max-width:1100px;margin:14px auto 0;padding:0 4px}
.ema-level{background:var(--white);border:1px solid #e6eef0;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.ema-level-head{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:14px;border:0;background:#f9fcfc;color:var(--ink);cursor:pointer}
.ema-badge{background:var(--deep);color:var(--white);font-weight:800;border-radius:10px;padding:6px 10px;min-width:38px;text-align:center}
.ema-level-title{font-weight:800}
.ema-level-sub{opacity:.8}
.ema-caret{font-size:16px;transition:transform .18s ease}
.ema-level-head[aria-expanded="true"] .ema-caret{transform:rotate(180deg)}
.ema-level-panel{padding:12px 14px 16px;background:#ffffff}
.ema-level-actions{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ema-mods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ema-mods li a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--deep);background:#e9f7f8;border:1px solid #d4eeef;border-radius:10px;padding:12px 14px;font-weight:600}
.ema-mods li a:hover{background:#dff2f3}
.ema-go{color:#0b5c66;font-weight:700}
@media (max-width:640px){
  .ema-level-head{grid-template-columns:auto 1fr auto;grid-template-areas:"badge title caret" "badge sub caret"}
  .ema-badge{grid-area:badge}
  .ema-level-title{grid-area:title}
  .ema-level-sub{grid-area:sub}
}



.ema-level-actions .ema-btn-primary {
display:none !important;
}








.am-timeline{max-width:1100px;margin:30px auto;padding:0 10px;text-align:center}
.am-timeline-line{display:flex;justify-content:space-between;align-items:center;position:relative}
.am-timeline-line::before{content:"";position:absolute;top:22px;left:0;right:0;height:4px;background:#e6eef0;z-index:0}
.am-tl-step{flex:1;position:relative;z-index:1}
.am-tl-badge{background:#00546a;color:#fff;border-radius:50%;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:6px}
.am-tl-step p{margin:0;font-size:14px;opacity:.8}













/* ===== Al Mana — Split Panel (Wide 2/3 + 1/3, robust) ===== */
:root{
  --cc-deep:#00546a; /* primary */
  --cc-teal:#00a4a3; /* accent */
  --cc-ink:#003b4a;  /* deep ink */
  --cc-soft:#e6eef0; 
  --cc-white:#fff;
}

/* Container: 2fr/1fr split on desktop for wider cards */
.ccx{
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 20px;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;        /* mobile default: stacked */
}
@media (min-width: 1024px){
  .ccx{ grid-template-columns: 2fr 1fr; } /* WIDE split */
}

/* Hero cards */
.ccx-hero{
  position:relative;border-radius:22px;overflow:hidden;background:var(--cc-deep);
  box-shadow:0 22px 55px rgba(0,0,0,.18);isolation:isolate;min-height:300px
}
.ccx-hero::before{
  content:"";position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:brightness(.62)
}
.ccx-hero-cc::before{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&auto=format&fit=crop");
}
.ccx-hero-en::before{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    url("https://images.unsplash.com/photo-1529070538774-1843cb3265df?w=1600&auto=format&fit=crop");
}

/* Heads */
.ccx-hero-head,
.ccx-hero-headlink{display:block;position:relative;z-index:1;color:#fff;padding:36px 28px 26px}
.ccx-hero-head{width:100%;text-align:left;background:transparent;border:0;cursor:pointer}
.ccx-hero-head:hover,.ccx-hero-headlink:hover{transform:translateY(-2px);transition:transform .18s ease}
.ccx-badge{display:inline-block;font-size:14px;letter-spacing:.06em;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.22)}
.ccx-badge-alt{background:rgba(0,164,163,.28)}
.ccx-title{display:block;margin-top:14px;font-size:30px;line-height:1.2;font-weight:900;text-shadow:0 2px 2px rgba(0,0,0,.4)}
@media (min-width:900px){.ccx-title{font-size:34px}}
.ccx-sub{display:block;margin-top:12px;font-size:17px;line-height:1.5;opacity:.95}
.ccx-cta{display:inline-block;margin-top:18px;font-weight:800;background:var(--cc-teal);color:var(--cc-ink);padding:12px 20px;border-radius:14px;font-size:16px}
.ccx-caret{position:absolute;right:20px;top:24px;font-size:22px}

/* Panel */
.ccx-panel{position:relative;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.55));padding:20px;color:#fff;border-radius:0 0 18px 18px}
.ccx-panel[hidden]{display:none}

/* Split layout inside panel */
.ccx-split{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:880px){.ccx-split{grid-template-columns:360px 1fr}} /* larger left rail */

/* Left list */
.ccx-list{display:flex;flex-direction:column;gap:12px}
.ccx-item{
  display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);
  padding:16px 18px;border-radius:14px;cursor:pointer;font-weight:800;font-size:16px;color:#fff;transition:all .2s ease;border:0
}
.ccx-item:hover{background:rgba(255,255,255,.2)}
.ccx-num{
  width:34px;height:34px;border-radius:10px;background:var(--cc-teal);color:var(--cc-ink);
  display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:16px
}

/* Right detail */
.ccx-detail{position:relative;min-height:220px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:22px}
.ccx-pane{display:none}
.ccx-pane-head{font-weight:900;display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:20px}
.ccx-chip{background:var(--cc-teal);color:var(--cc-ink);border-radius:10px;padding:6px 12px;font-weight:900}
.ccx-desc{margin:0 0 14px 0;opacity:.95;font-size:15px;line-height:1.6}
.ccx-actions{display:flex;gap:12px;flex-wrap:wrap}
.ccx-btn{
  display:inline-block;padding:12px 18px;border-radius:14px;font-weight:800;font-size:15px;text-decoration:none;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff
}
.ccx-btn:hover{background:rgba(255,255,255,.22)}
.ccx-en{border-color:#8df3ee}
.ccx-ar{border-color:#c1f3ff}

/* JS-controlled active states */
.ccx-pane.is-active { display: block; }
.ccx-list .ccx-item.is-active {
  outline: 3px solid var(--cc-teal);
  outline-offset: 2px;
  background: rgba(0,164,163,.28);
}

/* Close row */
.ccx-close{margin-top:12px}
.ccx-close-btn{
  display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);color:#fff;padding:10px 14px;border-radius:12px;font-weight:900;text-decoration:none
}
.ccx-close-btn span{display:inline-flex;width:22px;height:22px;border-radius:8px;align-items:center;justify-content:center;background:rgba(255,255,255,.3)}

/* Mini pills in English card */
.ccx-mini{position:relative;z-index:1;padding:0 28px 22px;color:#fff}
.ccx-pills{list-style:none;margin:8px 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.ccx-pills li{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:900;font-size:14px;color:#fff}
.ccx-note{display:block;font-size:13px;opacity:.95;margin-top:6px}

/* Focus styles */
.ccx-hero-head:focus,.ccx-hero-headlink:focus,.ccx-item:focus,.ccx-btn:focus,.ccx-close-btn:focus{
  outline:3px solid var(--cc-teal); outline-offset:2px; border-radius:12px;
}

/* Ensure links stay white in dark panel */
.ccx-panel a{color:#fff}



.popover-region-messages{
display:none;
}



:root{
  --instance-name-brand:#00546a;
  --instance-name-accent:#00a4a3;
  --instance-name-muted:#9aa4a6;
  --instance-name-soft:rgba(217,217,217,.25);
  --instance-name-ink:#12373f;
  --instance-name-white:#fff;
}

/* Wrapper */
/* ===== Base container ===== */
.instance-name-zig{
  direction: rtl;                 /* Your layout is RTL by default */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;                /* a bit more breathing room on small screens */
  display: grid;
  gap: 22px;
}

/* ===== Feature row ===== */
.instance-name-feature{
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--instance-name-soft);
  border-radius: 20px;
  padding: 24px;
}

/* Zig-zag only on wider screens (reverts to stacked on mobile/tablet) */
.instance-name-feature:nth-child(odd){
  background: #fff !important;
}
@media (min-width: 901px){
  .instance-name-feature:nth-child(even){
    flex-direction: row-reverse;
  }
}

/* ===== Media (image via background) =====
   Make the visual fully fluid with a fixed aspect-ratio square */
.instance-name-media{
  flex: 0 0 auto;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  width: min(42vw, 520px);       /* fluid up to 520px */
  aspect-ratio: 1 / 1;           /* keeps it square and responsive */
  /* fallback for very old browsers without aspect-ratio: */
  /* height: auto; padding-top: 100%; position: relative; */
}
/* If you ever need a hard cap on tiny screens, you can clamp:
   width: clamp(220px, 42vw, 520px);
*/

/* Assign images per row */
.instance-name-img1{ background-image:url("https://ebrahimalmanaacademy.almanahospital.com.sa/files/share/c3795979b3bc0fb72bf5198f87fec55f8dd48652.jpg"); }
.instance-name-img2{ background-image:url("https://ebrahimalmanaacademy.almanahospital.com.sa/files/share/dcddf94d3b74529fba7d3df337e657beb373a2f4.jpg"); }
.instance-name-img3{
  background-image:url("https://ebrahimalmanaacademy.almanahospital.com.sa/files/share/d147d4e98057c9a1d801ca6998466086642186a8.jpg");
  filter: grayscale(100%);
}
.instance-name-img4{
  background-image:url("https://ebrahimalmanaacademy.almanahospital.com.sa/files/share/4f2f856d5fb1836eec24c59f369d2820de2ea5b5.jpg");
  filter: grayscale(100%);
}

/* ===== Content ===== */
.instance-name-content{
  direction: ltr;                /* keep English copy LTR inside RTL shell */
  flex: 1 1 0%;
  display: grid;
  gap: 18px;
}

/* Fluid, accessible typography using clamp() */
.instance-name-title{
  font-family: Brandon Grotesque, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;              /* “Bold” maps to 700 */
  font-size: clamp(26px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #2ED9C3;
}
.instance-name-title-muted{ color: var(--instance-name-muted); }

.instance-name-desc{
  font-family: Brandon Grotesque, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;              /* “Regular” maps to 400 */
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.35;             /* bit more comfortable reading */
  letter-spacing: 0;
  color: #005669;
}

/* Meta + tags */
.instance-name-note{
  display: block;
  color: var(--instance-name-brand);
  font-weight: 600;
  margin-bottom: 6px;
}
.instance-name-muted{ color: var(--instance-name-muted) !important; }

.instance-name-tag{
  width: fit-content;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 24px;
  font-size: 0.9rem;
  margin-bottom: 2px;
  border: 1px solid var(--instance-name-accent);
  color: var(--instance-name-brand);
}
.instance-name-tag-optional{
  color: var(--instance-name-accent);
  border-color: var(--instance-name-accent);
}

/* Buttons */
.instance-name-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.instance-name-btn{
  display: inline-block;
  background: var(--instance-name-brand);
  color: #fff;
  border-radius: 24px;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;           /* keep buttons tidy when narrow */
}
.instance-name-btn:hover{ filter: brightness(.95); }
.instance-name-btn-disabled{
  background: var(--instance-name-muted);
  cursor: not-allowed;
}

/* Levels row + dropdown */
.instance-name-levels{
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.instance-name-levels a:hover, 
.instance-name-levels a:focus{ color: #fff; }

.instance-name-btn-dropdown{
  position: relative;
  z-index: 2;
}

/* Dropdown panel */
.instance-name-dropdown{
  position: absolute;
  top: 110%;
  left: 0;
  width: fit-content;            /* fixed typo: widht -> width */
  min-width: 160px;
  background: var(--instance-name-white);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  overflow: hidden;
  z-index: 10;
  animation: instance-name-fadeSlide .18s ease;
}
.instance-name-dropdown[hidden]{ display: none; }

.instance-name-dropdown-item{
  display: block;
  padding: 10px 14px;
  color: var(--instance-name-brand);
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
.instance-name-dropdown-item:last-child{ border-bottom: none; }
.instance-name-dropdown-item:hover{
  background: var(--instance-name-accent);
  color: #fff;
}

/* Animation */
@keyframes instance-name-fadeSlide{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Secondary titles (fluid) */
.second-title,
.second-title-dum{
  font-family: Brandon Grotesque, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: 0;
}
.second-title{ color: #005669; }
.second-title-dum{ color: #616161; }

/* Force Neo Sans Arabic (Medium/500) only inside the Arabic container */
.instance-name-zig .lang-ar,
.instance-name-zig .lang-ar *{
  font-family: 'Neo Sans Arabic', 'Neo Sans Arabic Medium', Tahoma, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* --- Large desktops (≥1280px): give media a steady size --- */
@media (min-width: 1280px){
  .instance-name-media{
    width: 520px;
  }
}

/* --- Tablets (600–900px): stack neatly, center content --- */
@media (max-width: 900px){
  .instance-name-feature{
    flex-direction: column;      /* stack */
    text-align: center;
  }
  .instance-name-content{
    direction: ltr;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .instance-name-media{
    width: min(80vw, 520px);
    aspect-ratio: 1 / 1;
  }
}

/* --- Small phones (≤600px): tighter paddings, smaller gaps --- */
@media (max-width: 600px){
  .instance-name-zig{ gap: 16px; padding: 0 12px; }
  .instance-name-feature{ gap: 14px; padding: 16px; border-radius: 16px; }
  .instance-name-media{ width: 100%; aspect-ratio: 1 / 1; }
  .instance-name-actions{ gap: 8px; }
}

/* Optional: if you want LTR behavior on very small screens regardless of shell dir */
@media (max-width: 600px){
  /* Uncomment if needed
  .instance-name-zig{ direction: initial; }
  */
}

















:root{
  --instance-name-ink:#00546a;     /* text color */
  --instance-name-teal1:#2ED9C3;   /* line gradient start */
  --instance-name-teal2:#00a4a3;   /* line gradient end   */
}

/* container */
.instance-name-sectionhead{
  display:flex;
  align-items:baseline;
  gap:12px;              /* space between text and line */
    margin: auto;
    width: 70%;
padding-block:30px;
}

/* title */
.instance-name-headtext{
  color:var(--instance-name-ink);
  font-weight:700;
  font-size:22px;        /* tweak if you need larger/smaller */
  line-height:1.2;
  white-space:nowrap;
}

/* rule line */
.instance-name-headrule{
  flex:1;
  height:6px;            /* thickness of the line */
  border-radius:6px;
  background:linear-gradient(90deg,var(--instance-name-teal1),var(--instance-name-teal2));
  display:inline-block;
}



.courses-grid{
    width: 70%;

    margin: auto;

}
.board-leadership-dashboard {
    max-width: 1100px !important;}



.my-points ,
.leaderboard-widget {
box-shadow:none !important;
}


.leaderboard-list ,
.leaderboard-top3 {
color:#005669;

}





:root{
  --inst-about-ink:#005669;   /* body text */
  --inst-about-teal:#00a4a3;  /* heading */
}

/* Wrapper */
.instance-name-about{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
    margin-bottom: 120px;
}

/* Grid Row */
.instance-name-about-row{
  display:grid;
  grid-template-columns: 1fr 520px; 
  gap:28px;
  align-items:center;
}

/* Text column */
.instance-name-about-text{
  font-family:"Brandon Grotesque","Segoe UI",system-ui,Arial,sans-serif;
  color:var(--inst-about-ink);
  font-size:20px;
  font-weight:390;
  line-height:120%;
}

/* Title */
.instance-name-about-title{
  display:block;
  color:var(--inst-about-teal);
  font-weight:700;
  font-size:44px;
  line-height:1.1;
  margin:8px 0 18px;
}

/* Paragraphs */
.instance-name-about-p{
  display:block;
  margin:0 0 18px;
}

/* Photo column */
.instance-name-about-photo{
  width:520px;
  height:520px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
.instance-name-about-photo-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-image:url("https://ebrahimalmanaacademy.almanahospital.com.sa/files/share/468b1c38abdaab820997dc9ead8190ee9bd72e73.jpg");
}

/* Language toggle */
.i18n-en{display:none;}
.i18n-ar{display:none;}
html[lang="en"] .i18n-en{display:block;}
html[lang="ar"] .i18n-ar{display:block; direction:ltr;}

/* Responsive */
@media(max-width:1024px){
  .instance-name-about-row{
    grid-template-columns:1fr;
    gap:20px;
  }
  .instance-name-about-photo{
    width:100%;
    max-width:520px;
    height:420px;
    margin:0 auto;
  }
  .instance-name-about-title{font-size:38px;}
}
@media(max-width:600px){
  .instance-name-about-photo{height:340px;}
  .instance-name-about-title{font-size:32px;}
  .instance-name-about-text{font-size:18px;}
}









:root{
  --val-ink:#00546a;          /* text color */
  --val-teal:#2ED9C3;         /* border teal */
  --val-accent:#00a4a3;       /* icon teal (can be same as border) */
  --val-bg:#ffffff;
}

/* Wrapper width to align with page content */
/* ===== VALUES v2 (responsive) ===== */

.instance-name-values2{
justify-content: center;
    display: flex
;
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(12px, 2vw, 16px);
  font-family:"Brandon Grotesque","Segoe UI",system-ui,Arial,sans-serif;
  color:var(--val-ink);
  margin-bottom: clamp(60px, 10vw, 160px) !important;
}

/* Title (left) + Grid (right) → fluid columns */
.instance-name-values2-row{
  display:flex !important;
  grid-template-columns: clamp(160px, 20vw, 220px) 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items:start;
}

/* Stacked headline */
.instance-name-values2-title{
margin: auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.instance-name-values2-title-line{
  display:block;
  font-weight:700;
  font-size: clamp(26px, 4.2vw, 46px);
  line-height:1.08;
  color:var(--val-ink);
}

/* Grid and cards */
.instance-name-values2-grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));  /* 2x2 desktop */
  gap: clamp(12px, 1.6vw, 18px);
}

.instance-name-values2-card{
  display:flex;
  align-items:center;
  gap: clamp(12px, 1.6vw, 16px);
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 24px);
  border:1px solid var(--val-teal);
  border-radius:16px;
  background:var(--val-bg);
  min-height: clamp(72px, 8vw, 96px);
}

/* Icons */
.instance-name-values2-icon{
  width: clamp(28px, 3.2vw, 36px);
  height: clamp(28px, 3.2vw, 36px);
  flex: 0 0 clamp(28px, 3.2vw, 36px);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

/* Card text */
.instance-name-values2-text{
  font-weight:700;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height:1.22;
  color:var(--val-ink);
}

.instance-name-v2-empower{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a4a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 11h4M8 15h4'/><path d='M5 9h5l1-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-4l-1 2H7a2 2 0 0 1-2-2z'/></svg>");
}

/* Innovation icon */
.instance-name-v2-innovate{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a4a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M8 14a6 6 0 1 1 8 0l-1 1H9l-1-1z'/></svg>");
}

/* Impact icon */
.instance-name-v2-impact{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a4a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M4.2 19.8l2.1-2.1'/></svg>");
}

/* Lifelong learning icon */
.instance-name-v2-learn{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a4a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M8 20h8'/><path d='M12 8l3 3-3 3-3-3 3-3z'/></svg>");
}

/* ========= Breakpoints ========= */

/* Title above grid on tablets */
@media (max-width: 980px){
  .instance-name-values2-row{
    grid-template-columns: 1fr;
  }
  .instance-name-values2-title{
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap; /* prevents overflow for long titles */
  }
}

/* Single-column cards on phones */
@media (max-width: 680px){
  .instance-name-values2-grid{
    grid-template-columns: 1fr;
  }
}





:root{ --ink:#005669; }

/* Wrapper */
.instance-name-vim{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  color:var(--ink);
margin-bottom:160px !important;
}

/* Two-column row (exact measurements) */
.instance-name-vim-row{
  display:grid;
  grid-template-columns: 520px minmax(0,1fr);
  gap:36px;                 /* compact spacing per spec */
  align-items:center;
  margin-bottom:40px;
}

/* Image card 520x520 + 20px radius */
.instance-name-vim-media{
  width:520px;
  height:520px;
  background:#e9eef0 center/cover no-repeat;
  border-radius:20px;
}

/* Text column */
.instance-name-vim-text{
  max-width:593px;          /* per spec */
  color:var(--ink);
  font-family:"Brandon Grotesque","Segoe UI",system-ui,Arial,sans-serif;
}

/* English heading / paragraph */
.instance-name-vim-h{
  display:block;
  font-size:64px;
  line-height:75px;
  font-weight:500;          /* visual match to Brandon 450 Bold */
  margin:0 0 8px 0;
  color:var(--ink);
}
.instance-name-vim-p{
  display:block;
  font-size:24px;
  line-height:120%;
  font-weight:390;
  margin:0 0 22px 0;
  color:var(--ink);
}

/* Arabic typography + RTL */
.instance-name-vim-rtl{

  font-family:"Neo Sans Arabic","Segoe UI",system-ui,Arial,sans-serif;
}
.instance-name-vim-h--ar{
  font-size:48px;
  line-height:75px;
  font-weight:600;          /* “Medium” look */
}
.instance-name-vim-p--ar{
  font-size:24px;
  line-height:120%;
  font-weight:400;
}

/* Language auto-switch
   Show EN by default; show AR when the page is Arabic or RTL. */
.instance-name-vim-en{ display:grid; }
.instance-name-vim-ar{ display:none; }

/* If the page language is Arabic (Moodle/Totara sets <html lang="ar">) */
html:lang(ar) .instance-name-vim-en{ display:none; }
html:lang(ar) .instance-name-vim-ar{ display:grid; }

/* Fallback: if the page is RTL, assume Arabic */
[dir="rtl"] .instance-name-vim-en{ display:none; }
[dir="rtl"] .instance-name-vim-ar{ display:grid; }

/* Responsive */
@media (max-width:1100px){
  .instance-name-vim-row{ grid-template-columns:420px 1fr; gap:28px; }
  .instance-name-vim-media{ width:420px; height:420px; }
}
@media (max-width:820px){
  .instance-name-vim-row{ grid-template-columns:1fr; }
  .instance-name-vim-media{ width:100%; height:380px; }
  .instance-name-vim-text{ max-width:700px; }
}







/* ===== Learning Track v3: bold title, bold card names, gray tiles ===== */
:root{
  --lt3-brand:#005669;
  --lt3-gray:#f0f2f3;          /* gray tile behind each card */
  --lt3-radius:18px;
  --lt3-shadow:0 10px 22px rgba(0,0,0,.06);
}
.lt3{
width:70% !important;
margin:auto !important;
}
.lt3-stage{
  max-width:1100px;
  margin:0 auto;
  padding:8px 16px 28px;
}

/* language toggle */
.lt3.lang-en{display:block;}
.lt3.lang-ar{display:none;}
html[lang="ar"] .lt3.lang-en,
html[dir="rtl"] .lt3.lang-en{display:none;}
html[lang="ar"] .lt3.lang-ar,
html[dir="rtl"] .lt3.lang-ar{display:block;}

/* Title (bold) */
.lt3-title{
  margin:0 0 22px;
  font-family:"Brandon Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:700;            /* bold as requested */
  font-size:64px;
  line-height:1;
  text-align:center;
  color:var(--lt3-brand);
}
html[lang="ar"] .lt3-title,
html[dir="rtl"] .lt3-title{
  font-family:"Neo Sans Arabic","Tajawal","Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:700;
}

/* Grid */
.lt3-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* Gray tile behind each card */
.lt3-tile{
  background:var(--lt3-gray);
  border-radius:22px;       /* slightly larger than card */
  padding:14px;             /* visible gray frame */
}

/* Card body */
.lt3-card{
  display:flex;
  flex-direction:column;

  border-radius:var(--lt3-radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
    padding-bottom: 5px;

}

/* Top text area */
.lt3-top{

  padding:18px 16px 14px;
  text-align:center;
}

/* Card name: bold 20px */
.lt3-name{
  font-family:"Brandon Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:700;           /* bold headings */
  font-size:20px;
  line-height:1;
  color:var(--lt3-brand);
  margin-bottom:8px;
}

/* Subtitle: regular 20px */
.lt3-sub{
  font-family:"Brandon Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:390;
  font-size:20px;
  line-height:1;
  color:var(--lt3-brand);
  opacity:.95;
}

/* Arabic fonts + weights */
html[lang="ar"] .lt3-name,
html[dir="rtl"] .lt3-name,
html[lang="ar"] .lt3-sub,
html[dir="rtl"] .lt3-sub{
  font-family:"Neo Sans Arabic","Tajawal","Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html[lang="ar"] .lt3-name,
html[dir="rtl"] .lt3-name{ font-weight:700; }
html[lang="ar"] .lt3-sub,
html[dir="rtl"] .lt3-sub{ font-weight:400; }

/* Image */
.lt3-img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

/* Responsive */
@media (max-width:1024px){
  .lt3-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .lt3-title{ font-size:40px; }
  .lt3-grid{ grid-template-columns:1fr; gap:16px; }
  .lt3-img{ height:160px; }
}














body {
  font-family: 'Brandon Grotesque', sans-serif;
  margin: 0;
  padding: 0;

}

html[lang="en"] .core-competencies-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  text-align: left;
}
html[lang="en"] #inst1019 .core-competencies-container  {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  text-align: right !important;
}

html[lang="en"] #inst1019 .core-competencies-container .card {
  text-align: right !important;
}
hrml[lang="ar"] #inst1019 .core-competencies-container  {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  text-align: right !important;
}

hrml[lang="ar"] #inst1019.core-competencies-container .card {
  text-align: right !important;
}

html[lang="ar"] .core-competencies-container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px;
}



.title-container h1 {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 60px;

  color: #00b0b9; /* Aqua Blue */

}

.title-container h2 {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 28px;
 
  color: #005669;
  margin-top: 0;
}

.title-container p {
  font-family: 'Brandon Grotesque';
  font-weight: 390;
  font-size: 24px;

  color: #005669;

}

.title-container p:nth-of-type(2) {
  font-weight: 600 !important;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two cards per row */
  gap: 30px;
  margin-top: 30px;
place-items:center;
}
.cards-container  .card:nth-child(7) {
  grid-column: span 2; /* Makes the last card span both columns */
width:50%;
}



.card {
  background-color: #D9D9D940 ;

  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
  position: relative;
height:450px;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.card h3 {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 28px;
  line-height: 100%;
  color: #005669;
  margin-top: 20px;
}

.card p {
  font-family: 'Brandon Grotesque';
  font-weight: 420;
  font-size: 18px;
  line-height: 1.5;
  color: #005669;
  margin-top: 10px;
}

.card button {
  background-color: #005669;
  color: white;
  border: none;
  padding: 10px 20px;
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 16px;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

.card button:hover {
  background-color: #003e44;
}

.training-bundle {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 20px;
  line-height: 100%;
  color: #00b0b9; /* Aqua Blue */
  margin-bottom: 5px;
}

.start-now-card {
  background-color: #005669; /* Blue color */
  border-radius: 5px;
  width: 120px;
  text-align: center;

  padding: 10px;
margin-left:70%;
position: absolute;
    bottom: 15px;
}
#inst1291 .cards-container .card:nth-child(2) .start-now-card ,
#inst1315 .cards-container .card:nth-child(2) .start-now-card {
  background-color: var(--instance-name-muted) !important; /* Muted background */
  border-radius: 5px;
  width: 120px;
  text-align: center;
  padding: 10px;
  margin-left: 70%;
  position: absolute;
  bottom: 15px;
pointer-events: none;
}

.start-now-card a {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

.start-now-card:hover {
  background-color: #003e44; /* Darker blue for hover effect */
}

.start-now-card a:hover {
  color: white;
}


html[lang="ar"]  .core-competencies-container[lang="ar"] {
text-align:left !important;
}
html[lang="ar"]  #inst1017 .core-competencies-container {
text-align:right !important;
}

@media screen and (max-width: 480px) {
  .core-competencies-container {
    padding: 20px; /* Adjust padding for mobile */
  }

  .cards-container {
    grid-template-columns: 1fr; /* One card per row for mobile */
    gap: 15px; /* Adjust gap between cards */
  }

  .card {
    padding: 15px; /* Adjust padding inside the card */
    height: 640px; /* Ensure dynamic height */
    text-align: center; /* Center align the text */
  }

  .card img {
    height: 150px; /* Adjust image height */
  }

  .card h3 {
    font-size: 20px; /* Adjust font size for mobile */
  }

  .card p {
    font-size: 14px; /* Adjust font size for mobile */
  }

/* Start Now Card */
.start-now-card {
  background-color: #005669; /* Blue color */
  border-radius: 5px;
  width: 120px;
  text-align: center;
  padding: 10px;
  margin-left: 70%; /* Adjust positioning for larger screens */
  position: absolute;
  bottom: 15px;
}

/* Start Now Card on Mobile */
@media screen and (max-width: 480px) {
  .start-now-card {
  
    margin: auto; /* Center the button */
    position: relative; /* Remove absolute positioning */
    bottom: 0; /* Remove bottom margin for mobile */
  }

  .start-now-card a {
    font-size: 14px; /* Adjust button font size on mobile */
    padding: 10px; /* Adjust padding inside the button */
  }
}

.start-now-card a {
  font-family: 'Brandon Grotesque';
  font-weight: 450;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

.start-now-card:hover {
  background-color: #003e44; /* Darker blue for hover effect */
}

.start-now-card a:hover {
  color: white;
}
}









.totaraNav_sub--list{
display:none;
}
























.board-leadership-dashboard  h2:first-child{

display:none; }





/* For Al Mana Group Header */
.almana-header {
  text-align: center;
  margin: 20px 0;
}

.almana-header-title {
  font-size: 40px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.almana-header-description {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
}

























/* Dashboard Layout */
.admin-dashboard.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  background-color: #fff;
  flex-wrap: wrap;
}

/* Base Card */
.admin-card {
  width: 348px;
  height: 96.5px;
  border-radius: 16px;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);

  /* 🩵 FULL CENTER ALIGNMENT */
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  text-align: center;
  box-sizing: border-box;
  padding: 20px 24px;
  position: relative;
}

/* Inner content wrapper for clean center stack */
.admin-card .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Typography */
.admin-card .value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.admin-card .label {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1;
}

/* Colors */
.admin-card.total-users {
  background: linear-gradient(135deg, #2ed9c3, #0083c1);
}

.admin-card.license-card {
  background: linear-gradient(135deg, #ff8e9f, #ff9dac);
}











.export-banner {
  width: 100%;
  background: linear-gradient(135deg, #0083c1, #ff8fa3);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  font-family: 'Times New Roman', Times, serif;
  margin: 50px auto;
  max-width: 1100px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.export-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}

.export-banner h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}

.export-banner p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 22px auto;
  opacity: 0.95;
}

.export-banner a {
  display: inline-block;
  background: #fff;
  color: #ff4b6e;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.export-banner a:hover {
  background: #ffe5ea;
  color: #d63452;
}










.section-header {
  text-align: center;
  width: 100%;
  background: #fff;
  padding: 24px 0;
  margin-top: 40px;
}

.section-header h1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2rem;
  font-weight: 700;
  color: #081f2d;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.section-line {
  width: 60px;
  height: 3px;
  background: #2ed9c3; /* Lucid guideline accent color */
  margin: 8px auto 16px auto;
  border-radius: 2px;
}

.section-header p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Times New Roman', Times, serif;
}







.admin-dashboard {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.admin-card {
  width: 420px;
  height: 150px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.10);
  color: white;
  text-align: center;
}

.admin-card .value {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 8px;
}

.admin-card .label {
  font-size: 20px;
  font-weight: 600;
}

/* Total Users */
.total-users {
  background: linear-gradient(90deg, #1CCDC2, #0078BE);
}

/* License Utilization */
.license-card {
  background: #FFA5B5;
}

/* Registered Users */
.registered-card {
  background: #006FBA;  /* AlMana blue */
}





































#inst1291 .cards-container .card:nth-child(2) img ,
#inst1315 .cards-container .card:nth-child(2) img{
  filter: grayscale(100%) !important;
}


#inst1291 .cards-container .card:nth-child(2) *:not(.start-now-card a) ,
#inst1315 .cards-container .card:nth-child(2) *:not(.start-now-card a) {
  color: var(--instance-name-muted) !important;
}