/* ==========================================
   GLOBAL TRANSITIONS
========================================== */

*{
    transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}


/* ==========================================
   FADE IN
========================================== */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* ==========================================
   FADE UP
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   FADE DOWN
========================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   ZOOM IN
========================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ==========================================
   FLOAT
========================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ==========================================
   HERO
========================================== */

.hero-text{

    animation:fadeUp 1s ease;

}

.hero-image{

    animation:zoomIn 1.2s ease;

}

.hero-image img{

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

}


/* ==========================================
   PAGE HERO
========================================== */

.page-hero{

    animation:fadeIn 1s ease;

}


/* ==========================================
   CARDS
========================================== */

.card{

    animation:fadeUp .8s ease;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 18px 40px rgba(37,99,235,.15);

}


/* ==========================================
   BUTTON
========================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn:active{

    transform:scale(.98);

}


/* ==========================================
   IMAGE
========================================== */

img{

    transition:transform .5s ease;

}

img:hover{

    transform:scale(1.03);

}


/* ==========================================
   NAVIGATION
========================================== */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}


/* ==========================================
   INPUT
========================================== */

input,
textarea{

    transition:.3s;

}

input:focus,
textarea:focus{

    transform:translateY(-2px);

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15);

}


/* ==========================================
   CTA
========================================== */

.cta{

    animation:fadeUp 1s ease;

}


/* ==========================================
   FOOTER
========================================== */

.footer{

    animation:fadeIn 1s ease;

}


/* ==========================================
   SMOOTH APPEAR
========================================== */

.section{

    animation:fadeUp .8s ease;

}


/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}