.aplicativos{
    display: flex;
    background-color: #355583;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.coluna-apps{
    font-family: "Noto Sans", sans-serif;
    width: 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-app-cliente{
    width: 75%;
    color: #ffffff;
}

.container-app-cliente h1, .container-app-cliente h2{
    font-size: 1.8rem;
}

.divisoria-apps{
    background-color:#f88d2f;
    height: .5px;
    width: 40%;
    margin-top: 10px;
    margin-bottom: 40px;
}


                                    /*   APP CLIENTE BIGFIBRA   */

.link-app-cliente, .link-app-bigfibra-play{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}


#video-app{
    height: 100vh;
}

.loja-apps{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    border: none;
    color: #355583;
    scale: 1.2;
    border: 1px #ffffff solid;
    background-color: #ffffff;
    padding: 10px 25px 10px 25px;
    border-radius: 10px;
    transition: .3s linear;
    font-weight: bold;
    
}

.loja-apps i{
    margin-right: 5px;
}

.loja-apps:hover {
    background-color: transparent;
    color: #f88d2f;
    border: 1px #f88d2f solid;
}

                                            /*   APP BIGFIBRA PLAY   */

.container-bigfibra-play{
    width: 75%;
}

.bigfibra-play{
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagem-app{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vh;
    width: 25vh;
}

.imagem-app img {
    height: 18vh;
    width: 18vh;
}

.descricao-app{
    padding-left: 20px;
    color: #ffffff;
}

.descricao-app p{
    padding-top: 10px;
}

.descricao-app h1{
    font-size: 1.7rem;
}

#canais-laranja{
    color: #f88d2f;
}

@media (max-width: 480px) {
    .aplicativos {
        padding: 10px;
    }

    .coluna-apps {
        margin-bottom: 15px;
    }

    .container-app-cliente, 
    .container-bigfibra-play {
        width: 100%;
    }

    .link-app-cliente, 
    .link-app-bigfibra-play {
        flex-direction: row; /* Mantém os botões lado a lado */
        gap: 0px; /* Espaço entre os botões */
        justify-content: center; /* Centraliza os botões */
        flex-wrap: wrap; /* Permite que os botões "quebrem" linha se necessário */
        padding: 20px 0px;
    }

    .loja-apps {
        width: 80%; /* Cada botão ocupa 45% da largura, com espaço para o gap */
        padding: 8px; /* Ajusta o espaçamento interno */
        font-size: 0.8rem; /* Reduz o tamanho do texto */
    }

    .descricao-app h1 {
        font-size: 1.2rem;
    }

    .descricao-app p {
        font-size: 0.9rem;
    }

    .imagem-app img {
        height: 12vh;
        width: 12vh; 
    }

    #video-app {
        width: 100%;
        height: auto;
    }
}


@media (max-width: 1020px) {
    .aplicativos {
        flex-direction: column; /* Empilha as colunas */
        height: auto; /* Deixa o conteúdo adaptar à altura */
        padding: 20px; /* Ajusta o padding para menor espaço */
        padding-top: 20vh;
    }

    .coluna-apps {
        width: 100%; /* Ocupa toda a largura */
        margin-bottom: 20px; /* Espaço entre os elementos */
    }

    #video-app {
        height: auto; /* Ajusta o vídeo para não exceder o tamanho da tela */
        width: 80%; /* Garante que o vídeo fique proporcional */
    }

    .container-app-cliente, 
    .container-bigfibra-play {
        width: 90%; /* Reduz para melhor visualização no mobile */
        margin: 0 auto; /* Centraliza o conteúdo */
    }

    .loja-apps {
        padding: 8px 20px; /* Ajusta os botões para caberem no mobile */
        font-size: 0.9rem; /* Reduz o texto para melhor encaixe */
    }

    .descricao-app h1 {
        font-size: 1.4rem; /* Diminui o tamanho da fonte para encaixar melhor */
    }

    .imagem-app img {
        height: 15vh;
        width: 15vh; /* Reduz o tamanho da imagem no mobile */
    }
}