body{
    background-color: #000;
}
a{
    text-decoration: 0;
}
.automacao{
    width: 105vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
}
.titulo{
    font-size: 7vh;
    color: #fff;
}
.subtitulo{
    color: #0063CE;
    font-weight: lighter;
    margin-top: -5vh;
    font-size: 3vh;
}
.conteiner-automacao{
    background: linear-gradient(90deg, #0063CE 0%, #0063CE 25%, #343333 25%, #343333 100%);
    width: 105vh;
    height: 20vh;
    border-radius: 1vh;
    color: #fff;
    transition: all 0.5s ease-in-out;
    margin-top: 1vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.conteiner-automacao::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0063CE 0%, #0063CE 50%, #0063CE 100%);
    transition: all 0.5s ease-in-out;
    z-index: -1;
    border-radius: 1vh;
}

.conteiner-automacao:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.conteiner-automacao:hover::before {
    left: 0;
}

.titulo-automacao{
    display: flex;
    position: absolute;
    font-size: 4vh;
    margin-top: 5vh;
    margin-left: 35vh;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: color 0.5s ease-in-out;
}
.subtitulo-automacao{
    font-size: 2vh;
    margin-top: -3vh;
    margin-left: 35vh;
    color: #0063CE;
    font-weight: lighter;
    position: relative;
    z-index: 2;
    transition: color 0.5s ease-in-out;
}
.img-automacao{
    position: absolute;
    margin-left: 3vh;
    max-width:25vh;
    margin-top: -2vh;
    z-index: 2;
}
.botao-automacao{
    position: absolute;
    width: 15vh;
    height: 5vh;
    border-radius: 3vh;
    border: 0.3vh solid #0063CE;
    margin-left: auto;
    font-size: 2vh;
    font-weight: 600;
    background-color: transparent;
    color: #0063CE;
    margin-top: -7vh;
    margin-left: 85vh;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    cursor: pointer;
}

.conteiner-automacao:hover .botao-automacao{
    background-color: #0063CE;
    border: 0.3vh solid #fff;
    color: #fff;
}
.conteiner-automacao:hover .titulo-automacao{
    color: #ffffff;
}
.conteiner-automacao:hover .subtitulo-automacao{
    color: #ffffff;
    font-weight: 200;
}