/*======== video popup 1 ========*/
.video-icon {
  width: 120px;
  height: 120px;
  line-height: 120px;
  color: #fff;
  font-size: 35px;
  background: var( --e-global-color-accent );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  &:hover {
    text-decoration: none !important;
  }
}

/*======== video popup 1========*/
@keyframes pulse-white {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 44, 10, 1);
  }

  80% {
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

/*======== video popup 1(with wave) ========*/
.wave {
  a {
    &::before {
      animation: pulse-red 2s infinite;
      width: 110px;
      height: 110px;
    }
  }
  a {
    width: 90px;
    transition: 0.3s ease-out;

    &::before {
      content: "";
      width: 110px;
      height: 110px;
      top: -10px;
      left: -10px;
      position: absolute;
      border-radius: 50%;
    }
  }
}

/*======== video popup 1(with hover wave) ========*/
.hover_wave {
  a {
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 50%;
    color: var( --e-global-color-accent );
    background: #fff;
    display: block;
    text-align: center;
    font-size: 40px;
    padding-top: 5px;
    transition: 0.3s ease-out;

    &::before {
      content: "";
      width: 110px;
      height: 110px;
      top: -10px;
      left: -10px;
      position: absolute;
      border-radius: 50%;
    }

    &:hover::before {
      animation: pulse-white 2s infinite;
    }
  }
}

/*======== video popup 2========*/
.play-button2 {
  .video2-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var( --e-global-color-accent );
    width: 50px;
    height: 50px;
    font-size: 25px;
    z-index: 1;
    position: relative;
    border-radius: 50%;
    transition: 0.3s ease-out;
    text-decoration: none !important;
    @media screen and (min-width: 768px) {
      width: 78px;
      height: 78px;
    }
    &::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      z-index: -1;
      top: -15px;
      left: -15px;
      width: calc(100% + 30px);
      height: calc(100% + 30px);
      animation: pulse-white 2s infinite;
      @media screen and (min-width: 768px) {
        width: calc(100% + 28px);
        height: calc(100% + 28px);
      }
    }
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      z-index: -1;
      top: -30px;
      left: -30px;
      width: calc(100% + 60px);
      height: calc(100% + 60px);
      animation: pulse-white 2s infinite;
      animation-delay: 1.3s;
      @media screen and (min-width: 768px) {
        width: calc(100% + 58px);
        height: calc(100% + 58px);
      }
    }
  }
}


@keyframes rotate {
  from {
    transform: rotate(360deg);
    -webkit-filter: blur(0.2px);
  }

  to {
    transform: rotate(0);

    -webkit-filter: blur(0);
  }
}