body {
      font-family: 'Quicksand', sans-serif !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Fredoka', cursive !important;
      font-weight: 700 !important;
    }

    body::after {
      content: "";
      background: url(images/art3.png);
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: fixed;
      z-index: -1;
    }

    /* Floating Glassmorphic Navbar */
    .ftco_navbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 72px !important;
      padding: 0 20px !important;
      margin: 0 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
      background: rgba(255, 255, 255, 0.97) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border-bottom: 4px solid #ffb703 !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
      border-radius: 0 0 24px 24px !important;
      z-index: 1100 !important;
      display: flex !important;
      align-items: center !important;
    }

    /* Playful 3D Bouncy Brand Style */
    .navbar-brand-custom {
      font-family: 'Fredoka', cursive !important;
      font-size: 2.2em !important;
      font-weight: 900 !important;
      letter-spacing: 0.5px;
    }

    /* Keyframes for multi-part playful entry micro-animations */
    @keyframes brandBadgeRollIn {
      0% {
        opacity: 0;
        transform: translateX(-40px) rotate(-360deg) scale(0.5);
      }
      65% {
        transform: translateX(6px) rotate(45deg) scale(1.15);
      }
      100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
      }
    }

    @keyframes brandTextEnglishSlide {
      0% {
        opacity: 0;
        transform: translateY(-25px) scale(0.8) rotate(-6deg);
      }
      70% {
        transform: translateY(4px) scale(1.08) rotate(3deg);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
      }
    }

    @keyframes brandTextRhymesSlide {
      0% {
        opacity: 0;
        transform: translateY(25px) scale(0.8) rotate(6deg);
      }
      70% {
        transform: translateY(-4px) scale(1.08) rotate(-3deg);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
      }
    }

    @keyframes brandStarPop {
      0% {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
      }
      75% {
        transform: scale(1.5) rotate(20deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    /* Assigning immediate load animations */
    .brand-badge {
      display: inline-flex !important;
      animation: brandBadgeRollIn 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }

    .navbar-brand-custom span:nth-of-type(1) {
      display: inline-block !important;
      opacity: 0;
      animation: brandTextEnglishSlide 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.12s forwards !important;
    }

    .navbar-brand-custom span:nth-of-type(2) {
      display: inline-block !important;
      opacity: 0;
      animation: brandTextRhymesSlide 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.24s forwards !important;
    }

    .navbar-brand-custom i.fa-star {
      display: inline-block !important;
      opacity: 0;
      animation: brandStarPop 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.45s forwards !important;
    }

    /* Unique Bouncy Jiggle Animation on Hover */
    @keyframes tabJiggle {
      0% { transform: translateY(-2px) rotate(0deg); }
      25% { transform: translateY(-4px) rotate(-3deg) scale(1.06); }
      50% { transform: translateY(-4px) rotate(3deg) scale(1.06); }
      75% { transform: translateY(-4px) rotate(-2deg) scale(1.06); }
      100% { transform: translateY(-2px) rotate(0deg); }
    }

    /* Cute Bouncy Sticker Pill Tabs */
    .custom-pill {
      border-radius: 18px 6px 18px 6px !important; /* Playful asymmetric bouncy sticker shape */
      font-family: 'Fredoka', sans-serif !important;
      font-weight: 900 !important;
      font-size: 0.95em !important;
      padding: 8px 18px !important;
      margin: 4px 5px !important;
      background: #ffffff !important; /* Solid bright white background for absolute readability */
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.05) !important;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      display: inline-flex !important;
      align-items: center !important;
      cursor: pointer !important;
    }

    .custom-pill:hover {
      animation: tabJiggle 0.4s ease-in-out forwards !important;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;
    }

    /* Force tabs to the far right and eliminate default list-item padding */
    .collapse.navbar-collapse {
      justify-content: flex-end !important;
      flex-grow: 1 !important;
    }

    .navbar-nav .nav-item {
      padding: 0 !important;
      margin: 0 !important;
    }

    /* High-contrast, brand-matching child-friendly borders and text colors */
    .pill-home {
      border: 3px solid #ff4757 !important; /* Cherry Red */
      color: #ff4757 !important;
    }
    .pill-home:hover {
      background-color: #ff4757 !important;
      color: #ffffff !important;
    }

    .pill-rhymes {
      border: 3px solid #ffa502 !important; /* Gold Orange */
      color: #ffa502 !important;
    }
    .pill-rhymes:hover {
      background-color: #ffa502 !important;
      color: #ffffff !important;
    }

    .pill-shared {
      border: 3px solid #a18cd1 !important; /* Playful Lavender */
      color: #a18cd1 !important;
    }
    .pill-shared:hover {
      background-color: #a18cd1 !important;
      color: #ffffff !important;
    }

    .pill-activity {
      border: 3px solid #2ed573 !important; /* Vivid Lime Green */
      color: #2ed573 !important;
    }
    .pill-activity:hover {
      background-color: #2ed573 !important;
      color: #ffffff !important;
    }

    .pill-paint {
      border: 3px solid #e056fd !important; /* Strawberry Pink */
      color: #e056fd !important;
    }
    .pill-paint:hover {
      background-color: #e056fd !important;
      color: #ffffff !important;
    }

    .pill-about {
      border: 3px solid #20a8e8 !important; /* Sky Blue */
      color: #20a8e8 !important;
    }
    .pill-about:hover {
      background-color: #20a8e8 !important;
      color: #ffffff !important;
    }

    /* Dropdown Menus */
    .dropdown-menu {
      border-radius: 18px !important;
      border: 3px solid #ffb703 !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
      padding: 6px !important;
      background: rgba(255, 255, 255, 0.98) !important;
      overflow: hidden;
    }

    .dropdown-item {
      font-family: 'Fredoka', sans-serif !important;
      font-weight: 700 !important;
      border-radius: 12px !important;
      padding: 10px 20px !important;
      transition: all 0.25s !important;
    }

    .dropdown-item:hover {
      background-color: #fff8e1 !important;
      color: #ff9f00 !important;
      transform: translateX(3px) !important;
    }

    /* Slider Caption Cards */
    .slider-caption-card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.93);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 4px solid #ffa502;
      border-top-width: 8px;
      border-radius: 24px;
      padding: 30px 40px;
      text-align: center;
      max-width: 650px;
      width: 90%;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      z-index: 5;
      animation: floatSlideIn 1.2s ease-out;
    }

    @keyframes floatSlideIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -40%);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    .slider-caption-card h2 {
      font-size: 2.2em;
      color: #8b4513;
      margin-bottom: 12px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
      font-family: 'Fredoka', cursive !important;
    }

    .slider-caption-card p {
      font-size: 1.15em;
      color: #5d4037;
      line-height: 1.5;
      margin-bottom: 22px;
      font-weight: 700;
    }

    .slider-caption-card .btn-cta {
      border-radius: 30px;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      padding: 10px 30px;
      font-size: 1.1em;
      box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3);
      transition: all 0.3s;
      border: none;
    }

    .slider-caption-card .btn-cta:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(255, 165, 0, 0.5);
    }

    /* Premium Core Services Restored Column Cards */
    .services-container {
      margin-top: 50px !important;
      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
      position: relative;
      z-index: 10;
    }

    .service-hero-card {
      background: #ffffff;
      border-radius: 28px !important;
      padding: 32px 24px 24px 24px !important;
      text-align: center;
      position: relative;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: auto;
      min-height: 220px;
      margin-bottom: 25px;
      border: 3px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Solid color borders on load */
    .card-accent-red { border-color: #ff4757 !important; }
    .card-accent-blue { border-color: #20a8e8 !important; }
    .card-accent-green { border-color: #2ed573 !important; }
    .card-accent-orange { border-color: #ffa502 !important; }

    /* Overlapping Top Circular icon badge */
    .service-hero-icon-wrap {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8em;
      color: white;
      margin-top: -55px; /* Pull it halfway up over the top card border */
      margin-bottom: 20px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .bg-accent-red {
      background-color: #ff4757 !important;
      box-shadow: 0 8px 20px rgba(255, 71, 87, 0.25) !important;
    }
    .bg-accent-blue {
      background-color: #20a8e8 !important;
      box-shadow: 0 8px 20px rgba(32, 168, 232, 0.25) !important;
    }
    .bg-accent-green {
      background-color: #2ed573 !important;
      box-shadow: 0 8px 20px rgba(46, 213, 115, 0.25) !important;
    }
    .bg-accent-orange {
      background-color: #ffa502 !important;
      box-shadow: 0 8px 20px rgba(255, 165, 2, 0.25) !important;
    }

    /* Hover States with gentle background tints and scaling */
    .service-hero-card:hover {
      transform: translateY(-8px) !important;
    }

    .card-accent-red:hover {
      background-color: #fff9fa !important;
      box-shadow: 0 15px 35px rgba(255, 71, 87, 0.15) !important;
    }
    .card-accent-blue:hover {
      background-color: #f2faff !important;
      box-shadow: 0 15px 35px rgba(32, 168, 232, 0.15) !important;
    }
    .card-accent-green:hover {
      background-color: #f4fdf7 !important;
      box-shadow: 0 15px 35px rgba(46, 213, 115, 0.15) !important;
    }
    .card-accent-orange:hover {
      background-color: #fffbf3 !important;
      box-shadow: 0 15px 35px rgba(255, 165, 2, 0.15) !important;
    }

    .service-hero-card:hover .service-hero-icon-wrap {
      transform: scale(1.15) rotate(8deg);
    }

    .service-hero-card h3 {
      font-size: 1.35em !important;
      color: #5d4037 !important;
      margin-bottom: 8px !important;
      font-weight: 700 !important;
      font-family: 'Fredoka', cursive !important;
    }

    .service-hero-card p {
      font-size: 0.9em;
      color: #666;
      margin-bottom: 15px;
      line-height: 1.45;
      font-weight: 500;
      font-family: 'Quicksand', sans-serif !important;
    }

    .service-hero-btn {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 0.85em;
      text-decoration: none !important;
      border-radius: 20px;
      padding: 6px 18px;
      transition: all 0.3s ease;
      margin-top: auto;
      border: 2px solid transparent;
      display: inline-block;
    }

    .btn-red { color: #ff4757 !important; background: rgba(255, 71, 87, 0.08); }
    .btn-red:hover { background: #ff4757 !important; color: white !important; }

    .btn-blue { color: #20a8e8 !important; background: rgba(32, 168, 232, 0.08); }
    .btn-blue:hover { background: #20a8e8 !important; color: white !important; }

    .btn-green { color: #2ed573 !important; background: rgba(46, 213, 115, 0.08); }
    .btn-green:hover { background: #2ed573 !important; color: white !important; }

    .btn-orange { color: #ffa502 !important; background: rgba(255, 165, 2, 0.08); }
    .btn-orange:hover { background: #ffa502 !important; color: white !important; }

    /* Nursery Rhymes Explorer Section */
    .section-title {
      font-size: 2.6em;
      color: brown;
      text-align: center;
      margin-bottom: 10px;
      position: relative;
      font-family: 'Fredoka', cursive !important;
    }

    .section-title::after {
      content: "";
      display: block;
      width: 80px;
      height: 4px;
      background: #ffa502;
      border-radius: 2px;
      margin: 10px auto 0;
    }

    .rhyme-sticker-item {
      text-align: center;
      margin-bottom: 10px; /* Reduced bottom margin */
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
    }

    .rhyme-sticker-wrap {
      max-width: 255px;
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 28px !important; /* Squircle sticker shape to completely prevent text cutting */
      background: #ffffff;
      padding: 16px; /* Increased padding to create a safe white margin for text */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Dashed cut-out sticker borders matching childhood colors */
    .border-sticker-red { border: 4px dashed #ff4757 !important; }
    .border-sticker-blue { border: 4px dashed #20a8e8 !important; }
    .border-sticker-orange { border: 4px dashed #ffa502 !important; }
    .border-sticker-green { border: 4px dashed #2ed573 !important; }

    .rhyme-sticker-img {
      width: 100%;
      height: 100%;
      border-radius: 16px !important; /* Adjusted to match wider padding perfectly */
      object-fit: contain;
      transition: transform 0.5s ease;
    }

    .rhyme-sticker-item:hover .rhyme-sticker-img {
      transform: scale(1.08);
    }

    .rhyme-sticker-item:hover {
      z-index: 10 !important;
    }

    /* Playful tilt animations on hover (peeling sticker effect!) */
    .rhyme-sticker-item:hover .rhyme-sticker-wrap {
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }
    
    .item-humpty:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-2.5deg) scale(1.05); }
    .item-jack:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(2.2deg) scale(1.05); }
    .item-teapot:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-1.8deg) scale(1.05); }
    .item-teddy:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(2.4deg) scale(1.05); }
    .item-hotcross:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-2.0deg) scale(1.05); }
    .item-hickory:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(2.2deg) scale(1.05); }
    .item-johny:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-1.5deg) scale(1.05); }
    .item-muffet:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(2.6deg) scale(1.05); }
    .item-london:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-2.2deg) scale(1.05); }
    .item-onetwo:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(2.0deg) scale(1.05); }
    .item-pussycat:hover .rhyme-sticker-wrap { transform: translateY(-10px) rotate(-1.8deg) scale(1.05); }

    .rhyme-sticker-title {
      font-size: 1.35em !important;
      color: #5d4037 !important;
      margin-bottom: 6px !important;
      font-weight: 700 !important;
      font-family: 'Fredoka', cursive !important;
      transition: color 0.3s;
    }

    .rhyme-sticker-item.item-humpty:hover .rhyme-sticker-title { color: #ff4757 !important; }
    .rhyme-sticker-item.item-jack:hover .rhyme-sticker-title { color: #20a8e8 !important; }
    .rhyme-sticker-item.item-teapot:hover .rhyme-sticker-title { color: #ffa502 !important; }
    .rhyme-sticker-item.item-teddy:hover .rhyme-sticker-title { color: #2ed573 !important; }
    .rhyme-sticker-item.item-hotcross:hover .rhyme-sticker-title { color: #ff4757 !important; }
    .rhyme-sticker-item.item-hickory:hover .rhyme-sticker-title { color: #20a8e8 !important; }
    .rhyme-sticker-item.item-johny:hover .rhyme-sticker-title { color: #ffa502 !important; }
    .rhyme-sticker-item.item-muffet:hover .rhyme-sticker-title { color: #2ed573 !important; }
    .rhyme-sticker-item.item-london:hover .rhyme-sticker-title { color: #ff4757 !important; }
    .rhyme-sticker-item.item-onetwo:hover .rhyme-sticker-title { color: #20a8e8 !important; }
    .rhyme-sticker-item.item-pussycat:hover .rhyme-sticker-title { color: #ffa502 !important; }

    .rhyme-sticker-excerpt {
      font-size: 1.05em;
      color: #5d4037 !important; /* Premium brand brown with high contrast */
      margin-bottom: 18px;
      min-height: 72px; /* Balanced height to keep CTA buttons aligned even with 3 lines of text */
      line-height: 1.45;
      font-weight: 600; /* Warm semibold weight for maximum clarity */
      font-family: 'Quicksand', sans-serif !important;
      padding: 0 10px;
    }

    .rhyme-sticker-btn {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 0.85em;
      text-decoration: none !important;
      border-radius: 30px;
      padding: 8px 24px;
      color: white !important;
      border: none;
      transition: all 0.3s ease;
      display: inline-block;
    }

    /* Solid Jelly Buttons styling matching cards styles */
    .btn-jelly-red { background-color: #ff4757 !important; box-shadow: 0 6px 15px rgba(255, 71, 87, 0.25) !important; }
    .btn-jelly-red:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4) !important; }

    .btn-jelly-blue { background-color: #20a8e8 !important; box-shadow: 0 6px 15px rgba(32, 168, 232, 0.25) !important; }
    .btn-jelly-blue:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(32, 168, 232, 0.4) !important; }

    .btn-jelly-orange { background-color: #ffa502 !important; box-shadow: 0 6px 15px rgba(255, 165, 2, 0.25) !important; }
    .btn-jelly-orange:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(255, 165, 2, 0.4) !important; }

    .btn-jelly-green { background-color: #2ed573 !important; box-shadow: 0 6px 15px rgba(46, 213, 115, 0.25) !important; }
    .btn-jelly-green:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(46, 213, 115, 0.4) !important; }

    /* Playful Game Zone - Custom Gamified Widgets Styling */
    .game-widget-container {
      margin-top: 25px !important;
      margin-bottom: 25px !important;
    }

    .game-widget {
      border-radius: 28px !important;
      padding: 18px 20px !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
      cursor: pointer;
      min-height: 290px;
      overflow: hidden;
      width: 100%;
      border: 3px solid rgba(0,0,0,0.05) !important;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(0,0,0,0.02);
    }

    /* Global widget structures */
    .widget-badge {
      font-family: 'Fredoka', cursive;
      font-size: 0.78em;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 10px;
      align-self: flex-start;
      margin-bottom: 10px;
      display: inline-block;
    }

    .widget-title {
      font-size: 1.35em !important;
      color: #5d4037 !important;
      margin-bottom: 4px !important;
      font-weight: 700 !important;
      font-family: 'Fredoka', cursive !important;
    }

    .widget-desc {
      font-size: 0.88em;
      color: #666;
      line-height: 1.4;
      font-weight: 500;
      font-family: 'Quicksand', sans-serif !important;
      margin-bottom: 12px !important;
    }

    /* 1. CHALKBOARD WIDGET */
    .game-chalkboard {
      border-color: #8b5a2b !important; /* Wood wooden border color */
      background: #fdfaf4;
    }

    .chalkboard-frame {
      border: 6px solid #8b5a2b;
      border-radius: 12px;
      background: #1e2f26; /* Dark slate green chalkboard */
      padding: 10px;
      box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 3px 8px rgba(0,0,0,0.1);
      width: 100%;
      height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      margin-top: auto;
    }

    .chalk-title {
      font-family: 'Fredoka', cursive;
      color: rgba(255,255,255,0.9);
      font-size: 0.9em;
      text-align: center;
      margin-bottom: 8px;
    }

    .mock-quiz-options {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }

    .mock-opt {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.85em;
      border: 1.5px dashed rgba(255,255,255,0.6);
      transition: all 0.3s;
    }

    .opt-a { color: #ff6b6b; border-color: #ff6b6b; }
    .opt-b { color: #4dadf7; border-color: #4dadf7; }
    .opt-c { color: #51cf66; border-color: #51cf66; }

    /* Chalkboard Hover */
    .game-chalkboard:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 28px rgba(139, 90, 43, 0.2) !important;
    }
    .game-chalkboard:hover .chalkboard-frame {
      border-color: #a06d3b;
    }
    .game-chalkboard:hover .mock-opt {
      transform: scale(1.1) rotate(10deg);
      border-style: solid;
    }

    /* 2. GRAMOPHONE WIDGET */
    .game-gramophone {
      border-color: #ff69b4 !important;
      background: #fff0f5;
    }

    .gramophone-visual-box {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: auto;
    }

    .gramophone-horn {
      width: 42px;
      height: 42px;
      background: radial-gradient(circle, #fcd34d 30%, #b45309 90%);
      border-radius: 50%;
      position: absolute;
      left: 15%;
      top: 15%;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15);
      transition: all 0.5s;
      transform-origin: bottom center;
    }

    .gramophone-record {
      width: 65px;
      height: 65px;
      background: radial-gradient(circle, #444 20%, #111 80%);
      border: 2px solid #ff69b4;
      border-radius: 50%;
      position: absolute;
      right: 20%;
      bottom: 10%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: recordSpin 6s linear infinite;
      animation-play-state: paused;
    }

    .gramophone-record::after {
      content: "";
      width: 10px;
      height: 10px;
      background: white;
      border-radius: 50%;
    }

    .floating-note {
      position: absolute;
      font-size: 1.3em;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s;
    }

    .note-1 { color: #ff4757; left: 20%; top: 5%; }
    .note-2 { color: #20a8e8; left: 30%; top: -10%; }
    .note-3 { color: #ffa502; left: 40%; top: 10%; }

    @keyframes recordSpin {
      100% { transform: rotate(360deg); }
    }

    @keyframes noteRise {
      0% { transform: translate(0, 15px) scale(0.5); opacity: 0; }
      50% { opacity: 0.8; }
      100% { transform: translate(-10px, -30px) scale(1.1); opacity: 0; }
    }

    /* Gramophone Hover */
    .game-gramophone:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 28px rgba(255, 105, 180, 0.2) !important;
    }
    .game-gramophone:hover .gramophone-record {
      animation-play-state: running;
    }
    .game-gramophone:hover .gramophone-horn {
      transform: scale(1.08) rotate(-8deg);
    }
    .game-gramophone:hover .floating-note {
      animation: noteRise 2s ease-in-out infinite;
    }
    .game-gramophone:hover .note-2 {
      animation-delay: 0.6s;
    }
    .game-gramophone:hover .note-3 {
      animation-delay: 1.2s;
    }

    /* 3. CLIPBOARD WIDGET */
    .game-clipboard {
      border-color: #ffa502 !important;
      background: #fffbf3;
    }

    .clipboard-pad {
      background: #d7ccc8;
      border-radius: 12px;
      width: 100%;
      height: 110px;
      position: relative;
      padding: 16px 12px 8px 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);
      margin-top: auto;
    }

    .clipboard-clamp {
      width: 32px;
      height: 10px;
      background: #78909c;
      border-radius: 2px;
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
    }

    .paper-worksheet {
      background: white;
      border-radius: 6px;
      width: 100%;
      height: 100%;
      padding: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .mock-trace-text {
      font-family: 'Fredoka', cursive;
      font-size: 0.95em;
      color: rgba(0,0,0,0.15);
      border-bottom: 1.5px dotted #20a8e8;
      letter-spacing: 1.5px;
      text-align: center;
      padding-bottom: 2px;
      margin-bottom: 6px;
      position: relative;
    }

    .mock-pencil-icon {
      position: absolute;
      right: 20%;
      top: 5%;
      font-size: 1.1em;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .worksheet-decor {
      display: flex;
      justify-content: space-around;
      font-size: 0.65em;
      color: #999;
      font-weight: 700;
    }

    /* Clipboard Hover */
    .game-clipboard:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 28px rgba(255, 165, 2, 0.2) !important;
    }
    .game-clipboard:hover .mock-pencil-icon {
      transform: translate(-20px, 4px) rotate(-15deg);
      animation: pencilWrite 1.5s ease-in-out infinite alternate;
    }
    .game-clipboard:hover .mock-trace-text {
      color: #5d4037;
    }

    /* 4. MEMORY CARD FLIP WIDGET */
    .game-memory {
      border-color: #9b59b6 !important;
      background: #faf5fc;
    }

    .memory-flip-box {
      width: 100%;
      height: 110px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: auto;
      perspective: 600px;
    }

    .flip-card-item {
      width: 48px;
      height: 64px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .flip-card-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }

    .card-side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4em;
      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
      border: 2px solid white;
    }

    .card-backside {
      background: radial-gradient(circle, #9b59b6 40%, #7d3c98 90%);
      color: white;
      font-family: 'Fredoka', sans-serif;
    }

    .card-frontside {
      background: white;
      transform: rotateY(180deg);
      border-color: #9b59b6;
    }

    /* Memory Hover */
    .game-memory:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 28px rgba(155, 89, 182, 0.2) !important;
    }
    .game-memory:hover .flip-card-item {
      transform: rotateY(180deg);
    }
    .game-memory:hover .card-left-flip {
      transition-delay: 0.1s;
    }
    .game-memory:hover .card-right-flip {
      transition-delay: 0.3s;
    }

    /* 5. SPOTLIGHT STAGE WIDGET */
    .game-theater {
      border-color: #2ed573 !important;
      background: #f4fdf7;
    }

    .theater-box {
      width: 100%;
      height: 110px;
      background: #111; /* Dark theater interior */
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      margin-top: auto;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 3px 8px rgba(0,0,0,0.1);
    }

    .stage-spotlight {
      width: 55px;
      height: 100px;
      background: radial-gradient(ellipse at top, rgba(255, 235, 59, 0.45) 10%, rgba(255,235,59,0) 80%);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
      opacity: 0.3;
      transition: all 0.5s;
    }

    .dancing-baby {
      font-size: 1.8em;
      position: absolute;
      bottom: 8%;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .theater-curtain {
      width: 35%;
      height: 100%;
      background: #ff4757; /* Majestic red curtains */
      position: absolute;
      top: 0;
      transition: all 0.6s ease;
      z-index: 10;
      box-shadow: 0 0 8px rgba(0,0,0,0.5);
    }

    .curtain-left-panel {
      left: 0;
      border-right: 1.5px solid #b21f2d;
      border-radius: 6px 0 0 6px;
    }

    .curtain-right-panel {
      right: 0;
      border-left: 1.5px solid #b21f2d;
      border-radius: 0 6px 6px 0;
    }

    /* Theater Hover */
    .game-theater:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 28px rgba(46, 213, 115, 0.2) !important;
    }
    .game-theater:hover .curtain-left-panel {
      transform: translateX(-85%);
    }
    .game-theater:hover .curtain-right-panel {
      transform: translateX(85%);
    }
    .game-theater:hover .stage-spotlight {
      opacity: 1;
      width: 80px;
    }
    .game-theater:hover .dancing-baby {
      animation: babyBounce 0.8s ease-in-out infinite alternate;
    }

    .game-widget-btn {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 0.82em;
      text-decoration: none !important;
      border-radius: 18px;
      padding: 5px 15px;
      transition: all 0.3s ease;
      margin-top: 10px;
      border: none;
      color: white !important;
      text-align: center;
      display: inline-block;
      width: 100%;
      cursor: pointer;
    }

    .widget-badge.badge-quiz { background: rgba(139, 90, 43, 0.12); color: #8b5a2b; }
    .widget-badge.badge-match { background: rgba(255, 105, 180, 0.12); color: #ff69b4; }
    .widget-badge.badge-print { background: rgba(255, 165, 2, 0.12); color: #ffa502; }
    .widget-badge.badge-mem { background: rgba(155, 89, 182, 0.12); color: #9b59b6; }
    .widget-badge.badge-dance { background: rgba(46, 213, 115, 0.12); color: #2ed573; }

    /* Magical Cartoon TV Video Stage */
    .video-stage-section {
      background: #ffffff !important;
      border-radius: 40px !important;
      padding: 50px 0 !important;
      margin: 35px 15px !important;
      border: 4px dashed rgba(139, 69, 19, 0.15) !important;
      box-shadow: 0 15px 35px rgba(0,0,0,0.02) !important;
    }

    .video-section-badge {
      font-family: 'Fredoka', cursive;
      font-size: 0.9em;
      color: #ff4757;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 12px;
      background: rgba(255, 71, 87, 0.1);
      padding: 6px 16px;
      border-radius: 20px;
    }

    .tv-video-card {
      background: #efebe9;
      border: 6px solid #5d4037;
      border-radius: 28px;
      padding: 12px;
      position: relative;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 250px;
    }

    /* Retro TV antenna */
    .tv-antenna {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
    }

    .antenna-left {
      width: 4px;
      height: 24px;
      background: #5d4037;
      transform: rotate(-30deg);
      transform-origin: bottom center;
      border-radius: 4px;
    }
    .antenna-left::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -3px;
      width: 8px;
      height: 8px;
      background: #ff4757;
      border-radius: 50%;
    }

    .antenna-right {
      width: 4px;
      height: 24px;
      background: #5d4037;
      transform: rotate(30deg);
      transform-origin: bottom center;
      border-radius: 4px;
    }
    .antenna-right::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -3px;
      width: 8px;
      height: 8px;
      background: #20a8e8;
      border-radius: 50%;
    }

    .tv-screen-box {
      width: 100%;
      height: 140px;
      background: #222;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      border: 4px solid #3e2723;
      box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    }

    .tv-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.95;
      transition: all 0.4s;
    }

    .tv-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: 48px;
      height: 48px;
      background: #ff0000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      color: white;
      box-shadow: 0 4px 12px rgba(255,0,0,0.4);
      transition: all 0.3s;
      z-index: 10;
    }

    .tv-play-btn i {
      margin-left: 3px; /* Centering the play triangle */
    }

    .tv-dial-box {
      width: 95%;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 10px;
      background: #d7ccc8;
      border-radius: 10px;
      border: 2px solid #5d4037;
    }

    .tv-knob {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #5d4037;
      border: 1.5px solid #8d6e63;
      box-shadow: 0 1.5px 3px rgba(0,0,0,0.15);
      transition: transform 0.4s;
    }

    .tv-status-light {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #4caf50;
      box-shadow: 0 0 4px #4caf50;
      animation: blinkLight 1.5s infinite alternate;
    }

    @keyframes blinkLight {
      0% { opacity: 0.4; }
      100% { opacity: 1; }
    }

    .tv-card-title {
      font-family: 'Fredoka', cursive !important;
      font-size: 1.1em !important;
      color: #5d4037 !important;
      margin-top: 8px !important;
      margin-bottom: 0 !important;
      font-weight: 700 !important;
    }

    /* TV Hover animation */
    .tv-video-card:hover {
      transform: translateY(-8px) rotate(2deg) !important;
      box-shadow: 0 15px 30px rgba(93, 64, 55, 0.2) !important;
    }
    .tv-video-card:hover .tv-knob {
      transform: rotate(90deg);
    }
    .tv-video-card:hover .tv-play-btn {
      transform: translate(-50%, -50%) scale(1.15);
      background: #e50914;
      box-shadow: 0 6px 20px rgba(229,9,20,0.6);
    }
    .tv-video-card:hover .tv-thumbnail {
      transform: scale(1.08);
      opacity: 1;
    }

    /* Ocean Wave Banner */
    .channel-redirect-pill {
      background-image: linear-gradient(to bottom, rgba(32, 168, 232, 0.7) 0%, rgba(13, 110, 162, 0.8) 100%), url('images/beach.jpg') !important;
      background-size: cover;
      background-position: center;
      border-radius: 35px !important;
      padding: 16px 24px !important;
      border: 4px solid white !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.1) !important;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.4s;
      margin-top: 25px;
    }

    .channel-redirect-pill::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      z-index: 1;
    }

    .channel-redirect-pill:hover {
      transform: translateY(-5px) scale(1.01) !important;
      box-shadow: 0 15px 35px rgba(32, 168, 232, 0.3) !important;
    }

    .brand-badge-logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      margin-right: 18px;
      z-index: 5;
      position: relative;
      transition: transform 0.4s;
    }

    .channel-redirect-pill:hover .brand-badge-logo {
      transform: scale(1.1) rotate(10deg);
    }

    .channel-text {
      color: white !important;
      font-size: 1.1em;
      font-weight: 700;
      font-family: 'Quicksand', sans-serif !important;
      flex-grow: 1;
      text-align: left;
      padding-right: 15px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
      z-index: 5;
      position: relative;
    }

    .channel-btn {
      background: #ff4757 !important;
      color: white !important;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 1em;
      border-radius: 25px;
      padding: 8px 20px;
      border: 3px solid white;
      box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
      cursor: pointer;
      transition: all 0.3s;
      z-index: 5;
      position: relative;
    }

    .channel-btn:hover {
      transform: scale(1.08);
      background: #e03241 !important;
      box-shadow: 0 6px 18px rgba(255, 71, 87, 0.5);
    }

    @media (max-width: 767px) {
      .channel-redirect-pill .d-flex {
        flex-direction: column !important;
        text-align: center;
      }
      .brand-badge-logo {
        margin-right: 0 !important;
        margin-bottom: 12px !important;
      }
      .channel-text {
        text-align: center !important;
        padding-right: 0 !important;
        margin-bottom: 15px !important;
      }
    }

    /* Premium Organic Storybook Footer */
    .premium-footer {
      background: #301b10 !important; /* Rich cocoa warm brown */
      border-radius: 40px 40px 0 0 !important;
      padding: 55px 25px 25px 25px !important;
      border-top: 6px solid #ffa502 !important;
      margin-top: 30px !important;
      box-shadow: 0 -12px 30px rgba(0,0,0,0.15) !important;
      position: relative;
      overflow: hidden;
    }

    .premium-footer::before {
      content: "";
      background: url(images/art3.png);
      opacity: 0.05;
      top: 0; left: 0; bottom: 0; right: 0;
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }

    .footer-title {
      font-family: 'Fredoka', cursive !important;
      font-size: 1.3em !important;
      color: #ffa502 !important;
      margin-bottom: 18px !important;
      font-weight: 700 !important;
      text-transform: none !important;
      letter-spacing: 0.5px !important;
    }

    .footer-about-text {
      font-family: 'Quicksand', sans-serif !important;
      color: #efebe9 !important;
      line-height: 1.6;
      font-size: 0.92em;
      font-weight: 500;
      text-align: justify;
    }

    .footer-links-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-link-badge {
      display: inline-flex !important;
      align-items: center;
      background: rgba(255, 255, 255, 0.08) !important;
      border: 2px solid rgba(255, 255, 255, 0.1) !important;
      color: #efebe9 !important;
      font-family: 'Quicksand', sans-serif !important;
      font-weight: 700 !important;
      font-size: 0.85em !important;
      padding: 6px 12px !important;
      border-radius: 18px !important;
      margin: 4px 4px !important;
      transition: all 0.25s !important;
      text-decoration: none !important;
      cursor: pointer;
    }

    .footer-link-badge:hover {
      background: #ffa502 !important;
      color: #301b10 !important;
      border-color: #ffa502 !important;
      transform: translateY(-2px) scale(1.05) !important;
    }

    .footer-carousel-frame {
      border: 4px solid #ffa502;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      background: #3e2723;
      padding: 10px;
      position: relative;
      z-index: 5;
    }

    .footer-social-links {
      display: flex;
      gap: 12px;
      margin-top: 15px;
    }

    .social-badge {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white !important;
      font-size: 1.2em;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      border: 2px solid white;
    }

    .social-fb { background-color: #3b5998; }
    .social-tw { background-color: #1da1f2; }
    .social-li { background-color: #0077b5; }

    .social-badge:hover {
      transform: translateY(-4px) scale(1.15) rotate(8deg);
      box-shadow: 0 6px 15px rgba(255, 165, 0, 0.4);
    }

    .footer-bottom-bar {
      border-top: 1.5px solid rgba(255,255,255,0.06);
      padding-top: 18px;
      margin-top: 35px;
      position: relative;
      z-index: 5;
    }

    .footer-copy-text {
      color: rgba(255, 255, 255, 0.5) !important;
      font-family: 'Quicksand', sans-serif !important;
      font-size: 0.88em;
      font-weight: 500;
    }

    /* Global Twitter Icon SVG Override to resolve adblock/rendering issues */
    .fa-twitter::before {
      content: "" !important;
      display: inline-block !important;
      width: 1em !important;
      height: 1em !important;
      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M23.953%204.57a10%2010%200%2001-2.825.775%204.958%204.958%200%20002.163-2.723c-.951.555-2.005.959-3.127%201.184a4.92%204.92%200%2000-8.384%204.482C7.69%208.095%204.067%206.13%201.64%203.162a4.822%204.822%200%2000-.666%202.475c0%201.71.87%203.213%202.188%204.096a4.904%204.904%200%2001-2.228-.616v.06a4.923%204.923%200%20003.946%204.827%204.996%204.996%200%2001-2.212.085%204.936%204.936%200%20004.604%203.417%209.867%209.867%200%2001-6.102%202.105c-.39%200-.779-.023-1.17-.067a13.995%2013.995%200%20007.557%202.209c9.053%200%2013.998-7.496%2013.998-13.986%200-.213%200-.427-.015-.64A9.936%209.936%200%200024%204.59z%22%2F%3E%3C%2Fsvg%3E') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      vertical-align: middle !important;
    }

    /*********************************************************************************
     * PREMIUM COMPREHENSIVE RESPONSIVE DESIGN SYSTEM OVERRIDES
     * Tailored for flawless viewports across Laptops, Tablets, and Phones
     *********************************************************************************/

    /* LAPTOP & GENERAL RESPONSIVENESS HINTS */
    @media (max-width: 1200px) {
      .home-slider {
        margin-top: 78px !important;
      }
      .activity-panel {
        max-width: 95% !important;
        padding: 30px 20px !important;
      }
    }

    /* MOBILE & TABLET HAMBURGER COLLAPSED VIEWPORT (991.98px and down) */
    @media (max-width: 991.98px) {
      /* Force header element to be auto-height without clipping and keep fixed sticky constant at all scroll heights */
      nav.ftco_navbar,
      nav.ftco_navbar.scrolled,
      nav.ftco_navbar.scrolled.awake,
      nav.ftco_navbar.scrolled.sleep,
      .ftco_navbar,
      .ftco_navbar.scrolled,
      .ftco_navbar.scrolled.awake,
      .ftco_navbar.scrolled.sleep {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0 !important; /* Completely eliminate scroll hide/show jump glitches on mobiles */
        z-index: 11000 !important; /* Keep above drawing workspace overlays and background items */
        padding: 8px 15px !important;
        min-height: 60px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom: 3px solid rgba(139, 69, 19, 0.12) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }
      
      /* Ensure page content containers sit beautifully below the fixed mobile navbar */
      .activity-stage,
      .color-stage,
      .blog-stage,
      .forum-stage,
      .support-stage,
      .lyrics-stage,
      .post-stage {
        padding-top: 80px !important;
      }
      
      .home-slider {
        margin-top: 66px !important;
      }

      /* Center and stack the collapsed menu content neatly */
      .navbar-collapse {
        background: #ffffff !important;
        border-radius: 20px !important;
        border: 3px solid #ffa502 !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
        padding: 15px !important;
        margin-top: 12px !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
      }

      /* Stack items vertically with clean spaced ergonomics */
      .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
      }

      .navbar-nav .nav-item {
        width: 100% !important;
        margin: 4px 0 !important;
      }

      /* Convert horizontal pills into full-width tap targets with symmetric border radius */
      .custom-pill {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 11px 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 1.05em !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.04) !important;
      }

      /* Make button wrappers and standard bootstrap groups stretch fully */
      .navbar-nav .btn-group,
      .navbar-nav .dropdown {
        width: 100% !important;
        display: block !important;
      }

      .navbar-nav .dropdown-toggle {
        width: 100% !important;
      }

      /* Collapsed sub-menu displays as fluid container instead of overflowing float-panel */
      .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 2px dashed #ffa502 !important;
        background: #fffdf8 !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        border-radius: 14px !important;
        padding: 6px 0 !important;
      }

      .navbar-nav .dropdown-item {
        text-align: center !important;
        padding: 10px 15px !important;
      }
    }

    /* PORTRAIT TABLETS & LARGE MOBILE SCREEN WIDTHS (767.98px and down) */
    @media (max-width: 767.98px) {
      /* Brand and Title Auto-Scaling to prevent awkward wrapping */
      .navbar-brand-custom {
        font-size: 1.55em !important;
      }

      .navbar-brand h1 {
        font-size: 1.45em !important;
      }

      .brand-badge {
        width: 34px !important;
        height: 34px !important;
        font-size: 1em !important;
        margin-right: 8px !important;
      }

      /* Hero section title text size adjustments */
      #hero-animated-title {
        font-size: 2.3em !important;
        min-height: auto !important;
        margin-bottom: 18px !important;
      }

      /* Reposition absolutely floating stickers below the focal image to solve screen widths overflow */
      .ft-badge {
        position: static !important;
        margin: 8px auto !important;
        display: inline-flex !important;
        max-width: 280px !important;
        width: 100% !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
        transform: none !important;
        animation: none !important;
      }

      /* Center hero image container columns */
      .col-md-6.position-relative {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
      }

      /* Game Grid Adjustments */
      .action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 12px !important;
      }
    }

    /* STANDARD SMARTPHONES (575.98px and down) */
    @media (max-width: 575.98px) {
      /* Navigation Title Compression */
      .navbar-brand-custom {
        font-size: 1.35em !important;
      }

      .navbar-brand h1 {
        font-size: 1.3em !important;
      }

      .brand-badge {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9em !important;
        margin-right: 6px !important;
      }

      /* Main container scaling to prevent cutting edge alignments */
      .activity-stage {
        padding: 40px 12px 25px !important;
      }

      .page-heading {
        font-size: 2.1em !important;
        margin-bottom: 3px !important;
      }

      .activity-panel {
        padding: 20px 14px !important;
        border-radius: 20px !important;
        border-width: 3px !important;
      }

      /* Quiz Game image shrink overrides */
      .rhyme-image-wrapper {
        border-width: 3px !important;
        border-radius: 18px !important;
        padding: 10px !important;
        max-width: 85% !important;
        margin: 0 auto !important;
      }

      .rhyme-image {
        max-height: 170px !important;
        border-radius: 12px !important;
      }

      .btn-play-audio {
        font-size: 0.9em !important;
        padding: 8px 16px !important;
      }

      /* Underlined filled items inside quiz questions */
      .rhyme-question {
        font-size: 1.15em !important;
        padding: 16px !important;
        border-radius: 16px !important;
        line-height: 1.5 !important;
      }

      .choice-btn {
        padding: 12px 16px !important;
        font-size: 1em !important;
        border-radius: 14px !important;
        margin: 8px 0 !important;
      }

      /* MEMORY CARDS GRID DYNAMIC FIT overrides - keeps grid beautifully centered and scaled */
      .memory-grid {
        grid-gap: 8px !important;
        max-width: 100% !important;
        margin: 15px auto !important;
      }

      .grid-easy, .grid-medium {
        grid-template-columns: repeat(4, 1fr) !important;
      }

      .grid-hard {
        grid-template-columns: repeat(4, 1fr) !important; /* Force down from 5 to prevent card squishing */
      }

      .memory-card {
        height: 72px !important; /* Scaled down beautifully from 120px to prevent overflow */
      }

      .card-face {
        font-size: 0.72em !important;
        padding: 4px !important;
        border-width: 2px !important;
      }

      .card-back {
        font-size: 1em !important;
      }

      /* Simon Action cards grid stretch */
      .action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 10px !important;
      }

      .action-emoji {
        font-size: 1.7em !important;
        margin-bottom: 4px !important;
      }

      .action-title {
        font-size: 0.9em !important;
      }

      /* Printable Worksheet Panel elements scale down */
      .worksheet-preview-box {
        padding: 15px !important;
        min-height: auto !important;
      }

      .worksheet-header h1 {
        font-size: 1.5em !important;
      }

      .worksheet-meta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        font-size: 0.95em !important;
      }

      .worksheet-meta-line {
        min-width: 100% !important;
      }

      .worksheet-body p {
        font-size: 1em !important;
        line-height: 1.6 !important;
      }

      .worksheet-input {
        width: 100px !important;
      }
    }

    /* ULTRA NARROW MOBILE SCREENS (375px and down) */
    @media (max-width: 375px) {
      /* Force brand badges to hide to let full text display on single line */
      .brand-badge {
        display: none !important;
      }

      .navbar-brand-custom {
        font-size: 1.22em !important;
      }

      .navbar-brand h1 {
        font-size: 1.18em !important;
      }

      /* Simon action columns convert to single stack */
      .action-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /*********************************************************************************
     * MAGIC COLORING ROOM WORKSPACE RESPONSIVE IMPROVEMENTS
     * Custom tailored layout adjustments to keep coloring in a single mobile frame
     *********************************************************************************/

    /* GALLERY CARD BUTTONS WRAPPING FIX */
    @media (max-width: 991.98px) {
      .card-btn-color, .card-btn-download {
        padding: 8px 6px !important;
        font-size: 0.88em !important;
        white-space: nowrap !important;
      }
      .card-btn-group {
        gap: 6px !important;
      }
    }

    /* FULL SCREEN MAGIC DRAWING ROOM WORKSPACE IN ONE FRAME FOR PORTABLE VIEWPORTS */
    @media (max-width: 991.98px) {
      /* Compact Header bar */
      .editor-header-bar {
        height: 60px !important;
        padding: 8px 15px !important;
        border-bottom-width: 4px !important;
      }
      .editor-header-bar h3 {
        font-size: 1.05em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 60% !important;
      }
      .editor-header-bar button {
        padding: 6px 12px !important;
        font-size: 0.85em !important;
        white-space: nowrap !important;
      }
      .editor-header-bar span.badge {
        display: none !important; /* Hide secondary badge on mobiles to save space */
      }

      /* Stack columns vertically so colors and tools sit at the bottom in one frame */
      .editor-workspace-row {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 60px) !important;
        background: #fffdf7 !important;
        overflow: hidden !important;
      }

      /* Centralize the canvas viewport */
      .editor-center-canvas {
        flex: 1 !important;
        order: 1 !important;
        width: 100% !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        min-height: 200px !important;
      }

      /* Scale drawing canvas down beautifully to leave comfortable space for bars */
      .editor-canvas-frame {
        max-height: 50vh !important;
        max-width: 95% !important;
        padding: 6px !important;
        border-width: 5px !important; /* Thinner wooden borders on phone */
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(139, 69, 19, 0.15) !important;
      }

      .editor-canvas-frame canvas, 
      .editor-svg-holder svg {
        max-height: 46vh !important;
        max-width: 100% !important;
      }

      /* Pick Color sidebar converted into a horizontal swipeable slider at the bottom */
      .editor-left-sidebar {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 6px 12px !important;
        border-right: none !important;
        border-top: 4px dashed #ffa502 !important;
        background: #fff9e6 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
      }
      .editor-left-sidebar span {
        display: none !important; /* Hide pick color title text to save space */
      }

      /* Swatches grid converted to a sleek horizontal scrolling row */
      .color-rail {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        padding: 4px 0 !important;
        width: auto !important;
        overflow: visible !important;
      }

      .swatch {
        height: 36px !important;
        width: 36px !important;
        flex-shrink: 0 !important;
      }

      /* Tools Panel sidebar converted to horizontal bar at the very bottom */
      .editor-right-sidebar {
        order: 3 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px 12px !important;
        border-left: none !important;
        border-top: 4px dashed #20a8e8 !important;
        background: #e8f4fd !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
      }
      .editor-right-sidebar span {
        display: none !important; /* Hide tools panel title text to save space */
      }

      .editor-right-sidebar .action-btn {
        width: auto !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.85em !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
      }
    }

/* Audio lyric highlighting custom premium animation styles */
.lyric-line {
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: block !important;
  padding: 8px 24px !important;
  margin: 6px auto !important;
  border-radius: 20px !important;
  width: fit-content !important;
  transform-origin: center center !important;
  background: transparent !important;
}

.lyric-line.active-highlight {
  background: rgba(255, 165, 2, 0.22) !important; /* Highly visible soft orange learning badge */
  box-shadow: 0 8px 25px rgba(255, 107, 129, 0.2) !important; /* Bouncy brand pink drop shadow */
  transform: scale(1.08) !important;
}

.lyric-line.active-highlight h1,
.lyric-line.active-highlight h2,
.lyric-line.active-highlight h3,
.lyric-line.active-highlight strong,
.lyric-line.active-highlight span {
  color: #ff4757 !important; /* High contrast brand pink/red text */
  text-shadow: 0 0 15px rgba(255, 71, 87, 0.5) !important;
  transition: all 0.35s ease !important;
}


/* Navigation Arrow buttons for static nursery rhyme slideshow */
.nav-arrow-btn {
  position: absolute !important;
  top: 220px; /* Safe default top centered on background image on load */
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid #ffa502 !important;
  color: #ffa502 !important;
  font-size: 1.6em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(255, 165, 2, 0.25) !important;
  transition: background 0.25s, color 0.25s, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s !important;
  z-index: 1000 !important;
}

.nav-arrow-btn:hover {
  background: #ffa502 !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.15) !important;
  box-shadow: 0 12px 28px rgba(255, 165, 2, 0.45) !important;
}

.nav-arrow-btn.prev-arrow {
  left: -28px !important; /* Overlaps container edges beautifully */
}

.nav-arrow-btn.next-arrow {
  right: -28px !important; /* Overlaps container edges beautifully */
}

/* Ensure mobile responsive arrows layout */
@media (max-width: 991px) {
  .nav-arrow-btn.prev-arrow {
    left: 10px !important;
  }
  .nav-arrow-btn.next-arrow {
    right: 10px !important;
  }
}

@media (max-width: 768px) {
  .nav-arrow-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2em !important;
    border-width: 3px !important;
  }
  .nav-arrow-btn.prev-arrow {
    left: 10px !important;
  }
  .nav-arrow-btn.next-arrow {
    right: 10px !important;
  }
}

/* Collapse navbar wrapper container to prevent empty space */
.container.cbox {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  max-width: none !important;
}

/* Align the rhyme detail content container flush below the fixed navbar */
body > .container:not(.cbox) {
  margin-top: 72px !important;
  padding-top: 0 !important;
  position: relative !important;
}

/* Ensure the nursery rhyme main image stretches full-width flush */
body > .container:not(.cbox) > img[src^="images/"] {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 28px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
  margin-top: 0 !important;
}

/* Mobile layout rescue for legacy static rhyme pages */
@media (max-width: 768px) {
  body.static-rhyme-page {
    overflow-x: hidden !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 80px auto 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame > img[src^="images/"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 560px !important;
    max-height: 760px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12) !important;
  }

  body.static-rhyme-page .top-center1 {
    top: 8% !important;
    left: 50% !important;
    width: 92% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 8 !important;
    text-align: center !important;
  }

  body.static-rhyme-page .top-center1 h1.glow {
    font-size: clamp(16px, 4.4vw, 24px) !important;
    line-height: 1.1 !important;
    margin: 0 0 2px !important;
    white-space: normal !important;
  }

  body.static-rhyme-page .audio-control-card {
    max-width: min(250px, 78vw) !important;
    padding: 6px 10px !important;
    margin: 4px auto 0 !important;
    border-radius: 20px !important;
    border-width: 2px !important;
    gap: 6px !important;
    transform: scale(0.78) !important;
    transform-origin: top center !important;
  }

  body.static-rhyme-page .audio-control-card .audio-btn {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    border-radius: 16px !important;
    white-space: normal !important;
  }

  body.static-rhyme-page .audio-control-card .audio-status-text {
    margin-left: 4px !important;
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame [class^="top-center"]:not(.top-center1),
  body.static-rhyme-page .rhyme-responsive-frame [class*=" top-center"]:not(.top-center1) {
    top: 53% !important;
    left: 50% !important;
    width: 84% !important;
    max-width: 84% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    z-index: 5 !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame .example,
  body.static-rhyme-page .rhyme-responsive-frame .example1,
  body.static-rhyme-page .rhyme-responsive-frame .example2,
  body.static-rhyme-page .rhyme-responsive-frame .example3,
  body.static-rhyme-page .rhyme-responsive-frame .example4,
  body.static-rhyme-page .rhyme-responsive-frame .example5 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame .example p,
  body.static-rhyme-page .rhyme-responsive-frame .example1 p,
  body.static-rhyme-page .rhyme-responsive-frame .example2 p,
  body.static-rhyme-page .rhyme-responsive-frame .example3 p,
  body.static-rhyme-page .rhyme-responsive-frame .example4 p,
  body.static-rhyme-page .rhyme-responsive-frame .example5 p {
    margin: clamp(16px, 5vw, 34px) auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame h1:not(.navbar-brand-custom),
  body.static-rhyme-page .rhyme-responsive-frame h2,
  body.static-rhyme-page .rhyme-responsive-frame h3 {
    font-size: clamp(15px, 4vw, 22px) !important;
    line-height: 1.22 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  body.static-rhyme-page .nav-arrow-btn {
    top: 62% !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15em !important;
    border-width: 3px !important;
    z-index: 7 !important;
  }

  body.static-rhyme-page .nav-arrow-btn.prev-arrow {
    left: 8px !important;
  }

  body.static-rhyme-page .nav-arrow-btn.next-arrow {
    right: 8px !important;
  }
}

@media (max-width: 420px) {
  body.static-rhyme-page .rhyme-responsive-frame > img[src^="images/"] {
    min-height: 600px !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame [class^="top-center"]:not(.top-center1),
  body.static-rhyme-page .rhyme-responsive-frame [class*=" top-center"]:not(.top-center1) {
    top: 54% !important;
    width: 88% !important;
    max-width: 88% !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame .example p,
  body.static-rhyme-page .rhyme-responsive-frame .example1 p,
  body.static-rhyme-page .rhyme-responsive-frame .example2 p,
  body.static-rhyme-page .rhyme-responsive-frame .example3 p,
  body.static-rhyme-page .rhyme-responsive-frame .example4 p,
  body.static-rhyme-page .rhyme-responsive-frame .example5 p {
    margin: clamp(18px, 6vw, 38px) auto !important;
  }

  body.static-rhyme-page .rhyme-responsive-frame h1:not(.navbar-brand-custom),
  body.static-rhyme-page .rhyme-responsive-frame h2,
  body.static-rhyme-page .rhyme-responsive-frame h3 {
    font-size: clamp(14px, 3.7vw, 19px) !important;
  }

  body.static-rhyme-page .nav-arrow-btn {
    top: 65% !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ==========================================================================
   Stunning Branded Playroom Preloader Overrides
   ========================================================================== */
#ftco-loader.fullscreen {
  background: radial-gradient(circle at center, #ffffff 30%, #fff3db 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important; /* Keep on top of all visual layers */
}

/* Hide default boring templates spinner inside the loader */
#ftco-loader svg.circular {
  display: none !important;
}

/* Custom premium preloader container */
.playroom-preloader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: preloaderZoomIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Bouncy Brand Badge Loader */
.preloader-brand-badge {
  background: linear-gradient(135deg, #ffa502 0%, #ff6b81 100%) !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 2.8em !important;
  box-shadow: 0 15px 35px rgba(255, 107, 129, 0.35) !important;
  margin-bottom: 25px !important;
  border: 4px solid white !important;
  animation: preloaderJelly 1.5s infinite ease-in-out !important;
  position: relative !important;
}

.preloader-brand-badge i.fa-music {
  color: white !important;
}

/* Star ornaments pulsing */
.preloader-star {
  position: absolute !important;
  color: #ffb703 !important;
  font-size: 0.45em !important;
  top: -6px !important;
  right: -6px !important;
  animation: preloaderStarPop 1.2s infinite ease-in-out alternate !important;
}

/* Playful Title */
.preloader-title {
  font-family: 'Fredoka', cursive !important;
  font-size: 2.8em !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.preloader-title span:nth-of-type(1) {
  color: #ff4757 !important;
  text-shadow: 3px 3px 0 rgba(255,71,87,0.12) !important;
}

.preloader-title span:nth-of-type(2) {
  color: #ffa502 !important;
  margin-left: 8px !important;
  text-shadow: 3px 3px 0 rgba(255,165,2,0.12) !important;
}

/* Loading Subtext */
.preloader-subtext {
  font-family: 'Quicksand', sans-serif !important;
  color: #8b5a2b !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  animation: preloaderPulse 1.4s infinite ease-in-out alternate !important;
}

/* Orbiting dots matching childhood brand colors */
.preloader-orbiting-dots {
  display: flex !important;
  gap: 8px !important;
  margin-top: 15px !important;
  justify-content: center !important;
}

.preloader-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  animation: preloaderDotBounce 1.2s infinite ease-in-out !important;
}

.preloader-dot:nth-child(1) { background-color: #ff4757 !important; animation-delay: -0.32s !important; }
.preloader-dot:nth-child(2) { background-color: #ffa502 !important; animation-delay: -0.16s !important; }
.preloader-dot:nth-child(3) { background-color: #2ed573 !important; }

/* Micro-animations */
@keyframes preloaderZoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes preloaderJelly {
  0%, 100% { transform: scale(1) translateY(0); }
  25% { transform: scale(0.9, 1.1) translateY(-10px); }
  50% { transform: scale(1.1, 0.9) translateY(0); }
  75% { transform: scale(0.95, 1.05) translateY(-5px); }
}

@keyframes preloaderStarPop {
  from { transform: scale(0.8) rotate(-15deg); opacity: 0.7; }
  to { transform: scale(1.3) rotate(20deg); opacity: 1; }
}

@keyframes preloaderPulse {
  from { opacity: 0.65; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.02); }
}

@keyframes preloaderDotBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Preloader Logo Image inside bouncing Brand Badge */
.preloader-logo-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  padding: 3px !important;
  background: white !important;
}

/* Color cohesive "by Jingle Toons" Playloader Subtitle with delay slide-up animation */
.preloader-by-brand {
  font-family: 'Fredoka', cursive !important;
  font-size: 1.4em !important;
  font-weight: 800 !important;
  color: #8b5a2b !important;
  margin-top: -4px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  opacity: 0;
  transform: translateY(12px);
  animation: preloaderSlideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s forwards !important;
}

.preloader-by-brand .brand-jingle {
  color: #ff4757 !important;
  text-shadow: 2px 2px 0 rgba(255, 71, 87, 0.1) !important;
  margin-left: 4px;
}

.preloader-by-brand .brand-toons {
  color: #ffa502 !important;
  text-shadow: 2px 2px 0 rgba(255, 165, 2, 0.1) !important;
}

/* Pulsing music note icon */
.preloader-by-brand i.fa-music {
  animation: preloaderStarPop 1.2s infinite ease-in-out alternate !important;
}

@keyframes preloaderSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Website-Themed Playful Navbar Redesign */
nav.ftco_navbar {
  background: rgba(255, 253, 246, 0.97) !important; /* Premium playroom cream */
  border-bottom: 5px solid #ffb703 !important; /* Thick playful golden orange border bottom */
  box-shadow: 0 8px 25px rgba(255, 183, 3, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

nav.ftco_navbar.scrolled {
  background: rgba(255, 253, 246, 0.99) !important;
  border-bottom-color: #ff4757 !important; /* Playful cherry red bottom border on scroll */
  box-shadow: 0 10px 30px rgba(255, 71, 87, 0.12) !important;
}

/* Ensure navbar items look perfectly centered */
.navbar-brand-custom {
  font-family: 'Fredoka', cursive !important;
}

/* Animated Storybook Footer Enhancements */
.footer-about-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 3px dashed rgba(255, 165, 2, 0.3) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease;
}
.footer-about-box:hover {
  border-color: #ffa502 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Staggered floating animations for Rhyme Gallery items */
.gallery-img-item {
  position: relative;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.3) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer;
  border: 4px solid white !important;
  background: white;
}

.gallery-img-item:nth-child(3n+1) { animation: floatGalleryCard 5s ease-in-out infinite alternate; }
.gallery-img-item:nth-child(3n+2) { animation: floatGalleryCard 4s ease-in-out infinite alternate-reverse; }
.gallery-img-item:nth-child(3n+3) { animation: floatGalleryCard 6s ease-in-out infinite alternate; }

@keyframes floatGalleryCard {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
  100% { transform: translateY(-10px) rotate(-1deg); }
}

.gallery-item-inner {
  position: relative;
  width: 100%;
  height: 65px;
  overflow: hidden;
}

.gallery-item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-play-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.gallery-play-overlay i {
  color: #ff4757;
  font-size: 2em;
  text-shadow: 0 0 15px rgba(255, 71, 87, 0.8);
  transform: scale(0.5) rotate(-10deg);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-img-item:hover {
  transform: translateY(-12px) scale(1.15) rotate(4deg) !important;
  box-shadow: 0 20px 45px rgba(255, 107, 129, 0.5) !important;
  border-color: #ffa502 !important;
  z-index: 10 !important;
  animation: none !important; /* Stop float arpeggio on hover */
}

.gallery-img-item:hover .gallery-item-inner img {
  transform: scale(1.22);
}

.gallery-img-item:hover .gallery-play-overlay {
  opacity: 1;
}

.gallery-img-item:hover .gallery-play-overlay i {
  transform: scale(1) rotate(0deg);
}

/* Symmetrical Candy-Colored Children Sticker Link Badges */
.footer-link-badge.pill-home { border: 2.5px solid #ff4757 !important; color: #ff4757 !important; background: transparent !important; }
.footer-link-badge.pill-home:hover { background: #ff4757 !important; color: white !important; }

.footer-link-badge.pill-rhymes { border: 2.5px solid #ffa502 !important; color: #ffa502 !important; background: transparent !important; }
.footer-link-badge.pill-rhymes:hover { background: #ffa502 !important; color: white !important; }

.footer-link-badge.pill-quiz { border: 2.5px solid #20a8e8 !important; color: #20a8e8 !important; background: transparent !important; }
.footer-link-badge.pill-quiz:hover { background: #20a8e8 !important; color: white !important; }

.footer-link-badge.pill-paint { border: 2.5px solid #e056fd !important; color: #e056fd !important; background: transparent !important; }
.footer-link-badge.pill-paint:hover { background: #e056fd !important; color: white !important; }

.footer-link-badge.pill-about { border: 2.5px solid #2ed573 !important; color: #2ed573 !important; background: transparent !important; }
.footer-link-badge.pill-about:hover { background: #2ed573 !important; color: white !important; }

.footer-link-badge.pill-help { border: 2.5px solid #ff69b4 !important; color: #ff69b4 !important; background: transparent !important; }
.footer-link-badge.pill-help:hover { background: #ff69b4 !important; color: white !important; }

/* Premium Popping Celebration & Warning Banners */
.success-glowing-banner {
  position: fixed !important;
  top: 35% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  background: linear-gradient(135deg, #2ed573 0%, #20bf6b 100%) !important;
  color: white !important;
  padding: 24px 50px !important;
  border-radius: 40px !important;
  font-family: 'Fredoka', cursive !important;
  font-size: 2.2em !important;
  font-weight: 900 !important;
  z-index: 1000000 !important;
  box-shadow: 0 25px 60px rgba(46, 213, 115, 0.45) !important;
  border: 6px solid white !important;
  text-align: center !important;
  pointer-events: none !important;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12) !important;
  animation: bannerPopUpDown 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.failure-glowing-banner {
  position: fixed !important;
  top: 35% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%) !important;
  color: white !important;
  padding: 24px 50px !important;
  border-radius: 40px !important;
  font-family: 'Fredoka', cursive !important;
  font-size: 2.2em !important;
  font-weight: 900 !important;
  z-index: 1000000 !important;
  box-shadow: 0 25px 60px rgba(255, 71, 87, 0.4) !important;
  border: 6px solid white !important;
  text-align: center !important;
  pointer-events: none !important;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12) !important;
  animation: bannerPopUpDown 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes bannerPopUpDown {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.3) rotate(8deg); opacity: 0; }
}

/* Pulsing styling for hearts badge */
@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.heart-active {
  animation: heartPulse 1.2s infinite ease-in-out;
  display: inline-block;
}

/* Starry Night Sky Footer with Green Pastures */
.premium-footer {
  background: linear-gradient(180deg, #100b4b 0%, #1a0f60 100%) !important;
  border-top: none !important; /* styled wave divider handles boundary! */
  position: relative !important;
  padding: 60px 0 112px !important; /* keeps the footer compact above the grass */
  overflow: hidden;
}

.footer-crescent-moon {
  position: absolute;
  top: 30px;
  left: 45px;
  font-size: 3.2em;
  z-index: 2;
  animation: moonFloat 4s infinite ease-in-out alternate;
  pointer-events: none;
  user-select: none;
}

@keyframes moonFloat {
  0% { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-10px) rotate(6deg); }
}

.twinkle-star {
  position: absolute;
  color: #ffa502;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.star-1 { top: 40px; left: 24%; font-size: 1.4em; animation: starTwinkle 1.8s infinite alternate; }
.star-2 { top: 90px; left: 42%; font-size: 1.1em; animation: starTwinkle 2.5s infinite alternate; }
.star-3 { top: 30px; right: 26%; font-size: 1.5em; animation: starTwinkle 2s infinite alternate; }
.star-4 { top: 120px; right: 12%; font-size: 1.1em; animation: starTwinkle 2.8s infinite alternate; }
.star-5 { top: 70px; left: 10%; font-size: 1em; animation: starTwinkle 3.2s infinite alternate; }

@keyframes starTwinkle {
  0% { opacity: 0.25; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.2); }
}

.premium-footer p.footer-about-text {
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.92em !important;
  line-height: 1.6 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.premium-footer h5.footer-title {
  color: #ffa502 !important; /* Gold yellow headers */
  font-family: 'Fredoka', cursive !important;
  font-weight: 900 !important;
  font-size: 1.65em !important;
  margin-bottom: 25px !important;
  /* Premium 3D cartoon style bold dark outline + dark offset shadow for maximum clarity */
  text-shadow: 
    -2px -2px 0 #0d083a, 
     2px -2px 0 #0d083a, 
    -2px  2px 0 #0d083a, 
     2px  2px 0 #0d083a,
    -1px -2px 0 #0d083a, 
     1px -2px 0 #0d083a, 
    -1px  2px 0 #0d083a, 
     1px  2px 0 #0d083a,
    -2px -1px 0 #0d083a, 
     2px -1px 0 #0d083a, 
    -2px  1px 0 #0d083a, 
     2px  1px 0 #0d083a,
     3.5px  3.5px 0 rgba(0,0,0,0.55) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Star stickers on corners of About Us box */
.about-star-sticker {
  position: absolute;
  font-size: 1.4em;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.2));
  animation: starTwinkle 2s infinite alternate;
  pointer-events: none;
}
.about-star-tl { top: -14px; left: -14px; }
.about-star-tr { top: -14px; right: -14px; }

/* Three circle badges */
.footer-badge-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.45em;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  margin-bottom: 6px;
  transition: transform 0.2s;
  border: 2px solid white;
}
.footer-badge-circle:hover {
  transform: scale(1.15) rotate(8deg);
}
.badge-purple { background: #9b59b6; }
.badge-blue { background: #20a8e8; }
.badge-green { background: #2ed573; }
.badge-label {
  font-size: 0.82em;
  font-weight: 800;
  color: white;
  font-family: 'Fredoka', sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Yellow mission speech card */
.footer-mission-box {
  background: #ffca28 !important;
  border: 3.5px solid #ff9800 !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  font-size: 0.9em !important;
  font-family: 'Fredoka', sans-serif !important;
  margin-top: 25px;
}

/* 2x3 Grid Pill buttons links */
.footer-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 25px;
}

.premium-footer .pill-btn {
  border-radius: 20px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.95em !important;
  padding: 10px 14px !important;
  color: white !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.3) !important;
  border: 3px solid rgba(255,255,255,0.45) !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  cursor: pointer !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

.premium-footer .pill-btn:hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.4) !important;
  border-color: #ffffff !important;
  color: white !important;
}

.pill-btn.pill-home { background: #ff1e56 !important; }
.pill-btn.pill-quiz { background: #00b0ff !important; }
.pill-btn.pill-rhymes { background: #ff9100 !important; }
.pill-btn.pill-about { background: #4caf50 !important; }
.pill-btn.pill-paint { background: #e040fb !important; }
.pill-btn.pill-help { background: #e91e63 !important; }

/* Cloud Bouncy Sticker */
.footer-cloud-sticker {
  background: white;
  border: 3.5px dashed #ffa502;
  border-radius: 40px;
  padding: 16px 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  display: inline-block;
  margin-top: 15px;
  position: relative;
  animation: cloudFloat 3s infinite ease-in-out alternate;
}

@keyframes cloudFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.footer-cloud-sticker .cloud-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 1.1em;
}
.footer-cloud-sticker .music-note {
  font-size: 1.4em;
  vertical-align: middle;
  margin-right: 4px;
}

/* Playhouse Retro TV screen mockup */
.footer-mockup-tv {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer-mockup-tv:hover {
  transform: translateY(-8px) scale(1.05) rotate(1deg);
}

.mockup-tv-antenna {
  text-align: center;
  font-size: 1.6em;
  margin-bottom: -5px;
  animation: antennaTwitch 3s infinite ease-in-out alternate;
  pointer-events: none;
}

.mockup-tv-body {
  background: #8b5a2b; /* wooden TV casing */
  border: 4px solid #5d4037;
  border-radius: 22px;
  padding: 12px 12px 6px 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.mockup-tv-screen {
  background: black;
  border: 4px solid #3e2723;
  border-radius: 12px;
  height: 135px;
  overflow: hidden;
  position: relative;
}

.tv-screen-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.footer-mockup-tv:hover .tv-screen-photo {
  transform: scale(1.06);
}

.mockup-tv-watch-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ff0000;
  color: white !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 800;
  font-size: 0.88em;
  text-align: center;
  padding: 6px 0;
  box-shadow: 0 -4px 10px rgba(255, 0, 0, 0.3);
}

.mockup-tv-dials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.dial-knob {
  width: 14px;
  height: 14px;
  background: #3e2723;
  border-radius: 50%;
  border: 2px solid #5d4037;
}

.dial-status-light {
  width: 8px;
  height: 8px;
  background: #ffa502;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffa502;
}

.dial-status-light.blinking {
  animation: dialBlink 1s infinite alternate;
}
@keyframes dialBlink {
  0% { opacity: 0.3; }
  100% { opacity: 1; box-shadow: 0 0 8px #ffa502; }
}

/* Subscribe button */
.footer-subscribe-btn {
  background: #ff1e56 !important;
  color: white !important;
  border: 3px solid white !important;
  border-radius: 24px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 900 !important;
  padding: 10px 24px !important;
  font-size: 1.05em !important;
  box-shadow: 0 6px 15px rgba(255, 30, 86, 0.35) !important;
  transition: all 0.2s;
  cursor: pointer;
}
.footer-subscribe-btn:hover {
  background: #e01246 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 30, 86, 0.5) !important;
}

/* Wiggling SVG curved arrow next to subscribe button */
.curved-arrow-svg {
  animation: arrowWiggle 2s infinite ease-in-out alternate;
  pointer-events: none;
  user-select: none;
}
@keyframes arrowWiggle {
  0% { transform: rotate(-5deg) scale(0.95); }
  100% { transform: rotate(5deg) scale(1.05); }
}

/* Social pills */
.footer-social-pill {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  font-size: 1.3em !important;
  box-shadow: 0 5px 12px rgba(0,0,0,0.25);
  border: 2px solid white;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer-social-pill:hover {
  transform: translateY(-4px) scale(1.15) rotate(8deg);
}
.social-blue { background: #3b5998; }
.social-pink { background: #e1306c; }
.social-red { background: #ff0000; }
.social-lightblue { background: #1da1f2; }

/* Notebook sticker sheet */
.footer-notebook-sticker {
  background: white;
  border: 3px solid #ff4757;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  max-width: 250px;
  margin: 15px auto 0;
  overflow: visible; /* Critical for star and pencil stickers hanging off edges! */
  position: relative;
  transform: rotate(2deg);
  transition: all 0.3s;
}
.footer-notebook-sticker:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.notebook-spiral {
  background: #ffa502;
  height: 14px;
  display: flex;
  justify-content: space-around;
  padding: 0 15px;
  position: relative;
  border-bottom: 2px solid #e08b00;
  border-radius: 17px 17px 0 0;
}
.notebook-spiral span {
  width: 8px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #5d4037;
  border-radius: 4px;
  margin-top: -6px;
  position: relative;
  z-index: 2;
}

.notebook-body {
  padding: 20px 15px 15px 15px;
  text-align: left;
  position: relative;
}

.notebook-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 0.9em;
  color: #3e2723;
  line-height: 1.4;
}

/* Yellow star sticker on notepad bottom left */
.notebook-star-sticker {
  position: absolute;
  bottom: -15px;
  left: -15px;
  font-size: 1.8em;
  z-index: 3;
  filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.25));
  animation: starTwinkle 2s infinite alternate;
  pointer-events: none;
  user-select: none;
}

/* Green pencil sticker drawing on notepad bottom right */
.notebook-pencil-sticker {
  position: absolute;
  bottom: -10px;
  right: -15px;
  font-size: 1.8em;
  z-index: 3;
  transform: rotate(-15deg);
  filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.25));
  animation: pencilWiggle 2s infinite ease-in-out alternate;
  pointer-events: none;
  user-select: none;
}
@keyframes pencilWiggle {
  0% { transform: translate(0, 0) rotate(-15deg); }
  100% { transform: translate(-3px, -3px) rotate(-5deg); }
}

/* Grasslands SVG pasturing hills absolute at the bottom */
.footer-grasslands-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130px; /* Tighter grasslands to prevent empty spaces */
  line-height: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transition: height 0.3s ease;
}

.footer-grasslands-svg::before {
  content: "";
  position: absolute;
  left: 168px;
  bottom: 22px;
  width: 92px;
  height: 128px;
  background:
    radial-gradient(circle at 50% 18%, #4caf50 0 27px, transparent 28px),
    radial-gradient(circle at 26% 34%, #43a047 0 29px, transparent 30px),
    radial-gradient(circle at 70% 38%, #66bb6a 0 31px, transparent 32px),
    radial-gradient(circle at 47% 52%, #2e7d32 0 34px, transparent 35px),
    linear-gradient(#8d5524, #6d3f19) 45px 54px / 16px 74px no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.22));
  z-index: 1;
}

/* Waving monkey on the left side of grasslands */
.footer-monkey {
  position: absolute;
  bottom: 18px; /* Positioned in front of the new tree on the left hill */
  left: 28px;
  width: 170px; /* Sized perfectly to prevent text overlap */
  height: auto;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  /* Removed mix-blend-mode multiply to restore bright, colorful cartoon styling! */
  animation: animalBounce 4s infinite ease-in-out alternate;
  transition: all 0.3s ease;
}

/* Sitting baby elephant on the right side of grasslands */
.footer-elephant {
  position: absolute;
  bottom: 10px; /* Positioned on top of the right hill wave */
  right: 30px;
  width: 180px; /* Sized perfectly to prevent text overlap */
  height: auto;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  /* Removed mix-blend-mode multiply to restore bright, colorful cartoon styling! */
  animation: animalBounce 5s infinite ease-in-out alternate-reverse;
  transition: all 0.3s ease;
}

@keyframes animalBounce {
  0% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-5px) rotate(1.5deg); }
}

/* Scoped bottom bar placed inside the grasslands in the valley center */
.footer-bottom-bar {
  border-top: none !important; /* Strip the dashed line separator */
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: absolute;
  bottom: 104px; /* Keeps copyright readable on the blue sky, close to the hills */
  left: 0;
  right: 0;
  z-index: 5; /* Renders above grasslands SVG */
}

.footer-copy-text {
  text-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 10px rgba(26,15,96,0.8) !important;
  margin-bottom: 0 !important;
}

/* Responsive layout adjustments for mobile/tablet */
@media (max-width: 992px) {
  .premium-footer {
    padding: 60px 0 104px !important;
  }
  .footer-grasslands-svg {
    height: 110px;
  }
  .footer-grasslands-svg::before {
    left: 112px;
    bottom: 20px;
    width: 72px;
    height: 100px;
    background:
      radial-gradient(circle at 50% 18%, #4caf50 0 22px, transparent 23px),
      radial-gradient(circle at 26% 34%, #43a047 0 22px, transparent 23px),
      radial-gradient(circle at 70% 38%, #66bb6a 0 24px, transparent 25px),
      radial-gradient(circle at 47% 52%, #2e7d32 0 25px, transparent 26px),
      linear-gradient(#8d5524, #6d3f19) 35px 44px / 13px 58px no-repeat;
  }
  .footer-monkey {
    width: 115px;
    left: 12px;
    bottom: 12px;
  }
  .footer-elephant {
    width: 125px;
    right: 15px;
    bottom: 8px;
  }
  .footer-bottom-bar {
    bottom: 92px;
    padding: 0 120px !important;
  }
}

@media (max-width: 576px) {
  .footer-grasslands-svg::before {
    left: 92px;
    bottom: 18px;
    transform: scale(0.82);
    transform-origin: bottom left;
  }
  .footer-bottom-bar {
    bottom: 84px;
    padding: 0 86px !important;
  }
  .footer-copy-text {
    font-size: 0.78em !important;
    line-height: 1.35 !important;
  }
}

/* Animated Bouncy Balloon Sticker in Column 4 */
.footer-balloons-sticker {
  margin-top: 25px;
  position: relative;
  display: inline-block;
  animation: balloonFloat 4s infinite ease-in-out alternate;
  z-index: 4;
}

.balloon-cluster {
  display: flex;
  justify-content: center;
  position: relative;
  width: 140px;
  height: 120px;
  margin: 0 auto;
}

.balloon-item {
  width: 42px;
  height: 52px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  position: absolute;
  box-shadow: inset -4px -6px 0 rgba(0,0,0,0.15), 0 8px 15px rgba(0,0,0,0.2);
}

.balloon-item::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,0.25);
  width: 0;
  height: 0;
}

.balloon-item.b-red {
  background: radial-gradient(circle at 12px 12px, #ff7675, #d63031);
  left: 20px;
  top: 10px;
  transform: rotate(-12deg);
}

.balloon-item.b-yellow {
  background: radial-gradient(circle at 12px 12px, #ffeaa7, #fdcb6e);
  left: 48px;
  top: 5px;
  z-index: 2;
}

.balloon-item.b-blue {
  background: radial-gradient(circle at 12px 12px, #74b9ff, #0984e3);
  right: 20px;
  top: 15px;
  transform: rotate(14deg);
}

.balloon-string-svg {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 90px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

@keyframes balloonFloat {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-12px) rotate(2deg); }
}