* {
  box-sizing: border-box
}

html, body {
  overflow-x: hidden
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(165deg, #FBFBFB 0%, #fff 48%, #f5f5f5 100%);
  color: #1d1d1d;
  font-size: 16px;
  line-height: 1.7
}

.topbar {
  background: linear-gradient(135deg, #006D8C 0%, #005670 100%);
  padding: 16px 28px;
  box-shadow: 2px 4px 28px 0 #006d8c1a;
  position: relative;
  z-index: 900
}

.topbarInner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px
}

.brandzone {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0
}

.brandmark {
  width: 46px;
  height: 46px;
  display: block;
  background: #ffffffeb;
  padding: 8px;
  border-radius: 48px;
  box-shadow: 0 0 0 2px #ffa44659 2px 2px 5px 0 #006d8c0f;
  transition: transform .12s ease-out, box-shadow .1s linear
}

.brandmark:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #ffa4468c 2px 4px 28px 0 #006d8c1a
}

.brandmark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.companytext {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
  text-shadow: 1px 1px 3px #00000026
}

.navprimary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end
}

.navlink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  border: 2px solid transparent;
  border-radius: 7px;
  transition: border-color .11s ease-out, background-color .13s ease-out;
  position: relative;
  overflow: hidden;
  background: transparent
}

.navlink::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #ffa4462e;
  transition: right .14s ease-out;
  z-index: -1
}

.navlink:hover::before {
  right: 0
}

.navlink:hover {
  border-color: #ffa44699;
  background: #ffa44614
}

.navlink:focus {
  outline: 2px solid #FFA446;
  outline-offset: 3px
}

.navlink i {
  font-size: 16px;
  opacity: .85
}

@media (max-width: 1024px) {
  .topbarInner {
    gap: 28px
  }

  .navprimary {
    gap: 4px
  }

  .navlink {
    padding: 8px 16px;
    font-size: 15px
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 16px
  }

  .topbarInner {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
  }

  .brandzone {
    width: 100%;
    justify-content: center
  }

  .navprimary {
    width: 100%;
    justify-content: center;
    gap: 8px
  }

  .navlink {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center
  }
}

@media (max-width: 480px) {
  .companytext {
    font-size: 16px
  }

  .brandmark {
    width: 40px;
    height: 40px
  }

  .navlink {
    min-width: 100px;
    font-size: 15px;
    padding: 8px
  }
}

.basement {
  background: linear-gradient(180deg, #006D8C 0%, #004d5f 100%);
  padding: 56px 28px 28px;
  margin-top: 56px;
  position: relative
}

.basement::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent 0%, #006d8c0d 100%);
  pointer-events: none
}

.basementInner {
  max-width: 1366px;
  margin: 0 auto
}

.basementgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px;
  margin-bottom: 56px
}

.footcolumn {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footheading {
  font-size: 16px;
  font-weight: 700;
  color: #FFA446;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 8px
}

.companycard {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.companylogofoot {
  width: 48px;
  height: 48px;
  display: block;
  background: #fffffff2;
  padding: 8px;
  border-radius: 48px;
  box-shadow: 0 0 0 2px #ffa44666 2px 2px 5px 0 #006d8c0f
}

.companylogofoot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.companydesc {
  font-size: 15px;
  line-height: 1.7;
  color: #ffffffd9;
  margin: 0
}

.contactrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #ffffffe6;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .1s linear
}

.contactrow:hover {
  color: #FFA446
}

.contactrow i {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0
}

.footlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footlist a {
  color: #ffffffd9;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  transition: color .11s ease-out, padding-left .12s ease-out;
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px
}

.footlist a:hover {
  color: #FFA446;
  border-bottom-color: #ffa44680;
  padding-left: 4px
}

.footlist a:focus {
  outline: 2px solid #FFA446;
  outline-offset: 3px
}

.copyrightzone {
  background: #00000026;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 28px;
  border-radius: 7px;
  border: 1px solid #ffffff14;
  box-shadow: inset 0 1px 2px #ffffff0d inset 0 -1px 2px #00000026
}

.copyrightwrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.copyrighttext {
  font-size: 15px;
  color: #ffffffbf;
  margin: 0
}

.legallinks {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0
}

.legallinks a {
  color: #ffffffbf;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .1s linear, border-bottom-color .11s ease-out
}

.legallinks a:hover {
  color: #FFA446;
  border-bottom-color: #ffa44699
}

.legallinks a:focus {
  outline: 2px solid #FFA446;
  outline-offset: 3px
}

@media (max-width: 1024px) {
  .basementgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
  }
}

@media (max-width: 768px) {
  .basement {
    padding: 28px 16px 16px
  }

  .basementgrid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 28px
  }

  .copyrightwrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .legallinks {
    flex-direction: column;
    gap: 8px
  }
}

@media (max-width: 480px) {
  .copyrightzone {
    padding: 16px
  }

  .copyrighttext {
    font-size: 15px
  }

  .legallinks a {
    font-size: 15px
  }
}

.consentbox {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 340px;
  max-width: calc(100% - 56px);
  background: linear-gradient(145deg, #fff 0%, #FBFBFB 100%);
  border: 3px solid #006D8C;
  border-radius: 7px;
  padding: 28px;
  box-shadow: 2px 10px 36px 0 #006d8c21;
  z-index: 1200;
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .14s ease-out, transform .14s ease-out
}

.consentbox.visible {
  opacity: 1;
  transform: translateY(0)
}

.consentmsg {
  font-size: 15px;
  line-height: 1.7;
  color: #1d1d1d;
  margin: 0 0 16px
}

.consentmsg a {
  color: #006D8C;
  text-decoration: underline;
  transition: color .1s linear
}

.consentmsg a:hover {
  color: #FFA446
}

.consentuses {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.4;
  color: #4a4a4a
}

.consentuses li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px
}

.consentuses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: #FFA446;
  border-radius: 48px
}

.consentactions {
  display: flex;
  gap: 16px;
  justify-content: space-between
}

.consentbtn {
  flex: 1;
  padding: 8px 16px;
  font-size: 15px;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  color: #006D8C;
  background: transparent;
  border: 3px solid #006D8C;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .12s ease-out, color .11s ease-out, border-color .1s linear;
  position: relative;
  overflow: hidden
}

.consentbtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #006D8C;
  transition: right .13s ease-out;
  z-index: -1
}

.consentbtn:hover::before {
  right: 0
}

.consentbtn:hover {
  color: #fff;
  border-color: #006D8C
}

.consentbtn:focus {
  outline: 2px solid #FFA446;
  outline-offset: 3px
}

.consentbtn.primary {
  background: #FFA446;
  border-color: #FFA446;
  color: #fff
}

.consentbtn.primary::before {
  background: #006D8C
}

.consentbtn.primary:hover {
  background: #006D8C;
  border-color: #006D8C
}

.consentdetails {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #006d8c26
}

.consentdetails.open {
  display: block
}

.consenttoggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer
}

.consenttoggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #FFA446
}

.consenttoggle label {
  font-size: 15px;
  color: #1d1d1d;
  cursor: pointer
}

.consentexpand {
  background: none;
  border: none;
  color: #006D8C;
  text-decoration: underline;
  font-size: 15px;
  font-family: 'Cabin', sans-serif;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color .1s linear
}

.consentexpand:hover {
  color: #FFA446
}

.consentexpand:focus {
  outline: 2px solid #FFA446;
  outline-offset: 2px
}

@media (max-width: 480px) {
  .consentbox {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
    padding: 16px
  }

  .consentactions {
    flex-direction: column;
    gap: 8px
  }
}

.terms-block-v {
  max-width: 1366px;
  margin: 0 auto;
  padding: 56px 28px;
  background: #FBFBFB
}

.terms-block-v p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: #1a1a2e
}

.terms-block-v p:last-child {
  margin-bottom: 0
}

.terms-block-v strong,
.terms-block-v b {
  font-weight: 600;
  color: #006D8C
}

.terms-block-v a {
  color: #006D8C;
  text-decoration: none;
  border-bottom: 2px solid #ffa4464d;
  transition: border-color .12s ease-out
}

.terms-block-v a:hover {
  border-bottom-color: #FFA446
}

.terms-block-v table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 2px 5px 0 #006d8c0f
}

.terms-block-v thead {
  background: #006D8C
}

.terms-block-v thead tr {
  border: none
}

.terms-block-v th {
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 16px;
  color: #fff
}

.terms-block-v tbody tr {
  border-bottom: 1px solid #006d8c1a
}

.terms-block-v tbody tr:last-child {
  border-bottom: none
}

.terms-block-v td {
  font-size: 16px;
  line-height: 1.4;
  padding: 16px;
  color: #1a1a2e
}

.terms-block-v hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #FFA446, #006D8C);
  margin: 56px 0;
  border-radius: 48px
}

.terms-block-v div {
  margin: 28px 0
}

@media (max-width: 768px) {
  .terms-block-v {
    padding: 28px 16px
  }

  .terms-block-v p {
    font-size: 15px
  }

  .terms-block-v table {
    font-size: 15px
  }

  .terms-block-v th,
  .terms-block-v td {
    padding: 8px;
    font-size: 15px
  }

  .terms-block-v hr {
    margin: 28px 0
  }
}

@media (max-width: 480px) {
  .terms-block-v {
    padding: 16px 8px
  }

  .terms-block-v table {
    display: block;
    overflow-x: auto
  }
}

.learningprogramdetail {
  background: #FBFBFB;
  color: #1d1d1d;
  overflow-x: clip
}

.learningprogramdetail ::selection {
  background: #ffa4462e;
  color: #1d1d1d
}

.learningprogramdetail .topblock {
  position: relative;
  padding: 56px 16px;
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: stretch;
  border-bottom: 1px solid #006d8c26
}

.learningprogramdetail .imgstrip {
  width: 180px;
  flex-shrink: 0;
  position: relative;
  border-radius: 7px;
  overflow: hidden
}

.learningprogramdetail .imgstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  display: block
}

.learningprogramdetail .toptext {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px
}

.learningprogramdetail .metacluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center
}

.learningprogramdetail .metatag {
  font-size: 15px;
  color: #006D8C;
  background: #006d8c14;
  padding: 4px 16px;
  border-radius: 48px;
  border: 1px solid #006d8c38;
  line-height: 1.4
}

