.elementor-5018 .elementor-element.elementor-element-974d395{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-974d395:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-974d395 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFF99C7;}.elementor-5018 .elementor-element.elementor-element-7fa62f7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-7fa62f7:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-7fa62f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#04246D;}.elementor-5018 .elementor-element.elementor-element-ce9c3bd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-ce9c3bd:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-ce9c3bd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFF9C4D1;}.elementor-5018 .elementor-element.elementor-element-5d3c12d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-5d3c12d:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-5d3c12d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFF9C4CF;}.elementor-5018 .elementor-element.elementor-element-5d3c12d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5018 .elementor-element.elementor-element-c54604f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-c54604f:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-c54604f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFF9C4E8;}.elementor-5018 .elementor-element.elementor-element-5a84c2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5018 .elementor-element.elementor-element-5a84c2e:not(.elementor-motion-effects-element-type-background), .elementor-5018 .elementor-element.elementor-element-5a84c2e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFF9900;}@media(min-width:768px){.elementor-5018 .elementor-element.elementor-element-5d3c12d{--width:109.31%;}}/* Start custom CSS for html, class: .elementor-element-d2712fa *//* --- Import Google Font (if not using <link> method) --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* --- Styling for KIDS MASTERCLASS Title ONLY (Clean Version) --- */
.kids-title {
  /* --- Font --- */
  font-family: 'Fredoka One', cursive;
  font-weight: 400;
  font-size: 2.6em; /* Slightly adjusted base size */
  line-height: 1.4; /* Ensure good line spacing */

  /* --- NEW Clean Colors --- */
  color: #1DE9B6; /* Dark Grey Text (Blue Grey 800) */
  background-color: #04246D; /* Light Blue Background (Light Blue 400) */

  /* --- Background Shape & Spacing --- */
  display: block; /* Full width background bar */
  padding: 15px 20px; /* Vertical and Horizontal padding */
  border-radius: 0; /* Sharp corners - REMOVED rounding */

  /* --- Effects --- */
  text-shadow: none; /* REMOVED shadow */
  box-shadow: none; /* REMOVED shadow */

  /* --- Spacing & Alignment --- */
  text-align: center; /* Center text within the bar */
  margin: 30px 0; /* Add vertical space above/below the bar */
                  /* Auto horizontal margins not needed for block */
}

/* --- Responsiveness --- */

/* Tablet Styles */
@media (max-width: 768px) {
  .kids-title {
    font-size: 2.2em;
    padding: 12px 15px;
  }
}

