: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 */
body {margin:0; font-family: "Regular"}

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;}
.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 ul {display:flex;}
#cabecalho ul li {padding:10px 20px;}
#cabecalho {height:50px;}
#cabecalho li:hover {background:rgb(0,0,0,0.2);}


/* 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%;}
#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;
}