body, html {
    background-color: #181818 !important;
}

    .gradient-text {
        position: relative;
        color: transparent; /* Torna o texto transparente para mostrar o gradiente por trás */
    }
    
    .gradient-text::after {
        content: "Criatividade e Precisão: O Coração do Nosso Design UI/UX"; /* Necessário para criar o elemento pseudo ::after */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1; /* Coloca o gradiente atrás do texto */
        background-image: -webkit-linear-gradient(0deg, #ddd1fb, #BAADDB, #D8A0FE);
        -webkit-background-clip: text; /* Para compatibilidade com navegadores WebKit (Safari/Chrome) */
        background-clip: text; /* Faz o gradiente aparecer apenas onde o texto está */
        background-size: 200% 100%; /* Ajusta o tamanho do gradiente */
        -webkit-animation: gradientAnimation 5s linear infinite; /* Definindo a animação */
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }

@media screen and (min-width:768px) {
    /* Estilizando o texto com gradiente */
    .gradient-text-web-design {
        position: relative;
        color: transparent; /* Torna o texto transparente para mostrar o gradiente por trás */
    }

    .gradient-text-web-design::after {
        content: "Web Design"; /* Necessário para criar o elemento pseudo ::after */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2; /* Coloca o gradiente na frente do texto */
        background-image: -webkit-linear-gradient(0deg, #EF552C, #d300ff, #00ffff);
        -webkit-background-clip: text; /* Para compatibilidade com navegadores WebKit (Safari/Chrome) */
        background-clip: text; /* Faz o gradiente aparecer apenas onde o texto está */
        background-size: 200% 100%; /* Ajusta o tamanho do gradiente */
        -webkit-animation: gradientAnimation 5s linear infinite; /* Definindo a animação */
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }

    .gradient-text-web-design-2 {
        position: relative;
        color: transparent; /* Torna o texto transparente para mostrar o gradiente por trás */
        }

    .gradient-text-web-design-2::after {
        content: "o que é Web Design"; /* Necessário para criar o elemento pseudo ::after */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2; /* Coloca o gradiente na frente do texto */
        background-image: -webkit-linear-gradient(0deg, #EF552C, #d300ff, #00ffff);
        -webkit-background-clip: text; /* Para compatibilidade com navegadores WebKit (Safari/Chrome) */
        background-clip: text; /* Faz o gradiente aparecer apenas onde o texto está */
        background-size: 200% 100%; /* Ajusta o tamanho do gradiente */
        -webkit-animation: gradientAnimation 5s linear infinite; /* Definindo a animação */
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }

    .gradient-text-presenca {
        position: relative;
        color: transparent; /* Torna o texto transparente para mostrar o gradiente por trás */
    }

    .gradient-text-presenca::after {
        content: "presença online";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-image: -webkit-linear-gradient(0deg, #EF552C, #d300ff, #00ffff);
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 200% 100%;
        -webkit-animation: gradientAnimation 5s linear infinite;
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }

/* Definindo a animação */
    @-webkit-keyframes gradientAnimation {
        0% {
            background-position: 0% 0; /* Começa fora da tela à esquerda */
        }
        100% {
            background-position: 100% 0; /* Termina fora da tela à direita */
        }
    }

    .box {
        animation-duration: 35s;
        animation-iteration-count: infinite;
        transform-origin: bottom;
    }
    .bounce-3 {
        animation-name: bounce-3;
        animation-timing-function: ease;
    }
    @keyframes bounce-3 {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-100px); }
        50%  { transform: translateY(0); }
        100% { transform: translateY(0); }
    }
}
  
  /* Definindo a animação */
    @-webkit-keyframes gradientAnimation {
        0% {
            background-position: 0% 0; /* Começa fora da tela à esquerda */
        }
        100% {
            background-position: 100% 0; /* Termina fora da tela à direita */
        }
    }

    .box {
        animation-duration: 35s;
        animation-iteration-count: infinite;
        transform-origin: bottom;
    }
    .bounce-3 {
        animation-name: bounce-3;
        animation-timing-function: ease;
    }
    @keyframes bounce-3 {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-100px); }
        50%  { transform: translateY(0); }
        100% { transform: translateY(0); }
    }