.mobile-menu-icon {
    display: none;
    

}

.mobile-menu {
    display: none;
    
}


@media screen and (max-width: 730px) {

    body {
        margin: 0;
        padding: 0;
    }

    .nav-bar {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 6rem;
    }

    header {
        background-color: #EF7F1B;
        width: 100%;
    }

    .logo {
        display: flex;
        position: relative;
        margin-top: -73%;
        margin-left: 20.5%;
        height: 60%;
        width:  60%;
    }

    .branco-central {
        position: relative;
        margin-top: -35%;
        height: 80vw;
        width: 80%;
        border-radius: 50%;
        background-color: #ffffff;
        margin-left: 10%;
    }


    .img-centrotrio {
        position: relative;
        top: -3vw;
        margin-left: 32vw;
        height: 40vw;
        
    }

    .imglado-trio1 {
        position: relative;
        top: 33vw;
        left: 10vw;
        height: 28vw;

    }

    .imglado-trio2 {
        position: relative;
        top: 34vw;
        left: 33.5vw;
        height: 28vw;
    }
    
    
    #segundo-titulo {
        margin-top: -5vw;
        position: relative;
        margin-bottom: 1.5%;
        font-size: 2.93vh;
        align-self: center;
        text-align: center;
        right: 0.3rem;
        color: #F2FDFF;
    }

    .nav-bar {
        padding: 1.5rem 4rem;
    }
    .nav-item {
        display: none;
    }
    .login-button {
        display: none;
    }
    .mobile-menu-icon {
        display: block;
    }
    .mobile-menu-icon button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        
    }
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
    }
    .mobile-menu .nav-item {
        display: block;
        padding-top: 1.2rem;
    }
    .mobile-menu .login-button {
        display: block;
        padding: 1rem 2rem;
    }
    .mobile-menu .login-button button {
        width: 100%;
    }
    
    .open {
        display: block;
    }

    /* permanecer o max-height pois delimita a imagem no mobile para não ficar esticada*/

    .img-fundo {
        max-height: 14.5rem;
        width: 100%;
    }

    .titulo {
        position: relative;
        text-align: justify;
        top: -5vw;
        font-size: 2.8vh;
        font-weight: 700;
        color: var(--Preto, #2B2A28);
        font-family: Bahnschrift;
        margin-right: rem;
    }

    #primeiro-titulo {
        position: relative;
        text-align: center;
        top: -1vw;
        font-size: 2.7vh;
        font-weight: 700;
        color: var(--Preto, #F2FDFF);
        font-family: Bahnschrift;
        margin-right: rem;
    }

    .primeiro-texto {
        position: relative;
        top: -100vw;
        font-size: 2vh;
        font-weight: 425;
        color: var(--Preto, #2B2A28);
        text-align: justify;
        font-family: Bahnschrift;
        margin-inline: 2rem;
        text-indent: 1rem;
    }

    #terceiro-titulo {
        top: -5vw;
        position: relative;
        text-align: justify;
        font-size: 2.93vh;
        font-weight: 700;
        color: var(--Preto, #2B2A28);
        font-family: Bahnschrift;
    }

    .texto-solto {
        margin-top: 40vw;
        position: relative;
        top: auto;
        font-size: 2vh;
        font-weight: 425;
        color: var(--Preto, #2B2A28);
        text-align: justify;
        font-family: Bahnschrift;
        margin-inline: 2rem;
        text-indent: 1rem;
        margin-bottom: 10vw;
    }

    .texto1 {
        top: 20vw;
        position: relative;
        font-size: 2vh;
        font-weight: 425;
        color: var(--Preto, #2B2A28);
        text-align: justify;
        font-family: Bahnschrift;
        margin-inline: 2rem;
        text-indent: 1rem;
    }

    .texto2 {
        position: relative;
        top: -10vh;
        font-size: 2vh;
        font-style: normal;
        font-weight: 420;
        line-height: normal;
        color: var(--Preto, #2B2A28);
        text-align: justify;
        font-family: Bahnschrift;
        margin-inline: 2rem;
        text-indent: 1rem;
    }

    .texto3 {
            position: relative;
            top: -15vh;
            font-size: 2vh;
            font-style: normal;
            font-weight: 420;
            line-height: normal;
            color: var(--Preto, #2B2A28);
            text-align: justify;
            font-family: Bahnschrift;
            margin-inline: 2rem;
            text-indent: 1rem;
        }

    .texto4 {
        position: relative;
            top: -40vw;
            font-size: 0.7vh;
            font-style: normal;
            font-weight: 500;
            font-family: Bahnschrift;
            line-height: normal;
            color: var(--Preto, #2B2A28);
            text-align: justify;
            font-family: Bahnschrift;
            margin-inline: 2rem;
        }

    .titulo1 {
        position: relative;
        margin-top: 25vw ;
        font-size: 2.93vh;
        font-weight: 700;
        color: var(--Preto, #2B2A28);
        font-family: Bahnschrift;
    }

    .localtexto {
        position: relative;
        top: 11vh;
    }

    .texto-bolinha {
        position: relative;
        top: 60vh;
        font-weight: 400;
        background-color: #EF7F1B;
        height: 95vw;
        width: 95vw;
        border-radius: 50%;
        left: 1.2vh;
    }

    .texto-da-bolinha {
        text-align: center; /* Centraliza o texto */
        max-width: 37vh; /* Define a largura máxima do contêiner */
        margin: 0 auto; /* Centraliza o contêiner horizontalmente */
        font-size: 3vw;
        font-family: Bahnschrift;  
        color: #F2FDFF;

    }

           /* Estilos para a lista */
    .lista {
        top: 1vw;
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 39vw );
        gap: 1vw;
        font-weight: 420;

    }
    
    /* Estilos para cada item da lista */
    .lista li {
        padding: 0 1% 1% 20%;
        position: relative;
        text-align: justify;
        word-wrap: break-word; /* Adicionado para quebrar o texto */
        right: 3vw;
        top: 10vw;
        font-size: 1.7vh;
    }

    /* Estilos para o ícone ao lado do texto */
    .lista li::before {
        content: ""; /* Conteúdo vazio para o ícone */
        display: block;
        position: absolute;
        left: 7%; /* Distância do ícone em relação ao texto */
        top: 35%; /* Alinhamento vertical */
        transform: translateY(-50%); /* Alinhamento vertical */
        background-color: #EF7F1B; /* Cor de fundo laranja */
        border-radius: 0.27rem; /* Cantos arredondados */
        width: 13px; /* Largura do ícone */
        height: 13px; /* Altura do ícone */
    }
    
    /*.circulogg {
        position: relative;
        top: -50vw; 
        height: 97vw;
        width: 97vw;
        border-radius: 50%;
        background-color: #EF7F1B;
        left: .8vh;
        z-index: 1;
    }*/

    #grafico {
        display: none;
    }


    .circulog {
        position: relative;
        top: -36vh;
        height: 2vh;
        width: 2vh;
        border-radius: 50%;
        background-color: #EF7F1B;
        left: 42vh;
    }
   
    .circulom {
        position: relative;
        top: -43vh;
        height: 5.5vh;
        width: 5.5vh;
        border-radius: 50%;
        background-color: #EF7F1B;
        left: 5vh;
    }
    
    .circulop {
        position: relative;
        top: 13vh;
        height: 7vh;
        width: 7vh;
        border-radius: 50%;
        background-color: #EF7F1B;
        margin-left: 3vh;
    }

    .circulopp {
        position: relative;
        top: 15vh;
        height: 2.5vh;
        width: 2.5vh;
        border-radius: 50%;
        background-color: #EF7F1B;
        left: 41vh;
    }

    .circuloexp {
        position: relative;
        top: 17vh;
        height: 1.5vh;
        width: 1.5vh;
        border-radius: 50%;
        background-color: #EF7F1B;
        left: 43vh;
    }

     /*Footer*/

     :root {
        --color-neutral-0: #0e0c0c;
        --color-neutral-10: #171717;
        --color-neutral-30: #a8a29e;
        --color-neutral-40: #f5f5f5;
    
    }
    
    * {
        font-family: 'Inter', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        letter-spacing: 1px;
    }
    
    main {
        height: 1vh;
    }
    
    footer {
        width: 100%;
        color: var(--color-neutral-40);
    }
    
    .logobranca {
        position: relative;
        top: -5%;
        display: grid;
        display: flex;
    }

    .footer-link {
        text-decoration: none;
    }
    
    #footer_content {
        background-color: var(--color-neutral-10);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 3rem 3.5rem;
    }
    
    #footer_contacts h1 {
        margin-bottom: 0.75rem;

    }
    
    #footer_social_media {
        display: flex;
        gap: 2rem;
        margin-top: 1.5rem;
    } 
    
    #footer_social_media .footer-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        width: 2.5rem;
        color: var(--color-neutral-40);
        border-radius: 50%;
        transition: all 0.4s;
    }
    
    #footer_social_media .footer-link i {
        font-size: 1.25rem;    
    }
    
    #footer_social_media .footer-link:hover {
        opacity: 0.8;
    }
    
    #instagram {
        background: linear-gradient(#7f37c9, #ff2992, #ff9807);
    }
    
    #facebook {
        background-color: #4267b3;
    }
    
    #linkedin {
        background-color:  #0e76a8;
    }
    
    .footer-list {
        display: flex;
        flex-direction: column;
        gap: 0.70rem;
        list-style: none;
        font-size: 1.25rem;
    }


