.elementor-kit-6{--e-global-color-primary:#29166F;--e-global-color-secondary:#00A539;--e-global-color-text:#5A5A5C;--e-global-color-accent:#FFFFFF;--e-global-color-cnear_black:#1B1F10;--e-global-color-clime:#D9ED92;--e-global-color-cgreen_soft:#B7E2C6;--e-global-color-cgreen_pale:#D4F4DD;--e-global-color-cgrey_bg:#F5F5F5;--e-global-color-cgrey_bg2:#F0F1F0;--e-global-color-cborder:#E2E4E3;--e-global-color-cwhite:#FFFFFF;--e-global-color-cstar:#F7AC16;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:28px;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:26px;--e-global-typography-tcardtitle-font-family:"Nunito";--e-global-typography-tcardtitle-font-size:24px;--e-global-typography-tcardtitle-font-weight:700;--e-global-typography-tcardtitle-line-height:32px;--e-global-typography-toutfit-font-family:"Outfit";--e-global-typography-toutfit-font-size:18px;--e-global-typography-toutfit-font-weight:500;--e-global-typography-toutfit-line-height:26px;--e-global-typography-tjakarta-font-family:"Plus Jakarta Sans";--e-global-typography-tjakarta-font-size:24px;--e-global-typography-tjakarta-font-weight:700;--e-global-typography-tjakarta-line-height:30px;color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:#FFFFFF;font-family:"Nunito", Sans-serif;font-size:66px;font-weight:900;line-height:74px;letter-spacing:0px;}.elementor-kit-6 h2{color:#29166F;font-family:"Nunito", Sans-serif;font-size:48px;font-weight:900;line-height:50px;}.elementor-kit-6 h3{color:#29166F;font-family:"Montserrat", Sans-serif;font-size:32px;font-weight:900;line-height:40px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;line-height:26px;border-style:solid;border-width:0px 0px 4px 4px;border-color:#FFFFFF;border-radius:200px 200px 200px 200px;padding:0px 0px 0px 0px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{border-style:solid;border-width:0px 0px 4px 4px;border-radius:200px 200px 200px 200px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;--container-default-padding-top:100px;--container-default-padding-right:20px;--container-default-padding-bottom:100px;--container-default-padding-left:20px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}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-kit-6 h1{font-size:50px;line-height:60px;letter-spacing:0px;}.elementor-kit-6 h2{font-size:40px;line-height:50px;}.elementor-kit-6 h3{font-size:28px;line-height:36px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:16px;line-height:24px;padding:14px 24px 14px 24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:70px;--container-default-padding-right:20px;--container-default-padding-bottom:70px;--container-default-padding-left:20px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:35px;line-height:45px;}.elementor-kit-6 h2{font-size:32px;line-height:40px;}.elementor-kit-6 h3{font-size:26px;line-height:30px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:14px;line-height:24px;padding:12px 20px 12px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:50px;--container-default-padding-right:20px;--container-default-padding-bottom:50px;--container-default-padding-left:20px;}}/* Start custom CSS */@media (max-width: 1024px) {
body .ti-widget.ti-goog .ti-controls-line {
--ti-dots: 7;
--ti-hi: 0; /* slot under the pointer, set by JS */
--ti-hi-color: transparent; /* only takes a colour while :hover matches */
display: block !important; /* Trustindex only shows it below 480px */
height: 10px;
border-radius: 0;
overflow: visible;
background-color: transparent;
/* layer 1 = the single hovered dot, layer 2 = all the inactive dots */
background-image:
radial-gradient(circle at center, var(--ti-hi-color) 0 3.5px, transparent 3.6px),
radial-gradient(circle at center, #BFE3CC 0 3.5px, transparent 3.6px);
background-size: calc(100% / var(--ti-dots)) 100%, calc(100% / var(--ti-dots)) 100%;
background-repeat: no-repeat, repeat-x;
background-position:
calc(var(--ti-hi) * 100% / (var(--ti-dots) - 1)) center,
left center;
}
body .ti-widget.ti-goog .ti-controls-line .dot {
box-sizing: border-box;
z-index: 1; /* above ::after, which would eat its hover */
padding: 0;
border-radius: 0;
background-color: transparent;
background-image: radial-gradient(circle at center, #00A539 0 4px, transparent 4.1px);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
}
@media (max-width: 1024px) {
body .ti-widget.ti-goog .ti-controls-line { cursor: pointer; }
/* enlarge the touch target without moving the dot grid */
body .ti-widget.ti-goog .ti-controls-line::after { content:""; position:absolute; left:0; right:0; top:-14px; bottom:-14px; }
/* Hover colours. The inactive dots are painted background, not elements, so
the hovered one is a second one-slot background layer that the snippet
positions with --ti-hi; it stays transparent until :hover matches, which
is what clears it again when the pointer leaves. */
body .ti-widget.ti-goog .ti-controls-line:hover { --ti-hi-color: #82C097; }
/* the active dot IS a real element, so it can hover on its own */
body .ti-widget.ti-goog .ti-controls-line .dot:hover {
background-image: radial-gradient(circle at center, #008C31 0 4px, transparent 4.1px);
}
}
/* =====================================================================
FAQ section — reusable. Add `pi-faq` to the accordion widget's
Advanced → CSS Classes field on any page and it picks this up.
Values are the Figma Dev Mode panel values for the FAQ rows.
===================================================================== */
/* Row: 1px #E2E4E3, radius 12, padding 26/24, white, soft drop shadow. */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-accordion-item {
border: 1px solid #E2E4E3;
border-radius: 12px;
overflow: hidden;
box-shadow: 2px 2px 16px 0 rgba(148, 155, 163, .4);
background: #FFFFFF;
margin: 0;
transition: box-shadow .3s ease-out;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title {
padding: 26px 24px;
border: 0;
background: transparent;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content {
padding: 26px 24px;
border: 0;
background: transparent;
}
/* Open row: the WHOLE item goes green, not just the question strip, so the
gradient is painted on the item and both panels are made transparent. */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
background: linear-gradient(272.89deg, #51A26D -8.74%, #008C31 60.26%);
border-color: transparent;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active,
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active a,
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content.elementor-active {
background: transparent;
color: #FFFFFF;
}
/* Divider under the open question. The 24px side margins pull it in to the
text column so it spans the content, not the full padded row. */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active {
border-bottom: 1px solid #82C097;
margin: 0 24px;
padding-left: 0;
padding-right: 0;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content {
margin: 0 24px;
padding-left: 0;
padding-right: 0;
}
/* The answer's last paragraph carries the theme's .9rem bottom margin, which
stacks onto the panel padding and makes the gap under the closing line
deeper than the one above the question. Drop that trailing margin so both
edges are the panel padding and nothing else. */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content > *:last-child {
margin-bottom: 0;
}
/* 24px between rows. */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-accordion {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Toggle glyphs are the Figma artwork inlined as data URIs — WP core blocks
.svg upload, so they cannot be attached through the widget. Elementor's own
glyph is hidden underneath. Inner attributes are single-quoted so the outer
url("...") string does not terminate early. */
body .pi-faq.pi-faq .elementor-accordion-icon {
width: 30px;
height: 30px;
min-width: 30px;
border: 0;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
font-size: 0;
transition: background-image .3s ease-out;
}
body .pi-faq.pi-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
border: 0;
background-image: url("data:image/svg+xml,");
}
body .pi-faq.pi-faq .elementor-accordion-icon svg,
body .pi-faq.pi-faq .elementor-accordion-icon i {
display: none !important;
}
/* Tablet (<=1024px) and mobile (<=767px): rows sit closer together and the
toggle drops from 30px to 28px. One query serves both — mobile is inside
this range and takes the same values. */
@media (max-width: 1024px) {
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-accordion {
gap: 16px;
}
/* divider breathes less as the row narrows */
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active {
padding-bottom: 20px;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content {
padding-top: 20px;
}
body .pi-faq.pi-faq .elementor-accordion-icon {
width: 26px;
height: 26px;
min-width: 26px;
background-size: 26px 26px;
}
}
/* Mobile takes the bigger cut — 16px question text needs a smaller glyph
beside it to stay in proportion. */
@media (max-width: 767px) {
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active {
padding-bottom: 16px;
}
body .pi-faq.pi-faq.elementor-widget-accordion .elementor-tab-content {
padding-top: 16px;
}
body .pi-faq.pi-faq .elementor-accordion-icon {
width: 24px;
height: 24px;
min-width: 24px;
background-size: 24px 24px;
}
}
/* === /new-home/ Programs carousel — matched to FIGMA-VIDEO.mp4 ===========
Scoped to page 83; pages 56/72/77 keep their current build.
The arch is not drawn here — the client supplies pre-arched images.
===================================================================== */
/* FULL-BLEED PHOTO.
Previous attempts widened the photo with a negative margin. That cannot work:
Elementor clamps every child with `.e-con > .elementor-widget { max-width:100% }`,
so the box only shifted left and left a white strip down the right.
The padding is removed from the card instead and handed to the text widgets,
so there is simply no inset for the photo to escape. */
body .elementor-83 .pi-prog-card {
/* the real property, not --padding-left. Elementor maps that var through
--padding-inline-start inside its own .e-con rule, and overriding the var
was not surviving to the render even though it wins the cascade on paper. */
padding-left: 0 !important;
padding-right: 0 !important;
}
body .elementor-83 .pi-prog-card > .elementor-widget-heading,
body .elementor-83 .pi-prog-card > .elementor-widget-text-editor {
padding-left: 24px;
padding-right: 24px;
}
body .elementor-83 .pi-prog-card .pi-prog-img {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
body .elementor-83 .pi-prog-card .pi-prog-img > .elementor-widget-container {
height: 100%;
}
body .elementor-83 .pi-prog-card .pi-prog-img img,
body .elementor-83 .pi-prog-card:hover .pi-prog-img img,
body .elementor-83 .pi-prog-card:focus-within .pi-prog-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* PHOTOS START ON THE SAME LINE.
The copy runs 1-2 line titles, 1-2 line subtitles and 3-5 line bodies, so the
photo began at a different height in every card. Reserving the tallest of each
puts every photo on the same line while it still fills down to the card floor.
These are the three numbers to change if the copy changes. */
body .elementor-83 .pi-prog-card .pi-prog-body > .elementor-widget-container { min-height: 140px; }
/* HOVER MUST NOT RESIZE THE NEIGHBOURING SLIDE.
The shared rules grow the photo a fixed 260 -> 400px while the copy only fades
(opacity keeps its space), so the card outgrew itself and equal-height dragged
every other slide with it. The copy collapses instead and the photo takes the
space it gives up, so the card height never changes.
grid-template-rows 1fr -> 0fr, not max-height: a max-height needs a guessed
ceiling and was clipping long copy mid-sentence on phones. */
body .elementor-83 .pi-prog-card .pi-prog-body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows .3s ease-out, opacity .3s ease-out,
margin-bottom .3s ease-out;
}
body .elementor-83 .pi-prog-card .pi-prog-body > .elementor-widget-container {
overflow: hidden;
}
body .elementor-83 .pi-prog-card:hover .pi-prog-body,
body .elementor-83 .pi-prog-card:focus-within .pi-prog-body {
grid-template-rows: 0fr;
margin-bottom: -10px; /* also swallow the card's 10px flex gap */
opacity: 0;
}
body .elementor-83 .pi-prog-card:hover .pi-prog-body > .elementor-widget-container,
body .elementor-83 .pi-prog-card:focus-within .pi-prog-body > .elementor-widget-container {
min-height: 0;
}
/* ARROWS. Figma draws a long-shafted arrow; Elementor hard-codes a chevron SVG
with no control to swap it, so it is hidden and redrawn as a mask. Size and
colour read the widget's own variables, so the panel still drives them.
Backgrounds are left to the widget except :active, which has no control. */
body .elementor-83 .pi-prog-carousel .elementor-swiper-button svg { display: none; }
body .elementor-83 .pi-prog-carousel .elementor-swiper-button::before {
content: "";
display: block;
width: calc(var(--e-n-carousel-arrow-size, 17px) * 1.8);
height: calc(var(--e-n-carousel-arrow-size, 17px) * 1.8);
background-color: var(--e-n-carousel-arrow-normal-color, #29166F);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .elementor-83 .pi-prog-carousel .elementor-swiper-button-prev::before {
transform: scaleX(-1);
}
body .elementor-83 .pi-prog-carousel .elementor-swiper-button:active {
background-color: #E1EBF2;
}
/* only because hiding the svg orphaned the shared rule's disabled fill */
body .elementor-83 .pi-prog-carousel .swiper-button-disabled::before {
background-color: #5A5A5C;
}
body .elementor-83 .pi-prog-carousel :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
border: 2px solid #29166F;
}
/* Learn More stays the pill Figma draws. The kit's global button hover sets
border-style:none and border-radius:0, which squared the pill, dropped its
white edge and shifted it 4px; the shared theme rule also lifts it 3px. */
body .elementor-83 .pi-prog-more .elementor-button:hover,
body .elementor-83 .pi-prog-more .elementor-button:focus {
border-style: solid;
border-radius: 200px 200px 200px 200px;
transform: none;
}
/* pi-header-cta-guard — header Register Now button ======================
TEMPORARY. This belongs in the widget's own Box Shadow / Border controls,
and it IS set there. It is duplicated here because the Site Header
document is being edited in Elementor right now and every save reverts
those settings — post 50 rolled back at 13:06, 13:14, 13:52 and 13:57,
and the ticker container came back with a new id, so it is real editing
rather than a stale autosave. The kit is a separate document, so this
holds regardless.
Targeted by CLASS, not element id, so it still applies if the header is
rebuilt and the widget gets a new id. Specificity: Elementor's own
per-post rule scores (0,4,0); this scores (0,4,1).
Matches every other button on the site: -2px 2px 0 1px, no border.
DELETE THIS once the header editor is closed and the widget settings stick.
===================================================================== */
body .elementor-50 .elementor-element.pi-btn-stack .elementor-button,
body .elementor-50 .elementor-element.pi-btn-stack .elementor-button:hover,
body .elementor-50 .elementor-element.pi-btn-stack .elementor-button:focus {
box-shadow: -2px 2px 0 1px #29166F !important;
border-style: solid !important;
border-width: 0 !important;
border-radius: 200px !important;
}
/* === Carousel / slider arrows must not start a text selection ==========
Half of a two-part fix; the other half is Custom Code snippet 3166.
Elementor renders every arrow as `
`
holding only an inline SVG - no text of its own. A double-click on a
text-less div makes the browser hunt outward for the nearest selectable
text and select a word there: on /testimonials/ that is "Ready", from the
"Ready to See These Results for Your Child?" heading in the next section.
This rule alone does NOT fix that, and it was tested: with user-select
computing to `none` on the arrow, a double-click still selected "Ready".
Telling the browser the arrow cannot be selected only makes it skip past
the arrow to the neighbouring text sooner. Snippet 3166 cancels the second
mousedown, which is what actually stops it.
The rule stays because it is still correct on its own terms - it stops the
arrow and its SVG being caught in a click-drag selection - and it costs
nothing. Pagination bullets are the same shape and get the same treatment.
===================================================================== */
body :is(
.elementor-swiper-button,
.swiper-pagination-bullet,
.elementor-swiper-button-prev,
.elementor-swiper-button-next
) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/* End custom CSS */