.seperator-wrapper {
    width: 100%;
}

.border-boxshadow {
    border-bottom: 1px solid #1a1c2100;
    /* box-shadow: -4px 1px 20px 7px #910303; */
}


.gradient {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0 86 147 / 8%)), color-stop(25%,rgb(3 76 112 / 7%)), color-stop(50%,rgb(3 58 92 / 19%)), color-stop(75%,rgb(4 129 179 / 40%)), color-stop(100%,rgb(6 42 109 / 21%)));
}

.seperator {
    width: -webkit-fill-available;
    height: 3px;
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
}





@-webkit-keyframes rotate {
  from {
    background-position: -3000px;
  }
  to { 
    background-position: 0px;
  }
}

@keyframes rotate {
  from {
    background-position: -3000px;
  }
  to { 
    background-position: 0px;
  }
}





.gradient-border {
  --border-width: 3px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: var(--border-width);

}

.gradient-border:after {

    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}