/* Centraliza a mandala e o título */
.wrapper-mandala {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

.titulo-mandala {
    font-family: var(--font-sans, sans-serif);
    color: #003366;
    margin-bottom: 25px;
    max-width: 800px;
}

.mandala-container {
    width: 100%;
    max-width: 750px; /* Ajuste o tamanho máximo que deseja que ela apareça */
    position: relative;
}

/* Força a imagem a ser responsiva */
.mandala-img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border: none;
}

/* Melhora o cursor ao passar nas áreas clicáveis */
area {
    cursor: pointer;
    outline: none;
}