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

*{
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    transition: all 0.3s;
}

:root{
    --fundoSection: #EEEEEE;
    --fundoBotao: #006F73;
    --rodapeCor: #009DA2;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #F6F6F6;
}

/*Classes
-----------------*/
.btn{
    font-weight: 500;
    border-radius: 3px;
    background-color: var(--rodapeCor);
    color: white;
    text-transform: uppercase;
}

.btn-2{
    padding: 10px 0;
    letter-spacing: 1px;
    width: 350px;
    background-color: var(--fundoBotao);
}

.btn:hover{
    background-color: #14d0d7;
}

.btn-2:hover{
    background-color: var(--rodapeCor);
}

.caixa-escrita{
    width: 500px;
    background-image: linear-gradient(to right, #b8e7e3, #f6f6f6 95%);
    height: 50px;
    border-left: 4px solid #006F73;
}

.caixa-escrita p{
    height: 25px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    margin-bottom: 0;
}

.caixa-atributos{
    border-radius: 5px;
    border-bottom: 3px solid #006F73;
    background-color: #14d0d73c;
    height: 230px;
}

.caixa-atributos h1{
    width: 300px;
    padding: 20px 0 10px 0;
    font-size: 30px;
    font-weight: 400;
}

.caixa-atributos h1 i{
    font-size: 26px;
    color: white;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--fundoBotao);
}

.caixa-atributos p{
    font-size: 15px;
    color: var(--fundoBotao);
    font-weight: 400;
}

.cliente p{
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    text-align: center;
}

.cliente img{
    border-radius: 50px;
    display: block;
    margin: auto;
}

.cliente h4{
    color: var(--rodapeCor);
    font-style: italic;
    text-align: center;
    text-shadow: 1px 1px 1px #00000060;
}

.espaco{
    padding-left: 10px;
}

/*Gerais
-----------------*/

h1{
    width: 700px;
    padding: 5px 0;
    color: var(--fundoBotao);
    font-size: 48px;
    font-weight: bold;
}

h5{
    font-size: 22px;
    color: #ff8190;
    margin: 0;
}

p{  
    padding: 5px 0;
    font-weight: 500;
}

i.fa-arrow-down{  
    margin-top: 20px;
    border-radius: 50%;
    padding: 20px 12px;
    border: 2px solid #006F73;
}

header{
    background-color: var(--fundoBotao);
    padding-bottom: 10px;
}

nav{
    background-color: var(--fundoBotao);
}


section{
    height: 800px;
}

/*IDs
-----------------*/

section#topo{
    border-bottom: 4px solid var(--fundoBotao);
}

section#ajuda, section#local{
    background-color: var(--fundoSection);
}

section#links{
    background-color: var(--fundoBotao);
}

footer#rodape{
    height: 40px;
    background-color: var(--rodapeCor);
}

/*Nav
-----------------*/
nav a{
    color: white;
}

nav a:hover{
    color: white;
    border-bottom: 1px solid white;
    padding-bottom: 2px;
}


/*Topo
-----------------*/
section#topo{
    height: 620px;
    background-image: url('../img/Mascara-1.png'), url('../img/Fundo-topo.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#topo h1{
    text-align: center;
}

/*Sobre
-----------------*/
section#sobre{
    height: 950px;
    padding-top: 60px;
}

/*Sobre
-----------------*/
section#ajuda{
    height: 1070px;
    padding-top: 75px;
    background-image: url('../img/Mascara-2.png'), url('../img/Fundo-categoria.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#ajuda .row > h1{
    padding: 0;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
}

section#ajuda .caixa-atributos{
    background-color: #ffffff61;
    box-shadow: 3px 3px 3px #00000060;
    position: relative;
}

section#ajuda .caixa-atributos h1{
    margin-top: 20px;
    padding-bottom: 0;
}

section#ajuda .caixa-atributos h1 > i{
    position: absolute;
    padding: 15px;
    border-radius: 5px;
    top: -40px;
    left: 15px;
}

section#ajuda .btn{
    margin-top: 60px;
    box-shadow: 3px 3px 3px #00000060;
}

/*Clientes
-----------------*/
section#clientes{
    height: 570px;
    padding-top: 170px;
}

section#clientes h1{
    width: 600px;
}

/*Local
-----------------*/
section#local{
    height:600px;
    padding-top: 50px;
    background-color: #e4e3e3;
}

section#local h1{
    text-align: center;
}

/*Links
-----------------*/
section#links{
    height: 300px;
}

section#links h5{
    padding-top: 10px;
    padding-bottom: 30px;
}
section#links p{
    color: white;
}

section#links a{
    color: white;
}

section#links #links-ul a{
    padding: 0;
}

section#links #links-ul a:hover{
   text-decoration: underline;
}

section#links li.nav-item{
    padding-bottom: 5px;
}

section#links #contatos li.nav-item{
    padding-bottom: 10px;
}


/*Rodape
-----------------*/
footer#rodape{
    padding-top: 2px;
    color: white;
    text-align: center;
}

footer#rodape a{
    color: black;
    text-decoration: none;
}

footer#rodape a:hover{
    color: white;
    padding-bottom: 2px;
    border-bottom: 2px solid white;
}