body {
    background-color: #d2fba4; /* Cor de fundo */
    
    /* Imagens de fundo */
    background-image: url("../img/background_mind_map_left.png"), /* Imagem do lado esquerdo */
                      url("../img/background_mind_map_right.png"); /* Imagem do lado direito */
    
    /* Configurações adicionais */
    background-repeat: no-repeat, no-repeat; /* Não repetir as imagens */
    background-position: left top, right top; /* Posição das imagens */
    background-size: contain; /* Ajusta as imagens ao tamanho do contêiner */
    min-height: 100vh; /* Garante que o body ocupe toda a altura da viewport */
}

/* Geral */
.container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Imagens fluidas e largura máxima */
.img-fluid {
    max-width: 100%;
    height: auto;
}

.full_mind_map{
    padding: 3%;
}
/* Imagem do Mind Map */
.full_mind_map img {
    width: 100%;
    height: auto;
}

/* Flexibilidade nos balões */
.d-flex a {
    flex: 1;
    max-width: 33%;
}

/* Flexibilidade nas imagens de balões menores */
@media (max-width: 768px) {
    .d-flex a {
        max-width: 100%; /* Torna os balões em uma linha só em telas pequenas */
    }
}

/* Responsividade da imagem de referência */
.w-80 {
    width: 50%; /* Tamanho padrão para resoluções maiores */
    max-width: 600px; /* Limite máximo de largura */
    height: auto;
}

/* Ajuste para telas muito pequenas (abaixo de 576px) */
@media (max-width: 576px) {
    .w-80 {
        width: 90%; /* Aumenta ainda mais a largura em telas muito pequenas */
    }
}
/* Ajuste para telas menores (abaixo de 768px) */
@media (max-width: 768px) {
    .w-80 {
        width: 40%; /* Aumenta a largura para 70% em telas menores */

    }
}

/* Ajuste para telas menores (abaixo de 768px) */
@media (min-width: 768px) {
    .w-80 {
        width: 100%; /* Aumenta a largura para 70% em telas menores */
    }
}

/* Media query para telas menores (celulares) */
@media (max-width: 768px) {
    .container-content-mind-map {
      max-width: 550px
    }
  }

@media (min-width: 769px) {
    .container-content-mind-map {
      max-width: 670px
    }
  }

@media (min-width: 992px) {
    .container-content-mind-map {
      max-width: 720px
    }
  }

@media (min-width: 1200px) {
    .container-content-mind-map {
      max-width: 800px
    }
  }