/*==========================================
ANIMATIONS
==========================================*/

/* Fade Up */

.fade-up{
    opacity:0;
    transform:translateY(70px);
    transition:1s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/* Slide Left */

.slide-left{
    opacity:0;
    transform:translateX(-80px);
    transition:1s ease;
}

.slide-left.show{
    opacity:1;
    transform:translateX(0);
}

/* Slide Right */

.slide-right{
    opacity:0;
    transform:translateX(80px);
    transition:1s ease;
}

.slide-right.show{
    opacity:1;
    transform:translateX(0);
}

/* Zoom */

.zoom{
    opacity:0;
    transform:scale(.8);
    transition:1s ease;
}

.zoom.show{
    opacity:1;
    transform:scale(1);
}

/* Rotate */

.rotate{
    opacity:0;
    transform:rotate(-10deg);
    transition:1s ease;
}

.rotate.show{
    opacity:1;
    transform:rotate(0);
}

/* Floating Image */

@keyframes floating{

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

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

100%{
transform:translateY(0);
}

}

.hero-image img{

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

}

/* Gradient Background */

@keyframes gradient{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* Hero Glow */

@keyframes glow{

0%{
box-shadow:0 0 10px rgba(37,99,235,.2);
}

50%{
box-shadow:0 0 35px rgba(37,99,235,.7);
}

100%{
box-shadow:0 0 10px rgba(37,99,235,.2);
}

}

.hero-image{

animation:glow 3s infinite;

}

/* Pulse */

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

.btn.primary:hover{

animation:pulse .7s;

}

/* Loader */

@keyframes loader{

100%{
transform:rotate(360deg);
}

}

.loader{

width:70px;
height:70px;

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

border-top-color:#2563eb;

border-radius:50%;

animation:loader .8s linear infinite;

}

/* Typing Cursor */

.typing::after{

content:"|";

margin-left:5px;

animation:blink .8s infinite;

}

@keyframes blink{

50%{
opacity:0;
}

}

/* Progress Bar */

#progress-bar{

position:fixed;

top:0;
left:0;

width:0%;

height:4px;

background:#2563eb;

z-index:99999;

transition:.1s;

}

/* Hero Background */

.hero{

background:linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#0f172a,
#111827
);

background-size:400% 400%;

animation:gradient 15s ease infinite;

}

/* Hover Lift */

.project-card:hover,
.skill-card:hover,
.service-card:hover,
.certificate-card:hover{

transform:translateY(-10px);

}

/* Image Zoom */

.project-card img{

transition:.5s;

}

.project-card:hover img{

transform:scale(1.08);

}

/* Social Icons */

.socials a{

transition:.35s;

}

.socials a:hover{

transform:translateY(-6px) rotate(360deg);

}

/* Navbar */

.navbar a{

position:relative;

}

.navbar a::after{

content:"";

position:absolute;

bottom:-8px;
left:0;

width:0%;

height:2px;

background:#2563eb;

transition:.3s;

}

.navbar a:hover::after{

width:100%;

}

/* Counter */

.counter-box{

transition:.35s;

}

.counter-box:hover{

transform:translateY(-8px);

}

/* Glass */

.skill-card,
.project-card,
.service-card,
.certificate-card{

backdrop-filter:blur(15px);

}

/* Scroll Down */

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-10px);

}

60%{

transform:translateY(-5px);

}

}

.scroll-down{

animation:bounce 2s infinite;

}