@font-face {
    font-family: "SimplonBP";
    font-display: swap;
    font-weight: 300;
    src:
    local('@'), 
    url("../../fonts/SimplonBP-Light.html") format("otf"),
    url("../../fonts/SimplonBP-Light-2.html") format("woff"),
    url("../../fonts/SimplonBP-Light-3.html") format("truetype");
  
}
  
@font-face {
      font-family: "SimplonBP";
      font-display: swap;
      font-weight: 400;
      src:
      local('@'), 
      url("../../fonts/SimplonBP-Regular.html") format("otf"),
      url("../../fonts/SimplonBP-Regular.woff") format("woff"),
      url("../../fonts/SimplonBP-Regular-2.html") format("truetype");
    
}
    
@font-face {
      font-family: "SimplonBP";
      font-display: swap;
      font-weight: 500;
      src: 
      local('@'), 
      url("../../fonts/SimplonBP-Medium.html") format("otf"),
      url("../../fonts/SimplonBP-Medium.woff") format("woff"),
      url("../../fonts/SimplonBP-Medium-2.html") format("truetype");
    
}
    
@font-face {
      font-family: "SimplonBP";
      font-display: swap;
      font-weight: 700;
      src:
      local('@'), 
      url("../../fonts/SimplonBP-Bold.html") format("otf"),
      url("../../fonts/SimplonBP-Bold.woff") format("woff"),
      url("../../fonts/SimplonBP-Bold-2.html") format("truetype");
    
}
    
@font-face {
      font-family: "SimplonOi";
      font-display: swap;
      src:
      local('@'), 
      url("fonts/SimplonOi-Headline.html") format("otf"),
      url("../../fonts/SimplonOi-Headline.woff") format("woff"),
      url("../../fonts/SimplonOi-Headline.html") format("truetype");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-yellow: #FBD84b;
    --color-green: #009E0C;
    --color-green-light: #018A0F;
    --color-textpadrao: #00000;
    --color-background-light: #f8f8f8;
    --color-background-header: #434343;
    }

    body {
        background: #FFFF;
        height: 100vh;
        width: 100%;
        font-family: "SimplonBP", Arial;
        font-weight: 400;
    }
    a {
        text-decoration: none;
    }

/**************
*** HEADER
***************/

header.navbar {
    width: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    z-index: 9;
    box-shadow: 0 .5rem 5rem;
    background-color: var(--color-background-header);
}

header.navbar nav.navbar_itens {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

header.navbar nav.navbar_itens div.navbar_logo {
    display: flex;
    align-items: center;
}

header.navbar nav.navbar_itens div.navbar_logo img {
    width: 70%;
    margin-left: 10rem;
}

header.navbar nav.navbar_itens div.navbar_ligue {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10rem;
}

header.navbar nav.navbar_itens div.navbar_ligue a {
    text-decoration: none;
    color: white;
}

header.navbar nav.navbar_itens div.navbar_ligue p {
    font-size: 1.5rem;
}

header.navbar nav.navbar_itens div.navbar_ligue h1 {
    font-size: 3rem;
    color: var(--color-yellow);
}

/********************
LINKS PARA VOCE E PARA EMPRESA
***********************/

header.navbar nav.navbar_oi_empresas {
    padding: 10px 0 15px;
    border-bottom: 1px solid #6a6a6a;
    border-top: 1px solid #6a6a6a;
    background: var(--color-background-header);
}

header.navbar nav.navbar_oi_empresas div.container_oi_empresas div.navbar_oi_empresas_links {
    display: flex;
    padding: 0.5rem;
    margin: 0 0 0 11rem;
}

header.navbar nav.navbar_oi_empresas div.container_oi_empresas div.navbar_oi_empresas_links strong {
    text-decoration: none;
    color: var(--color-yellow);
    font-weight: bold;
}

header.navbar nav.navbar_oi_empresas div.container_oi_empresas div.navbar_oi_empresas_links {
    text-decoration: none;
    color: var(--color-background-light);
    font-weight: bold;
}

header.navbar nav.navbar_oi_empresas div.container_oi_empresas div.navbar_oi_empresas_links a {
    text-decoration: none;
    color: var(--color-background-light);
    display: flex;
    align-items: center;
    margin-left: 2rem;
}

header.navbar nav.navbar_oi_empresas div.container_oi_empresas div.navbar_oi_empresas_links a.links_oi_voce {
    color: #6a6a6a;
    font-weight: 400;
}


/***************
***BANNERS
****************/

section.banner_desktop {
    width: 100%;
    margin-top: 11.0rem;
}

section.banner_desktop img {
    width: 100%;
}

section.banner_mobile img {
    display: none;
}

/*****************
*** Title Escolha
******************/

section.titleEscolha h2 {
    text-align: center;
    margin: 3.5rem 0 3.5rem 0;
    font-size: 2.5rem;
}

/**********
**OFERTAS
*************/

main.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -4rem;
}

