:root {
  --ap-green-950: #00391e;
  --ap-green-900: #004d28;
  --ap-green-800: #075d33;
  --ap-green-700: #08733f;
  --ap-gold: #e9ad2f;
  --ap-gold-light: #f4ca63;
  --ap-text: #203029;
  --ap-muted: #66756d;
  --ap-border: #dfe9e3;
  --ap-soft: #f2f8f5
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body.mpcoe-ap-page {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--ap-text);
  font-family: Inter, sans-serif
}

.mpcoe-ap-page a {
  text-decoration: none;
  color: inherit
}

.mpcoe-ap-container {
  max-width: 1240px
}

.mpcoe-ap-eyebrow {
  margin-bottom: 10px;
  color: #ad7710;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.55px
}

.mpcoe-ap-eyebrow span {
  display: inline-block;
  width: 25px;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: currentColor
}

.mpcoe-ap-light {
  color: #fff
}

.mpcoe-ap-gold {
  color: var(--ap-gold-light)
}

.mpcoe-ap-title {
  margin: 0;
  color: var(--ap-green-900);
  font: 800 clamp(31px, 3.2vw, 44px)/1.08 Montserrat, sans-serif;
  letter-spacing: -.9px
}

.mpcoe-ap-title em {
  font-style: normal;
  color: var(--ap-green-700)
}

.mpcoe-ap-title-light {
  color: #fff
}

.mpcoe-ap-title-light em {
  color: var(--ap-gold-light)
}

.mpcoe-ap-hero {
  position: relative;
  min-height: 465px;
  padding: 58px 0 65px;
  overflow: hidden;
  background: radial-gradient(circle at 84% 20%, rgba(233, 173, 47, .14), transparent 25%), linear-gradient(125deg, #00391e, #004d28 58%, #075d33)
}

.mpcoe-ap-grid {
  position: absolute;
  inset: 0;
  opacity: .075;
  background-image: linear-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 72px 72px
}

.mpcoe-ap-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%
}

.mpcoe-ap-orbit-a {
  width: 460px;
  height: 460px;
  right: -140px;
  top: -230px
}

.mpcoe-ap-orbit-b {
  width: 290px;
  height: 290px;
  right: 70px;
  bottom: -210px;
  border-color: rgba(233, 173, 47, .12)
}

.mpcoe-ap-hero-inner {
  position: relative;
  max-width: 930px
}

.mpcoe-ap-back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, .67) !important;
  font-size: 11px;
  font-weight: 800;
  transition: .2s
}

.mpcoe-ap-back:hover {
  color: var(--ap-gold-light) !important;
  transform: translateX(-3px)
}

.mpcoe-ap-hero h1 {
  margin: 0 0 19px;
  color: #fff;
  font: 800 clamp(48px, 6.5vw, 78px)/.95 Montserrat, sans-serif;
  letter-spacing: -2.5px
}

.mpcoe-ap-hero h1 em {
  display: block;
  font-style: normal;
  color: var(--ap-gold-light)
}

.mpcoe-ap-hero-inner>p {
  max-width: 770px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.85
}

.mpcoe-ap-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px
}

.mpcoe-ap-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .73);
  font-size: 10px;
  font-weight: 800
}

.mpcoe-ap-hero-meta i {
  color: var(--ap-gold-light)
}

.mpcoe-ap-intro, .mpcoe-ap-programmes, .mpcoe-ap-postgraduate, .mpcoe-ap-subjects, .mpcoe-ap-university, .mpcoe-ap-cta {
  padding: 50px 0
}

.mpcoe-ap-intro-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 75px;
  align-items: center
}

.mpcoe-ap-intro-grid p {
  margin: 0 0 15px;
  color: var(--ap-muted);
  font-size: 15px;
  line-height: 1.85
}

.mpcoe-ap-intro-grid p:last-child {
  margin-bottom: 0
}

.mpcoe-ap-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 45px;
  margin-bottom: 28px
}

.mpcoe-ap-section-head>p {
  max-width: 535px;
  margin: 0;
  color: var(--ap-muted);
  font-size: 15px;
  line-height: 1.8
}

.mpcoe-ap-programmes, .mpcoe-ap-subjects {
  background: var(--ap-soft)
}

.mpcoe-ap-course-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px
}

.mpcoe-ap-course-card {
  position: relative;
  min-height: 275px;
  padding: 23px;
  border: 1px solid var(--ap-border);
  border-radius: 17px;
  background: #fff;
  overflow: hidden;
  transition: .23s
}

