/*=========================================================
VS TECH CCTV SOLUTIONS
Animations
Version : 1.0
=========================================================*/

/*=========================================================
TRANSITIONS
=========================================================*/

.fade-transition{
    transition:all .35s ease;
}

/*=========================================================
FADE IN
=========================================================*/

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade-in{
    animation:fadeIn .8s ease forwards;
}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

/*=========================================================
FADE DOWN
=========================================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .6s ease forwards;

}

/*=========================================================
FLOATING
=========================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

    animation:floating 4s ease-in-out infinite;

}

/*=========================================================
PULSE
=========================================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2s infinite;

}

/*=========================================================
ROTATE
=========================================================*/

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 2s linear infinite;

}

/*=========================================================
BLINK
=========================================================*/

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.2;

    }

}

.blink{

    animation:blink 1.2s infinite;

}

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

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(0,194,255,0);

    }

    50%{

        box-shadow:0 0 25px rgba(0,194,255,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(0,194,255,0);

    }

}

.glow{

    animation:glow 2s infinite;

}

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

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:scale(0);

    border-radius:inherit;

    transition:.5s;

}

.ripple:hover::before{

    transform:scale(3);

    opacity:0;

}

/*=========================================================
BUTTON HOVER
=========================================================*/

.hover-lift{

    transition:.35s ease;

}

.hover-lift:hover{

    transform:translateY(-6px);

}

.hover-scale{

    transition:.35s ease;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-glow{

    transition:.35s ease;

}

.hover-glow:hover{

    box-shadow:0 15px 35px rgba(29,78,216,.30);

}

/*=========================================================
ICON ROTATE
=========================================================*/

.icon-rotate{

    transition:.35s ease;

}

.icon-rotate:hover{

    transform:rotate(12deg);

}

/*=========================================================
CARD HOVER
=========================================================*/

.card-hover{

    transition:.35s ease;

}

.card-hover:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(15,23,42,.12);

}

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

.image-zoom{

    overflow:hidden;

}

.image-zoom img{

    transition:.5s ease;

}

.image-zoom:hover img{

    transform:scale(1.08);

}

/*=========================================================
UNDERLINE ANIMATION
=========================================================*/

.animated-link{

    position:relative;

}

.animated-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary-700);

    transition:.35s ease;

}

.animated-link:hover::after{

    width:100%;

}

/*=========================================================
SCROLL REVEAL DEFAULT
=========================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:.8s ease;

}

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

.loader-ring{

    animation:rotate 1s linear infinite;

}

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

.whatsapp-pulse{

    animation:pulse 1.8s infinite;

}

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

.back-to-top{

    transition:.35s ease;

}

.back-to-top:hover{

    transform:translateY(-5px);

}

/*=========================================================
END
=========================================================*/