

#custom-page h2, h3, h4, h5, p{
    color: #343436;
    font-family: 'Poppins', sans-serif;
}

#custom-page h1{color: #5070E3; font-family: 'Poppins', sans-serif;}
#custom-page h3{margin: 32px 0;}
#custom-page p{line-height: 28px;}

#custom-page, .controller-with{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;

}

#custom-page .steps-container {
    position: relative;
}

#custom-page .step-line {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #ddd;
    left: -17px;
    transform: translateX(-50%);
    z-index: -1;
}

#custom-page .steps {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 0;
    position: relative;
    z-index: 1;
}

#custom-page .step {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
    margin-bottom: 8px; /* Adicionado para espaço entre os blocos na versão desktop */
    opacity: 1; /* Alterado de 0 para 1 para tornar todas as etapas visíveis */
    transform: translateY(0); /* Alterado de 8px para 0 para tornar todas as etapas visíveis */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#custom-page .step-number {
    width: 48px;
    height: 48px;
    background-color: #5070E3;
    color: #fff;
    border-radius: 0 48px 48px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translateX(-36%);
    padding-left: 4px;
}



#custom-page .content {
    padding: 20px;
    margin-top: 48px;
}

#custom-page .content img {
    border-radius: 32px;
    margin: 24px 0;
    filter: drop-shadow(0px 13px 16px rgb(230, 230, 230));;
    height: 296px;
}

#imagem-e-mail{
    height: 520px; margin-top: 24px; border-radius: 32px; filter: drop-shadow(0px 13px 16px rgb(230, 230, 230));
}

@media screen and (max-width: 720px) {
    #custom-page .step-line{left: 0;}
    #custom-page .content img {height: auto!important; border-radius: 16px;}
    #imagem-e-mail{border-radius: 16px; height: auto!important;}
    .step-number {
        width: 72px!important;
    }

    #custom-page .step-number {padding-left: 12px;}
    
}  