.learningprogramdetail .metaitem {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.4
}

.learningprogramdetail .toptitle {
  font-size: 43px;
  line-height: 1.1;
  font-weight: 700;
  color: #1d1d1d;
  margin: 0
}

.learningprogramdetail .toptitle .accent {
  color: #FFA446
}

.learningprogramdetail .topline {
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #FFA446 0%, #ffa44600 100%);
  margin: 8px 0 0
}

.learningprogramdetail .contentarea {
  max-width: 1366px;
  margin: 0 auto;
  padding: 56px 16px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  position: relative
}

.learningprogramdetail .maincolumn {
  min-width: 0
}

.learningprogramdetail .sidecolumn {
  position: relative
}

.learningprogramdetail .programbox {
  background: #fff;
  border-radius: 7px;
  padding: 28px;
  box-shadow: 2px 4px 28px 0 #006d8c1a;
  margin-bottom: 28px
}

.learningprogramdetail .programbox h2 {
  font-size: 23px;
  line-height: 1.4;
  font-weight: 700;
  color: #1d1d1d;
  margin: 0 0 16px
}

.learningprogramdetail .programbox h3 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #006D8C;
  margin: 16px 0 8px
}

.learningprogramdetail .programbox p {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 8px
}

.learningprogramdetail .programbox ul {
  margin: 8px 0 8px 28px;
  padding: 0;
  list-style: disc
}

.learningprogramdetail .programbox li {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin-bottom: 4px
}

.learningprogramdetail .programbox em {
  font-style: italic;
  color: #FFA446
}

.learningprogramdetail .programbox figure {
  margin: 16px 0;
  padding: 0
}

.learningprogramdetail .programbox figcaption {
  font-size: 15px;
  line-height: 1.4;
  color: #6a6a6a;
  margin-top: 8px
}

.learningprogramdetail .programbox details {
  margin: 16px 0;
  border-left: 3px solid #FFA446;
  padding-left: 16px
}

.learningprogramdetail .programbox summary {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #006D8C;
  cursor: pointer;
  transition: color .12s ease-out
}

.learningprogramdetail .programbox summary:hover {
  color: #FFA446
}

.learningprogramdetail .descbox {
  background: #fff;
  border-radius: 7px;
  padding: 28px;
  box-shadow: 2px 2px 5px 0 #ffa4460f;
  margin-bottom: 28px
}

.learningprogramdetail .descbox h2 {
  font-size: 31px;
  line-height: 1.1;
  font-weight: 700;
  color: #1d1d1d;
  margin: 0 0 16px
}

.learningprogramdetail .descbox p {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 16px
}

.learningprogramdetail .descbox small {
  font-size: 15px;
  color: #6a6a6a
}

.learningprogramdetail .descbox strong {
  font-weight: 600;
  color: #006D8C
}

.learningprogramdetail .descbox ul {
  margin: 16px 0 16px 28px;
  padding: 0;
  list-style: circle
}

.learningprogramdetail .descbox li {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin-bottom: 8px
}

.learningprogramdetail .descbox dl {
  margin: 16px 0;
  padding: 0
}

.learningprogramdetail .descbox dt {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #006D8C;
  margin: 8px 0 4px
}

.learningprogramdetail .descbox dd {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 8px 16px
}

.learningprogramdetail .descbox blockquote {
  margin: 16px 0;
  padding: 16px 28px;
  background: #ffa4460f;
  border-left: 4px solid #FFA446;
  border-radius: 7px;
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a
}

.learningprogramdetail .descbox cite {
  font-size: 15px;
  font-style: italic;
  color: #6a6a6a;
  display: block;
  margin-top: 8px
}

.learningprogramdetail .descbox details {
  margin: 16px 0;
  border: 1px solid #006d8c2e;
  border-radius: 7px;
  padding: 16px;
  background: #006d8c08
}

.learningprogramdetail .descbox summary {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #006D8C;
  cursor: pointer;
  transition: color .1s linear
}

.learningprogramdetail .descbox summary:hover {
  color: #FFA446
}

.learningprogramdetail .pricesticky {
  position: sticky;
  top: 28px;
  background: linear-gradient(172deg, #fff 0%, #ffa4460a 100%);
  border-radius: 7px;
  padding: 28px;
  box-shadow: 2px 10px 36px 0 #006d8c21;
  border: 2px solid #006d8c1f
}

.learningprogramdetail .priceval {
  font-size: 58px;
  line-height: 1.1;
  font-weight: 700;
  color: #FFA446;
  margin: 0 0 8px
}

.learningprogramdetail .pricedesc {
  font-size: 16px;
  line-height: 1.4;
  color: #4a4a4a;
  margin: 0 0 16px
}

.learningprogramdetail .pricenote {
  font-size: 15px;
  line-height: 1.4;
  color: #6a6a6a;
  margin: 0 0 16px;
  padding: 8px 16px;
  background: #006d8c0d;
  border-radius: 7px
}

.learningprogramdetail .pricerow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #006d8c1a;
  font-size: 15px;
  line-height: 1.4;
  color: #3a3a3a
}

.learningprogramdetail .pricerow:last-of-type {
  border-bottom: none
}

.learningprogramdetail .pricerow .label {
  color: #6a6a6a
}

.learningprogramdetail .pricerow .value {
  font-weight: 600;
  color: #006D8C
}

.learningprogramdetail .enrollbtn {
  width: 100%;
  margin-top: 28px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #006D8C;
  border: 3px solid #006D8C;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden
}

.learningprogramdetail .enrollbtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #FFA446;
  transition: right .15s ease-out;
  z-index: 0
}

.learningprogramdetail .enrollbtn:hover::before {
  right: 0
}

.learningprogramdetail .enrollbtn span {
  position: relative;
  z-index: 1
}

.learningprogramdetail .enrollbtn:hover {
  border-color: #FFA446;
  color: #fff
}

.learningprogramdetail .statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 28px
}

.learningprogramdetail .statcard {
  background: #fff;
  border-radius: 7px;
  padding: 16px;
  text-align: center;
  box-shadow: 2px 2px 5px 0 #ffa4460f;
  border: 1px solid #006d8c14
}

.learningprogramdetail .statnum {
  font-size: 31px;
  line-height: 1.1;
  font-weight: 700;
  color: #006D8C;
  margin: 0 0 4px
}

.learningprogramdetail .statlabel {
  font-size: 15px;
  line-height: 1.4;
  color: #6a6a6a
}

.learningprogramdetail .scrolltop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: #FFA446;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 2px 4px 28px 0 #ffa4461a;
  transition: transform .1s linear, box-shadow .1s linear;
  z-index: 100
}

.learningprogramdetail .scrolltop:hover {
  transform: translateY(-4px);
  box-shadow: 2px 10px 36px 0 #ffa44621
}

.learningprogramdetail .scrolltop svg {
  width: 24px;
  height: 24px;
  fill: #fff
}

.learningprogramdetail .decorpulse {
  position: absolute;
  width: 280px;
  height: 280px;
  border: 2px solid #006d8c1f;
  border-radius: 7px;
  top: 140px;
  right: -80px;
  animation: pulsegeo 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0
}

@keyframes pulsegeo {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: .3
  }

  50% {
    transform: scale(1.08) rotate(2deg);
    opacity: .15
  }
}

.learningprogramdetail .bgzoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 72% 38%, #ffa4460a 0%, transparent 58%);
  animation: zoomback 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0
}

@keyframes zoomback {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.06)
  }
}

.learningprogramdetail .contentarea>* {
  position: relative;
  z-index: 1
}

