.marquee {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 30s linear infinite;
    }

    @keyframes marquee {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

@keyframes rotate-border {
  0% {
    border-image-source: linear-gradient(90deg, red, yellow, green, blue, violet);
  }
  25% {
    border-image-source: linear-gradient(90deg, violet, red, yellow, green, blue);
  }
  50% {
    border-image-source: linear-gradient(90deg, blue, violet, red, yellow, green);
  }
  75% {
    border-image-source: linear-gradient(90deg, green, blue, violet, red, yellow);
  }
  100% {
    border-image-source: linear-gradient(90deg, yellow, green, blue, violet, red);
  }
}

@keyframes runLights {
  0% {
    border-color: red blue green yellow;
  }
  25% {
    border-color: blue green yellow red;
  }
  50% {
    border-color: green yellow red blue;
  }
  75% {
    border-color: yellow red blue green;
  }
  100% {
    border-color: red blue green yellow;
  }
}

@keyframes fireworks {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes colorChange {
    0%   { color: red; }
    25%  { color: blue; }
    50%  { color: green; }
    75%  { color: yellow; }
    100% { color: red; }
}

@keyframes slide {
    0% {
        background-position: top left;
    }
    25% {
        background-position: top right;
    }
    50% {
        background-position: bottom right;
    }
    75% {
        background-position: bottom left;
    }
    100% {
        background-position: top left;
    }
}

@keyframes colorChange {
    0% {
        background-image: linear-gradient(45deg, red, blue, yellow, green);
    }
    25% {
        background-image: linear-gradient(45deg, blue, green, red, yellow);
    }
    50% {
        background-image: linear-gradient(45deg, green, yellow, blue, red);
    }
    75% {
        background-image: linear-gradient(45deg, yellow, red, green, blue);
    }
    100% {
        background-image: linear-gradient(45deg, red, blue, yellow, green);
    }
}

@keyframes boxAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes animateBorder {
  0% { width: 0; background-color: blue; }
  25% { width: 100%; background-color: blue; }
  50% { width: 100%; background-color: red; }
  75% { width: 100%; background-color: green; }
  100% { width: 100%; background-color: yellow; }
  
/*  0% { border-bottom: 3px solid blue; }
  25% { border-bottom: 3px solid green; }
  50% { border-bottom: 3px solid red; }
  75% { border-bottom: 3px solid purple; }
  100% { border-bottom: 3px solid blue; }   */
}

@keyframes slide_f {
  from { margin-left: 100%; }
  to { margin-left: -100%; }
}

@keyframes color-change {
  0%, 100% { color: red; }
  25% { color: blue; }
  50% { color: green; }
  75% { color: yellow; }
}

.rainbow-text {
    font-family: Arial, sans-serif;
    font-size: 24px;
    background-image: linear-gradient(45deg, #ff0000, #ff6600, #ffcc00, #33cc33, #3399ff, #9900cc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: colorChange 5s linear infinite;
    display: table-cell;
}

.banner {
/*  width: 100%; */
  background: linear-gradient(to left, red, orange, blue, green);
  color: white;
/*  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box; */
}

.text {
/*  display: inline-block; */
/*  padding-left: 100%;  */ /* Start off the screen */
  animation: slide_f 10s linear infinite; /* Adjust timing as needed */
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px; /* Or the thickness you want */
  width: 0; /* Start with no width */
  background-color: blue; /* Initial color */
  animation: animateBorder 4s linear infinite;
}

.panel-login {
/*  width: 200px;  */ /* Or any other size */
/*  height: 200px; */
  
  border-width: 10px; /* Adjust thickness as per requirement */
  border-style: solid;
  border-radius: 20px;  
/*  border-top: 12px; */
  animation: runLights 5s infinite; /* Adjust duration as per requirement */

/*  
    content: '';
    width: 0;
    height: 0;
    border-top: 12px solid #37a000; 
    border-right: 12px solid transparent;
    position: absolute;
    left: 0px;
    top: 0px;
*/    
}

.panel-bd .panel-heading-login::before {
      border-top: 12px solid #0000; 
}

.count_panel {
/*  width: 200px; */ /* You can change this to your desired width */
/*  height: 200px; */ /* You can change this to your desired height */
/*  background-color: #7b8ad7; */
  background-image: linear-gradient(#fabcbd, #c7e7e2);
/*  background-image: linear-gradient(#8889e1, #c7e7e2); */
  border: 4px solid;
  border-image: linear-gradient(90deg, red, yellow, green, blue, violet);
  border-image-slice: 1;
  animation: rotate-border 4s linear infinite;
}

.line_div {
/*  width: 200px; */ /* You can change this to your desired width */
/*  height: 200px; */ /* You can change this to your desired height */
/*  background-color: #7b8ad7; */
/*  background-image: linear-gradient(#fabcbd, #c7e7e2); */
/*  background-image: linear-gradient(#8889e1, #c7e7e2); */
  border: 4px solid;
  border-image: linear-gradient(90deg, red, yellow, green, blue, violet);
  border-image-slice: 1;
  animation: rotate-border 4s linear infinite;
}

.fireworks {
    position: relative;
}

.btn {
    border-radius: 5px;
}
/*
.btn {
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border: none;
    background-color: #ff4500;
    color: white;
    cursor: pointer;
    outline: none;
}
*/
.explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #edd428; /* #ff4500; */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.btn:hover + .explosion {
    animation: fireworks 5s forwards;
}

.zoom-in-text {
    animation: zoomIn 2s;
}

.rotate-text {
    animation: rotate 5s infinite;
}

.animated-text {
    animation: colorChange 10s infinite; /* 10s duration, infinite loop */
}    

.animated-label {
  animation: color-change 10s infinite;
}

.animated-bg {
    width: 100%;
    height: 100%;
    animation: slide 10s infinite, colorChange 2.5s infinite;
    background-size: 200% 200%;
}

.fade-in-text {
    animation: fadeIn 2s;
}

.slide-in-left {
    animation: slideInLeft 2s;
}

.blink-text {
    animation: blink 1s infinite;
}

.animated-box {
/*    width: 100px; */ /* You can set the width as per your requirement */
/*    height: 100px; */ /* You can set the height as per your requirement */
/*    border: 4px solid #000; */ /* This gives a border to all 4 sides of the div */
    animation: boxAnimation 2s infinite alternate; /* Animation */
}

.trnp {
/*    background-color: transparent;  */
    opacity: 0.6; 
}

/*    
div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
*/