.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in.active{opacity:1;transform:translateY(0)}.delay-200{transition-delay:.2s}.delay-400{transition-delay:.4s}.delay-600{transition-delay:.6s}.delay-800{transition-delay:.8s}.btn{overflow:hidden;position:relative}.btn:after{background:hsla(0,0%,100%,.5);border-radius:100%;content:"";height:5px;left:50%;opacity:0;position:absolute;top:50%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%;width:5px}.btn:hover:after{animation:ripple 1s ease-out}@keyframes ripple{0%{opacity:.5;transform:scale(0)}to{opacity:0;transform:scale(20)}}.service-card{overflow:hidden;position:relative;z-index:1}.service-card:before{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.1) 0,rgba(var(--color-primary-rgb),0) 100%);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateY(100%);transition:transform .6s ease-out;z-index:-1}.service-card:hover:before{transform:translateY(0)}.portfolio-image:after{background-color:rgba(0,0,0,.3);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.portfolio-item:hover .portfolio-image:after{opacity:1}.header.scrolled{background-color:hsla(0,0%,100%,.95);box-shadow:0 5px 15px rgba(0,0,0,.1)}.menu-toggle.active span:first-child{transform:translateY(.8rem) rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:translateY(-.8rem) rotate(-45deg)}.nav-links.active{transform:translateX(0)}