/* ==========================================
   Firouze Design System
   Animations
========================================== */

.hvr-fade{
    transform:perspective(1px) translateZ(0);
    overflow:hidden;
    transition:.3s;
}

.hvr-fade:hover,
.hvr-fade:focus,
.hvr-fade:active{
    background:var(--color-primary);
    color:var(--color-white)!important;
}

.hvr-underline-from-center{
    display:inline-block;
    position:relative;
    overflow:hidden;
}

.hvr-underline-from-center::before{
    content:"";
    position:absolute;
    left:51%;
    right:51%;
    bottom:0;
    height:2px;
    background:var(--color-primary);
    transition:.3s;
}

.hvr-underline-from-center:hover::before{
    left:0;
    right:0;
}

.hvr-underline-from-center2{
    display:inline-block;
    position:relative;
    overflow:hidden;
}

.hvr-underline-from-center2::before{
    content:"";
    position:absolute;
    left:51%;
    right:51%;
    bottom:0;
    height:1px;
    background:var(--color-primary);
transition:
left .8s cubic-bezier(.22,.61,.36,1),
right .8s cubic-bezier(.22,.61,.36,1);
}

.hvr-underline-from-center2:hover::before{
    left:0;
    right:0;
}

.hovericon:hover,
.hovericon:hover i,
.hovericon:hover svg{
   color:var(--color-gold)!important;
}