@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");

* {
  font-family: "Montserrat", sans-serif;
}

:root {
  --primary: #00b4e8;
  --secondary: #01566b;
  --tertiary: #26d0f4;
  --fourth: #4b4a4a;
  --btn-color: #00b4e8;
  --title: #b82828;
  --text: #141414;
  --btn-hover-color: #0e98be;
  --btn-border-color: #045a72;
}

/* .animated-element {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateZoom 4s infinite;
  transform-style: preserve-3d;
} */

@keyframes rotateZoom {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(360deg) scale(1);
  }
  100% {
    transform: rotateY(360deg) scale(1.2);
  }
}

.gradient-text {
  background: linear-gradient(90deg, var(--title), var(--text));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-background {
  background: linear-gradient(90deg, var(--title), var(--text));
}

::-webkit-scrollbar {
  width: 12px; /* Ancho del scroll */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color del fondo del scroll */
}

::-webkit-scrollbar-thumb {
  background-color: var(--secondary); /* Color del scroll */
  border-radius: 10px; /* Bordes redondeados del scroll */
  border: 3px solid #f1f1f1; /* Espacio alrededor del scroll */
}

/* Estilo para el scroll cuando se pasa por encima */
::-webkit-scrollbar-thumb:hover {
  background-color: #0e98be; /* Cambia el color cuando el usuario pasa el mouse por encima */
}

h1,
h2,
h3 {
  text-transform: capitalize;
}

.submenu-container {
  display: block; /* Cambiado a block para permitir transiciones */
  opacity: 0; /* Iniciar invisible */
  transform: translateY(-10px); /* Mover ligeramente hacia arriba */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */
  pointer-events: none; /* Evitar interacción cuando está oculto */
  z-index: 999 !important;
  /* ...otros estilos... */
}

.submenu-container a {
  position: relative;
  overflow: hidden; /* Mantiene el pseudo-elemento dentro del enlace */
  display: block; /* Hace que el enlace ocupe todo el espacio disponible */
}

.submenu-container a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px; /* Altura del borde */
  background-color: var(
    --secondary,
    blue
  ); /* Color del borde, azul por defecto o usa una variable CSS */
  transition: width 0.5s ease; /* Transición suave de la animación del borde */
}

.submenu-container {
  display: none;
}

.submenu-container a {
  border-bottom: 1px dotted rgb(193, 193, 193);
}

.submenu-container a:hover::before {
  width: 100%; /* Extiende el borde a lo largo de todo el ancho al hacer hover */
}

.content_subItems:hover > .submenu-container {
  opacity: 1; /* Hacer visible al hacer hover */
  transform: translateY(0); /* Mover a la posición original */
  pointer-events: auto; /* Permitir interacción cuando está visible */
  z-index: 999 !important;
  display: block;
}

/* Animation Border */
.animation_border a {
  position: relative;
  overflow: hidden; /* Mantiene el pseudo-elemento dentro del enlace */
  display: block; /* Hace que el enlace ocupe todo el espacio disponible */
}

.animation_border a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px; /* Altura del borde */
  background-color: var(
    --secondary,
    blue
  ); /* Color del borde, azul por defecto o usa una variable CSS */
  transition: width 0.5s ease; /* Transición suave de la animación del borde */
}

.animation_border {
  display: none;
}

.animation_border a {
  border-bottom: 1px dotted rgb(193, 193, 193);
}

.animation_border a:hover::before {
  width: 100%; /* Extiende el borde a lo largo de todo el ancho al hacer hover */
}

/* Scrollbar */
.content_scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 50%;
}

.content_scroll::-webkit-scrollbar:vertical {
  width: 6px;
}

.content_scroll::-webkit-scrollbar-button:increment,
.content_scroll::-webkit-scrollbar-button {
  display: none;
}

.content_scroll::-webkit-scrollbar:horizontal {
  height: 10px;
}

.content_scroll::-webkit-scrollbar-thumb {
  background-color: #3f7acc;
  border-radius: 20px;
  border: 2px solid #f1f2f3;
  height: 50px;
}

.content_scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #0f172a00;
}

.content_scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 50%;
}

.content_scroll_hidden::-webkit-scrollbar:vertical {
  width: 0px;
}

.content_scroll_hidden::-webkit-scrollbar-button:increment,
.content_scroll_hidden::-webkit-scrollbar-button {
  display: none;
}

.content_scroll_hidden::-webkit-scrollbar:horizontal {
  height: 10px;
}

.content_scroll_hidden::-webkit-scrollbar-thumb {
  background-color: #8041b8;
  border-radius: 20px;
  border: 2px solid #f1f2f3;
  height: 50px;
}

