@charset "UTF-8";


/* Importação de Fontes */
@import url('');


/* Comfiguração Gerias */
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;font: normal 1em 'Calibri';}
html {scroll-behavior: smooth;}
a {color: white;cursor: pointer;}
img{max-width: 100%;object-fit: scale-down;}
.container {max-width: 1349px;margin: auto;}
.pointer{cursor: alias;}


/* variáveis do site */
:root{

    /* Sombras */
    --sombras: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

    /* Botão Hover */
    --botão-hover: #02a054;
    
    /* Fonte dos links */
    --links-font: normal 500 1.1rem 'Calibri';
    
    /* Cor dos links */
    --links-font-color: #000;

    /* Cor do cabeçalho */
    --header-color: #ECB101;

    /* Cor do hover nos itens do menu */
    --hover-itensMenu: blue;

    /* Cor do rodapé  */
    --footer-color: #222222;

    /* Cor das fontes do rodapé */
    --footer-font-color: #fff;

    /* Cor da seção copyright */
    --copyright-color: #000;

    /* Cor do fundo menu mobile */
    --menuMobile-color: #696969;
}


/*Fonts*/
.font1 {font: normal bold 2em 'Calibri';margin: 8px 0 0 25px;}
.font2 {font: normal 700 2rem 'Calibri';margin: 40px 0px;border-bottom: solid;padding-bottom: 25px;word-wrap: break-word;color: black;}
.font3{font: normal 600 1.5rem 'Calibri';margin: 25px 0;color: #000;}
.font4 {font: normal 500 2rem 'verdana';margin: 25px 0; color: #000;}
.font5 {font: normal 700 1.1rem 'Calibri';line-height: 1.7rem;margin: 25px 0;}
.font6{font: normal 100 0.9rem 'Calibri';line-height: 1.2rem;}
.font7{font: normal 700 1.2rem 'Calibri';color: #000;}
.font8{font: normal 100 1.3rem 'Calibri'; margin: 0 0 25px 0;}
.font9{font: normal 700 2.7rem 'Calibri'; margin: 0 0 25px 0;}

/*Configuração elementos*/
.button {display: inline;color: white;background-color: #000;border: none;padding: 15px 30px;font: normal bold 1em 'Calibri';transition: background-color .5s;}
.button:hover {background-color: var(--botão-hover);}
.link{font: var(--links-font);color: var(--links-font);}
strong{font-weight: bolder;color: #ECB101;}

/* Icon do whatsapp */
#whatsapp-fixed img {z-index: 1;position: fixed;right: 0;bottom: 0;margin: 25px;padding: 5px;border-radius: 40%;background-color: #00e676;}


/*Body*/
body{background-color: #ECB101;}
main {width: 100%;position: relative;}
main section {padding: 0 95px;}


/* Cabeçalho*/
#Header {width: 100%;height: auto;position: relative;font: normal bold 1.15em 'Calibri';background-color: var(--header-color);}
#Header-container {padding: 10px 0 10px 0px;display: flex; justify-content: center;align-items: center;}
#Menu-header {display: flex;flex-wrap: wrap;}
nav a button {padding: 5px;}
nav a {margin: 0 20px;}
nav a:hover {color: var(--hover-itensMenu);}

/*Banner*/
#Banner-Main .button {width: 150px;height: 50px;display: block;margin: 32px 17px;}
.bunners{position: relative;z-index: 0;width: 100%;height: 100vh;display: flex;color: white;background-color: rgba(0, 0, 0, 0.59);background-repeat: no-repeat;background-size: cover;background-position: right;}
#Banner-titulo {position: relative;padding: 0px 25px ;margin: 0 auto 0 auto;}
#Banner-titulo img{width: 200px;}
#tituloBunner{display: block;text-align: initial;margin: 0 0 30px 0;}
#tituloBunner p span{font-weight: 800;}
#Banner-titulo p.font1 {font: normal 500 2.7rem 'Calibri';}
#Banner-titulo h1.subtitulo {margin: 0 0 0 209px;}
#description-button{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 30px;}
#description-button p{width: 300px;text-align: initial;margin: 20px 30px 0px;font-size: .9rem;}
.bunner-main{padding: 0;z-index: 1;display: block;width: 100%;height: 100vh;background-repeat: no-repeat;background-size: cover;background-position: bottom;}
.txtBunner2{position: relative;margin: auto;width: 1366px;height: 70vh;}
.txtBunner{position: absolute;bottom: 25px;padding: 25px 50px;}
#bunners-Conteudo{margin: 50px 0;background-position: top;}


/* Página Home */
#Banner-Main {width: 100%;height: 90vh;display: block;position: relative;padding: 70px 0 0 0px;color: #ffffff; background-size: cover;background-repeat: no-repeat;}
#Bunner-MainMain{background-image: url(../img/banner-chaveiro-setor-sudoeste.webp);}

footer .font2{color: white;}


/* Página Serviços */

/*Bunner*/
main > section#Bunner-MainServiços {background-image: url(../img/jpg/Editadas/Prestação\ de\ Serviços.webp);}

#Serviços ul {justify-content: space-evenly;display: flex;flex-wrap: wrap;}
#Serviços ul > li{margin: 25px;}
.ServiçosBox {position: relative;width: 230px;height: 280px;margin: 25px 0;}
.ServiçosBox p {margin: 25px 0; color: black;}
.ServiçosBox button {position: absolute;bottom: 0;}
/*Lista de Serviço*/
#itens-serviços ul{display: flex;justify-content: initial;overflow: auto;gap: 15px;}
.item{min-width: 300px;max-width: 450px;height: 455px;margin: 5px;box-shadow: var(--sombras);}
.item img{height: 220px;}
.item article{padding: 0px 35px 15px 35px;}
.item article a{display: block;   color: #000;}
.scroll::-webkit-scrollbar{display: none;}


/* Página Sobre */

/*Bunner*/
#Serviços-container{margin: 75px auto;}   
#Texto-Foto{display: flex;justify-content: space-around;flex-wrap: wrap;}
#Texto-Foto div{width: 470px;text-align: justify;}
#SobreNos img {margin: 25px 0;}
#SobreNos .button{width: max-content;display: inline-block;margin: 40px auto 20px auto;}
#SobreNos .font4{text-align: start;}

/* Página expisição */
#album-fotos{display: grid;gap: 25px 25px;grid-template-columns: auto auto auto;}
#album-fotos li{display: block;width: 400px;height: 350px;background-color: blue;}

.bttBanner{background-color: #ECB101;color: #000;}

/* Página Contato */

/*Bunner*/
.item-Contato{width: 300px;height: 350px;box-shadow: var(--sombras);padding: 50px 0 ;margin: 25px;background-color: #fff;}
.item-Contato a, #formasContatos a{color: black;}
.altura-linha p{line-height: 2.5rem ;}#map iframe{box-shadow: var(--sombras); max-width: 100%;}
#mapa-itens{display: flex;margin: 150px 0 ;justify-content: space-around;flex-wrap: wrap-reverse;}
#formasContatos li{display: block;color: black;margin: 50px;align-items: center;}
#formasContatos .button{color: white;}
#contatoItens{display: flex;justify-content: space-evenly;text-align: center;flex-wrap: wrap;}
#mapa-itens .font2{margin: 0;}


/* Footer */
footer {position: relative;width: 100%;background-color: var(--footer-color);color: var(--footer-font-color);}
#grid-footer{padding: 70px  30px 90px;}
#listas-footer{width: 100%;display: flex;justify-content: space-evenly;position: relative;}
#Logo-footer{display: block;justify-content: space-around;margin: 20px 0 0 0;}
#logoFooter{margin: 20px 0;}
#Logo-footer article{max-width: 300px;}
#listas-footer li{line-height: 2.2rem;}
.titulo_footer {padding: 15px;}
footer > section {width: 100%;height: auto;background-color: var(--copyright-color);position: relative;bottom: 0;padding: 25px;text-align: center;}


/* Responsividade para celular */
#Menu-mobile,#btn-mobile {display: none;}
header > nav > input {display: none;}

/* Tela até 920px */
@media (max-width: 920px) {
    #listas-footer{display: block;}
    #Logo-footer{display: flex;flex-wrap: wrap;}
}

@media (max-width: 800px) {
    main section {padding: 0 25px;}
    #btn-mobile{display: block;margin: 0 30px 0 0;cursor: pointer;}
    #Menu-header {display: none;}
    #Menu-header li{display: block;}
    #nav.active #Menu-header { display: block; position: absolute; z-index: 1; top: 70px; left: 0; width: 100%; background-color: var(--menuMobile-color) ; padding: 25px; line-height: 10vh;}
}
.negrito{
    color: white;
    font-weight: 600;
}
#Texto-Foto p{
    color: black;
}