*{
    font-family: sans-serif;
    box-sizing: border-box;
}

p{
    margin: 0;
}

body{
    background: #000000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size: contain;
    background-color: black;
    background-size: 100%;
}

a:hover{
    text-decoration: none;
    color: white;
}

.container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.adv{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

img{
    vertical-align: middle;
    border-style: none;
}

.title{
    display: flex;
    justify-content: center;
}

.title-text{
    color: white;
    font-size: 2.5rem;
}

.slot{
    display: block;
}

.slot .slot-sidebar{
    padding-right: 10px;
    padding-left: 0;
    margin-top: -15px;
    background-color: black;
    float: none !important;
    width: 100% !important; 
    flex: none !important;
    max-width: 100% !important;
    padding-right: 0 !important;
}

.btn-provider:hover{
    background-color: #644C1C;
}

.slot-sidebar-nav{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.slot-sidebar-nav > li {
    border-bottom: 1px solid #0092b1;
    width: 100%;
    position: relative;
    display: block;
    border-bottom: none;
    padding: 6px;
    background: linear-gradient(to bottom,#242424 0%,#515151 46%,#242424 100%);
}

.slot-sidebar-nav > li > a{
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    display: block;
    background-color: black;
}

.btn-provider{
    text-align: center;
    display: block;
}   

.enter{
    display: none;
}

.btn-provider span{
    position: unset;
}

.active{
    background-color: #0092B1;
}

.slot .content{
    float: none;
    width: 100%;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
    background-color: #121212;
}

.wrapper{
    width: 100%;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.card{
    float: left;
    width: 20%;
    background: transparent;
    border: none;
    text-align: center;
    position: relative;
}

.card-content{
    margin: 5px;
    color: #fff;
    font-size: 12px;
    border: none;
    overflow: hidden;
    position: relative;
}

.percent{
    height: 27px;
    display: flex;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    /* border-radius: .25rem; */
    position: relative;
    z-index: 1;
    border-radius: 18px;
    width: 90%;
    margin: 0 auto;
}

.percent p{
    z-index: 15;    
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    transform: translateY(14px);
    color: black;
}

.percent-bar{
    /* background-color: #ffc107; */
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    /* background-color: #007bff; */
    transition: width .6s ease;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
    /* animation: ; */
    z-index: 10;
}

.yellow{
    background-color: #ffc107;
}

.green{
    background-color: #28a745;
}

.red{
    background-color: #dc3545;
}

.hover-btn{
    position: absolute;
    opacity: 0;
    background-color: rgba(0,0,0,0.9);
    transition: all 0.1s ease-in-out;
    z-index: 10;
    width: 100%;
    height: 87%;
}

.maintenance{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    margin: -6px;
}

.maintenance p{
    position: relative;
    top: 40%;
    font-size: 13px;
}

.play-btn{
    font-size: 15px;
    text-decoration: none;
    color: white;
    text-align: center;
    align-items: center;
    /* width: 100%; */
    margin-top: 42%;
    padding: 8px;
    display: block;
    margin-left: 30px;
    margin-right: 30px;
    margin: 42% 30px 42% 30px;
    background: linear-gradient(to bottom,#fff095 0%,#b88416 88%);
    color: #000;
    border-radius: 18px;
    transition: all .3s ease;;
}

.play-btn:hover{
    background: linear-gradient(to top,#fff095 0%,#b88416 88%);
}

.img-zoom{
    transition: all 0.45s ease-in-out;
}

.ygg-img{
    border: 5px solid #2F2F2F;
}

.hover-btn:hover{
    opacity: 100%;
}

.hover-btn:hover ~ .img-zoom{
    /* transform: scale(1.2); */
    position: relative;
}

.short{
    display: none;
}
.next-btn{
    /* display: none; */
    background: linear-gradient(to bottom,#242424 0%,#515151 46%,#242424 100%);
    width: 15%;
}

.mySlides{
    display: none;
}

.next-btn{
    background-color: #292a2b;
    border: none;
    color: #fff;
}

@media (min-width: 576px){
    .container{
        max-width: 540px;
    }
    
}

@media (min-width: 768px){
    .container{
        max-width: 720px;
    }
    
}

@media (min-width: 992px){
    .container{
        max-width: 960px;
    }
}

@media (min-width: 1200px){
    .container{
        max-width: 1140px;
    }
    
}

@media (max-width: 992px) {
    .slot-sidebar-nav{
        flex-wrap: nowrap;
    }
    .slot-sidebar{
        float: none !important;
        width: 100% !important; 
        flex: none !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    .content{
        float: none !important;
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }
    .card{
        width: 33.3% !important;
    }
    .hover-btn{
        display: none;
    }
    .hover-btn:hover ~ .img-zoom{
        transform: scale(1);
        position: relative;
    }
    .btn-provider{
        text-align: center;
        display: block;
    }  
    .enter{
        display: block;
    }
    .btn-provider span{
        position: unset;
    }
    .btn-provider i{
        margin: 0;
    }
    .slot-sidebar-nav li{
        border-bottom: none;
    }
    .slot-sidebar-nav li a p{
        font-size: 13px;
    }
    .img-zoom{
        height: auto;
    }
    .slot-sidebar-nav li a img{
        height: 37.5px !important;
    }
    .maintenance p{
        font-size: 5px;
    }
}

/* =========================
   BLUE THEME + RED ACCENT (override)
   ========================= */

:root{
  --bg0:#050712;
  --bg1:#070b18;
  --panel:#0b1024;
  --panel2:#0a0f1f;

  --blue:#00b7ff;
  --blue2:#0092b1;
  --blueGlow: rgba(0,183,255,.35);

  --red:#ff2b4a;
  --red2:#b8002a;
  --redGlow: rgba(255,43,74,.35);

  --text:#eaf6ff;
  --muted:#9fb9c7;

  --stroke: rgba(0,183,255,.35);
  --stroke2: rgba(0,183,255,.18);
}

*{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* body */
body{
  background: radial-gradient(1200px 600px at 50% 0%, rgba(0,183,255,.18), transparent 60%),
              radial-gradient(900px 500px at 20% 80%, rgba(255,43,74,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), #000 60%);
  background-attachment: fixed;
  color: var(--text);
}

/* links */
a:hover{ color: var(--text); }

/* title */
.title-text{
  color: var(--text);
  text-shadow: 0 0 14px rgba(0,183,255,.35);
}

/* main content panel */
.slot .content{
  background: linear-gradient(180deg, rgba(10,16,36,.9), rgba(0,0,0,.75));
  border-top: 1px solid var(--stroke2);
  box-shadow: 0 -10px 30px rgba(0,183,255,.08) inset;
}

/* sidebar nav */
.slot-sidebar-nav > li{
  background: linear-gradient(180deg, rgba(0,183,255,.18), rgba(9,12,22,.85));
  border: 1px solid var(--stroke2);
  box-shadow: 0 0 0 1px rgba(255,43,74,.05) inset;
}

.slot-sidebar-nav > li > a{
  background: transparent;
  color: var(--text);
  letter-spacing: .3px;
}

/* active item */
.active{
  /*background: linear-gradient(180deg, rgba(0,183,255,.35), rgba(0,146,177,.18)) !important;*/
  box-shadow: 0 0 18px rgba(0,183,255,.25);
  border: 1px solid var(--stroke);
}

/* provider button hover */
.btn-provider:hover{
  background: linear-gradient(180deg, rgba(255,43,74,.22), rgba(0,0,0,.0));
}

/* cards */
.card-content{
  background: linear-gradient(180deg, rgba(8,12,26,.75), rgba(0,0,0,.25));
  border: 1px solid var(--stroke2);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,183,255,.06) inset,
    0 10px 30px rgba(0,0,0,.45);
}

/* image */
.img-zoom{
  border-radius: 10px;
  filter: saturate(1.05) contrast(1.05);
  transition: transform .35s ease, filter .35s ease;
}

.card-content:hover .img-zoom{
  transform: scale(1.02);
  filter: saturate(1.15) contrast(1.1);
}

/* hover overlay */
.hover-btn{
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.90));
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  border-radius: 14px;
  border: 1px solid rgba(0,183,255,.18);
  box-shadow: 0 0 22px rgba(0,183,255,.10) inset;
}

.hover-btn:hover{
  opacity: 1;
}

/* play button: red accent */
.play-btn{
  background: linear-gradient(180deg, rgba(255,43,74,1), rgba(184,0,42,1));
  color: #fff;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 26px rgba(255,43,74,.25),
    0 0 18px rgba(255,43,74,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.play-btn:hover{
  background: linear-gradient(180deg, rgba(255,70,95,1), rgba(255,43,74,1));
  transform: translateY(-1px);
}

/* maintenance overlay */
.maintenance{
  background: linear-gradient(180deg, rgba(255,43,74,.20), rgba(0,0,0,.65));
  border: 1px solid rgba(255,43,74,.25);
  border-radius: 14px;
}

.maintenance p{
  color: #fff;
  text-shadow: 0 0 12px rgba(255,43,74,.35);
}

/* progress container */
.percent{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke2);
  box-shadow: 0 0 18px rgba(0,183,255,.10) inset;
}

/* percent text */
.percent p{
  color: var(--text);
  text-shadow: 0 0 10px rgba(0,183,255,.25);
}

/* percent bar default = blue */
.percent-bar{
  background-color: rgba(0,183,255,.85);
  box-shadow:
    0 0 18px rgba(0,183,255,.28),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* optional: color classes remapped */

.red   { background-color: rgba(255,43,74,.92) !important; box-shadow: 0 0 18px rgba(255,43,74,.25); }

/* ygg border */
.ygg-img{
  border: 2px solid rgba(0,183,255,.25);
  box-shadow: 0 0 14px rgba(0,183,255,.12);
}

/* Next button */
.next-btn{
  background: linear-gradient(180deg, rgba(0,183,255,.18), rgba(0,0,0,.35));
  border: 1px solid rgba(0,183,255,.22);
  color: var(--text);
}

/* Mobile: keep your sizing rules as-is */
@media (max-width: 992px){
  .hover-btn{ display:none; }
}
/* =========================
   FUTURISTIC ADD-ON PATCH
   ========================= */

/* subtle animated background scan */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  opacity: .15;
  animation: scanDrift 7s linear infinite;
}

@keyframes scanDrift{
  from{ transform: translateY(-12px); }
  to  { transform: translateY(12px); }
}

/* neon breathing on title */
.title-text{
  position: relative;
  animation: neonBreath 3.2s ease-in-out infinite;
}
@keyframes neonBreath{
  0%,100%{ text-shadow: 0 0 10px rgba(0,183,255,.25), 0 0 22px rgba(0,183,255,.15); }
  50%    { text-shadow: 0 0 14px rgba(0,183,255,.45), 0 0 34px rgba(0,183,255,.22); }
}

/* card: hover lift + border glow + depth */
.card-content{
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  overflow: hidden; /* for effects inside */
}

.card-content::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: 16px;
  background: radial-gradient(600px 220px at 40% -30%, rgba(0,183,255,.35), transparent 55%),
              radial-gradient(420px 220px at 120% 40%, rgba(255,43,74,.20), transparent 55%);
  opacity: .0;
  transition: opacity .22s ease;
}

.card-content:hover{
  transform: translateY(-4px);
  border-color: rgba(0,183,255,.40);
  box-shadow:
    0 0 0 1px rgba(0,183,255,.10) inset,
    0 18px 40px rgba(0,0,0,.55),
    0 0 26px rgba(0,183,255,.16);
}
.card-content:hover::before{ opacity: 1; }

/* image: micro parallax + sharpen */
.card-content:hover .img-zoom{
  transform: scale(1.04);
  filter: saturate(1.2) contrast(1.12);
}

/* hover overlay: fade + tiny zoom */
.hover-btn{
  transform: scale(.98);
}
.card-content:hover .hover-btn{
  opacity: 1;
  transform: scale(1);
}

/* play button: pulse + sheen sweep */
.play-btn{
  position: relative;
  overflow: hidden;
  animation: redPulse 2.2s ease-in-out infinite;
}

@keyframes redPulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 10px 26px rgba(255,43,74,.22),
      0 0 16px rgba(255,43,74,.18);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 14px 34px rgba(255,43,74,.32),
      0 0 28px rgba(255,43,74,.28);
  }
}

.play-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  animation: sheen 2.6s ease-in-out infinite;
}

@keyframes sheen{
  0%   { left:-120%; opacity:.0; }
  20%  { opacity:.65; }
  55%  { left:140%; opacity:.0; }
  100% { left:140%; opacity:.0; }
}

/* percent bar: cyber stripes + moving glow */
.percent{
  position: relative;
  overflow: hidden;
}
.percent::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(220px 40px at 0% 50%, rgba(0,183,255,.18), transparent 60%);
  animation: barGlowSweep 2.4s linear infinite;
  opacity:.65;
}

@keyframes barGlowSweep{
  from{ transform: translateX(-25%); }
  to  { transform: translateX(125%); }
}

.percent-bar{
  position: relative;
  overflow: hidden;
}
.percent-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.18) 0px,
      rgba(255,255,255,.18) 6px,
      transparent 6px,
      transparent 14px
    );
  opacity:.45;
  animation: stripeRun 1.1s linear infinite;
}

@keyframes stripeRun{
  from{ transform: translateX(-22px); }
  to  { transform: translateX(22px); }
}

/* red bar variant gets its own aggressive pulse */
.percent-bar.red,
.red .percent-bar,
.red{
  animation: redBarPulse 1.6s ease-in-out infinite;
}

@keyframes redBarPulse{
  0%,100%{ filter: saturate(1) brightness(1); box-shadow: 0 0 16px rgba(255,43,74,.20); }
  50%    { filter: saturate(1.15) brightness(1.08); box-shadow: 0 0 26px rgba(255,43,74,.35); }
}

/* focus ring for keyboard navigation (futuristic but usable) */
a:focus-visible{
  outline: 2px solid rgba(0,183,255,.85);
  outline-offset: 3px;
  box-shadow: 0 0 18px rgba(0,183,255,.28);
}