/* MENU SCROLL ANCORA */
html {
      scroll-behavior: smooth; /* rolagem suave */
    }

/* BANNER PRINCIPAL */

.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Conteúdo sobre o banner */
.banner-content {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 500px;
}

.banner-content h1 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  margin-bottom: 10px;
}

.banner-content p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin-bottom: 20px;
}

.btn {
  background: #00c2ff;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
}

/* ?? Ajuste para mobile */
@media (max-width: 768px) {
  .banner-content {
    position: absolute;
    top: 20%;
    left: 5%;
    transform: none;
    text-align: left;
  }
}

/* ?? Quando gira o celular (paisagem) */
@media (orientation: landscape) and (max-width: 900px) {
  .banner-content {
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }
}

/* FIM BANNER PRINCIPAL */


/* MENU PRINCIPAL */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HEADER */
header {
  background: transparent;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1.0937rem, 1.130vw, 1.2rem);
  font-family : Arial,Tahoma,Verdana;
}


/* BOTÃO MENU */
.menu-btn {
  font-size: 25px;
  color: #2149d0;
  cursor: pointer;
  text-align: center;

}

/* MENU LATERAL */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 170px;
  height: 100%;
  background: #203055;
  padding-top: 60px;
  transition: 0.3s;
  z-index: 1;
}

/* MENU ATIVO */
.sidebar.active {
  left: 0;
}

/* LINKS */
.sidebar a {
  display: block;
  color: #d7def7;
  padding: 15px 20px;
  text-decoration: none;
  border-bottom: 1px solid #314061;
}

.sidebar a:hover {
  background: #4178f3;
  color: #ffffff;
}

/* OVERLAY */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(65,120,243,0.3);
  display: none;
  z-index: 0;
 }

.overlay.active {
  display: block;
}

/* FIM MENU PRINCIPAL */

/* TITULO DOS SERVICOS */

.titulo-extra {
  font-size: 1.5rem;
  color: #111;
  margin-bottom: 15px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;

}
/* TITULO DOS SERVICOS */


/* CORPO TEXTO CARDS */