main.cards section.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    background-color: white;
    padding: 2rem 1rem 2rem 1rem;
    border-radius: 0.1rem;
    width: 17.5rem;
    margin-left: 2rem;
    box-shadow: 0 0 10.3443px rgb(0 0 0 /25%);
    border: 0;
    margin-bottom: 7rem;
}

main.cards section.card:first-child{
    margin-left: 0;
    margin-top: -0.45rem;
    border: 1px solid var(--color-yellow);
}

main.cards section.card div.melhorOferta {
    background-color: var(--color-yellow);
    width: 113.5%;
    color: black;
    font-size: 1.3rem;
    margin-top: -3.5rem;
    margin-bottom: 2rem;
    padding: 0.45rem;
    font-weight: 700;
}

main.cards section.card .upsell {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

main.cards section.card h1 {
    font-size: 3rem;
}

main.cards section.card h4 {
    margin-top: 1rem;
    margin-left: -3rem;
}

main.cards section.card ul {
    list-style: none;
    text-align: start;
    margin: 1rem 0 1rem 0rem;
}

main.cards section.card ul li img {
    margin-right: 0.5rem;
}

/***************
********PREÇO
*****************/

.info_price_card {
    width: 100%;
    padding: 0 0 1rem 0;
}

.info_price_card p {
    font-family: "SimplonOi", Arial;
    font-weight: 400;
}

.info_price_card .value-1-card {
    font-size: 4rem;
    margin-left: .5rem;
}

.info_price_card .value-small-card {
    padding-top: 0.7rem;
    font-size: 1.5rem;
    margin-left: .3rem;
}

.value-component-card span {
    font-family: "SimplonOi", Arial;
    font-size: 1.5rem;
    font-weight: 400;
}

.info_price_card .value-year-card {
    margin-left: -2.2rem;
    padding-top: 2.43rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.info_price_card .value-caractere-card {
    padding-top: 2.25rem;
    font-size: 1.5rem;
}

.value-component-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.value-component-card p {
    color: var(--color-green);
}

.info_price_card .condicao .value-condicao {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: "SimplonBP";
}



/****************
button
********************/


main.cards section.card div.parceiros {
    margin-bottom: 1rem;
}
main.cards section.card div.parceiros p {
    font-weight: 500;
    margin-left: -5rem;
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
}

main.cards section.card div.parceiros div.parceirosImg {
    display: flex;
    width: 7.0rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding: 0.5rem;
}

main.cards section.card div.parceiros div.parceirosImg img {
    width: 100%;
    margin-left: 1rem;
}

main.cards section.card div.parceiros div.parceirosImg img:first-child {
    margin-left: 0.5rem;
}


main.cards section.card button {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 0;
    cursor: pointer;
    background-color: var(--color-yellow);
    font-size: 90%;
    font-weight: 700;
    color: black;
    margin-top: 0.8rem;
    width: 75%;
    height: 3rem;
}

main.cards section.card button:hover {
    background-color: var(--color-green);
    color: white;
}


/***************************
MODAL COM + DETALHES
***************************/
.modalDetalhes {
    color: var(--white-pattern);
    font-size:1.2rem;
    cursor: pointer;
    margin-top: 0.7rem;
}

.modalDetalhes:hover {
    color: var(--color-green);
    cursor: pointer;
}


/*********************************
MODAL DETALHES PLANO
************************************/


.modal_product {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    animation-duration: 3s;
    animation-name: transicao;
    top: 0;
    right: 0;
    width: 400px;
    width: 50%;
    border-left: 1px solid rgba(0,0,0,.2);
    /* transform: translateX(100%); */
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    overflow: auto;
    transform: none;
    visibility: hidden;
}

@keyframes transicao {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}

.modal_product .menu-details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    padding-right: 0;
    padding-left: 0;
    padding-top: 1.5rem;
}

.modal_product .menu-details-title h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.modal_product .menu-details-title h2 span {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.modal_product .menu-details-title .btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.5rem 0.5rem;
    margin-top: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
}

.px-0 {
    padding-right: 0;
    padding-left: 0;
}

.px-0 ul {
    margin-top: 0;
    margin-bottom: 1rem;
    list-style: none;
}

.px-0 .text-start ul {
    text-align: left;
}

.px-0 .flex-column ul {
    flex-direction: column;
}

.menu-details-plan li p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.menu-details-plan li p a{
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(0, 171, 15);
}

ul.nav-pills li {
    border-bottom: 1px solid var(--color-yellow) !important;
    margin-bottom: 1rem;
}

ul.nav-pills a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(0, 171, 15);
}





