
/* Maintainance Benefits*/

.text-container {
    width: calc(100vw - 16px);
    height: 50vh;
    font-weight: bold;
    font-size: 24px;
    position: relative;
    overflow: hidden;
    padding-top: 15px;
}

.text-container > div {
    animation: come2life linear 10s infinite;
    transform-origin: center center;
    opacity: 0;
    position: absolute;
    backface-visibility: hidden;
}

.text-container > div:nth-child(1) {
  color: #084298;  
  left: 15vw;
    top: 15vh;
    animation-delay: 0s;
}

.text-container > div:nth-child(2) {
    color: #bc8e05;
    left: 22.5vw;
    top: 5vh;
    animation-delay: 4s;
}

.text-container > div:nth-child(3) {
    color: #bc8e05;
    left: 7.5vw;
    top: 25vh;
    animation-delay: 10s;
}

.text-container > div:nth-child(4) {
    color: #bc8e05;
    left: 17.5vw;
    top: 20vh;
    animation-delay: 6s;
}

.text-container > div:nth-child(5) {
    color: #bc8e05;  
    left: 10vw;
    top: 25vh;
    animation-delay: 2s;
}

@keyframes come2life {
    0% {
        transform: scale3d(0,0,1) rotate(0.02deg);
        opacity: 0;
        filter: blur(10px);
    }
    25% {
        transform: scale3d(1,1,1) rotate(0.02deg);
        opacity: 1;
        filter: blur(0px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }

    80% {
      opacity: 0;
    }
  
    100% {
        transform: scale3d(4,4,1) rotate(0.02deg);
        filter: blur(10px);
    }
}

@media (max-width: 62em) {
  .text-container {
    width: calc(100vw - 16px);
    height: 50vh;
    font-weight: bold;
    font-size: 24px;
    position: relative;
    overflow: hidden;
}

.text-container > div {
    animation: come2life linear 10s infinite;
    transform-origin: center center;
    opacity: 0;
    position: absolute;
    backface-visibility: hidden;
}

.text-container > div:nth-child(1) {
  color: rgb(8, 66, 152);  
  left: 15vw;
    top: 15vh;
    animation-delay: 0s;
}

.text-container > div:nth-child(2) {
    color: #bc8e05;
    left: 22.5vw;
    top: 5vh;
    animation-delay: 4s;
}

.text-container > div:nth-child(3) {
    color: #bc8e05;
    left: 7.5vw;
    top: 25vh;
    animation-delay: 8s;
}

.text-container > div:nth-child(4) {
    color: #bc8e05;
    left: 17.5vw;
    top: 20vh;
    animation-delay: 6s;
}

.text-container > div:nth-child(5) {
    color: #bc8e05;  
    left: 10vw;
    top: 25vh;
    animation-delay: 2s;
}

}