.elementor-3331 .elementor-element.elementor-element-58ce72b5{--display:flex;--min-height:5vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-3331 .elementor-element.elementor-element-3fbb7086{width:var( --container-widget-width, 101.98% );max-width:101.98%;background-color:#0068B2;--container-widget-width:101.98%;--container-widget-flex-grow:0;}.elementor-3331 .elementor-element.elementor-element-3fbb7086.elementor-element{--flex-grow:0;--flex-shrink:0;}html.elementor-html{position:relative;}html.elementor-html::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin-right:auto;margin-left:auto;pointer-events:none;z-index:1000;min-height:100vh;}/* Start custom CSS for container, class: .elementor-element-58ce72b5 *//* Main marquee section */
.marquee-section {
  display: flex;
  overflow: hidden;
  height: 30px; /* Altura fixa para o banner. Ajuste este valor conforme necessário. */
  user-select: none;
  gap: 0.5rem;
  padding: 0; /* Remove qualquer padding para garantir que a altura é exata */
  margin: 0; /* Remove qualquer margin para garantir que não há espaço extra */
  background-color: #0068B2;
  color: white;
  align-items: center;
}

/* Inner marquee container */
.infinite-marquee {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  min-width: 100%;
  animation: scroll 15s linear infinite;
}

.infinite-marquee span {
  font-size: 2.5vw;
  font-weight:100;
  white-space: nowrap;
  font-family: 'Confortaa`; bold;
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out;
}

/* Hover effect with smooth scaling and color change */
.marquee-section:hover .infinite-marquee span {
  transform: scale(1.05);
  color: #FFFFFF;
  transition: transform 1s ease-in-out, color 1s ease-in-out;
}

/* Scrolling animation */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 0.5rem));
  }
}

/* Responsividade */
@media only screen and (max-width: 1024px) {
  .marquee-section {
    height: 40px; /* Ajuste a altura para ecrãs maiores */
  }
  .infinite-marquee span {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 768px) {
  .marquee-section {
    height: 35px; /* Ajuste a altura para tablets */
  }
  .infinite-marquee {
    animation-duration: 12s;
  }
  .infinite-marquee span {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 480px) {
  .marquee-section {
    height: 30px; /* Ajuste a altura para telemóveis */
  }
  .infinite-marquee {
    animation-duration: 10s;
  }
  .infinite-marquee span {
    font-size: 6vw;
  }
}/* End custom CSS */