/* ==========================================
   Naimish Pro - Frontend Layer & Animation Styles
========================================== */

.naimish-pro-slider-wrapper {
    position: relative;
    box-sizing: border-box;
}

.naimish-pro-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.naimish-frontend-layer {
    box-sizing: border-box;
}

/* --- Motion Path Keyframe Animations --- */
@keyframes mlWaveMotion {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes mlCircleMotion {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10px, -10px); }
    50% { transform: translate(0, -15px); }
    75% { transform: (-10px, -10px); }
    100% { transform: translate(0, 0); }
}

@keyframes mlZigZagMotion {
    0% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(10px) translateY(-10px); }
    66% { transform: translateX(-10px) translateY(-5px); }
    100% { transform: translateX(0) translateY(0); }
}

/* Animation Classes */
.path-anim-wave {
    animation: mlWaveMotion 4s ease-in-out infinite;
}

.path-anim-circle {
    animation: mlCircleMotion 5s linear infinite;
}

.path-anim-zigzag {
    animation: mlZigZagMotion 3s ease-in-out infinite;
}


/* Global navigation arrows: fixed, centered hit areas with predictable padding. */
.naimish-pro-primary-prev,
.naimish-pro-primary-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    font-size: 24px !important;
    cursor: pointer;
}
.naimish-pro-primary-prev { left: 12px !important; }
.naimish-pro-primary-next { right: 12px !important; }
.naimish-pro-primary-dots button {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.naimish-pro-primary-slide .naimish-frontend-layer {
    will-change: transform, opacity;
}

/* ==========================================
   Naimish Pro - Frontend Animation Runtime
========================================== */
[class*="ml-anim-"] {
    animation-fill-mode: both;
}
/* ==========================================
   Naimish Pro - Complete Animation Engine CSS
   ========================================== */

/* Base Animation Rule */
[class*="ml-anim-"] {
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/* --- FADING --- */
.ml-anim-fadeIn { animation-name: mlFadeIn; }
.ml-anim-fadeInDown { animation-name: mlFadeInDown; }
.ml-anim-fadeInLeft { animation-name: mlFadeInLeft; }
.ml-anim-fadeInRight { animation-name: mlFadeInRight; }
.ml-anim-fadeInUp { animation-name: mlFadeInUp; }

/* --- ZOOMING --- */
.ml-anim-zoomIn { animation-name: mlZoomIn; }
.ml-anim-zoomInDown { animation-name: mlZoomInDown; }
.ml-anim-zoomInLeft { animation-name: mlZoomInLeft; }
.ml-anim-zoomInRight { animation-name: mlZoomInRight; }
.ml-anim-zoomInUp { animation-name: mlZoomInUp; }

/* --- BOUNCING --- */
.ml-anim-bounceIn { animation-name: mlBounceIn; }
.ml-anim-bounceInDown { animation-name: mlBounceInDown; }
.ml-anim-bounceInLeft { animation-name: mlBounceInLeft; }
.ml-anim-bounceInRight { animation-name: mlBounceInRight; }
.ml-anim-bounceInUp { animation-name: mlBounceInUp; }

/* --- SLIDING --- */
.ml-anim-slideInDown { animation-name: mlSlideInDown; }
.ml-anim-slideInLeft { animation-name: mlSlideInLeft; }
.ml-anim-slideInRight { animation-name: mlSlideInRight; }
.ml-anim-slideInUp { animation-name: mlSlideInUp; }

/* --- ROTATING --- */
.ml-anim-rotateIn { animation-name: mlRotateIn; }
.ml-anim-rotateInDownLeft { animation-name: mlRotateInDownLeft; }
.ml-anim-rotateInDownRight { animation-name: mlRotateInDownRight; }
.ml-anim-rotateInUpLeft { animation-name: mlRotateInUpLeft; }
.ml-anim-rotateInUpRight { animation-name: mlRotateInUpRight; }

/* --- ATTENTION SEEKERS --- */
.ml-anim-bounce { animation-name: mlBounceAnim; animation-iteration-count: infinite; }
.ml-anim-flash { animation-name: mlFlash; animation-iteration-count: infinite; }
.ml-anim-pulse { animation-name: mlPulse; animation-iteration-count: infinite; }
.ml-anim-rubberBand { animation-name: mlRubberBand; }
.ml-anim-shake { animation-name: mlShake; }
.ml-anim-headShake { animation-name: mlHeadShake; }
.ml-anim-swing { animation-name: mlSwing; }
.ml-anim-tada { animation-name: mlTada; }
.ml-anim-wobble { animation-name: mlWobble; }
.ml-anim-jello { animation-name: mlJello; }

/* --- LIGHT SPEED & SPECIALS --- */
.ml-anim-lightSpeedIn { animation-name: mlLightSpeedIn; }
.ml-anim-rollIn { animation-name: mlRollIn; }


/* ==========================================
   Keyframes Definitions
========================================== */

@keyframes mlFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mlFadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mlFadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes mlFadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes mlFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mlZoomIn {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mlZoomInDown {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateY(-1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateY(60px); }
    to { opacity: 1; transform: scale3d(1, 1, 1) translateY(0); }
}
@keyframes mlZoomInLeft {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateX(-1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateX(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes mlZoomInRight {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateX(1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateX(-10px); }
    to { opacity: 1; transform: none; }
}
@keyframes mlZoomInUp {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateY(1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateY(-60px); }
    to { opacity: 1; transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes mlBounceIn {
    0%, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes mlBounceInDown {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: translateY(-3000px); }
    60% { opacity: 1; transform: translateY(25px); }
    75% { transform: translateY(-10px); }
    90% { transform: translateY(5px); }
    to { transform: translateY(0); }
}
@keyframes mlBounceInLeft {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: translateX(-3000px); }
    60% { opacity: 1; transform: translateX(25px); }
    75% { transform: translateX(-10px); }
    90% { transform: translateX(5px); }
    to { transform: none; }
}
@keyframes mlBounceInRight {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: translateX(3000px); }
    60% { opacity: 1; transform: translateX(-25px); }
    75% { transform: translateX(10px); }
    90% { transform: translateX(-5px); }
    to { transform: none; }
}
@keyframes mlBounceInUp {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: translateY(3000px); }
    60% { opacity: 1; transform: translateY(-20px); }
    75% { transform: translateY(10px); }
    90% { transform: translateY(-5px); }
    to { transform: translateY(0); }
}

@keyframes mlSlideInDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes mlSlideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes mlSlideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes mlSlideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes mlRotateIn {
    from { transform: rotate(-200deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes mlRotateInDownLeft {
    from { transform-origin: left bottom; transform: rotate(-45deg); opacity: 0; }
    to { transform-origin: left bottom; transform: none; opacity: 1; }
}
@keyframes mlRotateInDownRight {
    from { transform-origin: right bottom; transform: rotate(45deg); opacity: 0; }
    to { transform-origin: right bottom; transform: none; opacity: 1; }
}
@keyframes mlRotateInUpLeft {
    from { transform-origin: left bottom; transform: rotate(45deg); opacity: 0; }
    to { transform-origin: left bottom; transform: none; opacity: 1; }
}
@keyframes mlRotateInUpRight {
    from { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; }
    to { transform-origin: right bottom; transform: none; opacity: 1; }
}

@keyframes mlBounceAnim {
    from, 20%, 53%, 80%, to { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translateY(-30px); }
    70% { transform: translateY(-15px); }
    90% { transform: translateY(-4px); }
}
@keyframes mlFlash {
    from, 50%, to { opacity: 1; }
    25%, 75% { opacity: 0; }
}
@keyframes mlPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes mlRubberBand {
    from { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    to { transform: scale3d(1, 1, 1); }
}
@keyframes mlShake {
    from, to { transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
    20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
@keyframes mlHeadShake {
    0% { transform: translateX(0); }
    6.5% { transform: translateX(-6px) rotateY(-9deg); }
    18.5% { transform: translateX(5px) rotateY(7deg); }
    31.5% { transform: translateX(-3px) rotateY(-5deg); }
    43.5% { transform: translateX(2px) rotateY(3deg); }
    50% { transform: translateX(0); }
}
@keyframes mlSwing {
    20% { transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); }
    to { transform: rotate3d(0, 0, 1, 0deg); }
}
@keyframes mlTada {
    from { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    to { transform: scale3d(1, 1, 1); }
}
@keyframes mlWobble {
    from { transform: translate3d(0, 0, 0); }
    15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes mlJello {
    from, 11.1%, to { transform: translate3d(0, 0, 0); }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes mlLightSpeedIn {
    from { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-20deg) skewX(20deg); opacity: 1; }
    80% { transform: translateX(0deg) skewX(-5deg); }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes mlRollIn {
    from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================
   CINEMATIC ANIMATION & TRANSITIONS ENGINE
========================================== */
@keyframes maalaltaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes maalaltaZoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes maalaltaSlideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes maalaltaSlideDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes maalaltaBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}
@keyframes maalaltaFlip {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
/* ==========================================
   CINEMATIC & 3D SPECIALS ANIMATION KEYFRAMES
   ========================================== */

@keyframes mlFlipX {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
    }
}

@keyframes mlBlurIn {
    0% {
        opacity: 0;
        filter: blur(15px);
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

@keyframes mlRotateIn {
    0% {
        opacity: 0;
        transform: rotate(-30deg) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}