/* ============================================================
   Home: PILLARS section ("Scan, Interact, Learn"). Owned by the
   pillars agent. Targets only the section root #320342f and its
   children. No markup changes - pure CSS overrides.

   Goal: warm, kid-friendly trio of pillar cards on cream paper,
   each pillar wearing a different logo color (purple / green /
   yellow). Brand red tertiary CTA below.
   ============================================================ */

/* ---- SECTION ROOT ---------------------------------------- */
/* Drop the section onto warm cream paper with breathing room so
   the pillar trio reads as its own moment in the page flow. */
body .elementor-element-320342f {
  background: var(--color-paper) !important;
  padding-block: var(--section-y) !important;
  position: relative;
  isolation: isolate;
}

/* Soft sunburst-soft halo behind the heading column, low-z so it
   does not occlude the decorative banner photos on the left. */
body .elementor-element-320342f::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--glow-sunburst-soft);
  pointer-events: none;
}

/* ---- HEADING + COPY ------------------------------------- */
/* "Scan, Interact, Learn." heading - Fredoka, brand ink, tight. */
body .elementor-element-753955f .pxl-heading--text,
body .elementor-element-753955f h2,
body .elementor-element-753955f h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h1) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

/* Color the trailing period in red as a small wordmark callback. */
body .elementor-element-753955f .pxl-heading--text::after {
  color: var(--color-brand);
}

/* Intro body copy - Nunito Sans, comfortable reading measure. */
body .elementor-element-b24e40d .pxl-text-editor,
body .elementor-element-b24e40d p {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-l) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--text-secondary) !important;
  max-width: 56ch;
  margin-bottom: var(--space-6) !important;
}

/* ---- PILLAR CARDS - shared base ------------------------- */
/* Re-skin every pillar IconBox (variant 2): cream-on-paper card,
   rounded lg radius, warm shadow, flex row aligned center.
   Generous breathing room between icon and text. */
body .elementor-element-417150a .pxl-icon-box2,
body .elementor-element-a294421 .pxl-icon-box2,
body .elementor-element-c9d779e .pxl-icon-box2 {
  background: var(--color-paper-raised) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) var(--space-6) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: var(--space-4) !important;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out) !important;
}

body .elementor-element-417150a .pxl-icon-box2 .pxl-item--inner,
body .elementor-element-a294421 .pxl-icon-box2 .pxl-item--inner,
body .elementor-element-c9d779e .pxl-icon-box2 .pxl-item--inner {
  align-items: center !important;
  gap: var(--space-5);
}

/* Title: Fredoka display, deep ink, snug leading. */
body .elementor-element-417150a .pxl-item--title span,
body .elementor-element-a294421 .pxl-item--title span,
body .elementor-element-c9d779e .pxl-item--title span {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h4) !important;
  line-height: var(--leading-snug) !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--tracking-display) !important;
}

/* Body excerpt: Nunito Sans, secondary ink, comfortable leading. */
body .elementor-element-417150a .pxl-item--excerpt,
body .elementor-element-a294421 .pxl-item--excerpt,
body .elementor-element-c9d779e .pxl-item--excerpt {
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-secondary) !important;
  margin-top: var(--space-2);
}

/* Icon container: circular tinted disc with a colored ring. The
   ring color overrides per-pillar below. Soft warm shadow under
   the disc so it floats on the white card. */
body .elementor-element-417150a .pxl-item--icon,
body .elementor-element-a294421 .pxl-item--icon,
body .elementor-element-c9d779e .pxl-item--icon {
  min-width: 88px !important;
  max-width: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  border-radius: 50% !important;
  padding: var(--space-3) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform var(--duration-base) var(--ease-bounce) !important;
}

body .elementor-element-417150a .pxl-item--icon img,
body .elementor-element-a294421 .pxl-item--icon img,
body .elementor-element-c9d779e .pxl-item--icon img {
  width: auto !important;
  max-width: 56px !important;
  max-height: 56px !important;
  height: auto !important;
}

