:root {
    --azul: #e17803;
    --amarelo: #48464b;
    --aliceblue: #F0F8FF;
    --verde: #00BA00;
    --azul70: rgba(25, 25, 112, 0.7);
    --amarelo70: rgba(214, 255, 121, 0.7)
}

@font-face {
    font-family: 'Regular';
    src: url('./fonts/BaiJamjuree-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Bold';
    src: url('./fonts/BaiJamjuree-Bold.ttf') format('truetype');
    font-display: swap;
}

/* Global */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Regular";
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: "Bold"
}

p {
    margin: 0
}

h2 {
    font-size: 32px
}

.destaque {
    font-size: 20px
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body a {
    text-decoration: none;
}

.center {
    text-align: center;
}

.white * {
    color: var(--aliceblue) !important
}

.bluetxt {
    color: var(--azul);
}

button {
    padding: 12px 24px;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: bold;
    background: var(--amarelo);
    color: var(--aliceblue);
    border: none;
    font-size: 18px;
    cursor: pointer;
}

button:hover,
#poshero img:hover {
    scale: 110%;
    transition: all 0.5s ease;
}

.upper {
    text-transform: uppercase;
}

.container {
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.centralizado {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.direita {
    justify-content: flex-end;
}

.bgblue {
    background: var(--azul);
}

.coluna {
    flex-direction: column;
}

.mt15 {
    margin-top: 15px;
}

.mt50 {
    margin-top: 50px
}

.mb50 {
    margin-bottom: 50px
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mt25 {
    margin-top: 25px;
}

.pb25 {
    padding-bottom: 25px;
}

.pt25 {
    padding-top: 25px;
}

.pb50 {
    padding-bottom: 50px
}

.pt50 {
    padding-top: 50px
}

.gap20 {
    gap: 20px;
}

.shadow {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

button,
.shadowtxt {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2)
}

/* Responsivo - Celular*/
@media (max-width:767px) {
    .mbnone {
        display: none;
    }

    #cabecalho nav {
        display: none;
    }


    .container,
    #listcomofunciona {
        flex-direction: column !important;
    }

    #poshero .container {
        gap: 20px
    }

    .wdt30 {
        width: 100% !important;
        padding: 20px 0 !important
    }

    #compare,
    #entrecontato,
    #instit {
        grid-template-columns: 100% !important
    }

    #entrecontato {
        gap: 50px !important
    }

    .emailtel {
        font-size: 15px !important;
        max-width: 100% !important
    }

    .grid5050 {
        flex-direction: column;
    }

    .planos {
        grid-template-columns: 100% !important
    }

    #contcard {
        grid-template-columns: 100% !important;
    }
}

/* Responsivo + Celular*/
@media (min-width:767px) {
    #heroblock {
        width: 40%;
    }
}

/* Reponsivo Full HD */
@media (min-width:1920px) {
    #hero {
        background-position-y: 30% !important
    }
}

/* Cabeçalho */
#cabecalho .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#cabecalho ul {
    display: flex;
}

#cabecalho ul li {
    padding: 10px 20px;
}

#cabecalho {
    height: auto;
    padding: 10px 0;
}

#cabecalho li:hover {
    background: rgb(0, 0, 0, 0.2);
}

.logo-header img {
    height: 60px;
    width: auto;
    display: block;
}


/* Hero */
#hero {
    background: url("./img/hero.webp");
    padding: 50px 0px 125px 0px;
    background-position: center;
    background-size: cover;
}

#title {
    padding: 20px;
    background-color: var(--amarelo);
    font-size: 32px;
    border-radius: 20px;
    border: 5px solid var(--amarelo);
    margin: -5px -5px 0px -5px;
}

#title {
    color: var(--aliceblue) !important
}

#mainlist {
    padding: 30px;
}

#mainlist img {
    width: 20px;
    height: 20px;
}

#mainlist li {
    display: grid;
    grid-template-columns: 20px auto;
    gap: 10px;
    padding-bottom: 20px;
    font-size: 21px;
}

#heroblock {
    border-radius: 20px;
}


/* Pos Hero */
#poshero .container {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -50px;
}

