:root {
  --color-001: #444;
  --color-002: #005954;
  --color-003:#004541;
  --color-004:#b06f04;
  --color-005:#FFF;
  --color-006: #805207;
  --background-001: #005954;
  --background-002: #EEE;
  --bs-navbar-toggler-icone:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2800, 89, 84, 100%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

body {
  scroll-behavior: smooth;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--background-001);
}

/*p {color: var(--color-001);}*/

h1, h2, h3, h4 {
  letter-spacing: -.065rem;
}

h2 {
  font-size: 3.5rem;
}

.btn-success {
  background-color: var(--color-002) !important;
  border: none;
}

.btn-success:hover {
  background-color: var(--color-003) !important;
}

/*-- botao de cor customizada para fundos escuros --*/
.btn-success.btn-yellow {
  background-color: var(--color-004) !important;
}
.btn-success.btn-yellow:hover {
   background-color: var(--color-006) !important;
 }

/*--| header |----------*/
header {
  background: #FFF;
  background: -webkit-linear-gradient(180deg,rgba(255, 255, 255, 1) 20%, rgba(238, 238, 238, 1) 100%);
  background: -moz-linear-gradient(180deg,rgba(255, 255, 255, 1) 20%, rgba(238, 238, 238, 1) 100%);
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 20%, rgba(238, 238, 238, 1) 100%);
}

header .logo-header {
  max-width: 114px;
}

header h2 {
  color: var(--color-002);
}

/* NAV principal */
.btn-outline-nav {
  color: var(--color-002);
  border-color: var(--color-002) !important;
  border-width: 2px !important;
  font-weight: 800;
  font-size: .875rem;
  padding: .25rem .5rem !important;
}

.btn-outline-nav:hover {
  color: #FFF;
  background-color: var(--color-002);
}

.redes .nav-link {
  color: var(--color-002)!important;
  font-size: 1.5rem !important;
}

.navbar-toggler {
  background-color: transparent;
  border: none;
}

.navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icone);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 transparent !important;
}

.navbar-toggler:hover {
    text-decoration: none;
}

/*--- HERO ---*/
#Hero .img-custom {
  top: 0rem;
  transition: top .3s ease-out;
}

#Hero .img-custom:hover {
  top: -3rem;
  transition: top .3s ease-in;
}

/*--- porque ---*/
#Porque {
  background: #005954;
  background: -webkit-linear-gradient(180deg,rgba(0, 89, 84, 1) 40%, rgba(0, 69, 65, 1) 100%);
  background: -moz-linear-gradient(180deg,rgba(0, 89, 84, 1) 40%, rgba(0, 69, 65, 1) 100%);
  background: linear-gradient(180deg,rgba(0, 89, 84, 1) 40%, rgba(0, 69, 65, 1) 100%);;
}

#Porque .card {
  background-color: var(--color-002);
  transition: color .2s ease;
}

#Porque .card:hover {
  background-color: var(--color-004);
}

#Porque .card-text {
  color: var(--color-005);
}

#Porque .icon {
  max-width: 176px;
  color: var(--color-004);
  transition: color .2s ease;
  margin-bottom: 1rem;
}

#Porque .card:hover .icon {
  color: var(--color-003);
}

/*--- Diferencial ---*/
#Diferencial {
  background-color: var(--color-003);
}

#Diferencial .img-custom {
  top: 0;
  transition: top .3s ease-out;
}

#Diferencial .img-custom:hover {
  top: -3rem;
  transition: top .3s ease-in;
}

/*---  Beneficios --*/
#Beneficios {
  background-color:  var(--color-002);
}

#Beneficios ul li {
  font-size: 1.25rem;
  padding: .25rem;
  transition: background-color .2s ease;
}

#Beneficios ul li:hover {
  background-color: var(--color-003);
  border-radius: .5rem;
}

#Beneficios ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: var(--color-004);
    font-size: 2rem;
    margin: .5rem;
    position: relative;
    top: 6px;
}

#Beneficios .img-custom {
  top: -4rem;
  transition: top .3s ease-out;
}

#Beneficios .img-custom:hover {
  top: 0;
  transition: top .3s ease-in;
}

/*--- Onde estamos ---*/
#OndeEstamos { background-color: var(--background-002); }

#OndeEstamos h2 {
  color:var(--color-002);
}

#OndeEstamos h3 {
  color:var(--color-001);
}

#OndeEstamos small {
  color:var(--color-001);
}

#OndeEstamos .logo {
  max-height: 164px;
}

#OndeEstamos .card {
  background-color: var(--color-005);
}

#OndeEstamos .card-body {
  background-color: var(--color-002);
}

#OndeEstamos .map-container {
  margin-bottom: -.5rem; /* corrigir espaço abaixo do mapa */
  margin-top: 2rem;
}

#OndeEstamos .map-container iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 10;
}

/*--- Empresas ---*/
#Empresas {
  background-color:var(--color-005);
}

#Empresas h2 {
  color:var(--color-002);
}

#Empresas h3 {
  color:var(--color-001);
}

#Empresas .marcas-lista img {
  width: 196px;
  height: auto;
  border: 0px;
}

#Empresas.img-thumbnail {
  background-color: transparent;
}