/************************
*****PARCEIROS DIGITAIS
************************/



main.parceirosDigitais {
    background-color: var(--color-background-light);
    padding: 3rem 0 1rem 0;
    flex-direction: center;
    justify-content: center;
    justify-items: center;
}

main.parceirosDigitais section.container header {
    align-items: center;
    text-align: center;
}

main.parceirosDigitais section.container header .title-partners{
    font-size: 2.5rem;
}

main.parceirosDigitais section.container header .textcenter {
    font-size: 0.85rem;
}


/********************
BTG PCTUAL
*******************/

main.parceirosDigitais div.content {
    display: flex;
    padding: 1.5rem 3rem 3rem 3rem;
    justify-content: center;
}

main.parceirosDigitais div.content div.content-one {
    font-size: 0.75rem;
    margin: 3rem 0rem 0 3rem;
    width: 360px;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

main.parceirosDigitais div.content div.content-one img {
    margin-bottom: 1.5rem;
    width: 10rem;
}

main.parceirosDigitais div.content div.content-two ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 2rem 0;
    margin: 0 5rem 0 5rem;
    width: 500px;
}

main.parceirosDigitais div.content div.content-two ul li p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
main.parceirosDigitais div.content div.content-two ul li h6 {
    font-size: 1rem;
}

/*********************
PAG SEGURO
*********************/


main.parceirosDigitais div.content-pag {
    display: flex;
    padding: 0rem 3rem 3rem 3rem;
    justify-content: center;
}

main.parceirosDigitais div.content-pag div.content-one {
    font-size: 0.75rem;
    margin: 3rem 0rem 0 3rem;
    width: 360px;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

main.parceirosDigitais div.content-pag div.content-one img {
    margin-bottom: 1.5rem;
    width: 10rem;
}

main.parceirosDigitais div.content-pag div.content-two ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 2rem 0;
    margin: 0 5rem 0 5rem;
    width: 500px;
}

main.parceirosDigitais div.content-pag div.content-two ul li p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
main.parceirosDigitais div.content-pag div.content-two ul li h6 {
    font-size: 1rem;
}

/*************************
*****   foooter
**************************/
.footer {
    width: 100%;
    background: #f1f1f1;
}

