/* #region adds */
/* container para centralizar o site em 1500px */
/* FONTE */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal; */

/* 
font-family: "roboto", sans-serif;
font-weight: 300;
font-style: normal; */

/* font-family: "cinzel-decorative", sans-serif;
font-weight: 400;
font-style: normal;
 */

/* VARIAVEIS LAYOUT */


/* codigo para sobrepor com hover


.emcima {
  position: relative;
  margin-bottom: -80px;
  z-index: 5; 
}

.embaixo{
  position: relative;
  z-index: 1;
}


*/

/* ! VARIÁVEIS */

:root {
  --cor-texto: #0d0d0d;
  --cor-texto-suave: #f2f2f2;
  --cor-primaria: #f2c230;
  --cor-segundaria: #f2ae30;
  --cor-destaque: #2c2b2b;

  --largura-maxima: 1500px;

  --texto-tamanho: 16px;
  /* rem ou em - 30px / 16px = 1,875em */

  --fonte-menu: "montserrat", sans-serif;
  --fonte-base: "roboto", sans-serif;
  --fonte-especial: "cinzel-decorative", sans-serif;
}

/* ! FIM DAS VARIAVEIS */


/* ? CORPO */
main {
  padding-top: 6rem;
  /* ajuste conforme a altura do seu topo */
}


body {
  font: 300 1em/1.5em var(--fonte-base);
  /* font-weight: 300;
        font-size: 1em;  (16px / 16px = 1em)
        line-height: 1.5; (1.5 * 16 = 24)
        font-family: var(--fonte-base); */

  color: var(--cor-texto);
}


/* * #endregion */


/*TODO #HEADER */

.container {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.topo {
  height: 130px;
  width: 100%;
  background-color: var(--cor-destaque);
  color: var(--text-color);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100;
  z-index: 1000;
}


.topo div h1 {
  width: 310px;
  height: 90px;
  font-size: 0;
  font-size: 30px;
  color: var(--cor-primaria);
  font-weight: 300;
}

.ativo {
  color: var(--cor-texto-suave);
}

nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav a {
  text-decoration: none;
  color: var(--cor-primaria);
  font-size: 16px;
  padding: 5px 0;
  transition: color 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--fonte-especial);
}

nav {
  margin-left: 100px;
}


nav a:hover {
  color: var(--accent-color);
}


/* TODO: REDES */