@media (max-width: 1024px) {
  .learningprogramdetail .contentarea {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .learningprogramdetail .pricesticky {
    position: static
  }

  .learningprogramdetail .decorpulse {
    display: none !important
  }
}

@media (max-width: 768px) {
  .learningprogramdetail .topblock {
    flex-direction: column;
    padding: 28px 16px
  }

  .learningprogramdetail .imgstrip {
    width: 100%;
    height: 220px
  }

  .learningprogramdetail .toptitle {
    font-size: 31px
  }

  .learningprogramdetail .contentarea {
    padding: 28px 16px
  }

  .learningprogramdetail .programbox,
  .learningprogramdetail .descbox,
  .learningprogramdetail .pricesticky {
    padding: 16px
  }

  .learningprogramdetail .statgrid {
    grid-template-columns: 1fr
  }

  .learningprogramdetail .scrolltop {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px
  }
}

@media (max-width: 480px) {
  .learningprogramdetail .toptitle {
    font-size: 23px
  }

  .learningprogramdetail .priceval {
    font-size: 43px
  }

  .learningprogramdetail .descbox h2 {
    font-size: 23px
  }

  .learningprogramdetail .metacluster {
    flex-direction: column;
    align-items: flex-start
  }
}

.servpage {
  max-width: 1366px;
  margin: 0 auto;
  background: #FBFBFB
}

.servpage .leadzone {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(112deg, #FBFBFB 0%, #FBFBFB 48%, #006D8C 48%, #006D8C 100%);
  padding: 56px 28px;
  overflow: hidden
}


.servpage .leadcontent {
  position: relative;
  z-index: 2;
  max-width: 680px;
  animation: slideInLeft .12s ease-out
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.servpage .leadcontent h1 {
  font-size: 58px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 28px;
  letter-spacing: -.02em;
  font-weight: 700
}

.servpage .leadcontent .leadaccent {
  font-size: 43px;
  line-height: 1.4;
  color: #FFA446;
  margin: 0 0 28px;
  font-weight: 300;
  border-left: 8px solid #FFA446;
  padding: 0 0 0 28px
}

.servpage .leadcontent p {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0
}

.servpage .offerblock {
  background: #fff;
  padding: 56px 28px;
  position: relative
}

.servpage .offerblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #ffa44614 0%, transparent 70%);
  transform: translate(-50%, -20%);
  pointer-events: none
}

.servpage .offerwrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.servpage .offerblock h2 {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 56px;
  text-align: right;
  font-weight: 700
}

.servpage .servicegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.servpage .servicecard {
  background: #FBFBFB;
  border: 3px solid #006D8C;
  border-radius: 7px;
  padding: 28px;
  position: relative;
  transition: background .11s ease-out, border-color .11s ease-out;
  overflow: hidden
}

.servpage .servicecard::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(95deg, #FFA446 0%, #006D8C 100%);
  transition: right .13s ease-out;
  z-index: 0
}

.servpage .servicecard:hover::before {
  right: 0
}

.servpage .servicecard:hover {
  border-color: #FFA446
}

.servpage .servicecard:hover .servicetitle,
.servpage .servicecard:hover .servicedesc,
.servpage .servicecard:hover .servicemeta {
  color: #fff
}

.servpage .servicecontent {
  position: relative;
  z-index: 1
}

.servpage .servicetitle {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 700;
  transition: color .11s ease-out
}

.servpage .servicedesc {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 16px;
  transition: color .11s ease-out
}

.servpage .servicemeta {
  font-size: 15px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 600;
  transition: color .11s ease-out
}

.servpage .serviceimg {
  width: 100%;
  height: 280px;
  margin: 0 0 16px;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 2px 4px 28px 0 #006d8c1a
}

.servpage .serviceimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.servpage .zigzagdivider {
  width: 100%;
  height: 28px;
  background: #fff;
  position: relative
}

.servpage .zigzagdivider svg {
  width: 100%;
  height: 100%;
  display: block
}

.servpage .detailsection {
  background: linear-gradient(178deg, #fff 0%, #FBFBFB 100%);
  padding: 56px 28px;
  position: relative
}

.servpage .detailwrap {
  max-width: 1200px;
  margin: 0 auto;
  animation: slideInRight .14s ease-out
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.servpage .detailsection h2 {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 28px;
  font-weight: 700
}

.servpage .detailintro {
  font-size: 23px;
  line-height: 1.4;
  color: #2a2a2a;
  margin: 0 0 56px;
  font-weight: 300
}

.servpage .featuregrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.servpage .featureitem {
  display: flex;
  gap: 28px;
  padding: 28px;
  background: #fff;
  border-radius: 7px;
  border: 2px solid #FBFBFB;
  box-shadow: 2px 2px 5px 0 #ffa4460f inset 0 2px 4px 0 #ffffff80 inset 0 -2px 4px 0 #00000008;
  transition: border-color .09s linear, box-shadow .09s linear
}

.servpage .featureitem:hover {
  border-color: #FFA446;
  box-shadow: 2px 4px 28px 0 #006d8c1a inset 0 2px 4px 0 #ffffff80 inset 0 -2px 4px 0 #00000008
}

.servpage .featureicon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #FFA446 0%, #006D8C 100%);
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 5px 0 #006d8c0f
}

.servpage .featureicon svg {
  width: 28px;
  height: 28px;
  fill: #fff
}

.servpage .featurecontent h3 {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 8px;
  font-weight: 700
}

.servpage .featurecontent p {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0
}

.servpage .faqsection {
  background: #006D8C;
  padding: 56px 28px;
  position: relative
}

.servpage .faqwrap {
  max-width: 1200px;
  margin: 0 auto
}

.servpage .faqsection h2 {
  font-size: 43px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 56px;
  text-align: center;
  font-weight: 700
}

.servpage .faqlist {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.servpage .faqitem {
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: border-color .1s ease-out
}

.servpage .faqitem:hover {
  border-color: #FFA446
}

.servpage .faqtoggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap
}

.servpage .faqheader {
  padding: 28px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  transition: background .12s ease-out
}

.servpage .faqheader:hover {
  background: #FBFBFB
}

.servpage .faqquestion {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0;
  font-weight: 700
}

.servpage .faqarrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFA446;
  border-radius: 48px;
  transition: transform .12s ease-out, background .12s ease-out
}

.servpage .faqarrow svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  transition: transform .12s ease-out
}

.servpage .faqbody {
  max-height: 0;
  overflow: hidden;
  transition: max-height .15s ease-out
}

.servpage .faqanswer {
  padding: 0 28px 28px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0;
  overflow-wrap: break-word
}

.servpage .faqtoggle:checked ~ .faqbody {
  max-height: 500px
}

.servpage .faqtoggle:checked ~ .faqquestion .faqarrow {
  background: #006D8C;
  transform: rotate(180deg)
}

.servpage .faqtoggle:focus-visible ~ .faqquestion .faqheader {
  outline: 2px solid #FFA446;
  outline-offset: -2px
}

@media (min-width: 768px) {
  .servpage .leadzone {
    min-height: 600px;
    padding: 56px
  }

  .servpage .leadcontent {
    max-width: 620px
  }

  .servpage .leadcontent h1 {
    font-size: 58px
  }

  .servpage .offerblock {
    padding: 56px
  }

  .servpage .servicegrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
  }

  .servpage .detailsection {
    padding: 56px
  }

  .servpage .featuregrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .servpage .faqsection {
    padding: 56px
  }
}

@media (min-width: 1024px) {
  .servpage .leadzone {
    min-height: 680px
  }

  .servpage .leadcontent h1 {
    font-size: 58px;
    margin: 0 0 28px
  }

  .servpage .servicegrid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width: 767px) {
  .servpage .leadzone {
    background: linear-gradient(178deg, #FBFBFB 0%, #FBFBFB 80%, #006D8C 80%, #006D8C 100%);
    min-height: 500px
  }

  .servpage .leadzone::before,
  .servpage .leadzone::after {
    display: none
  }

  .servpage .leadcontent h1 {
    font-size: 43px
  }

  .servpage .leadcontent .leadaccent {
    font-size: 31px
  }

  .servpage .offerblock h2 {
    font-size: 31px;
    text-align: left
  }

  .servpage .detailsection h2 {
    font-size: 31px
  }

  .servpage .detailintro {
    font-size: 16px
  }

  .servpage .faqsection h2 {
    font-size: 31px
  }

  .servpage .faqquestion {
    font-size: 16px
  }
}

::selection {
  background: #ffa44626;
  color: inherit
}

.servpage input::placeholder,
.servpage textarea::placeholder {
  opacity: 1;
  transition: opacity .11s ease-out
}

.servpage input:focus::placeholder,
.servpage textarea:focus::placeholder {
  opacity: 0
}

.supprt {
  max-width: 1366px;
  margin: 0 auto;
  background: #FBFBFB
}

.supprt .resHero {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 56px 28px;
  background: linear-gradient(112deg, #FBFBFB 0%, #ffa44614 100%);
  position: relative;
  overflow: visible
}

.supprt .resHero::before {
  content: '';
  position: absolute;
  top: 56px;
  left: -8px;
  width: 280px;
  height: 280px;
  border: 3px solid #006d8c1f;
  border-radius: 48px;
  transform: rotate(-8deg);
  pointer-events: none
}

.supprt .resHero::after {
  content: '';
  position: absolute;
  bottom: 28px;
  right: 16px;
  width: 180px;
  height: 180px;
  border: 2px solid #ffa44626;
  border-radius: 48px;
  transform: rotate(12deg);
  pointer-events: none
}

.supprt .imgCard {
  flex: 0 0 380px;
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 4px 28px 0 #006d8c1a
}

.supprt .imgCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) contrast(1.05)
}

.supprt .imgCard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffa44647 0%, #006d8c38 100%);
  mix-blend-mode: multiply;
  pointer-events: none
}

.supprt .txtZone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 16px 8px;
  position: relative;
  z-index: 1
}

.supprt .mainHd {
  font-size: 58px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 700;
  letter-spacing: -.02em
}

.supprt .mainHd .bracket {
  color: #FFA446;
  font-weight: 400
}

.supprt .leadTxt {
  font-size: 23px;
  line-height: 1.4;
  color: #2a2a2a;
  margin: 0
}

@media (max-width: 1024px) {
  .supprt .resHero {
    flex-direction: column;
    padding: 28px 16px
  }

  .supprt .imgCard {
    flex: 0 0 auto;
    height: 320px
  }

  .supprt .mainHd {
    font-size: 43px
  }

  .supprt .leadTxt {
    font-size: 16px
  }
}

@media (max-width: 768px) {

  .supprt .resHero::before,
  .supprt .resHero::after {
    display: none
  }

  .supprt .imgCard {
    height: 260px
  }

  .supprt .mainHd {
    font-size: 31px
  }
}

.supprt .channelGrid {
  padding: 56px 28px;
  background: #fff;
  position: relative
}

.supprt .channelGrid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFA446 0%, #006D8C 50%, #FFA446 100%)
}

.supprt .secHd {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center
}

.supprt .secSub {
  font-size: 16px;
  line-height: 1.4;
  color: #4a4a4a;
  margin: 0 0 56px;
  text-align: center
}

.supprt .gridWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto
}

.supprt .chanBox {
  background: #FBFBFB;
  border: 3px solid #FFA446;
  border-radius: 7px;
  padding: 28px;
  position: relative;
  transition: border-color .12s ease-out, box-shadow .12s ease-out
}

.supprt .chanBox:hover {
  border-color: #006D8C;
  box-shadow: 2px 10px 36px 0 #006d8c21
}

.supprt .chanBox.featured {
  grid-column: 1 / -1;
  background: linear-gradient(97deg, #ffa4460f 0%, #006d8c0a 100%);
  border-width: 4px
}

.supprt .iconWrap {
  width: 56px;
  height: 56px;
  background: #FFA446;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  transition: transform .1s ease-out, background .1s ease-out
}

.supprt .chanBox:hover .iconWrap {
  transform: scale(1.08);
  background: #006D8C
}

.supprt .iconWrap svg {
  width: 28px;
  height: 28px;
  fill: #fff
}

.supprt .chanTtl {
  font-size: 23px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 700;
  margin: 0 0 8px
}

.supprt .chanDesc {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 16px
}

.supprt .chanLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color .09s linear
}

.supprt .chanLink::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #FFA446;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .13s ease-out
}

.supprt .chanLink:hover {
  color: #FFA446
}

.supprt .chanLink:hover::after {
  transform: scaleX(1)
}

.supprt .chanLink .dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 48px;
  transition: transform .11s ease-out
}

.supprt .chanLink:hover .dot {
  transform: translateX(4px)
}