.content_scroll_hidden::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #0f172a00;
}

/* Animaciones de imagenes */
@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-in-animation {
  animation: zoomIn 0.5s ease forwards;
}

/* Responsive Marks */
.logo-container img {
  max-width: 100%; /* O un tamaño específico */
  max-height: 100px; /* Ajusta esto al tamaño deseado */
  object-fit: contain; /* Mantiene las proporciones sin recortar */
}

.loader {
  text-align: center;
  display: flex;
}
.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background: black;
  border-radius: 16px;
  animation: loader 0.8s infinite alternate;
}
.loader span:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {
  animation-delay: 0.6s;
}
@keyframes loader {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}

.container-floating-widget:hover .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  font-size: 32px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}
.container-floating-widget:hover .principal-btn {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}
@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
.nds {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-self: center;
  z-index: 1;
  cursor: pointer;
}
.nd1 {
  background: #2bd34b;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
}
.nd2 {
  background: var(--secondary-color);
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
}
.nd3 {
  background: #00aae8;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
.nd4 {
  background: #f29d35;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
.nd4 {
  background: #410202;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

/* Hero Section */

.pic-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pic-wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.507);
}

@media only screen and (max-width: 600px) {
  .pic-wrapper::after {
    background: rgba(0, 0, 0, 0.39);
  }
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  background-size: cover;

  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-1 {
  opacity: 1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  background-repeat: no-repeat;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-size: cover !important;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-size: cover !important;
}

/* keyframes*/

@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transformm: scale(1);
  }
}

@-o-keyframes slideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -o-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -o-transformm: scale(1);
  }
}

@-moz-keyframes slideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -moz-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -moz-transformm: scale(1);
  }
}

@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}

/* Animación de apertura y cierre */
/* Agrega esto en tu archivo styles.css */
@keyframes abrirObturador {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0% 100%, 0 0, 100% 0, 100% 100%);
  }
}

@keyframes cerrarObturador {
  from {
    clip-path: polygon(0% 100%, 0 0, 100% 0, 100% 100%);
  }
  to {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
}

.obturador {
  transition: transform 0.9s ease-in-out;
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.group:hover .obturador {
  animation: abrirObturador 0.5s forwards;
}

.group .obturador {
  animation: cerrarObturador 0.5s forwards;
}

.counter-sec5:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/update_4/bg/counter_bg_1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #10131c;
  -webkit-clip-path: path(
    "M542.491 19.8743C554.97 7.16177 572.036 0 589.849 0H1129.15C1146.96 0 1164.03 7.16177 1176.51 19.8743C1188.99 32.5868 1206.05 39.7485 1223.87 39.7485H1640C1684.18 39.7485 1720 75.5658 1720 119.749V491.253C1720 535.436 1684.18 571.253 1640 571.253H1225.55C1207.29 571.253 1189.79 578.594 1177 591.626C1164.21 604.658 1146.71 612 1128.45 612H590.549C572.288 612 554.793 604.658 542.001 591.626C529.208 578.594 511.714 571.253 493.452 571.253H80C35.8172 571.253 0 535.435 0 491.253V119.749C0 75.5658 35.8173 39.7485 80.0001 39.7485H495.132C512.946 39.7485 530.012 32.5868 542.491 19.8743Z"
  );
  clip-path: path(
    "M542.491 19.8743C554.97 7.16177 572.036 0 589.849 0H1129.15C1146.96 0 1164.03 7.16177 1176.51 19.8743C1188.99 32.5868 1206.05 39.7485 1223.87 39.7485H1640C1684.18 39.7485 1720 75.5658 1720 119.749V491.253C1720 535.436 1684.18 571.253 1640 571.253H1225.55C1207.29 571.253 1189.79 578.594 1177 591.626C1164.21 604.658 1146.71 612 1128.45 612H590.549C572.288 612 554.793 604.658 542.001 591.626C529.208 578.594 511.714 571.253 493.452 571.253H80C35.8172 571.253 0 535.435 0 491.253V119.749C0 75.5658 35.8173 39.7485 80.0001 39.7485H495.132C512.946 39.7485 530.012 32.5868 542.491 19.8743Z"
  );
  z-index: -1;
}

/* Clip path forma para las imagenes de services home */
.hexa-img {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.card_services_hover {
  background: #fff;
}

/* en el hover proner el main color per o coin un transción suave */
.card_services_hover:hover {
  background: var(--primary);
  transition: 0.5s;
  color: white !important;
  /* hacer que se agrande un poco no mucho */
  transform: scale(1.05);
}

.bg-HeaderGloal {
  background: rgba(0, 0, 0, 0.466);
}

/* Sticky Colum */
/* Sticky Column */
.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  top: 3rem;
}
.sticky-parent .elementor-widget-wrap {
  display: block !important;
}
@media only screen and (max-width: 600px) {
  .sticky-column {
    position: relative;
  }
  .circle {
    margin: 0 auto;
  }
  .bg-none-mobile {
    background: none !important;
  }
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 3rem;
}

/* gallery Footer */
.gallery-item {
  display: flex;
  flex-wrap: wrap;
}

.image-container img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* Opcional: Efecto de zoom al hacer hover */
}

