.elementor-kit-481{--e-global-color-primary:#0E2A47;--e-global-color-secondary:#2C6FA8;--e-global-color-text:rgba(14,42,71,0.72);--e-global-color-accent:#8FBEE6;--e-global-color-e820b42:#FFFFFF;--e-global-color-a997132:#000000;--e-global-color-da87f4e:#E9F0F7;--e-global-color-7bfe347:#F3F7FB;--e-global-color-498d5c3:#16385C;--e-global-color-ca23793:#C2410C;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-size:52px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:-2.4px;--e-global-typography-secondary-font-family:"IBM Plex Mono";--e-global-typography-secondary-font-size:11px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1em;--e-global-typography-secondary-letter-spacing:1.6px;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Georgia";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1em;background-color:#E9F0F7;}.elementor-kit-481 e-page-transition{background-color:#FFBC7D;}.elementor-kit-481 h2{font-family:"Montserrat", Sans-serif;font-weight:800;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== MathPi — Elementor polish layer =====================================
   Paste into: Elementor > Site Settings > Custom CSS  (Elementor Pro)
   Covers only the handful of effects Elementor has no native control for.
   All layout, spacing, colour and type is set on the widgets themselves.
   ========================================================================= */

/* --- 1. Hero blueprint grid + centre rule ------------------------------- */
.mp-hero { position: relative; }
.mp-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(44,111,168,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,111,168,0.09) 1px, transparent 1px);
  background-size: 40px 40px;
}
.mp-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: rgba(44,111,168,0.18); pointer-events: none; z-index: 0;
}
.mp-hero > .e-con-inner, .mp-hero > .elementor-widget-wrap { position: relative; z-index: 1; }

/* --- 2. Floating equations (decorative, desktop only) ------------------- */
.mp-eq { position: absolute !important; white-space: nowrap; z-index: 1;
         pointer-events: none; width: auto !important; }
.mp-eq p { margin: 0; }
.mp-eq-1 { top: 14%; right: 3%; }
.mp-eq-2 { top: 27%; right: 9%; }
.mp-eq-3 { top: 39%; right: 3.5%; }
.mp-eq-4 { top: 51%; right: 10%; }
.mp-eq-5 { top: 63%; right: 4%; }
.mp-eq-6 { top: 75%; right: 11%; }
.mp-eq-7 { top: 87%; right: 5%; }
@media (max-width: 1200px) { .mp-eq { display: none !important; } }

