.elementor-760 .elementor-element.elementor-element-3215b3ea{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:999;}.elementor-760 .elementor-element.elementor-element-5a5a4136{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;bottom:4vw;}body:not(.rtl) .elementor-760 .elementor-element.elementor-element-5a5a4136{right:4vw;}body.rtl .elementor-760 .elementor-element.elementor-element-5a5a4136{left:4vw;}/* Start custom CSS for html, class: .elementor-element-5a5a4136 *//* This is an example, feel free to delete this code */
.tooltip-container {
    width: 50px;
  background:#082B61;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  padding: 0.7em 0.7em;
  border-radius: 50px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.tooltip-container:hover {
  background: #fff;
  transition: all 0.6s;
}
.tooltip-container .text {
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  transition: all 0.2s;
}
.tooltip-container:hover .text {
  fill: #082B61;
  transition: all 0.6s;
}


/* Inicio do tooltip whatsApp */
.tooltip3 {
  position: absolute;
  top: 100%;
  left: 60%;
  transform: translateX(80%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #1db954;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip3 {
  top: 10%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(85%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip3:hover {
  background: #1db954;
  fill: #fff;
}
/* Fim do tooltip whatsApp */

/* Inicio do tooltip dribbble */
.tooltip6 {
    width: 40px;
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translateX(70%);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  fill: #000;
  padding: 10px;
  border-radius: 50px;
  transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip6 {
  top: -79%;
  opacity: 1;
  visibility: visible;
  background: #fff;
  transform: translate(70%, -5px);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
  background: #A2A19B;
  fill: #fff;
}
/* Fim do tooltip dribbble */



/* Inicio do tooltip fixo */
.tooltip9 {
  position: absolute;
  top: 0;
  left: -115%;
  opacity: 0;
  visibility: hidden;
  width: 150px;
  height: 150px;
  z-index: -1;
}

.tooltip-container:hover .tooltip9 {
  top: -110%;
  opacity: 1;
  visibility: visible;
  border-radius: 50%;
  z-index: -1;
}
/* Fim do tooltip fixo */
/* Por meio desse ultimo tooltip todos os outros podem
ficar fixos quando houver no principal, para vê-lo dê um
background black acima*//* End custom CSS */