/* Mobile Styles */
@media (max-width: 480px) {
  .kids-title {
    font-size: 1.8em; /* Smaller font on mobile */
    line-height: 1.5;
    padding: 10px 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9b4afe5 *//* --- Import Google Fonts (if not using <link> method) --- */
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap'); */

/* --- Styling for 6-Day Kids Journey Card --- */

.kids-journey-card {
  /* --- Basic Layout & Appearance --- */
  background-color: #FFF9C4; /* Light sunny yellow */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px auto; /* Centering and vertical space */
  width: 95%; /* Use percentage width for smaller screens by default */
  font-family: 'Nunito', sans-serif;
  color: #00695C; /* Deep Teal text */

  /* --- Optional Animation --- */
  opacity: 0;
  transform: scale(0.95);
  animation: scaleFadeIn 0.7s ease-out forwards;
  animation-delay: 0.2s;
}

/* --- Animation Keyframes --- */
@keyframes scaleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* --- Image Styling --- */
.kids-journey-image-container { /* ... */ }
.kids-journey-image { /* ... */ }

/* --- Text Content Area --- */
.kids-journey-text-content {
  padding: 25px 30px 30px 30px;
  text-align: center;
}

/* --- Duration/Tagline Styling --- */
.kids-journey-duration {
  font-family: 'Fredoka One', cursive;
  font-size: 1.9em;
  line-height: 1.3;
  color: #00695C;
  margin-bottom: 15px;
  font-weight: 400;
}

/* --- Topics Styling --- */
.kids-journey-topics {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5em;
  font-weight: 400;
  color: #FF6F00; /* Bright Orange accent */
  line-height: 1.5;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

/* --- Optional Description Styling --- */
.kids-journey-description {
  font-size: 1em;
  line-height: 1.6;
  color: #00796B; /* Slightly lighter teal for description */
  margin-bottom: 25px; /* Existing margin */
}

/* --- === NEW Age Group Styling === --- */
.kids-journey-age {
  font-size: 1.15em; /* Make it slightly larger */
  font-weight: 700; /* Bold */
  color: #004D40; /* Darker Teal for emphasis */
  background-color: rgba(255, 214, 0, 0.2); /* Very subtle yellow highlight */
  padding: 8px 15px; /* Add some padding */
  border-radius: 8px; /* Slightly rounded highlight */
  display: inline-block; /* Make background wrap content */
  margin-top: 0px; /* Adjust spacing relative to description */
  margin-bottom: 25px; /* Space before button or bottom */
}
/* Use strong tag for specific emphasis */
.kids-journey-age strong {
    color: #004D40; /* Ensure label has same color */
    font-weight: 700; /* Ensure label stays bold */
}
/* --- ============================ --- */


/* --- Optional Button Styling --- */
.kids-journey-button { /* ... */ }
.kids-journey-button:hover { /* ... */ }


/* --- Responsiveness --- */

/* PC / Larger Screens */
@media (min-width: 992px) {
  .kids-journey-card { max-width: 750px; }
  .kids-journey-duration { font-size: 2.1em; }
  .kids-journey-topics { font-size: 1.2em; }
  .kids-journey-age { font-size: 1.25em; } /* Larger age text on PC */
}

/* Tablet */
@media (min-width: 769px) and (max-width: 991px) {
    .kids-journey-card { max-width: 600px; width: 90%; }
    .kids-journey-duration { font-size: 1.9em; }
    .kids-journey-topics { font-size: 1.1em; }
    .kids-journey-age { font-size: 1.15em; } /* Keep base size */
}


/* Mobile */
@media (max-width: 768px) {
   .kids-journey-card { border-radius: 10px; }
   .kids-journey-duration { font-size: 1.7em; }
   .kids-journey-topics { font-size: 1.0em; }
   .kids-journey-description { font-size: 0.95em; }
   .kids-journey-age {
       font-size: 1.1em; /* Adjust size for smaller tablets */
       padding: 6px 12px;
   }
   .kids-journey-text-content { padding: 20px 25px 25px 25px; }
   .kids-journey-button { /* ... */ }
}

/* Adjustments for very small mobile screens if needed */
@media (max-width: 480px) {
     .kids-journey-duration { font-size: 1.5em; }
     .kids-journey-topics { font-size: 0.9em; line-height: 1.6; }
     .kids-journey-age {
         font-size: 1.0em; /* Further adjust size */
         padding: 5px 10px;
     }
     .kids-journey-text-content { padding: 15px 20px 20px 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-612f2f5 *//* --- === Method 2: Google Font Loading (Use if <link> method isn't possible) === --- */
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap'); */
/* ============================================================================ */

/* --- Default body font (optional, good practice) --- */
body {
  font-family: 'Nunito', sans-serif;
}

/* --- Journey Timeline Section --- */
.journey-timeline-section {
  background-color: #FFF9C4; /* Light yellow background */
  padding: 40px 15px;
  font-family: 'Nunito', sans-serif; /* Default font for section */
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

/* --- === TITLE STYLING === --- */
/* Targeting title within the specific section */
.journey-timeline-section > h2 {
  font-family: 'Fredoka One', cursive; /* Use Fredoka One Font */
  font-weight: 400; /* Fredoka is bold, so 400 is normal */
  font-size: 2.8em;
  line-height: 1.3;
  text-align: center;
  color: #00695C; /* Deep Teal */
  margin: 0 auto 50px auto; /* Center and add bottom margin */
  padding: 0;
  max-width: 90%; /* Prevent title from being too wide */
}

/* --- Timeline Container (Simplified) --- */
.journey-timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* --- Timeline Line (Simplified) --- */
.journey-timeline-container::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 15px; /* Default for mobile */
  width: 4px;
  background-color: #FFAB40; /* Amber/Orange line */
  border-radius: 2px;
  z-index: 0; /* Behind dots */
}

/* --- === Keyframes for Simple Animation === --- */
@keyframes simpleFadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- === Individual Day Styling (Simplified Animation) === --- */
.journey-day {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0, 0.08);
  padding: 20px;
  margin-bottom: 30px; /* Space between cards on mobile */
  position: relative; /* Needed for dot positioning */
  padding-left: 50px; /* Space for dot/line on mobile */

  /* --- Simple Animation --- */
  opacity: 0; /* Start hidden */
  transform: scale(0.9); /* Start smaller */
  animation-name: simpleFadeScaleIn;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* Keep final state */

  /* --- Staggered Delays --- */
}
.journey-day:nth-child(1) { animation-delay: 0.1s; }
.journey-day:nth-child(2) { animation-delay: 0.25s; }
.journey-day:nth-child(3) { animation-delay: 0.4s; }
.journey-day:nth-child(4) { animation-delay: 0.55s; }
.journey-day:nth-child(5) { animation-delay: 0.7s; }
.journey-day:nth-child(6) { animation-delay: 0.85s; }


/* --- Timeline Dot (Simplified Positioning) --- */
.journey-day::before {
  content: '';
  position: absolute;
  top: 15px; /* Align near top of card */
  left: 5px; /* Position relative to container line */
  width: 22px;
  height: 22px;
  background-color: #FF6F00; /* Bright Orange dot */
  border: 3px solid #FFF9C4; /* Match section background */
  border-radius: 50%;
  z-index: 1; /* Above line */
}

/* --- Content & Image (Mobile First) --- */
.journey-day-content { /* Styles needed for text elements */ }
.journey-day-image { margin-bottom: 15px; } /* Space below image */
.journey-day-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* --- Text Styling --- */
.journey-day .day-number {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4em;
  color: #FF6F00; /* Orange */
  margin-bottom: 0px;
}
.journey-day .day-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5em;
  font-weight: 500;
  color: #00695C; /* Deep Teal */
  margin-top: 5px;
  margin-bottom: 15px;
}
.journey-day .day-activities {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: #00796B; /* Slightly lighter teal */
  font-size: 0.95em; /* Slightly smaller list text */
}
.journey-day .day-activities li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  line-height: 1.6;
}
.journey-day .day-activities li::before {
  content: '✔'; /* Checkmark */
  position: absolute;
  left: 0;
  color: #FFAB40; /* Amber */
  font-weight: bold;
  top: 1px; /* Adjust vertical alignment */
}

/* --- === Responsiveness (Simplified) === --- */

@media (min-width: 768px) {
  /* Center line */
  .journey-timeline-container::before {
    left: 50%;
    margin-left: -2px; /* Half of line width */
     /* Make line stretch full height */
     top: 0;
     bottom: 0;
  }

  /* Center dot */
  .journey-day::before {
    left: 50%;
    transform: translateX(-50%);
    top: 30px; /* Position dot consistently near top */
  }

  .journey-day {
    display: flex; /* Use flex for side-by-side */
    align-items: center; /* Vertically align items */
    width: 90%; /* Make cards wider */
    max-width: 800px; /* Slightly larger max width for cards */
    margin-left: auto; /* Centering the card */
    margin-right: auto;
    margin-bottom: 40px; /* Space between centered cards */
    padding: 25px; /* Reset mobile padding */
    padding-left: 25px; /* Consistent padding */
  }

  /* Adjust content/image widths for flex */
  .journey-day-content,
  .journey-day-image {
    width: 50%; /* Roughly half each */
    padding: 0 15px; /* Add space between content and image */
    box-sizing: border-box;
    margin-bottom: 0; /* Reset mobile margin */
  }
  /* Alternate image/text order */
  .journey-day:nth-child(even) .journey-day-content { order: 1; }
  .journey-day:nth-child(even) .journey-day-image { order: 2; }
  .journey-day:nth-child(odd) .journey-day-content { order: 2; }
  .journey-day:nth-child(odd) .journey-day-image { order: 1; }

  /* Desktop Title Size */
  .journey-timeline-section > h2 { font-size: 3.2em; }
  /* Adjust text sizes */
  .journey-day .day-title { font-size: 1.6em; }
  .journey-day .day-activities { font-size: 1em; }
}

@media (max-width: 480px) {
    /* Mobile Title Size */
    .journey-timeline-section > h2 { font-size: 2.2em; }
    .journey-day { padding: 15px; padding-left: 45px; } /* Adjust padding */
    .journey-day::before { top: 10px; left: 3px; width: 20px; height: 20px; border-width: 2px;} /* Smaller dot */
    .journey-day .day-title { font-size: 1.3em;}
    .journey-day .day-activities { font-size: 0.9em; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ba6664d *//* --- Styling for the Colorful Bars "Includes" Section --- */

/* --- Optional Animation --- */
@keyframes barItemAppear {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.includes-colorful-bars-section {
  margin-top: 40px;
  padding-top: 5px; /* Minimal top padding */
  border-top: none; /* Remove previous border */
  font-family: 'Nunito', sans-serif;
}

.includes-heading-bars {
  /* Using a less prominent font, maybe Nunito bold */
  font-family: 'Nunito', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.5em;
  color: #444; /* Dark grey, less emphasis than main titles */
  text-align: center;
  margin-bottom: 25px;
}

/* --- Wrapper for the bars --- */
.includes-bars-wrapper {
  display: flex;
  flex-wrap: wrap; /* Allow bars to wrap */
  justify-content: center; /* Center items when they wrap */
  gap: 0; /* No gap, bars touch */
  border-radius: 15px; /* Rounded corners for the whole block */
  overflow: hidden; /* Clip children to rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Add depth */
  background-color: #fff; /* Background for shadow */
}

/* --- Individual Bar Item Styling --- */
.includes-bar-item {
  /* Flex properties: grow, shrink, basis */
  flex: 1 1 120px; /* Allow items to grow/shrink, base width ~120px */
  padding: 25px 10px;
  min-height: 130px; /* Minimum height for consistency */
  text-align: center;
  color: #FFFFFF; /* White text */
  font-weight: 700; /* Bold text */
  position: relative; /* For potential future use */

  /* === Center content vertically === */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* --- Animation --- */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: barItemAppear 0.6s ease-out forwards;
  transition: transform 0.2s ease; /* For hover */
}
/* Add a subtle lift on hover */
.includes-bar-item:hover {
    transform: scale(1.05);
    z-index: 1; /* Bring hovered item slightly forward */
}

/* === Assign Background Colors === */
.includes-bar-item.item-training { background-color: #4FC3F7; animation-delay: 0.0s; } /* Light Blue */
.includes-bar-item.item-show { background-color: #F06292; animation-delay: 0.1s; } /* Pink */
.includes-bar-item.item-certificate { background-color: #81C784; animation-delay: 0.2s; } /* Green */
.includes-bar-item.item-gift { background-color: #FFB74D; animation-delay: 0.3s; } /* Orange */
.includes-bar-item.item-video { background-color: #BA68C8; animation-delay: 0.4s; } /* Purple */


/* Icon Styling */
.includes-bar-item .icon {
  display: block;
  font-size: 2.5em; /* Large icon */
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.15); /* Subtle shadow on icon */
}

/* Text Styling */
.includes-bar-item .text {
  display: block;
  font-size: 0.9em;
  line-height: 1.3;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* Subtle shadow on text */
}

/* --- Responsiveness --- */

/* Tablet - may not need many changes as flex-wrap handles it */
@media (min-width: 768px) {
  .includes-heading-bars {
    font-size: 1.7em;
  }
  .includes-bar-item {
      min-height: 150px; /* Slightly taller bars */
      flex-basis: 140px; /* Adjust base width if needed */
  }
   .includes-bar-item .icon { font-size: 2.8em; }
   .includes-bar-item .text { font-size: 0.95em; }
}

/* Mobile - adjust font size if too small */
@media (max-width: 480px) {
  .includes-heading-bars {
    font-size: 1.4em;
  }
  .includes-bar-item {
      min-height: 110px; /* Shorter bars on small mobile */
      flex-basis: 100px; /* Smaller base width */
      padding: 15px 5px;
  }
   .includes-bar-item .icon { font-size: 2.2em; margin-bottom: 8px;}
   .includes-bar-item .text { font-size: 0.8em; }
}/* End custom CSS */