/* --- 3. Hero headline outline treatment -------------------------------- */
.mp-stroke { color: #2C6FA8; -webkit-text-stroke: 2px #2C6FA8; }
@media (max-width: 767px) { .mp-stroke { -webkit-text-stroke-width: 1px; } }

/* Equation strip sits on one wrapping line */
.mp-eq-strip .elementor-widget-text-editor p { margin: 0; white-space: nowrap; }

/* --- 4. Joined button pair (hero) -------------------------------------- */
.mp-btn-joined .elementor-button { border-left: none !important; }
@media (max-width: 767px) {
  .mp-btn-joined .elementor-button { border-left: 2px solid #0E2A47 !important; }
}

/* --- 5. Header ---------------------------------------------------------- */
.mp-header .mp-nav-link .elementor-button {
  background: transparent; padding: 0; border: none; transition: color .2s;
}
.mp-cta-flush .elementor-button { height: 100%; display: flex; align-items: center; }
@media (max-width: 767px) {
  .mp-cta-flush .elementor-button { width: 100%; justify-content: center; padding: 16px 26px; }
}

/* --- 6. Course cards: hover flips the whole card to blue ---------------- */
.mp-course-card { transition: background .25s, transform .35s cubic-bezier(.2,.8,.3,1); }
.mp-course-card:hover { transform: perspective(900px) translateY(-6px) rotateX(-5deg); }
.mp-course-card:hover .elementor-heading-title,
.mp-course-card:hover .elementor-widget-heading .elementor-heading-title a { color: #E9F0F7 !important; }
.mp-course-card .mp-glyph {
  position: absolute; top: 20px; right: 24px; z-index: 0; pointer-events: none;
}
.mp-course-card:hover .mp-glyph .elementor-heading-title { color: rgba(233,240,247,0.28) !important; }
.mp-course-card { position: relative; overflow: hidden; }
.mp-textlink .elementor-button { background: transparent; padding-left: 0; padding-right: 0; }

/* --- 7. University chips ----------------------------------------------- */
.mp-uni-chip:hover .elementor-heading-title { color: #E9F0F7 !important; }

/* --- 8. Teacher photo slab --------------------------------------------- */
.mp-photo-slab { position: relative; }
.mp-teacher-photo, .mp-teacher-photo .elementor-widget-container,
.mp-teacher-photo figure, .mp-teacher-photo a { height: 100%; }
.mp-teacher-photo img {
  width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.mp-photo-badge { position: absolute; bottom: 0; left: 0; z-index: 2; }

/* --- 9. Registration form: radios styled as chips ---------------------- */
.mp-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-form .elementor-field-subgroup .elementor-field-option { position: relative; margin: 0; }
.mp-form .elementor-field-subgroup input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.mp-form .elementor-field-subgroup input[type="radio"] + label {
  display: inline-block; cursor: pointer; padding: 13px 17px;
  border: 1.5px solid rgba(14,42,71,0.3); color: #0E2A47;
  font-family: "IBM Plex Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 1.2px;
  transition: background .2s, color .2s, border-color .2s;
}
.mp-form .elementor-field-subgroup input[type="radio"]:checked + label {
  background: #2C6FA8; border-color: #2C6FA8; color: #E9F0F7;
}
.mp-form .elementor-field-subgroup input[type="radio"]:focus-visible + label {
  outline: 2px solid #0E2A47; outline-offset: 2px;
}
.mp-form .elementor-field-group > label { text-transform: uppercase; }
.mp-form .e-form__buttons { gap: 8px; }
.mp-form .e-form__indicators__indicator--progress_bar { background: rgba(14,42,71,0.18); }
.mp-form .e-form__indicators__indicator__progress__meter { background: #2C6FA8; }
.mp-form .elementor-field { border-radius: 0 !important; }

/* --- 10. Testimonials --------------------------------------------------- */
.mp-testimonial { transition: background .25s; }

/* --- 11. Entrance motion: restore the original 3D keyframes ------------
   Elementor triggers entrance animations on scroll and adds `.animated`.
   We keep Elementor's trigger and swap only the keyframes, so the flip and
   slab motion from the original design is reproduced exactly.
   Change the entrance animation in the widget panel to disable per-element. */
@keyframes mp-flip {
  from { opacity: 0; transform: perspective(1100px) rotateX(-64deg) translateY(70px); }
  to   { opacity: 1; transform: perspective(1100px) rotateX(0deg) translateY(0); }
}
@keyframes mp-slabL {
  from { opacity: 0; transform: perspective(1200px) rotateY(34deg) translateX(-70px); }
  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg) translateX(0); }
}
@keyframes mp-slabR {
  from { opacity: 0; transform: perspective(1200px) rotateY(-34deg) translateX(70px); }
  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg) translateX(0); }
}
.mp-anim-flip.animated   { animation-name: mp-flip   !important; transform-origin: 50% 100%; animation-duration: .9s; }
.mp-anim-slab-l.animated { animation-name: mp-slabL  !important; animation-duration: 1s; }
.mp-anim-slab-r.animated { animation-name: mp-slabR  !important; animation-duration: 1s; }

/* --- 12. Exact monospace stack from the original design ----------------
   The widgets carry IBM Plex Mono so Elementor's panel shows a real family,
   but the rendered stack below is byte-identical to the source file. Delete
   this block if you'd rather ship the webfont. */
.mp-mono, .mp-mono *,
.mp-form .elementor-field-group > label,
.mp-form .elementor-field-subgroup label,
.mp-form .elementor-button,
.mp-form .e-form__buttons__wrapper__button {
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace !important;
}

/* --- 13. Scroll-linked motion, exactly as the original ------------------
   The source used `animation-timeline: view()`, which scrubs the animation
   against scroll position rather than firing it once. Where the browser
   supports it we reproduce that precisely; elsewhere Elementor's one-shot
   trigger (section 11) takes over, so nothing is ever left invisible. */
@keyframes mp-slide {
  from { transform: translate3d(0, 60px, 0); }
  to   { transform: translate3d(0, -90px, 0); }
}
@keyframes mp-pushBack {
  from { transform: perspective(1000px) translateZ(0) rotateX(0deg); opacity: 1; }
  to   { transform: perspective(1000px) translateZ(-180px) rotateX(9deg); opacity: .15; }
}

@supports (animation-timeline: view()) {
  /* floating equations drift up as the hero passes */
  .mp-eq {
    animation-name: mp-slide; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .mp-eq-2 { animation-range: cover 6%  cover 100%; }
  .mp-eq-3 { animation-range: cover 3%  cover 100%; }
  .mp-eq-5 { animation-range: cover 8%  cover 100%; }
  .mp-eq-6 { animation-range: cover 4%  cover 100%; }
  .mp-eq-7 { animation-range: cover 10% cover 100%; }

  /* hero recedes in 3D as you scroll past it */
  .mp-hero-main {
    animation-name: mp-pushBack; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  /* cards flip up in step with the scroll, not as a one-shot */
  .mp-anim-flip, .mp-anim-flip.animated {
    animation-name: mp-flip; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: entry 0% cover 36%; transform-origin: 50% 100%;
  }
  .mp-stat.mp-anim-flip, .mp-stat.mp-anim-flip.animated {
    animation-range: entry 10% cover 34%;
  }
  .mp-anim-slab-l, .mp-anim-slab-l.animated {
    animation-name: mp-slabL; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .mp-anim-slab-r, .mp-anim-slab-r.animated {
    animation-name: mp-slabR; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: entry 0% cover 42%;
  }
  .mp-eq-strip, .mp-eq-strip.animated {
    animation-name: mp-lift; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: entry 15% cover 45%;
  }
  .mp-uni-chip, .mp-uni-chip.animated {
    animation-name: mp-lift; animation-timing-function: linear;
    animation-fill-mode: both; animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }
  /* Elementor hides pending elements; the scrubbed animation owns opacity now */
  .mp-anim-flip.elementor-invisible, .mp-anim-slab-l.elementor-invisible,
  .mp-anim-slab-r.elementor-invisible, .mp-eq-strip.elementor-invisible,
  .mp-uni-chip.elementor-invisible { opacity: 1; }
}
@keyframes mp-lift {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 14. Accessibility: respect reduced-motion preferences ------------- */
@media (prefers-reduced-motion: reduce) {
  .animated, .mp-eq, .mp-hero-main, .mp-anim-flip,
  .mp-anim-slab-l, .mp-anim-slab-r, .mp-uni-chip, .mp-eq-strip {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .mp-course-card:hover { transform: none; }
}/* End custom CSS */