.redes ul {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.redes ul li {
  position: relative;
  width: 60px;
  /* círculo levemente maior que 41px */
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.redes ul li:hover {
  transform: translateY(-5px);
}

.redes ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #ffcc00;
  transform: scale(0);
  transition: transform 0.3s ease;
  z-index: 0;
}

.redes ul li:hover::before {
  transform: scale(1);
}

.redes ul li img {
  position: relative;
  width: 41px;
  /* mantém o tamanho real da imagem */
  height: 41px;
  z-index: 1;
  transition: filter 0.3s ease, transform 0.3s ease;
  margin-top: 5px;
}

.redes ul li:hover img {
  filter: brightness(0) invert(1);
  transform: scale(1.1);
}


/* * #endregion */

/* TODO BANNER*/

.banner {
  background-color: #252525;
  height: 870px;
  align-items: center;
  border-radius: 0 0 30px 30px;
  width: 100%;
  position: relative;
  z-index: 5;
  transform: translateY(-40px); /* sobrepõe levemente o mapa */
  

}

.banner h1 {
  color: #9b802e;
  font-family: var(--fonte-especial);
  font-size: 60px;
  padding-top: 215px;
  line-height: 50px;

}

.banner p {
  font-size: 40px;
  font-family: var(--fonte-menu);
  color: #ffff;
  margin-top: 60px;
  line-height: 45px;
}


.banner .img {
  margin-top: 185px;
}

/* TODO: QUEM SOMOS */

.qmsomos {
  padding: 50px 0;
  text-align: center;
  margin: 50px auto;
  width: 1500px;
  

}

.qmsomos h2 {
  font-size: 60px;
  font-family: var(--fonte-especial);
}

.qmsomos h2 {
  font-family: var(--fonte-especial);
  font-size: 60px;
  padding-top: 80px;
  margin-bottom: 50px;
}

.qmsomos p {
  font-family: var(--fonte-menu);
  font-size: 30px;
  margin-top: 60px;
  margin-bottom: 60px;
  line-height: 30px;
}

.carrossel {
  padding-bottom: 80px;
  margin-right: auto;
  margin-left: auto;

}

.qmsomos img {
  width: 100%;
  border-radius: 15px;
}

.qmsomos .slick-slide {
  padding: 10px;

  opacity: 0.5;
  transform: scale(0.85);
  transition: all 0.4s ease;
  height: 240px;
  width: 350px;
}

.qmsomos .slick-center {
  opacity: 1;
  transform: scale(1);
  height: 240px;
  width: 350px;
}


/* TODO: SERVIÇOS */
.servicos {
  background-color: #2e2e2e;
  /* cor de fundo escuro */
  color: #fff;
  border-radius: 15px;
  text-align: center;
  padding-bottom: 150px;
}

.servicos h2 {
  font-family: var(--fonte-especial);
  font-size: 50px;
  padding-top: 90px;
  text-align: center;
  margin-bottom: 100px;
}

.slickservico img {
  width: 870px;
  height: 350px;
  border-radius: 15px;
  margin: 0 auto;
  display: block;
}

/* * PONTOS (bolinhas)  */

.servico.slick-dots li button:before {
  font-size: 30px;
  color: #ffb700;
  /* cor das bolinhas */
  opacity: 1;
}

.servico.slick-dots li.slick-active button:before {
  color: #ffb700;
}

/* --- SETAS --- */
.slick-prev:before,
.slick-next:before {
  color: var(--cor-segundaria);
  font-size: 30px;
  position: relative;
  left: -4px;
}

.servico .slick-prev {
  left: -40px;
}

.servico.slick-next {
  right: -40px;
}


.slickservico {
  max-width: 900px;
  margin: 0 auto;
}

.slick-dots li button:before {
  color: var(--cor-segundaria);
  font-size: 40px;
  line-height: 60px;
}


/* TODO: FORM DE SERVIÇOS */

.orçamento {
  width: 100%;
  padding-right: 0px;
  background-color: #333333;
  border-radius: 40px 40px 0px 0px;
}

.orçamento h2 {
  font-size: 30px;
  font-family: var(--fonte-menu);
  color: var(--cor-texto-suave);
  margin-top: 116px;
  line-height: 60px;

}

.orçamento .forms form {
  margin-top: 100px;
  margin-bottom: 70px;

  width: 720px;

}

.orçamento img {
  width: 525px;
  margin-top: 45px;
  margin-bottom: 60px;
  right: 65px;
  position: relative;
}


.orçamento input {
  width: 750px;
  height: 70px;
  background-color: var(--cor-primaria);
  border-radius: 10px;
  margin: 30px;
  justify-content: center;
  font-family: var(--fonte-menu);
  font-weight: bold;
  border: none;
}

.orçamento .botoes {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 30px;
}

.orçamento .botoes button {
  position: relative;
  display: inline-block;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  border: none;
  /* color: #0d0d0d text-transform: uppercase; */
  font-size: 1rem;
  letter-spacing: 0.15rem;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  background-color: #0cf;
  transition: color 0.3s ease;
}


.orçamento .botoes button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50px;
  z-index: -2;
}

.orçamento .botoes button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--cor-primaria);
  transition: width 0.3s ease;
  border-radius: 50px;
  z-index: -1;
}

.orçamento .botoes button:hover::before {
  width: 100%;
}


/* TODO: RODAPÉ */
.footer {
  margin-top: -57px;
  display: flex;
}

.footer img {

  height: 40px;
  width: 66px;
}

.footer ul {
  display: flex;
  gap: 69px;
  text-align: center;
  display: flex;
  align-items: center;
}

.footer h4 {
  color: var(--cor-primaria);
  font-family: var(--fonte-menu);
  font-weight: bold;
}