.hover-background {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente negro */
  height: 0%; /* Inicia sin altura */
  transition: height 0.3s ease, top 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Color del texto o ícono */
  border-radius: 100%;
}

.image-container:hover .hover-background {
  height: 100%; /* Altura completa */
  top: 0; /* Alinea desde la parte superior */
}

.image-container:hover img {
  transform: scale(1.1); /* Efecto de zoom al hacer hover */
}

.icon-style {
  font-size: 24px; /* Tamaño del ícono */
}

@keyframes modalAnimation {
  0%,
  100% {
    clip-path: inset(50% 0% 50% 0%);
  }
  100% {
    clip-path: inset(0% 0% 0% 0%);
  }
}

.modal-enter {
  animation: modalAnimation 0.5s ease-out forwards;
}

/* Button Float */

* {
  box-sizing: border-box;
}

.fab-wrapper {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
}
.fab-checkbox {
  display: none;
}
.fab {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 4rem;
  height: 4rem;
  background: blue;
  border-radius: 50%;
  background: #126ee2;
  box-shadow: 0px 5px 20px #81a4f1;
  transition: all 0.3s ease;
  z-index: 1;
  border-bottom-right-radius: 6px;
  border: 1px solid #0c50a7;
}

.fab:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}
.fab-checkbox:checked ~ .fab:before {
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  background-color: rgba(255, 255, 255, 0.2);
}
.fab:hover {
  background: #2c87e8;
  box-shadow: 0px 5px 20px 5px #81a4f1;
}

.fab-dots {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  transform: translateX(0%) translateY(-50%) rotate(0deg);
  opacity: 1;
  animation: blink 3s ease infinite;
  transition: all 0.3s ease;
}

.fab-dots-1 {
  left: 15px;
  animation-delay: 0s;
}
.fab-dots-2 {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation-delay: 0.4s;
}
.fab-dots-3 {
  right: 15px;
  animation-delay: 0.8s;
}

.fab-checkbox:checked ~ .fab .fab-dots {
  height: 6px;
}