@media (max-width: 768px) {
  .supprt .channelGrid {
    padding: 28px 16px
  }

  .supprt .secHd {
    font-size: 31px;
    margin-bottom: 4px
  }

  .supprt .secSub {
    font-size: 15px;
    margin-bottom: 28px
  }

  .supprt .gridWrap {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .supprt .chanBox {
    padding: 16px
  }

  .supprt .chanTtl {
    font-size: 16px
  }

  .supprt .chanDesc {
    font-size: 15px
  }
}

.supprt .faqZone {
  padding: 56px 28px;
  background: #FBFBFB;
  position: relative
}

.supprt .faqZone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: url(./artwork/media_pic.jpg) center / cover no-repeat;
  opacity: .04;
  pointer-events: none
}

.supprt .faqZone::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, #fbfbfbf2 0%, #ffa44614 100%);
  pointer-events: none
}

.supprt .faqInner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.supprt .faqHd {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 700;
  margin: 0 0 56px;
  text-align: right
}

.supprt .qBlock {
  margin: 0 0 28px;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 2px 5px 0 #006d8c0f
}

.supprt .qTrigger {
  width: 100%;
  padding: 16px 28px;
  background: transparent;
  border: none;
  border-left: 4px solid #FFA446;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: border-color .11s ease-out, background .11s ease-out;
  text-align: left
}

.supprt .qTrigger:hover {
  background: #ffa4460a;
  border-left-color: #006D8C
}

.supprt .qTrigger.open {
  background: #006d8c0d;
  border-left-color: #006D8C
}

.supprt .qTxt {
  font-size: 16px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 600;
  flex: 1
}

.supprt .qIcon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  position: relative;
  transition: transform .13s ease-out
}

.supprt .qTrigger.open .qIcon {
  transform: rotate(180deg)
}

.supprt .qIcon::before,
.supprt .qIcon::after {
  content: '';
  position: absolute;
  background: #FFA446;
  transition: background .11s ease-out
}

.supprt .qTrigger:hover .qIcon::before,
.supprt .qTrigger:hover .qIcon::after,
.supprt .qTrigger.open .qIcon::before,
.supprt .qTrigger.open .qIcon::after {
  background: #006D8C
}

.supprt .qIcon::before {
  top: 50%;
  left: 4px;
  right: 4px;
  height: 3px;
  transform: translateY(-50%)
}

.supprt .qIcon::after {
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 3px;
  transform: translateX(-50%);
  transition: opacity .13s ease-out, background .11s ease-out
}

.supprt .qTrigger.open .qIcon::after {
  opacity: 0
}

.supprt .qAnswer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .15s ease-out
}

.supprt .qAnswer.open {
  max-height: 800px
}

.supprt .ansInner {
  padding: 16px 28px 28px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a
}

.supprt .ansInner p {
  margin: 0 0 8px
}

.supprt .ansInner p:last-child {
  margin-bottom: 0
}

@media (max-width: 768px) {
  .supprt .faqZone {
    padding: 28px 16px
  }

  .supprt .faqHd {
    font-size: 31px;
    margin-bottom: 28px;
    text-align: left
  }

  .supprt .qBlock {
    margin-bottom: 16px
  }

  .supprt .qTrigger {
    padding: 16px
  }

  .supprt .qTxt {
    font-size: 15px
  }

  .supprt .ansInner {
    padding: 16px;
    font-size: 15px
  }
}

.supprt .resourceHub {
  padding: 56px 28px;
  background: #fff;
  position: relative
}

.supprt .zigzag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  overflow: hidden
}

.supprt .zigzag svg {
  width: 100%;
  height: 100%;
  display: block
}

.supprt .hubInner {
  max-width: 1100px;
  margin: 0 auto
}

.supprt .hubHd {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 300;
  margin: 0 0 8px
}

.supprt .hubSub {
  font-size: 16px;
  line-height: 1.4;
  color: #4a4a4a;
  margin: 0 0 56px
}

.supprt .resGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.supprt .resCard {
  background: #FBFBFB;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .12s ease-out, transform .12s ease-out;
  box-shadow: 2px 2px 5px 0 #ffa4460f
}

.supprt .resCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #ffa44614 50%, transparent 100%);
  transition: left .14s ease-out
}

.supprt .resCard:hover::before {
  left: 100%
}

.supprt .resCard:hover {
  border-color: #FFA446;
  transform: translateY(-4px);
  box-shadow: 2px 10px 36px 0 #ffa44621
}

.supprt .resNum {
  font-size: 58px;
  line-height: 1.1;
  color: #006d8c26;
  font-weight: 700;
  margin: 0 0 16px;
  position: relative
}

.supprt .resTtl {
  font-size: 23px;
  line-height: 1.1;
  color: #006D8C;
  font-weight: 700;
  margin: 0 0 8px;
  position: relative
}

.supprt .resTxt {
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 16px;
  position: relative
}

.supprt .codeSnip {
  background: #2a2a2a;
  border-radius: 7px;
  padding: 16px;
  margin: 16px 0;
  position: relative;
  box-shadow: inset 0 2px 4px #0000004d inset 0 -1px 2px #ffffff0d
}

.supprt .codeSnip pre {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #FFA446;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word
}

.supprt .resBtn {
  display: inline-block;
  padding: 8px 28px;
  background: transparent;
  border: 3px solid #006D8C;
  border-radius: 7px;
  color: #006D8C;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color .13s ease-out, border-color .13s ease-out;
  z-index: 1
}

.supprt .resBtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #006D8C;
  transition: right .13s ease-out;
  z-index: -1
}

.supprt .resBtn:hover {
  color: #fff;
  border-color: #006D8C
}

.supprt .resBtn:hover::before {
  right: 0
}

@media (max-width: 1024px) {
  .supprt .resGrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .supprt .resourceHub {
    padding: 28px 16px
  }

  .supprt .hubHd {
    font-size: 31px
  }

  .supprt .hubSub {
    font-size: 15px;
    margin-bottom: 28px
  }

  .supprt .resGrid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .supprt .resCard {
    padding: 16px
  }

  .supprt .resNum {
    font-size: 43px
  }

  .supprt .resTtl {
    font-size: 16px
  }

  .supprt .codeSnip {
    padding: 8px
  }

  .supprt .codeSnip pre {
    font-size: 15px
  }
}

@keyframes zoneMigrate {

  0%,
  100% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.supprt .channelGrid {
  background: linear-gradient(270deg, #fff 0%, #ffa44608 50%, #fff 100%);
  background-size: 200% 200%;
  animation: zoneMigrate 18s ease-in-out infinite
}

::selection {
  background: #ffa44626;
  color: inherit
}

::-moz-selection {
  background: #ffa44626;
  color: inherit
}

input::placeholder,
textarea::placeholder {
  transition: opacity .12s ease-out
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0
}

.opng {
  max-width: 1366px;
  margin: 0 auto;
  background: #FBFBFB
}

.opng ::selection {
  background: #ffa4462e;
  color: inherit
}

.opng input::placeholder,
.opng textarea::placeholder {
  transition: opacity .12s ease-out
}

.opng input:focus::placeholder,
.opng textarea:focus::placeholder {
  opacity: 0
}

.opng .banner {
  position: relative;
  overflow: hidden;
  padding: 16px 28px;
  background: linear-gradient(78deg, #006D8C 0%, #006d8cd9 100%);
  text-align: center
}

.opng .banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #FFA446
}

.opng .banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 56px 56px;
  border-color: transparent transparent #FFA446;
  pointer-events: none
}

.opng .bannerImg {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin: 0 0 16px;
  border-radius: 7px;
  position: relative
}

.opng .bannerImgWrap {
  position: relative;
  margin: 0 0 16px
}

.opng .bannerImgWrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffa44666 0%, #006d8c99 100%);
  pointer-events: none;
  border-radius: 7px
}

.opng .bannerMain {
  font-size: 48px;
  line-height: 1.1;
  color: #FBFBFB;
  margin: 0 0 8px;
  font-weight: 700
}

.opng .bannerSub {
  font-size: 31px;
  line-height: 1.4;
  color: #FBFBFB;
  margin: 0 0 4px;
  font-weight: 300
}

.opng .bannerAccent {
  font-size: 23px;
  line-height: 1.4;
  color: #FFA446;
  margin: 0;
  font-weight: 400
}

.opng .outcome {
  padding: 56px 28px;
  background: #FFF;
  position: relative
}

.opng .outcome::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #FFA446;
  border-radius: 48px
}

.opng .outcome::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateX(-28px);
  width: 8px;
  height: 8px;
  background: #006D8C;
  border-radius: 48px
}

.opng .outcomeExtra {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateX(28px);
  width: 8px;
  height: 8px;
  background: #FFA446;
  border-radius: 48px;
  display: none;
}

.opng .outcomeWrap {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start
}

.opng .outcomeLeft {
  position: relative;
  padding: 0 0 0 28px
}

.opng .outcomeLeft::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 56px;
  background: linear-gradient(180deg, #FFA446 0%, #006D8C 100%)
}

.opng .outcomeHead {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 700
}

.opng .outcomeText {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0 0 16px
}

.opng .outcomeText:last-child {
  margin: 0
}

.opng .outcomeImg {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 2px 4px 28px 0 #006d8c1a;
  position: relative
}

.opng .outcomeImgWrap {
  position: relative
}

.opng .outcomeImgWrap::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 48px;
  height: 48px;
  background: repeating-linear-gradient(45deg, #FFA446, #FFA446 2px, transparent 2px, transparent 8px);
  opacity: .3;
  pointer-events: none;
  z-index: 1
}

.opng .limits {
  padding: 56px 28px;
  background: linear-gradient(180deg, #FBFBFB 0%, #FFF 100%);
  position: relative
}

.opng .limitsWrap {
  max-width: 920px;
  margin: 0 auto;
  text-align: right
}

.opng .limitsHead {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 28px;
  font-weight: 300
}

.opng .limitsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px
}

.opng .limitsCard {
  background: #FFF;
  padding: 28px;
  border: 3px solid #FFA446;
  border-radius: 7px;
  text-align: left;
  position: relative;
  transition: border-color .11s linear, box-shadow .11s linear
}

.opng .limitsCard::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent #006D8C transparent transparent
}

