/*PADRONIZAÇÕES*/
*{
    font-family: 'Montserrat', sans-serif;
}
:root{

    --main-color: #9b28b9;
    --contrast-main-color: #d145e2;
    --dark-color: #431868;
    --palid-color: #AD65BF;
    --light-palid-color: #EEACFF;
    --main-text-color: #c033e4;
    --banner-color: #992FFD;






    --transicao-principal: 0.1s all linear;
    --bootstrap-primary: #007bff;
    --bootstrap-primary-light: #189BFF;
    --azul-principal: #1686d8;
    --azul-principal-drk: #0d569c;
    --azul-palido: #add2f0;
    --azul-pergunta: #409fe7;
    --azul-escuro: #003366;
    --bg-footer: #ddd ;
    --bg-footer-inside: #ddd;
    --branco: #fff;
    --preto: #000;
}
/*HEADER*/
.display_none{
    display:none;
}
.display_block{
    display:block;
}
.container_header{
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.logo_img{
    width: 150px;
}
a {
    text-decoration: none!important;
}
strong, rosa{
    color: var(--main-color)!important;
}
.menu_header{
    display:flex;
}   /*NAVBAR*/
    .menu_header li{
        margin-top: 17px;
        padding-top: 10px;
        padding-left:30px;
    }/*ITEMS DO NAVBAR*/
        .menu_header li a{
            font-size: 17px;
            font-weight: bold;
            color: var(--preto);
        }
        .menu_header li:hover *{
            color: var(--main-color);
        }
        .menu_header li::after,.icones-redes a::after, #submenu li a::after{
            margin-top: 10px;
            display:flex;
            content: " ";
            width: 0%;
            height: 3px;
            background-color: var(--main-color);
            transition: 0.1s all linear;
        }/*PSEUDO-DIV PARA OS HOVER*/
        .menu_header li:hover::after, .icones-redes a:hover::after, #submenu li a:hover::after{
            width: 100%;
        }
        .sub-menu-1{
            z-index: 1!important;
            display:none;
            font-weight: 300!important;
            background-color: var(--branco);
            box-shadow: 2px 2px 7px #999;
        }/*SUB-MENU NAVBAR*/
            .sub-menu-1 li{
                margin:0;
                padding:10px 10px!important;
            }
            .sub-menu-1 li a{
                font-size: 16px;
            }
            .sub-menu-1 li::after{
                margin-top:0;
                background-color: var(--main-color);
            }
            nav ul li:hover .sub-menu-1{
                display:block;
                position:absolute;
            }
            .icones-redes-mobile{
                z-index: 1;
                margin-bottom: 50px;
            }
.btn_cliente{
    transition: var(--transicao-principal);
    display:flex;
    align-items: center;
    padding: 15px;
    margin-top: 10px;
    margin-left: 40px;
    font-weight: 400;
    background-color: var(--azul-principal);
}/*BOTAO CLIENTE NAVBAR*/
    .btn_cliente a{
        margin-left: 3px;
        margin-top:4px; 
        color: var(--branco);
    }
    .btn_cliente a:hover{
        color: var(--branco);
    }
    .btn_cliente:hover{
        background-color: var(--azul-principal-drk);
    }
    .btn_cliente img{
        width:15px;
        color:var(--branco);
    }
.icones-redes{
    padding-left: 15px;
    display:flex;
}/*ICONES REDES SOCIAIS HEADER*/
    .icones-redes a{
        margin-right: 10px;
    }
    .icones-redes img{

        width: 30px;
    }
    .icones-redes a::after{
        background-color: var(--preto);
    }/*SOBRESAINDO ALTERACOES DO HOVER JA DEFINIDO*/
.dropdown-mobile, .navbar-mobile{
    display:none;
}
/*FOOTER*/
.bg-footer{
    background-color: var(--bg-footer);
}
.bg-footer-container{
    background-color: var(--bg-footer-inside);
}
.icones_fontawesome{
    width: 20px;
}
.icones_fontawesome_local{
    width: 17px;
}
.footer-links li{
    transition: var(--transicao-principal);
    padding: 5px;
    border: 1px solid #212529;
    margin: 3px;
    border-radius: 10px;
}
.footer-links-sub li{
    transition: var(--transicao-principal);
    margin-left:5px;
    padding:2px;
    border: #828c94 solid 1px;
    border-radius: 7px;
}
    .footer-links li:hover, .footer-links-sub li:hover{
        background-color: #ccc;
    }
    .footer-links li a, .footer-links-sub li a{
        color: #212529;
        font-size: 14px;
    }
    .redes-footer a{
        color:#212529;
    }
    .redes-footer a:hover{
        color:var(--main-text-color);
    }
