html.eoc-detail {
  --detail-forest: #173c31;
  --detail-forest-deep: #0b2820;
  --detail-ivory: #f4efe5;
  --detail-paper: #fbfaf6;
  --detail-rust: #bd5d3c;
  --detail-gold: #d9ad62;
  --detail-ink: #18231f;
  --detail-muted: #626b66;
  --detail-line: rgba(24, 35, 31, .16);
  scroll-behavior: smooth;
}

.eoc-detail body {
  color: var(--detail-ink);
  background: var(--detail-paper) !important;
}

.eoc-detail #main-nav {
  display: none !important;
}

.eoc-detail .legacy-site-header.is-scrolled {
  background: rgba(11, 40, 32, .97);
}

.eoc-detail .legacy-nav-cta {
  border-color: rgba(255, 255, 255, .62);
}

.eoc-detail .page-banner {
  min-height: 640px !important;
  height: min(78svh, 820px) !important;
  padding-bottom: clamp(70px, 9vw, 116px) !important;
  background-color: var(--detail-forest-deep) !important;
  background-position: center 42% !important;
}

.eoc-detail .page-banner::before {
  background:
    linear-gradient(90deg, rgba(8, 34, 27, .96) 0%, rgba(8, 34, 27, .78) 48%, rgba(8, 34, 27, .18) 100%),
    linear-gradient(0deg, rgba(7, 28, 22, .72), transparent 54%);
}

.eoc-detail-college .page-banner::before {
  background:
    linear-gradient(90deg, rgba(8, 27, 34, .95) 0%, rgba(8, 31, 34, .72) 50%, rgba(8, 31, 34, .16) 100%),
    linear-gradient(0deg, rgba(7, 28, 24, .66), transparent 56%);
}

.eoc-detail-country .page-banner::before {
  background:
    linear-gradient(90deg, rgba(18, 39, 31, .94) 0%, rgba(20, 45, 37, .66) 48%, rgba(20, 45, 37, .08) 100%),
    linear-gradient(0deg, rgba(10, 31, 24, .64), transparent 56%);
}

.eoc-detail .page-banner > .container-fluid {
  width: min(1240px, calc(100% - 72px));
}

.eoc-detail .row-head-container,
.eoc-detail .page-banner .media {
  max-width: 900px;
}

.eoc-detail .page-banner h1,
.eoc-detail .page-banner h2,
.eoc-detail .page-banner h3,
.eoc-detail .page-banner .media-body {
  max-width: 880px;
  font-size: clamp(52px, 7vw, 98px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}

.eoc-detail .page-banner .media {
  align-items: flex-end;
}

.eoc-detail .page-banner .media-left img,
.eoc-detail .page-banner .row-head-container > img {
  width: 112px;
  max-width: 112px;
  max-height: 92px;
  margin-bottom: 8px;
  padding: 14px;
  border-radius: 0;
  background: rgba(255, 255, 255, .95);
}

.detail-hero__eyebrow {
  margin: 0 0 20px !important;
  color: var(--detail-gold) !important;
  font-family: EocPoppins, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.eoc-detail-college .detail-hero__eyebrow {
  display: none;
}

.detail-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
  font-family: EocPoppins, Arial, sans-serif;
}

.detail-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 13px 21px;
  border: 1px solid rgba(255, 255, 255, .58);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none !important;
  transition: color .25s, background .25s, transform .25s;
}

.detail-button:hover {
  color: var(--detail-forest-deep) !important;
  background: #fff;
  transform: translateY(-2px);
}

.detail-hero__call {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .48);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}

.eoc-detail .breadcrumb {
  width: min(1240px, calc(100% - 72px));
  min-height: 62px;
  padding: 21px 0 !important;
  color: #7d847f;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eoc-detail .breadcrumb a {
  color: var(--detail-forest) !important;
}

.eoc-detail h1,
.eoc-detail h2,
.eoc-detail h3,
.eoc-detail h4 {
  color: var(--detail-ink);
}

.eoc-detail h1.f34,
.eoc-detail h2.f34,
.eoc-detail .f34 {
  font-size: clamp(38px, 4.5vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em;
}

.eoc-detail h2 {
  letter-spacing: -.025em;
}

.eoc-detail p,
.eoc-detail .color707070 {
  color: var(--detail-muted) !important;
  font-size: 15px;
  line-height: 1.9;
}

.eoc-detail body > .container > .row.mtb40,
.eoc-detail body > .container-fluid > .row.mtb40 {
  padding-top: clamp(24px, 4vw, 58px);
  padding-bottom: clamp(24px, 4vw, 58px);
  border-top: 1px solid var(--detail-line);
}

.eoc-detail body > nav + .container > .row.mtb40,
.eoc-detail body > nav + .container-fluid > .row.mtb40 {
  border-top: 0;
}

.eoc-detail .important-course,
.eoc-detail .course-highlights,
.eoc-detail .what-you-will-learn,
.eoc-detail .students-block,
.eoc-detail .benefits-block,
.eoc-detail .faqs,
.eoc-detail .consultation {
  margin: 0 !important;
  padding-top: clamp(74px, 8vw, 118px) !important;
  padding-bottom: clamp(74px, 8vw, 118px) !important;
}

.eoc-detail .course-highlights,
.eoc-detail .students-block,
.eoc-detail .faqs {
  background: var(--detail-ivory) !important;
}

.eoc-detail .important-course,
.eoc-detail .benefits-block {
  background: #fff !important;
}

.eoc-detail .blue-bg,
.eoc-detail .consultation {
  background: var(--detail-forest) !important;
}

.eoc-detail .btn,
.eoc-detail .btn-primary,
.eoc-detail .consultation .btn,
.eoc-detail .course-thumbnail button {
  border-radius: 0 !important;
  background: var(--detail-rust) !important;
}

.eoc-detail .btn:hover,
.eoc-detail .btn-primary:hover,
.eoc-detail .course-thumbnail button:hover {
  background: var(--detail-forest-deep) !important;
}

.eoc-detail .right-click-list li::before,
.eoc-detail .blue-bullet-list li::before {
  color: var(--detail-rust);
}

.eoc-detail .right-click-list li,
.eoc-detail .blue-bullet-list li,
.eoc-detail .course-highlights li {
  border-color: var(--detail-line);
}

.eoc-detail .course-highlights li img {
  width: 46px;
  height: 46px;
  filter: sepia(.18) saturate(.75);
}

.eoc-detail .thumbnail {
  border-bottom-color: var(--detail-line) !important;
}

.eoc-detail .thumbnail:hover {
  background: rgba(23, 60, 49, .035) !important;
}

.eoc-detail .thumbnail > img {
  height: 250px;
  filter: saturate(.84) contrast(1.03);
}

.eoc-detail .partners {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--detail-line);
  border-left: 1px solid var(--detail-line);
  list-style: none;
}

