@charset "UTF-8";

/* Importação de Fontes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@300;600;700&display=swap');

/* Comfiguração Gerias */
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;font: normal 1em 'arial';}
html {scroll-behavior: smooth;}
a {color: white;}
img{max-width: 100%;object-fit: scale-down;}
.container {max-width: 1349px;margin: auto;}
::selection {
    background-color: #FEBE10;
    color: black;
}
/* variáveis do site */
:root{

    /* Sombras */
    --sombras: 0px 8px 24px 0px rgba(140, 149, 159, 0.2);;

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

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

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

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

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

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

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

/*Fonts*/
.font1 {font: normal bold 2em 'arial';margin: 8px 0 0 25px;}
.font2 {font: normal 700 2rem 'Arial';margin: 40px 0px;text-align: center;padding-bottom: 25px;word-wrap: break-word;}
.font3{font: normal 600 1.5rem 'Arial';margin: 25px 0;}
.font4 {font: normal 600 2rem 'verdana';margin: 25px 0; color: #163486;}
.font5 {color: #222337;text-align: center;font-family: Inter;font-size: 1.5rem;font-style: normal;font-weight: 500;line-height: normal;margin: 25px 0;}
.font6{color: #222337;font-family: Inter;font-size: 1rem;font-style: normal;font-weight: 300;line-height: 20px;}
.font7{color: #FFF;text-align: center;font-family: Inter;font-size: 2.5rem;font-style: normal;font-weight: 800;line-height: normal;}
.font8{color: #FFF;font-family: Inter;font-size: 1.5625rem;font-style: normal;font-weight: 400;line-height: 2.1875rem; /* 140% */; margin: 0 0 25px 0;max-width: 562px;}
.font9{color: #FFF;font-family: Inter;font-size: 3rem;font-style: normal;font-weight: 700;line-height: normal; margin: 0 0 25px 0;}
.font10{font: normal 500 1rem 'verdana';margin: 0 0 -20px 0;line-height: 35px;}
.font11{font: normal 700 2rem 'Arial';margin: 20px 0px;text-align: center;word-wrap: break-word;color: #1E49BC;border: none;
    /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), inset 0px -3px 0px rgba(0, 0, 0, 0.2);padding: 15px;border-radius: 5px; */
}

select#Select_areas {border: 2px solid;border-radius: 25px;padding: 5px 20px;}

/*Configuração elementos*/
.button {display: block;cursor: pointer;color: rgb(255, 255, 255);background-color: #F5B70F;border: none;padding: 15px 30px;font: normal bold 1em 'arial';transition: background-color .5s;transition: scale .5s ;background: linear-gradient(271deg, #1E49BC 0%, #17368D 100%);box-shadow: -34.99467086791992px -0.6108342409133911px 70px 0px rgba(5, 13, 34, 0.24), -10.964996337890625px -0.19139471650123596px 10.966666221618652px 0px #1F4CC3 inset, 10.964996337890625px 0.19139471650123596px 10.966666221618652px 0px #163486 inset;margin: 50px auto;}
.button:hover {background-color: var(--botão-hover); scale: 105%; }
.link{font: var(--links-font);color: var(--links-font);}

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

/*Body*/
main {width: 100%;position: relative;}
main section {padding: 0 95px;}

/* Cabeçalho*/
#Header {width: 100%;height: auto;position: relative;font: normal bold 1.15em 'arial';background-color: var(--header-color);z-index: 2;}
#Header-container {padding: 30px 0 30px 25px;display: flex; justify-content: space-between;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%;min-height: 101vh;display: flex;color: white;background-color: transparent;background-repeat: no-repeat;background-size: cover;background-position: right;align-items: center;text-align: center;justify-content: center;}
#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 'Arial';}
#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%;min-height: 70vh;background-repeat: no-repeat;background-size: cover;}
.txtBunner2{position: relative;max-width: 1366px;min-height: 70vh;padding: 25px 0;}
#bunners-Conteudo{margin: 50px 0;background-position: top;background-image: url(../img/jpg/plano-de-fundo-do-site-itec-solucaoes.webp);}


/* 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;background-image: url(../img/jpg/Editadas/Câmera\ de\ Segurança.webp);}
#Bunner-MainMain{background-image: url(../img/jpg/plano-de-fundo-do-site-itec-solucaoes.webp);top: -85px;position: relative;z-index: 1;height: 100%;}

section#atuacao {position: relative;top: -270px;margin-bottom: -220px;}

/* 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: 300px;height: 300px;margin: 25px 0;background-color: rgb(255, 255, 255);text-align: center;z-index: 2;display: flex;box-shadow: 0px 11px 20px -4px rgb(169 166 166 / 34%);transition: background .5s;transition: scale .5s; align-items: center;flex-direction: column;justify-content: center;}
.ServiçosBox:hover {background-color: #FFCD11;scale: 105%;}
.ServiçosBox p {margin: 25px 0;}
.ServiçosBox button {position: absolute;bottom: 0;}
/*Lista de Serviço*/
#itens-serviços ul{display: flex;justify-content: center;overflow: auto;gap: 15px;flex-wrap: wrap;}


.item{min-width: 300px;max-width: 310px;height: 490px;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;}

/* Sessão Solicite um Orçamento */
#soliciteOrçamento{width: 100%; text-align: center; padding: 40px 0; color: #fff;}
#soliciteOrçamento .container article { margin: 25px 0 0 0;}
#soliciteOrçamento .container #telefone {margin: 20px 0; }
#soliciteOrçamento .container #regiao span { font-size: 5rem; margin: 0 25px; }
#soliciteOrçamento .container .button {display: block; margin: 40px auto; width: 300px; background-color: #05cf23; color: rgb(0, 0, 0);}
#soliciteOrçamento .container .button:hover {background-color: #05cf2300; color: #05cf23; border: 1px solid #05cf23; width: 350px; transition: background-color .5s;}

/*Prova-Social*/    
#itens-feedback ul{display: flex;overflow: auto;gap: 60px;}
#itens-feedback ul .item{min-width: 350px;max-width: 300px;height: 330px;margin: 5px;box-shadow: 0px 8px 24px 0px rgba(140, 149, 159, 0.2);text-align: center;}
#itens-feedback ul .item img{height: 60px;width: 60px;border-radius: 50%;margin: 30px 20px 0px 20px;}
#itens-feedback ul.avaliação{gap: 0;margin: 10px 0;width: 100%;justify-content: center;margin: 10px 0;}
#itens-feedback ul.avaliação img{margin: 0;width: 100%;height: inherit;}
#itens-serviços ul{display: flex;justify-content: center;overflow: auto;gap: 50px;flex-wrap: wrap;}
.item img{height: 220px;}
.item article{padding: 0px 20px 15px 20px;}
.item article a{display: block;color: #1E49BC;text-align: end;bottom: -30px;position: relative;}
.scroll::-webkit-scrollbar{display: none;}

#OutrosServices {}
#OutrosServices p{padding: 0 10px;}

#provasocial{margin: 70px 0;}

/* Página Sobre */

/*Bunner*/
main > section#banner2 {background-position: left top;background-image: url(../img/jpg/eletricista-itec-solucoes-em-campinas.webp);min-height: 100vh;background-size: cover;background-repeat: no-repeat;}  

.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;}

/* Página Contato */

/*Bunner*/
main > section#Bunner-MainContato {background-position: center;background-image: url(../img/jpg/Editadas/Suporte\ -\ Inside\ segurançwebp);
}

.item-Contato{width: 300px;height: 350px;box-shadow: var(--sombras);padding: 50px 0 ;margin: 25px;}
.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);background-image: url("../img/jpg/plano-de-fundo-do-site-itec-solucaoes.webp");background-size: cover;background-repeat: no-repeat;background-position: center;}
#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;}

#Bunner-MainMain .button, #soliciteOrçamento .button, #lista-contato .button{background: #FEBE10;margin:auto;box-shadow: -25.81298828125px 3.6277787685394287px 52.13333511352539px 0px rgba(51, 38, 3, 0.33), -9.522124290466309px 1.338247299194336px 9.615703582763672px 0px #FFCD11 inset, 9.522124290466309px -1.338247299194336px 9.615703582763672px 0px #E5AB0E inset;color: black;}

#soliciteOrçamento .button{background-color: transparent;margin:0;box-shadow: -25.81298828125px 3.6277787685394287px 52.13333511352539px 0px rgba(51, 38, 3, 0.33), -9.522124290466309px 1.338247299194336px 9.615703582763672px 0px transparent inset, 9.522124290466309px -1.338247299194336px 9.615703582763672px 0px transparent inset;}

/* 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;}

    #itens-serviços ul{display: flex;justify-content: initial;overflow: auto;gap: 15px;flex-wrap: nowrap;}
}

@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;margin: 60px 0;}
    #nav.active #Menu-header { display: block; position: absolute; z-index: 10; top: 70px; left: 0; width: 100%; background-color: var(--menuMobile-color) ; padding: 25px; line-height: 9vh;}  
    
    
}
@media (max-width: 370px) {
    .bunners{min-height:140vh ;}
    .font9{font-size: 2rem;}
}