.elementor-551 .elementor-element.elementor-element-f86e07d{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-551 .elementor-element.elementor-element-f86e07d:not(.elementor-motion-effects-element-type-background), .elementor-551 .elementor-element.elementor-element-f86e07d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0A0A;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}/* Start custom CSS for html, class: .elementor-element-71e02cc */.botaoestrela2 {
  background: #fff;
  border-radius: 100px;
  overflow: hidden;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;
  padding: 0px;
  z-index: 10;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: calc(100% - 3px) !important;
  height: calc(100% - 3px) !important;
}

.botaoestrela3 {
  width: 230px;
  height: 230px;
  background: #000;
  border-radius: 100px;
  overflow: hidden;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  padding: 0px;
  z-index: 10;
  position: absolute;
  mask: conic-gradient(
    from 50deg at 50% 50%,
    #fff 0deg,
    transparent 30deg,
    transparent 50deg,
    #fff 80deg,
    #fff 360deg
  );
  -webkit-mask: conic-gradient(
    from 50deg at 50% 50%,
    #fff 0deg,
    transparent 30deg,
    transparent 50deg,
    #fff 80deg,
    #fff 360deg
  );
  animation: rodarestrelas 3s linear infinite;
}

@keyframes rodarestrelas {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.botaoestrela4 {
  height: 100%;
  width: 100%;
  background: #0c0b0b;
  background-image: url('https://studiolouvredesign.com/wp-content/uploads/2025/09/copy-cropped2-cropped.svg') !important;
  background-position: center center;
  background-size: 30px !important;
  border-radius: 100px;
  overflow: hidden;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0px;
  z-index: 5;
  position: relative;
}

.botaoestrela {
  height: 55px;
  width: 220px;
  background: #292929;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0px;
  z-index: 10;
}

.botaoestrela:before {
  content: '';
  position: absolute;
  background: conic-gradient(
    from 50deg at 50% 50%,
    transparent 0deg,
    #fff 30deg,
    #fff 50deg,
    transparent 80deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rodarestrelas 3s linear infinite;
  opacity: 1;
  left: 50%;
  top: 50%;
  height: 230px;
  width: 230px;
}

.custom-button {
  overflow: hidden;
  height: 100%;
  position: relative;
  border-radius: 100px;
  display: inline-flex;
  font-family: CSS PACK;
  font-weight: 500;
  align-items: center;
  color: #fff !important;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 16px;
  z-index: 30;
}

.custom-button:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100%;
  height: 100px;
  transform: translate(-50%, -50%);
  background: #0d442c;
  opacity: 0;
  border-radius: 100%;
  filter: blur(20px);
  z-index: -1;
  transition: 1s;
}

.custom-button:hover:after {
  opacity: 1;
  transition: 1s;
}

.button-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-303b8fa */@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button {
  isolation: isolate !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  outline-offset: 4px !important;
  font-size: 18px !important;
  font-family: "Degular", sans-serif !important;
  line-height: 1.2 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: linear-gradient(#000000, #000000) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      #00ffb2 var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      #00ffb2 calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box !important;
  box-shadow: inset 0 0 0 1px #1a1818 !important;
  transition: 800ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::before,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::after,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button span::before {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: -1 !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::before {
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
  /* Background pontilhado melhorado */
  background: 
    radial-gradient(
      circle at 2px 2px,
      rgba(0, 255, 178, 0.5) 1px,
      transparent 1px
    ) !important;
  background-size: 5px 5px !important;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  ) !important;
  border-radius: inherit !important;
  opacity: 0.4 !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::after {
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: linear-gradient(
    -50deg,
    transparent,
    #00ffb2,
    transparent
  ) !important;
  mask-image: radial-gradient(circle at bottom, transparent 40%, black) !important;
  opacity: 0.6 !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button span {
  z-index: 1 !important;
  position: relative !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button span::before {
  width: 370px !important;
  height: 90px !important;
  box-shadow: inset 0 -1ex 2rem 4px #00ffb2 !important;
  opacity: 0 !important;
  transition: opacity 1500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:hover,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:focus-visible {
  --gradient-percent: 20% !important;
  --gradient-angle-offset: 95deg !important;
  --gradient-shine: white !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:hover span::before {
  opacity: 1 !important;
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    transform: rotate(360deg) !important;
  }
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::before,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::after {
  animation: gradient-angle 3s linear infinite, shimmer 7.5s linear infinite reverse paused !important;
  animation-composition: add !important;
}

.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:hover,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:hover::before,
.elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button:hover::after {
  animation-play-state: running !important;
}

/* Media query para mobile */
@media only screen and (max-width: 600px) {
  .elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button {
    font-size: 16px !important;
  }
  
  .elementor-551 .elementor-element.elementor-element-303b8fa .elementor-button::before {
    background-size: 6px 6px !important;
  }
}/* End custom CSS */