.sub-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Adiciona uma transição suave */
    margin-top: 1vh;
}

.sub-list.show {
    max-height: 1000px; /* Um valor grande para garantir que caiba todo o conteúdo */
}

.sub-list .footer-link {
    color: var(--color-neutral-30);
    transition: color 0.4s; /* Adiciona uma transição de cor suave */
}

.sub-list .footer-link:hover {
    color: #7f37c9;
}
    
    .footer-list .footer-link {
        color: var(--color-neutral-30);
        transition: all 0.4s;
    }
    
    .footer-list .footer-link:hover {
        color: #7f37c9;
    }

    .footer-link2 {
        font-size: 1.5vh;
        word-wrap: break-word; /* Adicionado para quebrar o texto */
        
    }
    
    #footer_email a.footer-link2 {
        color: #EF7F1B;
        text-decoration: none; /* Remove o sublinhado */
    }
    
    #footer_email a.footer-link2:hover {
        color: #ff9807;
        text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse por cima, se desejado */
    }
    
    .whatsapp-link {
        color: #25d366; /* Cor verde padrão do WhatsApp */
        text-decoration: none; /* Remover sublinhado */
      }
      
    
    #input_group {
        display: flex;
        align-items: center;
        background-color: var(--color-neutral-0);
        border-radius: 4px;
    }
    
    #input_group input {
        all: unset;
        padding: 0.75rem;
        width: 100%;
    }

    
    #input_group button {
        background-color: #7f37c9;
        border: none;
        color: var(--color-neutral-40);
        padding: 0px 1.25rem;
        font-size: 1.125rem;
        height: 100%;
        border-radius: 0px 4px 4px 0px;
        cursor: pointer;
        transition: all 0.4s;
    }
    
    #input_group button:hover {
        opacity: 0.8;
    }
    
    #footer_copyright {
        display: flex;
        justify-content: center;
        background-color: var(--color-neutral-0);
        font-size: 1rem;
        padding: 1.5rem;
        font-weight: 100;
    }
    
    @media screen and (max-width: 768px) {
        #footer_content {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
    }
    
    @media screen and (max-width: 426px) {
        #footer_content {
            grid-template-columns: repeat(1, 1fr);
            padding: 3rem 2rem;
        }
    }


}