#poshero .imgwrapper {
    background: var(--amarelo);
    border-radius: 20px;
    padding: 15px;
}

#poshero img {
    width: 50px;
    height: 50px;
    filter: brightness(0) invert(1)
}

#poshero p {
    font-size: 22px;
}

.w100 {
    display: grid;
    width: 100%;
}

.wdt30 {
    border-radius: 20px;
    gap: 20px;
    width: 28%;
    background: var(--azul);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 25px;
    align-items: center;
    justify-content: space-evenly;
}

/* Como funciona */
#comofunciona {
    background: var(--azul);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#listcomofunciona {
    display: flex;
    gap: 50px
}

#listcomofucniona ul {
    list-style: none;
}

#listcomofunciona .numero {
    color: var(--verde) !important;
    font-size: 72px
}

/* Para empresa */
#paraempresa,
#faq {
    background: #EDEDED;
}

#paraempresa .container {
    justify-content: space-between;
}

/* Planos */
.glider.draggable {
    padding-bottom: 10px;
}

#planos {
    padding: 0 20px
}

#planos .cont2 {
    width: 100%;
    max-width: inherit !important;
    display: grid
}

.planos img {
    width: 250px;
    height: 150px
}

.planos h3 {
    font-size: 24px;
    margin-bottom: 10px
}

.planos p {
    margin-bottom: 20px
}

.card {
    max-width: 300px
}

.plano {
    margin: 0 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 20px 10px;
    border: 1px solid var(--azul);
}

.plano h3 {
    color: var(--azul);
    text-transform: uppercase;
    font-size: 26px;
    margin-bottom: 20px
}

.preco {
    font-size: 42px;
    font-weight: bold;
}

.cttr {
    border: none;
    color: white;
    margin: 20px 0
}

.cttr:hover {
    background: var(--azul)
}

.grid5050 {
    display: flex;
    gap: 20px
}

.planos {
    text-align: center;
    display: grid;
    justify-content: center;
    gap: 20px;
    grid-template-columns: 100%;
}

/* FAQ */
#pergresp {
    display: grid;
    gap: 10px
}

.pergunta {
    background: white;
    padding: 30px;
    border-bottom: 1px solid #d5d8dc;
}

.pergunta:hover {
    background: var(--aliceblue)
}

.pergunta h3 {
    margin-bottom: 15px
}

/* Contato */
#contato {
    background: var(--azul)
}

.entrecontato {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.entrecontato img {
    margin: auto;
}

#entrecontato {
    display: flex;
    flex-direction: column
}

#entrecontato button {
    margin: 10px 0 !important
}

#entrecontato img {
    width: 200px;
    height: 45px;
    object-fit: contain;
    padding: 20px 10px;
    border-radius: 20px
}

#capeimg {
    background: #ED9009;
    margin-bottom: 20px
}

#portoimg {
    background: #0092DD
}

#cttbtns {
    display: grid;
    padding-top: 20px
}

.zap {
    background-image: linear-gradient(180deg, #0fcc04 0, #1b8614 100%);
    margin-top: 20px
}

.emailtel {
    background: none;
    border: 2px solid var(--aliceblue)
}

/* Rodapé */
#rodape {
    background: var(--azul70)
}

#linktext {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
}

#instit {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
}

#instit img {
    width: 160px;
}

#contato h4,
#contato h3 {
    font-size: 22px
}

/* Btn Zap */
#btnzap {
    position: fixed;
    right: 5px;
    bottom: 10px;
}

#btnzap img {
    width: 250px;
}

#outros {
    background-color: #0046C0;
}

#outros .container {
    display: flex;
    flex-direction: column !important;
}

.ocard {
    padding: 20px;
    border-radius: 20px;
    background-color: white;
}

.ocard button {
    background-color: #0046C0;
    font-size: 14px;
    padding: 10px;
}

.ocard h4 {
    margin: 10px 0
}

.ocard img {
    width: 64px;
}

#contcard {
    grid-template-columns: 18% 18% 18% 18% 18%;
    display: grid;
    gap: 20px;
    justify-content: space-between;
}