img, video {
  max-width: 100%;
  height: auto;
}

section {
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}
* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #fefefe;
    color: #333;
    height: 100%;
}

.headline {
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #23795a;
  position: sticky;
  top: 0;
  z-index: 100;

  flex-wrap: wrap; /* allows wrapping on smaller screens */
  gap: 10px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* Logo image */
.logo img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo img:hover {
  transform: scale(1.8);
  box-shadow: 0 6px 15px rgba(255, 111, 145, 0.4);
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap; /* links wrap automatically on small screens */
  justify-content: flex-end;
}

/* Links */
.nav-links a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 17px); /* auto scale text */
  margin-top: 10px;
}
/* Hero Section */
.hero {
  display: flex;
  flex-wrap: wrap;            /* Allows items to move to the next line automatically */
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);                /* Consistent spacing between text and image/video */
  padding: clamp(3rem, 8vw, 3rem) clamp(2rem, 10vw, 4rem); /* Padding shrinks as the screen gets smaller */
  background: #FFF9F7;
  min-height: 80vh;           /* Ensures it fills most of the screen height */
}

.hero-text {
  flex: 1 1 450px;            /* Grow, shrink, and "break" to a new line at 450px */
  max-width: 600px;
}

.hero-text h1 {
  /* Font size stays between 2rem and 3rem based on screen width */
  font-size: clamp(2rem, 5vw, 3rem); 
  color: #55B6DA;
  line-height: 1.4;
  margin-bottom: 0.7rem;
}

.hero-text p {
  color: #57371a;
  font-size: clamp(1.3rem, 1.2vw, 1.1rem);
}

/* Image inside hero-text */
.hero-text img {
  width: min(250px, 100%);     /* Never wider than 250px, but 100% on small screens */
  height: auto;
  border-radius: 50%;
  border: 5px solid #5D4037; /* A nice deep earthy brown */
  margin-top: 20px;
  margin-left: 30px;
  transition: all 0.3s ease;
}

.hero-text img:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(127, 43, 183, 0.4);
}

/* Video Section */
.hero-image {
  flex: 1 1 500px;            /* Standardize the space the video takes */
  display: flex;
  justify-content: center;
}

.hero-image video {
  width: 100%;                /* Fill the container */
  max-width: 600px;           /* But don't exceed your original size */
  height: auto;
  border-radius: clamp(20px, 5vw, 60px); /* Rounding softens on mobile */
}

/* Button */
.primary-btn {
  display: inline-block;
  font-weight: 700;
  padding: 14px 40px;
  font-size: 16px;
  border-radius: 30px;
  background-color: #f85e82;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
}

.primary-btn:hover {
  background-color: #db5575;
  transform: translateY(-2px);
}

/* Sections */
.section {
  /* Padding grows from 3rem on mobile to 6rem on desktop */
  padding: clamp(3rem, 8vw, 6rem) 2rem; 
  text-align: center;
  background: #FFF9F7;
}

.section h2 {
  /* Font size scales from 24px (1.5rem) to 36px (2.25rem) */
  font-size: clamp(1.5rem, 4vw, 2.25rem); 
  margin-bottom: 0.5rem;
  margin-top: 2rem;
  line-height: 1.2;
}

.section-text {
  /* max-width prevents text lines from getting too long to read on desktop */
  max-width: 700px;
  /* width: 90% ensures it doesn't touch the edges on tiny screens */
  width: 90%; 
  margin: 2rem auto 0 auto;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
}

.pastel-bg {
    background: #fee0b3;
}

.blue-bg{
    background: #8cd0f5;
}

/* Card Container */
.card-container {
  display: flex;
  flex-wrap: wrap;           /* Allows cards to move to the next line */
  justify-content: center;   /* Keeps cards centered as they wrap */
  gap: 2rem;
  margin-top: 2rem;
  padding: 0 1rem;           /* Prevents cards from touching screen edges */
}

/* Individual Card */
.card {
  background: #87c69d;
  padding: 2rem;
  border-radius: 20px;
  
  /* This is the key: */
  flex: 1 1 300px;           /* Grow to fill space, shrink if needed, base size 300px */
  max-width: 350px;          /* Prevents a single card from becoming too wide on mobile */
  
  transition: transform 0.3s ease;
}

.card.pink {
  background: #f09cbc;
}

/* Subtle hover effect for better UI */
.card:hover {
  transform: translateY(-5px);
}

/* Activities */
/* Activities Section */
.activities-section{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #90d5ee, #5cc3f5, #498ad4, #55bbee);
  padding: clamp(40px, 6vw, 80px) 20px;
}

