:root {
    --slk-red: #E53935;
    --slk-green: #43A047;
    --slk-blue: #1E88E5;
    --slk-yellow: #FFB300;
    --slk-orange: #FF6D00;
    --slk-pink: #E91E8F;
    --slk-purple: #7B1FA2;
    --slk-dark: #1B2A4A;
    --slk-light-yellow: #FFF8E1;
    --slk-light-blue:   #E8F4FD;
    --slk-light-pink:   #FFF3F3;
    --slk-light-green:  #E8F5E9;
    --slk-light-purple: #F3E5F5;
    --slk-sky: #BFE9FF;
    --slk-grass: #7ED957;
    --slk-sand: #FFE9A8;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #2D2D2D;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--slk-dark);
}

/* ---------- Brand utility colors ---------- */
.text-slk-red    { color: var(--slk-red) !important; }
.text-slk-green  { color: var(--slk-green) !important; }
.text-slk-blue   { color: var(--slk-blue) !important; }
.text-slk-yellow { color: var(--slk-yellow) !important; }
.text-slk-pink   { color: var(--slk-pink) !important; }
.text-slk-dark   { color: var(--slk-dark) !important; }

.bg-slk-red    { background-color: var(--slk-red) !important; color: #fff; }
.bg-slk-green  { background-color: var(--slk-green) !important; color: #fff; }
.bg-slk-blue   { background-color: var(--slk-blue) !important; color: #fff; }
.bg-slk-dark   { background-color: var(--slk-dark) !important; color: #fff; }
.bg-slk-light-yellow { background-color: var(--slk-light-yellow) !important; }
.bg-slk-light-blue   { background-color: var(--slk-light-blue) !important; }
.bg-slk-light-pink   { background-color: var(--slk-light-pink) !important; }
.bg-slk-light-green  { background-color: var(--slk-light-green) !important; }

/* ---------- Buttons ---------- */
.btn-slk-primary {
    background: var(--slk-red);
    border-color: var(--slk-red);
    color: #fff;
    font-weight: 700;
    border-radius: 50rem;
    padding: 10px 26px;
    box-shadow: 0 10px 24px rgba(229, 57, 53, 0.28);
}
.btn-slk-primary:hover,
.btn-slk-primary:focus {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
    transform: translateY(-2px);
}

.slk-section { padding: 60px 0; position: relative; }

/* ---------- Floating WhatsApp ---------- */
.slk-whatsapp-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.slk-whatsapp-btn:hover { transform: scale(1.08); color: #fff; }

/* ==========================================================
   CARTOON SECTION BACKGROUNDS (each section its own look)
   ========================================================== */
.slk-sect {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
}

/* soft yellow sunshine */
.slk-sect-yellow {
    background:
        radial-gradient(circle at 15% 20%, #FFF0B3 0%, transparent 55%),
        radial-gradient(circle at 85% 80%, #FFE08A 0%, transparent 50%),
        linear-gradient(180deg, #FFFBEB 0%, #FFF4C2 100%);
}

/* sky blue */
.slk-sect-blue {
    background:
        radial-gradient(circle at 80% 10%, #FFFFFF 0%, transparent 50%),
        linear-gradient(180deg, #D3F0FF 0%, #A8DEFF 100%);
}

/* candy pink */
.slk-sect-pink {
    background:
        radial-gradient(circle at 20% 80%, #FFD1E3 0%, transparent 55%),
        linear-gradient(180deg, #FFE9F1 0%, #FFC9DC 100%);
}

/* mint green */
.slk-sect-green {
    background:
        radial-gradient(circle at 80% 20%, #CFF5D9 0%, transparent 55%),
        linear-gradient(180deg, #E8FBEC 0%, #C6F0CE 100%);
}

/* lavender */
.slk-sect-purple {
    background:
        radial-gradient(circle at 20% 20%, #EADCFF 0%, transparent 55%),
        linear-gradient(180deg, #F5EEFF 0%, #E0CCFF 100%);
}

/* rainbow stripes */
.slk-sect-rainbow {
    background: linear-gradient(180deg,
        #FFE5E5 0%, #FFF4CC 25%,
        #E5FFE5 50%, #CCE8FF 75%,
        #F2E5FF 100%);
}

/* floating bubbles decoration */
.slk-sect::before,
.slk-sect::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    filter: blur(2px);
    animation: slkBubble 9s ease-in-out infinite;
}
.slk-sect::before {
    width: 160px; height: 160px;
    top: -40px; left: -40px;
    background: radial-gradient(circle, #FFE08A, #FFB84D);
}
.slk-sect::after {
    width: 200px; height: 200px;
    bottom: -60px; right: -60px;
    background: radial-gradient(circle, #FFC2D1, #FF82A9);
    animation-delay: -3s;
}

@keyframes slkBubble {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(12px, -18px) scale(1.08); }
}

.slk-sect > .container { position: relative; z-index: 2; }

/* Section title underline wavy */
.slk-sect .section-title,
.slk-sect-title {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}
.slk-sect .section-title::after,
.slk-sect-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 90px;
    height: 10px;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 10px 5px, var(--slk-red) 4px, transparent 5px),
        radial-gradient(circle at 30px 5px, var(--slk-yellow) 4px, transparent 5px),
        radial-gradient(circle at 50px 5px, var(--slk-green) 4px, transparent 5px),
        radial-gradient(circle at 70px 5px, var(--slk-blue) 4px, transparent 5px),
        radial-gradient(circle at 85px 5px, var(--slk-pink) 4px, transparent 5px);
}

/* ==========================================================
   IMAGE SHAPES (different per section)
   ========================================================== */
.slk-shape { overflow: hidden; display: block; position: relative; }
.slk-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slk-shape-blob {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: slkBlob 12s ease-in-out infinite;
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}
@keyframes slkBlob {
    0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
    33%      { border-radius: 42% 58% 38% 62% / 48% 42% 58% 52%; }
    66%      { border-radius: 50% 50% 65% 35% / 40% 60% 40% 60%; }
}

.slk-shape-circle {
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.slk-shape-hex {
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.slk-shape-heart {
    clip-path: path('M50 88 C15 60 5 35 25 18 C40 6 50 22 50 22 C50 22 60 6 75 18 C95 35 85 60 50 88 Z');
    -webkit-clip-path: path('M50 88 C15 60 5 35 25 18 C40 6 50 22 50 22 C50 22 60 6 75 18 C95 35 85 60 50 88 Z');
}
.slk-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.slk-shape-leaf {
    border-radius: 0 70% 0 70%;
}
.slk-shape-cloud {
    border-radius: 55% 45% 60% 40% / 70% 60% 40% 30%;
}
.slk-shape-ticket {
    border-radius: 20px;
    mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
          radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}

.slk-shape-frame {
    padding: 10px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 35px rgba(30, 42, 74, 0.15);
    transform: rotate(-2deg);
    transition: transform 0.4s ease;
}
.slk-shape-frame:hover { transform: rotate(0deg) scale(1.02); }
.slk-shape-frame img { border-radius: 18px; }

/* ==========================================================
   RANDOM GLOBAL ROAMING ANIMATIONS
   Injected by JS into .slk-scene-stage
   ========================================================== */
.slk-scene-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

.slk-rover {
    position: absolute;
    will-change: transform;
    opacity: 0;
    pointer-events: none;
}
.slk-rover.is-active {
    opacity: 1;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* airplane */
.slk-rover--plane {
    width: 90px;
    height: 40px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'><g><rect x='10' y='22' width='90' height='12' rx='6' fill='%23E53935'/><polygon points='85,28 115,14 115,46' fill='%23E53935'/><rect x='40' y='8' width='24' height='18' fill='%23FFB300'/><rect x='35' y='34' width='30' height='12' fill='%23FFB300'/><circle cx='30' cy='28' r='3' fill='%23fff'/><circle cx='45' cy='28' r='3' fill='%23fff'/><circle cx='60' cy='28' r='3' fill='%23fff'/></g></svg>") no-repeat center/contain;
    animation-name: slkFlyLR;
}
.slk-rover--plane.rtl { animation-name: slkFlyRL; }

/* car */
.slk-rover--car {
    width: 110px;
    height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 80'><g><rect x='10' y='35' width='120' height='25' rx='8' fill='%231E88E5'/><path d='M25 35 L45 15 L95 15 L115 35 Z' fill='%2343A047'/><rect x='48' y='20' width='18' height='15' fill='%23BFE9FF'/><rect x='72' y='20' width='18' height='15' fill='%23BFE9FF'/><circle cx='35' cy='62' r='10' fill='%23222'/><circle cx='35' cy='62' r='4' fill='%23bbb'/><circle cx='105' cy='62' r='10' fill='%23222'/><circle cx='105' cy='62' r='4' fill='%23bbb'/><circle cx='123' cy='40' r='4' fill='%23FFD54F'/></g></svg>") no-repeat center/contain;
    animation-name: slkDriveLR;
}
.slk-rover--car.rtl { animation-name: slkDriveRL; }

/* paper cut plane */
.slk-rover--paper {
    width: 60px;
    height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g><polygon points='5,30 55,5 45,30 55,55' fill='%23ffffff' stroke='%231E88E5' stroke-width='2'/><polygon points='45,30 55,5 30,35' fill='%23BFE9FF' stroke='%231E88E5' stroke-width='2'/></g></svg>") no-repeat center/contain;
    animation-name: slkPaperFly;
}

/* rolling ribbon / line */
.slk-rover--ribbon {
    width: 120px;
    height: 22px;
    background: linear-gradient(90deg, var(--slk-red), var(--slk-yellow), var(--slk-green), var(--slk-blue), var(--slk-pink));
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    animation-name: slkRibbon;
}

/* butterfly */
.slk-rover--butterfly {
    width: 60px;
    height: 50px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'><g><ellipse cx='30' cy='25' rx='22' ry='18' fill='%23E91E8F'/><ellipse cx='50' cy='25' rx='22' ry='18' fill='%237B1FA2'/><ellipse cx='30' cy='38' rx='14' ry='12' fill='%23FFB300'/><ellipse cx='50' cy='38' rx='14' ry='12' fill='%23FF6D00'/><rect x='38' y='15' width='4' height='32' rx='2' fill='%231B2A4A'/><circle cx='40' cy='14' r='3' fill='%231B2A4A'/></g></svg>") no-repeat center/contain;
    animation-name: slkFlutter;
    animation-duration: 18s;
}

/* star sparkle */
.slk-rover--star {
    width: 28px; height: 28px;
    background: radial-gradient(circle, #fff176 30%, #FFB300 70%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation-name: slkStarTwinkle;
    animation-duration: 6s;
}

@keyframes slkFlyLR {
    0%   { transform: translate(-15vw, var(--slk-y, 15vh)) rotate(-3deg); }
    50%  { transform: translate(50vw, calc(var(--slk-y, 15vh) - 30px)) rotate(2deg); }
    100% { transform: translate(115vw, var(--slk-y, 15vh)) rotate(-2deg); }
}
@keyframes slkFlyRL {
    0%   { transform: translate(115vw, var(--slk-y, 15vh)) scaleX(-1) rotate(-3deg); }
    100% { transform: translate(-15vw, var(--slk-y, 15vh)) scaleX(-1) rotate(-3deg); }
}
@keyframes slkDriveLR {
    0%   { transform: translate(-20vw, var(--slk-y, 70vh)); }
    100% { transform: translate(115vw, var(--slk-y, 70vh)); }
}
@keyframes slkDriveRL {
    0%   { transform: translate(115vw, var(--slk-y, 70vh)) scaleX(-1); }
    100% { transform: translate(-20vw, var(--slk-y, 70vh)) scaleX(-1); }
}
@keyframes slkPaperFly {
    0%   { transform: translate(-10vw, 20vh) rotate(0deg); }
    25%  { transform: translate(25vw, 15vh) rotate(-8deg); }
    50%  { transform: translate(50vw, 30vh) rotate(6deg); }
    75%  { transform: translate(75vw, 10vh) rotate(-6deg); }
    100% { transform: translate(115vw, 25vh) rotate(0deg); }
}
@keyframes slkRibbon {
    0%   { transform: translate(-20vw, var(--slk-y, 40vh)) rotate(0deg); }
    100% { transform: translate(120vw, var(--slk-y, 40vh)) rotate(540deg); }
}
@keyframes slkFlutter {
    0%   { transform: translate(-10vw, 30vh) rotate(0deg); }
    25%  { transform: translate(25vw, 20vh) rotate(10deg); }
    50%  { transform: translate(55vw, 35vh) rotate(-6deg); }
    75%  { transform: translate(80vw, 22vh) rotate(8deg); }
    100% { transform: translate(115vw, 30vh) rotate(0deg); }
}
@keyframes slkStarTwinkle {
    0%, 100% { transform: translate(var(--slk-x, 50vw), var(--slk-y, 50vh)) scale(0.8); opacity: 0; }
    50%      { transform: translate(var(--slk-x, 50vw), var(--slk-y, 50vh)) scale(1.3); opacity: 1; }
}

/* ==========================================================
   FOOTER (full cartoon + structured layout)
   ========================================================== */
.slk-footer {
    position: relative;
    margin-top: 60px;
    color: rgba(255,255,255,0.9);
    background: linear-gradient(180deg, #1B2A4A 0%, #0F1B35 100%);
}

.slk-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(233, 30, 143, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(30, 136, 229, 0.15) 0%, transparent 40%);
    pointer-events: none;
}

.slk-footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 0;
    pointer-events: none;
}
.slk-footer-wave svg { width: 100%; height: 60px; display: block; transform: scaleY(-1); }

.slk-footer-main {
    position: relative;
    padding: 70px 0 40px;
}

.slk-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.slk-footer-brand img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 6px;
}
.slk-footer-brand h5 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    margin: 0;
    font-size: 1.15rem;
}
.slk-footer-brand small {
    color: #FFD54F;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.slk-footer-text {
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 340px;
}

.slk-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.slk-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}
.slk-footer-social a:hover {
    background: linear-gradient(135deg, var(--slk-red), var(--slk-orange));
    color: #fff;
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 10px 20px rgba(229, 57, 53, 0.3);
}

.slk-footer-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.slk-footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--slk-yellow), var(--slk-red));
}

.slk-footer-links,
.slk-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.slk-footer-links li,
.slk-footer-contact li {
    margin-bottom: 10px;
}
.slk-footer-links a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.slk-footer-links a i {
    font-size: 0.65rem;
    color: var(--slk-yellow);
    transition: transform 0.2s ease;
}
.slk-footer-links a:hover { color: #fff; transform: translateX(4px); }
.slk-footer-links a:hover i { color: var(--slk-orange); }

.slk-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}
.slk-footer-contact .ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: var(--slk-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.slk-footer-contact a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.slk-footer-contact a:hover { color: #fff; }

/* Newsletter */
.slk-footer-newsletter label {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 8px;
}
.slk-news-group {
    display: flex;
    background: rgba(255,255,255,0.08);
    border-radius: 50rem;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.12);
}
.slk-news-group input {
    flex: 1;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 8px 16px;
    outline: none;
    font-size: 0.9rem;
}
.slk-news-group input::placeholder { color: rgba(255,255,255,0.45); }
.slk-news-group button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--slk-red), var(--slk-orange));
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.slk-news-group button:hover { transform: rotate(-12deg) scale(1.08); }

.slk-footer-bottom {
    position: relative;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.18);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
}
.slk-footer-bottom a {
    color: var(--slk-yellow);
    text-decoration: none;
    font-weight: 600;
}
.slk-footer-bottom a:hover { color: #fff; }

/* ==========================================================
   FOOTER CARTOON SCENE
   ========================================================== */
.slk-footer-scene {
    position: relative;
    height: 240px;
    margin-top: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #BFE9FF 0%, #FFDCB0 55%, #FFB887 75%, #7ED957 100%);
}

/* sun rising */
.slk-scene-sun {
    position: absolute;
    left: 50%;
    bottom: 50px;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    background: radial-gradient(circle, #FFEB3B 0%, #FFB300 75%);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 193, 7, 0.6);
    animation: slkSunRise 8s ease-in-out infinite alternate;
}
.slk-scene-sun::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,235,59,0.35) 50%, transparent 72%);
}

@keyframes slkSunRise {
    0%   { transform: translateY(60px) scale(0.85); }
    100% { transform: translateY(-10px) scale(1.05); }
}

/* drifting clouds */
.slk-scene-cloud {
    position: absolute;
    top: 18px;
    width: 90px;
    height: 32px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 18px 8px 0 -4px #fff, -18px 6px 0 -2px #fff;
    opacity: 0.9;
    animation: slkCloudDrift 22s linear infinite;
}
.slk-scene-cloud.c2 { top: 38px; width: 70px; height: 26px; animation-duration: 30s; animation-delay: -8s; opacity: 0.75; }
.slk-scene-cloud.c3 { top: 8px; width: 60px; height: 22px; animation-duration: 26s; animation-delay: -14s; opacity: 0.6; }
@keyframes slkCloudDrift {
    0%   { left: -110px; }
    100% { left: 110%; }
}

/* grass */
.slk-scene-grass {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50px;
    background:
        radial-gradient(ellipse at 10% 0%, #7ED957 10px, transparent 11px),
        radial-gradient(ellipse at 25% 0%, #66C93F 8px, transparent 9px),
        radial-gradient(ellipse at 45% 0%, #7ED957 10px, transparent 11px),
        radial-gradient(ellipse at 62% 0%, #66C93F 8px, transparent 9px),
        radial-gradient(ellipse at 80% 0%, #7ED957 10px, transparent 11px),
        radial-gradient(ellipse at 95% 0%, #66C93F 8px, transparent 9px),
        linear-gradient(180deg, #7ED957 0%, #4CAF50 100%);
    background-size: auto, auto, auto, auto, auto, auto, 100% 100%;
}

/* walking cat */
.slk-scene-cat {
    position: absolute;
    bottom: 38px;
    left: -80px;
    width: 70px;
    height: 50px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'><g><ellipse cx='55' cy='45' rx='30' ry='18' fill='%23FF9800'/><circle cx='25' cy='35' r='15' fill='%23FF9800'/><polygon points='15,25 20,38 27,28' fill='%23FF9800'/><polygon points='35,25 30,38 23,28' fill='%23FF9800'/><circle cx='20' cy='35' r='2' fill='%23000'/><circle cx='30' cy='35' r='2' fill='%23000'/><path d='M22 40 Q25 43 28 40' stroke='%23000' stroke-width='1.5' fill='none'/><rect x='35' y='60' width='4' height='8' fill='%23FF9800'/><rect x='50' y='60' width='4' height='8' fill='%23FF9800'/><rect x='65' y='60' width='4' height='8' fill='%23FF9800'/><rect x='78' y='60' width='4' height='8' fill='%23FF9800'/><path d='M85 45 Q98 30 92 18' stroke='%23FF9800' stroke-width='5' fill='none'/></g></svg>") no-repeat center/contain;
    animation: slkWalk 18s linear infinite;
}
@keyframes slkWalk {
    0%   { left: -80px; }
    45%  { left: 40%; }
    50%  { left: 42%; transform: scaleX(-1); }
    95%  { left: -80px; transform: scaleX(-1); }
    100% { left: -80px; }
}

/* walking dog */
.slk-scene-dog {
    position: absolute;
    bottom: 38px;
    right: -80px;
    width: 75px;
    height: 55px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 75'><g><ellipse cx='60' cy='45' rx='32' ry='18' fill='%238D6E63'/><circle cx='28' cy='38' r='17' fill='%238D6E63'/><ellipse cx='18' cy='32' rx='6' ry='12' fill='%236D4C41'/><ellipse cx='38' cy='30' rx='5' ry='10' fill='%236D4C41'/><circle cx='22' cy='38' r='2' fill='%23000'/><circle cx='32' cy='38' r='2' fill='%23000'/><ellipse cx='27' cy='44' rx='3' ry='2' fill='%23000'/><path d='M25 48 Q28 51 31 48' stroke='%23000' stroke-width='1.5' fill='none'/><rect x='38' y='60' width='5' height='10' fill='%238D6E63'/><rect x='55' y='60' width='5' height='10' fill='%238D6E63'/><rect x='70' y='60' width='5' height='10' fill='%238D6E63'/><rect x='85' y='60' width='5' height='10' fill='%238D6E63'/><path d='M92 40 Q100 35 95 28' stroke='%238D6E63' stroke-width='6' fill='none'/></g></svg>") no-repeat center/contain;
    animation: slkWalkRev 22s linear infinite;
}
@keyframes slkWalkRev {
    0%   { right: -80px; }
    45%  { right: 38%; }
    50%  { right: 40%; transform: scaleX(-1); }
    95%  { right: -80px; transform: scaleX(-1); }
    100% { right: -80px; }
}

/* kid with ball */
.slk-scene-kidball {
    position: absolute;
    bottom: 45px;
    left: 18%;
    width: 46px;
    height: 70px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'><g><circle cx='30' cy='15' r='12' fill='%23FFE0B2'/><circle cx='26' cy='14' r='1.5' fill='%23000'/><circle cx='34' cy='14' r='1.5' fill='%23000'/><path d='M25 19 Q30 23 35 19' stroke='%23000' stroke-width='1.5' fill='none'/><path d='M18 5 Q30 0 42 5 L42 13 L18 13 Z' fill='%23E53935'/><rect x='20' y='27' width='20' height='28' rx='4' fill='%231E88E5'/><rect x='18' y='55' width='10' height='22' fill='%23FFB300'/><rect x='32' y='55' width='10' height='22' fill='%23FFB300'/><rect x='15' y='75' width='14' height='6' rx='2' fill='%23333'/><rect x='31' y='75' width='14' height='6' rx='2' fill='%23333'/></g></svg>") no-repeat center/contain;
    animation: slkKick 2s ease-in-out infinite;
}
@keyframes slkKick {
    0%, 100% { transform: rotate(0deg); }
    40%      { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
    60%      { transform: rotate(-2deg); }
}
.slk-scene-ball {
    position: absolute;
    bottom: 42px;
    left: 24%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(#fff 0 25%, #000 25% 50%, #fff 50% 75%, #000 75% 100%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    animation: slkBall 2s ease-in-out infinite;
}
@keyframes slkBall {
    0%, 100% { transform: translate(0, 0); }
    40%      { transform: translate(0, 0); }
    50%      { transform: translate(28px, -40px) rotate(180deg); }
    60%      { transform: translate(52px, -60px) rotate(260deg); }
    80%      { transform: translate(70px, -20px) rotate(360deg); }
}

/* slide with kid */
.slk-scene-slide {
    position: absolute;
    bottom: 40px;
    right: 18%;
    width: 120px;
    height: 90px;
}
.slk-scene-slide::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><g><rect x='10' y='10' width='6' height='80' fill='%23E91E8F'/><rect x='104' y='50' width='6' height='40' fill='%23E91E8F'/><path d='M12 12 Q60 22 110 52' stroke='%23FFB300' stroke-width='10' fill='none' stroke-linecap='round'/><path d='M10 88 L110 88' stroke='%23795548' stroke-width='4'/></g></svg>") no-repeat center/contain;
}
.slk-scene-slidekid {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><g><circle cx='25' cy='18' r='10' fill='%23FFE0B2'/><path d='M15 10 Q25 4 35 10 L35 16 L15 16 Z' fill='%237B1FA2'/><rect x='18' y='28' width='14' height='16' rx='3' fill='%2343A047'/></g></svg>") no-repeat center/contain;
    animation: slkSlide 4s ease-in-out infinite;
}
@keyframes slkSlide {
    0%   { transform: translate(0px, 0px); opacity: 1; }
    10%  { transform: translate(0px, 0px); opacity: 1; }
    60%  { transform: translate(90px, 50px); opacity: 1; }
    70%  { transform: translate(92px, 58px); opacity: 0.8; }
    80%  { transform: translate(92px, 58px); opacity: 0; }
    100% { transform: translate(0px, 0px); opacity: 0; }
}

/* flower pots on grass */
.slk-scene-flower {
    position: absolute;
    bottom: 35px;
    width: 24px;
    height: 30px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'><g><rect x='12' y='18' width='2' height='20' fill='%234CAF50'/><circle cx='13' cy='12' r='6' fill='%23E91E8F'/><circle cx='13' cy='12' r='2' fill='%23FFEB3B'/><ellipse cx='6' cy='22' rx='4' ry='2' fill='%234CAF50'/><ellipse cx='20' cy='24' rx='4' ry='2' fill='%234CAF50'/></g></svg>") no-repeat center/contain;
    animation: slkFlowerSway 3s ease-in-out infinite alternate;
}
.slk-scene-flower.f1 { left: 6%; }
.slk-scene-flower.f2 { left: 34%; animation-delay: -1s; }
.slk-scene-flower.f3 { left: 66%; animation-delay: -0.5s; }
.slk-scene-flower.f4 { left: 92%; animation-delay: -1.5s; }
@keyframes slkFlowerSway {
    0%   { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* bird flying across */
.slk-scene-bird {
    position: absolute;
    top: 60px;
    left: -30px;
    width: 30px;
    height: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'><path d='M2 12 Q10 2 18 12 Q26 22 38 12' stroke='%231B2A4A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain;
    animation: slkBirdFly 14s linear infinite;
}
.slk-scene-bird.b2 { top: 40px; animation-delay: -5s; animation-duration: 18s; }

@keyframes slkBirdFly {
    0%   { left: -30px; transform: translateY(0); }
    25%  { transform: translateY(-8px); }
    50%  { transform: translateY(4px); }
    75%  { transform: translateY(-6px); }
    100% { left: 110%; transform: translateY(0); }
}

/* balloons rising */
.slk-scene-balloon {
    position: absolute;
    bottom: -60px;
    width: 28px;
    height: 40px;
    border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
    animation: slkBalloonRise 18s linear infinite;
}
.slk-scene-balloon::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 50px;
    background: #6a7a99;
}
.slk-scene-balloon::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 6px;
    height: 4px;
    transform: translateX(-50%);
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.slk-scene-balloon.b1 { left: 5%;  background: var(--slk-red);    animation-delay: -2s; }
.slk-scene-balloon.b2 { left: 22%; background: var(--slk-yellow); animation-delay: -7s; animation-duration: 22s; }
.slk-scene-balloon.b3 { left: 78%; background: var(--slk-pink);   animation-delay: -12s; animation-duration: 20s; }
.slk-scene-balloon.b4 { left: 92%; background: var(--slk-blue);   animation-delay: -4s; animation-duration: 24s; }

@keyframes slkBalloonRise {
    0%   { bottom: -60px; transform: translateX(0) rotate(-2deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translateX(15px) rotate(3deg); }
    90%  { opacity: 1; }
    100% { bottom: 110%; transform: translateX(-15px) rotate(-2deg); opacity: 0; }
}

/* butterfly fluttering */
.slk-scene-butterfly {
    position: absolute;
    width: 28px;
    height: 22px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'><g><ellipse cx='14' cy='13' rx='11' ry='9' fill='%23E91E8F'/><ellipse cx='26' cy='13' rx='11' ry='9' fill='%237B1FA2'/><ellipse cx='14' cy='20' rx='7' ry='6' fill='%23FFB300'/><ellipse cx='26' cy='20' rx='7' ry='6' fill='%23FF6D00'/><rect x='19' y='8' width='2' height='16' fill='%231B2A4A'/></g></svg>") no-repeat center/contain;
    animation: slkButterflyFly 10s ease-in-out infinite;
    top: 90px;
    left: 30%;
}
@keyframes slkButterflyFly {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    25%      { transform: translate(40px, -20px) rotate(8deg); }
    50%      { transform: translate(80px, -5px) rotate(-3deg); }
    75%      { transform: translate(40px, 15px) rotate(6deg); }
}

/* swinging kid */
.slk-scene-swing {
    position: absolute;
    bottom: 60px;
    left: 45%;
    width: 80px;
    height: 110px;
    transform-origin: 50% 0;
    animation: slkSwing 3s ease-in-out infinite;
}
.slk-scene-swing::before {
    content: '';
    position: absolute;
    left: 10px; right: 10px;
    top: 0; height: 60px;
    border-left: 3px solid #795548;
    border-right: 3px solid #795548;
}
.slk-scene-swing::after {
    content: '';
    position: absolute;
    left: 5px; right: 5px;
    top: 60px;
    height: 8px;
    background: #8D6E63;
    border-radius: 4px;
}
.slk-scene-swing-kid {
    position: absolute;
    left: 50%;
    top: 52px;
    width: 28px;
    height: 42px;
    margin-left: -14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><g><circle cx='20' cy='12' r='9' fill='%23FFE0B2'/><path d='M11 5 Q20 -1 29 5 L29 12 L11 12 Z' fill='%2343A047'/><rect x='12' y='20' width='16' height='22' rx='3' fill='%23E91E8F'/><rect x='10' y='40' width='7' height='16' fill='%231E88E5'/><rect x='23' y='40' width='7' height='16' fill='%231E88E5'/></g></svg>") no-repeat center/contain;
}
@keyframes slkSwing {
    0%, 100% { transform: rotate(-14deg); }
    50%      { transform: rotate(14deg); }
}

/* bouncing rabbit */
.slk-scene-rabbit {
    position: absolute;
    bottom: 38px;
    left: 30%;
    width: 36px;
    height: 42px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'><g><ellipse cx='25' cy='42' rx='18' ry='12' fill='%23ffffff'/><circle cx='25' cy='25' r='12' fill='%23ffffff'/><ellipse cx='18' cy='8' rx='4' ry='10' fill='%23ffffff' stroke='%23FFC2D1' stroke-width='2'/><ellipse cx='32' cy='8' rx='4' ry='10' fill='%23ffffff' stroke='%23FFC2D1' stroke-width='2'/><circle cx='20' cy='24' r='1.5' fill='%23000'/><circle cx='30' cy='24' r='1.5' fill='%23000'/><ellipse cx='25' cy='30' rx='2' ry='1.5' fill='%23FFC2D1'/><circle cx='5' cy='40' r='4' fill='%23ffffff'/></g></svg>") no-repeat center/contain;
    animation: slkBounce 1.4s ease-in-out infinite, slkRabbitHop 14s linear infinite;
}
@keyframes slkBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes slkRabbitHop {
    0%   { left: 30%; }
    50%  { left: 36%; }
    100% { left: 30%; }
}

/* kite with string */
.slk-scene-kite {
    position: absolute;
    top: 20px;
    left: 15%;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--slk-red) 50%, var(--slk-yellow) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    animation: slkKiteFly 8s ease-in-out infinite;
}
.slk-scene-kite::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 60px;
    background: repeating-linear-gradient(180deg, #1B2A4A 0 5px, transparent 5px 10px);
}
@keyframes slkKiteFly {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    50%      { transform: translate(20px, -10px) rotate(8deg); }
}

/* waving teacher */
.slk-scene-teacher {
    position: absolute;
    bottom: 45px;
    right: 6%;
    width: 42px;
    height: 72px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'><g><circle cx='30' cy='15' r='12' fill='%23FFE0B2'/><path d='M18 14 Q30 4 42 14 L42 20 L18 20 Z' fill='%236D4C41'/><rect x='20' y='27' width='20' height='34' rx='4' fill='%237B1FA2'/><rect x='18' y='61' width='10' height='25' fill='%231B2A4A'/><rect x='32' y='61' width='10' height='25' fill='%231B2A4A'/></g></svg>") no-repeat center/contain;
}
.slk-scene-teacher::before {
    content: '';
    position: absolute;
    top: 28px;
    right: 38px;
    width: 14px;
    height: 4px;
    background: #FFE0B2;
    border-radius: 3px;
    transform-origin: 0 50%;
    animation: slkWave 1.2s ease-in-out infinite;
}
@keyframes slkWave {
    0%, 100% { transform: rotate(-25deg); }
    50%      { transform: rotate(25deg); }
}

/* floating bubbles */
.slk-scene-bubble {
    position: absolute;
    bottom: 70px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(200,230,255,0.35));
    border: 1px solid rgba(255,255,255,0.5);
    animation: slkBubbleRise 6s ease-in infinite;
}
.slk-scene-bubble.bu1 { left: 12%; animation-delay: -1s; }
.slk-scene-bubble.bu2 { left: 55%; width: 14px; height: 14px; animation-delay: -3s; animation-duration: 8s; }
.slk-scene-bubble.bu3 { left: 70%; width: 8px; height: 8px; animation-delay: -5s; }
.slk-scene-bubble.bu4 { left: 88%; width: 12px; height: 12px; animation-delay: -2s; animation-duration: 7s; }
@keyframes slkBubbleRise {
    0%   { transform: translateY(0) scale(0.4); opacity: 0; }
    15%  { opacity: 1; }
    90%  { opacity: 0.8; }
    100% { transform: translateY(-160px) scale(1); opacity: 0; }
}

/* ==========================================================
   FRONTEND CONTAINER HELPERS
   ========================================================== */
body.slk-frontend { padding-top: 0; }

.slk-main-content { min-height: 50vh; }

.slk-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 576px) { .slk-container { padding-left: 1.25rem; padding-right: 1.25rem; } }
@media (min-width: 992px) { .slk-container { padding-left: 2rem; padding-right: 2rem; } }

/* Override .slk-sect so it is container-fluid edge-to-edge and
   uses inner .slk-container for readable width */
.slk-sect { padding: 80px 0; }
.slk-sect > .slk-container,
.slk-sect > .container-fluid { position: relative; z-index: 2; }

/* ==========================================================
   TOP STRIP (thin contact bar above navbar)
   ========================================================== */
.slk-topstrip {
    background: linear-gradient(90deg, #1B2A4A 0%, #7B1FA2 50%, #E91E8F 100%);
    color: #fff;
    font-size: 0.82rem;
    padding: 8px 0;
    position: relative;
    z-index: 1045;
}
.slk-topstrip a { color: #fff; text-decoration: none; }
.slk-topstrip a:hover { color: #FFD54F; }
.slk-topstrip-left span,
.slk-topstrip-right > a { margin-right: 18px; }
.slk-topstrip i { margin-right: 6px; color: #FFD54F; }
.slk-topstrip-social { display: inline-flex; gap: 10px; margin-left: 6px; }
.slk-topstrip-social a {
    display: inline-flex;
    width: 26px; height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: background 0.2s, transform 0.2s;
}
.slk-topstrip-social a:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); }
.slk-topstrip-social i { margin: 0; color: #fff; }

/* ==========================================================
   NAVBAR (cartoon + modern)
   ========================================================== */
.slk-navbar {
    background: #ffffff !important;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, var(--slk-red), var(--slk-yellow), var(--slk-green), var(--slk-blue), var(--slk-pink)) 1;
    box-shadow: 0 4px 20px rgba(30, 42, 74, 0.08);
    padding: 12px 0;
    z-index: 1040;
    transition: box-shadow 0.2s ease, padding 0.2s ease;
}
.slk-navbar.is-sticky { padding: 6px 0; box-shadow: 0 8px 30px rgba(30, 42, 74, 0.12); }

.slk-navbar .slk-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    margin: 0;
}
.slk-brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--slk-yellow), var(--slk-orange));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(255, 109, 0, 0.28);
    overflow: hidden;
    transform: rotate(-4deg);
    transition: transform 0.3s ease;
}
.slk-brand-logo:hover { transform: rotate(0deg) scale(1.04); }
.slk-brand-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.slk-brand-logo-fallback i { color: #fff; font-size: 1.6rem; }

.slk-brand-text { line-height: 1.1; }
.slk-brand-text .slk-brand-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--slk-dark);
    letter-spacing: 0.01em;
    text-shadow: 2px 2px 0 rgba(255, 179, 0, 0.22);
}
.slk-brand-text small {
    display: block;
    font-size: 0.72rem;
    color: var(--slk-purple);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Custom hamburger */
.slk-navbar-toggler {
    border: 2px solid var(--slk-red);
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 46px;
    height: 42px;
    justify-content: center;
    align-items: center;
    box-shadow: none;
}
.slk-navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.25); }
.slk-toggler-bar {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--slk-red);
    border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.slk-navbar-toggler[aria-expanded="true"] .slk-toggler-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.slk-navbar-toggler[aria-expanded="true"] .slk-toggler-bar:nth-child(2) { opacity: 0; }
.slk-navbar-toggler[aria-expanded="true"] .slk-toggler-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menu list */
.slk-menu {
    gap: 4px;
    align-items: center;
}
.slk-menu .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    border-radius: 14px;
    color: var(--slk-dark) !important;
    font-weight: 700;
    font-size: 0.92rem;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
}
.slk-menu .nav-link i {
    color: var(--slk-blue);
    font-size: 0.9rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.slk-menu .nav-link:hover {
    background: linear-gradient(135deg, #FFF4C2, #FFE9A8);
    color: var(--slk-dark) !important;
    transform: translateY(-2px);
}
.slk-menu .nav-link:hover i { color: var(--slk-orange); transform: scale(1.15); }

.slk-menu .nav-link.active {
    background: linear-gradient(135deg, var(--slk-red), var(--slk-orange));
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(229, 57, 53, 0.25);
}
.slk-menu .nav-link.active i { color: #FFEB3B; }

.slk-dropdown-menu {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(30, 42, 74, 0.15);
    padding: 10px;
    margin-top: 8px;
}
.slk-dropdown-menu .dropdown-item {
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    color: var(--slk-dark);
}
.slk-dropdown-menu .dropdown-item:hover,
.slk-dropdown-menu .dropdown-item.active {
    background: linear-gradient(135deg, #FFF4C2, #FFE9A8);
    color: var(--slk-dark);
}

/* CTA button */
.slk-nav-cta .nav-link-contact {
    color: var(--slk-dark) !important;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 12px !important;
}
.slk-nav-cta .nav-link-contact.active { color: var(--slk-red) !important; }
.btn-slk-cta {
    background: linear-gradient(135deg, var(--slk-red), var(--slk-pink));
    color: #fff !important;
    font-weight: 800;
    border: 0;
    border-radius: 50rem;
    padding: 10px 22px;
    box-shadow: 0 12px 25px rgba(229, 57, 53, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.btn-slk-cta:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 16px 32px rgba(229, 57, 53, 0.38);
    color: #fff;
}
.btn-slk-cta i { margin-right: 4px; color: #FFEB3B; animation: slkStarPulse 2s ease-in-out infinite; }
@keyframes slkStarPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

/* Mobile collapse adjustments */
@media (max-width: 991.98px) {
    .slk-navbar { padding: 10px 0; }
    .slk-navbar .navbar-collapse {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(30, 42, 74, 0.12);
        margin-top: 14px;
        padding: 14px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .slk-menu { flex-direction: column; align-items: stretch; gap: 6px; }
    .slk-menu .nav-link {
        justify-content: flex-start;
        width: 100%;
        padding: 12px 16px !important;
    }
    .slk-nav-cta {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(30, 42, 74, 0.08);
        flex-direction: column;
        align-items: stretch !important;
    }
    .slk-nav-cta .nav-link-contact,
    .slk-nav-cta .btn-slk-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .slk-brand-text .slk-brand-name { font-size: 1.05rem; }
    .slk-brand-text small { font-size: 0.62rem; }
    .slk-brand-logo { width: 46px; height: 46px; border-radius: 14px; }
}

/* Old cartoon-nav fallback (from SCSS) neutralization */
.cartoon-nav::before,
.cartoon-nav::after { content: none !important; }
.cartoon-nav .mascot-icon { display: none !important; }

/* ==========================================================
   PAGE HERO (reusable across internal pages)
   ========================================================== */
.slk-page-hero {
    position: relative;
    padding: 80px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 224, 138, 0.55) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(255, 194, 209, 0.55) 0%, transparent 45%),
        linear-gradient(135deg, #E8F4FD 0%, #FFF8E1 45%, #FFE9F1 100%);
}
.slk-page-hero::before,
.slk-page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.slk-page-hero::before {
    width: 280px; height: 280px;
    top: -80px; left: -80px;
    background: radial-gradient(circle, #FFE08A, transparent);
    animation: slkBubble 9s ease-in-out infinite;
}
.slk-page-hero::after {
    width: 220px; height: 220px;
    bottom: -60px; right: -60px;
    background: radial-gradient(circle, #FFC2D1, transparent);
    animation: slkBubble 11s ease-in-out infinite;
    animation-delay: -3s;
}
.slk-page-hero > .container-fluid,
.slk-page-hero > .slk-container { position: relative; z-index: 2; }

.slk-page-hero .slk-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 50rem;
    background: rgba(229, 57, 53, 0.1);
    color: var(--slk-red);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}
.slk-page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    color: var(--slk-dark);
    margin-bottom: 18px;
}
.slk-page-hero .lead {
    color: #38415E;
    font-size: 1.1rem;
    max-width: 600px;
}
.slk-page-hero .slk-hero-image {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(30, 42, 74, 0.18);
    transform: rotate(2deg);
    transition: transform 0.4s ease;
}
.slk-page-hero .slk-hero-image:hover { transform: rotate(0) scale(1.02); }
.slk-page-hero .slk-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Breadcrumb chip */
.slk-breadcrumb {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    font-size: 0.82rem;
    color: #65708A;
    margin-bottom: 14px;
}
.slk-breadcrumb a { color: var(--slk-red); text-decoration: none; font-weight: 600; }
.slk-breadcrumb i { font-size: 0.65rem; color: #aaa; }

/* ==========================================================
   Responsive tweaks
   ========================================================== */
@media (max-width: 991.98px) {
    .slk-sect { padding: 60px 0; }
    .slk-page-hero { padding: 60px 0 70px; }
    .slk-footer-main { padding: 50px 0 30px; }
}

@media (max-width: 768px) {
    .slk-sect { padding: 50px 0; }
    .slk-page-hero { padding: 50px 0 60px; }
    .slk-footer-scene { height: 200px; }
    .slk-scene-slide { right: 6%; transform: scale(0.85); }
    .slk-scene-kidball { left: 8%; }
    .slk-scene-ball { left: 14%; }
    .slk-scene-swing { left: 40%; transform: scale(0.85); transform-origin: 50% 0; }
    .slk-scene-teacher { right: 2%; transform: scale(0.85); }
    .hero-title { font-size: 2.2rem !important; }
    .slk-rover--car { width: 80px; height: 44px; }
    .slk-rover--plane { width: 70px; height: 30px; }
    .slk-footer-brand img { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
    .slk-footer-scene { height: 180px; }
    .slk-scene-sun { width: 70px; height: 70px; margin-left: -35px; }
    .slk-scene-slide { right: 2%; transform: scale(0.65); }
    .slk-scene-swing { left: 36%; transform: scale(0.7); }
    .slk-scene-rabbit { left: 18%; transform: scale(0.85); }
    .slk-sect { padding: 40px 0; }
    .slk-page-hero { padding: 40px 0 50px; }
    .slk-page-hero h1 { font-size: 1.7rem; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .slk-rover, .slk-scene-sun, .slk-scene-cloud, .slk-scene-cat,
    .slk-scene-dog, .slk-scene-kidball, .slk-scene-ball,
    .slk-scene-slidekid, .slk-scene-flower, .slk-scene-bird,
    .slk-sect::before, .slk-sect::after, .slk-shape-blob {
        animation: none !important;
    }
}