{"id":4640,"date":"2025-08-14T01:49:06","date_gmt":"2025-08-14T01:49:06","guid":{"rendered":"https:\/\/demo.7iquid.com\/little-sprouts\/?page_id=4640"},"modified":"2026-08-24T13:48:27","modified_gmt":"2026-08-24T13:48:27","slug":"study-programs","status":"publish","type":"page","link":"https:\/\/flatterium.com\/sunshine-new\/study-programs\/","title":{"rendered":"Study Programs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4640\" class=\"elementor elementor-4640\">\n\t\t\t\t<div class=\"elementor-element elementor-element-858c469 e-flex e-con-boxed e-con e-parent\" data-id=\"858c469\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5c5f37 e-con e-atomic-element e-flexbox-base e-2a4f03f \" data-id=\"a5c5f37\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a5c5f37\">\n    \t\t<div class=\"elementor-element elementor-element-e3fc5de elementor-widget elementor-widget-spacer\" data-id=\"e3fc5de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0a62005 e-con e-atomic-element e-flexbox-base e-1eaaba7 \" data-id=\"0a62005\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0a62005\">\n    \t\t<div class=\"elementor-element elementor-element-5a5846b elementor-widget elementor-widget-html\" data-id=\"5a5846b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     SUNSHINE HEARTS PRESCHOOL \u2014 OUR CLASSES (section standalone)\n     Untuk Elementor HTML Widget (paste seluruh isi file ini ke 1 widget HTML)\n     6 kelas ditumpuk ke bawah (bukan slide\/carousel).\n     Upload gambar ke Media Library WP, lalu update path src di setiap <img>.\n     ============================================================ -->\n\n<style>\n  .sa-wrap * { box-sizing: border-box; }\n  .sa-wrap { font-family: inherit; overflow: hidden; }\n\n  \/* ============ OUR CLASSES ============ *\/\n  .sa-classes {\n    background-color: #FEF6E4;\n    width: 100vw;\n    max-width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    padding: 40px 20px 70px;\n  }\n  .sa-classes h2 {\n    color: #3154A5;\n    text-align: center;\n    font-size: clamp(24px, 3.6vw, 32px);\n    font-weight: 800;\n    font-family: inherit;\n    margin: 30px 0 30px;\n  }\n\n  \/* Kartu ditumpuk ke bawah, jarak antar kartu diatur di sini *\/\n  .sa-classes__list {\n    max-width: 980px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 60px;\n  }\n\n  \/* Card \u2014 gambar anak \"melayang\" pakai position:absolute supaya BEBAS\n     keluar dari batas atas\/bawah card tanpa ikut menentukan tinggi card. *\/\n  .sa-classes__card {\n    display: flex;\n    align-items: center;\n    border-radius: 18px;\n    padding: 30px 30px 30px 320px;   \/* padding-left = ruang buat gambar *\/\n    position: relative;\n    overflow: visible;               \/* WAJIB biar gambar boleh nongol keluar *\/\n    min-height: 260px;\n    font-family: inherit;\n  }\n\n  \/* Warna tiap kelas *\/\n  .sa-classes__card[data-class=\"sunrise\"]  { background: #E5402C; }\n  .sa-classes__card[data-class=\"sunbeam\"]  { background: #3C9A5B; }\n  .sa-classes__card[data-class=\"sunlight\"] { background: #6C4A9C; }\n  .sa-classes__card[data-class=\"sunray\"]   { background: #E0328B; }\n  .sa-classes__card[data-class=\"sunburst\"] { background: #F0862A; }\n  .sa-classes__card[data-class=\"sunshine\"] { background: #2F5FA8; }\n\n  \/* Selang-seling: gambar di kiri utk kartu ganjil, kanan utk kartu genap\n     (opsional, tinggal hapus blok ini kalau mau gambar selalu di kiri) *\/\n  .sa-classes__card:nth-child(even) {\n    padding: 30px 320px 30px 30px;\n  }\n  .sa-classes__card:nth-child(even) .sa-classes__img { left: auto; right: 24px; }\n\n  .sa-classes__img {\n    position: absolute;\n    left: 24px;\n    top: -36px;                      \/* nongol ke atas box *\/\n    bottom: -36px;                   \/* nongol ke bawah box *\/\n    width: 300px;\n    z-index: 3;\n    \/* flex-center: jaga gambar tetap center walau rasio foto beda-beda *\/\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .sa-classes__img img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    object-position: center top;     \/* nempel ke atas box *\/\n    display: block;\n    \/* --lift = angkat GAMBARNYA sendiri ke atas (bukan boxnya).\n       Naikin angkanya (makin negatif) kalau masih kelihatan tenggelam. *\/\n    transform: translateY(var(--lift, 0px));\n    filter: drop-shadow(0 18px 22px rgba(0,0,0,0.25));\n  }\n\n  \/* FIX: 4 foto ini (\"blob\" crop) posisi anaknya sendiri ada di bagian\n     bawah kanvas foto, jadi walau box-nya udah dinaikin, gambarnya\n     tetep keliatan tenggelam. Makanya di-translateY (angkat fotonya\n     sendiri), bukan cuma geser box. Tinggal atur angka --lift per\n     kelas di bawah ini sampe pas (makin negatif = makin naik). *\/\n  .sa-classes__card[data-class=\"sunrise\"]  .sa-classes__img img { --lift: -60px; }\n  .sa-classes__card[data-class=\"sunray\"]   .sa-classes__img img { --lift: -60px; }\n  .sa-classes__card[data-class=\"sunburst\"] .sa-classes__img img { --lift: -60px; }\n  .sa-classes__card[data-class=\"sunshine\"] .sa-classes__img img { --lift: -60px; }\n\n  .sa-classes__body { flex: 1; color: #fff; font-family: inherit; }\n  .sa-classes__body h3 { font-size: 26px; font-weight: 800; margin: 0 0 2px; color: #fff; font-family: inherit; }\n  .sa-classes__body .sa-age { color: #FFD23F; font-style: italic; font-size: 16px; display: block; margin-bottom: 14px; font-family: inherit; }\n  .sa-classes__body .sa-tag { font-size: 15px; font-weight: 700; margin: 0 0 10px; font-family: inherit; }\n  .sa-classes__body p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; font-family: inherit; }\n  .sa-classes__body ul { margin: 0; padding-left: 20px; }\n  .sa-classes__body ul li { font-size: 14px; line-height: 1.7; font-family: inherit; }\n\n  @media (max-width: 780px) {\n    .sa-classes__card,\n    .sa-classes__card:nth-child(even) {\n      flex-direction: column;\n      padding: 24px;\n      min-height: 0;\n    }\n    .sa-classes__img,\n    .sa-classes__card:nth-child(even) .sa-classes__img {\n      position: static;\n      width: 100%;\n      max-width: 260px;\n      height: 240px;\n      margin: 0 auto 16px;\n      top: auto;\n      bottom: auto;\n      left: auto;\n      right: auto;\n    }\n  }\n<\/style>\n\n<div class=\"sa-wrap\">\n\n  <!-- ===== Our Classes ===== -->\n  <section class=\"sa-classes\">\n    <h2>Our Classes<\/h2>\n\n    <div class=\"sa-classes__list\">\n\n      <div class=\"sa-classes__card\" data-class=\"sunrise\">\n        <div class=\"sa-classes__img\">\n          <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/03-anak-foto-blob-2.png\" alt=\"Sunrise Infant Care - Sunshine Hearts Preschool\">\n        <\/div>\n        <div class=\"sa-classes__body\">\n          <h3>Sunrise<\/h3>\n          <span class=\"sa-age\">(Infant Care)<\/span>\n          <p class=\"sa-tag\">A new beginning filled with love and care.<\/p>\n          <p>Children are nurtured in a safe, loving, and responsive environment where trust, security, and relationships are formed.<\/p>\n          <ul>\n            <li>Love, care, attachment, security.<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n\n      <\/div>\n\n      \n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n  \/\/ Full-bleed fix: buka overflow parent Elementor yang ngunci,\n  \/\/ biar background section ini bisa selebar layar (100vw).\n  (function () {\n    function freeParents() {\n      document.querySelectorAll('.sa-classes').forEach(function (el) {\n        var node = el.parentElement;\n        while (node && node !== document.body) {\n          var cs = window.getComputedStyle(node);\n          if (\n            cs.overflowX === 'hidden' || cs.overflow === 'hidden' ||\n            cs.overflowX === 'clip'   || cs.overflow === 'clip'\n          ) {\n            node.style.setProperty('overflow', 'visible', 'important');\n            node.style.setProperty('overflow-x', 'visible', 'important');\n          }\n          node = node.parentElement;\n        }\n      });\n    }\n    freeParents();\n    document.addEventListener('DOMContentLoaded', freeParents);\n    window.addEventListener('load', freeParents);\n    [100, 500, 1000, 2000, 3500].forEach(function (t) { setTimeout(freeParents, t); });\n    if ('MutationObserver' in window) {\n      new MutationObserver(freeParents).observe(document.documentElement, {\n        attributes: true, subtree: true, attributeFilter: ['style', 'class']\n      });\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a85f968 elementor-widget elementor-widget-html\" data-id=\"a85f968\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     SUNSHINE HEARTS PRESCHOOL \u2014 INFANT CARE BABY SPA (section standalone)\n     Untuk Elementor HTML Widget (paste seluruh isi file ini ke 1 widget HTML)\n     Foto kiri (dengan blob kuning di belakang) + teks kanan.\n     Upload foto ke Media Library WP, lalu update path src di <img>.\n     ============================================================ -->\n\n<style>\n  .sa-wrap3 * { box-sizing: border-box; }\n  .sa-wrap3 { font-family: inherit; overflow: hidden; }\n\n  .sa-spa {\n    background-color: #FEF6E4;\n    width: 100vw;\n    max-width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    padding: 30px 20px;\n  }\n\n  .sa-spa__inner {\n    max-width: 780px;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 32px;\n  }\n\n  \/* ===== Foto + blob kuning di belakangnya ===== *\/\n  .sa-spa__media {\n    position: relative;\n    flex: 0 0 220px;\n    width: 220px;\n    aspect-ratio: 16 \/ 11;\n  }\n  .sa-spa__media::before {\n    content: \"\";\n    position: absolute;\n    top: -18px;\n    left: -18px;\n    width: 78%;\n    height: 78%;\n    \n    z-index: 1;\n  }\n  .sa-spa__media img {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    border-radius: 18px;\n    box-shadow: 0 10px 22px rgba(0,0,0,0.18);\n  }\n\n  \/* ===== Teks ===== *\/\n  .sa-spa__text { flex: 1; font-family: inherit; }\n  .sa-spa__text h3 {\n    color: #E5402C;\n    font-size: clamp(17px, 2.1vw, 21px);\n    font-weight: 800;\n    line-height: 1.3;\n    margin: 0 0 10px;\n    font-family: inherit;\n  }\n  .sa-spa__text p {\n    color: #555;\n    font-size: 13.5px;\n    line-height: 1.6;\n    margin: 0;\n    font-family: inherit;\n  }\n\n  \/* ===== fade-in halus pas kelihatan di layar ===== *\/\n  .sa-spa__inner {\n    opacity: 0;\n    transform: translateY(16px);\n    transition: opacity .6s ease, transform .6s ease;\n  }\n  .sa-spa__inner.sa-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  @media (max-width: 620px) {\n    .sa-spa__inner {\n      flex-direction: column;\n      text-align: center;\n      gap: 22px;\n    }\n    .sa-spa__media {\n      flex: 0 0 auto;\n      width: 70%;\n      max-width: 260px;\n      aspect-ratio: 16 \/ 11;\n    }\n  }\n<\/style>\n\n<div class=\"sa-wrap3\">\n\n  <!-- ===== Infant Care - Baby Spa ===== -->\n  <section class=\"sa-spa\">\n    <div class=\"sa-spa__inner\" id=\"saSpaInner\">\n      <div >\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/2.png\" width=\"300\" alt=\"Baby Spa - Sunshine Hearts Preschool Infant Care\">\n      <\/div>\n      <div class=\"sa-spa__text\">\n        <h3>Our Infant Care Includes Nurturing Baby Spa Experiences<\/h3>\n        <p>As part of our infant care programme, baby spa activities provide gentle sensory experiences that support your child's physical and emotional development. With caring guidance in a safe environment, infants can explore movement, build confidence, and enjoy meaningful moments of relaxation and growth.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n  \/\/ Fade-in \"Baby Spa\" pas section-nya masuk viewport.\n  (function () {\n    var el = document.getElementById('saSpaInner');\n    if (!el) return;\n    if (!('IntersectionObserver' in window)) {\n      el.classList.add('sa-visible');\n      return;\n    }\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting) {\n          el.classList.add('sa-visible');\n          io.unobserve(el);\n        }\n      });\n    }, { threshold: 0.25 });\n    io.observe(el);\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f7937e elementor-widget elementor-widget-html\" data-id=\"6f7937e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ============================================================\n   SUNSHINE HEARTS PRESCHOOL \u2014 OUR CLASSES\n   IMAGE FULL-BLEED LEFT SIDE\n   ============================================================ *\/\n\n.sa-wrap,\n.sa-wrap *,\n.sa-wrap *::before,\n.sa-wrap *::after {\n  box-sizing: border-box;\n}\n\n.sa-wrap {\n  position: relative !important;\n  display: block !important;\n\n  width: 100vw !important;\n  max-width: 100vw !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  font-family: inherit !important;\n}\n\n\n\/* ============================================================\n   SECTION\n============================================================ *\/\n\n.sa-classes {\n  width: 100vw !important;\n  max-width: 100vw !important;\n\n  margin: 0 !important;\n  padding: 40px 20px 0 !important;\n\n  background: #FEF6E4 !important;\n\n  position: relative !important;\n\n  overflow: visible !important;\n}\n\n\n\/* ============================================================\n   TITLE\n============================================================ *\/\n\n.sa-classes h2 {\n  width: 100% !important;\n\n  margin: 30px 0 40px !important;\n  padding: 0 !important;\n\n  text-align: center !important;\n\n  color: #3154A5 !important;\n\n  font-family: inherit !important;\n\n  font-size: clamp(24px, 3.6vw, 32px) !important;\n  font-weight: 800 !important;\n\n  line-height: 1.2 !important;\n}\n\n\n\/* ============================================================\n   LIST\n============================================================ *\/\n\n.sa-classes__list {\n  width: 100% !important;\n  max-width: 980px !important;\n\n  margin: 0 auto !important;\n  padding: 0 !important;\n\n  display: flex !important;\n  flex-direction: column !important;\n\n  gap: 40px !important;\n}\n\n\n\/* ============================================================\n   CARD\n============================================================ *\/\n\n.sa-classes__card {\n  position: relative !important;\n\n  width: 100% !important;\n\n  min-height: 300px !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  display: grid !important;\n\n  \/*\n   * KIRI IMAGE\n   * KANAN TEXT\n   *\/\n  grid-template-columns: 50% 50% !important;\n\n  border-radius: 28px !important;\n\n  overflow: hidden !important;\n\n  align-items: stretch !important;\n}\n\n\n\/* ============================================================\n   COLORS\n============================================================ *\/\n\n.sa-classes__card[data-class=\"sunbeam\"] {\n  background: #3C9A5B !important;\n}\n\n.sa-classes__card[data-class=\"sunlight\"] {\n  background: #6C4A9C !important;\n}\n\n.sa-classes__card[data-class=\"sunray\"] {\n  background: #E0328B !important;\n}\n\n.sa-classes__card[data-class=\"sunburst\"] {\n  background: #F0862A !important;\n}\n\n.sa-classes__card[data-class=\"sunshine\"] {\n  background: #2F5FA8 !important;\n}\n\n\n\/* ============================================================\n   IMAGE WRAPPER\n   ============================================================ *\/\n\n.sa-classes__img {\n\n  \/*\n   * JANGAN gunakan height:100%\n   * karena kita ingin wrapper mengikuti\n   * seluruh tinggi card secara absolute.\n   *\/\n\n  position: absolute !important;\n\n  top: 0 !important;\n  bottom: 0 !important;\n\n  left: 0 !important;\n\n  \/*\n   * Tepat 50% lebar card.\n   *\/\n  width: 50% !important;\n\n  height: 100% !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n\n  display: block !important;\n\n  \/*\n   * Radius hanya sisi kiri.\n   *\/\n  border-radius: 28px 0 0 28px !important;\n\n  z-index: 1 !important;\n}\n\n\n\/* ============================================================\n   IMAGE\n============================================================ *\/\n\n.sa-classes__img img {\n\n  position: absolute !important;\n\n  \/*\n   * FULL FILL\n   *\/\n  top: 0 !important;\n  left: 0 !important;\n\n  width: 100% !important;\n  height: 100% !important;\n\n  \/*\n   * Hapus semua constraint Elementor \/ WP.\n   *\/\n  min-width: 0 !important;\n  min-height: 0 !important;\n\n  max-width: none !important;\n  max-height: none !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  display: block !important;\n\n  border: 0 !important;\n  border-radius: 0 !important;\n\n  \/*\n   * INI YANG MEMASTIKAN IMAGE\n   * MENGISI SELURUH AREA.\n   *\/\n  object-fit: cover !important;\n\n  \/*\n   * Center.\n   *\/\n  object-position: center center !important;\n\n  transform: none !important;\n\n  vertical-align: top !important;\n}\n\n\n\/* ============================================================\n   TEXT\n============================================================ *\/\n\n.sa-classes__body {\n\n  grid-column: 2 !important;\n  grid-row: 1 !important;\n\n  width: 100% !important;\n  min-width: 0 !important;\n\n  align-self: center !important;\n\n  margin: 0 !important;\n\n  padding: 38px 34px !important;\n\n  color: #fff !important;\n\n  position: relative !important;\n\n  z-index: 2 !important;\n\n  font-family: inherit !important;\n}\n\n\n\/* ============================================================\n   H3\n============================================================ *\/\n\n.sa-classes__body h3 {\n\n  margin: 0 0 2px !important;\n  padding: 0 !important;\n\n  color: #fff !important;\n\n  font-family: inherit !important;\n\n  font-size: 26px !important;\n  font-weight: 800 !important;\n\n  line-height: 1.2 !important;\n}\n\n\n\/* ============================================================\n   AGE\n============================================================ *\/\n\n.sa-classes__body .sa-age {\n\n  display: block !important;\n\n  margin: 0 0 14px !important;\n  padding: 0 !important;\n\n  color: #FFD23F !important;\n\n  font-size: 16px !important;\n\n  font-style: italic !important;\n\n  line-height: 1.3 !important;\n}\n\n\n\/* ============================================================\n   TAG\n============================================================ *\/\n\n.sa-classes__body .sa-tag {\n\n  margin: 0 0 10px !important;\n  padding: 0 !important;\n\n  color: #fff !important;\n\n  font-size: 15px !important;\n  font-weight: 700 !important;\n\n  line-height: 1.4 !important;\n}\n\n\n\/* ============================================================\n   PARAGRAPH\n============================================================ *\/\n\n.sa-classes__body p {\n\n  margin: 0 0 12px !important;\n  padding: 0 !important;\n\n  color: #fff !important;\n\n  font-size: 14px !important;\n\n  line-height: 1.6 !important;\n}\n\n\n\/* ============================================================\n   UL\n============================================================ *\/\n\n.sa-classes__body ul {\n\n  margin: 0 !important;\n\n  padding: 0 0 0 20px !important;\n}\n\n.sa-classes__body li {\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  color: #fff !important;\n\n  font-size: 14px !important;\n\n  line-height: 1.7 !important;\n}\n\n\n\/* ============================================================\n   TABLET\n============================================================ *\/\n\n@media (max-width: 780px) {\n\n  .sa-classes {\n    padding: 30px 16px 0 !important;\n  }\n\n  .sa-classes h2 {\n    margin: 20px 0 30px !important;\n  }\n\n  .sa-classes__list {\n    gap: 28px !important;\n  }\n\n  .sa-classes__card {\n\n    grid-template-columns: 45% 55% !important;\n\n    min-height: 260px !important;\n\n    border-radius: 24px !important;\n  }\n\n  .sa-classes__img {\n\n    width: 45% !important;\n\n    border-radius: 24px 0 0 24px !important;\n  }\n\n  .sa-classes__body {\n    padding: 28px 24px !important;\n  }\n\n  .sa-classes__body h3 {\n    font-size: 22px !important;\n  }\n\n  .sa-classes__body .sa-age {\n    font-size: 15px !important;\n  }\n\n  .sa-classes__body .sa-tag,\n  .sa-classes__body p,\n  .sa-classes__body li {\n    font-size: 13px !important;\n  }\n}\n\n\n\/* ============================================================\n   MOBILE\n============================================================ *\/\n\n@media (max-width: 560px) {\n\n  .sa-classes {\n    padding: 24px 12px 0 !important;\n  }\n\n  .sa-classes__list {\n    gap: 22px !important;\n  }\n\n  .sa-classes__card {\n\n    grid-template-columns: 42% 58% !important;\n\n    min-height: 245px !important;\n\n    border-radius: 20px !important;\n  }\n\n  .sa-classes__img {\n\n    width: 42% !important;\n\n    border-radius: 20px 0 0 20px !important;\n  }\n\n  .sa-classes__body {\n    padding: 24px 16px !important;\n  }\n\n  .sa-classes__body h3 {\n\n    font-size: 19px !important;\n\n    line-height: 1.2 !important;\n\n    margin-bottom: 4px !important;\n  }\n\n  .sa-classes__body .sa-age {\n\n    font-size: 13px !important;\n\n    margin-bottom: 9px !important;\n  }\n\n  .sa-classes__body .sa-tag {\n\n    font-size: 12px !important;\n\n    line-height: 1.4 !important;\n\n    margin-bottom: 7px !important;\n  }\n\n  .sa-classes__body p,\n  .sa-classes__body li {\n\n    font-size: 11px !important;\n\n    line-height: 1.5 !important;\n  }\n\n  .sa-classes__body ul {\n\n    padding-left: 16px !important;\n  }\n}\n\n\n\/* ============================================================\n   SMALL MOBILE\n============================================================ *\/\n\n@media (max-width: 380px) {\n\n  .sa-classes {\n\n    padding-left: 8px !important;\n    padding-right: 8px !important;\n  }\n\n  .sa-classes__card {\n\n    grid-template-columns: 40% 60% !important;\n  }\n\n  .sa-classes__img {\n\n    width: 40% !important;\n  }\n\n  .sa-classes__body {\n\n    padding: 20px 12px !important;\n  }\n\n  .sa-classes__body h3 {\n    font-size: 17px !important;\n  }\n\n  .sa-classes__body .sa-age {\n    font-size: 12px !important;\n  }\n\n  .sa-classes__body .sa-tag {\n    font-size: 11px !important;\n  }\n\n  .sa-classes__body p,\n  .sa-classes__body li {\n    font-size: 10px !important;\n  }\n}\n<\/style>\n\n\n<div class=\"sa-wrap\">\n\n  <section class=\"sa-classes\">\n\n    <h2>Our Classes<\/h2>\n\n    <div class=\"sa-classes__list\">\n\n\n      <!-- ======================================================\n           SUNBEAM\n      ======================================================= -->\n\n      <div class=\"sa-classes__card\" data-class=\"sunbeam\">\n\n        <div class=\"sa-classes__img\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_084913_1786f010-5343-4f6b-ba97-ccb16a54219c.png\"\n            alt=\"Sunbeam Playgroup - Sunshine Hearts Preschool\"\n          >\n\n        <\/div>\n\n        <div class=\"sa-classes__body\">\n\n          <h3>Sunbeam Playgroup<\/h3>\n\n          <span class=\"sa-age\">(Age 2)<\/span>\n\n          <p class=\"sa-tag\">\n            The first gentle ray of light.\n          <\/p>\n\n          <p>\n            Children begin their learning journey in a warm, safe, and nurturing environment where curiosity is sparked through play, exploration, and meaningful interactions.\n          <\/p>\n\n          <ul>\n            <li>Building secure relationships.<\/li>\n            <li>Developing communication skills.<\/li>\n            <li>Exploring through the senses.<\/li>\n            <li>Establishing routines and independence.<\/li>\n            <li>Learning through play.<\/li>\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ======================================================\n           SUNLIGHT\n      ======================================================= -->\n\n      <div class=\"sa-classes__card\" data-class=\"sunlight\">\n\n        <div class=\"sa-classes__img\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_082153_6c915615-992c-4707-a346-e80917024ce1.png\"\n            alt=\"Sunlight Nursery 1 - Sunshine Hearts Preschool\"\n          >\n\n        <\/div>\n\n        <div class=\"sa-classes__body\">\n\n          <h3>Sunlight Nursery 1<\/h3>\n\n          <span class=\"sa-age\">(Age 3)<\/span>\n\n          <p class=\"sa-tag\">\n            Light begins to fill the world.\n          <\/p>\n\n          <p>\n            Children gain confidence as they explore their surroundings, develop language and social skills, and build independence through hands-on experiences.\n          <\/p>\n\n          <ul>\n            <li>Language development.<\/li>\n            <li>Early literacy awareness.<\/li>\n            <li>Independence and self-help skills.<\/li>\n            <li>Social interaction.<\/li>\n            <li>Curiosity and exploration.<\/li>\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ======================================================\n           SUNRAY\n      ======================================================= -->\n\n      <div class=\"sa-classes__card\" data-class=\"sunray\">\n\n        <div class=\"sa-classes__img\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_082003_56a21d3c-9714-479e-ba97-62833cfc0537.png\"\n            alt=\"Sunray Nursery 2 - Sunshine Hearts Preschool\"\n          >\n\n        <\/div>\n\n        <div class=\"sa-classes__body\">\n\n          <h3>Sunray Nursery 2<\/h3>\n\n          <span class=\"sa-age\">(Age 4)<\/span>\n\n          <p class=\"sa-tag\">\n            Growing brighter with every discovery.\n          <\/p>\n\n          <p>\n            Children expand their knowledge, curiosity, and understanding through inquiry, investigation, and active exploration of the world around them.\n          <\/p>\n\n          <ul>\n            <li>Early reading and writing.<\/li>\n            <li>Number sense and problem-solving.<\/li>\n            <li>Inquiry and investigation.<\/li>\n            <li>Creative expression.<\/li>\n            <li>Critical thinking.<\/li>\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ======================================================\n           SUNBURST\n      ======================================================= -->\n\n      <div class=\"sa-classes__card\" data-class=\"sunburst\">\n\n        <div class=\"sa-classes__img\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_081836_9748b41c-e413-480c-a67d-554c6ea35f4f.png\"\n            alt=\"Sunburst Kindergarten 1 - Sunshine Hearts Preschool\"\n          >\n\n        <\/div>\n\n        <div class=\"sa-classes__body\">\n\n          <h3>Sunburst Kindergarten 1<\/h3>\n\n          <span class=\"sa-age\">(Age 5)<\/span>\n\n          <p class=\"sa-tag\">\n            Ideas shine in every direction.\n          <\/p>\n\n          <p>\n            Children apply their learning creatively, think critically, solve problems, and express their ideas with growing confidence and competence.\n          <\/p>\n\n          <ul>\n            <li>Reading and writing development.<\/li>\n            <li>Mathematical thinking.<\/li>\n            <li>Creativity and innovation.<\/li>\n            <li>Communication skills.<\/li>\n            <li>Independent learning.<\/li>\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ======================================================\n           SUNSHINE\n      ======================================================= -->\n\n      <div class=\"sa-classes__card\" data-class=\"sunshine\">\n\n        <div class=\"sa-classes__img\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_081253_3f2db454-a5c9-4abf-86f3-927f0cab015f.png\"\n            alt=\"Sunshine Kindergarten 2 - Sunshine Hearts Preschool\"\n          >\n\n        <\/div>\n\n        <div class=\"sa-classes__body\">\n\n          <h3>Sunshine Kindergarten 2<\/h3>\n\n          <span class=\"sa-age\">(Age 6)<\/span>\n\n          <p class=\"sa-tag\">\n            Shining brightly and ready for the future.\n          <\/p>\n\n          <p>\n            Children demonstrate confidence, competence, resilience, and character as they become independent learners who are well-prepared for school and life.\n          <\/p>\n\n          <ul>\n            <li>School readiness.<\/li>\n            <li>Reading fluency and comprehension.<\/li>\n            <li>Mathematical reasoning.<\/li>\n            <li>Leadership and responsibility.<\/li>\n            <li>Confidence and resilience.<\/li>\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/section>\n\n<\/div>\n\n\n<script>\n(function () {\n\n  \/*\n   * Pastikan parent Elementor tidak memberi\n   * spacing yang mengganggu section.\n   *\/\n  function cleanParents() {\n\n    var wrap = document.querySelector('.sa-wrap');\n\n    if (!wrap) return;\n\n    var parent = wrap.parentElement;\n\n    var level = 0;\n\n    while (\n      parent &&\n      parent !== document.body &&\n      level < 6\n    ) {\n\n      parent.style.setProperty(\n        'padding-left',\n        '0',\n        'important'\n      );\n\n      parent.style.setProperty(\n        'padding-right',\n        '0',\n        'important'\n      );\n\n      parent.style.setProperty(\n        'padding-bottom',\n        '0',\n        'important'\n      );\n\n      parent.style.setProperty(\n        'margin-left',\n        '0',\n        'important'\n      );\n\n      parent.style.setProperty(\n        'margin-right',\n        '0',\n        'important'\n      );\n\n      parent = parent.parentElement;\n\n      level++;\n    }\n  }\n\n\n  function init() {\n    cleanParents();\n  }\n\n\n  init();\n\n\n  document.addEventListener(\n    'DOMContentLoaded',\n    init\n  );\n\n\n  window.addEventListener(\n    'load',\n    init\n  );\n\n\n  window.addEventListener(\n    'resize',\n    init\n  );\n\n\n  setTimeout(init, 200);\n  setTimeout(init, 500);\n  setTimeout(init, 1000);\n  setTimeout(init, 2000);\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4a23d2 elementor-widget elementor-widget-html\" data-id=\"a4a23d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     SUNSHINE HEARTS PRESCHOOL \u2014 OUR CURRICULUM PROGRESSION (section standalone)\n     Untuk Elementor HTML Widget (paste seluruh isi file ini ke 1 widget HTML)\n     4 kartu Term ditaruh sebagai IMAGE PENUH (bukan dibangun pakai CSS+teks).\n     Tinggal upload 4 gambar kartu (Term 1-4) ke Media Library WP,\n     lalu update path src di 4 <img> di bawah.\n     ============================================================ -->\n\n<style>\n  .sa-wrap2 * { box-sizing: border-box; }\n  .sa-wrap2 { font-family: inherit; overflow: hidden; }\n\n  .sa-curric {\n    background-color: #FEF6E4;\n    width: 100vw;\n    max-width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    padding: 60px 20px 70px;\n  }\n\n  .sa-curric__inner {\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n\n  .sa-curric h2 {\n    color: #E5402C;\n    text-align: center;\n    font-size: clamp(24px, 3.6vw, 34px);\n    font-weight: 800;\n    font-family: inherit;\n    margin: 0 0 20px;\n  }\n\n  .sa-curric p.sa-curric__desc {\n    color: #E5402C;\n    text-align: center;\n    font-size: clamp(15px, 1.8vw, 19px);\n    line-height: 1.5;\n    font-family: inherit;\n    max-width: 820px;\n    margin: 0 auto 40px;\n  }\n\n  \/* Grid 4 kartu \u2014 tiap kartu cuma 1 gambar penuh, tanpa teks\/overlay tambahan *\/\n  .sa-curric__grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n  }\n\n  .sa-curric__grid img {\n    width: 100%;\n    height: auto;\n    display: block;\n    border-radius: 24px;\n  }\n\n  @media (max-width: 900px) {\n    .sa-curric__grid { grid-template-columns: repeat(2, 1fr); }\n  }\n\n  @media (max-width: 480px) {\n    .sa-curric__grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }\n  }\n<\/style>\n\n<div class=\"sa-wrap2\">\n\n  <!-- ===== Our Curriculum Progression ===== -->\n  <section class=\"sa-curric\">\n    <div class=\"sa-curric__inner\">\n      <h2>\ud83c\udf33 Our Curriculum Progression<\/h2>\n      <p class=\"sa-curric__desc\">\n        Our curriculum progression guides children through meaningful learning experiences, helping them build knowledge, confidence, and curiosity as they explore themselves, their community, animals, movement, and the world around them.\n      <\/p>\n\n      <div class=\"sa-curric__grid\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/SH_web_STUDYPROGRAMS-copy-2.jpg\" alt=\"Term 1 - Myself & My Community\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/SH_web_STUDYPROGRAMS-copy-2-2.jpg\" alt=\"Term 2 - Amazing Animals\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/SH_web_STUDYPROGRAMS-copy-2-3.jpg\" alt=\"Term 3 - Our World in Motion\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/SH_web_STUDYPROGRAMS-copy-2-4.jpg\" alt=\"Term 4 - Discover & Explore\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n  \/\/ Full-bleed fix: buka overflow parent Elementor yang ngunci,\n  \/\/ biar background section ini bisa selebar layar (100vw).\n  (function () {\n    function freeParents() {\n      document.querySelectorAll('.sa-curric').forEach(function (el) {\n        var node = el.parentElement;\n        while (node && node !== document.body) {\n          var cs = window.getComputedStyle(node);\n          if (\n            cs.overflowX === 'hidden' || cs.overflow === 'hidden' ||\n            cs.overflowX === 'clip'   || cs.overflow === 'clip'\n          ) {\n            node.style.setProperty('overflow', 'visible', 'important');\n            node.style.setProperty('overflow-x', 'visible', 'important');\n          }\n          node = node.parentElement;\n        }\n      });\n    }\n    freeParents();\n    document.addEventListener('DOMContentLoaded', freeParents);\n    window.addEventListener('load', freeParents);\n    [100, 500, 1000, 2000, 3500].forEach(function (t) { setTimeout(freeParents, t); });\n    if ('MutationObserver' in window) {\n      new MutationObserver(freeParents).observe(document.documentElement, {\n        attributes: true, subtree: true, attributeFilter: ['style', 'class']\n      });\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-fda85e4 e-con e-atomic-element e-flexbox-base e-3df8937 \" data-id=\"fda85e4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"fda85e4\">\n    \t\t<div class=\"elementor-element elementor-element-a06a585 elementor-widget elementor-widget-spacer\" data-id=\"a06a585\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dd4bc6c e-con e-atomic-element e-flexbox-base e-2ce6f6d \" data-id=\"dd4bc6c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dd4bc6c\">\n    \t\t<div class=\"elementor-element elementor-element-c792928 elementor-widget elementor-widget-html\" data-id=\"c792928\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n  SUNSHINE HEARTS PRESCHOOL \u2014 HOMEPAGE SECTIONS\n  Elementor HTML Widget \u2014 self-contained (scoped CSS + JS)\n  - Semua font pakai `inherit` dari theme\n  - Semua <img> src dikosongin: src=\"\" (isi manual \/ via Elementor)\n============================================================= -->\n<div class=\"shh\">\n\n\n  <!-- =========================================================\n       SECTION 4.5 \u2014 QUOTE BANNER (gambar kiri, teks kanan)\n  ========================================================== -->\n  <section class=\"shh-quote\">\n    <div class=\"shh-quote__grid\">\n\n      <div class=\"shh-quote__media\">\n        <span class=\"shh-quote__swirl\" aria-hidden=\"true\">\n          \n      <div class=\"shh-quote__text\">\n        <span class=\"shh-quote__flower\" aria-hidden=\"true\">\n          <!--<svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\">\n            <g fill=\"#F5C531\">\n              <circle cx=\"30\" cy=\"14\" r=\"10\"\/>\n              <circle cx=\"30\" cy=\"46\" r=\"10\"\/>\n              <circle cx=\"14\" cy=\"30\" r=\"10\"\/>\n              <circle cx=\"46\" cy=\"30\" r=\"10\"\/>\n            <\/g>\n            <circle cx=\"30\" cy=\"30\" r=\"9\" fill=\"#EA4624\"\/>\n          <\/svg>-->\n        <\/span>\n       \n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <!-- =========================================================\n       SECTION 5.5 \u2014 OUR DESIRED OUTCOME\n  ========================================================== -->\n  <section class=\"shh-outcome\">\n    <div class=\"shh-outcome__topcurve\" aria-hidden=\"true\">\n      <span class=\"shh-outcome__deco shh-outcome__deco--tree1\">\n        <svg viewBox=\"0 0 100 130\" width=\"100%\" height=\"100%\">\n          <rect x=\"44\" y=\"88\" width=\"12\" height=\"34\" rx=\"4\" fill=\"#6b4423\"\/>\n          <circle cx=\"50\" cy=\"52\" r=\"40\" fill=\"#4CAF50\"\/>\n        <\/svg>\n      <\/span>\n      <span class=\"shh-outcome__deco shh-outcome__deco--tree2\">\n        <svg viewBox=\"0 0 100 130\" width=\"100%\" height=\"100%\">\n          <rect x=\"44\" y=\"92\" width=\"12\" height=\"30\" rx=\"4\" fill=\"#6b4423\"\/>\n          <circle cx=\"50\" cy=\"58\" r=\"34\" fill=\"#5CB860\"\/>\n        <\/svg>\n      <\/span>\n      <span class=\"shh-outcome__deco shh-outcome__deco--bear\">\n        <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n          <circle cx=\"28\" cy=\"22\" r=\"12\" fill=\"#A9713F\"\/>\n          <circle cx=\"72\" cy=\"22\" r=\"12\" fill=\"#A9713F\"\/>\n          <circle cx=\"50\" cy=\"46\" r=\"34\" fill=\"#C08A50\"\/>\n          <circle cx=\"50\" cy=\"56\" r=\"16\" fill=\"#E7C79A\"\/>\n          <circle cx=\"42\" cy=\"40\" r=\"3\" fill=\"#3a2a1a\"\/>\n          <circle cx=\"58\" cy=\"40\" r=\"3\" fill=\"#3a2a1a\"\/>\n          <circle cx=\"50\" cy=\"50\" r=\"3\" fill=\"#3a2a1a\"\/>\n        <\/svg>\n      <\/span>\n      <span class=\"shh-outcome__deco shh-outcome__deco--flower1\">\n        <svg viewBox=\"0 0 60 90\" width=\"100%\" height=\"100%\">\n          <line x1=\"30\" y1=\"90\" x2=\"30\" y2=\"40\" stroke=\"#2f7d3a\" stroke-width=\"4\"\/>\n          <path d=\"M30 40 C20 40 14 30 22 24 C28 30 30 34 30 40Z\" fill=\"#2f7d3a\"\/>\n          <g fill=\"#E23B2E\"><circle cx=\"20\" cy=\"18\" r=\"9\"\/><circle cx=\"40\" cy=\"18\" r=\"9\"\/><circle cx=\"30\" cy=\"8\" r=\"9\"\/><circle cx=\"30\" cy=\"26\" r=\"9\"\/><\/g>\n          <circle cx=\"30\" cy=\"18\" r=\"6\" fill=\"#F5C531\"\/>\n        <\/svg>\n      <\/span>\n      <span class=\"shh-outcome__deco shh-outcome__deco--flower2\">\n        <svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\">\n          <g fill=\"#9F6495\"><circle cx=\"30\" cy=\"14\" r=\"10\"\/><circle cx=\"30\" cy=\"46\" r=\"10\"\/><circle cx=\"14\" cy=\"30\" r=\"10\"\/><circle cx=\"46\" cy=\"30\" r=\"10\"\/><\/g>\n          <circle cx=\"30\" cy=\"30\" r=\"8\" fill=\"#F5C531\"\/>\n        <\/svg>\n      <\/span>\n    <\/div>\n\n    <div class=\"shh-deco shh-deco--dash-yellow\" aria-hidden=\"true\"><\/div>\n    <div class=\"shh-deco shh-deco--dash-orange\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"shh-wrap shh-outcome__grid\">\n      <div class=\"shh-outcome__text\">\n        <h2 class=\"shh-h2 shh-h2--onlight\">Our Desired Outcome<\/h2>\n        <p class=\"shh-lead shh-lead--onlight\">\n          At Sunshine Hearts Preschool, we aim to develop children who approach learning with confidence, build positive relationships with care and respect, and navigate daily challenges with competence. These qualities form the foundation for future growth, well-being, and lifelong success.\n        <\/p>\n\n        <ol class=\"shh-outcome__list\">\n          <li><span class=\"shh-outcome__num\">1<\/span><span class=\"shh-outcome__label\">Confident in Learning<\/span><\/li>\n          <li><span class=\"shh-outcome__num\">2<\/span><span class=\"shh-outcome__label\">Caring in Relationships<\/span><\/li>\n          <li><span class=\"shh-outcome__num\">3<\/span><span class=\"shh-outcome__label\">Competent in Life<\/span><\/li>\n        <\/ol>\n      <\/div>\n\n      <div class=\"shh-outcome__media\">\n        <span class=\"shh-outcome__cloud shh-outcome__cloud--tl\" aria-hidden=\"true\">\n          <!--<svg viewBox=\"0 0 120 70\" width=\"100%\" height=\"100%\"><ellipse cx=\"55\" cy=\"42\" rx=\"46\" ry=\"26\" fill=\"#7FC1E8\"\/><\/svg>-->\n        <\/span>\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_094504_cb4f4494-b271-4137-a0ed-f0ec24f26e28.png\" alt=\"\">\n        <span class=\"shh-outcome__cloud shh-outcome__cloud--br\" aria-hidden=\"true\">\n          <!--<svg viewBox=\"0 0 120 70\" width=\"100%\" height=\"100%\"><ellipse cx=\"55\" cy=\"42\" rx=\"46\" ry=\"26\" fill=\"#7FC1E8\"\/><\/svg>-->\n        <\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"shh-wrap shh-outcome__formula\">\n      <div class=\"shh-outcome__circles\">\n        <div class=\"shh-outcome__circle\">\n          <span class=\"shh-outcome__icon\">\n            <svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\"><path d=\"M30 14 L54 24 L30 34 L6 24 Z\" fill=\"#fff\"\/><path d=\"M16 28 L16 40 C16 44 22 47 30 47 C38 47 44 44 44 40 L44 28\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"\/><line x1=\"54\" y1=\"24\" x2=\"54\" y2=\"38\" stroke=\"#fff\" stroke-width=\"3\"\/><\/svg>\n          <\/span>\n          <span class=\"shh-outcome__circle-label\">Academic<br>Foundation<\/span>\n        <\/div>\n\n        <span class=\"shh-outcome__plus\" aria-hidden=\"true\">+<\/span>\n\n        <div class=\"shh-outcome__circle\">\n          <span class=\"shh-outcome__icon shh-outcome__icon--white-bg\">\n            <svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\"><path d=\"M30 46 C10 32 8 16 20 12 C26 10 30 16 30 20 C30 16 34 10 40 12 C52 16 50 32 30 46Z\" fill=\"#EA4624\"\/><\/svg>\n          <\/span>\n          <span class=\"shh-outcome__circle-label\">Character<br>Development<\/span>\n        <\/div>\n\n        <span class=\"shh-outcome__plus\" aria-hidden=\"true\">+<\/span>\n\n        <div class=\"shh-outcome__circle\">\n          <span class=\"shh-outcome__icon shh-outcome__icon--white-bg\">\n            <svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\">\n              <circle cx=\"30\" cy=\"30\" r=\"20\" fill=\"#37A5D1\"\/>\n              <path d=\"M10 30 C16 22 44 22 50 30 M10 30 C16 38 44 38 50 30 M30 10 C22 18 22 42 30 50 M30 10 C38 18 38 42 30 50\" stroke=\"#fff\" stroke-width=\"2\" fill=\"none\"\/>\n            <\/svg>\n          <\/span>\n          <span class=\"shh-outcome__circle-label\">Meaningful<br>Experiences<\/span>\n        <\/div>\n      <\/div>\n\n      <p class=\"shh-outcome__equals\">= confident learners who are ready for school and life.<\/p>\n    <\/div>\n\n    <!-- ground biru \u2014 reuse pola .shh-ground (Our Programs) tapi navy -->\n    <div class=\"shh-outcome__ground\" aria-hidden=\"true\">\n      <div class=\"shh-outcome__ground-scallop\">\n        <div class=\"shh-outcome__ground-scallop-track\">\n          <svg viewBox=\"0 0 1200 34\" preserveAspectRatio=\"none\">\n            <path d=\"M0,24.0 L10,22.66 L20,19.16 L30,14.84 L40,11.34 L50,10.0 L60,11.34 L70,14.84 L80,19.16 L90,22.66 L100,24.0 L110,22.66 L120,19.16 L130,14.84 L140,11.34 L150,10.0 L160,11.34 L170,14.84 L180,19.16 L190,22.66 L200,24.0 L210,22.66 L220,19.16 L230,14.84 L240,11.34 L250,10.0 L260,11.34 L270,14.84 L280,19.16 L290,22.66 L300,24.0 L310,22.66 L320,19.16 L330,14.84 L340,11.34 L350,10.0 L360,11.34 L370,14.84 L380,19.16 L390,22.66 L400,24.0 L410,22.66 L420,19.16 L430,14.84 L440,11.34 L450,10.0 L460,11.34 L470,14.84 L480,19.16 L490,22.66 L500,24.0 L510,22.66 L520,19.16 L530,14.84 L540,11.34 L550,10.0 L560,11.34 L570,14.84 L580,19.16 L590,22.66 L600,24.0 L610,22.66 L620,19.16 L630,14.84 L640,11.34 L650,10.0 L660,11.34 L670,14.84 L680,19.16 L690,22.66 L700,24.0 L710,22.66 L720,19.16 L730,14.84 L740,11.34 L750,10.0 L760,11.34 L770,14.84 L780,19.16 L790,22.66 L800,24.0 L810,22.66 L820,19.16 L830,14.84 L840,11.34 L850,10.0 L860,11.34 L870,14.84 L880,19.16 L890,22.66 L900,24.0 L910,22.66 L920,19.16 L930,14.84 L940,11.34 L950,10.0 L960,11.34 L970,14.84 L980,19.16 L990,22.66 L1000,24.0 L1010,22.66 L1020,19.16 L1030,14.84 L1040,11.34 L1050,10.0 L1060,11.34 L1070,14.84 L1080,19.16 L1090,22.66 L1100,24.0 L1110,22.66 L1120,19.16 L1130,14.84 L1140,11.34 L1150,10.0 L1160,11.34 L1170,14.84 L1180,19.16 L1190,22.66 L1200,24.0 L1200,34 L0,34 Z\" fill=\"#FFF6E7\"><\/path>\n          <\/svg>\n          <svg viewBox=\"0 0 1200 34\" preserveAspectRatio=\"none\">\n            <path d=\"M0,24.0 L10,22.66 L20,19.16 L30,14.84 L40,11.34 L50,10.0 L60,11.34 L70,14.84 L80,19.16 L90,22.66 L100,24.0 L110,22.66 L120,19.16 L130,14.84 L140,11.34 L150,10.0 L160,11.34 L170,14.84 L180,19.16 L190,22.66 L200,24.0 L210,22.66 L220,19.16 L230,14.84 L240,11.34 L250,10.0 L260,11.34 L270,14.84 L280,19.16 L290,22.66 L300,24.0 L310,22.66 L320,19.16 L330,14.84 L340,11.34 L350,10.0 L360,11.34 L370,14.84 L380,19.16 L390,22.66 L400,24.0 L410,22.66 L420,19.16 L430,14.84 L440,11.34 L450,10.0 L460,11.34 L470,14.84 L480,19.16 L490,22.66 L500,24.0 L510,22.66 L520,19.16 L530,14.84 L540,11.34 L550,10.0 L560,11.34 L570,14.84 L580,19.16 L590,22.66 L600,24.0 L610,22.66 L620,19.16 L630,14.84 L640,11.34 L650,10.0 L660,11.34 L670,14.84 L680,19.16 L690,22.66 L700,24.0 L710,22.66 L720,19.16 L730,14.84 L740,11.34 L750,10.0 L760,11.34 L770,14.84 L780,19.16 L790,22.66 L800,24.0 L810,22.66 L820,19.16 L830,14.84 L840,11.34 L850,10.0 L860,11.34 L870,14.84 L880,19.16 L890,22.66 L900,24.0 L910,22.66 L920,19.16 L930,14.84 L940,11.34 L950,10.0 L960,11.34 L970,14.84 L980,19.16 L990,22.66 L1000,24.0 L1010,22.66 L1020,19.16 L1030,14.84 L1040,11.34 L1050,10.0 L1060,11.34 L1070,14.84 L1080,19.16 L1090,22.66 L1100,24.0 L1110,22.66 L1120,19.16 L1130,14.84 L1140,11.34 L1150,10.0 L1160,11.34 L1170,14.84 L1180,19.16 L1190,22.66 L1200,24.0 L1200,34 L0,34 Z\" fill=\"#FFF6E7\"><\/path>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- =========================================================\n       SECTION 5 \u2014 ENROLL FORM\n  ========================================================== -->\n\n\n<\/div>\n\n<style>\n  .shh{\n    --sh-cream:#FFF6E7;\n    --sh-orange:#EA4624;\n    --sh-orange-dark:#EA4624;\n    --sh-purple:#9F6495;\n    --sh-blue:#37A5D1;\n    --sh-pink:#EF5094;\n    --sh-yellow-card:#FBAF17;\n    --sh-navy:#3454A4;\n    --sh-yellow:#F5C531;\n    --sh-yellow-dark:#E0AF1E;\n    --sh-green:#2E9B4A;\n    --sh-green-dark:#227A38;\n    --sh-testi-purple:#B65EA5;\n    --sh-ink:#241f1a;\n    --sh-white:#ffffff;\n    --sh-radius-lg:28px;\n    --sh-maxw:1200px;\n\n    position:relative;\n    background:var(--sh-cream);\n    color:var(--sh-ink);\n    font-family:inherit;\n    overflow-x:hidden;\n  }\n  .shh *,\n  .shh *::before,\n  .shh *::after{ box-sizing:border-box; font-family:inherit; }\n  .shh img{ max-width:100%; display:block; border:0; }\n\n  .shh-wrap{\n    position:relative;\n    z-index:2;\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    padding:0 24px;\n  }\n\n  \/* ---------- typography helpers ---------- *\/\n  .shh-eyebrow{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:10px;\n    font-size:1.1rem;\n    font-weight:700;\n    color:var(--sh-orange);\n    margin:0 0 8px;\n  }\n  .shh-eyebrow--left{ justify-content:flex-start; }\n  .shh-eyebrow__icon{ font-size:1.2rem; }\n\n  .shh-h2{\n    font-size:2.1rem;\n    font-weight:800;\n    color:var(--sh-orange-dark);\n    line-height:1.2;\n    margin:0 0 16px;\n  }\n  .shh-h2--center{ text-align:center; }\n  .shh-h2--onlight{ color:var(--sh-white); }\n\n  .shh-lead{\n    font-size:1.02rem;\n    line-height:1.65;\n    color:#EA4624;\n    margin:0 0 24px;\n    max-width:70ch;\n  }\n  .shh-lead--center{ text-align:center; margin-left:auto; margin-right:auto; }\n  .shh-lead--onlight{ color:#fff; opacity:.95; }\n\n  .shh-btn{\n    display:inline-block;\n    font-weight:700;\n    text-decoration:none;\n    border:none;\n    cursor:pointer;\n    border-radius:999px;\n    padding:14px 30px;\n    font-size:1rem;\n    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;\n  }\n  .shh-btn--yellow{\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    box-shadow:0 6px 0 var(--sh-yellow-dark);\n  }\n  .shh-btn--yellow:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--sh-yellow-dark); }\n  .shh-btn--green{\n    background:var(--sh-green);\n    color:#fff;\n    box-shadow:0 6px 0 var(--sh-green-dark);\n  }\n  .shh-btn--green:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--sh-green-dark); }\n  .shh-btn:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:3px; }\n\n  \/* =========================================================\n     SCALLOP SEPARATOR (reusable, marquee)\n  ========================================================== *\/\n  .sa-scallop{\n    position:absolute;\n    left:0;\n    width:100%;\n    height:20px;\n    overflow:hidden;\n    line-height:0;\n    z-index:3;\n  }\n  .sa-scallop--top{ top:-1px; }\n  .sa-scallop--bottom{ bottom:-1px; transform:scaleY(-1); }\n  .sa-scallop__track{\n    display:flex;\n    width:200%;\n    animation:sa-scallop-marquee 18s linear infinite;\n  }\n  .sa-scallop__track svg{\n    width:50%;\n    height:20px;\n    display:block;\n    flex-shrink:0;\n  }\n  @keyframes sa-scallop-marquee{\n    from{ transform:translateX(0); }\n    to{ transform:translateX(-50%); }\n  }\n\n  \/* =========================================================\n     SECTION 1 \u2014 VALUES\n  ========================================================== *\/\n  .shh-values{\n    position:relative;\n    padding:70px 0 0;\n    overflow:hidden;\n  }\n  .shh-values__curve{\n  position:absolute;\n  left:0;\n  top:410px;\n  right:0;\n  bottom:0;\n  background:var(--sh-orange);\n  clip-path: ellipse(75% 100% at 50% 100%);\n  z-index:0;\n}\n  .shh-values__top{ position:relative; z-index:2; margin-bottom:40px; }\n\n  .shh-cards-grid{\n    position:relative;\n    z-index:2;\n    display:flex;\n    flex-direction:column;\n    gap:26px;\n    align-items:center;\n  }\n  .shh-cards-row{\n    display:flex;\n    gap:26px;\n    justify-content:center;\n    flex-wrap:wrap;\n    width:100%;\n  }\n  .shh-cards-row--two{ max-width:600px; }\n  .shh-cards-row--three{ max-width:100%; margin-top:6px; }\n\n  .shh-vcard{\n    flex:1 1 280px;\n    width:280px;\n    max-width:280px;\n    border-radius:22px;\n    overflow:hidden;\n    box-shadow:0 14px 28px rgba(0,0,0,.18);\n    background:#fff;\n    display:flex;\n    flex-direction:column;\n  }\n  .shh-vcard__head{\n    padding:24px 20px;\n    text-align:center;\n    color:#fff;\n    min-height:118px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n  }\n  .shh-vcard__head h3{ font-size:1.28rem; font-weight:800; margin:0 0 8px; line-height:1.25; color:#fff !important;}\n  .shh-vcard__head p{ font-size:.92rem; margin:0; opacity:.95; }\n  .shh-vcard__media{ height:170px; background:#d8d8d8; }\n  .shh-vcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }\n  \n  .shh-outcome{\n  position:relative;\n  background:var(--sh-navy);\n  padding:220px 0 0 !importanti;   \/* dari 170px \u2192 naikin *\/\n  overflow:hidden;\n}\n\n  .shh-vcard--purple .shh-vcard__head{ background:var(--sh-purple); }\n  .shh-vcard--blue .shh-vcard__head{ background:var(--sh-blue); }\n  .shh-vcard--pink .shh-vcard__head{ background:var(--sh-pink); }\n  .shh-vcard--yellow .shh-vcard__head{ background:var(--sh-yellow-card); }\n  .shh-vcard--navy .shh-vcard__head{ background:var(--sh-navy); }\n\n  .shh-swirl{ width:70px; height:70px; margin:34px auto 0; opacity:.9; }\n\n  \/* programs *\/\n  .shh-programs{ position:relative; z-index:2; padding:90px 24px 60px; text-align:center; }\n  .shh-carousel{\n    position:relative;\n    display:flex;\n    align-items:center;\n    gap:22px;\n    max-width:980px;\n    margin:44px auto 0;\n  }\n  .shh-carousel__track{\n    flex:1;\n    background:transparent;\n    overflow:visible;\n  }\n  .shh-carousel__slide{\n    display:flex;\n    gap:26px;\n  }\n  .shh-arrow{\n    flex:0 0 auto;\n    width:44px;\n    height:44px;\n    border-radius:50%;\n    border:none;\n    background:var(--sh-navy);\n    color:#fff;\n    font-size:1rem;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s ease, transform .15s ease;\n  }\n  .shh-arrow:hover{ background:#1e3874; transform:scale(1.06); }\n  .shh-arrow:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:2px; }\n\n  .shh-pcard{\n    flex:1 1 0;\n    display:flex;\n    flex-direction:column;\n    gap:16px;\n    text-align:left;\n    background:#fff;\n    border-radius:var(--sh-radius-lg);\n    padding:22px 22px 30px;\n    box-shadow:0 16px 34px rgba(0,0,0,.2);\n  }\n  .shh-pcard__media{ border-radius:18px; overflow:hidden; height:230px; background:#d8d8d8; }\n  .shh-pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }\n  .shh-pcard__body{ margin-top:auto; }\n  .shh-pcard__title{ font-size:1.5rem; font-weight:800; color:var(--sh-orange-dark); margin:0; }\n  .shh-pcard__title em{ font-style:normal; font-weight:600; color:#7a6f65; font-size:1rem; }\n  .shh-pcard__body p{ font-size:.95rem; line-height:1.6; color:#EA4624; margin:0; }\n\n  \/* ground \u2014 hill hijau kiri saja + scallop wave full-width *\/\n  .shh-ground{\n    position:relative;\n    z-index:2;\n    height:210px;\n    background:var(--sh-orange);\n    overflow:hidden;\n  }\n  .shh-ground__hill{\n    position:absolute;\n    left:0; bottom:0;\n    width:40%;\n    height:100%;\n    z-index:1;\n  }\n  .shh-ground__hill svg{ width:100%; height:100%; display:block; }\n\n  .shh-ground__tree{ position:absolute; left:1%; bottom:46px; width:84px; height:112px; z-index:2; }\n  .shh-ground__flower{ position:absolute; left:13%; bottom:42px; width:26px; height:50px; z-index:2; }\n  .shh-ground__giraffe{ position:absolute; right:6%; bottom:0; width:78px; height:140px; z-index:2; }\n\n  .shh-ground__scallop{\n    position:absolute;\n    left:0; right:0; bottom:0;\n    height:34px;\n    z-index:3;\n    line-height:0;\n    overflow:hidden;\n  }\n  .shh-ground__scallop-track{\n    display:flex;\n    width:200%;\n    animation:sa-scallop-marquee 18s linear infinite;\n  }\n  .shh-ground__scallop-track svg{ width:50%; height:34px; display:block; flex-shrink:0; }\n\n  \/* =========================================================\n     SECTION 2 \u2014 CURRICULUM\n  ========================================================== *\/\n  .shh-curriculum{ padding:80px 0; position:relative; }\n  .shh-curriculum__grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:50px;\n    align-items:center;\n  }\n  .shh-steps{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:420px; }\n  .shh-steps__item{ display:flex; align-items:center; gap:14px; }\n  .shh-steps__num{\n    flex:0 0 auto;\n    width:34px; height:34px;\n    border-radius:50%;\n    background:var(--sh-blue);\n    color:#fff;\n    font-weight:800;\n    display:flex; align-items:center; justify-content:center;\n    font-size:.95rem;\n  }\n  .shh-steps__label{\n    flex:1;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    font-weight:700;\n    padding:12px 20px;\n    border-radius:999px;\n    font-size:.95rem;\n  }\n\n  .shh-curriculum__media{ position:relative; }\n  .shh-curriculum__img{\n    width:100%;\n    aspect-ratio:1\/1.05;\n    object-fit:cover;\n    border-radius:22px;\n    \n  }\n  .shh-swirl--curriculum{ position:absolute; top:-30px; right:10%; width:60px; height:60px; z-index:1; }\n  .shh-cloud--curriculum{ position:absolute; top:-10px; left:-6%; width:100px; height:60px; z-index:1; }\n  .shh-chick{ width:70px; height:70px; }\n  .shh-chick--curriculum,\n  .shh-curriculum__media .shh-chick{ position:absolute; left:-6%; bottom:-20px; z-index:3; }\n\n  \/* =========================================================\n     SECTION 3 \u2014 TESTIMONIALS\n  ========================================================== *\/\n  .shh-testi{\n    position:relative;\n    background:var(--sh-testi-purple);\n    padding:80px 0;\n    overflow:hidden;\n  }\n  .shh-deco{ position:absolute; z-index:1; pointer-events:none; }\n  .shh-deco--sun{ top:6%; left:6%; width:60px; height:60px; }\n  .shh-deco--tree2{ bottom:6%; right:6%; width:90px; height:110px; opacity:.9; }\n  .shh-deco--flower{ bottom:10%; right:16%; width:50px; height:50px; }\n  .shh-deco--dash{\n    left:4%; bottom:20%; width:180px; height:0;\n    border-top:3px dashed #fff; opacity:.4; transform:rotate(-6deg); display: none;\n  }\n\n  .shh-carousel--testi{ max-width:960px; }\n  .shh-carousel--testi .shh-carousel__track{ background:transparent; box-shadow:none; padding:0; }\n  .shh-carousel--testi .shh-arrow{ background:#fff; color:var(--sh-testi-purple); }\n  .shh-carousel--testi .shh-arrow:hover{ background:#f1e6f7; }\n\n  .shh-testi__item{ display:flex; align-items:center; gap:40px; }\n  .shh-testi__photo{\n    flex:0 0 auto;\n    width:200px; height:200px;\n    border-radius:50%;\n    border:0px solid var(--sh-yellow);\n    overflow:hidden;\n    background:#d8d8d8;\n    \n  }\n  .shh-testi__photo img{ width:100%; height:100%; object-fit:cover; }\n  .shh-testi__content{ position:relative; color:#fff; text-align:center; }\n  .shh-testi__content p{ font-size:1rem; line-height:1.65; margin:0 0 14px; }\n  .shh-testi__quote{ font-size:2.4rem; color:var(--sh-yellow); font-weight:800; line-height:1; display:block; }\n  .shh-testi__quote--open{ text-align:left; margin-bottom:-10px; }\n  .shh-testi__quote--close{ text-align:right; margin-top:-10px; }\n  .shh-testi__name{ color:var(--sh-yellow); font-size:.95rem; margin-top:10px !important; }\n\n  \/* =========================================================\n     SECTION 4 \u2014 EVENTS\n  ========================================================== *\/\n  .shh-event{ padding:80px 0; }\n  .shh-event__grid{\n    display:grid;\n    grid-template-columns: 7fr 3fr;\n\n    gap:50px;\n    align-items:center;\n  }\n  .shh-event__media{ position:relative; }\n  .shh-event__media img{\n    width:100%;\n    height:auto;\n    object-fit:contain;\n    border-radius:20px;\n    display:block;\n  }\n  .shh-event__btn{ position:absolute; left:24px; bottom:24px; }\n  .shh-deco--rabbit{ position:absolute; top:-24px; right:8%; width:60px; height:80px; }\n\n  \/* =========================================================\n     SECTION 4.5 \u2014 QUOTE BANNER (gambar kiri, teks kanan)\n  ========================================================== *\/\n  .shh-quote{ padding:60px 24px 10px; position:relative; }\n  .shh-quote__grid{\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    display:grid;\n    grid-template-columns:0.8fr 1.2fr;\n    align-items:start;\n    gap:48px;\n  }\n\n  .shh-quote__media{\n    position:relative;\n    display:flex;\n    justify-content:flex-start;\n    align-items:flex-start;\n  }\n  .shh-quote__circle{\n    position:relative;\n    width:100%;\n    max-width:400px;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    overflow:visible;\n    z-index:2;\n  }\n  .shh-quote__circle img{\n    width:100%;\n    height:auto;\n    object-fit:contain;\n    display:block;\n  }\n  .shh-quote__swirl{\n    position:absolute;\n    left:-4%;\n    bottom:6%;\n    width:64px;\n    height:64px;\n    z-index:1;\n  }\n\n  .shh-quote__text{ position:relative; text-align:left; }\n  .shh-quote__flower{\n    position:absolute;\n    top:-46px;\n    right:4%;\n    width:44px;\n    height:44px;\n  }\n  .shh-quote__text p{\n    font-size:clamp(1.15rem, 2.2vw, 1.55rem);\n    font-weight:800;\n    line-height:1.4;\n    color:var(--sh-navy);\n    margin:0;\n  }\n  .shh-quote__text p strong{ color:var(--sh-orange-dark); }\n\n  \/* =========================================================\n     SECTION 5.5 \u2014 OUR DESIRED OUTCOME\n  ========================================================== *\/\n  .shh-outcome{\n    position:relative;\n    background:var(--sh-navy);\n    padding:270px 0 0;\n    overflow:hidden;\n    \/* full-bleed fix: lepas dari padding parent container, nempel penuh kiri-kanan *\/\n    width:100vw;\n    margin-left:calc(50% - 50vw);\n    margin-right:calc(50% - 50vw);\n  }\n  .shh-outcome__topcurve{\n    position:absolute;\n    top:0; left:0; right:0;\n    height:230px;\n    background:var(--sh-cream);\n    clip-path: ellipse(72% 100% at 50% 0%);\n    z-index:1;\n  }\n  .shh-outcome__deco{ position:absolute; z-index:2; }\n  .shh-outcome__deco--tree1{ left:9%; top:14px; width:64px; height:84px; }\n  .shh-outcome__deco--tree2{ left:20%; top:44px; width:80px; height:104px; }\n  .shh-outcome__deco--bear{ left:38%; top:36px; width:86px; height:86px; }\n  .shh-outcome__deco--flower1{ left:52%; top:70px; width:44px; height:66px; }\n  .shh-outcome__deco--flower2{ right:14%; top:20px; width:44px; height:44px; }\n\n  .shh-deco--dash-yellow,\n  .shh-deco--dash-orange{\n    position:absolute;\n    width:150px; height:150px;\n    border:2px dashed;\n    border-radius:50%;\n    z-index:0;\n    opacity:.55;\n  }\n  .shh-deco--dash-yellow{ left:-40px; bottom:26%; border-color:var(--sh-yellow); }\n  .shh-deco--dash-orange{ right:-40px; top:12%; border-color:var(--sh-orange); }\n\n  .shh-outcome__grid{\n    position:relative;\n    z-index:2;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    align-items:center;\n    gap:50px;\n    margin-top:20px;\n  }\n  .shh-outcome__text .shh-h2{ margin-bottom:18px; }\n\n  .shh-outcome__list{\n    list-style:none;\n    margin:28px 0 0;\n    padding:0;\n    display:flex;\n    flex-direction:column;\n    gap:14px;\n    max-width:400px;\n  }\n  .shh-outcome__list li{ display:flex; align-items:center; gap:0; }\n  .shh-outcome__num{\n    flex:0 0 auto;\n    width:44px; height:44px;\n    border-radius:50%;\n    background:var(--sh-pink);\n    color:#fff;\n    font-weight:800;\n    font-size:1.1rem;\n    display:flex; align-items:center; justify-content:center;\n    z-index:2;\n    box-shadow:0 4px 0 rgba(0,0,0,.12);\n  }\n  .shh-outcome__label{\n    flex:1;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    font-weight:700;\n    font-size:.98rem;\n    padding:12px 22px 12px 30px;\n    border-radius:999px;\n    margin-left:-20px;\n  }\n\n  .shh-outcome__media{ position:relative; }\n  .shh-outcome__media img{\n    width:100%;\n    height:auto;\n    object-fit:contain;\n    border-radius:40px 22px 22px 22px;\n    background:#d8d8d8;\n    position:relative;\n    z-index:2;\n  }\n  .shh-outcome__cloud{ position:absolute; width:100px; height:60px; z-index:1; }\n  .shh-outcome__cloud--tl{ top:-26px; right:14%; }\n  .shh-outcome__cloud--br{ bottom:-24px; left:6%; }\n\n  .shh-outcome__formula{\n    position:relative;\n    z-index:2;\n    margin-top:90px;\n    text-align:center;\n    padding-bottom:90px;\n    margin-bottom: 60px !important;\n  }\n  .shh-outcome__circles{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    flex-wrap:wrap;\n  }\n  .shh-outcome__circle{\n    width:230px; height:230px;\n    border-radius:50%;\n    background:var(--sh-orange-dark);\n    color:#fff;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n    gap:14px;\n    margin:0 -14px;\n  }\n  .shh-outcome__icon{ width:56px; height:56px; }\n  .shh-outcome__icon--white-bg{\n    background:#fff;\n    border-radius:50%;\n    padding:12px;\n    width:56px; height:56px;\n  }\n  .shh-outcome__circle-label{ font-weight:800; font-size:1.05rem; line-height:1.3; }\n  .shh-outcome__plus{\n    width:40px; height:40px;\n    border-radius:50%;\n    background:#fff;\n    color:var(--sh-orange-dark);\n    font-weight:800;\n    font-size:1.3rem;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    z-index:3;\n    flex:0 0 auto;\n  }\n  .shh-outcome__equals{\n    color:#fff;\n    font-weight:800;\n    font-size:clamp(1.1rem, 2.2vw, 1.4rem);\n    margin:44px 0 0;\n  }\n\n  \/* ground biru \u2014 reuse pola .shh-ground (Our Programs) tapi navy *\/\n  .shh-outcome__ground{\n    position:relative;\n    z-index:2;\n    height:34px;\n    background:var(--sh-navy);\n    overflow:hidden;\n  }\n  .shh-outcome__ground-scallop{\n    position:absolute;\n    left:0; right:0; bottom:0;\n    height:34px;\n    z-index:3;\n    line-height:0;\n    overflow:hidden;\n  }\n  .shh-outcome__ground-scallop-track{\n    display:flex;\n    width:200%;\n    animation:sa-scallop-marquee 18s linear infinite;\n  }\n  .shh-outcome__ground-scallop-track svg{ width:50%; height:34px; display:block; flex-shrink:0; }\n\n  \/* =========================================================\n     SECTION 5 \u2014 ENROLL\n  ========================================================== *\/\n  .shh-enroll{ padding:60px 24px; position:relative; }\n  .shh-enroll__grid{\n    display:grid;\n    grid-template-columns:1.1fr 0.9fr;\n    align-items:stretch;\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    border-radius:32px;\n    overflow:hidden;\n    \/*box-shadow:0 20px 44px rgba(0,0,0,.16);*\/\n  }\n  .shh-enroll__form{\n    position:relative;\n    background:var(--sh-orange);\n    padding:70px 60px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n    overflow:hidden;\n  }\n  .shh-enroll__leaf{ position:absolute; top:60px; right:80px; font-size:2rem; }\n  .shh-enroll__title{ margin-bottom:34px; }\n\n  .shh-form{ display:flex; flex-direction:column; gap:18px; max-width:520px; }\n  .shh-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }\n  .shh-form__field label{ display:block; color:#fff; font-weight:700; font-size:.92rem; margin-bottom:8px; }\n  .shh-form__field input,\n  .shh-form__field textarea{\n    width:100%;\n    border:none;\n    border-radius:14px;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    padding:14px 18px;\n    font-size:.95rem;\n    resize:vertical;\n  }\n  .shh-form__field input::placeholder,\n  .shh-form__field textarea::placeholder{ color:#7a6a2e; }\n  .shh-form__field input:focus-visible,\n  .shh-form__field textarea:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:2px; }\n  .shh-form .shh-btn--green{ align-self:flex-start; margin-top:6px; }\n\n  .shh-chick--enroll{ position:absolute; left:40px; bottom:20px; width:60px; height:60px; }\n\n  .shh-enroll__media img{ width:100%; height:100%; min-height:420px; object-fit:cover; background:#d8d8d8; }\n\n  \/* =========================================================\n     RESPONSIVE\n  ========================================================== *\/\n  @media (max-width: 1024px){\n    .shh-curriculum__grid,\n    .shh-event__grid,\n    .shh-quote__grid,\n    .shh-outcome__grid{ grid-template-columns:1fr; }\n    .shh-event__media{ order:-1; }\n    .shh-enroll__grid{ grid-template-columns:1fr; }\n    .shh-enroll__media img{ min-height:320px; }\n    .shh-quote__text{ text-align:left; }\n    .shh-quote__flower{ right:4%; transform:none; top:-46px; }\n    .shh-outcome__circle{ width:190px; height:190px; }\n  }\n\n  @media (max-width: 760px){\n    .shh-values__curve{ top:340px; }\n    .shh-h2{ font-size:1.6rem; }\n    .shh-vcard{ max-width:340px; }\n    .shh-testi__item{ flex-direction:column; text-align:center; gap:24px; }\n    .shh-testi__photo{ width:150px; height:150px; }\n    .shh-form__row{ grid-template-columns:1fr; }\n    .shh-enroll__form{ padding:50px 26px; }\n    .shh-pcard__media{ height:130px; }\n    .shh-quote{ padding:44px 20px 0; }\n    .shh-quote__circle{ max-width:280px; }\n    .shh-outcome{ padding:150px 0 0; }\n    .shh-outcome__topcurve{ height:190px; }\n    .shh-outcome__deco--tree1,\n    .shh-outcome__deco--tree2,\n    .shh-outcome__deco--bear,\n    .shh-outcome__deco--flower1,\n    .shh-outcome__deco--flower2{ transform:scale(.78); }\n    .shh-outcome__circles{ flex-direction:column; gap:10px; }\n    .shh-outcome__circle{ margin:0; width:220px; height:220px; }\n    .shh-outcome__plus{ margin:-4px 0; }\n    .shh-deco--dash-yellow,\n    .shh-deco--dash-orange{ width:100px; height:100px; }\n  }\n\n  @media (max-width: 560px){\n    .shh-carousel__slide{ flex-direction:column; }\n    .shh-ground{ height:110px; }\n    .shh-ground__tree,\n    .shh-ground__giraffe,\n    .shh-deco--tree2,\n    .shh-deco--rabbit,\n    .shh-swirl--curriculum,\n    .shh-cloud--curriculum{ display:none; }\n    .shh-testi{ padding:60px 0; }\n    .shh-event, .shh-curriculum{ padding:56px 0; }\n    .sa-scallop{ height:12px; }\n    .sa-scallop__track svg{ height:12px; }\n    .shh-ground__scallop{ height:16px; }\n    .shh-ground__scallop-track svg{ height:16px; }\n    .shh-quote__circle{ max-width:220px; }\n    .shh-quote__swirl{ width:48px; height:48px; }\n    .shh-outcome__topcurve{ height:150px; }\n    .shh-outcome__deco--bear{ left:32%; }\n    .shh-outcome__circle{ width:180px; height:180px; }\n    .shh-outcome__label{ font-size:.88rem; padding:10px 18px 10px 26px; }\n    .shh-outcome__ground,\n    .shh-outcome__ground-scallop{ height:16px; }\n    .shh-outcome__ground-scallop-track svg{ height:16px; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .shh-btn, .shh-arrow{ transition:none; }\n    .sa-scallop__track,\n    .shh-ground__scallop-track,\n    .shh-outcome__ground-scallop-track{ animation:none !important; }\n  }\n<\/style>\n\n<script>\n(function(){\n  var carousels = document.querySelectorAll('.shh [data-shh-carousel]');\n  carousels.forEach(function(car){\n    var slides = car.querySelectorAll('[data-shh-slide]');\n    var index = 0;\n    var prevBtn = car.querySelector('[data-shh-prev]');\n    var nextBtn = car.querySelector('[data-shh-next]');\n    if(slides.length <= 1){\n      \/\/ hanya satu slide: tombol tetap ada untuk konsistensi visual,\n      \/\/ siap dipakai kalau slide ditambah kemudian\n      return;\n    }\n    function show(i){\n      slides.forEach(function(s, idx){ s.style.display = (idx === i) ? 'flex' : 'none'; });\n    }\n    show(index);\n    if(prevBtn){\n      prevBtn.addEventListener('click', function(){\n        index = (index - 1 + slides.length) % slides.length;\n        show(index);\n      });\n    }\n    if(nextBtn){\n      nextBtn.addEventListener('click', function(){\n        index = (index + 1) % slides.length;\n        show(index);\n      });\n    }\n  });\n\n  var form = document.querySelector('.shh [data-shh-form]');\n  if(form){\n    form.addEventListener('submit', function(e){\n      e.preventDefault();\n      \/\/ TODO: sambungkan ke handler submit (AJAX \/ Elementor Form Action \/ email)\n      alert('Terima kasih! Form akan diteruskan setelah backend submit dihubungkan.');\n    });\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-3e3771e e-con e-atomic-element e-flexbox-base e-eca8fdd \" data-id=\"3e3771e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3e3771e\">\n    \t\t<div class=\"elementor-element elementor-element-abb915b elementor-widget elementor-widget-html\" data-id=\"abb915b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n  SUNSHINE HEARTS PRESCHOOL \u2014 HOMEPAGE SECTIONS\n  Elementor HTML Widget \u2014 self-contained (scoped CSS + JS)\n  - Semua font pakai `inherit` dari theme\n  - Semua <img> src dikosongin: src=\"\" (isi manual \/ via Elementor)\n============================================================= -->\n<div class=\"shh\">\n\n\n  <!-- =========================================================\n       SECTION 4.5 \u2014 QUOTE BANNER (gambar kiri, teks kanan)\n  ========================================================== -->\n  <section class=\"shh-quote\">\n    <div class=\"shh-quote__grid\">\n\n      <div class=\"shh-quote__media\">\n        <span class=\"shh-quote__swirl\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n            <path d=\"M62 30 C80 30 88 46 80 60 C72 74 50 76 40 64 C31 53 36 38 50 34 C60 31 68 38 66 46\"\n                  fill=\"none\" stroke=\"#EA4624\" stroke-width=\"9\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/span>\n        <div class=\"shh-quote__circle\">\n          <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_102246_77d29030-af95-4fe6-97bb-eb49fb9c245a.png\" alt=\"Happy child - Sunshine Hearts Preschool\">\n        <\/div>\n      <\/div>\n\n      <div class=\"shh-quote__text\">\n        <span class=\"shh-quote__flower\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 60 60\" width=\"100%\" height=\"100%\">\n            <g fill=\"#F5C531\">\n              <circle cx=\"30\" cy=\"14\" r=\"10\"\/>\n              <circle cx=\"30\" cy=\"46\" r=\"10\"\/>\n              <circle cx=\"14\" cy=\"30\" r=\"10\"\/>\n              <circle cx=\"46\" cy=\"30\" r=\"10\"\/>\n            <\/g>\n            <circle cx=\"30\" cy=\"30\" r=\"9\" fill=\"#EA4624\"\/>\n          <\/svg>\n        <\/span>\n        <p>At <strong>Sunshine Hearts Preschool<\/strong>, we do not simply teach children. We nurture potential, build character, and inspire a lifelong love for learning.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <!-- =========================================================\n       SECTION 5 \u2014 ENROLL FORM\n  ========================================================== -->\n  <section class=\"shh-enroll\">\n    <div class=\"shh-enroll__grid\">\n      <div class=\"shh-enroll__form\">\n        <span class=\"shh-enroll__leaf\" aria-hidden=\"true\">\ud83c\udf37<\/span>\n        <h2 class=\"shh-h2 shh-h2--onlight shh-enroll__title\">Give Your Child The Perfect!<br>Enroll Today!<\/h2>\n\n        <form class=\"shh-form\" data-shh-form>\n          <div class=\"shh-form__row\">\n            <div class=\"shh-form__field\">\n              <label for=\"shh-parent-name\">Full name of parents:<\/label>\n              <input type=\"text\" id=\"shh-parent-name\" name=\"parent_name\" placeholder=\"Enter name...\">\n            <\/div>\n            <div class=\"shh-form__field\">\n              <label for=\"shh-phone\">Phone number:<\/label>\n              <input type=\"tel\" id=\"shh-phone\" name=\"phone\" placeholder=\"Enter phone number...\">\n            <\/div>\n          <\/div>\n\n          <div class=\"shh-form__field\">\n            <label for=\"shh-email\">Email Address:<\/label>\n            <input type=\"email\" id=\"shh-email\" name=\"email\" placeholder=\"Enter email...\">\n          <\/div>\n\n          <div class=\"shh-form__field\">\n            <label for=\"shh-message\">Information for parents:<\/label>\n            <textarea id=\"shh-message\" name=\"message\" rows=\"4\" placeholder=\"Enter your question...\"><\/textarea>\n          <\/div>\n\n          <button type=\"submit\" class=\"shh-btn shh-btn--green\">Start the Journey!<\/button>\n        <\/form>\n\n        <div class=\"shh-chick shh-chick--enroll\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 90 90\" width=\"100%\" height=\"100%\">\n            <circle cx=\"45\" cy=\"50\" r=\"30\" fill=\"#FBD33A\"\/>\n            <circle cx=\"30\" cy=\"40\" r=\"14\" fill=\"#FBD33A\"\/>\n            <path d=\"M18 40 L2 34 L18 30 Z\" fill=\"#F2A33A\"\/>\n            <circle cx=\"22\" cy=\"38\" r=\"2.4\" fill=\"#333\"\/>\n            <path d=\"M55 60 Q65 75 45 78 Q30 78 40 60Z\" fill=\"#E8792B\"\/>\n          <\/svg>\n        <\/div>\n      <\/div>\n\n      <div class=\"shh-enroll__media\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_084824_9f345c51-45ec-44ec-bf9a-1e97bc0edef9.png\" >\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<style>\n  .shh{\n    --sh-cream:#FFF6E7;\n    --sh-orange:#EA4624;\n    --sh-orange-dark:#EA4624;\n    --sh-purple:#9F6495;\n    --sh-blue:#37A5D1;\n    --sh-pink:#EF5094;\n    --sh-yellow-card:#FBAF17;\n    --sh-navy:#3454A4;\n    --sh-yellow:#F5C531;\n    --sh-yellow-dark:#E0AF1E;\n    --sh-green:#2E9B4A;\n    --sh-green-dark:#227A38;\n    --sh-testi-purple:#B65EA5;\n    --sh-ink:#241f1a;\n    --sh-white:#ffffff;\n    --sh-radius-lg:28px;\n    --sh-maxw:1200px;\n\n    position:relative;\n    background:var(--sh-cream);\n    color:var(--sh-ink);\n    font-family:inherit;\n    overflow-x:hidden;\n  }\n  .shh *,\n  .shh *::before,\n  .shh *::after{ box-sizing:border-box; font-family:inherit; }\n  .shh img{ max-width:100%; display:block; border:0; }\n\n  .shh-wrap{\n    position:relative;\n    z-index:2;\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    padding:0 24px;\n  }\n\n  \/* ---------- typography helpers ---------- *\/\n  .shh-eyebrow{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:10px;\n    font-size:1.1rem;\n    font-weight:700;\n    color:var(--sh-orange);\n    margin:0 0 8px;\n  }\n  .shh-eyebrow--left{ justify-content:flex-start; }\n  .shh-eyebrow__icon{ font-size:1.2rem; }\n\n  .shh-h2{\n    font-size:2.1rem;\n    font-weight:800;\n    color:var(--sh-orange-dark);\n    line-height:1.2;\n    margin:0 0 16px;\n  }\n  .shh-h2--center{ text-align:center; }\n  .shh-h2--onlight{ color:var(--sh-white); }\n\n  .shh-lead{\n    font-size:1.02rem;\n    line-height:1.65;\n    color:#EA4624;\n    margin:0 0 24px;\n    max-width:70ch;\n  }\n  .shh-lead--center{ text-align:center; margin-left:auto; margin-right:auto; }\n  .shh-lead--onlight{ color:#fff; opacity:.95; }\n\n  .shh-btn{\n    display:inline-block;\n    font-weight:700;\n    text-decoration:none;\n    border:none;\n    cursor:pointer;\n    border-radius:999px;\n    padding:14px 30px;\n    font-size:1rem;\n    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;\n  }\n  .shh-btn--yellow{\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    box-shadow:0 6px 0 var(--sh-yellow-dark);\n  }\n  .shh-btn--yellow:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--sh-yellow-dark); }\n  .shh-btn--green{\n    background:var(--sh-green);\n    color:#fff;\n    box-shadow:0 6px 0 var(--sh-green-dark);\n  }\n  .shh-btn--green:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--sh-green-dark); }\n  .shh-btn:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:3px; }\n\n  \/* =========================================================\n     SCALLOP SEPARATOR (reusable, marquee)\n  ========================================================== *\/\n  .sa-scallop{\n    position:absolute;\n    left:0;\n    width:100%;\n    height:20px;\n    overflow:hidden;\n    line-height:0;\n    z-index:3;\n  }\n  .sa-scallop--top{ top:-1px; }\n  .sa-scallop--bottom{ bottom:-1px; transform:scaleY(-1); }\n  .sa-scallop__track{\n    display:flex;\n    width:200%;\n    animation:sa-scallop-marquee 18s linear infinite;\n  }\n  .sa-scallop__track svg{\n    width:50%;\n    height:20px;\n    display:block;\n    flex-shrink:0;\n  }\n  @keyframes sa-scallop-marquee{\n    from{ transform:translateX(0); }\n    to{ transform:translateX(-50%); }\n  }\n\n  \/* =========================================================\n     SECTION 1 \u2014 VALUES\n  ========================================================== *\/\n  .shh-values{\n    position:relative;\n    padding:70px 0 0;\n    overflow:hidden;\n  }\n  .shh-values__curve{\n  position:absolute;\n  left:0;\n  top:410px;\n  right:0;\n  bottom:0;\n  background:var(--sh-orange);\n  clip-path: ellipse(75% 100% at 50% 100%);\n  z-index:0;\n}\n  .shh-values__top{ position:relative; z-index:2; margin-bottom:40px; }\n\n  .shh-cards-grid{\n    position:relative;\n    z-index:2;\n    display:flex;\n    flex-direction:column;\n    gap:26px;\n    align-items:center;\n  }\n  .shh-cards-row{\n    display:flex;\n    gap:26px;\n    justify-content:center;\n    flex-wrap:wrap;\n    width:100%;\n  }\n  .shh-cards-row--two{ max-width:600px; }\n  .shh-cards-row--three{ max-width:100%; margin-top:6px; }\n\n  .shh-vcard{\n    flex:1 1 280px;\n    width:280px;\n    max-width:280px;\n    border-radius:22px;\n    overflow:hidden;\n    box-shadow:0 14px 28px rgba(0,0,0,.18);\n    background:#fff;\n    display:flex;\n    flex-direction:column;\n  }\n  .shh-vcard__head{\n    padding:24px 20px;\n    text-align:center;\n    color:#fff;\n    min-height:118px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n  }\n  .shh-vcard__head h3{ font-size:1.28rem; font-weight:800; margin:0 0 8px; line-height:1.25; color:#fff !important;}\n  .shh-vcard__head p{ font-size:.92rem; margin:0; opacity:.95; }\n  .shh-vcard__media{ height:170px; background:#d8d8d8; }\n  .shh-vcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }\n\n  .shh-vcard--purple .shh-vcard__head{ background:var(--sh-purple); }\n  .shh-vcard--blue .shh-vcard__head{ background:var(--sh-blue); }\n  .shh-vcard--pink .shh-vcard__head{ background:var(--sh-pink); }\n  .shh-vcard--yellow .shh-vcard__head{ background:var(--sh-yellow-card); }\n  .shh-vcard--navy .shh-vcard__head{ background:var(--sh-navy); }\n\n  .shh-swirl{ width:70px; height:70px; margin:34px auto 0; opacity:.9; }\n\n  \/* programs *\/\n  .shh-programs{ position:relative; z-index:2; padding:90px 24px 60px; text-align:center; }\n  .shh-carousel{\n    position:relative;\n    display:flex;\n    align-items:center;\n    gap:22px;\n    max-width:980px;\n    margin:44px auto 0;\n  }\n  .shh-carousel__track{\n    flex:1;\n    background:transparent;\n    overflow:visible;\n  }\n  .shh-carousel__slide{\n    display:flex;\n    gap:26px;\n  }\n  .shh-arrow{\n    flex:0 0 auto;\n    width:44px;\n    height:44px;\n    border-radius:50%;\n    border:none;\n    background:var(--sh-navy);\n    color:#fff;\n    font-size:1rem;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s ease, transform .15s ease;\n  }\n  .shh-arrow:hover{ background:#1e3874; transform:scale(1.06); }\n  .shh-arrow:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:2px; }\n\n  .shh-pcard{\n    flex:1 1 0;\n    display:flex;\n    flex-direction:column;\n    gap:16px;\n    text-align:left;\n    background:#fff;\n    border-radius:var(--sh-radius-lg);\n    padding:22px 22px 30px;\n    box-shadow:0 16px 34px rgba(0,0,0,.2);\n  }\n  .shh-pcard__media{ border-radius:18px; overflow:hidden; height:230px; background:#d8d8d8; }\n  .shh-pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }\n  .shh-pcard__body{ margin-top:auto; }\n  .shh-pcard__title{ font-size:1.5rem; font-weight:800; color:var(--sh-orange-dark); margin:0; }\n  .shh-pcard__title em{ font-style:normal; font-weight:600; color:#7a6f65; font-size:1rem; }\n  .shh-pcard__body p{ font-size:.95rem; line-height:1.6; color:#EA4624; margin:0; }\n\n  \/* ground \u2014 hill hijau kiri saja + scallop wave full-width *\/\n  .shh-ground{\n    position:relative;\n    z-index:2;\n    height:210px;\n    background:var(--sh-orange);\n    overflow:hidden;\n  }\n  .shh-ground__hill{\n    position:absolute;\n    left:0; bottom:0;\n    width:40%;\n    height:100%;\n    z-index:1;\n  }\n  .shh-ground__hill svg{ width:100%; height:100%; display:block; }\n\n  .shh-ground__tree{ position:absolute; left:1%; bottom:46px; width:84px; height:112px; z-index:2; }\n  .shh-ground__flower{ position:absolute; left:13%; bottom:42px; width:26px; height:50px; z-index:2; }\n  .shh-ground__giraffe{ position:absolute; right:6%; bottom:0; width:78px; height:140px; z-index:2; }\n\n  .shh-ground__scallop{\n    position:absolute;\n    left:0; right:0; bottom:0;\n    height:34px;\n    z-index:3;\n    line-height:0;\n    overflow:hidden;\n  }\n  .shh-ground__scallop-track{\n    display:flex;\n    width:200%;\n    animation:sa-scallop-marquee 18s linear infinite;\n  }\n  .shh-ground__scallop-track svg{ width:50%; height:34px; display:block; flex-shrink:0; }\n\n  \/* =========================================================\n     SECTION 2 \u2014 CURRICULUM\n  ========================================================== *\/\n  .shh-curriculum{ padding:80px 0; position:relative; }\n  .shh-curriculum__grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:50px;\n    align-items:center;\n  }\n  .shh-steps{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:420px; }\n  .shh-steps__item{ display:flex; align-items:center; gap:14px; }\n  .shh-steps__num{\n    flex:0 0 auto;\n    width:34px; height:34px;\n    border-radius:50%;\n    background:var(--sh-blue);\n    color:#fff;\n    font-weight:800;\n    display:flex; align-items:center; justify-content:center;\n    font-size:.95rem;\n  }\n  .shh-steps__label{\n    flex:1;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    font-weight:700;\n    padding:12px 20px;\n    border-radius:999px;\n    font-size:.95rem;\n  }\n\n  .shh-curriculum__media{ position:relative; }\n  .shh-curriculum__img{\n    width:100%;\n    aspect-ratio:1\/1.05;\n    object-fit:cover;\n    border-radius:22px;\n    \n  }\n  .shh-swirl--curriculum{ position:absolute; top:-30px; right:10%; width:60px; height:60px; z-index:1; }\n  .shh-cloud--curriculum{ position:absolute; top:-10px; left:-6%; width:100px; height:60px; z-index:1; }\n  .shh-chick{ width:70px; height:70px; }\n  .shh-chick--curriculum,\n  .shh-curriculum__media .shh-chick{ position:absolute; left:-6%; bottom:-20px; z-index:3; }\n\n  \/* =========================================================\n     SECTION 3 \u2014 TESTIMONIALS\n  ========================================================== *\/\n  .shh-testi{\n    position:relative;\n    background:var(--sh-testi-purple);\n    padding:80px 0;\n    overflow:hidden;\n  }\n  .shh-deco{ position:absolute; z-index:1; pointer-events:none; }\n  .shh-deco--sun{ top:6%; left:6%; width:60px; height:60px; }\n  .shh-deco--tree2{ bottom:6%; right:6%; width:90px; height:110px; opacity:.9; }\n  .shh-deco--flower{ bottom:10%; right:16%; width:50px; height:50px; }\n  .shh-deco--dash{\n    left:4%; bottom:20%; width:180px; height:0;\n    border-top:3px dashed #fff; opacity:.4; transform:rotate(-6deg); display: none;\n  }\n\n  .shh-carousel--testi{ max-width:960px; }\n  .shh-carousel--testi .shh-carousel__track{ background:transparent; box-shadow:none; padding:0; }\n  .shh-carousel--testi .shh-arrow{ background:#fff; color:var(--sh-testi-purple); }\n  .shh-carousel--testi .shh-arrow:hover{ background:#f1e6f7; }\n\n  .shh-testi__item{ display:flex; align-items:center; gap:40px; }\n  .shh-testi__photo{\n    flex:0 0 auto;\n    width:200px; height:200px;\n    border-radius:50%;\n    border:0px solid var(--sh-yellow);\n    overflow:hidden;\n    background:#d8d8d8;\n    \n  }\n  .shh-testi__photo img{ width:100%; height:100%; object-fit:cover; }\n  .shh-testi__content{ position:relative; color:#fff; text-align:center; }\n  .shh-testi__content p{ font-size:1rem; line-height:1.65; margin:0 0 14px; }\n  .shh-testi__quote{ font-size:2.4rem; color:var(--sh-yellow); font-weight:800; line-height:1; display:block; }\n  .shh-testi__quote--open{ text-align:left; margin-bottom:-10px; }\n  .shh-testi__quote--close{ text-align:right; margin-top:-10px; }\n  .shh-testi__name{ color:var(--sh-yellow); font-size:.95rem; margin-top:10px !important; }\n\n  \/* =========================================================\n     SECTION 4 \u2014 EVENTS\n  ========================================================== *\/\n  .shh-event{ padding:80px 0; }\n  .shh-event__grid{\n    display:grid;\n    grid-template-columns: 7fr 3fr;\n\n    gap:50px;\n    align-items:center;\n  }\n  .shh-event__media{ position:relative; }\n  .shh-event__media img{\n    width:100%;\n    height:auto;\n    object-fit:contain;\n    border-radius:20px;\n    display:block;\n  }\n  .shh-event__btn{ position:absolute; left:24px; bottom:24px; }\n  .shh-deco--rabbit{ position:absolute; top:-24px; right:8%; width:60px; height:80px; }\n\n  \/* =========================================================\n     SECTION 4.5 \u2014 QUOTE BANNER (gambar kiri, teks kanan)\n  ========================================================== *\/\n  .shh-quote{ padding:60px 24px 0px; position:relative; }\n  .shh-quote__grid{\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    display:grid;\n    grid-template-columns:0.8fr 1.2fr;\n    align-items:center;\n    gap:48px;\n  }\n\n  .shh-quote__media{\n    position:relative;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n  .shh-quote__circle{\n    position:relative;\n    width:100%;\n    max-width:400px;\n    display:flex;\n    align-items:flex-end;\n    justify-content:center;\n    overflow:visible;\n    z-index:2;\n  }\n  .shh-quote__circle img{\n    width:100%;\n    height:auto;\n    object-fit:contain;\n    display:block;\n  }\n  .shh-quote__swirl{\n    position:absolute;\n    left:-4%;\n    bottom:6%;\n    width:64px;\n    height:64px;\n    z-index:1;\n  }\n\n  .shh-quote__text{ position:relative; text-align:left; }\n  .shh-quote__flower{\n    position:absolute;\n    top:-46px;\n    right:4%;\n    width:44px;\n    height:44px;\n  }\n  .shh-quote__text p{\n    font-size:clamp(1.15rem, 2.2vw, 1.55rem);\n    font-weight:800;\n    line-height:1.4;\n    color:var(--sh-navy);\n    margin:0;\n  }\n  .shh-quote__text p strong{ color:var(--sh-orange-dark); }\n\n  \/* =========================================================\n     SECTION 5 \u2014 ENROLL\n  ========================================================== *\/\n  .shh-enroll{ padding:0px 24px 50px; position:relative; }\n  .shh-enroll__grid{\n    display:grid;\n    grid-template-columns:1.1fr 0.9fr;\n    align-items:stretch;\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    border-radius:32px;\n    overflow:hidden;\n    \/*box-shadow:0 20px 44px rgba(0,0,0,.16);*\/\n  }\n  .shh-enroll__form{\n    position:relative;\n    background:var(--sh-orange);\n    padding:70px 60px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n    overflow:hidden;\n  }\n  .shh-enroll__leaf{ position:absolute; top:60px; right:80px; font-size:2rem; }\n  .shh-enroll__title{ margin-bottom:34px; }\n\n  .shh-form{ display:flex; flex-direction:column; gap:18px; max-width:520px; }\n  .shh-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }\n  .shh-form__field label{ display:block; color:#fff; font-weight:700; font-size:.92rem; margin-bottom:8px; }\n  .shh-form__field input,\n  .shh-form__field textarea{\n    width:100%;\n    border:none;\n    border-radius:14px;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    padding:14px 18px;\n    font-size:.95rem;\n    resize:vertical;\n  }\n  .shh-form__field input::placeholder,\n  .shh-form__field textarea::placeholder{ color:#7a6a2e; }\n  .shh-form__field input:focus-visible,\n  .shh-form__field textarea:focus-visible{ outline:3px solid var(--sh-ink); outline-offset:2px; }\n  .shh-form .shh-btn--green{ align-self:flex-start; margin-top:6px; }\n\n  .shh-chick--enroll{ position:absolute; left:40px; bottom:20px; width:60px; height:60px; }\n\n  .shh-enroll__media img{ width:100%; height:100%; min-height:420px; object-fit:cover; background:#d8d8d8; }\n\n  \/* =========================================================\n     RESPONSIVE\n  ========================================================== *\/\n  @media (max-width: 1024px){\n    .shh-curriculum__grid,\n    .shh-event__grid,\n    .shh-quote__grid{ grid-template-columns:1fr; }\n    .shh-event__media{ order:-1; }\n    .shh-enroll__grid{ grid-template-columns:1fr; }\n    .shh-enroll__media img{ min-height:320px; }\n    .shh-quote__text{ text-align:center; }\n    .shh-quote__flower{ right:50%; transform:translateX(50%); top:-52px; }\n  }\n\n  @media (max-width: 760px){\n    .shh-values__curve{ top:340px; }\n    .shh-h2{ font-size:1.6rem; }\n    .shh-vcard{ max-width:340px; }\n    .shh-testi__item{ flex-direction:column; text-align:center; gap:24px; }\n    .shh-testi__photo{ width:150px; height:150px; }\n    .shh-form__row{ grid-template-columns:1fr; }\n    .shh-enroll__form{ padding:50px 26px; }\n    .shh-pcard__media{ height:130px; }\n    .shh-quote{ padding:44px 20px 0; }\n    .shh-quote__circle{ max-width:280px; }\n  }\n\n  @media (max-width: 560px){\n    .shh-carousel__slide{ flex-direction:column; }\n    .shh-ground{ height:110px; }\n    .shh-ground__tree,\n    .shh-ground__giraffe,\n    .shh-deco--tree2,\n    .shh-deco--rabbit,\n    .shh-swirl--curriculum,\n    .shh-cloud--curriculum{ display:none; }\n    .shh-testi{ padding:60px 0; }\n    .shh-event, .shh-curriculum{ padding:56px 0; }\n    .sa-scallop{ height:12px; }\n    .sa-scallop__track svg{ height:12px; }\n    .shh-ground__scallop{ height:16px; }\n    .shh-ground__scallop-track svg{ height:16px; }\n    .shh-quote__circle{ max-width:220px; }\n    .shh-quote__swirl{ width:48px; height:48px; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .shh-btn, .shh-arrow{ transition:none; }\n    .sa-scallop__track,\n    .shh-ground__scallop-track{ animation:none !important; }\n  }\n<\/style>\n\n<script>\n(function(){\n  var carousels = document.querySelectorAll('.shh [data-shh-carousel]');\n  carousels.forEach(function(car){\n    var slides = car.querySelectorAll('[data-shh-slide]');\n    var index = 0;\n    var prevBtn = car.querySelector('[data-shh-prev]');\n    var nextBtn = car.querySelector('[data-shh-next]');\n    if(slides.length <= 1){\n      \/\/ hanya satu slide: tombol tetap ada untuk konsistensi visual,\n      \/\/ siap dipakai kalau slide ditambah kemudian\n      return;\n    }\n    function show(i){\n      slides.forEach(function(s, idx){ s.style.display = (idx === i) ? 'flex' : 'none'; });\n    }\n    show(index);\n    if(prevBtn){\n      prevBtn.addEventListener('click', function(){\n        index = (index - 1 + slides.length) % slides.length;\n        show(index);\n      });\n    }\n    if(nextBtn){\n      nextBtn.addEventListener('click', function(){\n        index = (index + 1) % slides.length;\n        show(index);\n      });\n    }\n  });\n\n  var form = document.querySelector('.shh [data-shh-form]');\n  if(form){\n    form.addEventListener('submit', function(e){\n      e.preventDefault();\n      \/\/ TODO: sambungkan ke handler submit (AJAX \/ Elementor Form Action \/ email)\n      alert('Terima kasih! Form akan diteruskan setelah backend submit dihubungkan.');\n    });\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dfb2e6c e-con e-atomic-element e-flexbox-base e-657cd64 \" data-id=\"dfb2e6c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dfb2e6c\">\n    \t\t<div class=\"elementor-element elementor-element-f86a423 elementor-widget elementor-widget-spacer\" data-id=\"f86a423\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Classes Sunrise (Infant Care) A new beginning filled with love and care. Children are nurtured in a safe, loving, and responsive environment where trust, security, and relationships are formed. Love, care, attachment, security. Our Infant Care Includes Nurturing Baby Spa Experiences As part of our infant care programme, baby spa activities provide gentle sensory [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4640","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/4640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/comments?post=4640"}],"version-history":[{"count":87,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/4640\/revisions"}],"predecessor-version":[{"id":9489,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/4640\/revisions\/9489"}],"wp:attachment":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/media?parent=4640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}