:root {
    --animation-duration-1: 1s;
    --animation-delay-05: 0.5s;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.header,
html {
    animation-name: fade-in;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
    animation-delay: var(--animation-delay-05);
}

@keyframes slide-in {
    0% {
        transform: translateY(-1.25rem);
    }

    100% {
        transform: translateY(0);
    }
}

.navbar ul {
    animation-name: slide-in;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.section-intro,
.section-imagens,
.section-content {
    animation-name: zoom-in;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
    animation-delay: var(--animation-delay-05);
}

@keyframes fade-in-benefits {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(1.25rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-menu {
    0% {
        opacity: 0;
        transform: translateX(-1.25rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.menu-item {
    animation-name: slide-in-menu;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
    animation-delay: var(--animation-delay-05);
}

@keyframes fade-in-title {
    0% {
        opacity: 0;
        transform: translateY(-20rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-intro h1,
.section-content h2 {
    animation-name: fade-in-title;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
}

@keyframes zoom-in-image {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.section-imagens .imagem {
    animation-name: zoom-in-image;
    animation-duration: var(--animation-duration-1);
    animation-fill-mode: both;
    animation-delay: var(--animation-delay-05);
}

@keyframes fade-in-paragraph {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animation {
    animation-duration: var(--animation-duration);
    animation-fill-mode: both;
    animation-delay: var(--animation-delay);
}

.fade-in {
    animation: fade-in var(--animation-duration) both;
}

.slide-in {
    animation: slide-in var(--animation-duration) both;
}

.zoom-in {
    animation: zoom-in var(--animation-duration) both;
}

.carrosel {
    width: 37.5rem;
    height: 15.625rem;
    outline: 0.1875rem solid black;
    overflow: hidden;
    margin: auto;
    box-shadow: 0.625rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.7);
}

.carrosel ul {
    display: flex;
    list-style: none;
    width: 112.5rem;
    height: 15.625rem;
}

.carrosel ul li img {
    width: 37.5rem;
    height: 15.625rem;
    pointer-events: none;
}

.carrosel li {
    position: relative;
    animation: slide 25s infinite ease-out;
    background-color: black;
}

@media (max-width: 37.5rem) {
    .carrosel ul li img {
        width: 12.5rem;
        height: 12.5rem;
    }

    .carrosel ul {
        width: 50rem;
        height: 15.625rem;
    }

    .carrosel {
        width: 12.5rem;
        height: 12.5rem;
    }

    .carrosel li {
        position: relative;
        animation: slideMobile 25s infinite ease-out;
    }
}

@keyframes slide {
    0% {

        left: 0rem;
    }

    20% {
        left: 0rem;
    }

    25% {
        left: -37.5rem;
    }

    45% {
        left: -37.5rem;
    }

    50% {
        left: -75rem;
    }

    70% {
        left: -75rem;
    }

    75% {
        left: -112.5rem;
    }

    95% {
        left: -112.5rem;
    }

    100% {
        left: 0rem;
    }
}

@keyframes slideMobile {
    0% {

        left: 0rem;
    }

    20% {

        left: 0rem;
    }

    25% {

        left: -12.5rem;
    }

    45% {

        left: -12.5rem;
    }

    50% {

        left: -25rem;
    }

    70% {

        left: -25rem;
    }

    75% {

        left: -37.5rem;
    }

    95% {

        left: -37.5rem;
    }

    100% {

        left: 0rem;
    }
}