@charset "UTF-8";

/*dark mode*/

:root {
  --body-bg: #141516;
  --body-color: #899095;
  --link-color: #dee2e6;
  --link-color-hover: #3cc368;
  --titulo-prod: #e6e6e6;
  --cards-font-color: #e6e6e6;
  --bg-suporte: #141516;
  --nav-text-color: #eeeeee;
  --card-suporte: #141516;
  --contatos: #fafafa;
}

.dark-mode:root {
  --body-bg: #fafafa;
  --body-color: #555;
  --link-color: #222;
  --link-color-hover: #ec5840;
  --titulo-prod: #555;
  --cards-font-color: #555555;
  --bg-suporte: #fafafa;
  --nav-text-color: #dfdfdf;
  --card-suporte: #fafafa;
  --contatos: #555555;
}

body { 
  background-color: var(--body-bg);
}

#tituloProd {
  text-align: center; 
  font-size: 45pt;
  color: var(--titulo-prod);
}

#aprod  {
  opacity: 100%;
  color: var(--nav-text-color);
  text-shadow: 2px 2px 5px black;
}

#aprod:hover {
  opacity: 60%;
}

#aquem {
  opacity: 100%;
  color: var(--nav-text-color);
  text-shadow: 2px 2px 5px black;
}

#aquem:hover {
  opacity: 60%;
}

#asup {
  opacity: 100%;
  color: var(--nav-text-color);
  text-shadow: 2px 2px 5px black;
}

#asup:hover {
  opacity: 60%;
}

#awhats {
  opacity: 100%;
}

#awhats:hover {
  opacity: 75%;
}

#darkOn {
  color: var(--nav-text-color);
  text-shadow: 2px 2px 5px black;
  margin-top: 8px;
  margin-left: 10px;
}

#darkOn:hover {
  opacity: 60%;
}

#carrossel p {
  font-family: 'Lato', sans-serif;
  font-size: 3vw;
  text-shadow: 2px 2px 5px black;
}

body::-webkit-scrollbar {
  width: 8px;
  margin: 2px;
  /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: eeeeee;
  /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: #58727f;
  /* color of the scroll thumb */
  border-radius: 3px;
  /* roundness of the scroll thumb */
}

#cardsSite {
  justify-content: center;
  z-index: 900;
}

#cardsSite img {
  filter: brightness(70%);
}

button:hover {
  text-decoration: underline;
}

/*cardNfe*/
#cardNfe {
  border-radius: 15%;
  border-bottom-left-radius: 15%;
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
  text-align: center;
}

#cardNfe:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardNfe img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardNfe:hover img {
  filter: brightness(100%);
}

#cardNfe #tituloNfe {
  text-align: center;
}

#cardNfe figcaption {
  text-align: center;
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardNfe:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardNfe #legendaNfe {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardNfe:hover #legendaNfe {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardNfe button {
  right: 0px;
  bottom: 1vw;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardNfe:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardCupom*/
#cardCupom {
  border-radius: 15%;
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardCupom:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardCupom img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardCupom:hover img {
  filter: brightness(100%);
}

#cardCupom figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardCupom:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardCupom #legendaCupom {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardCupom:hover #legendaCupom {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardCupom button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardCupom:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardTransp*/
#cardTransp {
  border-radius: 15%;
}

#cardTransp:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardTransp img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardTransp:hover img {
  filter: brightness(100%);
}

#cardTransp:hover {
  filter: brightness(100%);
  transform: scale(1.03);
  transition: 1s;
}

#cardTransp figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardTransp:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardTransp #legendaTransp {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardTransp:hover #legendaTransp {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardTransp button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardTransp:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardSup*/
#cardSup {
  border-radius: 15%;
}

#cardSup {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardSup:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardSup img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardSup:hover img {
  filter: brightness(100%);
}

#cardSup figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardSup:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardSup #legendaSup {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardSup:hover #legendaSup {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardSup button {
  bottom: 1vw;
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardSup:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardPed*/
#cardPed {
  border-radius: 15%;
}

#cardPed {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardPed:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardPed img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardPed:hover img {
  filter: brightness(100%);
}

#cardPed figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardPed:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardPed #legendaPed {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardPed:hover #legendaPed {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardPed button {
  bottom: 1vw;
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardPed:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardOrç*/
#cardOrç {
  border-radius: 15%;
}

#cardOrç {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardOrç:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardOrç img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardOrç:hover img {
  filter: brightness(100%);
}

#cardOrç figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardOrç:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardOrç #legendaOrç {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardOrç:hover #legendaOrç {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardOrç button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardOrç:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardEmail*/
#cardEmail {
  border-radius: 15%;
}

#cardEmail {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardEmail:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardEmail img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardEmail:hover img {
  filter: brightness(100%);
}

#cardEmail figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardEmail:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardEmail #legendaEmail {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardEmail:hover #legendaEmail {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardEmail button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardEmail:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}
/*cardRelat*/

#cardRelat {
  border-radius: 15%;
}

#cardRelat {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardRelat:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardRelat img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardRelat:hover img {
  filter: brightness(100%);
}

#cardRelat figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardRelat:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardRelat #legendaRelat {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardRelat:hover #legendaRelat {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardRelat button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardRelat:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardServ*/
#cardServ {
  border-radius: 15%;
}

#cardServ {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardServ:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardServ img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardServ:hover img {
  filter: brightness(100%);
}

