@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500&display=swap');

:root {
    --color-primary: rgb(0, 123, 194);
    --color-secudary: rgb(0, 42,66);
    --color-tertiary: rgb(162, 168, 184);
    --color-quaternary: rgb(244, 245, 244);
    --color-background: rgb(21,21,21);
    --color-quitiary: rgb(238,176,48);
}

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

body {
    background-color: var(--color-background);
    font-family: 'Poppins','Rubik', 'Roboto', sans-serif;
    background-image: url(../images/Fundo4.png);
    /* background-size: cover; */
}

/******************
  Reveal on scroll
*******************/

html {
    scroll-behavior: smooth;
}

/* INICIO DO NAV */

.navbar {
    display: flex;
    flex-flow: row wrap;
    height: 100px;
    background-color: #111111;
    justify-content: center;
    align-items: center;
    /* position: fixed; */
    width: 100%;
    /* z-index: 1; */
    margin-bottom: 4px solid var(--color-primary);
}

.logo {
    flex: 20%;
    /* border: 1px solid red; */
    margin-left: 10%;
    text-align: center;
}

.menu {
    flex: 70%;
    text-align: right;
    padding: 20px;
}

.menu a{
    color: var(--color-quaternary);
    text-decoration: none;
    font-size: 16px;
    padding: 20px 16px;
    transition: all 0.5s;
}

.menu a:hover{
    color: var(--color-primary);
    /* border-top: 4px solid var(--color-primary); */
    transition: all 0.5s;
}

#botao {
    padding: 10px 25px;
    border-radius: 25px;
    border: 2px solid var(--color-primary);
    margin-right: 15%;
    margin-left: 5%;
}

#botao:hover {
    /* border: none; */
    background: var(--color-primary);
    color: var(--color-quaternary);
    transition: all 0.5s;
}

/************
  H1 - Page 
************/

.pg_h1 {
    border-bottom: 4px solid var(--color-quitiary);
    /* margin-top: 20px; */
    /* background: var(--color-primary); */
    background-image: linear-gradient(100deg, #111111, #002e49, #111111);
    color: #fff;
    text-align: center;
    padding: 20px;
    text-indent: 10px;
    text-size-adjust: 1px;
}

.pg_h1 span {
    padding: 0 10px;
    font-weight: 700;
    font-size: 30px;
    /* color: var(--color-quitiary); */
    background: linear-gradient(180deg, rgba(0, 125, 195) 90%, rgba(238,176,48)80%);
    /* text-decoration: underline wavy #fff; */
}

/*********************************
  Inicio do header - Cabeçalho 
*********************************/

.header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    /* height: 500px; */
    /* background: gray; */
}

.headline {
    flex: 40%;
    margin-left: 10%;
    border-radius: 10px;
    /* border: 1px solid red; */
}

.headline h2 {
    font-weight: 700;
    font-size: 20px;
    color: var(--color-quitiary);
    padding: 0px;
    margin: 0px;
    margin-bottom: 15px;
}

.headline span .barRest{
    color: #fff;
    width: auto;
    background: linear-gradient(180deg, rgba(0, 125, 195) 90%, rgba(238,176,48)80%);
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
}

.headline li{
    color:  #fff;
    text-align: left;
    list-style: none;
    font-size: 15px;
}

/*********************************
  Botões - Contrate agora 
*********************************/

.header .contact-btn, .autoHeadline .contact-btn, .garcomHeadline .contact-btn {
    margin-top: 15px;
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    text-transform: uppercase;
    font-family: Poppins;
}

.header .contact-btn:hover, .garcomHeadline .contact-btn:hover, .autoHeadline .contact-btn:hover {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);

}

.img-headline {
    flex:40%;
    margin-right: 10%;
    text-align: center;
}

/**************
  Link Garçom 
**************/

.linkGarcom {
    margin-top: 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    /* height: 500px; */
    /* background: gray; */
}

.img-Garcom {
    flex:30%;
    margin-left: 10%;
    text-align: center;
}

.garcomHeadline{
    flex: 50%;
    margin-right: 10%;
    border-radius: 10px;
}