.opng .limitsCard:hover {
  border-color: #006D8C;
  box-shadow: 2px 4px 28px 0 #ffa4461a
}

.opng .limitsCardHead {
  font-size: 23px;
  line-height: 1.4;
  color: #2A2A2A;
  margin: 0 0 8px;
  font-weight: 700
}

.opng .limitsCardText {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0
}

.opng .process {
  padding: 56px 28px;
  background: #006D8C;
  position: relative;
  overflow: hidden
}

.opng .process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, #ffa4460d 19px, #ffa4460d 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, #ffa4460d 19px, #ffa4460d 20px);
  pointer-events: none
}

.opng .processWrap {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.opng .processHead {
  font-size: 40px;
  line-height: 1.1;
  color: #FBFBFB;
  margin: 0 0 28px;
  font-weight: 700;
  text-align: center
}

.opng .processContent {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start
}

.opng .processText {
  font-size: 16px;
  line-height: 1.7;
  color: #FBFBFB;
  margin: 0 0 16px
}

.opng .processText:last-child {
  margin: 0
}

.opng .processImg {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 7px;
  border: 4px solid #FFA446;
  box-shadow: 2px 10px 36px 0 #ffa44621
}

.opng .standing {
  padding: 56px 28px;
  background: #FFF;
  position: relative
}

.opng .standingWrap {
  max-width: 1120px;
  margin: 0 auto
}

.opng .standingTop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 0 28px;
  align-items: center
}

.opng .standingHead {
  font-size: 32px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0;
  font-weight: 700
}

.opng .standingImg {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 2px 2px 5px 0 #006d8c0f
}

.opng .standingList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px
}

.opng .standingItem {
  background: linear-gradient(90deg, #FBFBFB 0%, #FFF 100%);
  padding: 28px;
  border-left: 6px solid #FFA446;
  border-radius: 7px;
  transition: transform .09s ease-out, box-shadow .09s ease-out
}

.opng .standingItem:hover {
  transform: translateX(8px);
  box-shadow: 2px 4px 28px 0 #ffa4461a
}

.opng .standingItemHead {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 8px;
  font-weight: 700
}

.opng .standingItemText {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0
}

.opng .evidence {
  padding: 56px 28px;
  background: linear-gradient(180deg, #FFF 0%, #FBFBFB 100%);
  position: relative
}

.opng .evidenceWrap {
  max-width: 920px;
  margin: 0 auto;
  text-align: center
}

.opng .evidenceHead {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 300
}

.opng .evidenceIntro {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0 0 28px
}

.opng .evidenceMetrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.opng .evidenceMetric {
  background: #FFF;
  padding: 28px;
  border: 2px solid #006D8C;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  transition: border-color .13s ease-out
}

.opng .evidenceMetric::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #ffa4461a 50%, transparent 100%);
  transition: left .14s ease-out
}

.opng .evidenceMetric:hover::before {
  left: 100%
}

.opng .evidenceMetric:hover {
  border-color: #FFA446
}

.opng .evidenceNum {
  font-size: 58px;
  line-height: 1.1;
  color: #FFA446;
  margin: 0 0 8px;
  font-weight: 700;
  position: relative;
  z-index: 1
}

.opng .evidenceLabel {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0;
  font-weight: 400;
  position: relative;
  z-index: 1
}

.opng .pattern {
  padding: 56px 28px;
  background: #FBFBFB;
  position: relative
}

.opng .pattern::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #006D8C;
  border-radius: 48px
}

.opng .pattern::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateX(-28px);
  width: 8px;
  height: 8px;
  background: #FFA446;
  border-radius: 48px
}

.opng .patternExtra {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateX(28px);
  width: 8px;
  height: 8px;
  background: #006D8C;
  display: none;
  border-radius: 48px
}

.opng .patternWrap {
  max-width: 920px;
  margin: 0 auto
}

.opng .patternHead {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 28px;
  font-weight: 700
}

.opng .patternQuotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.opng .patternQuote {
  background: #FFF;
  padding: 28px;
  border-radius: 7px;
  box-shadow: 2px 2px 5px 0 #006d8c0f;
  position: relative;
  border-top: 4px solid #FFA446;
  transition: box-shadow .1s ease-out
}

.opng .patternQuote:hover {
  box-shadow: 2px 4px 28px 0 #006d8c1a
}

.opng .patternQuoteText {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0 0 16px;
  font-style: italic
}

.opng .patternQuoteName {
  font-size: 16px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 4px;
  font-weight: 700
}

.opng .patternQuoteRole {
  font-size: 15px;
  line-height: 1.4;
  color: #2A2A2A;
  margin: 0
}

@media (min-width: 768px) {
  .opng .banner {
    padding: 28px 56px
  }

  .opng .bannerImg {
    height: 240px;
    margin: 0 0 28px
  }

  .opng .bannerImgWrap {
    margin: 0 0 28px
  }

  .opng .bannerMain {
    font-size: 58px;
    margin: 0 0 16px
  }

  .opng .bannerSub {
    font-size: 31px;
    margin: 0 0 8px
  }

  .opng .outcome {
    padding: 56px
  }

  .opng .outcomeWrap {
    grid-template-columns: 1fr 1fr;
    gap: 56px
  }

  .opng .outcomeImg {
    height: 360px
  }

  .opng .limits {
    padding: 56px
  }

  .opng .limitsGrid {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }

  .opng .process {
    padding: 56px
  }

  .opng .processContent {
    grid-template-columns: 1fr 1fr;
    gap: 56px
  }

  .opng .processImg {
    height: 400px
  }

  .opng .standing {
    padding: 56px
  }

  .opng .standingTop {
    grid-template-columns: 2fr 1fr;
    gap: 56px
  }

  .opng .standingImg {
    height: 280px
  }

  .opng .standingList {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }

  .opng .evidence {
    padding: 56px
  }

  .opng .evidenceMetrics {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px
  }

  .opng .pattern {
    padding: 56px
  }

  .opng .patternQuotes {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media (min-width: 1024px) {
  .opng .limitsGrid {
    grid-template-columns: 1fr 1fr 1fr
  }

  .opng .standingList {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.learnprog {
  background: #FBFBFB;
  overflow-x: clip
}

.learnprog::selection {
  background: #ffa44626;
  color: inherit
}

.learnprog .topintro {
  position: relative;
  padding: 56px 16px;
  background: linear-gradient(135deg, #006D8C 0%, #006d8cd9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden
}

.learnprog .topintro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="4"/></filter><rect width="400" height="400" filter="url(%23n)" opacity="0.05"/></svg>');
  pointer-events: none;
  z-index: 1
}

.learnprog .topintro .imgwrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 0 28px;
  z-index: 2;
  animation: clipreveal .9s ease-out forwards;
  clip-path: inset(0 0 100% 0)
}

@keyframes clipreveal {
  to {
    clip-path: inset(0 0 0 0)
  }
}

.learnprog .topintro .imgwrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 7px;
  object-fit: cover;
  filter: brightness(0.75);
  mask-image: linear-gradient(to bottom, #0006 0%, #000f 100%);
  -webkit-mask-image: linear-gradient(to bottom, #0006 0%, #000f 100%)
}

.learnprog .topintro .txtzone {
  max-width: 820px;
  text-align: center;
  position: relative;
  z-index: 2
}

.learnprog .topintro .txtzone h1 {
  font-size: 43px;
  line-height: 1.1;
  color: #FBFBFB;
  margin: 0 0 16px;
  font-weight: 700
}

.learnprog .topintro .txtzone .subdesc {
  font-size: 16px;
  line-height: 1.7;
  color: #fbfbfbeb;
  margin: 0 0 28px
}

.learnprog .topintro .actionrow {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.learnprog .topintro .actionrow a {
  display: inline-block;
  padding: 16px 28px;
  text-decoration: none;
  font-size: 16px;
  border-radius: 48px;
  font-weight: 600;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  position: relative;
  overflow: hidden
}

.learnprog .topintro .actionrow a.primary {
  background: #FFA446;
  color: #006D8C;
  border: 3px solid #FFA446;
  box-shadow: 2px 4px 28px 0 #ffa4461a
}

.learnprog .topintro .actionrow a.primary::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #fff3;
  transition: right .15s ease-out;
  z-index: -1
}

.learnprog .topintro .actionrow a.primary:hover::before {
  right: 0
}

.learnprog .topintro .actionrow a.secondary {
  background: transparent;
  color: #FBFBFB;
  border: 3px solid #fbfbfb66
}

.learnprog .topintro .actionrow a.secondary::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #fbfbfb1a;
  transition: right .13s ease-out;
  z-index: -1
}

.learnprog .topintro .actionrow a.secondary:hover::before {
  right: 0
}

.learnprog .topintro .actionrow a:hover {
  transform: translateY(-2px);
  box-shadow: 2px 10px 36px 0 #ffa44621
}

.learnprog .catalogzone {
  padding: 56px 16px;
  background: #FBFBFB;
  position: relative
}

.learnprog .catalogzone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #FFA446 0%, #ffa44600 100%)
}

.learnprog .catalogzone .catcontent {
  max-width: 1366px;
  margin: 0 auto
}

.learnprog .catalogzone h2 {
  font-size: 31px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 8px;
  font-weight: 700
}

.learnprog .catalogzone .catintro {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0 0 56px;
  max-width: 740px
}

.learnprog .catalogzone .gridcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.learnprog .catalogzone .pcard {
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 2px 5px 0 #006d8c0f;
  transition: box-shadow .11s ease-out, transform .11s ease-out;
  display: flex;
  flex-direction: column;
  border: 2px solid #006d8c14
}

.learnprog .catalogzone .pcard:hover {
  box-shadow: 2px 10px 36px 0 #006d8c21;
  transform: translateY(-4px)
}

.learnprog .catalogzone .pcard .imgbox {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative
}

.learnprog .catalogzone .pcard .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .15s ease-out
}

.learnprog .catalogzone .pcard:hover .imgbox img {
  transform: scale(1.05)
}

.learnprog .catalogzone .pcard .imgbox .tagoverlay {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ffa446f2;
  color: #fff;
  padding: 4px 16px;
  border-radius: 48px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em
}

.learnprog .catalogzone .pcard .txtbox {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1
}

.learnprog .catalogzone .pcard .metatop {
  display: flex;
  gap: 16px;
  margin: 0 0 16px;
  flex-wrap: wrap;
  align-items: center
}

.learnprog .catalogzone .pcard .metatop .userlvl {
  font-size: 15px;
  color: #006D8C;
  font-weight: 600;
  padding: 4px 8px;
  background: #006d8c14;
  border-radius: 7px
}

.learnprog .catalogzone .pcard .metatop .readinfo {
  font-size: 15px;
  color: #6a6a6a
}

.learnprog .catalogzone .pcard h3 {
  font-size: 23px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 8px;
  font-weight: 700
}

.learnprog .catalogzone .pcard .shortdesc {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 16px;
  flex-grow: 1
}

.learnprog .catalogzone .pcard .pricerow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 2px dashed #006d8c26
}

