body {
  margin: 0 !important;
}

/* ==========================================
   OUTER ELEMENTOR CONTAINER
========================================== */
.program-scroll {
  --pp: #662d91;
  --pp-d: #4b0082;
  --pp-l: #f3e8fd;
  --text: #3c4043;
  --rule: #e0e0e0;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  /* IMPORTANT:
     don't make this the grid */
  display: block !important;
}

/* THIS is the actual Elementor content wrapper
   containing Left / Middle / Right */
.program-scroll > .e-con-inner {
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1fr) minmax(360px, 430px);
  gap: 18px;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 10px;
  padding-right: 10px;
  align-items: start !important;
  overflow: visible !important;
}

/* Reset Elementor's flex sizing on our 3 columns */
.program-scroll > .e-con-inner > .e-con {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

/* ==========================================
   LEFT NAV
========================================== */
.program-nav-column {
  position: sticky !important;
  top: 0;
  height: 100vh;
  align-self: start;
  overflow: visible !important;
}

/* Elementor's internal wrapper */
.program-nav-column > .e-con-inner {
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
}

.program-nav {
  width: 100% !important;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--rule);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.program-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.program-nav.active {
  border-left-color: var(--pp);
}

.program-nav.active a {
  color: var(--pp);
}

/* ==========================================
   MIDDLE CONTENT
========================================== */
.program-content {
  width: 100% !important;
  min-width: 0 !important;
}

/* Remove Elementor boxed width restriction */
.program-content > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  display: block !important;
}

.program-panel {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 70px 0;
}

/* Elementor inner wrapper of each program */
.program-panel > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* ==========================================
   RIGHT IMAGE COLUMN
========================================== */
.program-images {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  align-self: start;
  width: 100% !important;
  overflow: visible !important;
  z-index: 5;
}

.program-images > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

.program-image-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;
  height: 520px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 14px;
}

/* ==========================================
   IMAGE STAGE
========================================== */
/*
   IMPORTANT:
   Image Stage is also an Elementor boxed
   container, so its actual image widgets
   live inside another .e-con-inner
*/
.program-image-stage > .e-con-inner {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Stack both images ON TOP of each other */
.program-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.program-image > .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.program-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 14px !important;
}

.program-image.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

@media (max-width: 1200px) {
  .program-scroll > .e-con-inner {
    grid-template-columns: 140px minmax(0, 1fr) minmax(280px, 340px);
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .program-image-stage {
    max-width: 340px !important;
    height: 440px !important;
  }
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width: 1024px) {
  .program-scroll > .e-con-inner {
    display: block !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .program-nav-column,
  .program-images {
    position: relative !important;
    height: auto !important;
  }
}
@media (max-width: 1024px) {
  .program-scroll > .e-con-inner {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .program-nav-column {
    display: none !important;
  }
  .program-content {
    width: 100% !important;
  }
  .program-content > .e-con-inner {
    display: block !important;
  }
  .program-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 40px 0 60px !important;
    display: block !important;
  }
  .program-panel > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
  }
  .program-images {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: none !important;
  }
  .program-image-stage {
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .program-tabs {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
  }
  .program-tab {
    flex: 1 1 0 !important;
  }
  .program-tab .elementor-button {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
  }
}
.elementor-editor-active .program-image-stage {
  height: auto !important;
  overflow: visible !important;
}

.elementor-editor-active .program-image-stage > .e-con-inner {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.elementor-editor-active .program-image {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 220px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.elementor-editor-active .program-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

/*# sourceMappingURL=custom.css.map */