/*==================================================
        IFE PREMIUM ANIMATIONS
==================================================*/

/*=========================
        VARIABLES
=========================*/

:root{

    --duration:.8s;

    --ease:cubic-bezier(.25,.46,.45,.94);

}

/*=========================
        FADE UP
=========================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .9s var(--ease),

    transform .9s var(--ease);

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================
        FADE LEFT
=========================*/

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:

    opacity .9s var(--ease),

    transform .9s var(--ease);

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/*=========================
        FADE RIGHT
=========================*/

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:

    opacity .9s var(--ease),

    transform .9s var(--ease);

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/*=========================
        ZOOM
=========================*/

.zoom{

    opacity:0;

    transform:scale(.85);

    transition:

    opacity .8s,

    transform .8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

/*=========================
      HERO FLOAT
=========================*/

.float{

    animation:

    floating 6s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
        GLOW
=========================*/

.glow{

    animation:

    glow 5s infinite;

}

@keyframes glow{

    0%{

        filter:

        drop-shadow(0 0 0 rgba(10,77,163,.3));

    }

    50%{

        filter:

        drop-shadow(0 0 40px rgba(10,77,163,.55));

    }

    100%{

        filter:

        drop-shadow(0 0 0 rgba(10,77,163,.3));

    }

}

/*=========================
    BUTTON RIPPLE
=========================*/

.btn-primary,

.btn-whatsapp,

.btn-outline{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,

.btn-whatsapp::before,

.btn-outline::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.7s;

}

.btn-primary:hover::before,

.btn-whatsapp:hover::before,

.btn-outline:hover::before{

    width:320px;

    height:320px;

}

/*=========================
      SERVICE CARD
=========================*/

.service-card{

    overflow:hidden;

}

.service-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.28),

    transparent);

    transform:translateX(-120%);

}

.service-card:hover::after{

    animation:shine 1.1s;

}

@keyframes shine{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(120%);

    }

}

/*=========================
    ICON ROTATION
=========================*/

.service-icon,

.stat-icon,

.info-card i{

    transition:.45s;

}

.service-card:hover .service-icon,

.stat-card:hover .stat-icon,

.info-card:hover i{

    transform:

    rotate(10deg)

    scale(1.1);

}

/*=========================
        CTA
=========================*/

.cta-box{

    animation:

    pulseBox 7s infinite;

}

@keyframes pulseBox{

    0%{

        box-shadow:

        0 25px 60px rgba(10,77,163,.25);

    }

    50%{

        box-shadow:

        0 35px 90px rgba(17,136,71,.35);

    }

    100%{

        box-shadow:

        0 25px 60px rgba(10,77,163,.25);

    }

}

/*=========================
      STAT COUNTER
=========================*/

.counter{

    display:inline-block;

    transition:.3s;

}

/*=========================
        LOADER
=========================*/

body.loaded #loader{

    opacity:0;

    visibility:hidden;

    transition:.5s;

}

/*=========================
      BACK TO TOP
=========================*/

#backToTop{

    transition:.35s;

}

#backToTop:hover{

    transform:

    translateY(-6px)

    scale(1.08);

}

/*=========================
      WHATSAPP
=========================*/

.whatsapp-float{

    animation:

    whatsappPulse 2.5s infinite;

}

@keyframes whatsappPulse{

    0%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:

        0 0 0 22px rgba(37,211,102,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,0);

    }

}

/*=========================
    GLASS EFFECT
=========================*/

.glass{

    backdrop-filter:blur(16px);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

}

/*=========================
      HOVER SCALE
=========================*/

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}

/*=========================
      ROTATION
=========================*/

.rotate{

    transition:.5s;

}

.rotate:hover{

    transform:rotate(360deg);

}

/*=========================
      PARALLAX READY
=========================*/

.parallax{

    will-change:transform;

}

/*=========================
      FIN
=========================*/