.animated-circle {
  background: black;
  position: relative;
  z-index: 0;
  filter: contrast(1.3) brightness(2);
}

.animated-circle:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 5px solid hsl(197, 100%, 50%);
  box-sizing: border-box;
  border-radius: 20px;
  z-index: 0;
  transition: border-color 500ms;
  animation: main-color 5s ease-in-out alternate infinite;
}

.noise {
  mix-blend-mode: multiply;
  z-index: 1;
  position: relative;
  width: 450px;
  height: 450px;
  background-size: 200%;
}

.animated-noise {
  mix-blend-mode: multiply;
  z-index: 1;
  position: relative;
  width: 450px;
  height: 450px;
  background-size: 200%;
  animation: 20s bgPos ease-in-out infinite alternate;
}

@keyframes main-color {
  from {
    border-color: #f79533; /* Dark orange */
  }
  40% {
    border-color: #f37055; /* Light orange */
  }
  to {
    border-color: #ef4e7b; /* Pink */
  }
}

@keyframes bgPos {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 512px 512px;
  }
}
  @import url('https://fonts.googleapis.com/css?family=Roboto');
.slider {border-radius: 20px; background-color: black; overflow:hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0; min-height: 520px;}
.flexa { display: -webkit-flex; display: flex; -webkit-flex-direction: row;  flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}

.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw;  margin-left: 8vw;}
.slide-image {height: 24vw;}
.slide-image img { border-radius: 20px; width: 24vw; cursor: pointer;}
.slide-content {width: 70vw; color: #fff; padding:0vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}

div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}

.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}

.glow-on-hover {
  width: auto;
  height: 530px;

  color: #fff;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  transition: background-color 0.3s ease-in-out;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -4px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:hover {
  background: black; /* Set background color to black on hover */
}


.glow-on-hover:active {
  color: black;
}

.glow-on-hover:active:after {
  background: black;
}

.glow-on-hover:after {
  z-index: -1;
  position: absolute;
  width: auto;
  height: auto;
  background: white;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.glow-on-power {
  width: 170px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  background-color: black;
  z-index: 0;
  border-radius: 10px;
  transition: background-color 0.3s ease-in-out;
}

.glow-on-power:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  background-color: black;
  z-index: -50;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 20%; /* Set initial opacity to 1 */
  transition: opacity 0.3s ease-in-out; /* Add transition for smoother opacity change */
  border-radius: 10px;
}

.glow-on-power:hover {
  background-color: black; /* Change background color to black on hover */
}

.glow-on-power:hover:before {
  opacity: 5;
  background-color: black;
}

.glow-on-power:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}