/**
  Browser should support Houdini API
*/

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

:root {
  --bg-background: #111827;
  --clr-card: #094a7a;
  --clr-1: #267fb5;
  --clr-2: #0b4161;
  --clr-3: #000;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

 

.card {
  position: relative;
 
  border-radius: 0.45rem;
  cursor: pointer;
  background-color:rgba(20,38,63,0.75)
}

.card::after,
.card::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -0.5rem;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-card),
    var(--clr-1),
    var(--clr-2),
    var(--clr-3),
    var(--clr-2),
    var(--clr-1),
    var(--clr-card)
  );
  border-radius: inherit;
  animation: rotate 2.5s linear infinite;
}

.card::after {
  filter: blur(3rem);
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}


.count-down{position:absolute;right:5rem;top:5%;width:190px;z-index: 9;}
/* .count-down ul{position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;} */
.count-down ul li > div{padding:1rem;}
.count-down ul li h2{font-size:3rem;font-family:var(--oswald);text-align:center;line-height:1;color:#fff;}
.count-down ul li p{font-size:1.75rem;font-family:var(--oswald);text-align:center;margin:0;line-height:1;white-space:nowrap;text-transform:uppercase;color:#fff;}
.count-down ul li:not(:first-child){display:none;}
.count-down ul li {}