.garcomHeadline {
    color:  #fff;
    text-align: left;
    list-style: none;
    font-size: 15px;
}

.garcomHeadline h2 {
    font-weight: 700;
    font-size: 20px;
    color: rgb(192,57,43);
    padding: 0px;
    margin: 0px;
    margin-bottom: 15px;
}

.garcomHeadline span .barRest{
    color: #fff;
    /* font-family: roboto; */
    width: auto;
    background: linear-gradient(180deg, rgba(0, 125, 195) 90%, rgb(192,57,43)90%);
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
}

.garcomHeadline li{
    color:  #fff;
    text-align: left;
    list-style: none;
    font-size: 15px;
}

/**********************
  Link Autoatendimento
************************/

.linkAuto {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 130px;
}

.autoHeadline {
    flex: 40%;
    margin-left: 10%;
    border-radius: 10px;
}

.autoHeadline h2 {
    font-weight: 700;
    font-size: 20px;
    color: var(--color-quitiary);
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.autoHeadline span .barRest {
    color: #fff;
    width: auto;
    background: linear-gradient(180deg, rgba(0, 125, 195) 90%, rgba(238,176,48)80%);
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
}

.autoHeadline li {
    color: #fff;
    text-align: left;
    list-style: none;
    font-size: 15px;
}


/**********************
  Perguntas frequentes
***********************/

.commonQuestions{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin: 5%;
    /* margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%; */
}

.questionsTitle {
    flex:40%;
    text-align: center;
    color: #fff;
    padding: 2%;
    font-size: 25px;
}

.container-faq {
    width: 80%;
    margin-top: 15px;
    background-color: rgba(37, 36, 41, 60%);
    /* background: linear-gradient(180deg, rgba(0, 125, 195) 90%, rgb(192,57,43)90%); */
    /* background: transparent; */
    border-radius: 5px;
    padding: 16px 20px 3px;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}

.container-faq:hover{
    /* color: var(--color-primary); */
    background: rgba(0, 123, 194, 30%);
}

.question{
	cursor:pointer;
	position:relative
}

.question h3{
    font-weight: 400;
}

.question::after{
	content:"\002B";
	font-size:24px;
	transition:.3s;
	position:absolute;
	right:-8px;top:-4px;
    color: #fff;
}

.question.active::after{
	transform:rotate(45deg)
}

.question .paragraph{
	color:#fff!important;
	margin:0 20px 20px 0
}

.answercont {
	max-height:0;
	overflow:hidden;
	transition:.3s;

}

.answer {
    color: rgb(187, 186, 186);
    padding-bottom: 10px;
}

.answer .paragraph strong {
    color: var(--color-quitiary);
}

.text-li {
    color: var(--color-quitiary)
}

/******************
  Cards - Negócio
*******************/

.negocio {
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0%;
    padding: 0% 5% 5% 5%;
    text-align: center;
}

.negocio h2 {
    width: 100%;
    font-size: 40px;
    margin: 0;
    border-radius: 10px;
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
    /* color: var(--color-quaternary); */
    background-color: rgba(238,176,48);
}

.servicos {
    display: inline-block;
    margin-top: 5%;
}

.card {
    display: inline-block;
    width: 30%;
    padding: 30px;
    margin: 1%;
    border: 1px solid var(--color-quitiary);
    border-radius: 10px;
    color: var(--color-quaternary);
    cursor: pointer;
    /* transition: all 0.5s; */
}
.card h3 {
    margin: 10px;
    color: var(--color-quitiary);
}

.texto-oculto {
    display: none;
}

.card:hover {
    background: var(--color-quitiary);
    padding: 40px;
}

.card:hover img {
    display: none;
}

.card:hover .card-text {
    display: none;
}

.card:hover .texto-oculto{
    display: block;
}

/**************
  Footer 
**************/

footer {
    margin-top: 30px;
    height: 150px;
    background-image: linear-gradient(100deg, #111111, #002e49, #111111);
    text-align: center;
    border-top: 5px solid var(--color-quitiary);
}

.logo-rodape {
    padding: 50px;
}

.sistema {
    font-size: 16px;
    color: var(--color-quitiary);
}

.whats {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 100px;
}