@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body,html{
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    margin:0;
}

.modal-dialog {
    max-width: 40%;
}

.modal-dialog p {
    font-family: 'Montserrat', sans-serif;
}

#menuMobile a {
    font-family: "Open Sans", sans-serif;
    font-weight: 200;
    font-size: 24px;
}

#menuDescktop a {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

#menuDescktop .menuNavLink {
    margin-left: 12px;
    margin-right: 12px;
}

#navbarScroll a:hover {
    color: #3d9be9;
}

#navbarScroll a.active {
    color: #3d9be9!important;
}

#nossos-produtos .saibaMaisbtnsProduct {
    position: relative;
    
    background-color: #FFF;
    border-color:#FFF;
    font:normal normal 700 12px / 1.4em montserrat, sans-serif;
    margin-top: 10px;
}

#btn-quero-conhecer {
    background-color: #3d9be9;
    border: none;
    font:normal normal 700 12px / 1.4em montserrat, sans-serif;
    width: 186px;
}

#btn-quero-conhecer:hover {
    background-color: #FFF;
    color: #3d9be9;
}

#span-nossos-produtos {
    font-family: 'Cairo', sans-serif;
    font-size: 78px;
    line-height: 1.2em;
    font-weight: 200;
    color:#FFF
}

#saibaMaisbtnPro:hover {
    background-color: #FC5064!important;
    color: #FFF!important;
}

#saibaMaisbtnUltra:hover {
    background-color: #1d67cd!important;
    color: #FFF!important;
}

#saibaMaisbtnPlus:hover {
    background-color: #FBBC08!important;
    color: #FFF!important;
}

#saibaMaisbtnNota:hover {
    background-color: #23bac6!important;
    color: #FFF!important;
}

#saibaMaisbtnService:hover {
    background-color: #e57415!important;
    color: #FFF!important;
}

#saibaMaisbtnMei:hover {
    background-color: #9e8fe8!important;
    color: #FFF!important;
}

#saibaMaisbtnEvo:hover {
    background-color: #a4c9fe!important;
    color: #FFF!important;
}

#btn-entrar-contato {
    background-color: #FFF;
    border-color:#FFF;
}

#btn-entrar-contato:hover {
    background-color: #4486f6!important;
    color: #FFF!important;
}

#btn-entrar-contatoPro:hover {
    background-color: #FD5C70!important;
    color: #FFF!important;
}

#btn-entrar-contatoPlus:hover {
    background-color: #FFAC2E!important;
    border-color: #FFF!important;
    color: #FFF!important;
}

#btn-entrar-contatoEvo:hover {
    background-color: #A4C9FE!important;
    border-color: #FFF!important;
    color: #FFF!important;
}

#btn-entrar-contatoNota:hover {
    background-color: #40CEDA!important;
    border-color: #FFF!important;
    color: #FFF!important;
}

#btn-entrar-contatoService:hover {
    background-color: #E57414!important;
    border-color: #FFF!important;
    color: #FFF!important;
}

#btn-entrar-contatoMei:hover {
    background-color: #9B92D1!important;
    border-color: #FFF!important;
    color: #FFF!important;
}


#Planos .btn-saiba-mais:hover {
    background-color: #4486f6!important;
}

#Planos .listPLanos {
    font-size: 15px;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    color: #2f2e2e;
}

#Planos .listPLanosMais {
    color: #fff;
} 

#maisVendido {
    position: absolute;
    left: 146px;
    top: -16px;
    background: #00d26a;
    padding: 0px 13px;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Kanit';
    font-weight: normal;
    color: #FFF;
}

#accordionPlanos .accordion-item{
    border-color: transparent !important;
    border-bottom: 1px solid rgb(186, 186, 186) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

#accordionPlanos button {
    font-size: 22px;
    color: #2f2e2e;
}
#accordionPlanos h2 {
    font-size: 22px;
    color: #2f2e2e;
}

#accordionPlanos .accordion-button:not(.collapsed) {
    background: none !important;
}