/*BANNERS*/
    .container-banner{
        width: 100%;
    }
/*PLANOS DE INTERNET*/
.planos{
    border:1px solid #aaa;
    border-radius: 5px;
    margin: 7px;
}
.planos img{
    width: 50px;
}
.topo_plano{
    color: var(--branco);
    padding:15px 0px;
    display:flex;
    justify-content: center;
    background-color: var(--main-color);
}
.planos h1{
    margin: 0px;
}
.texto_fibra, .texto_fibra_300mb{
    padding:5px;
    margin:0px;
    font-size: 14px;
    background-color: var(--light-palid-color);
    color: var(--preto);
}
.texto_fibra_300mb{
    background-color: var(--dark-color);
    color: var(--branco);
}
.titulo_megas{
    color: var(--branco);
    font-size: 50px;
    margin:0px;
}
.texto-megas{
    display:flex;
    align-items:end;
    margin:0px;
    padding:0px;
    font-size: 25px;
    text-align: center;
}
.texto-upload{
    font-size: 13px;
    color: #eee;
    text-align: center;
    border-bottom: 1px solid #bbb;
    background-color: var(--main-color);
    padding:5px 0px;
}
.beneficios_planos .beneficios_planos_itens{
        display:flex;
        flex-direction: row;
        font-size: 16px;
        padding-left: 10px;
        margin: 0px;
        border-bottom: 1px solid #ddd;
        padding-top: 15px;
        font-weight: 400;
}

.beneficios_planos .beneficios_planos_itens span {
    padding: 0px 7px;
}

.container_assineJa a{
    color: var(--branco);
}
    .assineJa_inside{
        background-color: var(--light-palid-color);
        display:flex;
        justify-content: center;
        padding:15px 10px;
        margin-bottom: 0px;
    }
    .assineJa_inside:hover{
        color: var(--branco);
    }
    .assineJa_inside h4{
        transition: var(--transicao-principal);
        font-size: 18px;
        border-radius: 3px;
        padding:8px 50px;
        background-color: var(--main-color);
        margin-bottom: 0px;
    }
    .assineJa_inside h4:hover{
        transition: var(--transicao-principal);
        color: var(--branco);
        background-color: var(--contrast-main-color);
    }
    .container_preco{
        justify-content: center;
        align-items: flex-end;
        display:flex;
        padding:20px;
    }
    .container_preco h1{
        font-size: 30px;
    }
    .container_preco p{
        padding: 2px;
        margin: 0px;
        font-size: 18px;
    }
/*BENEFICIOS DE SER MGP*/
.container-beneficios{
    background-image: url(../img/BannerBeneficios.png);
}
    .container-beneficios h1{
        margin: 0px;
    }
.display-only-mobile{
    display:none;
}
.beneficios-card{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
    .beneficios-card h4{
        padding: 10px;
        margin: 0px;
        font-size: 20px;
    }
    .resposta-beneficios{
        text-align: center;
        padding:10px;
        margin-bottom: 0px;
    }
.row-beneficios{
    display: flex;
    justify-content: space-around;
}
.col-beneficios{
    max-width: 720px;
    margin: 10px;
    padding: 10px;
    box-shadow: 2px 2px 4px #444;
    border-radius: 5px;
}
    .col-beneficios:hover{
        bottom: 2px;
    }
    .col-beneficios:hover .beneficios-card i{
        color: var(--laranja-principal);
    }
.frase_beneficios{
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
}
.beneficios_collapse{
    list-style: none;
}
.container-chamada a{
    transition: var(--transicao-principal);
    border-radius: 7px;
    font-size: 18px;
    padding: 15px 30px;
    background-color: #1aa51a;
    color: var(--branco);
}
.container-chamada a:hover{
    background-color: #1a991a;
    color: var(--branco);
}
.beneficios-card p{
    text-align: left;
}
/*ACCORDION DAS PERGUNTAS*/
.pergunta-card{
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 2px;
}
    .pergunta-card p{
        padding: 10px;
        margin:0px;
    }

    .pergunta-card:hover{
        border-bottom: 1px solid var(--main-text-color);
    }

    .pergunta-card:hover img{
        fill: var(--main-text-color);
    }

.respostas-perguntas a{
    color: var(--main-text-color)!important;
}
.respostas-perguntas a:hover{
    color: var(--main-color)!important;
}
.pergunta{
    font-weight: bold;
}
/*SPEEDTEST*/
.topo-velocidade{
    display:flex;
    flex-direction: row;
}
.container-speedtest-all{
    background: linear-gradient(to bottom right, var(--main-color), var(--dark-color));
}
.titulo-teste{
    font-size: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--branco);
}
.titulo-teste img{
    width:115px;
    object-fit: contain;
}
.icone-testeVelocidade{
    display: flex;
    justify-content: center;
}
.area-btn-teste a{
    transition: var(--transicao-principal);
    border-radius: 7px;
    font-size: 20px;
    padding: 10px 30px;
    background-color: var(--branco);
    color: var(--main-text-color);
}
.area-btn-teste a:hover{
    color: var(--main-color);
    background-color: #ccc;
}
.pre_plano{
    color: var(--main-text-color);
    padding: 4px;
    font-size: 26px;
}
.frase_beneficios h2{
    font-size: 30px;
}

