* {
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

.banner h1 {
    animation: fadeInTop 2s ease;
}
/* 
.vendors {
    animation: fadeInRight 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

.banner .buttons .intern-btn {
    animation: fadeInTop 2s ease;
}

.banner .buttons .contact-btn {
    animation: fade 2s ease;
}

.asides h1 {
    animation: fadeInLeft 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 80%;
}

.services .service,
.contact-sec {
    animation: fadeInDown 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 80%;
}

section h1 {
    animation: fadeInLeft 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

.sec2 .desc {
    animation: fadeInRight 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

section:nth-of-type(odd) p {
    animation: fadeInRight 2s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
} */

@keyframes fadeInLeft {
    from {
        transform: translateX(-200px);
        opacity: 0;
    }

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

@keyframes fadeInTop {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }

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

@keyframes fadeInDown {
    from {
        transform: translateY(400px);
        opacity: 0;
    }

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

@keyframes fadeInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

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

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes grow {
    from {
        scale: 0;
    }

    to {
        scale: 1;
    }
}