/*
    Folha de estilo do site tatoassist.com.br
    Criado em: 21/08/2023
*/
/* Fontes do site */

@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');
@import url('https://fonts.cdnfonts.com/css/helvetica-255');
           
:root{
    --cor-texto: #000;
    --cor-vermelho: #c21e25;
    --cor-titulo: #1e1e1e;
    --cor-back-branco: #fff;
    --cor-titulo-branco: #fff;
}
html {
    scroll-behavior: smooth;
  }
body{
    font-family: "Helvetica", sans-serif;
    font-size: clamp(.875rem,.875rem + ((1vw - .48rem) * .24),1rem);
    font-style: normal;
    font-weight: 400;
    color: var(--cor-texto);
    background-color: #eee;
    font-display: swap;
}
.fixed{background-color: var(--cor-vermelho);}
.titulo{
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: underline;
    text-transform: uppercase;
    color: var(--cor-titulo);
}
.titulo-simples {
    font-family: 'Helvetica', sans-serif;
    font-size: 3rem;
    color: var(--cor-vermelho);
    margin: 4rem 0 2rem;
}
#header .nav-link{
    text-transform: uppercase;
    color: var(--cor-titulo-branco);
}
#header  .nav-item{
    border-bottom: 2px solid var(--cor-back-branco);
}
.navbar-toggler{
    color: var(--cor-back-branco);
}
#banner{
    background-color: var(--cor-vermelho);
    min-height: 100vh;
}
#banner .botao {
    margin: 2rem 0 0 3rem;
}
#banner .btn-banner{
    padding: .5rem 3rem ;
    background-color: var(--cor-back-branco);
    color: var(--cor-vermelho);
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 700;
    border: 1px solid var(--cor-back-branco);
    transition: all ease .3s;
}
#banner .btn-banner:hover{
    transition: all ease .3s;
    background: none;
    color: var(--cor-back-branco);
}
.texto-banner {
    width: 80%;
    margin: 12rem auto 0;
    text-align: left;
    font-size: 2rem;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}
.atendente{
    position: absolute;
    top: 12rem;
}
.lead-tato, .titulo-sobre{
    color: var(--cor-vermelho);
    font-weight: 700;
}
.lead-tato {
    font-size: 1.5rem;
}
#sobre{
    margin: 8rem 0;
}
#sobre .bloco, #atendimento .bloco{
    border-radius: 20px;
    background-color: var(--cor-vermelho);
    color: var(--cor-titulo-branco);
    padding: 2rem 0;
    display: flex;
    flex: 1;
    justify-content: center;
}
#sobre .bloco div{
    margin: 0 2rem;
}
#atendimento .bloco div{
    margin: 0 1rem;
    width: 15%;
}
#sobre .bloco div p{
    margin: 0;
    text-align: center;
}
#sobre .bloco div p:first-child{
    font-size: 1.5rem;
    font-weight: 700;
}
#sobre .bloco div p:last-child{
    font-size: .8rem;
}
#sobre .btn-tato{
    background-color: var(--cor-vermelho);
    color: var(--cor-back-branco);
    cursor: pointer;
    text-transform: uppercase;
    padding: 1rem 0;
    border-radius: 1.5rem;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    transition: all ease-in-out .3s;
    border: 1px solid var(--cor-vermelho);
}
#sobre .btn-tato:hover, #sobre .btn-tato:active{
    background-color: var(--cor-back-branco);
    color:var(--cor-vermelho) ;
    transition: all ease-in-out .3s;
}
#servicos{
    background-color: var(--cor-vermelho);
    padding: 4rem 0;
}
#servicos .titulo{
    color: var(--cor-titulo-branco);

}
#servicos .box{
    background-color: var(--cor-back-branco);
    padding: 2rem;
    width: calc(96% / 3 - (1 * 1));
    min-height: 350px;
    margin: 2rem 0;
    border-radius: 2rem;
}
#servicos .box img{
    border-radius: 1rem !important;
}
#servicos .box .box-titulo{
    font-weight: 700;
    color: #403f41;
    font-size: 1.5rem;
}
#servicos .box .box-texto{
    font-size: 1.25rem;
}
#trabalhe {
    margin: 4rem 0;
}
#trabalhe p{
    font-size: 1.25rem;
}
#trabalhe .btn-tato{
    background-color: var(--cor-vermelho);
    color: var(--cor-back-branco);
    cursor: pointer;
    text-transform: uppercase;
    padding: 1rem 3rem;
    border-radius: 1.5rem;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    transition: all ease-in-out .3s;
    border: 1px solid var(--cor-vermelho);
    margin: 3rem 0;
    width: 100%;
}
#atendimento{
    margin: 4rem 0;
}
#atendimento .bloco{
    justify-content: center;
}
#atendimento .bloco .separator{
    width: 2px;
    background-color: var(--cor-back-branco);
}
#atendimento .bloco div:last-child{
    border: none;
}
#atendimento .bloco div p{
    text-align: center;
}

#atendimento .bloco div p:first-child{
    font-size: 2rem;
}
#atendimento .bloco div p:last-child{
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}
#form .titulo{
    margin: 2rem 0;
    color: var(--cor-vermelho);
}
#form .lead-form{
    font-size: 1.35rem;
    font-weight: 700;
}
#form .lead-form span{
    color: var(--cor-vermelho);
}
#form .btn-tato, #venhaSerTato .btn-tato{
    background-color: var(--cor-vermelho);
    color: var(--cor-back-branco);
    cursor: pointer;
    text-transform: uppercase;
    padding: 1rem 3rem;
    border-radius: 1.5rem;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    transition: all ease-in-out .3s;
    border: 1px solid var(--cor-vermelho);
}
#form .btn-tato:hover, #venhaSerTato .btn-tato:hover, #form .btn-tato:active, #venhaSerTato .btn-tato:active{
    background-color: var(--cor-back-branco);
    color:var(--cor-vermelho) ;
    transition: all ease-in-out .3s;
}
#form .form-control{
    border: 1.5px solid var(--cor-vermelho);
    border-radius: 1rem;
    height: 60px;
}
#rodape{
    background-color: var(--cor-vermelho);
    margin: 4rem 0 0;
    padding: 2rem 0;
    color: var(--cor-back-branco);
}
#rodape .titulo, #rodape a{
    color: var(--cor-back-branco);
}
#rodape a{
    text-transform: uppercase;
}
@media(max-width: 600px){
    a.navbar-brand.col-sm-3 {
        width: 70%;
    }
    .atendente{
        position: relative;
        top: 5rem;
    }
    #sobre .bloco, #atendimento .bloco{
        display: block;
    }
    #sobre .bloco div:first-child{
        text-align: center;
    }
    #atendimento .bloco div {
        margin: 0 auto;
        width: 80%;
    }
}