/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root{
  /* palette sampled from the logo */
  --paper:      #ffffff;   /* sunny cream page */
  --paper-deep: #FBEAC2;   /* deeper golden cream */
  --card:       #ffffff;
  --ink:        #1F1A13;   /* logo outline near-black */
  --ink-soft:   #4A5570;   /* navy-gray secondary text */
  --red:        #D63A20;   /* logo orange-red (AA with white text) */
  --orange:     #FFC53D;   /* logo warm orange, text-safe */
  --orange-soft:#FFC53D;
  --yellow:     #FFC53D;   /* logo golden yellow */
  --yellow-soft:#FFC53D;
  --blue:       #0470BF;   /* mascot ocean blue */
  --blue-soft:  #0470BF;
  --green:      #6EC536;   /* mascot continent green */
  --green-soft: #6EC536;
  --coral:      #FF9752;   /* logo gradient midpoint */
  --night:      #1D3D66;   /* graduation-cap navy */
  --night-deep: #152E50;

  /* wobbly hand-drawn border radii */
  --wob-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob-b: 15px 225px 15px 255px / 225px 15px 255px 15px;
  --wob-c: 225px 15px 255px 15px / 15px 255px 15px 225px;
  --wob-btn: 130px 12px 140px 10px / 10px 140px 12px 130px;

  --shadow-sticker: 4px 5px 0 rgba(31,26,19,.85);
  --shadow-soft: 0 10px 24px rgba(31,26,19,.10);
  --max-w: 1160px;
  --header-h: 76px;
}

body.page-id-25 .cem-dm-list li a,
body.page-id-26 .cem-dm-list li a,
body.page-id-26594 .cem-dm-list li a{
	color: #000!important;
}

body.page-id-25 .cem-dm-list li svg,
body.page-id-26 .cem-dm-list li svg,
body.page-id-26594 .cem-dm-list svg{
	stroke: #000!important;
}


.vibrant-red{
	color: var(--e-global-color-0c20a38);	
}
.leaf-green{
	color: var(--e-global-color-eedf933);	
}

.custom-header-menu.elementor-sticky--active{
  background-color: #fff!important;
}
.custom-header-menu.elementor-sticky--active .e-con-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}
.custom-header-menu.elementor-sticky--active .cem-dm-list li a{
  color: #000!important;
}

.cem-teacher--polaroid .cem-teacher__media:after{
	content: '';
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 5;
    left: 0;
    background-color: #000;
}

.custom-icon-lst li{
	padding: 5px 15px!important;
	margin: 5px!important;
	border-radius: 100px;
	background-color: var(--e-global-color-0c20a38);
}


/* ============================================================
   TW Sticker Button — reusable Elementor class
   Add class "cbtn" to a Button widget, then a color modifier:
   cbtn-red / cbtn-blue / cbtn-yellow / cbtn-ghost
   Font family + size inherit from Elementor widget settings.
   ============================================================ */
.cbtn a,
.cbtn .elementor-button{
  display:inline-block;
  font-weight:800;
  padding:.8rem 1.7rem;
  border:3px solid var(--ink,#1F1A13);
  border-radius:var(--wob-btn, 130px 12px 140px 10px / 10px 140px 12px 130px);
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-sticker, 4px 5px 0 rgba(31,26,19,.85));
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  line-height:1.25;
}

.cbtn a:hover,
.cbtn .elementor-button:hover{
  transform:translate(-2px,-3px) rotate(-.5deg);
  box-shadow:7px 8px 0 rgba(31,26,19,.85);
}

.cbtn a:active,
.cbtn .elementor-button:active{
  transform:translate(1px,2px);
  box-shadow:2px 2px 0 rgba(31,26,19,.85);
}

