/* Journey cards (Figma "LMS | Journeys Page", node 14830:4648).
   Used by the Journeys page and the LMS home page through
   templates/custom_programs/_journey_cards.html. */
  
.program-subject img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
 
.programs-section {
  background: linear-gradient(154deg, #416A9E 34.21%, #0B0867 73.48%, #110D7C 102.84%);  
  text-align: center;
  padding: 80px 0 120px;
  overflow-x: hidden;
}
 
 
.section-title {
    color: #FFFFFF;
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 35px;
    text-shadow: -4px 2px 10px rgba(0, 0, 0, 0.45);
}
 
 
.programs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 100px;
  max-width: 1240px;
  margin: 0 auto;
  margin-top: 40px;
}
 
 
.program-card {
  width: 360px;
  height: 500px;
  position: relative;
  border-radius: 26px;
  background: transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

.program-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
     text-decoration: none !important;
}


.program-card__background,
.program-card__overlay,
.program-card__gif,
.program-card__characters {
  position: absolute;
}

.program-card__background {
   position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    z-index: 1;
}



.program-card__overlay {
  inset: 0;
  z-index: 2;
 
}

.program-card__gif {
    top: 3%;
    z-index: 3;
    width: 105%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
    right:0px;
}

 .program-card__characters {
    bottom: 12px;
    z-index: 1;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    overflow: overlay;
    left:0px;
}


.program-info {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 5;
  text-align: right;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.program-title {
  color: #fff;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 14px;
  font-family: 'IBM Plex Sans', sans-serif !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}

.program-subject {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 16px;
  color: #110D7C;
  background: var(--primary-color);
  font-size: 16px;
  font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
  

 
 

.wrapper.wrapper-footer {
  background-color: #110D7C !important;
}
 
 
@media (max-width: 992px) {
  .program-card {
    width: calc(50% - 30px);
    max-width: 360px;
  }
}
 
@media (max-width: 768px) {
  .program-card {
    width: min(360px, 90vw);
  }
  .section-title {
    font-size: 36px;
  }
  .program-title {
    font-size: 30px;
  }

  .programs-grid {
    gap: 48px;
    padding: 0 16px;
  }
}
 
header.global-header .header-logo a .logo {
  height: 42px;
}
div#content {
    padding: 0px !important;
    margin: 0px !important;
}

/* ===== Journeys page (Figma: LMS | Journeys Page) ===== */
.section-title{margin-bottom:12px}
.section-subtitle{color:#fff;font-size:18px;line-height:24px;margin:0 0 8px;padding:0 16px}
.programs-grid{gap:82px;max-width:1248px;padding:0 16px;margin-top:48px}
.journey-card{position:relative;box-sizing:border-box;width:583px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;border-radius:34px;
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.05));border:3px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(35px);backdrop-filter:blur(35px);transition:background-color .3s,background .3s,box-shadow .3s}
.journey-card:hover,.journey-card:focus-within{background:rgba(16,14,74,.28);box-shadow:inset 4px 4px 16px rgba(0,0,0,.25),0 4px 4px rgba(255,255,255,.15)}
.journey-card .program-card{box-shadow:0 18px 40px rgba(0,0,0,.24)}
.journey-card .program-card:hover{transform:none}
.journey-card__text{width:100%;max-width:415px;text-align:right;color:#fff;font-size:18px;line-height:24px}
.journey-card__text p{margin:0}
.journey-card__hook{font-weight:700;margin-bottom:4px !important}
.journey-card__btn{margin-top:auto;width:100%;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:#416A9E;color:#fff !important;
  font-size:16px;font-weight:700;text-decoration:none !important;box-shadow:6.9px 6.9px 20.7px rgba(34,26,55,.10),-6.9px -6.9px 20.7px rgba(255,255,255,.12),0 4px 4px rgba(0,0,0,.25);transition:filter .2s}
.journey-card__btn:hover,.journey-card__btn:focus-visible{filter:brightness(1.12)}
@media (max-width:1280px){.journey-card{width:calc(50% - 41px)}}
@media (max-width:900px){.programs-grid{gap:32px}.journey-card{width:min(583px,100%)}}
@media (max-width:420px){.journey-card{padding:16px;gap:16px}.journey-card__text{font-size:16px}}

/* LMS | Journeys Page (Figma node 14830:4648) */
/* 1. 3px gradient border (Figma stroke stops: white 50% -> 0 at 35% -> 0 at 65% -> white 54%) */
.journey-card{border:0;padding:27px}
.journey-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.54) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity .3s}
/* 2. hover: the border fades into the hover colour */
.journey-card:hover::before,.journey-card:focus-within::before{opacity:0}
/* 3. image frame 379x558, radius 20; characters are never clipped */
.journey-card .program-card{width:min(379px,100%);height:auto;aspect-ratio:379/558;border-radius:20px;overflow:visible}
.journey-card .program-card__link{overflow:visible}
@media (max-width:420px){.journey-card{padding:19px}}

/* LMS | Journeys Page, typography + spacing (Figma node 14830:4648) */
/* card text: 379px box with 10px padding (359px text), 16px after the bold line, 34px below the image */
.journey-card__text{max-width:379px;box-sizing:border-box;padding:10px}
.journey-card__hook{margin-bottom:16px !important}
/* card title on the image: IBM Plex Sans Arabic 40/55 Bold, 16px from the edge, Figma clay shadows */
.journey-card .program-info{right:16px;left:16px;bottom:20px}
.journey-card .program-title{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif !important;font-weight:700;
  text-shadow:6.89px 6.89px 20.67px rgba(34,26,55,.10),-6.89px -6.89px 20.67px rgba(255,255,255,.12),0 4px 4px rgba(0,0,0,.25);margin-bottom:11px}
/* skill tag: 16px SemiBold, #100E4A, padding 8/16, height 40, radius 8 */
.journey-card .program-subject{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif !important;font-weight:600;color:#100E4A;
  padding:8px 16px;min-height:40px;box-sizing:border-box;border-radius:8px}
.journey-card .program-subject span{font-weight:600;color:#100E4A;line-height:24px}
@media (min-width:769px){
  .journey-card .program-title{font-size:40px;line-height:55px}
  /* page title: 40px Bold, 16px to the subtitle, 80px to the cards */
  .section-title{font-size:40px;font-weight:700;line-height:52px;margin-bottom:16px;
    text-shadow:6.89px 6.89px 20.67px rgba(34,26,55,.10),-6.89px -6.89px 20.67px rgba(255,255,255,.12),0 4px 4px rgba(0,0,0,.25)}
  .section-subtitle{margin-bottom:0}
  .programs-grid{margin-top:80px}
}
/* card title: two lines like Figma (split in the template) */
.journey-card .program-title__line{display:block}
/* header: no shadow on this page, like Figma */
header.global-header{box-shadow:none !important}