/* cores extraídas da foto de capa*/

/* 
cores da imagem da home
#5a4d44
#77675d
#908076
#b1a49c
#f3f0ec
cores da logo
#bf212e
#bf2121
#0d0d0d
#bfbfbd
#bf6321  analoga à #bf212e
#dd9d4c  do site modelo
*/



* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'PT Serif';
    src: url('../fonts/PTSerif-Regular.ttf');
    font-display:swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-VariableFont_wght.ttf');
    font-display:swap;
}

body {
    margin: auto;
    max-width: 100%;
    

}

/* calcular tamanhos de fontes 
font-size: calc(16px + (8/1200) * 100 * 1vw);
*/

.largura {
    max-width: 1280px;
    margin: auto;
}

section {
    margin: auto;
    padding: 0px;
    overflow: hidden;
}

h1 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 2.5em;
    font-weight: 500;


}

h2 {
    font-family: 'PT Serif', serif;
    font-size: 1.77em;
    font-weight: 400;

}

h3 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.40em;
    font-weight: 400;

}

h4 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.33em;
    font-weight: 400;

}

h5 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1em;
    font-weight: 400;
}

h6 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.8em;
    font-weight: 400;
}

p {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1em;
}

a {
    text-decoration: none;
}



.logo-topo {
    margin-left: 30px;
}

header img {
    max-width: 100px;
    
}


/* home*/
.banner-home {
    background: url('../img/capa-site.webp')no-repeat 0;
    background-size: cover;
    background-position: center bottom;
    min-height: 400px; /* Altura mínima em pixels */
    height: 80vh;
}

.banner-home {
    /* ... outras propriedades ... */
    height: 800px; /* Altura padrão para telas maiores */
}

@media (max-width: 768px) { /* Para tablets */
    .banner-home {
        height: 60vh;
    }
}

@media (max-width: 480px) { /* Para smartphones */
    .banner-home {
        height: 40vh;
    }
}

.conteudo-home {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.titulo-principal .quadro {
    background-color: rgb(90, 77, 68, 0.5);
    padding: 5%;
    margin-top: 25%;

}

.titulo-principal h1 {
    color: #ffffff;

}

.titulo-principal img {
    max-width: 200px;
    height: auto;
    margin-left: 40%;
    margin-right: auto;
}


/*menu */

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(90, 77, 68, 0.8); /* Mantenha ou ajuste a cor de fundo */
    z-index: 100; /* Garante que o menu fique no topo */
}
.topnav {
  overflow: hidden;
 
}

.topnav a {
  float: right;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1em;
  text-transform: uppercase;
  font-family: 'Hanken Grotesk', sans-serif;
  margin-top: 2%;
  margin-right: 4%;
}

.topnav img{
  
    margin-left: 4%;
}

.topnav a:hover {
    background-color: #f2f2f2;
    color: #000;
}
.topnav .icon:hover{
    background-color: transparent;
    color: #f2f2f2;
}



.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

.topnav.responsive a.active {
  background-color: #dd9d4c;
  color: white;
}

/* seção historia */

.historia {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f6f1ed;
    padding: 5%;
    gap: 30px;
}

.historia div {
    flex: 50%;

}



.historia .botao {
    padding: 15px 32px;

}



.historia img {
    max-width: 100%;
}

.historia div ol {
    display: flex;
    flex-direction: column;
    list-style-type: square;
}

.quadro-servicos {
    background-color: #ffffff;
    padding: 5%;
}

/* seção serviços*/


.servicos .largura {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.servicos h2 {
    text-align: center;
    margin-top: 5%;
}

.sub-titulo {
    font-style: italic;
    text-align: center;
    font-size: 1em;

}

.itens {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;

}

.item img {
    max-width: 100%;
    height: auto;
    flex-wrap: wrap;
}



.itens {
    text-align: left;
}

.item {
    display: flex;
    flex-direction: column;

}

.botao {
    background-color: #dd9d4c;
    padding: 15px 32px;
    border: none;
    color: #000;
    width: max-content;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.8em;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;

}

.botao:hover {
    background-color: #5a4d44;
}

.servicos .orcamento {
    margin: 20px;
}


/* contato*/
.contato-pagina {
    background-image: url('../img/imagens-originais/istock/istockphoto-90858240-1024x1024.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: none;

}

.contato-linha {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 8%;
}

.contato-coluna {
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: #ffffff;
}


.contato-coluna h4,
p,
h6 {
    line-height: 30px;

}

.icones {
    display: flex;
    flex-direction: row;
    justify-content: center;

    height: 100%;
    align-items: center;
}

.icones svg {
    width: 1.3em;
    color: #ffffff;
    margin: 0px 10px;
}

.contato-coluna h6 {
    text-align: center;
    margin-top: 5%;
}



.contato-coluna div img {
    max-width: 100px;
    height: auto;

    margin-top: 8%;
    margin-bottom: 8%;
}

.contato-coluna div {
    padding: 8%;
}

.contato-form {
    background-color: #f6f1ed;

    width: 50%;
}

.contato-form form {
    margin: 8%;
}

.enviar {
    text-align: end;
}

#email-form {
    display: flex;
    flex-direction: column;

}

.contato-form button {
    background-color: #dd9d4c;
    color: #ffffff;
    border: none;
    text-transform: uppercase;
    padding: 15px 32px;
    cursor: pointer;
    margin-top: 3%;
}

.contato-form button:hover {
    background-color: #5a4d44;
}

.contato-form input {
    border: none;
    line-height: 30px;
}

.contato-form label {


    line-height: 30px;
}

.contato-form textarea {
    border: none;
}




/* rodape*/

footer{
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer h1{
    font-size: 16px;
}

footer span{
    font-size: 12px;
}

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

.contatos {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}

.contatos div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3%;
    font-size: 0.8em;
}

.contatos div p {
    margin: 0;
}


/* responsividade 
1280px (desktop)
1024px (tablet - horizontal)
768px (tablet - vertical)
420px (mobile)


*/

@media (min-width:320px) {

    footer h1 {
        margin: 5% 2%;
    }

    .direitos img {
        margin-left: 10px;
    }
    .direitos h1{
        margin-right: 20%;
        text-align: left;
    }

    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

}


@media (max-width:600px) {
    .historia h2 {
        font-size: 1.5em;
    }
      .servicos{
        padding: 0 5%;
    }

    .servicos h2 {
        font-size: 1.5em;
    }


    .conteudo-home {
        width: 100%;
    }

    .banner-home {
        height: 600px;
    }

    .titulo-principal h1 {
        font-size: 1.8em;
    }

    .historia {
        flex-wrap: wrap;
    }

    .itens {
        grid-template-columns: auto auto;
    }

    .item img {
        height: 50%;
    }

    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}


@media (max-width:480px) {
    .contato-linha {
        flex-wrap: wrap;
    }

    .contato-coluna {
        width: 100%;
    }

    .contato-form {
        width: 100%;
    }

    .itens {
        grid-template-columns: auto;
    }
     .direitos{
        gap: 5px;
    }

    footer .contatos {
        flex-direction: column;


        /* smartphones, Android phones, landscape iPhone */
    }
}

@media (min-width:801px) {
      .servicos{
        padding: 0 5%;
    }
    /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}