.elementor-846 .elementor-element.elementor-element-3220064 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-846 .elementor-element.elementor-element-3220064:not(.elementor-motion-effects-element-type-background), .elementor-846 .elementor-element.elementor-element-3220064 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-846 .elementor-element.elementor-element-3220064{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0%;margin-bottom:0%;padding:0% 0% 0% 0%;}.elementor-846 .elementor-element.elementor-element-3220064 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-846 .elementor-element.elementor-element-1d76ad5.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-846 .elementor-element.elementor-element-1d76ad5.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-846 .elementor-element.elementor-element-7fdd6c8 > .elementor-container{max-width:1200px;}.elementor-846 .elementor-element.elementor-element-7fdd6c8{padding:5% 0% 3% 0%;}.elementor-846 .elementor-element.elementor-element-cd25d1d:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#D3D3D3;box-shadow:0px 10px 30px 0px rgba(0, 0, 0, 0.08);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:3em 3em 3em 3em;}.elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-element-populated, .elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-element-populated > .elementor-background-overlay, .elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-background-slideshow{border-radius:10px 10px 10px 10px;}.elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-846 .elementor-element.elementor-element-a425060 .elementor-heading-title{font-family:"Dancing Script", Sans-serif;font-size:22px;color:#3A3A3A;}.elementor-846 .elementor-element.elementor-element-2c072b1{padding:0em 0em 0em 0em;}.elementor-846 .elementor-element.elementor-element-2c072b1 .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-846 .elementor-element.elementor-element-559fefc .elementor-cta .elementor-cta__bg, .elementor-846 .elementor-element.elementor-element-559fefc .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-846 .elementor-element.elementor-element-559fefc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:5px 5px 5px 5px;}.elementor-846 .elementor-element.elementor-element-559fefc .elementor-cta__content{text-align:center;padding:15px 0px 15px 0px;background-color:var( --e-global-color-secondary );}.elementor-846 .elementor-element.elementor-element-559fefc .elementor-cta__button{color:var( --e-global-color-3f75de9 );background-color:var( --e-global-color-primary );border-color:var( --e-global-color-accent );border-width:1px;border-radius:5px;}.elementor-846 .elementor-element.elementor-element-559fefc .elementor-cta__button:hover{color:var( --e-global-color-accent );background-color:var( --e-global-color-e137e00 );border-color:var( --e-global-color-accent );}.elementor-846 .elementor-element.elementor-element-fdbae26{width:auto;max-width:auto;bottom:20px;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-fdbae26{right:70px;}body.rtl .elementor-846 .elementor-element.elementor-element-fdbae26{left:70px;}.elementor-846 .elementor-element.elementor-element-fdbae26 img{width:100%;height:65px;object-fit:contain;object-position:center center;}.elementor-846 .elementor-element.elementor-element-59d2d3e{width:auto;max-width:auto;--e-transform-rotateZ:50deg;bottom:10px;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-59d2d3e{right:20px;}body.rtl .elementor-846 .elementor-element.elementor-element-59d2d3e{left:20px;}.elementor-846 .elementor-element.elementor-element-59d2d3e img{width:100%;height:85px;object-fit:contain;object-position:center center;}.elementor-846 .elementor-element.elementor-element-272d990{width:auto;max-width:auto;--e-transform-rotateZ:35deg;top:-10px;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-272d990{right:-65px;}body.rtl .elementor-846 .elementor-element.elementor-element-272d990{left:-65px;}.elementor-846 .elementor-element.elementor-element-272d990 img{width:100%;height:60px;object-fit:contain;object-position:center center;opacity:0.82;filter:brightness( 95% ) contrast( 152% ) saturate( 45% ) blur( 0px ) hue-rotate( 360deg );}.elementor-846 .elementor-element.elementor-element-54d6699:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stillbee.in/wp-content/uploads/2026/03/bglogin.png");background-position:center right;background-repeat:no-repeat;background-size:113% auto;}.elementor-bc-flex-widget .elementor-846 .elementor-element.elementor-element-54d6699.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-846 .elementor-element.elementor-element-54d6699.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-846 .elementor-element.elementor-element-54d6699.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated >  .elementor-background-overlay{opacity:0.5;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated, .elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated > .elementor-background-overlay, .elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-background-slideshow{border-radius:10px 10px 10px 10px;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0% 0% 0% 2%;--e-column-margin-right:0%;--e-column-margin-left:2%;padding:0em 0em 0em 1em;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-846 .elementor-element.elementor-element-86fee9f{width:var( --container-widget-width, 85% );max-width:85%;--container-widget-width:85%;--container-widget-flex-grow:0;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-846 .elementor-element.elementor-element-1d76ad5{width:100%;}.elementor-846 .elementor-element.elementor-element-cd25d1d{width:40%;}.elementor-846 .elementor-element.elementor-element-54d6699{width:60%;}}@media(max-width:1024px){.elementor-846 .elementor-element.elementor-element-3220064{padding:1em 1em 1em 1em;}.elementor-846 .elementor-element.elementor-element-7fdd6c8{padding:0% 0% 0% 0%;}.elementor-846 .elementor-element.elementor-element-cd25d1d > .elementor-element-populated{padding:2em 2em 2em 2em;}.elementor-846 .elementor-element.elementor-element-2c072b1{padding:0em 0em 1em 0em;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-272d990{right:-50px;}body.rtl .elementor-846 .elementor-element.elementor-element-272d990{left:-50px;}.elementor-846 .elementor-element.elementor-element-272d990{top:-10px;}.elementor-846 .elementor-element.elementor-element-272d990 img{height:52px;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated{padding:2em 2em 2em 2em;}}@media(max-width:767px){.elementor-846 .elementor-element.elementor-element-3220064{padding:7em 1em 7em 1em;}.elementor-846 .elementor-element.elementor-element-7fdd6c8{padding:0% 0% 0% 0%;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-fdbae26{right:65px;}body.rtl .elementor-846 .elementor-element.elementor-element-fdbae26{left:65px;}.elementor-846 .elementor-element.elementor-element-fdbae26 img{height:45px;}.elementor-846 .elementor-element.elementor-element-59d2d3e img{height:70px;}.elementor-846 .elementor-element.elementor-element-272d990{--e-transform-rotateZ:35deg;top:-5px;}body:not(.rtl) .elementor-846 .elementor-element.elementor-element-272d990{right:-19px;}body.rtl .elementor-846 .elementor-element.elementor-element-272d990{left:-19px;}.elementor-846 .elementor-element.elementor-element-272d990 img{height:30px;}.elementor-846 .elementor-element.elementor-element-54d6699 > .elementor-element-populated{margin:2% 0% 0% 0%;--e-column-margin-right:0%;--e-column-margin-left:0%;}}/* Start custom CSS for shortcode, class: .elementor-element-2dddeb5 */#um-submit-btn {
    background-color: #660033;
}

