/*==================================================
               01 Global Transition
==================================================*/

/*==================================================
TOPCABS ANIMATIONS
==================================================*/

:root{

--animate-fast:.25s ease;

--animate:.35s ease;

--animate-slow:.5s ease;

}


/*==================================================
                    02 Fade Up
==================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}


/*==================================================
                    03 Fade Left
==================================================*/

.fade-left{

opacity:0;

transform:translateX(-50px);

transition:.8s;

}

.fade-left.show{

opacity:1;

transform:none;

}

/*==================================================
                    04 Fade right
==================================================*/

.fade-right{

opacity:0;

transform:translateX(50px);

transition:.8s;

}

.fade-right.show{

opacity:1;

transform:none;

}

/*==================================================
                        05 Zoom
==================================================*/

.zoom{

opacity:0;

transform:scale(.9);

transition:.8s;

}

.zoom.show{

opacity:1;

transform:scale(1);

}


/*==================================================
                    06 Hover Lift
==================================================*/

.tc-card{

transition:.35s;

}

.tc-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}


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

.tc-icon{

transition:.35s;

}

.tc-card:hover .tc-icon{

transform:rotate(8deg) scale(1.1);

}


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

.image-box{

overflow:hidden;

border-radius:18px;

}

.image-box img{

transition:.5s;

}

.image-box:hover img{

transform:scale(1.08);

}



/*==================================================
                 09 Button Animation
==================================================*/

.tc-btn{

transition:.35s;

}

.tc-btn:hover{

transform:translateY(-3px);

}




/*==================================================
                    10 Underline Animation
==================================================*/

.nav-links a{

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--tc-primary);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}



/*==================================================
                Extra TOPCABS ANIMATIONS
==================================================*/