/*=====================================
GREEN VALLEY PUBLIC SCHOOL
ANIMATION.CSS
======================================*/


/* Fade In */

@keyframes fadeIn{

0%{
opacity:0;
}

100%{
opacity:1;
}

}


/* Fade Up */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


/* Fade Down */

@keyframes fadeDown{

0%{

opacity:0;
transform:translateY(-60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


/* Fade Left */

@keyframes fadeLeft{

0%{

opacity:0;
transform:translateX(-80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}


/* Fade Right */

@keyframes fadeRight{

0%{

opacity:0;
transform:translateX(80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}


/* Zoom */

@keyframes zoomIn{

0%{

opacity:0;
transform:scale(.7);

}

100%{

opacity:1;
transform:scale(1);

}

}


/* Rotate */

@keyframes rotate{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}


/* Floating */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}


/* Pulse */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}


/* Bounce */

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}


/* Shine */

@keyframes shine{

0%{

left:-100%;

}

100%{

left:120%;

}

}


/* Slide */

@keyframes slide{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(0);

}

}


/* Hero Heading */

.hero .content h1{

animation:fadeDown 1s ease;

}

.hero .content h4{

animation:fadeLeft 1s ease;

}

.hero .content p{

animation:fadeRight 1.2s ease;

}

.hero .buttons{

animation:fadeUp 1.5s ease;

}


/* About */

.about-image{

animation:fadeLeft 1s;

}

.about-content{

animation:fadeRight 1s;

}


/* Cards */

.card{

animation:zoomIn .8s;

}

.card:hover{

animation:pulse .5s;

}


/* Facility */

.facility-box{

animation:fadeUp .8s;

}

.facility-box:hover i{

animation:bounce .8s infinite;

}


/* Principal */

.principal-img{

animation:fadeLeft 1s;

}

.principal-content{

animation:fadeRight 1s;

}


/* Counter */

.counter-box{

animation:zoomIn .8s;

}


/* Gallery */

.gallery-item{

overflow:hidden;
position:relative;

}

.gallery-item::before{

content:'';
position:absolute;
left:-100%;
top:0;
width:60%;
height:100%;
background:rgba(255,255,255,.3);
transform:skewX(-25deg);
transition:.5s;

}

.gallery-item:hover::before{

animation:shine .8s;

}

.gallery-item img{

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.1);

}


/* Testimonial */

.testimonial-box{

animation:fadeUp .8s;

}


/* Contact */

.contact-home form{

animation:zoomIn 1s;

}


/* Footer */

.footer-box{

animation:fadeUp 1s;

}


/* WhatsApp */

.whatsapp{

animation:floating 3s infinite;

}


/* Back to Top */

#topBtn{

animation:pulse 2s infinite;

}


/* Loader */

.spinner{

animation:rotate 1s linear infinite;

}


/* Hover */

.btn{

position:relative;
overflow:hidden;

}

.btn::before{

content:'';
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:rgba(255,255,255,.25);
transform:skewX(-30deg);

}

.btn:hover::before{

animation:shine .7s;

}


/* Images */

img{

transition:.5s;

}

img:hover{

transform:scale(1.03);

}


/* Social Icons */

.social a:hover{

animation:bounce .8s;

}


/* Section Animation */

section{

animation:fadeIn .8s;

}


/* Floating Shapes */

.shape1{

animation:floating 8s infinite;

}

.shape2{

animation:floating 10s infinite;

}

.shape3{

animation:floating 12s infinite;

}