#cardServ figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardServ:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardServ #legendaServ {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardServ:hover #legendaServ {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardServ button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardServ:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardEstoq*/
#cardEstoq {
  border-radius: 15%;
}

#cardEstoq {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardEstoq:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardEstoq img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardEstoq:hover img {
  filter: brightness(100%);
}

#cardEstoq figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardEstoq:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardEstoq #legendaEstoq {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardEstoq:hover #legendaEstoq {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardEstoq button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardEstoq:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardCont*/
#cardCont {
  border-radius: 15%;
}

#cardCont {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardCont:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardCont img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardCont:hover img {
  filter: brightness(100%);
}

#cardCont figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardCont:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardCont #legendaCont {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardCont:hover #legendaCont {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardCont button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardCont:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardMig*/
#cardMig {
  border-radius: 15%;
}

#cardMig {
  filter: brightness(100%);
  transition: 1s linear;
  border: 0px;
  text-shadow: 1px 1px 5px black;
}

#cardMig:hover {
  transform: scale(1.03);
  transition: 1s;
}

#cardMig img {
  filter: brightness(70%);
  transition-duration: 1s;
}

#cardMig:hover img {
  filter: brightness(100%);
}

#cardMig figcaption {
  position: absolute;
  top: 0vw;
  font-size: 15pt;
  padding: 2vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardMig:hover figcaption {
  position: absolute;
  top: 2.5vw;
  font-size: 16pt;
  color: white;
  text-shadow: 1px 1px 5px black;
  padding: 2vw;
  opacity: 100%;
}

#cardMig #legendaMig {
  position: absolute;
  top: 20vw;
  font-size: 2vw;
  padding: 2vw;
  color: white;
  opacity: 0%;
  transition: 1s;
}

#cardMig:hover #legendaMig {
  position: absolute;
  top: 10vw;
  font-size: 2vw;
  padding: 2.5vw;
  color: white;
  opacity: 100%;
  transition: 1s;
}

#cardMig button {
  right: 0px;
  position: absolute;
  padding-right: 0vw;
  border: 0px;
  text-align: right;
  color: white;
  background-color: rgb(21, 104, 198);
  padding-bottom: 0.3vw;
  opacity: 1%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#cardMig:hover button {
  bottom: 1vw;
  text-align: right;
  opacity: 100%;
  transition: 1s;
  text-align: right;
  padding-right: 3vw;
  z-index: 999;
}

/*cardPix*/
#cardPix{
  background-color: var(--body-bg);
  max-width: 800px; 
  border: 1px;
}

#cardPix h5 {
  font-size: 25pt;
  color: var(--cards-font-color)
}

#cardPix p {
  color: var(--cards-font-color)
}

/*cardBoleto*/
#cardBoleto{
  background-color: var(--body-bg);
  max-width: 800px; 
  border: 1px;
  text-align: right;
}

#cardBoleto h5 {
  font-size: 25pt;
  color: #4e4e4e;
  color: var(--cards-font-color)
}

#cardBoleto p {
  color: #555555;
  color: var(--cards-font-color)
}

/*Card300Clientes*/
#cardClientes{
  background-color: var(--body-bg);
  max-width: 800px; 
  border: 1px;
}

#cardClientes h5 {
  font-size: 25pt;
  color: var(--cards-font-color)
}

#cardClientes p {
  color: var(--cards-font-color)
}

#cardClientes:hover {
  text-decoration: none;
}

/*cardDuvidas*/
#cardDuvidas{
  background-color: var(--body-bg);
  max-width: 800px; 
  border: 1px;
  text-align: right;
}

#cardDuvidas h5 {
  font-size: 25pt;
  color: var(--cards-font-color)
}

#cardDuvidas p {
  color: var(--cards-font-color)
}

#buttonDuvidas:hover {
  text-decoration: none;
}

/*Sobre Nós*/

#quemsomos {
  font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 15pt;  
  color: var(--cards-font-color);
  padding-top: 50px; 
  padding-left: 10vw; 
  padding-right: 10vw; 
  padding-bottom: 45px;
}

#quemsomos h2 p{
  z-index: 1;
}

#quemsomos #imgSobreNos {
  position: absolute;
  left: 25vw;
  width: 50vw;
  z-index: -1;
  opacity: 50%;
}

/*Suporte*/

#suporte h2{ 
  text-align: center; 
  color: var(--cards-font-color); 
  font-size: 50pt;
}

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

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

#suporte .card {
  border: none;
  background-color: var(--card-suporte);
}

#contatosSuporte {
  background-color: var(--bg-suporte);
  text-align: left;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 40px;
  opacity: 1;
  border: none;
}

#contatosSuporte #imgContatos{
  padding-top: 4vw;
}

#contatosSuporte #imgFundoSuporte {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.5;
}

#contatosSuporte h2 {
  font-size: 30pt;
  color: var(--contatos);
}

#contatosSuporte a {
  text-decoration: none;
  font-size: 13pt;
  color: var(--contatos);
  line-height: 22pt;
}

#contatosSuporte a:hover {
  text-decoration: underline;
  opacity: 80%;
}

#contatosSuporte img {
  padding-right: 5px;
}

/*Localização footer*/

#mainFooter {
  background-color: #252525;
  border-bottom: 4px solid #41b58f;
  padding-bottom: 50px;
  font-size: 10pt;
  font-size: 12pt;
  text-align: center;
  color: #ebebeb;
}

#mainFooter #redes {
  padding-top: 20px;
  margin-bottom: 20px;
}

#mainFooter div a {
  color: #d5d5d5;
  text-decoration: none;
}

#mainFooter img {
  padding-right: 1px;
}

#navbarSite {
  z-index: 999;
}