/* ==========================
   Fade Animations
========================== */

@keyframes fadeIn {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

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

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.fade-up{
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

/* ==========================
   Scale
========================== */

@keyframes scaleIn{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.scale-in{

    animation:scaleIn .6s ease forwards;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

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

}

/* ==========================
   Heart Beat
========================== */

@keyframes heartbeat{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.15);

    }

    40%{

        transform:scale(.95);

    }

    60%{

        transform:scale(1.18);

    }

    100%{

        transform:scale(1);

    }

}

.heartbeat{

    animation:heartbeat 1.4s infinite;

}

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

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(236,72,153,.4);

    }

    70%{

        box-shadow:0 0 0 20px rgba(236,72,153,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(236,72,153,0);

    }

}

.pulse{

    animation:pulse 2.5s infinite;

}

/* ==========================
   Cards Hover
========================== */

.card{

    transition:.4s;

}

.card:hover{

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

}

/* ==========================
   Image Zoom
========================== */

.img-hover{

    overflow:hidden;

}

.img-hover img{

    transition:.6s;

}

.img-hover:hover img{

    transform:scale(1.08);

}

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

.rotate:hover{

    transform:rotate(10deg);

    transition:.3s;

}

/* ==========================
   Shine Effect
========================== */

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.5),

        transparent

    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    animation:shine 1s;

}

@keyframes shine{

    100%{

        left:140%;

    }

}

/* ==========================
   Background Floating Circles
========================== */

@keyframes moveCircle{

    0%{

        transform:translateY(0) translateX(0);

    }

    25%{

        transform:translateY(-40px) translateX(30px);

    }

    50%{

        transform:translateY(20px) translateX(-20px);

    }

    75%{

        transform:translateY(-30px) translateX(15px);

    }

    100%{

        transform:translateY(0) translateX(0);

    }

}

.circle{

    animation:moveCircle 15s linear infinite;

}

/* ==========================
   Navbar
========================== */

nav{

    animation:fadeDown .8s;

}

/* ==========================
   Hero
========================== */

.hero h1{

    animation:fadeUp .8s;

}

.hero p{

    animation:fadeUp 1.2s;

}

.hero .btn{

    animation:fadeUp 1.5s;

}

/* ==========================
   Cards Delay
========================== */

.cards .card:nth-child(1){

    animation:fadeUp .6s;

}

.cards .card:nth-child(2){

    animation:fadeUp .8s;

}

.cards .card:nth-child(3){

    animation:fadeUp 1s;

}

.cards .card:nth-child(4){

    animation:fadeUp 1.2s;

}

/* ==========================
   Smooth Scroll
========================== */

html{

    scroll-behavior:smooth;

}

/* ==========================
   Appear On Scroll
========================== */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}