@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700;900&display=swap');

@import url('root.css');
@import url('menu.css');
@import url('slide.css');
@import url('buttons.css');
@import url('forms.css');
@import url('card-effect.css');

html, body {
  font-family: 'Nunito', sans-serif;;
  font-weight: 300;
  font-size: 16px;
  color: var(--preto2);
  height: 100%;
  margin: 0;
}

h1, h2, h3 {
  font-family: 'Nunito', sans-serif;;
  font-weight: 700;
}

h4, h5, h6 {
  font-family: 'Nunito', sans-serif;;
  font-weight: 400;
}

b {font-weight: 800}

a {text-decoration: none !important;}
a:hover {text-decoration: none !important;}


.content-home .quem-somos {
  padding-top: 80px;
}

#diferenciais {
  padding: 80px 0px;
}

#diferenciais .item-titulo {
  position: relative;
}

#diferenciais .item-titulo::before {
  content: '';
  position: absolute;
  background-image: url('../img/ico-linhas.svg');
  width: 100px;
  height: 30px;
}


#diferenciais .item-titulo h3 {
  color: var(--azul);
  padding-top: 40px;
  font-weight: 800;
}


#diferenciais .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 200px;
  cursor: pointer;

  border-radius: var(--redondinho);
  background-color: var(--cinza);
  box-shadow: var(--sombra);
  transition: var(--transicao);
}

#diferenciais .item:hover {
  box-shadow: -5px 5px 40px 0px var(--preto2);
  background-color: var(--preto2);
  transition: var(--transicao);
}

#diferenciais .item img {
  padding-bottom: 8px;
}

#diferenciais .item.collapsed p {
  text-align: center;

}

#diferenciais .item p {
  font-weight: bold;
  color: var(--azul);
  text-align: left;
  padding-left: 8px;
}


div[aria-expanded="true"] {
  flex-direction: row !important;
  justify-content: space-around !important;
  
  height: 110px !important;
  padding: 0px 40px !important;
  
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: var(--redondinho) !important;
  border-top-right-radius: var(--redondinho) !important;
  background-color: var(--preto2) !important;
  box-shadow: none !important;
}

.card-body {
  background-color: var(--cinza);
  box-shadow: var(--sombra);
}

.card-body ul {
  padding-left: 8px;

}

#frase-home {
  background: linear-gradient(90deg, rgb(28 108 180 / 70%), rgb(0 162 231 / 71%)), url(../img/img-frase.jpg);
  background-attachment: fixed;
  background-position: center;
  padding: 60px;
  text-align: center;
  color: var(--cinza);

  display: flex;
  justify-content: center;
  align-items: center;
}

#frase-home h4 {
  font-weight: bold;
  font-size: 21px;
  text-transform: uppercase;
}

#frase-home h2 {
  font-size: 3rem;
  font-weight: lighter;
}

#frase-home p {
  font-weight: bold;
  font-size: 24px;
  padding-bottom: 23px;
}

#servicos-home {
  padding-top: 80px;
  padding-bottom: 30px;
}

#servicos-home .title {
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
}

#servicos-home .title h2 {
  font-size: 2.3rem;
  text-align: center;
  color: var(--azul);
  font-weight: bold;
}

#servicos-home .title::after {
  content: '';
  position: absolute;
  background-image: url('../img/ico-linhas.svg');
  width: 150px;
  height: 28px;
  margin-top: 80px;
}

/*===========================================================================================
  Conteúdo Interno
===========================================================================================*/
.header-interno {
  height: 30vh;
  width: 100%;
  margin-top: 140px;
  margin-bottom: 80px;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-interno h2 {
  font-weight: bold;
  font-size: 3rem;
  color: var(--cinza);
}

.header-interno h4 {
  font-weight: bold;
  color: var(--cinza);
}

.header-interno h2.serv {
  font-weight: lighter !important;
}

.header-interno.quem-somos {
  background-image: url('../img/header-int.jpg');
  background-position: center;
}

/*.conteudo-interno .container {padding-bottom: 80px;}*/

.conteudo-texto-interno p {
  text-align: justify;
}
.conteudo-texto-interno ul {
  list-style: none;
}
.conteudo-texto-interno ul li::before {
  content: "\2022";  
  color: var(--amarelo);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.conteudo-texto-interno h2.title,
.conteudo-texto-interno h4.title {
  color: var(--azul);
  font-weight: bold;
}


#contato .infos h2 {
  color: var(--vermelho);
  padding-bottom: 32px;
}

#contato .infos h3 {
  font-size: 1.3rem;
  font-weight: bold;
  font-family: 'Inter', sans-serif !important;
}

#contato .infos h3 p {
  color: var(--cinza);
}

#contato .form h2 {
  color: var(--azul);
}

/*===========================================================================================
  Rodapé
===========================================================================================*/
footer {
  background-color: var(--preto);
  /*background-color: #f1f2f2;*/
  color: var(--cinza);
  padding-top: 57px;
  padding-bottom: 47px;
  margin-top: 90px;
  display: flex;
  justify-content: center;
}

footer .display-rodape {
  display: flex;
  align-items: center;
}

footer::before {
  content: '';
  position: absolute;
  background-image: url('../img/ico-linhas.svg');
  width: 150px;
  height: 28px;
  margin-top: -150px;
}

.footer-icone,
.footer-ico-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.footer-ico-item {
  align-items: center;
  padding: 0px 8px;
}

.footer-ico-item img {
  margin-bottom: 8px;
}

.footer-ico-item p {
  color: var(--cinza);
  font-weight: bold;
  font-size: 1.3rem;
}


.footer-img > img {
  margin: 24px auto;
  max-width: 300px;
}

footer .lista-rodape {
  color: var(--cinza);
}

footer .lista-rodape p {
  font-weight: bold;
  text-transform: uppercase;
}

footer .lista-rodape ul {
  padding-left: 0px;
}
footer .lista-rodape ul li {
  list-style: none;
  padding: 4px 0px;
}


.copyright {
  background-color: var(--preto);
  border-top: 1px solid #495761;
  width: 100%;
  text-align: center;
  padding: 10px 0px;
}

.copyright p {
  margin-bottom: 0px;
  font-size: 13px;
  color: #495761;
}

footer a {
  color: var(--cinza);
}

footer a:hover {
  color: var(--cinza);
  opacity: .5;
}

.copyright a {
  color: #495761;
}


.copyright a:hover {
  color: yellow;
}

/*------------------------------------------------------------------*/
/* GOOGLE MAP */
/*------------------------------------------------------------------*/

.gmap {
  height: 450px;
}

.gmap div {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}  

#map{
  display: block;
  width: 100%;
  height: 450px;
  margin: 0 auto;
}

#map.large{
  height:450px;
}

#map img {
  max-width:none !important;
  height:auto;
}

/* ==========================================================================
   Arrow Slide
========================================================================== */
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
  position: absolute;
  bottom: 30px;
  left: 49%;
  width: 2%;
  height: 50px;
  background-image: url(../img/abaixo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}