/*RESPONSIVIDADE*/
@media(max-width: 1000px){
    .container_header{
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    .display-only-mobile{
        display:block;
    }
    .display-only-desktop{
        display:none;
    }
    .icones-redes{
        display:none;
    }/*ICONES REDES SOCIAIS HEADER*/
    .frase_beneficios h2{
        font-size: 26px;
    }
    .logo_img{
        width: 135px;
    }
    .beneficios-card{
        padding:5px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
        .beneficios-card h4{
            padding: 6px;
            font-size: 18px;
            margin-bottom: 0px;
        }
    .titulo-teste img{
        padding-left:8px;
    }
    .pre_plano{
        font-size: 22px;
        margin: 5px;
    }
    .icone_wifi{
        font-size: 40px;
        display:inline-block;
    }
    .titulo_megas{
        font-size: 40px;
    }
    .texto-megas{
        font-size: 20px;
    }
    .dropdown-mobile, .navbar-mobile{
        display:block;
    }
    #menu-mobile{
        z-index: 1000;
        width: 100%;
        margin-top:17px;
        position: absolute;
        bottom:1;
        left:0;
    }
        #menu-mobile li{
            font-weight: 400;
            width: 100%;
            padding: 8px;
            padding-left: 20px;
            border-bottom: #ccc solid 1px;
            background-color: #eee;
        }
        #menu-mobile #submenu-mobile{
            margin-left: 15px;
        }
        #submenu-mobile{
            list-style: none;
        }
        #submenu-mobile li{
            font-weight: 200;
            padding:6px 8px;
            width: 40%;
        }
        #menu-mobile li a, #menu-mobile #submenu-mobile li a{
            color: var(--preto);
        }
        #menu-mobile li a:hover,#menu-mobile #submenu-mobile li a:hover{
            color: var(--main-text-color);
        }
    .container_header{
        justify-content: space-between;
    }
    .icone-menu{
        display:flex;
        align-items: center;
        font-size: 28px;
        cursor: pointer;
    }
    .navbar_all{
        display:none;
    }
}
@media(max-width:426px){

    .beneficios_planos .beneficios_planos_itens{
        font-size: 14px;
    }

    .logo_img{
        width: 100px;
    }
    .contatos-footer p{
        font-size: 15px;
    }
    #menu-mobile{
        margin-top: 13px;
    }
    .container_assineJa h4{
        font-size: 20px;
        padding: 8px 13px;
    }
    .container_preco h1{
        font-size: 26px;
    }
    .beneficios_planos {
        display:flex ;
        flex-direction: column;
        font-size: 13px;
    }
    .pre_plano{
        font-size: 14px;
        padding:0px;
    }

    .titulo-teste h2{
        font-size: 18px;
    }

    .titulo-teste img{
        width: 77px;
    }
    .logo_footer{
        width:100px;
    }
    .footer-links li{
        font-size: 15px;
    }
    .footer-links-sub li{
        text-align: center;
        font-size: 12px;
    }
    .copyright{
        font-size: 12px;
    }
    .container-perguntas h3{
        font-size: 20px;
    }
    .area-btn-teste a{
        padding: 7px 30px;
        font-size: 18px;
    }
    .topo-velocidade h1{
        font-size: 18px;
    }
    .topo-velocidade{
        text-align: center;
        align-items: center;
        display:flex;
        flex-direction: column;
    }
    .icone_wifi{
        font-size: 50px;
    }
    .titulo_megas{
        font-size: 40px;
    }
    .texto-megas{
        font-size: 18px;
    }

}
@media(max-width:320px){
    .icone_wifi{
        font-size: 30px;
    }
    .assineJa_inside h4{
        padding: 8px;
    }
}