/* ----------------------------------------------------------------
	Canvas: Speaker
-----------------------------------------------------------------*/

:root {
  --cnvs-themecolor: #ef59a1;
  --cnvs-themecolor-rgb: 239, 89, 161;
  --bs-bg-opacity: 1;
}

.dotted-bg {
  --cnvs-dotted-opacity: 0.7;
  --cnvs-dotted-top: 0;
  --cnvs-dotted-right: 0;
  --cnvs-dotted-left: auto;
  --cnvs-dotted-size: 190px;
}

.dotted-bg.pos-left {
  --cnvs-dotted-right: auto;
  --cnvs-dotted-left: 0;
}

.dotted-bg:before {
  content: "";
  position: absolute;
  display: block;
  top: var(--cnvs-dotted-top);
  left: var(--cnvs-dotted-left);
  right: var(--cnvs-dotted-right);
  width: var(--cnvs-dotted-size);
  height: var(--cnvs-dotted-size);
  background-size: 20px 20px;
  background-position: center;
  transform: translate(30px, -30px);
  background-image: radial-gradient(
    rgba(var(--cnvs-themecolor-rgb), var(--cnvs-dotted-opacity)) 25%,
    transparent 25%
  );
  z-index: auto;
}

@keyframes noiceAnim {
  0%,
  to {
    transform: translate(0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  20% {
    transform: translate(-15%, 5%);
  }

  30% {
    transform: translate(7%, -25%);
  }

  40% {
    transform: translate(-5%, 25%);
  }

  50% {
    transform: translate(-15%, 10%);
  }

  60% {
    transform: translate(15%);
  }

  70% {
    transform: translateY(15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }
}

@-webkit-keyframes ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
  }

  to {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1);
  }
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
  }

  to {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1);
  }
}

@media (min-width: 768px) {
  .swiper_wrapper {
    --swiper-height: 100vh;
  }

  .swiper-slide-info {
    margin-top: var(--swiper-thumbs-height);
  }
}

/* Upper 992px Devices */
@media (min-width: 992px) {
  .text-stretch {
    position: relative;
    width: calc(100% + 200px);
    z-index: 1;
  }

  .section-1-bg {
    background: #f5f5f5 url("images/section-1.jpg") no-repeat left bottom /
      cover;
  }

  .circle-wave {
    ---circle-wave-size: calc(40px + 4vw);
  }
}