@media (max-width: 768px) {

    /* Menu sanduíche com animação de deslizamento */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        overflow-y: auto;
        background-color: var(--navbar-bg);
        transform: translateX(-100%); /* Move o menu para fora da tela */
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Animação mais fluida */
        z-index: 1050;
        padding-top: 5rem;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    }

    /* Move o menu para dentro da tela ao adicionar a classe 'show' */
    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* Move o conteúdo principal para a direita quando o menu está aberto */
    #mainContent.menu-open {
        transform: translateX(250px); /* Move o conteúdo junto com o menu */
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Centralização da logo */
    .navbar-brand {
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Botão Sanduíche */
    .navbar-toggler {
        position: relative;
        z-index: 1100;
        color: white;
        border: none;
        font-size: 1.8rem;
        background: none;
        cursor: pointer;
        outline: none;
        box-shadow: none;
        margin: 10px 10px 10px 0;
        transition: transform 0.3s ease;
    }

    /* Remove borda e sombra ao clicar */
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none;
        box-shadow: none;
        background: none;
    }

    /* Estilo das linhas do botão sanduíche */
    .navbar-toggler span,
    .navbar-toggler span::before,
    .navbar-toggler span::after {
        display: block;
        width: 24px;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease;
        position: relative;
    }

    .navbar-toggler span::before,
    .navbar-toggler span::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease;
    }

    .navbar-toggler span::before {
        top: -8px;
    }

    .navbar-toggler span::after {
        top: 8px;
    }

    /* Transformação do botão em "X" */
    .navbar-toggler.active span {
        background-color: transparent;
    }

    .navbar-toggler.active span::before {
        transform: rotate(45deg);
        top: 2px;
    }

    .navbar-toggler.active span::after {
        transform: rotate(-45deg);
        top: 2px;
    }

    /* Organização e estilo dos links do menu */
    .navbar-nav {
        flex-direction: column;
        padding: 0;
        width: 100%;
    }

    .nav-item {
        width: 100%;
        padding: 0.8rem 1.5rem;
        margin-top: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .nav-item:hover {
        transform: translateX(10px); /* Desliza ao passar o mouse */
    }

    .nav-link {
        color: white;
        font-size: 1.1rem;
        text-decoration: none;
        padding-left: 1rem;
        display: flex;
        align-items: center;
        transition: color 0.3s;
    }

    .nav-link i {
        font-size: 1.4rem;
        margin-right: 1rem;
    }

    .nav-link:hover {
        color: var(--highlight-color);
    }

    /* Botão "Entrar" estilizado */
    .btn-entrar {
        display: block;
        width: calc(100% - 3rem);
        margin: 2rem auto;
        font-size: 1.1rem;
        color: white;
        background: none;
        border: 2px solid white;
        border-radius: 8px;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    .btn-entrar:hover {
        color: var(--highlight-color);
        background-color: rgba(255, 255, 255, 0.1);
    }
}


/* Contêiner do ícone de informação */
.info-container {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

/* Estilo do ícone de "info" */
.info-container .info-icon {
    font-size: 1.5rem; /* Tamanho do ícone */
    color: #cccccc; /* Cor cinza clara para um estilo discreto */
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Efeito hover sutil para o ícone */
.info-container .info-icon:hover {
    color: #ffffff; /* Ícone fica branco no hover */
}
/* Estilo para o botão de fechar do modal */
.close-icon {
    background: none;
    border: none;
    color: #ffffff; /* Cor do ícone de fechar */
    font-size: 1.5rem; /* Tamanho do ícone */
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Efeito hover para o ícone de fechar */
.close-icon:hover {
    color: #cccccc; /* Cor mais clara no hover */
}