.hero h1.aos {
    animation: zoomin 1s ease 1 forwards;
}

.hero h1.aos::after {
    animation: linefull 1s ease 0.5s 1 forwards;
}

.hero p.aos {
    animation: zoomin 1s ease 1 forwards;
}

@keyframes linefull {
    0% {
        width: 0;
    }

    100% {
        width: 80%;
    }
}

/* Services */
.service-number.aos {
    animation: swirl-rotate 1s ease 1 forwards;
}

.service-icon-small.aos {
    animation: swirl-rotate-left 1s ease 1 forwards;
}

.service-text h3.aos {
    animation: text-in-expand 1s ease 1 forwards;
}

.service-text p.aos {
    animation: fadeupp 1s ease 1 forwards;
}

.tech-stack.aos {
    animation: fadeupp 1s ease 0.2s 1 forwards;
}

.service-features li.aos {
    animation: fadeleft 1s ease 1 forwards;
}

.service-features li:nth-child(2) {
    animation-delay: 0.1s;
}

.service-features li:nth-child(3) {
    animation-delay: 0.2s;
}

.service-features li:nth-child(4) {
    animation-delay: 0.3s;
}

.service-image-right.aos {
    animation: slide-in-right-fwd 1.2s ease 1 forwards;
}

.service-image-left.aos {
    animation: slide-in-left-fwd 1.2s ease 1 forwards;
}

@keyframes swirl-rotate {
    from {
        rotate: -540deg;
        scale: 0;
        opacity: 0;
    }

    to {
        rotate: 0deg;
        scale: 1;
        opacity: 1;
    }
}

@keyframes swirl-rotate-left {
    from {
        translate: -150px 0px;
        rotate: -540deg;
        scale: 0;
        opacity: 0;
    }

    to {
        translate: 0px 0px;
        rotate: 0deg;
        scale: 1;
        opacity: 1;
    }
}

@keyframes text-in-expand {
    0% {
        letter-spacing: -.5em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeupp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slide-in-right-fwd {
    0% {
        transform: translateX(1000px) scaleX(2.5) scaleY(.2);
        transform-origin: 0 50%;
        filter: blur(40px);
        opacity: 0
    }

    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-left-fwd {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(.2);
        transform-origin: 0 50%;
        filter: blur(40px);
        opacity: 0
    }

    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1
    }
}