.fab .fab-dots-2 {
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

.fab-checkbox:checked ~ .fab .fab-dots-1 {
  width: 32px;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.fab-checkbox:checked ~ .fab .fab-dots-3 {
  width: 32px;
  border-radius: 10px;
  right: 50%;
  transform: translateX(50%) translateY(-50%) rotate(-45deg);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.fab-checkbox:checked ~ .fab .fab-dots {
  animation: none;
}

.fab-wheel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  transition: all 0.3s ease;
  transform-origin: bottom right;
  transform: scale(0);
}

.fab-checkbox:checked ~ .fab-wheel {
  transform: scale(1);
}
.fab-action {
  position: absolute;
  background: #0f1941;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: White;
  box-shadow: 0 0.1rem 1rem rgba(24, 66, 154, 0.82);
  transition: all 1s ease;

  opacity: 0;
}

.fab-checkbox:checked ~ .fab-wheel .fab-action {
  opacity: 1;
}

.fab-action:hover {
  background-color: #f16100;
}

.fab-wheel .fab-action-1 {
  right: -1rem;
  top: 0;
}

.fab-wheel .fab-action-2 {
  right: 3.4rem;
  top: 0.5rem;
}
.fab-wheel .fab-action-3 {
  left: 0.5rem;
  bottom: 3.4rem;
}
.fab-wheel .fab-action-4 {
  left: 0;
  bottom: -1rem;
}

/* Slide style */
.slide-size-normal {
  height: 450px; /* Tamaño por defecto para slides 1 y 5 */
}

.slide-size-large {
  height: 550px; /* Tamaño más grande para slides 2 y 4 */
}

.slide-size-largest {
  height: 650px; /* Tamaño más grande para slide 3 */
}

/* Border Hover */
/* Estilos base para el título */
.hoverBorder {
  position: relative; /* Posición relativa para base del pseudo-elemento */
  padding-bottom: 1px; /* Un poco de padding para no superponer el texto con el borde */
  border-bottom: 1px dotted rgb(193, 193, 193); /* Borde punteado como indicador básico */
}

/* Borde animado que aparece en hover */
.hoverBorder::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0; /* Asegurando que cubra solo el ancho del texto */
  bottom: 0;
  width: 0; /* Inicia sin ancho */
  height: 2px; /* Altura del borde */
  background-color: var(
    --secondary,
    blue
  ); /* Color del borde, azul por defecto */
  transition: width 0.5s ease; /* Transición suave para la animación */
}

.hoverBorder:hover::before {
  width: 100%; /* Extiende el borde al 100% del ancho al hacer hover */
}

@keyframes zoomIn {
  from {
    transform: scale(1); /* Start at normal size */
    opacity: 0; /* Start from transparent to give a dramatic effect */
  }
  to {
    transform: scale(1.5); /* Scale up to 150% of the original size */
    opacity: 1; /* Fully opaque */
  }
}

.zoom-in-animation {
  animation: zoomIn 1s ease-out forwards; /* Adjust time and easing according to your preference */
}

.wave-title {
  position: relative;
  color: var(--secondary-color);
}

.wave-title:after {
  content: "";
  height: 20px;
  width: 100%;
  position: absolute;
  bottom: -8px;
  left: 0;
  background-image: url('data:image/svg+xml,<svg width="322" height="18" viewBox="0 0 322 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.67133 -3.05176e-05C19.3099 -3.05176e-05 26.2444 4.1005 31.3094 7.09658C36.181 9.97517 38.9804 11.4752 44.4966 11.4752C50.0128 11.4752 52.7848 9.97517 57.684 7.09658C62.7582 4.1005 69.6558 -3.05176e-05 83.3312 -3.05176e-05C97.0066 -3.05176e-05 103.904 4.1005 108.978 7.09658C113.841 9.97517 116.64 11.4752 122.166 11.4752C127.691 11.4752 130.454 9.97517 135.353 7.09658C140.418 4.1005 147.325 -3.05176e-05 160.991 -3.05176e-05C174.657 -3.05176e-05 181.573 4.1005 186.638 7.09658C191.51 9.97517 194.309 11.4752 199.826 11.4752C205.342 11.4752 208.114 9.97517 213.022 7.09658C218.087 4.1005 224.994 -3.05176e-05 238.66 -3.05176e-05C252.326 -3.05176e-05 259.242 4.1005 264.307 7.09658C269.179 9.97517 271.978 11.4752 277.495 11.4752C283.011 11.4752 285.783 9.97517 290.691 7.09658C295.756 4.1005 302.663 -3.05176e-05 316.329 -3.05176e-05C318.364 -3.05176e-05 320.315 0.343687 321.753 0.955506C321.834 2.92425 321.834 2.60503 321.834 3.47027C321.834 4.33552 321.834 3.47027 321.753 5.56924C320.315 6.18106 318.364 6.52477 316.329 6.52477C310.804 6.52477 308.041 8.02869 303.142 10.9073C298.077 13.8994 291.17 18 277.495 18C263.819 18 256.922 13.8994 251.857 10.9073C246.985 8.02869 244.185 6.52477 238.66 6.52477C233.135 6.52477 230.372 8.02869 225.473 10.9073C220.408 13.8994 213.501 18 199.826 18C186.15 18 179.252 13.8994 174.188 10.9073C169.316 8.02869 166.516 6.52477 160.991 6.52477C155.465 6.52477 152.703 8.02869 147.804 10.9073C142.739 13.8994 135.832 18 122.166 18C108.499 18 101.583 13.8994 96.5184 10.9073C91.6468 8.02869 88.8474 6.52477 83.3312 6.52477C77.815 6.52477 75.043 8.02869 70.1438 10.9073C65.0788 13.8994 58.172 18 44.4966 18C30.8211 18 23.9237 13.8994 18.8587 10.9073C13.9872 8.02869 11.1875 6.52477 5.67133 6.52477C3.63682 6.52477 1.6857 6.18106 0.24708 5.56924C0.247028 3.85106 0.247204 4.20999 0.247204 3.34475C0.247204 2.47951 0.24708 2.60337 0.24708 0.955506C1.56824 0 3.63682 -3.05176e-05 5.67133 -3.05176e-05Z" fill="%23068FFF"/></svg>');
  background-size: auto;
  background-repeat: repeat-x;
  -webkit-animation: waveLine 7s linear infinite;
  animation: waveLine 7s linear infinite;
  /* Small devices */
  /* Extra small devices */
}

@media (max-width: 767px) {
  .wave-title:after {
    background-size: auto 11px;
  }
}

@media (max-width: 575px) {
  .wave-title:after {
    background-size: auto 9px;
  }
}

/* En tu archivo CSS global (por ejemplo, styles/globals.css) */
 .filtro {
  filter: grayscale(90%) brightness(700%);
}