.minha-div {
    position: relative;
    width: 80%;        /* Define a largura para 80% da largura da tela */
    margin: 0 auto;    /* Margem automática para centralizar */
    padding-top:65px;
}

.meu-paragrafo {
    text-align: left;
    max-width: 600px; /* ou outra medida que prefira */
    
}


#navbar-example3 {
    position: fixed;
    max-height: 100vh; /* Altura máxima para garantir o scroll */
    max-height: 38rem;
    height: 100%;
    max-width: 320px;
    overflow-y: auto; /* Habilita a barra de rolagem vertical se necessário */
    border: 0px solid #1C1C1C;
    background-color: rgba(28, 28, 28);;
    padding: 10px;
}

.col-4 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
/* Estilização para garantir que a barra de navegação se ajuste ao conteúdo responsivamente */

@media (max-width: 1200px) { #navbar-example3 {width: 270px; } }
@media (max-width: 1150px) { #navbar-example3 {width: 260px;} }
@media (max-width: 1100px) { #navbar-example3 {width: 250px;} }
@media (max-width: 1050px) { #navbar-example3 {width: 240px;} }
@media (max-width: 1000px) { #navbar-example3 {width: 230px;} }
@media (max-width: 950px) { #navbar-example3 {width: 220px;} }
@media (max-width: 900px) { #navbar-example3 {width: 210px; } }
@media (max-width: 850px) { #navbar-example3 {width: 200px; } }
@media (max-width: 800px) { #navbar-example3 {width: 190px; height:1000px; } }
@media (max-width: 780px) { #navbar-example3 {width: 180px; height:1000px; } }
@media (max-width: 770px) { #navbar-example3 {width: 170px;  height:1000px;} }

@media (max-width: 730px) { /* botao lateral de visualização do guia */
     #navbar-example3 {
        width: 150px;  
        max-height: 70vh !important;
        top: 135px;
    }
    #guialateral {
        left: -180px;
        width: 7.5rem !important;
        z-index: 3 !important; 
        visibility: visible !important;
    }
    .col-8 {
        position: relative !important;
        top: 2rem;
        margin-left: 3rem;
        left: 0px !important;
    } 
    #botaolateral {
        visibility: visible;
    }
    }
    
    

@media (max-width: 992px) { /* Ajusta para telas menores */
    #navbar-example3 {
        max-height: 50vh; /* Ajusta a altura em telas menores */
    }
}
*/

.img-guia {
    width: 100%; /* ou qualquer largura desejada */
    max-width: 600px; /* um exemplo de largura máxima para a div */
    margin: auto; /* centraliza a div se a largura for menor que a largura da janela */
}

.img-guia img {
    width: 100%; /* faz a imagem se ajustar à largura da div */
    height: auto; /* mantém as proporções da imagem */
}

.botao-lateral {
    background-color: #fd7e14;
    color: white;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    text-align: center;
    display: block;
    position: fixed;
    z-index: 1;
    top: 50%;
    transition: 0.5s ease-in-out;
    left: 0px;
    line-height: 30px;
    visibility: hidden;
}

#guialateral {
    transition: 0.5s ease-in-out;
    position: absolute;
}

.col-8 {
    position: sticky;
    left: 50%;
}