/* Sections */
h2 { font-size:1.3rem; margin-bottom:25px; color:#0d47a1; text-align:center;  }

/* Cards */
.cards { width:90%; max-width:1200px; margin:60px auto; display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:25px; }
.card { font-size: 1.03rem; font-family: Arial, sans-serif; text-align: center; line-height: 1.6; margin-bottom: 5px; color: #000; background:#fff; padding:25px; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.1); text-align:center; transition:transform 0.3s, box-shadow 0.3s; }
.card:hover { transform:translateY(-8px); box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.card img { width:80px; height:80px; object-fit:contain; margin-bottom:15px; }


/* Animations */
@keyframes fadeIn { 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }

/* Responsivo */
@media(max-width:768px) {
.hero-content h1 { font-size:2rem; }
.hero-content p { font-size:1rem; }
nav ul { flex-direction:column; gap:10px; }
}


/* FIM CORPO TEXTO CARDS */

.linha {
  width: 100px;              /* largura da linha */
  height: 3px;               /* espessura */
  background-color: #2149d0; /* cor */
  margin: 0px auto;         /* centraliza */
  margin: 0 auto 35px auto;
 
 }

.linha2 {
  width: 80%;              /* largura da linha */
  height: 1.0px;               /* espessura */
  background-color: #ffffff; /* cor */
  margin: 0px auto;         /* centraliza */
  margin: 0 auto 5px auto;
 
 }

/* CSS DA AEMPRESA COM <H1> */
/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* SEÇÃO PRINCIPAL */
.aempresa {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* TÍTULO */
.aempresa h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #111;
  text-align: center;
}

/* PARÁGRAFOS */
.aempresa p {
  font-size: 1rem;
  margin-bottom: 18px;
  text-align: justify;
}

/* DESTAQUES */
.aempresa strong {
  font-weight: 700;
  color: #000;
}

/* TABLETS */
@media (max-width: 992px) {
  .aempresa {
    padding: 30px 18px;
  }

  .aempresa h1 {
    font-size: 1.8rem;
  }

  .aempresa p {
    font-size: 0.95rem;
  }
}

/* CELULARES */
@media (max-width: 768px) {
  .aempresa {
    padding: 25px 15px;
  }

  .aempresa h1 {
    font-size: 1.6rem;
    text-align: center;
  }

  .aempresa p {
    font-size: 1.0rem;
    text-align: left;
  }
}

/* CELULARES PEQUENOS */
@media (max-width: 480px) {
  .aempresa h1 {
    font-size: 1.4rem;
  }

  .aempresa p {
    font-size: 1.03rem;
  }
}

/* FIM CSS DA AEMPRESA COM <H1> */


/* CSS PORTFOLIO COM <H3> */
/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* SEÇÃO PRINCIPAL */
.orcamentos {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* TÍTULO */
.orcamentos h3 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #111;
  text-align: center;
}

/* PARÁGRAFOS */
.orcamentos p {
  font-size: 1rem;
  margin-bottom: 18px;
  text-align: justify;
}

/* DESTAQUES */
.orcamentos strong {
  font-weight: 700;
  color: #000;
}

/* TABLETS */
@media (max-width: 992px) {
  .orcamentos {
    padding: 30px 18px;
  }

  .orcamentos h3 {
    font-size: 1.8rem;
  }

  .orcamentos p {
    font-size: 0.95rem;
  }
}

/* CELULARES */
@media (max-width: 768px) {
  .orcamentos {
    padding: 25px 15px;
  }

  .orcamentos h3 {
    font-size: 1.6rem;
    text-align: center;
  }

  .orcamentos p {
    font-size: 1.0rem;
    text-align: left;
  }
}

/* CELULARES PEQUENOS */
@media (max-width: 480px) {
  .orcamentos h3 {
    font-size: 1.4rem;
  }

  .orcamentos p {
    font-size: 1.03rem;
  }
}

/* FIM CSS DE PORTFOLIO COM <H3> */


/* CSS DE ORCAMENTOS COM <H3> */
/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* SEÇÃO PRINCIPAL */
.portfolio {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* TÍTULO */
.portfolio h3 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #111;
  text-align: center;
}

/* PARÁGRAFOS */
.portfolio p {
  font-size: 1rem;
  margin-bottom: 18px;
  text-align: justify;
}

/* DESTAQUES */
.portfolio strong {
  font-weight: 700;
  color: #000;
}

/* TABLETS */
@media (max-width: 992px) {
  .portfolio {
    padding: 30px 18px;
  }

  .portfolio h3 {
    font-size: 1.8rem;
  }

  .portfolio p {
    font-size: 0.95rem;
  }
}

/* CELULARES */
@media (max-width: 768px) {
  .portfolio {
    padding: 25px 15px;
  }

  .portfolio h3 {
    font-size: 1.6rem;
    text-align: center;
  }

  .portfolio p {
    font-size: 1.0rem;
    text-align: left;
  }
}

/* CELULARES PEQUENOS */
@media (max-width: 480px) {
  .portfolio h3 {
    font-size: 1.4rem;
  }

  .portfolio p {
    font-size: 1.03rem;
  }
}

/* FIM CSS DE ORCAMENTOS COM <H3> */

img {
    max-width: 100%;
    height: auto;
}

input[type="text"] {
  width: 100%; /* O input ocupa toda a largura disponível */
  padding: 0.8rem; /* Espaçamento interno confortável */
  margin-top: 1rem; /* Espaço entre label e input */
  box-sizing: border-box; /* Garante que o padding não passe da largura */
  border: 1px solid #dadada;
  border-radius: 4px; /* Bordas arredondadas opcionais */
  color: #666666;
  font-size:13pt; 
  
}
  
input[type="submit"] {
  width: 100%; /* O input ocupa toda a largura disponível */
  padding: 1rem; /* Espaçamento interno confortável */
  margin-top: 1rem; /* Espaço entre label e input */
  box-sizing: border-box; /* Garante que o padding não passe da largura */
  border: 1px solid #dadada;
  border-radius: 23px; /* Bordas arredondadas opcionais */
  color: #ffffff;
  font-size:13pt; 
  background-color: #325EE2  
}
  
textarea {
  width: 100%; /* O input ocupa toda a largura disponível */
  height: 8rem;
  padding: 0.75rem; /* Espaçamento interno confortável */
  margin-top: 1rem; /* Espaço entre label e input */
  box-sizing: border-box; /* Garante que o padding não passe da largura */
  border: 1px solid #dadada;
  border-radius: 4px; /* Bordas arredondadas opcionais */
  color: #666666;
  font-size:13pt; 
  text-align: left; 
}
.img-responsiva {
  max-width: 100%; /* A imagem nunca ultrapassa a largura do container */
  height: auto;    /* A altura ajusta-se proporcionalmente */
}
.faixa-destaque {
  background-color: #f9f9f9;
  padding: 40px 20px;
} 
/* FORMULARIO E IMAGEM LADO A LADO*/
.contato {
  padding: 0px 20px;
  background-color: #f9f9f9;
}

/* Container */
.container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Imagem */
.imagem-contato {
  flex: 1;
}

.imagem-contato img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Formulário */
.formulario-contato {
  flex: 1;
}

.formulario-contato h2 {
  margin-bottom: 10px;
}

.formulario-contato p {
  margin-bottom: 20px;
}

/* Inputs */
form input,
form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Botão */
form button {
  width: 100%;
  padding: 14px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

form button:hover {
  opacity: 0.9;
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    text-align: center;
  }

  .imagem-contato {
    order: -1; /* imagem fica em cima */
  }
} 
.contato {
  padding: 60px 20px;
  background-color: transparent;
}

.container {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

/* Lado esquerdo */
.info-contato {
  flex: 1;
}

.info-contato ul {
  list-style: none;
  padding: 0;
}

.info-contato li {
  margin-bottom: 20px;
}

.info-contato a {
  color: #007BFF;
  text-decoration: none;
}
.texto-vermelho {
  	color: #ff0000;
  	font-size: clamp(1.0937rem, 1.130vw, 1.2rem);
	font-family : Arial,Tahoma,Verdana;
	text-align: center;

}
/* ORGANIZA TELEFONE WHATSAAAP E EMAIL */
.contato-info {
  padding: 0px 20px;
  background-color: transparent;
  text-align: center;
}

/* Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Grid */
.grid-contato {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0px;
  width: 80%;
  margin: 0 auto; /* centraliza horizontalmente */}

/* Cards */
.item-contato {
  background: #ffffff;
  padding: 25px;
  border-radius: 10px;
  border: 0px solid #eee;
  transition: 0.3s;
}

.item-contato:hover {
  transform: translateY(-5px);
}

/* �cones */
.icone {
  font-size: 0px;
  display: block;
  margin-bottom: 10px;
}

/* Links */
.item-contato a {
  display: block;
  margin-top: 0px;
  color: #000000;
  text-decoration: none;
  font-size: clamp(1.0937rem, 1.130vw, 1.2rem);
  font-family : Arial,Tahoma,Verdana;
  text-align: center;
}

.item-contato a:hover {
  text-decoration: underline;
}

/* 📱 Tablet */
@media (max-width: 900px) {
  .grid-contato {
    grid-template-columns: 1fr 1fr;
  }
}

/* 📱 Mobile */
@media (max-width: 600px) {
  .grid-contato {
    grid-template-columns: 1fr;
  }
}
/* CONTATOS DO RODAPE */
.topo-contato {
  width: 100%;
  max-width: 1920px;   /* evita linhas muito longas */
  margin: 0 auto;
  background-image: url("images/rodape.webp");
  padding: 12px;
  color : #ffffff;
  font-size: clamp(1.157rem, 1.5vw, 1.3rem);
  font-family : Arial,Tahoma,Verdana;
  text-align: center;
  line-height: 1.6;
}

.topo-contato a {
  color: #ffffff;
  margin-top : 3%;
  padding-bottom : 0px;
  margin-bottom : 20px;
  margin-left : 20px;
  margin-right : 20px;
  text-decoration: none;
  font-size: clamp(1.157rem, 1.5vw, 1.3rem);
  font-family : Arial,Tahoma,Verdana;
  display: inline-block;
}

.topo-contato a:hover {
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {
  .topo-contato a {
    display: block;
    margin: 8px 0;
  }
}
.rodape {
  width: 100%;
  max-width: 1920px;   /* evita linhas muito longas */
  margin: 0 auto;
  color: #ffffff;              /* cor do texto */
  margin-top : 0px;
  padding-bottom : 20px;
  margin-bottom : 0px;
  margin-left : 0px;
  margin-right : 0px;
  font-size: clamp(1.0937rem, 1.130vw, 1.2rem);
  font-family : Arial,Tahoma,Verdana;
  text-align: center;
  position: relative;
  background-color: #3342d1;
     /* fundo escuro */
}