/* ---- color modifiers ---- */
.cbtn-red a,    .cbtn-red .elementor-button{    background:var(--red,#D63A20);      color:#fff; }
.cbtn-red a:hover,    .cbtn-red .elementor-button:hover{    background:var(--red-deep,#AC2610); }

.cbtn-blue a,   .cbtn-blue .elementor-button{   background:var(--blue,#0470BF)!important; color:#fff; }
.cbtn-blue a:hover,   .cbtn-blue .elementor-button:hover{   background:var(--blue-soft,#0470BF)!important; }

.cbtn-yellow a, .cbtn-yellow .elementor-button{ background:var(--yellow,#FFC53D);   color:var(--ink,#1F1A13); }

.cbtn-ghost a,  .cbtn-ghost .elementor-button{  background:var(--card,#fff);        color:var(--ink,#1F1A13); }


.photo-sticker{
  margin:0; display:inline-block; background:var(--card);
  border:3px solid var(--ink); border-radius:var(--wob-a);
  padding:.7rem; box-shadow:var(--shadow-sticker);
position: relative;
}
.photo-sticker.hide-watermark{
	overflow:hidden;
}
.photo-sticker.hide-watermark:after{
	content: '';
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    z-index: 5;
    left: 0;
    background-color: #000;
}
.photo-sticker-plain{
	margin:0; 
	background:var(--card);
  border:3px solid var(--ink); 
   box-shadow:var(--shadow-sticker);
	 display:block; width:100%; 
	height:auto; 
	border-radius:18px 8px 16px 10px / 10px 16px 8px 18px;
}
.photo-sticker img{ display:block; width:100%; height:auto; border-radius:18px 8px 16px 10px / 10px 16px 8px 18px; }



/* ============================================================
   TW Program Card — Elementor-ready
   Class map:
     .program-card   → the card Container
     .age-tape       → age badge (Heading/Text widget)
     .program-photo  → photo wrapper Container  (+ .bgblob-* modifier)
     .link-more      → "learn more" Button/link
   Typography (font family + size) inherits from each widget's
   Style → Typography. Only structural styling set here.
   ============================================================ */
.program-card{
  position:relative;
  background:var(--card,#fff);
  border:3px dashed var(--ink,#1F1A13);
  border-radius:var(--wob-a, 255px 15px 225px 15px / 15px 225px 15px 255px);
  transition:transform .22s ease, box-shadow .22s ease;
  --rest-rot:-1deg;
}
.program-card img{
  display:block;
  width:100%;
  height:auto;
  border:0 !important;
  border-radius:200px 12px 12px 12px / 12px 180px 12px 12px;
}
.program-card:nth-child(2) img{ border-radius:12px 180px 12px 12px / 200px 12px 12px 12px; }
.program-card:nth-child(3) img{ border-radius:12px 12px 12px 180px / 12px 12px 200px 12px; }
.program-card:nth-child(4) img{ border-radius:200px 12px 12px 12px / 12px 180px 12px 12px; }
.program-card:nth-child(2){ --rest-rot:.9deg;  border-radius:var(--wob-b, 15px 225px 15px 255px / 225px 15px 255px 15px); }
.program-card:nth-child(3){ --rest-rot:-.6deg; border-radius:var(--wob-c, 225px 15px 255px 15px / 15px 255px 15px 225px); }
.program-card:nth-child(4){ --rest-rot:1.1deg; }
.program-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:var(--shadow-sticker, 4px 5px 0 rgba(31,26,19,.85)); }

/* ---- age badge ---- */
.age-tape{
  display:inline-block; line-height:1; white-space:nowrap;
  padding:.4rem .95rem;
  border:2.5px solid var(--ink,#1F1A13);
  border-radius:var(--wob-btn, 130px 12px 140px 10px / 10px 140px 12px 130px);
  background:var(--yellow,#FFC53D);
  box-shadow:2px 3px 0 rgba(31,26,19,.7);
}
.program-card:nth-child(2) .age-tape{ background:var(--blue-soft,#0470BF);  transform:translateX(-50%) rotate(2deg); }
.program-card:nth-child(3) .age-tape{ background:var(--green-soft,#6EC536); transform:translateX(-50%) rotate(-1.5deg); }
.program-card:nth-child(4) .age-tape{ background:var(--orange-soft,#FFC53D); transform:translateX(-50%) rotate(2.4deg); }

/* ---- kid cutout photo on a crayon blob ---- */
.program-photo{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  height:185px; margin:0 auto .9rem;
}
.program-photo::before{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:132px; height:132px; opacity:.9;
  border:2.5px dashed var(--ink,#1F1A13);
  border-radius:52% 48% 55% 45% / 48% 55% 45% 52%;
}
.bgblob-yellow::before{ background:var(--yellow-soft,#FFC53D); }
.bgblob-blue::before{   background:var(--blue-soft,#0470BF); }
.bgblob-green::before{  background:var(--green-soft,#6EC536); }
.bgblob-purple::before{ background:var(--orange-soft,#FFC53D); }
.program-photo img{
  position:relative; z-index:1;
  max-height:185px; width:auto; height:auto;
  filter:drop-shadow(3px 4px 0 rgba(31,26,19,.25));
}

/* ---- card heading + body: color only, size/family inherit ---- */
.program-card .elementor-heading-title{ margin-bottom:.35rem; }
.program-card p{ color:var(--ink-soft,#4A5570); min-height:3.4em; }

/* ---- learn-more link: color + arrow motion, size/family inherit ---- */
.link-more{
  display:inline-flex; align-items:center; gap:.35rem;
  text-decoration:none; color:var(--red-deep,#AC2610);
}
.link-more svg{ width:26px; height:14px; transition:transform .2s; }
.link-more:hover svg{ transform:translateX(5px); }


/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-card{
  position:relative; background:var(--card); border:3px solid var(--ink);
  border-radius:var(--wob-a); padding:2.1rem 1.6rem 1.6rem;
  box-shadow:var(--shadow-sticker); --rest-rot:-1.2deg;
}
.quote-card:nth-child(2){ --rest-rot:1deg; border-radius:var(--wob-b); }
.quote-card:nth-child(3){ --rest-rot:-.7deg; border-radius:var(--wob-c); }
.quote-card::before{
  content:"\201C"; position:absolute; top:-.35em; left:.35em;
  font-family:var(--font-hand); font-size:5rem; color:var(--yellow); line-height:1;
  text-shadow:2px 2px 0 var(--ink);
}
.stars{ display:flex; gap:.25rem; margin-bottom:.8rem; justify-content:flex-start; }
.stars svg{ width:24px; height:24px; }
.quote-card blockquote{ margin:0 0 1rem; font-size:1.02rem; font-weight:600; color:var(--ink); font-style:italic; }
.quote-who{ display:flex; align-items:center; gap:.7rem; }
.quote-face{ width:46px; height:46px; flex:none; }
.quote-who strong{ font-family:var(--font-hand); font-weight:400; font-size:1.25rem; display:block; line-height:1.1; }
.quote-who span{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }


/* ============================================================
   WHY FAMILIES CHOOSE US
   ============================================================ */
.why-card{
  background:var(--card); border:3px solid var(--ink); border-radius:var(--wob-b);
  padding:1.35rem 1.3rem; box-shadow:3px 4px 0 rgba(31,26,19,.55);
  --rest-rot:-.5deg;
}
.why-grid .why-card:nth-child(2n){ --rest-rot:.6deg; border-radius:var(--wob-c); }
.why-grid .why-card:nth-child(3n){ border-radius:var(--wob-a); }
.why-badge{
  flex:none; width:58px; height:58px; display:grid; place-items:center;
  border:2.5px solid var(--ink); border-radius:50% 46% 52% 48% / 48% 52% 46% 52%;
}
.why-badge svg{ width:32px; height:32px; }
.bg-yellow{ background:var(--yellow-soft); } .bg-blue{ background:var(--blue-soft); }
.bg-green{ background:var(--green-soft); } .bg-purple{ background:var(--orange-soft); }
.bg-pink{ background:#FFE0C7; } .bg-red{ background:#FFD3C4; }
.why-card h3{ font-size:1.45rem; margin-bottom:.2rem; }
.why-card p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:.95rem; }


/* ============================================================
   Teaching World v4 — style the LIVE Elementor form (.custom-form)
   to match the redesigned contact form.

   Scoped to .custom-form only — nothing leaks site-wide.
   Uses literal hex (no CSS vars) so it works even without .tw-v4.
   !important is used throughout to beat Elementor + theme specificity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Gochi+Hand&family=Nunito:wght@400;600;700;800&display=swap');

/* ---- card wrapper (the sticker panel) ---- */
.custom-form .elementor-form{
  font-family: inherit,sans-serif !important;
  background:#fff !important;
  border:3px solid #1F1A13 !important;
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px !important;
  padding:2rem 1.9rem 2.1rem !important;
  box-shadow:4px 5px 0 rgba(31,26,19,.85) !important;
}

/* ---- field spacing (Elementor uses .elementor-field-group) ---- */
.custom-form .elementor-form-fields-wrapper{ gap:0 !important; }
.custom-form .elementor-field-group{ margin-bottom:1.1rem !important; }

/* ---- labels — handwritten ---- */
.custom-form .elementor-field-label{
  display:block !important; margin:0 0 .35rem !important;
  font-family: inherit,cursive !important; font-weight:400 !important;
  font-size:1.2rem !important; color:#1F1A13 !important;
}

/* ---- inputs + textarea — wobbly sticker fields (white background) ---- */
.custom-form .elementor-field-textual,
.custom-form input.elementor-field[type="text"],
.custom-form input.elementor-field[type="tel"],
.custom-form input.elementor-field[type="email"],
.custom-form textarea.elementor-field{
  width:100% !important; box-sizing:border-box !important;
  font-family:'Nunito',sans-serif !important; font-size:1rem !important;
  font-weight:600 !important; color:#1F1A13 !important;
  background:#FFFFFF !important;
  border:3px solid #1F1A13 !important;
  border-radius:16px 8px 18px 10px / 10px 18px 8px 16px !important;
  padding:.7rem .9rem !important;
  box-shadow:none !important;
  line-height:1.4 !important;
  transition:box-shadow .18s ease, background-color .18s ease, transform .18s ease !important;
}

.custom-form textarea.elementor-field{
  min-height:130px !important; resize:vertical !important;
  border-radius:15px 225px 15px 255px / 225px 15px 255px 15px !important;
}

.custom-form .elementor-field-textual::placeholder{
  color:#8A8577 !important; font-weight:600 !important; opacity:1 !important;
}

/* ---- focus — lift + hard shadow ---- */
.custom-form .elementor-field-textual:focus{
  outline:none !important; background:#FFFFFF !important;
  box-shadow:4px 5px 0 rgba(31,26,19,.55) !important;
  transform:translate(-1px,-1px) !important;
}

/* ---- submit — red sticker button ---- */
.custom-form .elementor-field-type-submit{ margin-top:.4rem !important; }

/* Elementor stretches the button by default; keep it auto-width */
.custom-form.elementor-button-align-stretch .elementor-button,
.custom-form .elementor-button{
  display:inline-block !important; cursor:pointer !important;
  width:auto !important; flex-basis:auto !important;
  font-family:'Nunito',sans-serif !important; font-weight:800 !important;
  font-size:1.2rem !important; color:#fff !important;
  background:#D63A20 !important;
  border:3px solid #1F1A13 !important;
  border-radius:130px 12px 140px 10px / 10px 140px 12px 130px !important;
  padding:1rem 2.4rem !important; line-height:1.2 !important;
  box-shadow:4px 5px 0 rgba(31,26,19,.85) !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.custom-form .elementor-button .elementor-button-content-wrapper,
.custom-form .elementor-button .elementor-button-text{ color:#fff !important; }

.custom-form .elementor-button:hover{
  background:#AC2610 !important; color:#fff !important;
  transform:translate(-2px,-3px) rotate(-.5deg) !important;
  box-shadow:7px 8px 0 rgba(31,26,19,.85) !important;
}

.custom-form .elementor-button:active{
  transform:translate(1px,2px) !important;
  box-shadow:2px 2px 0 rgba(31,26,19,.85) !important;
}

/* ---- validation + response messages ---- */
.custom-form .elementor-field-textual.elementor-error{ border-color:#D63A20 !important; }
.custom-form .elementor-message.elementor-message-danger,
.custom-form .elementor-field-group .elementor-error .elementor-message{
  color:#AC2610 !important; font-weight:700 !important; font-size:.9rem !important;
  margin-top:.35rem !important;
}
.custom-form .elementor-message{
  border:3px solid #1F1A13 !important; border-radius:14px !important;
  background:#FFF5DE !important; color:#1F1A13 !important; font-weight:700 !important;
  margin:1rem 0 0 !important; padding:.8rem 1rem !important;
}
.custom-form .elementor-message:before{ display:none !important; } /* hide default icon */

/* ---- optional: name + email side by side on wider screens ----
   Uncomment if you want the first two fields paired.
@media (min-width:600px){
  .custom-form .elementor-form-fields-wrapper{
    display:grid !important; grid-template-columns:1fr 1fr; column-gap:1.1rem;
  }
  .custom-form .elementor-field-group-message,
  .custom-form .elementor-field-type-submit{ grid-column:1 / -1; }
}
*/


@media(max-width: 600px){
	.custom-icon-lst ul{
		display: block!important;
	}
	.custom-icon-lst ul li{
		 max-width: max-content;
	}
}