/* TODO: PORTIFÓLIO */

.portfolio {
  height: 930px;
}


.portfolio div {
  display: flex;
  flex-direction: column;
}

.portfolio div div {
  width: 1311px;
  height: 573px;
  /* background-color: red; */
  text-align: center;
  justify-content: center;
  display: flex;
  border: 3px solid black;
  border-radius: 40px;
  margin-top: 53px;
  margin-bottom: 80px;
  transition: all 0.5s ease;
}

.portfolio h2 {
  font-family: var(--fonte-especial);
  font-size: 60px;
  margin-top: 130px;
  margin-bottom: 80px;
}

.portfolio div div img {
  width: 895px;
  height: 243px;
  transition: all 0.5s ease;
}

.portfolio div div:hover {
  transform: scale(1.5);
}


.portfolio div div:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #f2c230;
}

.portfolio div div:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}



/* * MAPA  */

/* * FINAL MAPA  */


/* todo: FORMULARIO DUVIDAS  */

.formduvidas {
  width: 100%;
  border-radius: 30px;
  background-color: #3d3d3d;
}

.formduvidas h3 {
  font-size: 60px;
  /* 50px */
  font-family: var(--fonte-especial);
  text-align: center;
  padding: 90px;
  /* 80px */
  line-height: 60px;
  color: #fff;
}

.formduvidas p {
  line-height: 30px;
  font-size: 2.5rem;
  /* 40px */
  color: #ffffff;
  font-family: var(--fonte-menu);
  margin-bottom: 50px;
}

.formduvidas form {
  display: flex;
}

.form-esquerda {
  flex-direction: column;
  display: flex;
  gap: 4.375rem;
  /* 70px */
  margin-top: 4.375rem;
  /* 70px */
}

.form-esquerda h3 {
  margin-left: 14rem;
  font-size: 25px;
  color: #ffffff;
  font-family: var(--fonte-menu);
  position: relative;
  bottom: 60px;
}



.form-esquerda input {
  height: 3.125rem;
  /* 50px */
  width: 36rem;
  /* 580px */
  background-color: var(--cor-primaria);
  border: none;
  border-radius: 0.625rem;
  /* 10px */
}

.form-esquerda select {
  height: 3.125rem;
  /* 50px */
  width: 36rem;
  /* 580px */
  background-color: var(--cor-primaria);
  border: none;
  border-radius: 0.625rem;
  /* 10px */
}

.form-direita {
  flex-direction: column;
  display: flex;
  margin-left: 145px;
  margin-top: 4.375rem;
  /* 70px */
}

.form-direita textarea {
  height: 25rem;
  /* 400px */
  width: 45rem;
  /* 730px */
  border-radius: 2.5rem;
  /* 40px */
  border: 0.1875rem solid #f2c230;
  /* 3px */
  resize: none;
  outline: none;
  padding-left: 1.875rem;
  /* 30px */
  padding-top: 1.875rem;
  /* 30px */
  display: flex;
  position: relative;
}



.form-direita .botoes {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 20px;
}

.form-direita .botoes button {
  position: relative;
  display: inline-block;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  border: none;
  color: #0d0d0d;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  background-color: #0cf;
  transition: color 0.3s ease;
}

.form-direita .botoes button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50px;
  z-index: -2;
}

.form-direita .botoes button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--cor-primaria);
  transition: width 0.3s ease;
  border-radius: 50px;
  z-index: -1;
}

.form-direita .botoes button:hover::before {
  width: 100%;
}


/* todo: FINAL FORMULARIO */


/* todo: VIDEO  */

.video {
  padding: 50px 0;
  height: 700px;
  background-color: var(--cor-destaque);
  border-radius: 40px;
}

.video h2 {
  display: flex;
  padding-top: 60px;
  padding-bottom: 50px;
  font-family: var(--fonte-especial);
  font-size: 3.75em;
  align-items: center;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
}

.video h3 {
  font-size: 1.56em;
  font-family: var(--fonte-menu);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  line-height: 30px;
}