/* Sun Sticker */
.sticker-sun {
  position: absolute;
  width: clamp(120px, 18vw, 190px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.3s ease;
  left: clamp(0px, 0vw, 200px);
  top: clamp(10px, 5vw, 20px);
  transform: rotate(-7deg);
}

/* Subtitle */
.activities-subtitle {
  max-width: 600px;
  margin: 1.5rem auto 0 auto;
  text-align: center;
  color: #222;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
}

/* Cards Layout */
.activities-container {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  flex-wrap: wrap;
  margin-top: clamp(50px, 8vw, 100px);
  margin-bottom: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Activity Card */
.activity-card {
  background: #FFD6C9;
  border-radius: 24px;
  padding: 1.5rem;
  width: clamp(280px, 30vw, 390px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* GIF */
.activity-card img {
  width: 100%;
  height: clamp(220px, 25vw, 320px);
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 1rem;
}

/* Hover Effect */
.activity-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 22px 40px rgba(0,0,0,0.14);
}

/* Text */
.activity-card h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.activity-card p {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: #555;
}
@media (max-width: 768px) {
  .sticker-sun {
    width:90px;
    left:-1px;
    top:0px;
    transform: rotate(-12deg);
  }
  .section h2 {
    margin-top: 4rem;
  }
}

/* Foundation List Layout */
.foundation-section {
  background: linear-gradient(135deg, #FFF9F7, #FFEFE8, #FFD7CF, #ffcfc5);
  position: relative;
  padding: clamp(60px, 8vw, 80px) clamp(20px, 6vw, 40px);
  padding-top: clamp(6rem, 10vw, 8rem);
  border-radius: 20px;
}

/* List container */
.foundation-list {
  max-width: 800px;
  margin-top: clamp(2rem, 4vw, 4rem);
  margin-left: clamp(1rem, 6vw, 5rem);
  margin-bottom: 2rem;

  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  list-style: none;
}

/* List item */
.foundation-list li {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  align-items: flex-start;
  border-radius: 18px;
  transition: all 0.25s ease;
  padding: clamp(10px, 1.5vw, 16px);
}

/* Icon */
.foundation-list .icon {
  font-size: clamp(1.6rem, 2vw, 2rem);
}

/* Title */
.foundation-list h4 {
  margin-bottom: 0.4rem;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 700;
  text-align: left;
}

/* Paragraph */
.foundation-list p {
  font-size: clamp(0.95rem, 1.2vw, 0.95rem);
  color: #383737;
  font-weight: 500;
  text-align: left;
}

/* Hover effect */
.foundation-list li:hover {
  background: #76cea8;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

.foundation-list li:hover h4,
.foundation-list li:hover p {
  font-weight: 600;
}

/* Stickers */
.sticker {
  position: absolute;
  width: clamp(100px, 10vw, 150px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.sticker-big {
  position: absolute;
  width: clamp(280px, 30vw, 450px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* Top-left sticker */
.sticker-top-left {
  top: clamp(14px, 4vw, 24px);
  left: clamp(80px, 14vw, 220px);
  transform: rotate(-7deg);
}

/* Bottom-right sticker */
.sticker-bottom-right {
  bottom: clamp(60px, 8vw, 110px);
  right: clamp(20px, 4vw, 50px);
}
/* Mobile Adjustments for Foundation Stickers */
@media (max-width: 768px) {
  
  /* Pin small sticker to the absolute top-left */
  .sticker-top-left {
    top: 1px;
    left: 10px;
    width: 80px; /* Scaling down slightly for mobile */
    transform: rotate(-10deg);
  }

  /* Pin big sticker to the absolute bottom-right */
  .sticker-bottom-right {
    bottom: -25px;
    right: -1px;
    width: 150px; /* Making the 'big' sticker more mobile-friendly */
    opacity: 0.8; /* Optional: slight transparency so it's less distracting */
  }

  /* Adjust section padding so text doesn't hit the stickers */
  .foundation-section {
    padding-top: 5rem; 
    padding-bottom: 5rem;
  }

  /* Ensure the list doesn't get squished by the new sticker positions */
  .foundation-list {
    margin-left: 0;
    padding: 0 10px;
  }
}

/* Contact */
.journey-section {
  background: #FFF9F7;
  padding: clamp(3rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  position: relative;
}

/* Subtitle */
.journey-subtitle {
  max-width: 650px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: #555;
  font-size: clamp(0.9rem, 1vw, 1rem);
}

/* Cards Layout */
.journey-cards {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  flex-wrap: wrap;
}

/* Individual Card */
.journey-card {
  background: linear-gradient(135deg, #f9e4e7, #f6c7d0, #f3a9b7, #f07d9d);
  border-radius: 24px;

  padding: clamp(1.8rem, 4vw, 2.8rem);
  width: clamp(300px, 42vw, 550px);

  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  text-align: left;
}

.journey-card h3 {
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  font-size: clamp(18px, 2vw, 24px);
  color: #333;
}

/* Phone Sticker */
.sticker-phone {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.3s ease;

  top: clamp(120px, 18vw, 170px);
  right: clamp(20px, 8vw, 120px);

  width: clamp(140px, 18vw, 250px);
  height: auto;
}

/* Form Styling */
.journey-card form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 2vw, 1rem);
}

.journey-card input,
.journey-card textarea {
  width: 100%;
  padding: clamp(0.7rem, 1.2vw, 1rem);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  border-radius: 16px;
  border: 1px solid #ddd;
}

.journey-card textarea {
  resize: none;
  height: clamp(80px, 10vw, 100px);
}

/* Details Box */
.details p {
  margin-bottom: clamp(0.6rem, 1.5vw, 1rem);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
}

/* Map */
.map-placeholder {
  background: #eea0c1;
  height: clamp(160px, 20vw, 240px);
  border-radius: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(1rem, 1.2vw, 1.2rem);
  margin-top: clamp(0.8rem, 2vw, 1rem);
}

/* Button */
.primary-btn {
  background: #ee6484;
  color: black;
  border: none;
  width: clamp(120px, 30%, 200px); 
  padding: clamp(0.6rem, 1vw, 0.8rem);
  border-radius: 20px;

  cursor: pointer;
  margin-top: clamp(25px, 4vw, 50px);
}

.primary-btn:hover {
  background: #4aa664;
}
@media (max-width: 768px) {
  /* 1. Reset the section positioning so the sticker ignores the outer boundaries */
  .journey-section {
    position: static; 
  }

  /* 2. Make the second card the new 'anchor' for the sticker */
  .journey-cards .journey-card:nth-child(2) {
    position: relative; /* This is the key! */
  }

  /* 3. Position the phone sticker inside that second card */
  .sticker-phone {
    top: -40px;    /* Floats slightly above the card top */
    right: -10px;  /* Floats slightly off the right edge */
    left: auto;    /* Resets any previous left positioning */
    
    width: 120px;   /* Smaller size for mobile fit */
    transform: rotate(10deg);
    z-index: 10;   /* Ensures it stays on top of the card */
  }
}
/* Footer */
footer {
  background: #23795a;
  padding: clamp(0.8rem, 2vw, 1rem);
  text-align: center;
}

/* Programs Section */
.programs-section {
  text-align: center;
  /* Fluid font size for section description */
  font-size: clamp(1rem, 1.5vw, 1.3rem); 
  position: relative;
  padding: 0 1rem;
  margin-bottom: 6rem;
}

.programs-bg-card {
  max-width: 1200px;
  margin: 0 auto;
  /* Fluid padding: scales down on mobile */
  padding: clamp(40px, 8vw, 60px) clamp(20px, 5vw, 40px) clamp(60px, 10vw, 80px);
  background: linear-gradient(135deg, #fff1c7, #fddb76, #e2c570);
  border-radius: 80px 50px 90px 60px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden; /* Keeps stickers from causing horizontal scroll */
}

/* Stickers - Using % and clamp to scale them */
.sticker {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.sticker-right {
  top: 8px;
  right: 14%; /* Use % so it moves with screen width */
  width: clamp(120px, 18vw, 220px);
  height: auto;
}

.sticker-left {
  top: -10px;
  left: 2%;
  width: clamp(160px, 22vw, 320px);
  height: auto;
}

/* Container - Switched to auto-fit grid */
.programs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  justify-content: center;
  gap: 2rem clamp(2rem, 10vw, 8rem); /* Adjusted gap for wider cards */
  margin-top: 4rem;
  width: 100%;
}

/* Card - Made width fluid so it fits the 280px column */
.program-card {
  width: clamp(320px, 80vw, 400px); 
    height: 350px; /* Slightly increased height to keep proportions */
    perspective: 1000px;
    margin: 1.5rem auto;
}

/* Front & Back - Added fluid text sizes */
.program-front h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 500;
  color: #222;
}
.card-hint {
  font-size: clamp(11px, 2.2vw, 14px);
  margin-top: clamp(14px, 3vw, 24px);
  opacity: 0.9;
}
.program-back {
  transform: rotateY(180deg);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 500;
  color: #222;
  text-align: center;
  padding: 1.2rem;
}

/* Icon - Responsive scaling */
.icon img {
  width: clamp(120px, 15vw, 160px);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.8rem;
}

.program-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.program-card:hover .program-inner { transform: rotateY(180deg); }
.program-front, .program-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 28px 12px 28px 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  padding: 1.5rem;
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  overflow: hidden;
}
.blob {
  position: absolute;
  width: 90px;
  height: 70px;
  border-radius: 50% 35% 60% 50%;
  top: -10px;
  left: -10px;
  z-index: 0;
}
.blob-pink { background: linear-gradient(135deg,#f4a3e1,#f4a3e1); }
.blob-green { background: linear-gradient(135deg,#6BCF8E,#6BCF8E); }
.blob-blue { background: linear-gradient(135deg,#5DADE2,#5DADE2); }
.blob-brown { background: linear-gradient(135deg,#d98a4a,#d98a4a); }

/* GIF Icon - Fluid Scaling */
.icon img {
  /* Shrinks to 120px on small screens, grows to 160px on laptops */
  width: clamp(120px, 15vw, 160px); 
  height: clamp(120px, 15vw, 160px);
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.8rem;
  /* Keeps the circle proportional */
  aspect-ratio: 1 / 1; 
}

/* Front Text - Fluid Scaling */
.program-front h3 {
  font-family: 'Fredoka', sans-serif;
  /* Scales between 1.15rem and 1.4rem */
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 500;
  color: #222;
  line-height: 1.2;
  text-align: center;
}

/* Back Text - Fluid Scaling */
.program-back {
  transform: rotateY(180deg);
  /* Scales between 0.9rem and 1rem */
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
  color: #222;
  text-align: center;
  padding: clamp(1rem, 5%, 1.5rem);
  line-height: 1.5;
}

/* Maintaining the Animations & Structure */
.program-front .icon {
  display: block;
  animation: float 3s ease-in-out infinite; /* Added subtle float to icons */
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* CARD 1 – Play Group */
.pink-card .program-front {
  background: linear-gradient(135deg, #e2d6f5, #c6b4ef, #9f87db);   /* cream front */
}

.pink-card .program-back {
  background: linear-gradient(135deg, #CFF5E7, #97E9D2, #6ACFB8);   /* yellow back */
}
.peach-card .program-front {
  background: linear-gradient(135deg, #fbe3ea, #f3c2cd, #f399ad);
   /* cream front */
}

.peach-card .program-back {
  background: linear-gradient(135deg, #FFD6C9, #FFC1AD, #FFAD92);
  ;   /* yellow back */
}

/* CARD 2 – Kindergarten */
.green-card .program-front {
  background: linear-gradient(135deg, #FFD6C9, #FFC4B2, #FFAB95, #FF8F78);
  /* mint front */
}

.green-card .program-back {
  background: linear-gradient(135deg, #FFF1C1, #FFE59F, #FFC96F);
  ;   /* softer yellow */
}
.mintgreen-card .program-front {
  background: linear-gradient(135deg, #c5eddf, #a1eaca, #71cfa6);
  /* softer yellow */
}
.mintgreen-card .program-back {
  background: linear-gradient(135deg, #FFD6C9, #FFC4B2, #FFAB95, #FF8F78);
  /* softer yellow */
}
/* --- Fix Stickers on Smaller Screens --- */

@media (max-width: 768px) {
  /* 1. Adjust the main Section Header */
  .programs-section h2 {
    display: flex;
    flex-direction: column; /* Stack Rainbow -> Text -> Crayon vertically */
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between stickers and text */
    margin-top: 60px;
  }

  /* 2. Reposition Stickers from Corners to Center */
  .sticker-left, 
  .sticker-right {
   /* Removes absolute corner positioning */
    display: block;   /* Allows them to be stacked */
    transform: none;  /* Remove any corner rotations */
    margin: 0 auto;   /* Keep them centered */
  }

  /* 3. Refine Rainbow Sticker (Left) */
  .sticker-left {
    width: 170px; /* Specific fixed width for mobile */
    order: 1; 
    top:-8px;
    left:-6px;    /* Places Rainbow at the TOP */
  }

  /* 4. The Text Heading itself */
  .programs-section h2 .heading-text {
    font-size: 1.8rem; /* Adjusted for mobile */
    order: 2;          /* Places Text in the MIDDLE */
  }

  /* 5. Refine Crayon Sticker (Right) */
  .sticker-right {
    display: none;
  }
  .programs-container {
     /* Adjusted gap for wider cards */
    margin-top: 1.5rem;
   
  }
}


/* About Section */
.about-section {
  display: flex;
  justify-content: center;
  /* Vertical padding scales down on mobile */
  padding: 30px clamp(20px, 10vw, 70px) 80px clamp(20px, 10vw, 70px);
  background: #FFF9F7;
  overflow: hidden; /* Crucial to prevent stickers from causing horizontal scroll */
}

/* Cloud container */
.about-cloud {
  max-width: 980px;
  width: 100%;
  /* Padding scales: left/right padding reduces on mobile to give text room */
  padding: clamp(40px, 8vw, 60px) clamp(20px, 10vw, 70px);
  margin-top: clamp(50px, 15vw, 100px);
  text-align: center;
  background: linear-gradient(135deg, #cfaef2, #d48fe8, #f6b4f2);
  border: 3px solid #7ddf9e;
  /* Border radius softens on mobile */
  border-radius: clamp(40px, 15vw, 140px);
  position: relative;
  z-index: 1;  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Fluid Stickers */
.about-sticker, .about-sticker-right {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: auto; /* Keep aspect ratio */
}

.about-sticker {
  /* Moves from -180px on laptop to 0px on mobile if needed */
  left: clamp(-180px, -15vw, -50px); 
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  width: clamp(180px, 35vw, 400px);
}

.about-sticker-right {
  right: clamp(-270px, -20vw, -80px);
  top: 45px;
  width: clamp(180px, 35vw, 390px);
}

/* Hide stickers on very small screens so they don't cover the cloud */
@media (max-width: 1200px) {
  .about-sticker, .about-sticker-right {
      opacity: 0.4; /* Fade them out slightly as they get closer to text */
  }
}

@media (max-width: 768px) {
  .about-sticker, .about-sticker-right {
      display: none; /* Best to hide them on phones to keep the cloud readable */
  }
}

.about-cloud:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Cloud puffs - responsive positioning */
.about-cloud::before,
.about-cloud::after {
  content: "";
  position: absolute;
  width: clamp(80px, 15vw, 150px);
  height: clamp(40px, 8vw, 70px);
  background: #7ddf9e;
  border: 3px solid #cfaef2;
  border-radius: 140px 140px 0 0;
  top: clamp(-49px, -14vw, -104px);
  z-index: 0;
}

.about-cloud::before { left: 14%; }
.about-cloud::after { right: 14%; }

/* Typography */
.about-cloud h2 {
  margin-bottom: 20px;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  color: #222;
}

.about-cloud p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: #222;
  max-width: 760px;
  margin: auto;
  /* Remove fixed left padding on mobile for better centering */
  padding-left: clamp(0px, 2vw, 20px);
}
  
/* Modal background */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Slightly darker for better focus */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px; /* Ensures modal doesn't touch screen edges on tiny phones */
}

/* Modal box */
.modal-content {
  background: #d1f4dd;
  border: 3px solid #f998b5;
  border-radius: clamp(15px, 5vw, 25px); /* Rounded corners scale down */
  
  /* Fluid Padding: More breathing room on desktop, tighter on mobile */
  padding: clamp(20px, 5vw, 40px);
  
  width: 100%;
  max-width: 450px; /* Slightly wider for a more professional feel */
  text-align: center;
  position: relative;
  animation: popup 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Added a slight "bounce" */
  
  /* Prevents the modal from becoming taller than the screen */
  max-height: 90vh;
  overflow-y: auto;
}

/* Form inputs */
.admission-form input {
  width: 100%;
  /* Increase padding on mobile for "fat-finger" friendliness */
  padding: clamp(10px, 3vw, 14px); 
  margin: 8px 0;
  border-radius: 20px;
  border: 2px solid #eee; /* Slightly thicker border for clarity */
  
  /* Font size must be at least 16px on mobile to prevent iOS auto-zoom */
  font-size: clamp(16px, 1.1rem, 18px); 
  
  transition: border-color 0.3s ease;
  box-sizing: border-box; /* Ensures padding doesn't break width */
}

.admission-form input:focus {
  outline: none;
  border-color: #f998b5;
}

/* Submit button */
.admission-form .primary-btn {
  width: 100%;
  margin-top: 15px;
  padding: 14px;
  font-size: 16px;
}

/* Close button - larger hit area for mobile */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ff6f91;
}

/* Popup animation */
@keyframes popup {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
  
  /* Why Us Section */
.why-us {
  /* Fluid padding: Top/Bottom 40px-60px, Side 20px */
  padding: clamp(40px, 8vw, 60px) 20px;
  background: #FFF9F7;
  text-align: center;
}

.why-us h2 {
  /* Font size scales between 28px and 36px */
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  color: #222;
  margin-bottom: 10px;
}

.why-us subtitle {
  display: block; /* Ensure subtitle behaves like a block element */
  max-width: 600px;
  width: 90%;
  margin: 20px auto 40px;
  color: #0c0c0c;
  font-weight: 400; /* Increased from 200 for better mobile readability */
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
}

/* Slider Container */
.slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* Allows "snapping" to cards while swiping on mobile */
  scroll-snap-type: x mandatory;
  padding: 10px 10px 30px; /* Space for hover shadow */
  scrollbar-width: none;
  margin-top: 2rem;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.cards::-webkit-scrollbar {
  display: none;
}

/* Individual Card */
.card {
  /* Don't grow, don't shrink, stay at base width (clamp makes it fluid) */
  flex: 0 0 clamp(280px, 70vw, 320px);
  border-radius: 20px;
  padding: 24px;
  text-align: left;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-aligns image and title inside card */
}

.card h3 {
  margin: 15px 0 10px;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  text-align: center;
}

.card p {
  font-size: clamp(0.85rem, 1vw, 0.9rem);
  line-height: 1.6;
  text-align: center; /* Matches your layout aesthetic */
}

.card img {
  /* Scales width between 140px and 200px based on screen size */
  width: 100%;
  max-width: clamp(140px, 15vw, 200px); 
  
  /* Scales height between 120px and 160px */
  height: clamp(120px, 12vw, 160px);
  
  /* Keeps the image centered within the card */
  margin: 0 auto 1rem;
  
  object-fit: contain;
  background: rgba(255, 255, 255, 0.4);
  padding: clamp(8px, 2vw, 15px); /* Padding also shrinks on mobile */
  border-radius: 15px;
  display: block; /* Ensures margin: auto works */
}

/* Hover effect */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.05);
}
.peach { background: #e9d5ff; }
.green { background: #99f6e4; }
.blue { background: #8ecae6; }
.yellow { background: #fde68a; }
.lavender { background: #f6c1a3; }
.mint { background: #7ddf9e; }
/* Dots */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.dot {
  width: clamp(8px, 2vw, 10px);
  height: clamp(8px, 2vw, 10px);
  background: #c4c4c4;
  border-radius: 50%;
  transition: background 0.3s, transform 0.3s;
}

.dot.active {
  background: #000;
  transform: scale(1.2);
}
  
:root {
  --font-main: 'Fredoka', sans-serif;
}

/* Container */
.faq-container {
  text-align: center;
  padding: clamp(70px,10vw,120px) clamp(15px,4vw,20px);
  background-color: #f0fdf9;
  font-family: var(--font-main);
}

/* Header */
.faq-header {
  text-align: center;
  margin-bottom: clamp(25px,5vw,40px);
  position: relative;
}

/* Sun Stickers */
.sun {
  position: absolute;
  width: clamp(80px,12vw,150px);
  height: auto;
}

.sun-left {
  transform: rotate(-15deg);
  top: clamp(-40px,-5vw,-60px);
  left: clamp(5%,20%,20%);
}

.sun-right {
  transform: rotate(15deg);
  top: clamp(-40px,-5vw,-60px);
  right: clamp(5%,20%,20%);
}

/* Clouds */
.cloud-left,
.cloud-right{
  width: clamp(120px,18vw,210px);
  height: auto;
  position: absolute;
}

.cloud-left{
  top: clamp(10px,3vw,25px);
  left: clamp(-6%, -2%, -2%);
}

.cloud-right{
  top: clamp(10px,3vw,25px);
  right: clamp(-6%, -2%, -2%);
}

/* Floating animation */
@keyframes floatCloud {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.cloud {
  animation: floatCloud 4s ease-in-out infinite;
}

/* Bubbly Title */
.bubbly-title {
  font-size: clamp(2.2rem,6vw,5rem);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: clamp(1px,0.2vw,2px);
}

.bubbly-title span {
  display: inline-block;
  -webkit-text-stroke: 2px #4A90E2;
  filter: drop-shadow(2px 2px 0px #fff);
}

/* Letter colors */
.bubbly-title span:nth-child(1){ color:#FF8B8B;}
.bubbly-title span:nth-child(2){ color:#FFD93D;}
.bubbly-title span:nth-child(3){ color:#6BCB77;}
.bubbly-title span:nth-child(4){ color:#4D96FF;}
.bubbly-title span:nth-child(5){ color:#FF8B8B;}
.bubbly-title span:nth-child(6){ color:#FFD93D;}
.bubbly-title span:nth-child(7){ color:#6BCB77;}
.bubbly-title span:nth-child(8){ color:#4D96FF;}
.bubbly-title span:nth-child(9){ color:#FF8B8B;}
.bubbly-title span:nth-child(10){ color:#FFD93D;}

/* Subtitle */
.subtitle {
  font-size: clamp(1rem,2.5vw,1.5rem);
  color: #2D3436;
  font-weight: 600;
  margin-top: -10px;
}

/* FAQ grid */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(6px,1.5vw,8px);
  max-width: 1000px;
  margin: auto;
}

/* FAQ cards */
.faq-card {
  background: white;
  padding: clamp(8px,2vw,10px);
  border-radius: 25px;
  border: 2px solid #E0E0E0;
  transition: all 0.3s ease;
  text-align: left;
  display: none;
}

.faq-card.visible {
  display: block;
}

/* Toggle button */
.faq-toggle-container {
  text-align: center;
  margin-top: clamp(15px,3vw,20px);
}

#faqToggleBtn {
  background: none;
  border: none;
  font-size: clamp(14px,2vw,18px);
  cursor: pointer;
  color: #449bf2;
  font-weight: 600;
}

/* Text */
.faq-card h3 {
  font-size: clamp(0.9rem,1.2vw,1rem);
  margin-bottom: 6px;
  color: #333;
}

.faq-card p {
  font-size: clamp(0.8rem,1vw,0.9rem);
  line-height: 1.3;
  margin: 0;
}

/* Top border accents */
.yelloww { border-top: 8px solid #f0d97b; }
.pink    { border-top: 8px solid #6fa5ef; }
.greenn  { border-top: 8px solid #8dc995; }
.bluee   { border-top: 8px solid #f7a6a6; }

  .nav-links a.active {
    border-bottom: 2px solid #FFD6C9;
  }
  /* Responsive adjustments for FAQ Header Stickers */
@media (max-width: 768px) {
  /* Ensure the header has enough space for stickers above it */
  .faq-header {
    padding-top: 40px; 
    margin-bottom: 20px;
  }

  /* Sun Stickers */
  .sun {
    width: 60px; /* Smaller fixed size for mobile */
    top: -30px;  /* Bring them closer to the title */
  }

  .sun-left {
    left: 5px;   /* Pin to the edge instead of using large % */
    transform: rotate(-10deg);
  }

  .sun-right {
    right: 5px;  /* Pin to the edge */
    transform: rotate(10deg);
  }

  /* Cloud Stickers */
  .cloud-left,
  .cloud-right {
    width: 80px; /* Scale down clouds */
    top: -10px;
  }

  .cloud-left {
    left: -10px; /* Slight overflow looks more natural/bubbly */
  }

  .cloud-right {
    right: -10px;
  }
}

/* Extra small screens (Phones) */
@media (max-width: 480px) {
  .sun {
    width: 90px;
    top: -40px;
  }
  
  .cloud-left, 
  .cloud-right {
    width: 90px;
  }
}
  
  /* --- Base Styles (Laptop/Desktop) --- */
.curriculum-card {
  max-width: 1100px;
  width: 90%; /* Changed from 100% to allow breathing room */
  background: linear-gradient(135deg, #f6cab7, #aceaf4, #f9bdd1);
  border-radius: 32px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  /* Use margin: auto for centering instead of fixed 12rem for better fluidity */
  margin: 2rem auto 2rem auto; 
  position: relative;
  padding-bottom: 4rem;
}

.curriculum-heading {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem); /* Fluid font size */
  text-align: left;
  padding-left: 15%;
}

.curriculum-body {
  display: flex;
  gap: 40px;
  align-items: center;
}

.curriculum-text {
  flex: 2;
  text-align: justify;
  max-width: 60%; /* Adjusted slightly for better text flow */
}

.curriculum-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  padding-left: 2rem;
  text-align: justify;
  text-justify: inter-word; /* Better spacing between words */
 /* Prevents large white gaps by breaking long words if needed */
  margin: 0;
}

.curriculum-sticker {
  position: absolute;
  right: -20px;
  bottom: 5px;
  width: 60%; /* Relative width for fluidity */
  max-width: 450px;
  height: auto; /* Keep aspect ratio */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

.bee {
  position: absolute;
  width: 400px; /* adjust size as needed */
  height:400px;
  z-index: 1;
  pointer-events: none; /* so stickers don’t block text */
  transform-origin: center;
  transition: transform 0.3s ease; /* optional for hover effects */
  left:-200px;
  transform: rotate(-8deg);
  top:95px;
}

/* --- Responsive Adjustments --- */

/* For Tablets/Small Laptops */
@media (max-width: 1200px) {
  .bee {
    left: -80px; /* Pull bee in so it doesn't go off-screen */
    width: 250px;
  }
}

/* For Mobile Devices */
@media (max-width: 768px) {
  .bee {
    display: none; /* Hides the bee on mobile */
  }

  .curriculum-card {
    padding: 30px 20px 10px;
    width: 95%;
    margin-top: 1rem;
  }

  .curriculum-heading {
    padding-left: 0;
    text-align: center;
    font-size: 2.2rem;
  }

  .curriculum-body {
    flex-direction: column; /* Stack text and image */
    text-align: center;
  }

  .curriculum-text {
    max-width: 100%;
    text-align: justify;
  }

  .curriculum-text p {
    padding-left: 0;
    text-align: center;
  }

  .curriculum-sticker {
    position: static; /* Removes absolute positioning */
    width: 100%;
    margin: 20px auto 0 auto;
    display: block;
  }
}
 

.core-beliefs {
  text-align: center;
  position: relative;
  overflow: hidden; /* Prevents butterflies from causing horizontal scroll */
  padding: 10px 20px;
  background-color: #FFF9F7; /* Optional: light background to match your theme */
}

.core-beliefs-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  padding: 10px 20px 60px 20px;
  display: inline-flex;    
  align-items: center;     /* This centers text and spirals vertically */
  justify-content: center;
  position: relative;
  gap: 30px;               /* Space between spirals and text */
  line-height: 1;          /* Ensures the text box doesn't have extra height */
}

/* Spirals: Simplified for Flexbox */
.spiral {
  width: 140px;            /* Your preferred size */
  height: auto;
  flex-shrink: 0;
  /* Remove transform: translateY(-50%) as it was pulling them too high */
}

/* No specific left/right positioning needed when using inline-flex gap */
.spiral.left, .spiral.right {
  position: static; 
}

/* --- Card Grid --- */
.belief-cards {
  display: grid;
  /* Automatically fits as many 240px circles as possible */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center; /* Centers circles in their grid cells */
}

/* Individual Circle Card */
.belief-card {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b9b9ee, #f1caf5, #f8cda7);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  padding: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.belief-card:hover {
  transform: translateY(-10px) scale(1.05);
}

.belief-card p {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
  font-weight: 500;
}
  .butterfly-corner {
    position: absolute;
    top: 20px;
    width: 200px;
    height: 200px;
    pointer-events: none;
  }
  
  .butterfly-corner.left { left: 40px; }
  .butterfly-corner.right { right: 40px; }
  
  .bf {
    width: 72px;              /* bigger base */
    opacity: 0.9;
    animation: wing-flap 0.8s ease-in-out infinite;
    position:absolute;
  }

  .left .b1 { 
    width: 105px;
    top: 40px;
    left: 60px;
    transform: rotate(-12deg);
  }
  
  .left .b2 {
    width: 90px;
    top: 130px;
    left: 30px;
    opacity: 0.75;
    transform: rotate(8deg);
  }
  
  .left .b3 {
    width: 65px;
    top: 200px;
    left: 90px;
    opacity: 0.65;
    transform: rotate(-4deg);
  }
  
  .left .b4 {
    width: 50px;
    top: 80px;
    left: 150px;
    opacity: 0.6;
    transform: rotate(14deg);
  }
  .right .b5 {
    width: 105px;
    top: 50px;
    right: 70px;
    transform: rotate(-12deg);
  }
  
  .right .b6 {
    width: 90px;
    top: 130px;
    right: 30px;
    opacity: 0.75;
    transform: rotate(8deg);
  }
  
  .right .b7 {
    width: 65px;
    top: 210px;
    right: 100px;
    opacity: 0.65;
    transform: rotate(-4deg);
  }
  
  .right .b8 {
    width: 50px;
    top: 90px;
    right: 160px;
    opacity: 0.6;
     transform: rotate(14deg);
  }
@keyframes wing-flap {
  0%   { transform: scale(1) rotate(var(--r, 0deg)); }
  50%  { transform: scale(1.06) rotate(calc(var(--r, 0deg) + 3deg)); }
  100% { transform: scale(1) rotate(var(--r, 0deg)); }
}
@media (max-width: 1100px) {
  .butterfly-corner {
    transform: scale(0.8); /* Shrink butterflies before hiding them */
  }
  .butterfly-corner.left { left: -30px; }
  .butterfly-corner.right { right: -30px; }
}

/* For Mobile Devices */
@media (max-width: 768px) {
  .butterfly-corner {
    display: block; /* Show butterflies on mobile */
    top: -20px; /* Adjust top positioning for title */
    width: 150px; /* Reduce width for smaller butterflies */
    height: 150px; /* Reduce height for smaller butterflies */
  }

  .butterfly-corner.left {
    top: 60px; /* Adjust left positioning for title */
  }

  .butterfly-corner.right {
    right: 20px; /* Adjust right positioning for title */
  }

  .bf {
    width: 50px; /* Reduce butterfly size for mobile */
  }

  /* Adjust individual butterfly positions for mobile */
  .left .b1 { top: 60px; left: 40px; }
  .left .b2 { top: 190px; left: 10px; }
  .left .b3 { top: 320px; left: 70px; }
  .left .b4 { top: 40px; left: 90px; }
  .right .b5 { top: 162px; right: -2px; }
  .right .b6 { top: 286px; right: -40px; }
  .right .b7 { top: 420px; right: 20px; }
  .right .b8 { top: 162px; right: -2px; }

  .core-beliefs-title {
    font-size: 4rem;      /* Adjusted so text doesn't overflow screen */
    white-space: nowrap;    /* FORCES the text to stay on one single line */
    gap: 10px;              /* Reduces gap between spirals and text */
    padding: 0px 0px 50px 0px;;             /* Removes extra padding that was squeezing the text */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .spiral {
    width: 60px;            /* Smaller spirals so they fit next to the text */
    height: auto;
    flex-shrink: 0;
  }

  .belief-cards {
    gap: 40px; /* More vertical space when stacked */
  }
  
  .belief-card {
    width: 220px; /* Slightly smaller circles for mobile */
    height: 220px;
  }
}

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 40px;

  justify-content: center;
  position: relative;
  overflow-x: hidden;
}
.owl {
  height: auto;
  width: 35%;          /* Scalable width */
  max-width: 650px;
transform: rotate(5deg);

position: absolute;
  left: -2%;
  top: 80px;
  z-index: 2;
  pointer-events: none;
}
.bear {

  height: auto;
  width: 30%;          /* Scalable width */
  max-width: 600px;
  transform: rotate(5deg);
  
  position: absolute;
    right: -2%;
    bottom: 50px;
    z-index: 2;
    pointer-events: none;
  }

.cardd {
  width: min(1000px, 85%);
  padding: 40px 30px; /* taller for oval shape */
  border-radius: 140px; /* oval */
  color: rgb(25, 24, 24);
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  
margin-top: 4rem;
}

.cardd h2 {
  margin-bottom: 15px;
  font-size: 30px;
}

.cardd p {
  max-width: 700px;          /* keeps text readable */
  margin: 0 auto;            /* centers paragraph */
  font-size: 16.5px;
  line-height: 1.7;          /* better readability */
  color: #1f1f1f;

}

.mission-vision-banner {
  display: none;
}

/* Ombre / Gradient backgrounds */
.vision {
  margin-left: 20rem;
  background: linear-gradient(135deg, #FF6B6B, #FFD93D); /* reddish-yellow */
}

.mission {
  background: linear-gradient(135deg, #6BCB77, #4D96FF);
  margin-bottom: 4rem; /* green-blue */
}
.mission-points {
  list-style: none;          /* remove default bullets */
  padding: 0;
  margin: 0 auto;
  max-width: 750px;
}

.mission-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  font-size: 16.5px;
  line-height: 1.7;
  color: #1f1f1f;

  margin-bottom: 14px;      /* space for custom dot */
}

/* Custom bullet */
.mission-points li::before {
  content: "✔";
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- UPDATED AND CLEANED MEDIA QUERIES --- */

@media (max-width: 1024px) {
  .vision, .mission {
    margin-left: auto;
    margin-right: auto;
    /* Center cards on tablets */
  }
  
  .owl { 
    left: 0%;            /* Tuck it IN from the left edge slightly */
    top: 220px;           /* Adjust position as needed */
    width: 39%;          /* Scalable width */
    transform: rotate(-3deg);
    /* Revert rotate back to positive or adjust as needed */
  } 

  .bear { 
    right: -6%;           /* Tuck it IN from the right edge slightly */
     /* Adjust position as needed */
    width: 30%;          /* Scalable width */
    transform: rotate(5deg);
  }
}

@media (max-width: 768px) {
  .cards-container {
    padding: 20px 10px;
    gap: 30px; /* Slightly tighter gaps for smaller screens */
  }
  
  .cardd {
    width: 95%;
    border-radius: 60px;
    padding: 30px 20px;
  }

  .cardd h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .cardd p,
  .mission-points li {
    font-size: 15px; /* Slightly smaller text for better readability on phones */
  }

  /* SHOW and STYLE the new rectangular image for mobile */
  .mission-vision-banner {
    display: block;
    width: 90%;          /* Fits nicely, with some edge padding */
    height: auto;
    margin: 20px auto;    /* Centers and gives space */
    max-width: 400px;
    border-radius: 20px; /* Looks friendlier with rounded corners */
  }

  /* Character positioning for very small mobile (Phones) */
  .owl { 
    width: 180px;        /* Fixed max size for phone screens */
    left: -20px;         /* Anchored from the left */
    top: 90px;
    transform: rotate(-8deg);
  }

  .bear {
    width: 150px;        /* Fixed max size for phone screens */
    right: -45px;        /* Anchored from the right */
    bottom: 7px;
    transform: rotate(5deg);
  }
}
/* DAYCARE SECTION */
.daycare-section {
  padding: 60px 20px;
  flex: 1;
}

.daycare-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

/* LEFT IMAGE */
.daycare-image {
  flex: 1;
  text-align: center;
}

.daycare-image img {
  width: 100%;
  max-width: 550px;
}

/* RIGHT CONTENT */
.daycare-content {
  flex: 1;
}

.daycare-content h2 {
  color:#5D4037;
  font-family: 'Fredoka', sans-serif;
  font-size: 36px;
  margin-bottom: 15px;
}

.daycare-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  text-align: justify;
}

.bottom-image {
  margin: 0;
  padding: 0;
  line-height: 0; /* important: removes inline image gap */
}

.bottom-image img {
  width: 100%;
  max-height: 400px;
  display: block; /* removes extra bottom space */
}
/* RESPONSIVE */
@media (max-width: 768px) {
  .daycare-container {
    flex-direction: column;
    text-align: center;
  }

  .daycare-content h2 {
    font-size: 28px;
  }
}