.mpcoe-ap-course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 50, 28, .1);
  border-color: #cbded3
}

.mpcoe-ap-course-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin-bottom: 27px;
  border-radius: 12px;
  background: #fff4d8;
  color: #a8730b
}

.mpcoe-ap-course-number {
  position: absolute;
  right: 17px;
  top: 13px;
  color: #d8e4dd;
  font: 800 25px Montserrat
}

.mpcoe-ap-level {
  display: block;
  color: #ad7710;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px
}

.mpcoe-ap-course-card h3 {
  margin: 7px 0 6px;
  color: var(--ap-green-900);
  font: 800 23px Montserrat
}

.mpcoe-ap-course-card p {
  margin: 0;
  max-width: 170px;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.65
}

.mpcoe-ap-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: var(--ap-green-700);
  font-size: 13px;
  transition: .2s
}

.mpcoe-ap-course-card:hover .mpcoe-ap-arrow {
  transform: translateX(4px);
  color: #a8730b
}

.mpcoe-ap-postgraduate {
  background: radial-gradient(circle at 86% 14%, rgba(233, 173, 47, .11), transparent 25%), linear-gradient(120deg, #00391e, #00532c 62%, #00643a)
}

.mpcoe-ap-section-head-light>p {
  color: rgba(255, 255, 255, .65)
}

.mpcoe-ap-pg-layout {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 12px
}

.mpcoe-ap-pg-intro-card {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: rgba(255, 255, 255, .055)
}

.mpcoe-ap-pg-icon {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  border-radius: 13px;
  background: rgba(233, 173, 47, .13);
  color: var(--ap-gold-light)
}

.mpcoe-ap-pg-intro-card>span {
  color: var(--ap-gold-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px
}

.mpcoe-ap-pg-intro-card h3 {
  margin: 10px 0 13px;
  color: #fff;
  font: 800 29px/1.15 Montserrat
}

.mpcoe-ap-pg-intro-card h3 em {
  font-style: normal;
  color: var(--ap-gold-light)
}

.mpcoe-ap-pg-intro-card p {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.8
}

.mpcoe-ap-pg-list {
  display: grid;
  gap: 10px
}

.mpcoe-ap-pg-item {
  display: grid;
  grid-template-columns: 53px 1fr 20px;
  gap: 15px;
  align-items: center;
  padding: 19px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
  transition: .22s
}

.mpcoe-ap-pg-item:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, .08)
}

.mpcoe-ap-pg-item-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(233, 173, 47, .12);
  color: var(--ap-gold-light)
}

.mpcoe-ap-pg-item small {
  display: block;
  color: var(--ap-gold-light);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px
}

.mpcoe-ap-pg-item h3 {
  margin: 4px 0 4px;
  color: #fff;
  font: 800 20px Montserrat
}

.mpcoe-ap-pg-item p {
  margin: 0;
  color: rgba(255, 255, 255, .61);
  font-size: 13px;
  line-height: 1.5
}

.mpcoe-ap-pg-item>i {
  color: rgba(255, 255, 255, .48);
  transition: .2s
}

.mpcoe-ap-pg-item:hover>i {
  color: var(--ap-gold-light);
  transform: translateX(3px)
}

.mpcoe-ap-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

.mpcoe-ap-subject {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 15px 18px;
  border: 1px solid var(--ap-border);
  border-radius: 13px;
  background: #fff;
  transition: .2s
}

.mpcoe-ap-subject:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 50, 28, .07)
}

.mpcoe-ap-subject i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff4d8;
  color: #a8730b;
  font-size: 13px
}

.mpcoe-ap-subject span {
  color: var(--ap-green-900);
  font-size: 13px;
  font-weight: 800
}

.mpcoe-ap-subject b {
  position: absolute;
  right: 13px;
  top: 9px;
  color: #d5e2db;
  font: 800 10px Montserrat
}

.mpcoe-ap-university {
  background: #fff
}

.mpcoe-ap-university-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 29px 32px;
  border-radius: 17px;
  background: var(--ap-green-900)
}

.mpcoe-ap-university-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(233, 173, 47, .13);
  color: var(--ap-gold-light)
}

.mpcoe-ap-university-card h2 {
  margin: 0 0 8px;
  color: #fff;
  font: 800 clamp(24px, 2.7vw, 34px)/1.1 Montserrat
}

