/*==================================================
 RK Tech Web Solution
 Animations.css
==================================================*/


/*=====================================
 Fade Up
=====================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/*=====================================
 Fade Left
=====================================*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}


/*=====================================
 Fade Right
=====================================*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:all .8s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}


/*=====================================
 Zoom In
=====================================*/

.zoom{

    opacity:0;

    transform:scale(.8);

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


/*=====================================
 Rotate
=====================================*/

.rotate{

    transition:.5s;

}

.rotate:hover{

    transform:rotate(8deg);

}


/*=====================================
 Float
=====================================*/

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


/*=====================================
 Pulse
=====================================*/

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/*=====================================
 Shine Button
=====================================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

left:-120px;

top:0;

width:60px;

height:100%;

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

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::before{

left:130%;

}


/*=====================================
 Service Card Hover
=====================================*/

.service-card{

transition:.4s;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,0,0,.12);

}


/*=====================================
 Pricing Hover
=====================================*/

.pricing-card{

transition:.4s;

}

.pricing-card:hover{

transform:translateY(-10px);

}


/*=====================================
 Portfolio Hover
=====================================*/

.portfolio-card{

overflow:hidden;

position:relative;

}

.portfolio-card img{

transition:.6s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}


/*=====================================
 Portfolio Overlay
=====================================*/

.portfolio-overlay{

position:absolute;

left:0;

bottom:-100%;

width:100%;

height:100%;

background:rgba(15,23,42,.88);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:25px;

transition:.5s;

color:#fff;

}

.portfolio-card:hover .portfolio-overlay{

bottom:0;

}


/*=====================================
 Testimonial Hover
=====================================*/

.testimonial-card{

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}


/*=====================================
 Counter Animation
=====================================*/

.counter-box{

transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

}


/*=====================================
 Footer Links
=====================================*/

.footer a{

transition:.3s;

}

.footer a:hover{

color:var(--secondary);

padding-left:8px;

}


/*=====================================
 WhatsApp Floating
=====================================*/

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

box-shadow:0 12px 25px rgba(0,0,0,.2);

z-index:999;

transition:.3s;

}

.whatsapp-float:hover{

transform:scale(1.1);

}


/*=====================================
 Back To Top
=====================================*/

#topBtn{

position:fixed;

right:25px;

bottom:100px;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

display:none;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 12px 25px rgba(0,0,0,.2);

transition:.3s;

z-index:999;

}

#topBtn:hover{

background:var(--primary-dark);

transform:translateY(-5px);

}


/*=====================================
 Loader Fade
=====================================*/

.loader{

transition:.5s;

}


/*=====================================
 Scroll Animation
=====================================*/

.show{

opacity:1 !important;

transform:translate(0) scale(1) !important;

}


/*=====================================
 Gradient Text
=====================================*/

.gradient-text{

background:linear-gradient(90deg,#2563eb,#ff8a00);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}


/*=====================================
 End
=====================================*/