/*---  Para Quem --*/
#ParaQuem {
  background-color:  var(--color-003);
}

#ParaQuem ul li {
  font-size: 1.25rem;
  padding: .25rem;
  transition: background-color .2s ease;
}

#ParaQuem ul li:hover {
  background-color: var(--color-003);
  border-radius: .5rem;
}

#ParaQuem ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: var(--color-004);
    font-size: 2rem;
    margin: .5rem;
    position: relative;
    top: 6px;
}

#ParaQuem .img-custom {
  left: 0;
  transition: left .3s ease-out;
}

#ParaQuem .img-custom:hover {
  left: -3rem;
  transition: left .3s ease-in;
}

/*--- CTA --*/
#CTA {
  background-color: var(--color-002);
}

#CTA .bg {
  background: url(../images/img-006.jpg) no-repeat center;
  background-size: cover;
  min-height: 560px ;
  border-bottom-left-radius: 60%;
  border-bottom-right-radius: 1.5rem;
}

/* Footer */
footer {
  background: url(../images/det-bg-footer.svg) var(--color-003) no-repeat top left;
  background-size: contain;
}

/*----------------------------------------------------*/
/* @media queries */
/*----------------------------------------------------*/

/* Dispositivos large (desktops com menos de 1200px) */
@media (max-width: 1199.98px) {
  .btn-outline-nav {
    font-size: .75rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .redes .nav-link {
    font-size: 1.25rem !important;
  }

  #Porque {
    background: #005954;
    background: -webkit-linear-gradient(180deg, rgba(0, 89, 84, 1) 20%, rgba(0, 69, 65, 1) 100%);
    background: -moz-linear-gradient(180deg,rgba(0, 89, 84, 1) 20%, rgba(0, 69, 65, 1) 100%);
    background: linear-gradient(180deg, rgba(0, 89, 84, 1) 20%, rgba(0, 69, 65, 1) 100%);
  }
}

/* Dispositivos medios (tablets com menos de 992px) */
@media (max-width: 991.98px) { 
/*  .navbar-brand {
    margin: 0 auto;
  }
*/
  .navbar-nav {
    height: 100%;
    color: var(--color-005);
    border-bottom: 1px solid var(--color-003);
  }

  .redes .navbar-nav {
    flex-direction: row;
    justify-content: end;
  }

  .redes .nav-item {
    margin: 0 1rem;
  }

  .redes .nav-link {
    font-size: 2rem !important;
  }


.btn-outline-nav {
    border-color: transparent; !important;
    border-width: 0 !important;
    font-size: 2rem;
    padding: 1rem !important;
    color: var(--color-002);
    text-align: right;
  }

  #Porque {
    background: #005954;
    background: -webkit-linear-gradient(180deg, rgba(0, 89, 84, 1) 5%, rgba(0, 69, 65, 1) 100%);
    background: -moz-linear-gradient(180deg,rgba(0, 89, 84, 1) 5%, rgba(0, 69, 65, 1) 100%);
    background: linear-gradient(180deg, rgba(0, 89, 84, 1) 5%, rgba(0, 69, 65, 1) 100%);
  }

  #Empresas .marcas-lista img {
    width: 20vw;
  }

  #Beneficios .img-custom {
    top: 0rem;
  }

  #Beneficios ul li:before,
  #ParaQuem ul li:before {
    /*display: flex;
    justify-content: center;*/
    top: 0;
    margin: 0.3rem;
    font-size: 1.5rem;
  }

  #Beneficios ul li,
  #ParaQuem ul li {
    padding-bottom: .5rem;
  }

  #CTA h2 {
    font-size: 2.5rem;
  }

}

 /*/ Dispositivos small (telefones em modo paisagem, com menos de 768px) */
@media (max-width: 767.98px) {

/*--- tirar animacoes responsivo ---*/
* {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
  }

  h2 {
    font-size: 2.5rem;
  }

  .img-custom {
    top: 0 !important;
    width: 75%;
    margin: 0 auto;
    display: block;
  }

  .img-custom:hover {
    top: 0 !important;
  }

 .btn-success:hover {
    background-color: var(--color-002) !important;
  }

  #OndeEstamos .map-container iframe {
    aspect-ratio: 2 / 2;
  }

  #OndeEstamos .logo {
    max-height: 96px;
  }

  #OndeEstamos .map-container {
    margin-top: 1rem;
  }

  #CTA h2 {
    font-size: 2rem !important;
  }

}

/* Dispositivos extra small (telefones em modo retrato, com menos de 576px) */
@media (max-width: 575.98px) { 
  .navbar-brand img { 
    height: 4rem;
  }

.btn-outline-nav {
    font-size: 1rem;
  }

  .logo-footer {
    width: 33.3%;
  }

  h2 {
    font-size: 2rem !important;
  }

  p {
    font-size: .875rem;
  }

  #Porque .icon {
    max-width: 128px;
  }

  #Beneficios ul li {
    font-size: 1rem;
    line-height: 1;
  }

  #Empresas .marcas-lista img {
  width: 40vw;
  }
}

/* modal especialidades (nao tem no boostrap) */
@media (min-width: 1200px) {

}