/*======================================
 KEYFRAMES
======================================*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes floatImage{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

@keyframes shine{
    100%{
        left:150%;
    }
}

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

.hero-text{
    animation:fadeLeft 1s ease;
}

.hero-image{
    animation:fadeRight 1s ease;
}

.hero-image img{
    animation:floatImage 5s ease-in-out infinite;
}

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

.btn{
    position:relative;
    overflow:hidden;
}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn:hover::before{
    animation:shine .8s;
}

/*======================================
 CARD EFFECT
======================================*/

.card{

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

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

.hero-image{

    overflow:hidden;

    border-radius:24px;

}

.hero-image img{

    transition:.6s;

}

.hero-image:hover img{

    transform:scale(1.05);

}

/*======================================
 SCROLL REVEAL
======================================*/

.reveal{
    opacity:1;
    transform:none;
}

/*======================================
 SECTION TITLE
======================================*/

.section-title{

    animation:fadeUp .8s ease;

}

/*======================================
 LINK HOVER
======================================*/

.nav-links a{

    transition:.3s;

}

.nav-links a:hover{

    transform:translateY(-2px);

}

/*======================================
 LOGO
======================================*/

.logo{

    transition:.35s;

}

.logo:hover{

    transform:scale(1.05);

}

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

img{

    transition:.5s;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef6f6;

}

::-webkit-scrollbar-thumb{

    background:#096F74;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2A346F;

}

/*======================================
 TEXT SELECTION
======================================*/

::selection{

    background:#096F74;

    color:#fff;

}