/* Classes de Alinhamento (Manter) */
.middle {
    margin-top: 20%;
}
@media (max-width: 768px) {
    .middle {
        margin-top: 0;
    }
}

/* Notificação (Manter) */
.tutorial-notification {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Prefira cores de tema do Bootstrap se possível, mas manter a cor atual é OK. */
    background: rgb(0, 75, 203);
    color: white;
    /* Use as classes de padding do Bootstrap (ex: p-3 no HTML) para evitar o 'padding: 15px', se preferir. */
    padding: 5px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Conteúdo da Notificação (Ajustar) */
/* Removi as regras 'display: flex', 'justify-content' e 'align-items' pois elas são cobertas pelas classes 'row d-flex align-items-center' no HTML. */
.tutorial-content {
    /* 'max-width: 1200px' e 'margin: 0 auto' é perfeito para centralizar o conteúdo dentro da notificação. */
    max-width: 2500px;
    margin: 0 auto;
    /* 'flex-wrap: wrap' é garantido pela classe 'row' do Bootstrap. */
}


/* Aumenta o tamanho do ícone 'x' */
.close-icon {
    /* Por padrão, o texto de notificação tem um tamanho de fonte,
       vamos sobrescrever o tamanho do 'x'.
       (Ajuste o valor '1.5rem' para o tamanho desejado) */
    font-size: 1.5rem; /* ~24px, tamanho maior que o texto padrão */
    font-weight: bold; /* Deixa o 'x' mais robusto/visível */
    line-height: 1;    /* Garante que o alinhamento vertical não seja afetado por espaços na linha */
    text-decoration: none; /* Remove o sublinhado, se houver */
}

/* Garante que o 'x' tenha um pequeno padding à direita
   para não colar na borda, se for o caso */
 .col-auto.ml-auto {
    padding-right: 15px;
}
/* Estilos de Botão (Manter) */
.btn-white {
    background-color: white;
    color: #000000;
}
.btn.btn-white:hover {
    background-color: white;
    color: #000000;
}