.video div {
  background-image: url(../img/fundoVideo.png);
  border-radius: 15px;
  width: 1400px;
  height: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  position: relative;
}

.video a {
  position: absolute;
  top: 35%;
  left: 45%;
  transition: transform 0.2s ease-in-out;
}

.video a:hover {
  transform: scale(1.1);
}


/* todo: FINAL VIDEO */



/* TODO: ÁREA DE FERRAMENTAS */

.area {
  margin: 50px 0;
  background-color: var(--cor-destaque);
  padding: 50px 0;
  height: 520px;
  border-radius: 40px;
}

.area h2 {
  font-family: var(--fonte-especial);
  font-size: 3.75em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
  color: #f2f2f2;
}

.area .container {
  flex-direction: column;
}

.area .imgFerramentas {
  max-width: var(--larguraMaxima);
  margin: 0 auto;
  text-align: center;
}

.area .slick-slide {
  padding: 50px;
}

.area .slick-prev:before,
.area .slick-next:before {
  font-size: 60px;
  color: var(--cor-segundaria);
}

.area .slick-prev {
  left: 75px;
}

.area .slick-prev,
.area .slick-next,
.area .slick-prev:before,
.area .slick-next:before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* todo: FINAL FERRAMENETAS */



/* todo: SEVIÇOS WEB */

.servicosWEB h3 {
  font-size: 60px;
  font-family: var(--fonte-especial);
  color: var(--cor-texto);
  margin-top: 175px;
  margin-bottom: 80px;
  text-align: center;
  display: block;
}


.servicosWEB .container {
  width: var(--largura-maxima);
  height: 345px;

}

.servicosWEB p {
  font-size: 30px;
  font-family: var(--fonte-menu);
  margin-right: 170px;
  margin-top: 57px;
  text-align: left;
  line-height: 30px;
}

.servicosWEB img {
  margin: 0px;
  border-radius: 30px;
}


.servicosMOBI .container {
  margin-top: 80px;
  width: var(--largura-maxima);
  height: 330px;

}

.servicosMOBI p {
  font-size: 30px;
  font-family: var(--fonte-menu);
  text-align: right;
  line-height: 30px;
  margin-left: 115px;
  margin-top: 50px;
}

.servicosMOBI img {
  border-radius: 30px;
}

.servicosMOBI {
  margin-bottom: 100px;
}


/* todo: CARROSSEL QUEM SOMOS */

/* ! Precisa ser direcionado para o local correto do css */


.quemSomos {
  
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
  background: #fff;
  height: 750px;
}

.quemSomos h2 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #1a1a1a;
  text-transform: uppercase;
  font-family: 'Cinzel Decorative', cursive;
  position: relative;
  z-index: 2;
  /* título fica acima do carrossel */
}

.qs {
  position: relative;
}

.qs-img {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 75px;
}

.qs-img img {
  width: 690px;
  height: 480px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.texto-quemSomos {
  width: 720px;
  border: 5px solid #f2c230;
  text-align: left;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.texto-quemSomos p {
  line-height: 40px;
  text-indent: 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  margin: 10px 0;
}

.btn.prev,
.btn.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  color: #f2c230;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.btn.prev {
  left: 20px;
}

.btn.next {
  right: 20px;
}

.btn.prev:hover,
.btn.next:hover {
  color: #1a1a1a;
}

.slick-slide {
  transition: transform 0.9s ease-in-out !important;
}


/* ! PÁGINAS EM MANUTENÇÃO */

.manutençao {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 750px; 
  background-color: #f5f5f5;
  text-align: center;
  font-family: var(--fonte-especial);

  margin-bottom: -80px;
  z-index: 5; 
} */

 .manutençao div {
  display: flex;
  flex-direction: column; 
  align-items: center; 
}

.manutençao div img {
  width: 120px;
  height: auto;
  
  /* espaçamento entre imagem e texto */
  margin-bottom: 20px; 
} 

.manutençao div h2 {
  color: #333;
  font-size: 1.8rem;
}