.mpcoe-ap-university-card h2 em {
  font-style: normal;
  color: var(--ap-gold-light)
}

.mpcoe-ap-university-card p {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  font-size: 14px;
  line-height: 1.75
}

.mpcoe-ap-university-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px
}

.mpcoe-ap-university-badge strong {
  color: var(--ap-gold-light);
  font: 800 16px Montserrat
}

.mpcoe-ap-university-badge span {
  color: rgba(255, 255, 255, .5);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px
}

.mpcoe-ap-cta {
  background: var(--ap-soft)
}

.mpcoe-ap-cta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 31px 33px;
  border-radius: 17px;
  background: var(--ap-green-900)
}

.mpcoe-ap-cta-card h2 {
  margin: 0 0 8px;
  color: #fff;
  font: 800 clamp(25px, 2.8vw, 36px)/1.1 Montserrat
}

.mpcoe-ap-cta-card h2 em {
  font-style: normal;
  color: var(--ap-gold-light)
}

.mpcoe-ap-cta-card p {
  margin: 0;
  color: rgba(255, 255, 255, .63);
  font-size: 14px;
  line-height: 1.7
}

.mpcoe-ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  padding: 13px 19px;
  border-radius: 8px;
  background: var(--ap-gold);
  color: #173c25 !important;
  font-size: 11px;
  font-weight: 900;
  transition: .2s
}

.mpcoe-ap-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(233, 173, 47, .23)
}

.mpcoe-ap-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ap-green-900);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  transition: .22s
}

.mpcoe-ap-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none
}

@media(max-width:1199.98px) {
  .mpcoe-ap-container {
    padding-left: 20px;
    padding-right: 20px
  }

  .mpcoe-ap-course-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:991.98px) {
  .mpcoe-ap-intro-grid {
    grid-template-columns: 1fr
  }

  .mpcoe-ap-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px
  }

  .mpcoe-ap-pg-layout {
    grid-template-columns: 1fr
  }

  .mpcoe-ap-subject-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .mpcoe-ap-university-card {
    grid-template-columns: 58px 1fr
  }

  .mpcoe-ap-university-badge {
    grid-column: 2;
    justify-self: start
  }

  .mpcoe-ap-cta-card {
    grid-template-columns: 1fr
  }
}

@media(max-width:767.98px) {
  .mpcoe-ap-container {
    padding-left: 15px;
    padding-right: 15px
  }

  .mpcoe-ap-hero {
    min-height: auto;
    padding: 40px 0 48px
  }

  .mpcoe-ap-hero-inner {
    text-align: center
  }

  .mpcoe-ap-back {
    justify-content: center
  }

  .mpcoe-ap-hero-inner>p {
    font-size: 15px
  }

  .mpcoe-ap-hero-meta {
    display: grid;
    grid-template-columns: 1fr
  }

  .mpcoe-ap-hero-meta span {
    justify-content: center
  }

  .mpcoe-ap-intro, .mpcoe-ap-programmes, .mpcoe-ap-postgraduate, .mpcoe-ap-subjects, .mpcoe-ap-university, .mpcoe-ap-cta {
    padding: 40px 0
  }

  .mpcoe-ap-course-grid {
    grid-template-columns: 1fr
  }

  .mpcoe-ap-course-card {
    min-height: 230px
  }

  .mpcoe-ap-subject-grid {
    grid-template-columns: 1fr
  }

  .mpcoe-ap-university-card {
    grid-template-columns: 1fr;
    padding: 26px
  }

  .mpcoe-ap-university-badge {
    grid-column: auto
  }

  .mpcoe-ap-cta-card {
    padding: 26px
  }
}

@media(max-width:480px) {
  .mpcoe-ap-pg-item {
    grid-template-columns: 45px 1fr 14px;
    padding: 15px
  }

  .mpcoe-ap-pg-item-icon {
    width: 43px;
    height: 43px
  }

  .mpcoe-ap-pg-item p {
    font-size: 12px
  }
}

/* =========================================================
   DIPLOMA & SKILL PROGRAMMES
   ========================================================= */

.mpcoe-ap-diploma-section {
  border-top: 1px solid var(--ap-border);
}

.mpcoe-ap-special-course-grid {
  grid-template-columns: repeat(2, minmax(260px, 390px));
  justify-content: start;
  gap: 14px;
}

@media(max-width: 767.98px) {
  .mpcoe-ap-special-course-grid {
    grid-template-columns: 1fr;
  }
}