@import url(styles.css);

.logo-wa{
    max-width: 33% !important;
}

.logo-app{
    max-width: 50% !important;
}

.txt-animado span{
    position: relative;
}

.bg-border{
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1rem;
}
.bg-border-primary{
    border: 1px solid rgba(197, 197, 197, 0.2);
    border-radius: 1rem;
}

.text-title{
    width: 75%;
}

.bg-pattern{
  background-image: url(../assets/img/pattern-wa.png);
}

.border-primary{
    border: 1px solid var(--bs-primary);
}

.btn-whatsapp{
    position:fixed;
    bottom:40px;
    right:40px;
    border-radius:50px;
    z-index:1000;
    margin-top:16px
}

@media (min-width: 1100px) {
    
    .txt-animado span::before{
        content: "";
        color: var(--bs-primary);
        border-bottom: solid 2px var(--bs-primary);
        animation: words 20s infinite;
    }

    .txt-animado strong{
        display: none !important;
    }

    .txt-animado span::after{
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px solid var(--bs-primary);
    right: -10px;
    opacity: 1;
    animation: cursor 0.8s infinite, typing 20s steps(15) infinite;
    width: calc(100% + 18px);
    background-color: var(--bs-light);
    background-image: url(../assets/img/overlay.png);

}
}

/* 
.txt-animado h1::before{
    content: "";
    color: var(--bs-primary);
    animation: word 20s infinite;
} */

@keyframes words {
    0%,20%{
        content: "Sistemas que apoiam a sua gestão";
    }
    21%,40%{
        content: "Que impulsionam a sua equipe";
    }
    41%,60%{
        content: "Revolucionando o seu negócio";
    }
    61%,80%{
        content: "Personalizados para sua empresa";
    }
    81%,100%{
        content: "Conheça a WA Port Systems";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }

    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 18px);
    }
}

@keyframes cursor{
    0%{
        border-left: 2px solid var(--bs-light);
    }

}