body{
  margin: 0 !important;
}
body.contener {
  width: 100%;
  background-color: #131420;
}
body header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 389px;
  text-align: center;
  background-image: url(img/startzb368/bgtop.png);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  width: 100vw;
  min-height: 100vh;
  color: #fff;
  font-size: 16px;
  font-family: -apple-system, "Helvetica Neue", Roboto, sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 body {
  display: block;
  margin: 8px;
}

.btplay {
  position: relative;
  width: 128px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 500;
  background-image: url(img/play.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#circleArea {
  margin: auto;
  padding: 0;
  width: 55%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.card {
  margin: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc((100% - 96px) / 6);
  height: 272px;
  background-color: #212236;
  border: 0.5px solid #404268;
  border-radius: 16px;
  width: 40%;
  text-decoration: none;
  width: 100%;
  padding-bottom: 5px;
  animation: card 5s linear infinite;
}
@keyframes card {
  0%   { border-color: rgba(255, 0, 0, 0.344); }
  25%  { border-color: rgba(255, 255, 0, 0.515); }
  50%  { border-color: rgba(0, 255, 0, 0.39); }
  75%  { border-color: rgba(0, 255, 255, 0.34); }
  100% { border-color: rgba(255, 0, 0, 0.272); }
}

.cicle{
    animation: cicle 5s linear infinite;
  }
@keyframes cicle {
  0%   { background-color: red; }
  25%  { background-color: yellow; }
  50%  { background-color: lime; }
  75%  { background-color: cyan; }
  100% { background-color: red; }
}
.bg-box{
    width: 90%;
    max-width: 400px;
    background: rgb(255 255 255 / 75%);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgb(0 0 0 / 86%);
    text-align: center;
    animation: bgbox 5s linear infinite;
}
@keyframes bgbox {
  0%   { box-shadow: 0 0 10px red, 0 0 20px red; border-color: red; }
  25%  { box-shadow: 0 0 10px yellow, 0 0 20px yellow; border-color: yellow; }
  50%  { box-shadow: 0 0 10px lime, 0 0 20px lime; border-color: lime; }
  75%  { box-shadow: 0 0 10px cyan, 0 0 20px cyan; border-color: cyan; }
  100% { box-shadow: 0 0 10px red, 0 0 20px red; border-color: red; }
}
.bg-bt{
  background-color: rgb(210 133 0 / 37%);
  box-shadow: 0 0 4px rgb(0 0 0 / 86%);
}
.icom {
  width: 100%;
}
.bgicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: -4px;
  top: -4px;
  width: 41px;
  height: 41px;
  color: #111;
  font-weight: 700;
  font-size: 20px;
  text-shadow: 0 0 0.4px rgba(0, 0, 0, 0.6);
  background-position: 4px 4px;
  background-size: calc(100% - 4px);
  background-repeat: no-repeat;
}
.bgicon1 {
  background-image: url(img/tag-green.png);
}
.bgicon2 {
  background-image: url(img/tag-blue.png);
}
.bgicon3 {
  background-image: url(img/tag-purple.png);
}
.bgicon4 {
  background-image: url(img/tag-orange.png);
}
.bgicon5 {
  background-image: url(img/tag-red.png);
}
.bgicon6 {
  background-image: url(img/tag-blue-purple.png);
}
.txt-link {
  padding: 5px;
  color: white;
}
.cicle {
  margin: 38px 0 34px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 108px;
  height: 108px;
  background: #12172a;
  border-radius: 50%;
}
.grean {
  filter: drop-shadow(0 0 20px rgba(0, 210, 122, 0.6));
  background-image: radial-gradient(rgba(0, 210, 122, 0.7), #12172a 60%);
}
.blues {
  filter: drop-shadow(0 0 20px rgba(0, 53, 210, 0.6));
}
.purple {
  filter: drop-shadow(0 0 20px rgba(1, 104, 179, 0.6));
}
.blues-purple {
  filter: drop-shadow(0 0 20px rgba(11, 118, 206, 0.6));
}
.orean {
  filter: drop-shadow(0 0 20px rgba(216, 82, 24, 0.6));
}
.red {
  filter: drop-shadow(0 0 20px rgba(210, 0, 95, 0.6));
}
.number {
  position: relative;
  z-index: 111;
  font-size: 32px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
}
.cap {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #111111;
}
.cap1 {
  background-image: radial-gradient(rgba(0, 210, 122, 0.7), #12172a 60%);
}
.cap2 {
  background-image: radial-gradient(rgba(36, 5, 159, 0.7), #12172a 60%);
}
.cap3 {
  background-image: radial-gradient(rgba(142, 63, 233, 0.7), #12172a 60%);
}
.cap4 {
  background-image: radial-gradient(rgba(115, 115, 238, 0.7), #12172a 60%);
}
.cap5 {
  background-image: radial-gradient(rgba(213, 70, 31, 0.7), #12172a 60%);
}
.cap6 {
  background-image: radial-gradient(rgba(210, 0, 28, 0.7), #12172a 60%);
}
.cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
}
.ms {
  color: white;
  z-index: 11111;
}
.play {
  position: relative;
  width: 128px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 500;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 20px rgba(0, 210, 122, 0.6));
}
.playgrean {
  background-image: url(img/play.png);
}
.playhot {
  background-image: url(img/play-on.png);
}
.hot {
  width: 35px;
  margin-top: -45px;
  position: absolute;
  right: -9px;
}
footer {
  padding: 0;
  margin: 0;
}
.footercard {
  margin: auto;
  background-image: url(img/startzb368/bg-footer.png);
}
.footercard div {
    width: 60%;
    display: flex;
    margin-top: 2opx;
    padding-top: 80px;
    margin: auto;
    min-height: 200px;
}
.footercard div li {
  list-style: none;
  margin: auto;
  margin-top: 0px;
  text-align: center;
}
.footercard div li img {
  width: 80px;
}
.footercard div li p {
    text-align: center;
}
.cskh {
     position: absolute;
    right: 7%;
}
.cskh img {
  width: 90px;
}
.button {
    display: block;
    width: 100%;
    padding: 14px 0;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #212020;
    text-decoration: none;
}
.btn-register
 {
    background-color: #0d8fe8;
}
.header{
    display: flex;flex-direction: column;width: 35%; margin: auto;text-align: center;
}
    .circles-row {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: flex-end;
      padding: 40px 0 30px 0;
      flex-wrap: wrap;
    }
    .circle-card {
      background: #1f1f1f;
      border-radius: 14px;
      padding: 20px 24px 22px 24px;
      box-shadow: 0 2px 8px #0009;
      text-align: center;
      min-width: 140px;
      position: relative;
      transition: background 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .circle-card:hover {
      background: #2a2a2a;
    }
    .circle-card .label {
      color: #bbb !important;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
      display: block;
    }
    .svg-circle {
      margin: 0 auto;
      display: block;
      width: 80px;
      height: 80px;
    }
    .latency-value {
      fill: #e0e0e0;
      font-weight: 700;
      font-size: 26px;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .ms-label {
      fill: #e0e0e0;
      font-size: 14px;
      text-anchor: middle;
      dominant-baseline: middle;
    }
.woot-widget-bubble {
  background-color: transparent !important;
  background-image: url("img/kf.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* or cover */
  padding: 15px;
  width: 85px !important;
  height: 85px !important;
}
.woot-widget-bubble svg{
     display: none !important;
}
.woot--close::before, .woot--close::after {
    background-color: #ffffff00 !important;
}
.svg-bg1 {
  stroke: #0a8840;
}
.svg-bg2 {
  stroke: #51ccc0;
}
.svg-bg3 {
  stroke: #9638bf;
}
.svg-bg4 {
  stroke: #da7d3f;
}
.svg-bg5 {
  stroke: #af330a;
}
.svg-bg6 {
  stroke: #a10404;
}
.svg-ring {
  stroke: #eae8ef23;
  transition: stroke-dashoffset 0.3s ease;
}

@media (min-width: 1420px){
      #circleArea{
             margin: auto;
      }
    .header{
            width: 40%; margin: auto;
    }
}
@media (max-width: 1400px){
      #circleArea{
             margin-left: 15%;
             margin-right: 15%;
      }
}


@media (max-width: 1320px){
      #circleArea{
             margin-left: 13%;
             margin-right: 13%;
      }
        .header{
            width: 60%; margin: auto;
    }
}
@media (max-width: 1250px){
      #circleArea{
             margin-left: 10%;
             margin-right: 10%;
      }
       
}
@media (max-width: 1140px){
      #circleArea{
             margin-left: 8%;
             margin-right: 8%;
      }
}
@media (max-width: 1070px){
      #circleArea{
             margin-left: 5%;
             margin-right: 5%;
      }
}
@media (max-width: 1000px){
      #circleArea{
             margin-left: 3%;
             margin-right: 3%;
      }
}
@media (max-width: 980px){
      #circleArea{
             margin-left: 2%;
             margin-right: 2%;
      }
}
@media (max-width: 965px){
      #circleArea{
             margin-left: 0%;
             margin-right: 0%;
      }
         .header{
            width: 80%; margin: auto;
    }
}
@media (max-width: 940px){
      #circleArea{
            margin: auto;
             grid-template-columns: repeat(3, 1fr);
      }
      .cskh {
            position: absolute;
            right: 17%;
            bottom: 0%;
        }
}
@media (max-width: 940px){
      #circleArea{
            margin: auto;
             grid-template-columns: repeat(3, 1fr);
      }
}
@media (max-width: 724px){
      #circleArea{
            margin: 0 10% 0 20%;
             grid-template-columns: repeat(3, 1fr);
      }
}
@media (max-width: 680px){
      #circleArea{
            margin: 0 10% 0 15%;
            grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 620px){
      #circleArea{
            margin: 0 10% 0 5%;
             grid-template-columns: repeat(3, 1fr);
      }
      .card {
        height: auto;
      }
      .footercard div {
        width: 100% !important;
    }
      .footercard div li img {
        width: 60px !important;
    }
     .footercard div li p {
        width: 60px !important;
        display: inline-block !important;
    }
    .footercard div {
            width: 100%;
            display: flex ;
            margin-top: 2px;
            padding-top: 68px;
            margin: auto;
            min-height: 248px;
        }
      body header{
        padding-top: 0%;
      }
    }
    @media (max-width: 500px){
      #circleArea{
             margin: 0 3% 0 3%;
             grid-template-columns: repeat(2, 1fr);
             width: 90%;
      }
       .header{
            width: 100%; margin: auto;
         }

         body header{
             height: auto;
         }
         
    }
     @media (max-width: 400px){
      #circleArea{
             grid-template-columns: repeat(2, 1fr);
             width: 90%;
             min-height: 200px;
      }
      .footercard div{
        width: 90%;
            min-height: 200px;
      }
    }
 @media (max-width: 350px){
      #circleArea{
             margin: 0 1% 0 1%;
             grid-template-columns: repeat(2, 1fr);
             width: 50%;
      }
    }