.footer .copyright {
    padding: 4rem 0 4rem;
}

.footer .copyright .copy-box {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    align-items: center;
}

.footer .copyright .copy-box .termo {
    text-decoration: none;
    font-family: "SimplonBP", Arial;
    font-weight: 500;
    color: black;
}

.footer .copyright .copy-box p:first-child {
    margin-right: 1.5rem;
}

.footer .copyright .copy-box p:last-child {
    margin-top: 0.5rem;
}

.footer .copyright .img-logo {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}



/***************
***WhatsApp
***************/
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: pointer;
    color: white;

}

.btn-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}


.btn {
    padding: 0.5rem 1.88rem;
    border-radius: 1.88rem;
    font-weight: 400;
    font-size: 1rem;
    transition: all .2s;
}

.cta {
    position: fixed;
    bottom: 4.38rem;
    right: 3.13rem;
    background: #000;
    border: 1px solid #000;
    border-radius: 2.75;
    font-weight: 560;
    font-size: 0.75rem;
    max-width: 8rem;
    z-index: 999;
    padding: 0.5rem 1.13rem;
}

.cta img {
    position: absolute;
    top: -3.75rem;
    right: 0;
}






/*************************
*****   RESPONSIVIDADE
**************************/
@media (min-width: 901px) {
    header.mobile{
        display: none;
    }
}

@media screen and (max-width: 900px) {
    header.navbar{
        display: none;
    }

    header.mobile {
        padding: 0.5rem 1rem;
        width: 100%;
        bottom: 0;
        position: fixed;
        top: unset;
        background-color: var(--color-yellow);
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: "SimplonBP", Arial;
        font-weight: 700;
    }

    header.mobile div.phoneCall {
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
    }

    header.mobile div.phoneCall img {
        width: 100%;
    }

    header.mobile p {
        font-size: 75%;
        font-family: "SimplonBP", Arial;
        font-weight: 500;
    }

    header.mobile a {
        text-decoration: none;
        color: black;
    }

    section.banner_desktop img{
        display: none;
    }

    section.banner_mobile img{
        width: 100%;
        display: flex;
        margin-top: -11rem;        
    }

    section.titleEscolha h2 {
        font-size: 1.75rem;
    }
    main.cards {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    main.cards section.card {
        margin-left: 0;
        margin-bottom: 2rem;
    }

    main.cards section.card:first-child {
        margin-top: 1rem;
    }

    main.parceirosDigitais {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 4rem;
    }

    main.parceirosDigitais section.container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    main.parceirosDigitais section.container header {
        margin: 0 auto 0 auto;
    }


    main.parceirosDigitais section.container div.content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    main.parceirosDigitais section.container div.content div.content-one {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        margin: 0;
        width: 100%;
    }
    main.parceirosDigitais section.container div.content div.content-one img{
        width: 45%;
        margin-right: 55%;

    }    
    main.parceirosDigitais section.container div.content div.content-two ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        width: 100%;
    }
    
    main.parceirosDigitais section.container div.content-pag {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    main.parceirosDigitais section.container div.content-pag div.content-one {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        margin: 0;
        width: 100%;
    }

    main.parceirosDigitais section.container div.content-pag div.content-one img{
        width: 45%;
        margin-right: 55%;
    }
    main.parceirosDigitais section.container div.content-pag div.content-two ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        width: 100%;
    }

    main.parceirosDigitais section.container div.content-pag div.content-two ul li {
        text-align: left;
    }

    /*WhatsApp*/
    div.container div.row img {
        margin-top: 2rem;
    }

    .cta {
        bottom: 5rem;
        right: 1.25rem;
        font-size: 0.69rem;
        padding: 0.375rem 0.94rem;
    }
    .cta img {
        position: absolute;
        top: -2.38rem;
        width: 2.81rem;
        right: 0;
    }

    
    .footer .copyright .copy-box {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .footer .copyright .copy-box p:first-child {
        margin-right: 0;
    }

}