.learnprog .catalogzone .pcard .pricezone .mainprice {
  font-size: 31px;
  line-height: 1.1;
  color: #FFA446;
  font-weight: 700;
  margin: 0 0 4px
}

.learnprog .catalogzone .pcard .pricezone .pricedesc {
  font-size: 15px;
  color: #6a6a6a;
  line-height: 1.4
}

.learnprog .catalogzone .pcard .pricezone .pricenote {
  font-size: 15px;
  color: #8a8a8a;
  font-style: italic;
  margin: 4px 0 0
}

.learnprog .catalogzone .pcard .durationinfo {
  font-size: 16px;
  color: #006D8C;
  font-weight: 600;
  text-align: right
}

.learnprog .catalogzone .pcard .btnlink {
  display: inline-block;
  padding: 16px 28px;
  background: transparent;
  color: #006D8C;
  border: 3px solid #006D8C;
  border-radius: 48px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: background .12s ease-out, color .12s ease-out;
  position: relative;
  overflow: hidden
}

.learnprog .catalogzone .pcard .btnlink::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #006D8C;
  transition: right .14s ease-out;
  z-index: 0
}

.learnprog .catalogzone .pcard .btnlink:hover::before {
  right: 0
}

.learnprog .catalogzone .pcard .btnlink span {
  position: relative;
  z-index: 1
}

.learnprog .catalogzone .pcard .btnlink:hover {
  color: #fff
}

.learnprog .valuezone {
  padding: 56px 16px;
  background: radial-gradient(ellipse at 30% 40%, #ffa44614 0%, #006d8c0d 50%, #fbfbfbff 100%);
  position: relative
}

.learnprog .valuezone .valcontent {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px
}

.learnprog .valuezone h2 {
  font-size: 31px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 700;
  text-align: right
}

.learnprog .valuezone .twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  position: relative
}

.learnprog .valuezone .twocol::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #006d8c33 0%, #ffa44633 100%);
  display: none
}

.learnprog .valuezone .colitem {
  padding: 28px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 2px 2px 5px 0 #ffa4460f;
  border: 2px solid #ffa4461a
}

.learnprog .valuezone .colitem h3 {
  font-size: 23px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 16px;
  font-weight: 300
}

.learnprog .valuezone .colitem p {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 16px
}

.learnprog .valuezone .colitem p:last-child {
  margin: 0
}

.learnprog .valuezone .colitem .highlight {
  color: #FFA446;
  font-weight: 600
}

.learnprog .statszone {
  padding: 56px 16px;
  background: #fff;
  position: relative;
  overflow: hidden
}

.learnprog .statszone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFA446 0%, #ffa44600 100%)
}

.learnprog .statszone .statcontent {
  max-width: 1366px;
  margin: 0 auto
}

.learnprog .statszone h2 {
  font-size: 31px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 28px;
  font-weight: 700
}

.learnprog .statszone .statgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.learnprog .statszone .statcard {
  background: linear-gradient(135deg, #FBFBFB 0%, #fff 100%);
  border-radius: 7px;
  padding: 28px;
  box-shadow: 2px 4px 28px 0 #006d8c1a;
  border: 3px solid #006D8C;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative
}

.learnprog .statszone .statcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #006d8c33;
  transform: translateX(-50%)
}

.learnprog .statszone .statcard .metricbox {
  text-align: center
}

.learnprog .statszone .statcard .metricbox .num {
  font-size: 43px;
  line-height: 1.1;
  color: #FFA446;
  font-weight: 700;
  margin: 0 0 8px
}

.learnprog .statszone .statcard .metricbox .label {
  font-size: 16px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em
}

.learnprog .pathzone {
  padding: 56px 16px;
  background: #FBFBFB;
  position: relative
}

.learnprog .pathzone .pathcontent {
  max-width: 1366px;
  margin: 0 auto;
  position: relative
}

.learnprog .pathzone h2 {
  font-size: 31px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 56px;
  font-weight: 700
}

.learnprog .pathzone .steplist {
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative
}

.learnprog .pathzone .steplist::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  width: 3px;
  height: calc(100% - 56px);
  background: repeating-linear-gradient(to bottom, #FFA446 0px, #FFA446 8px, transparent 8px, transparent 16px);
  display: none
}

.learnprog .pathzone .stepitem {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  animation: fadeup .8s ease-out forwards;
  opacity: 0
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.learnprog .pathzone .stepitem:nth-child(1) {
  animation-delay: .1s
}

.learnprog .pathzone .stepitem:nth-child(2) {
  animation-delay: .2s
}

.learnprog .pathzone .stepitem:nth-child(3) {
  animation-delay: .3s
}

.learnprog .pathzone .stepitem .stepnum {
  width: 56px;
  height: 56px;
  border-radius: 48px;
  background: #FFA446;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 2px 4px 28px 0 #ffa4461a inset 2px 2px 4px 0 #ffffff4d inset -2px -2px 4px 0 #0000001a
}

.learnprog .pathzone .stepitem .steptxt {
  flex-grow: 1
}

.learnprog .pathzone .stepitem h3 {
  font-size: 23px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 8px;
  font-weight: 700
}

.learnprog .pathzone .stepitem p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

@media (min-width: 768px) {
  .learnprog .catalogzone .gridcards {
    grid-template-columns: repeat(2, 1fr)
  }

  .learnprog .valuezone .twocol {
    grid-template-columns: 1fr 1fr
  }

  .learnprog .valuezone .twocol::after {
    display: block
  }

  .learnprog .statszone .statgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .learnprog .pathzone .steplist::before {
    display: block
  }
}

@media (min-width: 1024px) {
  .learnprog .topintro {
    padding: 56px 28px
  }

  .learnprog .catalogzone {
    padding: 56px 28px
  }

  .learnprog .catalogzone .gridcards {
    grid-template-columns: repeat(3, 1fr)
  }

  .learnprog .valuezone {
    padding: 56px 28px
  }

  .learnprog .statszone {
    padding: 56px 28px
  }

  .learnprog .pathzone {
    padding: 56px 28px
  }
}

@media (min-width: 1280px) {
  .learnprog .topintro .txtzone h1 {
    font-size: 58px
  }
}

.kontaktseite {
  background: #FBFBFB;
  overflow-x: clip
}

.kontaktseite * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.kontaktseite .erstesektion {
  max-width: 1366px;
  margin: 0 auto;
  padding: 56px 28px;
  position: relative;
  background: radial-gradient(circle at 95% 8%, #ffa44624 0%, #fbfbfb00 48%);
  overflow: hidden
}

.kontaktseite .erstesektion::before {
  content: '';
  position: absolute;
  top: 28px;
  right: 28px;
  width: 84px;
  height: 2px;
  background: #FFA446
}

.kontaktseite .erstesektion::after {
  content: '';
  position: absolute;
  top: 28px;
  right: 28px;
  width: 2px;
  height: 84px;
  background: #006D8C
}

.kontaktseite .kopfzeile {
  max-width: 780px;
  margin-bottom: 56px;
  animation: enthuellung .9s ease-out forwards;
  clip-path: inset(0 0 100% 0)
}

@keyframes enthuellung {
  to {
    clip-path: inset(0 0 0 0)
  }
}

.kontaktseite .haupttitel {
  font-size: 58px;
  line-height: 1.1;
  color: #006D8C;
  margin-bottom: 28px;
  font-weight: 700
}

.kontaktseite .untertextblock {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a
}

.kontaktseite .untertextblock p {
  margin-bottom: 16px
}

.kontaktseite .untertextblock p:last-child {
  margin-bottom: 0
}

.kontaktseite .bildbereich {
  margin-top: 56px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 4px 28px 0 #006d8c1a
}

.kontaktseite .bildbereich img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%)
}

.kontaktseite .formularsektion {
  max-width: 1366px;
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  position: relative
}

.kontaktseite .formularsektion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 56px);
  height: 1px;
  background: repeating-linear-gradient(to right, #FFA446 0px, #FFA446 12px, transparent 12px, transparent 16px, #006D8C 16px, #006D8C 32px, transparent 32px, transparent 36px)
}

.kontaktseite .kontaktinformationen {
  animation: enthuellung 1.1s ease-out .15s forwards;
  clip-path: inset(0 0 100% 0)
}

.kontaktseite .infotitel {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin-bottom: 28px;
  font-weight: 300
}

.kontaktseite .detailliste {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.kontaktseite .detailelement {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-radius: 7px;
  border: 3px solid #FFA446;
  position: relative;
  overflow: hidden;
  transition: border-color .12s ease-out
}

.kontaktseite .detailelement::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(78deg, #ffa4460a 0%, #006d8c0f 100%);
  transition: right .14s ease-out;
  z-index: 1
}

.kontaktseite .detailelement:hover::before {
  right: 0
}

.kontaktseite .detailelement:hover {
  border-color: #006D8C
}

.kontaktseite .detailetikett {
  font-size: 15px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  z-index: 2
}

.kontaktseite .detailwert {
  font-size: 23px;
  line-height: 1.4;
  color: #2a2a2a;
  position: relative;
  z-index: 2;
  word-break: break-word;
  overflow-wrap: anywhere
}

.kontaktseite .detailwert a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block
}

.kontaktseite .detailwert a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FFA446;
  transition: width .11s linear
}

.kontaktseite .detailwert a:hover::after {
  width: 100%
}

.kontaktseite .formularblock {
  animation: enthuellung 1.2s ease-out .25s forwards;
  clip-path: inset(0 0 100% 0)
}

