/*====================================
ANIMATIONS.CSS
SVS BROADBAND
====================================*/

/* Floating */

@keyframes floating{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0px);
    }
}

.float{
    animation:floating 4s ease-in-out infinite;
}


/* Pulse */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

.pulse{

    animation:pulse 2s infinite;

}


/* Rotate */

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 8s linear infinite;

}


/* Fade Up */

.fade-up{

    opacity:0;

    transform:translateY(70px);

    transition:.9s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/* Fade Left */

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:.9s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}


/* Fade Right */

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:.9s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}


/* Zoom */

.zoom{

    opacity:0;

    transform:scale(.8);

    transition:.8s ease;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


/* Hero Background Animation */

@keyframes heroGradient{

    0%{

        background-position:left;

    }

    50%{

        background-position:right;

    }

    100%{

        background-position:left;

    }

}

.hero{

    background-size:300% 300%;

    animation:heroGradient 12s infinite;

}


/* Glow Button */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.btn:hover::before{

    left:120%;

}


/* Ripple */

.btn:active{

    transform:scale(.95);

}


/* Card Hover */

.plan-card:hover{

    transform:translateY(-15px) scale(1.03);

}

.feature-box:hover{

    transform:translateY(-12px) scale(1.03);

}

.about-card:hover{

    transform:translateY(-12px) scale(1.03);

}


/* Icon Bounce */

.feature-box i{

    transition:.4s;

}

.feature-box:hover i{

    transform:translateY(-8px);

}


/* Contact Inputs */

.contact input,
.contact textarea{

    transition:.35s;

}

.contact input:focus,
.contact textarea:focus{

    transform:translateY(-2px);

}


/* Floating Buttons */

.whatsapp{

    animation:pulse 2s infinite;

}

.call{

    animation:pulse 2.5s infinite;

}


/* Hero Image */

.hero-image img{

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

}


/* Scroll Progress Animation */

#progress-bar{

    transition:.2s;

}


/* Section Animation Delay */

.delay1{

    transition-delay:.2s;

}

.delay2{

    transition-delay:.4s;

}

.delay3{

    transition-delay:.6s;

}

.delay4{

    transition-delay:.8s;

}


/* Shiny Cards */

.plan-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-120%;

    width:220%;

    height:220%;

    background:linear-gradient(

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

}

.plan-card:hover::before{

    top:100%;

    left:100%;

}


/* WiFi Animation */

@keyframes wifi{

    0%{

        opacity:.2;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:.2;

        transform:scale(.8);

    }

}

.wifi{

    animation:wifi 2s infinite;

}


/* Gradient Text */

.gradient-text{

    background:linear-gradient(

        90deg,

        #00C2FF,

        #0A4DFF,

        #00C2FF

    );

    background-size:200%;

    /* -webkit-background-clip:text; */

    -webkit-text-fill-color:transparent;

    animation:heroGradient 6s linear infinite;

}


/* Back To Top */

.back-top{

    transition:.35s;

}

.back-top:hover{

    transform:translateY(-8px);

}


/* Loader */

.loader{

    animation:rotate 1s linear infinite;

}


/* Image Hover */

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.02);

}


/* Footer Icons */

footer i{

    transition:.3s;

}

footer i:hover{

    color:#00C2FF;

    transform:translateY(-5px);

}


/* Navbar Hover */

.nav-links a{

    transition:.35s;

}

.nav-links a:hover{

    color:#00C2FF;

}


/* Hero Content */

.hero-content h1{

    animation:fadeHero 1.3s ease;

}

.hero-content p{

    animation:fadeHero 1.6s ease;

}

.hero-btns{

    animation:fadeHero 1.9s ease;

}


@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}