/* ---- PILLAR 1: PURPLE (Unlock their best potential) ----- */
body .elementor-element-417150a .pxl-item--icon {
  background: var(--color-purple-50) !important;
  box-shadow: 0 0 0 4px var(--color-purple-500),
              0 6px 14px rgba(111, 42, 140, .18) !important;
}

body .elementor-element-417150a .pxl-icon-box2:hover .pxl-item--icon {
  transform: rotate(-6deg) scale(1.05);
}

/* ---- PILLAR 2: GREEN (A learning kit kids actually enjoy) - */
body .elementor-element-a294421 .pxl-item--icon {
  background: var(--color-green-50) !important;
  box-shadow: 0 0 0 4px var(--color-green-500),
              0 6px 14px rgba(122, 197, 74, .22) !important;
}

body .elementor-element-a294421 .pxl-icon-box2:hover .pxl-item--icon {
  transform: rotate(6deg) scale(1.05);
}

/* ---- PILLAR 3: YELLOW (AR makes teaching stick) --------- */
body .elementor-element-c9d779e .pxl-item--icon {
  background: var(--color-yellow-50) !important;
  box-shadow: 0 0 0 4px var(--color-yellow-500),
              0 6px 14px rgba(245, 197, 24, .25) !important;
}

body .elementor-element-c9d779e .pxl-icon-box2:hover .pxl-item--icon {
  transform: rotate(-6deg) scale(1.05);
}

/* ---- HOVER LIFT on the whole card ----------------------- */
/* Warm shadow lift so each card "comes forward" when reached. */
body .elementor-element-417150a .pxl-icon-box2:hover,
body .elementor-element-a294421 .pxl-icon-box2:hover,
body .elementor-element-c9d779e .pxl-icon-box2:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}

/* ---- BANNER BOX (left column photos) -------------------- */
/* Round off the photo cluster and ensure it sits on the warm
   paper without picking up template borders. */
body .elementor-element-173b086 {
  border-radius: var(--radius-xl);
  overflow: visible;
}

body .elementor-element-9028fce img {
  border-radius: var(--radius-lg);
}

/* ---- DECORATIVE DOTTED-ARROW PNG ------------------------ */
/* The wavy arrow PNG above the CTA sits in element 11dd585.
   Keep it but let it breathe with brand spacing. */
body .elementor-element-6ae5d0a .elementor-element-11dd585 {
  margin-block: var(--space-4) var(--space-3);
}

/* ---- "Know more about us" tertiary button --------------- */
/* Brand red pill, Fredoka label, sunburst glow on hover. The
   template's default already gets brand-red from the overrides,
   here we firm up size, type and the hover lift. */
body .elementor-element-8be19b7 .pxl-btn,
body .elementor-element-8be19b7 a.btn,
body .elementor-element-8be19b7 .btn-link,
body .elementor-element-8be19b7 button {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-button) !important;
  letter-spacing: var(--tracking-display) !important;
  padding: var(--space-3) var(--space-6) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out) !important;
}

body .elementor-element-8be19b7 .pxl-btn:hover,
body .elementor-element-8be19b7 a.btn:hover,
body .elementor-element-8be19b7 .btn-link:hover,
body .elementor-element-8be19b7 button:hover {
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-2px);
}

/* ---- REDUCED MOTION ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .elementor-element-417150a .pxl-icon-box2,
  body .elementor-element-a294421 .pxl-icon-box2,
  body .elementor-element-c9d779e .pxl-icon-box2,
  body .elementor-element-417150a .pxl-item--icon,
  body .elementor-element-a294421 .pxl-item--icon,
  body .elementor-element-c9d779e .pxl-item--icon,
  body .elementor-element-8be19b7 .pxl-btn {
    transition: none !important;
  }
  body .elementor-element-417150a .pxl-icon-box2:hover,
  body .elementor-element-a294421 .pxl-icon-box2:hover,
  body .elementor-element-c9d779e .pxl-icon-box2:hover,
  body .elementor-element-417150a .pxl-icon-box2:hover .pxl-item--icon,
  body .elementor-element-a294421 .pxl-icon-box2:hover .pxl-item--icon,
  body .elementor-element-c9d779e .pxl-icon-box2:hover .pxl-item--icon {
    transform: none;
  }
}