.kontaktseite .formulartitel {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin-bottom: 28px;
  font-weight: 700;
  text-align: right
}

.kontaktseite .formularinhalt {
  background: #fff;
  padding: 28px;
  border-radius: 7px;
  box-shadow: 2px 10px 36px 0 #ffa44621
}

.kontaktseite .formularinhalt form {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.kontaktseite .namenszeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.kontaktseite .feldgruppe {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.kontaktseite .feldgruppe label {
  font-size: 15px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 700
}

.kontaktseite .feldgruppe input,
.kontaktseite .feldgruppe select {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  line-height: 1.4;
  color: #2a2a2a;
  background: #FBFBFB;
  border: 2px solid #FFA446;
  border-radius: 7px;
  transition: border-color .09s ease-out, background .09s ease-out;
  outline: none
}

.kontaktseite .feldgruppe input::placeholder {
  color: #2a2a2a66;
  transition: opacity .1s linear
}

.kontaktseite .feldgruppe input:focus::placeholder {
  opacity: 0
}

.kontaktseite .feldgruppe input:focus,
.kontaktseite .feldgruppe select:focus {
  border-color: #006D8C;
  background: #fff
}

.kontaktseite .feldgruppe select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23006D8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
  cursor: pointer
}

.kontaktseite .datenschutzblock {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #ffa4460d;
  border-radius: 7px;
  border: 1px solid #ffa44633
}

.kontaktseite .datenschutzblock input[type="checkbox"] {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #FFA446
}

.kontaktseite .datenschutztext {
  font-size: 15p;
  word-break: break-word;
  overflow-wrap: anywherex;
  line-height: 1.7;
  color: #2a2a2a
}

.kontaktseite .datenschutztext a {
  color: #006D8C;
  text-decoration: none;
  position: relative;
  font-weight: 700
}

.kontaktseite .datenschutztext a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #006D8C
}

.kontaktseite .sendeknopf {
  padding: 16px 56px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #006D8C;
  background: #fff;
  border: 4px solid #FFA446;
  border-radius: 48px;
  cursor: pointer;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  transition: color .13s ease-out, border-color .13s ease-out
}

.kontaktseite .sendeknopf::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #FFA446;
  transition: right .15s ease-out;
  z-index: -1
}

.kontaktseite .sendeknopf:hover::before {
  right: 0
}

.kontaktseite .sendeknopf:hover {
  color: #fff;
  border-color: #006D8C
}

.kontaktseite .sendeknopf:active {
  transform: scale(0.97)
}

@media (max-width: 1024px) {
  .kontaktseite .haupttitel {
    font-size: 43px
  }

  .kontaktseite .infotitel,
  .kontaktseite .formulartitel {
    font-size: 31px
  }

  .kontaktseite .detailwert {
    font-size: 16px
  }

  .kontaktseite .bildbereich img {
    height: 320px
  }
}

@media (max-width: 768px) {

  .kontaktseite .erstesektion,
  .kontaktseite .formularsektion {
    padding: 28px 16px
  }

  .kontaktseite .kopfzeile {
    margin-bottom: 28px
  }

  .kontaktseite .haupttitel {
    font-size: 31px;
    margin-bottom: 16px
  }

  .kontaktseite .infotitel,
  .kontaktseite .formulartitel {
    font-size: 23px;
    margin-bottom: 16px
  }

  .kontaktseite .formulartitel {
    text-align: left
  }

  .kontaktseite .namenszeile {
    grid-template-columns: 1fr
  }

  .kontaktseite .formularinhalt {
    padding: 16px
  }

  .kontaktseite .bildbereich img {
    height: 240px
  }

  .kontaktseite .sendeknopf {
    width: 100%;
    text-align: center;
    padding: 16px 28px
  }

  .kontaktseite .detailliste {
    gap: 16px
  }

  .kontaktseite .formularsektion {
    gap: 28px
  }
}

@media (max-width: 480px) {
  .kontaktseite .haupttitel {
    font-size: 23px
  }

  .kontaktseite .untertextblock {
    font-size: 15px
  }

  .kontaktseite .bildbereich img {
    height: 180px
  }

  .kontaktseite .erstesektion::before,
  .kontaktseite .erstesektion::after {
    display: none
  }
}

@media (min-width: 1024px) {
  .kontaktseite .formularsektion {
    grid-template-columns: 380px 1fr;
    gap: 56px
  }
}

::selection {
  background: #ffa44626;
  color: #2a2a2a
}

.aboutinf {
  background: #FBFBFB;
  overflow-x: clip
}

.aboutinf * {
  box-sizing: border-box
}

.aboutinf .splithro {
  display: flex;
  min-height: 520px;
  position: relative;
  padding-top: 56px;
  padding-bottom: 28px;
  overflow: hidden
}

.aboutinf .splithro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(167deg, #FFA446 0%, #FBFBFB 100%);
  z-index: 1
}

.aboutinf .splithro::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  background: #006D8C;
  z-index: 1
}

.aboutinf .splitcont {
  max-width: 1366px;
  margin: 0 auto;
  width: 100%;
  padding: 0 28px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.aboutinf .splittext {
  max-width: 720px
}

.aboutinf .splittitle {
  font-size: 58px;
  line-height: 1.1;
  color: #040404;
  margin: 0 0 16px;
  font-weight: 700
}

.aboutinf .splitdesc {
  font-size: 23px;
  line-height: 1.4;
  color: #040404eb;
  margin: 0
}

.aboutinf .patdeco {
  position: absolute;
  right: 8%;
  top: 56px;
  width: 180px;
  height: 180px;
  z-index: 3;
  opacity: .15
}

.aboutinf .patcircle {
  width: 16px;
  height: 16px;
  border: 2px solid #FBFBFB;
  border-radius: 48px;
  position: absolute
}

.aboutinf .patcircle:nth-child(1) {
  left: 0;
  top: 0
}

.aboutinf .patcircle:nth-child(2) {
  left: 40px;
  top: 0
}

.aboutinf .patcircle:nth-child(3) {
  left: 80px;
  top: 0
}

.aboutinf .patcircle:nth-child(4) {
  left: 120px;
  top: 0
}

.aboutinf .patcircle:nth-child(5) {
  left: 0;
  top: 40px
}

.aboutinf .patcircle:nth-child(6) {
  left: 40px;
  top: 40px
}

.aboutinf .patcircle:nth-child(7) {
  left: 80px;
  top: 40px
}

.aboutinf .patcircle:nth-child(8) {
  left: 120px;
  top: 40px
}

.aboutinf .patcircle:nth-child(9) {
  left: 0;
  top: 80px
}

.aboutinf .patcircle:nth-child(10) {
  left: 40px;
  top: 80px
}

.aboutinf .patcircle:nth-child(11) {
  left: 80px;
  top: 80px
}

.aboutinf .patcircle:nth-child(12) {
  left: 120px;
  top: 80px
}

.aboutinf .metricsec {
  background: #FBFBFB;
  padding: 56px 28px;
  position: relative
}

.aboutinf .metricwrap {
  max-width: 1366px;
  margin: 0 auto;
  background: #fff;
  border: 4px solid #FFA446;
  border-radius: 7px;
  padding: 56px;
  box-shadow: 2px 10px 36px 0 #ffa44621;
  position: relative
}

.aboutinf .metricwrap::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #006d8c33;
  border-radius: 7px;
  pointer-events: none
}

.aboutinf .metrictitle {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 56px;
  font-weight: 700;
  text-align: center
}

.aboutinf .metricgrid {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  gap: 28px;
  align-items: start
}

.aboutinf .metriclabel {
  font-size: 15px;
  line-height: 1.4;
  color: #006D8C;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  min-height: 80px
}

.aboutinf .metricbody {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  min-height: 80px;
  display: flex;
  align-items: center
}

.aboutinf .metricbody p {
  margin: 0
}

.aboutinf .metricicon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  flex-shrink: 0
}

.aboutinf .metricicon svg {
  width: 100%;
  height: 100%;
  fill: #FFA446
}

.aboutinf .storysec {
  background: #fff;
  padding: 56px 28px;
  position: relative;
  clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%);
  margin-top: -28px
}

.aboutinf .storywrap {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start
}

.aboutinf .storyleft {
  position: relative
}

.aboutinf .storyimg {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 2px 4px 28px 0 #006d8c1a
}

.aboutinf .storyline {
  position: absolute;
  top: 240px;
  right: -28px;
  width: 56px;
  height: 2px;
  background: repeating-linear-gradient(to right, #FFA446 0px, #FFA446 8px, transparent 8px, transparent 16px)
}

.aboutinf .storyright {
  padding-top: 28px
}

.aboutinf .storytitle {
  font-size: 31px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 28px;
  font-weight: 300
}

.aboutinf .storypara {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 16px
}

.aboutinf .storypara:last-child {
  margin-bottom: 0
}

.aboutinf .storyaccent {
  font-weight: 700;
  color: #FFA446
}

.aboutinf .valuesec {
  background: linear-gradient(172deg, #FBFBFB 0%, #fbfbfb00 18%, #fbfbfb00 82%, #FBFBFB 100%), #fff;
  padding: 56px 28px;
  position: relative
}

.aboutinf .valuewrap {
  max-width: 1366px;
  margin: 0 auto
}

.aboutinf .valuetitle {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 56px;
  font-weight: 700;
  text-align: right
}

.aboutinf .valuegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.aboutinf .valuecard {
  background: #fff;
  border: 3px solid #006D8C;
  border-radius: 7px;
  padding: 28px;
  position: relative;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  box-shadow: 2px 2px 5px 0 #006d8c0f
}

.aboutinf .valuecard:hover {
  transform: translateY(-4px);
  box-shadow: 2px 10px 36px 0 #006d8c21
}

.aboutinf .valuecard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffa4460d;
  transition: width .15s ease-out;
  border-radius: 7px;
  z-index: 1
}

.aboutinf .valuecard:hover::before {
  width: 100%
}

.aboutinf .valuecardinner {
  position: relative;
  z-index: 2
}

.aboutinf .valueimg {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 7px;
  margin-bottom: 16px
}

.aboutinf .valuehead {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 8px;
  font-weight: 700
}

.aboutinf .valuetext {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin: 0
}

.aboutinf .checksec {
  background: #006D8C;
  padding: 56px 28px;
  position: relative;
  overflow: hidden
}

.aboutinf .checkwrap {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px;
  align-items: center
}

.aboutinf .checkleft {
  padding-right: 56px
}

.aboutinf .checktitle {
  font-size: 43px;
  line-height: 1.1;
  color: #FBFBFB;
  margin: 0 0 28px;
  font-weight: 700
}

.aboutinf .checklist {
  list-style: none;
  padding: 0;
  margin: 0
}

.aboutinf .checkitem {
  display: flex;
  align-items: start;
  margin-bottom: 16px;
  position: relative
}

.aboutinf .checkitem:last-child {
  margin-bottom: 0
}

.aboutinf .checksvg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 16px;
  margin-top: 4px
}