#accordionPlanos .accordion-body{
    font-size: 16px;
    color: rgb(96, 94, 94) !important;
    font-weight: unset;
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    .active {
        color: #3d9be9!important;
    }

    #section-inicio {
        padding-top: 20px!important;
        padding-bottom: 20px!important;
    }

    #txt-inicio {
        margin: 0px 0px 10px 0px !important;
        width:100%!important;
    }

    #txt-inicio p {
        font-size: 32px !important;
        font-weight: 500 !important;
    }

    #txt-inicio span {
        font-size: 16px !important;
    }

    #img-inicio {
        margin-top: 10px;
        margin-bottom: 40px;
        width:350px!important;
    }

    #faca-como{ padding: 30px !important; }

    #span-faca-como {
        font-size: 28px !important;
    }

    #span-faca-como b {
        margin-top: 10px !important;
    }

    #porque-contratar {
        padding: 30px !important;
    }

    #porque-contratar span {
        font-size: 33px!important;
    }

    #porque-em-nuvem {
        font-size: 38px!important;
    }

    #span-nossos-produtos {
        font-size: 38px!important;
    }

    #comp-360mobile {
        margin: 54px 0 !important;
        width:100%!important;
    }

    #comp-360mobile .tit1{
        font-size: 48px !important;
    }
    #comp-360mobile .tit2{
        font-size: 68px !important;
    }

    #comp-graficos {
        margin-top: 10px;
        margin-bottom: 10px;
        width:350px!important;
    }

    #comp-imgSofa {
        margin-top: 10px;
        width:350px!important;
    }

    #txt-beneficios {
        padding: 30px 0px 0px 0px !important;
    }
    #txt-beneficios h1 {
        font-size: 22px!important;
    }

    .tiposNegocio{
        margin-bottom: 10px !important;
    }

    #fale-conosco-title {
         font-size: 28px !important;
    }

    #fale-conosco-title span {
         font-size: 18px !important;
    }
    
    .icons-fale-conosco {
        
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
    .icons-fale-conosco img{
        width: 35px!important;
        height: 34px!important;
    }

    #mail-icon {
        height: 27px!important;
    }

    .icons-fale-conosco p{
        font-size: 10px !important;
    }

    .footerTxtCard {
        padding-top: 0px !important;
    }

    .footerTxt {
        text-align: center!important;
    }

    /* SOLUÇÕES */
    #img-inicio-solucoes {
        margin-top: 10px;
        margin-bottom: 10px;
        width:350px!important;
    }

    #txt-inicio-solucoes {
        margin: 0px 0px 20px 0px !important;
        width:100%!important;
    }

    #txt-inicio-solucoes img {
        position: relative !important;
        left: 50% !important;
        width: 246px !important;
        margin-left: -123px!important;
    }

    #txt-inicio-solucoes h1 {
        font-size: 28px !important;
        font-weight: 400 !important;
    }


    #agende-demonstracao-solucoes {
        display: block !important;
    }

    #agende-demonstracao-solucoes p {
        font-size: 16px !important;
        margin-right: 0px !important;
    }

    .tit-vantagens-solucoes {
        padding-bottom: 10px!important;
    }
    
    .tit-vantagens-solucoes h1 {
        font-size: 38px !important;
    }


    #ultra-solucoes-img1 {
        left: 210px!important;
        top: 210px!important;
        width: 110px!important;
    }

    #pro-solucoes-img1 {
        left: 20px!important;
        top: 210px!important;
        width: 110px!important;
    }

    #plus-solucoes-img1 {
        left: 200px!important;
        top: 210px!important;
        width: 110px!important;
    }
    #plus-solucoes-img2 {
        left: 260px!important;
        top: 250px!important;
        width: 110px!important;
    }

    #evo-solucoes-img1 {
        left: 200px!important;
        top: 220px!important;
        width: 100px!important;
    }
    #evo-solucoes-img2 {
        left: 260px!important;
        top: 260px!important;
        width: 100px!important;
    }
    #evo-solucoes-img3 {
        left: 130px!important;
        top: 310px!important;
        width: 230px!important;
    }

    #nota-solucoes-img1 {
        left: 20px!important;
        top: 200px!important;
        width: 130px!important;
    }

    /* FECHA SOLUÇÕES */
    /* -------------- */
    

    /* FUNCIONALIDADES */
    #txt-inicio-funcionalidades {
        margin: 20px 0px 0px 0px !important;
        width:100%!important;
        text-align: center !important;
    }
    #txt-inicio-funcionalidades p[txtspan="1"] {
        font-size: 28px!important;
    }

    #txt-inicio-funcionalidades p[txtspan="2"] {
        font-size: 45px!important;
    }

    #txt-inicio-funcionalidades p[txtspan="3"] {
        font-size: 15px!important;
    }

    #txt-garanta-funcionalidades {
        margin: 20px 0px 0px 0px !important;
        width:100%!important;
        padding: 0px !important;
    }

    #txt-garanta-funcionalidades h1 {
        font-size: 28px !important;
    }

    /* FECHA FUNCIONALIDADES */
    /* --------------------- */

    /* SEGMENTOS */
    #row-segmentos {
        padding: 0px!important;
    }
    #img-inicio-segmentos {
        margin-top: 10px;
        margin-bottom: 30px;
        width:350px!important;
    }
    
    #txt-inicio-segmentos {
        margin: 40px 0px 20px 0px !important;
        width:100%!important;
    }

}

.logoHeader {
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0;
    width: 109px;
    height: 109px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align-last: center;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 999;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-sizing: border-box;
}

.modal-content label {
    display: block;
    margin-bottom: .5rem;
    font-weight: bold;
}
.modal-content input {
    width: 100%;
    padding: .75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    box-sizing: border-box;
}

.modal-content .btn-entrar {
    width: 100%;
    padding: .75rem;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
}
.modal-content .btn-entrar:hover {
    background: #0056b3;
}