*{
    margin: 0;
    padding: 0;
}

:root{ 
    --verde1:#006d5b;
    --verde2:rgba(3, 44, 41, 0.815); 
    --hover: rgba(45, 189, 177, 0.815) ;  
}

.texto{
    font-family: 'Raleway', sans-serif;
    font-size: 1.0em;
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 2%;
    margin-top: 5vh;
    padding-top: 5vh;

}

.texto strong{
    color:var(--hover);
}

.endereco strong{
    color:var(--hover);
}


.imagem-container {
    position: relative;
    height: auto;
    width: 35%;
    margin-left: 10%;
    margin-bottom: 30%;
    
    @media (max-width: 768px) {
      width: 80%; 
      margin-bottom: 70%;
    }
  }
  
  
  .foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0; 
    transition: opacity 1s ease; 
  }
  
  .ativa {
    opacity: 1; 
  }
  
  .container-mapa {
    position: relative;
    margin-top: -28%;
    float: right;
    height: auto;
    width: 35%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 2%;
    
    @media (max-width: 768px) {
      width: 80%; 
      margin-bottom: 5%;
    }
  }
  
  #gmp-map{
    width: 100%;
    height: 350px;
    border: 1px solid #c0c0c0;
  
    @media (max-width: 768px) {
    width: 100%; 
    margin-top: 30%;
  }
}

.btngps{
  margin-top: 3%;
  margin-right: 5%;
  width: 180px;
  background-color: transparent; 
  border: 1px solid #ccc; 
  color: #333; 
  padding: 3px 16px; 
  border-radius: 8px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-family: 'Raleway', sans-serif;
  font-size: 1.0em;
  cursor: pointer;
}
.btngps:hover{
  background-color: #f2f2f2;
}

.endereco {
    width: 80%;
    height: auto;
    font-family: 'Raleway', sans-serif;
    font-size: 1.0em;
    text-align: left;
    margin-left: 10%;
    margin-bottom: 5%;
    float: left;
}