.eoc-detail .partners > li {
  display: flex;
  float: none;
  width: 100%;
  min-height: 138px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 24px !important;
  border-right: 1px solid var(--detail-line);
  border-bottom: 1px solid var(--detail-line);
  background: transparent !important;
}

.eoc-detail .partners > li > a,
.eoc-detail .partners > li > a > div {
  display: flex;
  width: 100%;
  height: auto;
  max-width: none;
  align-items: center;
  justify-content: center;
  float: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.eoc-detail .partners > li img {
  position: static;
  width: 100%;
  max-width: 150px;
  max-height: 72px;
  object-fit: contain;
  filter: grayscale(1);
  transform: none;
  transition: filter .25s, transform .25s;
}

.eoc-detail .partners > li:hover img {
  filter: none;
  transform: translateY(-3px);
}

.eoc-detail .panel-group .panel,
.eoc-detail .nav-tabs,
.eoc-detail .table > tbody > tr > td {
  border-color: var(--detail-line) !important;
}

.eoc-detail .panel-title > a:hover,
.eoc-detail .nav-tabs > li.active > a {
  color: var(--detail-rust) !important;
}

.eoc-detail .nav-tabs > li.active > a {
  border-bottom-color: var(--detail-rust) !important;
}

.eoc-detail .table > thead > tr > th,
.eoc-detail .table > thead > tr > td {
  background: var(--detail-forest) !important;
}

.eoc-detail .form-control {
  border-bottom-color: rgba(24, 35, 31, .28) !important;
}

.eoc-detail .form-control:focus {
  border-color: var(--detail-rust) !important;
}

.eoc-detail .consultation .form-control:focus {
  border-color: var(--detail-gold) !important;
}

.eoc-detail .detail-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}

.eoc-detail .detail-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.eoc-detail #callusWhatsapp {
  border-color: rgba(255, 255, 255, .16);
  background: var(--detail-forest-deep);
}

@media (max-width: 900px) {
  .eoc-detail .page-banner {
    min-height: 590px !important;
    height: 72svh !important;
  }

  .eoc-detail .page-banner > .container-fluid,
  .eoc-detail .breadcrumb {
    width: calc(100% - 44px);
  }

  .eoc-detail .partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eoc-detail .legacy-primary-nav {
    background: var(--detail-forest-deep);
  }
}

@media (max-width: 600px) {
  .eoc-detail .page-banner {
    min-height: 610px !important;
    height: 78svh !important;
    padding-bottom: 58px !important;
    background-position: 62% center !important;
  }

  .eoc-detail .page-banner::before,
  .eoc-detail-college .page-banner::before,
  .eoc-detail-country .page-banner::before {
    background: linear-gradient(0deg, rgba(8, 34, 27, .97) 0%, rgba(8, 34, 27, .74) 62%, rgba(8, 34, 27, .25) 100%);
  }

  .eoc-detail .page-banner > .container-fluid,
  .eoc-detail .breadcrumb {
    width: calc(100% - 34px);
  }

  .eoc-detail .page-banner h1,
  .eoc-detail .page-banner h2,
  .eoc-detail .page-banner h3,
  .eoc-detail .page-banner .media-body {
    font-size: clamp(42px, 13vw, 58px) !important;
  }

  .eoc-detail .page-banner .media {
    display: block;
  }

  .eoc-detail .page-banner .media-left img,
  .eoc-detail .page-banner .row-head-container > img {
    width: 82px;
    height: 64px;
    margin: 0 0 18px;
    padding: 10px;
  }

  .detail-hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
  }

  .eoc-detail .breadcrumb {
    min-height: 54px;
    padding: 17px 0 !important;
  }

  .eoc-detail .partners {
    grid-template-columns: 1fr 1fr;
  }

  .eoc-detail .partners > li {
    min-height: 108px;
    padding: 18px !important;
  }

  .eoc-detail .thumbnail > img {
    height: 210px;
  }

  .eoc-detail .important-course,
  .eoc-detail .course-highlights,
  .eoc-detail .what-you-will-learn,
  .eoc-detail .students-block,
  .eoc-detail .benefits-block,
  .eoc-detail .faqs,
  .eoc-detail .consultation {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.eoc-detail {
    scroll-behavior: auto;
  }

  .eoc-detail .detail-reveal,
  .eoc-detail .detail-button,
  .eoc-detail .partners > li img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
