/*=========================================== CARD BOX CSS ===========================================*/

.card-box{
    background:white;
    border-radius:16px;
    padding:25px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(0,0,0,0.03);
    will-change: transform;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s ease;
}

.card-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,0.12);
    border-color:rgba(79,70,229,0.2);
}

.card-box::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(79,70,229,0.08),transparent);
    transition:0.5s;
}

.card-box:hover::before{
    left:100%;
}

.card-box i{
    font-size:42px;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    padding-bottom:10px;
    display:inline-block;
    transition:0.3s ease;
}

.card-box:hover i{
    animation:bounceIcon 0.6s ease;
}

@keyframes bounceIcon{
    0%{transform:translateY(0);}
    30%{transform:translateY(-8px);}
    60%{transform:translateY(2px);}
    100%{transform:translateY(0);}
}