.aboutinf .checksvg svg {
  width: 100%;
  height: 100%
}

.aboutinf .checktext {
  font-size: 16px;
  line-height: 1.7;
  color: #FBFBFB;
  margin: 0
}

.aboutinf .checkright {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.aboutinf .checkimg {
  width: 100%;
  height: 232px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 2px 4px 28px 0 #ffa4461a
}

.aboutinf .flickerbg {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 48px;
  background: #ffa44626;
  pointer-events: none;
  animation: flicker1 3.2s ease-in-out infinite
}

.aboutinf .flickerbg:nth-child(1) {
  top: 10%;
  left: 5%;
  animation-delay: 0s
}

.aboutinf .flickerbg:nth-child(2) {
  top: 60%;
  right: 8%;
  animation-delay: 1.1s;
  animation-name: flicker2
}

.aboutinf .flickerbg:nth-child(3) {
  bottom: 15%;
  left: 15%;
  animation-delay: 2.3s;
  animation-name: flicker3
}

@keyframes flicker1 {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.8)
  }

  50% {
    opacity: 1;
    transform: scale(1.2)
  }
}

@keyframes flicker2 {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.9)
  }

  45% {
    opacity: 1;
    transform: scale(1.1)
  }
}

@keyframes flicker3 {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.7)
  }

  55% {
    opacity: 1;
    transform: scale(1.3)
  }
}

@media (max-width: 1280px) {
  .aboutinf .metricgrid {
    grid-template-columns: 120px 1fr 120px 1fr;
    gap: 16px
  }

  .aboutinf .storywrap {
    grid-template-columns: 320px 1fr;
    gap: 28px
  }

  .aboutinf .checkwrap {
    grid-template-columns: 1fr 400px;
    gap: 28px
  }
}

@media (max-width: 1024px) {
  .aboutinf .splittitle {
    font-size: 43px
  }

  .aboutinf .splitdesc {
    font-size: 16px
  }

  .aboutinf .metrictitle {
    font-size: 31px;
    margin-bottom: 28px
  }

  .aboutinf .metricgrid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .aboutinf .metriclabel,
  .aboutinf .metricbody {
    min-height: auto
  }

  .aboutinf .storywrap {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .aboutinf .storyline {
    display: none
  }

  .aboutinf .valuetitle {
    font-size: 31px;
    text-align: left
  }

  .aboutinf .valuegrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .aboutinf .checkwrap {
    grid-template-columns: 1fr
  }

  .aboutinf .checkleft {
    padding-right: 0
  }
}

@media (max-width: 768px) {
  .aboutinf .splithro {
    min-height: 420px;
    padding-top: 28px
  }

  .aboutinf .splithro::before {
    width: 100%
  }

  .aboutinf .splithro::after {
    width: 0
  }

  .aboutinf .splittitle {
    font-size: 31px
  }

  .aboutinf .patdeco {
    width: 120px;
    height: 120px;
    right: 4%
  }

  .aboutinf .patcircle {
    width: 12px;
    height: 12px
  }

  .aboutinf .patcircle:nth-child(2) {
    left: 30px
  }

  .aboutinf .patcircle:nth-child(3) {
    left: 60px
  }

  .aboutinf .patcircle:nth-child(4) {
    left: 90px
  }

  .aboutinf .patcircle:nth-child(5) {
    top: 30px
  }

  .aboutinf .patcircle:nth-child(6) {
    left: 30px;
    top: 30px
  }

  .aboutinf .patcircle:nth-child(7) {
    left: 60px;
    top: 30px
  }

  .aboutinf .patcircle:nth-child(8) {
    left: 90px;
    top: 30px
  }

  .aboutinf .patcircle:nth-child(9) {
    top: 60px
  }

  .aboutinf .patcircle:nth-child(10) {
    left: 30px;
    top: 60px
  }

  .aboutinf .patcircle:nth-child(11) {
    left: 60px;
    top: 60px
  }

  .aboutinf .patcircle:nth-child(12) {
    left: 90px;
    top: 60px
  }

  .aboutinf .metricwrap {
    padding: 28px
  }

  .aboutinf .metrictitle {
    font-size: 23px
  }

  .aboutinf .storyimg {
    height: 320px
  }

  .aboutinf .valuegrid {
    grid-template-columns: 1fr
  }

  .aboutinf .checktitle {
    font-size: 31px
  }

  .aboutinf .checkright {
    grid-template-columns: 1fr
  }
}

@media (max-width: 480px) {
  .aboutinf .splithro {
    padding: 28px 16px;
    min-height: 360px
  }

  .aboutinf .splitcont {
    padding: 0 16px
  }

  .aboutinf .splittitle {
    font-size: 23px
  }

  .aboutinf .splitdesc {
    font-size: 15px
  }

  .aboutinf .metricsec {
    padding: 28px 16px
  }

  .aboutinf .metricwrap {
    padding: 16px
  }

  .aboutinf .metrictitle {
    margin-bottom: 16px
  }

  .aboutinf .storysec {
    padding: 28px 16px
  }

  .aboutinf .storyimg {
    height: 280px
  }

  .aboutinf .valuesec {
    padding: 28px 16px
  }

  .aboutinf .valuetitle {
    margin-bottom: 28px
  }

  .aboutinf .checksec {
    padding: 28px 16px
  }

  .terms-block-v h1 {
    font-size: 36px !important;
  }

  .terms-block-v h2 {
    font-size: 30px !important;
  }
}

.aboutinf ::selection {
  background: #ffa4462e;
  color: inherit
}

.aboutinf input::placeholder,
.aboutinf textarea::placeholder {
  transition: opacity .12s ease-out
}

.aboutinf input:focus::placeholder,
.aboutinf textarea:focus::placeholder {
  opacity: 0
}

.successWrap {
  max-width: 1366px;
  margin: 0 auto;
  padding: 56px 16px;
  background: linear-gradient(87deg, #FBFBFB 0%, #ffa44614 100%)
}

.successWrap .confirmBlock {
  background: #fff;
  border: 3px solid #FFA446;
  border-radius: 7px;
  padding: 56px 28px;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
  box-shadow: 2px 4px 28px 0 #ffa4461a
}

.successWrap .iconCircle {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, #FFA446 0%, #FF8B1A 100%);
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 5px 0 #ffa4460f
}

.successWrap .iconCircle svg {
  width: 52px;
  height: 52px;
  stroke: #fff;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.successWrap .mainHead {
  font-size: 43px;
  line-height: 1.1;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 700
}

.successWrap .subHead {
  font-size: 23px;
  line-height: 1.4;
  color: #333;
  margin: 0 0 28px;
  font-weight: 400
}

.successWrap .detailText {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 8px
}

.successWrap .detailText.emphasis {
  font-weight: 600;
  color: #006D8C
}

.successWrap .infoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 56px 0
}

.successWrap .infoCard {
  background: #fff;
  border: 2px solid #006D8C;
  border-radius: 7px;
  padding: 28px;
  text-align: left;
  box-shadow: 2px 2px 5px 0 #006d8c0f;
  transition: border-color .12s ease-out
}

.successWrap .infoCard:hover {
  border-color: #FFA446
}

.successWrap .cardTitle {
  font-size: 23px;
  line-height: 1.4;
  color: #006D8C;
  margin: 0 0 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 16px
}

.successWrap .cardIcon {
  width: 32px;
  height: 32px;
  background: #FFA446;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.successWrap .cardIcon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 2;
  fill: none
}

.successWrap .cardText {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

.successWrap .actionArea {
  text-align: center;
  padding: 28px;
  background: #FBFBFB;
  border-radius: 7px;
  border: 1px solid #006d8c26
}

.successWrap .backBtn {
  display: inline-block;
  padding: 16px 56px;
  background: #fff;
  border: 3px solid #006D8C;
  border-radius: 7px;
  color: #006D8C;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .11s ease-out, color .11s ease-out;
  position: relative;
  overflow: hidden
}

.successWrap .backBtn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #006D8C;
  transition: right .14s ease-out;
  z-index: 0
}

.successWrap .backBtn:hover::before {
  right: 0
}

.successWrap .backBtn span {
  position: relative;
  z-index: 1
}

.successWrap .backBtn:hover {
  color: #fff
}

.successWrap .contactList {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.successWrap .contactItem {
  font-size: 16px;
  line-height: 1.4;
  color: #4a4a4a;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center
}

.successWrap .contactItem svg {
  width: 20px;
  height: 20px;
  stroke: #FFA446;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0
}

.successWrap .contactLink {
  color: #006D8C;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color .09s linear
}

.successWrap .contactLink::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFA446;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .13s ease-out
}

.successWrap .contactLink:hover {
  color: #FFA446
}

.successWrap .contactLink:hover::after {
  transform: scaleX(1);
  transform-origin: left
}

@media (min-width: 768px) {
  .successWrap {
    padding: 56px 28px
  }

  .successWrap .confirmBlock {
    padding: 56px
  }

  .successWrap .infoGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
  }

  .successWrap .contactList {
    flex-direction: row;
    justify-content: center;
    gap: 28px
  }
}

@media (min-width: 1024px) {
  .successWrap .iconCircle {
    width: 112px;
    height: 112px
  }

  .successWrap .iconCircle svg {
    width: 64px;
    height: 64px
  }

  .successWrap .mainHead {
    font-size: 58px
  }

  .successWrap .subHead {
    font-size: 31px
  }
}