#um-submit-btn:hover {
    color: #fff;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-86fee9f *//* ============================================ */
/* UPDATED CSS - WITH EMOTION-SPECIFIC EYE POSITIONS */
/* Now each emotion can have different eye positions! */
/* ============================================ */

/* Main Container */
.animated-children-wrapper {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.children-container {
    position: relative;
    display: inline-block;
}

/* Combined Children Image */
.children-image {
    width: 600px;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Eye Tracking Layer */
.eye-tracking-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Eye Container */
.eye-box {
    position: absolute;
    width: 22px;
    height: 22px;
    transition: top 0.3s ease, left 0.3s ease; /* Smooth position changes */
}

/* ============================================ */
/* DEFAULT EYE POSITIONS (NEUTRAL STATE) */
/* ============================================ */

/* Child 1 (Left) - Neutral */
.child1-left {
    top: 30.6%;
    left: 12%;
}
.child1-right {
    top: 30.5%;
    left: 18.5%;
}

/* Child 2 (Center) - Neutral */
.child2-left {
    top: 27%;
    left: 41.5%;
}
.child2-right {
    top: 27%;
    left: 48.5%;
}

/* Child 3 (Right) - Neutral */
.child3-left {
    top: 34.5%;
    left: 69%;
}
.child3-right {
    top: 33%;
    left: 76.5%;
}

/* ============================================ */
/* HAPPY STATE - ADJUST THESE FOR HAPPY IMAGE */
/* ============================================ */

.children-container.happy .child1-left {
    top: 30%;
    left: 14%;
}
.children-container.happy .child1-right {
    top: 30%;
    left: 21%;
}

.children-container.happy .child2-left {
    top: 27%;
    left: 42.5%;
}
.children-container.happy .child2-right {
    top: 27%;
    left: 49.5%;
}

.children-container.happy .child3-left {
    top: 37%;
    left: 70%;
}
.children-container.happy .child3-right {
    top: 34.5%;
    left: 79%;
}

/* ============================================ */
/* PASSWORD STATE - EYES HIDDEN (DON'T ADJUST) */
/* ============================================ */

.children-container.password .eye-tracking-layer {
    opacity: 0;
}

/* ============================================ */
/* SAD STATE - ADJUST THESE FOR SAD IMAGE */
/* ============================================ */

.children-container.sad .child1-left {
    visibility: hidden;
    top: 21%;     /* Adjust if sad children have eyes higher/lower */
    left: 15%;
}
.children-container.sad .child1-right {
    visibility: hidden;
    top: 21%;
    left: 22%;
}

.children-container.sad .child2-left {
    visibility: hidden;
    top: 21%;
    left: 43%;
}
.children-container.sad .child2-right {
    visibility: hidden;
    top: 21%;
    left: 50%;
}

.children-container.sad .child3-left {
    visibility: hidden;
    top: 21%;
    left: 71%;
}
.children-container.sad .child3-right {
    visibility: hidden;
    top: 21%;
    left: 78%;
}

/* Eye White Background */
.eye-white {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Moving Pupil */
.eye-pupil {
    width: 50%;
    height: 50%;
    background: radial-gradient(circle at 35% 35%, #4a4a4a, #1a1a1a);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease;
}

/* Pupil Highlight */
.eye-pupil::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    width: 30%;
    height: 30%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-15px) rotate(-2deg); }
    50% { transform: translateX(15px) rotate(2deg); }
    75% { transform: translateX(-15px) rotate(-2deg); }
}

.children-container.shake {
    animation: shake 0.6s ease-in-out;
}

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

.children-container.bounce {
    animation: bounce 0.6s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .children-image {
        width: 450px;
    }
    
    .eye-box {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .children-image {
        width: 320px;
    }
    
    .eye-box {
        width: 16px;
        height: 16px;
    }
}

/* ============================================ */
/* QUICK ADJUSTMENT GUIDE */
/* ============================================ */

/*

HOW TO ADJUST EYE POSITIONS FOR EACH EMOTION:

1. NEUTRAL STATE (lines 55-76):
   - These are the DEFAULT positions
   - Adjust these first to match child-neutral.png

2. HAPPY STATE (lines 82-103):
   - Adjust these to match child-happy.png
   - If happy children's eyes are HIGHER, DECREASE top %
   - If happy children's eyes are LOWER, INCREASE top %

3. SAD STATE (lines 115-136):
   - Adjust these to match child-sad.png
   - Usually similar to neutral, might be slightly lower

4. PASSWORD STATE:
   - No adjustment needed - eyes are hidden!

ADJUSTMENT TIPS:
- Start with one child (child1-left eye)
- Get it perfect for all states
- Then move to next eye
- Small changes (1-2%) make big difference

COMMON PATTERNS:
- Happy: Eyes usually 1-3% HIGHER (lower top %)
- Sad: Eyes usually 1-2% LOWER (higher top %)
- Horizontal usually stays the same

*//* End custom CSS */