body{
    color: #FFF;
    min-height: 100vh;
}

@font-face {
    font-family: 'hemi_headbold_italic';
    src: url('../font/hemi_head_bd_it/hemi_head_bd_it-webfont.woff2') format('woff2'),
         url('../font/hemi_head_bd_it/hemi_head_bd_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.dm-serif-text-regular {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}


h1, .font-primary{
    font-family: 'hemi_headbold_italic';
}

a{
    color: #ebcb5e;
}

    a:hover{
        color: #CCC;
    }



.footer-link{
    color: #CCC;
}

    .footer-link:hover{
        color: #ebcb5e;
    }

.text-primary{
    color: #ebcb5e!important;
}

.text-primary2{
  color: #ff914d;
}

.text-secondary{
    color: #0d2437!important;
}

.border-secondary{
    border-color: #073f76!important;
}

.border-primary{
    border-color: #ebcb5e!important;
}

.btn-outline-primary{
    border-color: #ebcb5e!important;
    color: #EAEAEA;
}

.btn{
    font-family: 'hemi_headbold_italic';
    text-transform: uppercase;
}

    .btn:hover{
        border-color: #E6CB52!important;
        background: #FFF!important;
        color: #0d2437!important;
    }

.btn-primary{
    background: #E6CB52;
    background: linear-gradient(280deg, rgba(230, 203, 82, 1) 0%, rgba(255, 223, 157, 1) 100%);
    border: #ebcb5e!important;
    color: #0d2437;
}

.btn-secondary{
    background: #073f76!important;
    border-color: #06427c!important;
}

.btn-outline-secondary{
    border-color: #073f76;
}

.bg-primary{
    background: #E6CB52!important;
}

.bg-secondary{
    background: #0d2437!important;
}

.bg-st{
  background: url(../media/toWEBP/Website_114.webp?v=1) no-repeat center;
  background-size: 100%;
}

.bg-gradient{
    background: 
    radial-gradient(circle at 20% 30%, rgba(3,33,58,0.65) 0%, rgba(9,69,130,0) 55%),
    radial-gradient(circle at 80% 70%, rgba(12,35,54,0.75) 0%, rgba(12,35,54,0) 30%),
    radial-gradient(circle at 50% 50%, rgba(3,33,58,0.65) 0%, rgba(3,33,58,0) 65%),
    linear-gradient(135deg, #021529 0%, #03213a 100%)!important;

  background-blend-mode: screen;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg-gradient-light-main, .bg-gradient-light{
  background: #094787;
  background: radial-gradient(circle, rgba(9, 71, 135, 1) 0%, rgba(9, 71, 135, 0) 45%);
}

.bg-gradient-light-main{
  right: -20%;
}

.bg-gradient-light2{
  background: #EBCB5E ;
  background: radial-gradient(circle, rgba(235, 203, 94, 1) 0%, rgba(235, 203, 94, 0) 45%);
  z-index: -1;
}

.bg-icon{
    background: #03213A;
    background: linear-gradient(280deg, rgba(3, 33, 58, 1) 0%, rgba(0, 16, 36, 1) 79%, rgba(8, 63, 119, 1) 100%);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.floating {
  animation: floatSoft 4s ease-in-out infinite;
}

/* Mobile Menu */

.m-menu-item{
  font-size: 13px;
}

/* Sportsbook */

.sportsbook-ticker-item{
    font-size: 13px;
}

  h1{
    font-size: 2.5rem;
  }

  .hero h1, .hero p{
    text-shadow: 5px 5px 10px rgb(3, 33, 58);
  }

  .hero-sc{
    top: 25%;
    right: -5%;
  }

  .hero-gc{
    top: 5%;
    right: 35%;
  }

/* Streaks Section */

/* WRAPPER */
.streaks-wrapper {
  position: relative;
}

/* 🌈 GRADIENT */
.bg-gradient-strakes {
  position: absolute;
  width: 50%;
  height: 80%;
  border-radius: 50%;
  filter: blur(140px);
  top: 70%;
  transform: translateY(-50%);
  transition: all 0.8s ease;
}

.gold-active .bg-gradient-strakes {
  background: radial-gradient(circle, #ebcb59, transparent);
  left: 20%;
}

.cash-active .bg-gradient-strakes {
  background: radial-gradient(circle, #00b862, transparent);
  left: 30%;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* INFO */
.info-box {
  position: relative;
  z-index: 2;
  margin: 60px auto;
  text-align: center;
}

/* CONTENT CROSSFADE */
.content-wallet-wrapper {
  position: relative;
  height: 300px;
}

.content-wallet {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.content-wallet.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* TOGGLE */
.toggle {
  margin-top: 20px;
  position: relative;
  width: 260px;
  height: 50px;
  background: #0c2336;
  border-radius: 30px;
  display: flex;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

/* Opciones */
.toggle-option {
  flex: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFF;
  transition: all 0.3s ease;
}

/* ✨ Hover glow */
.toggle-option:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.toggle-option.active {
  color: #000;
  font-weight: bold;
}

/* Botón */
.toggle-btn {
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 30px;
  border: none;
  z-index: 1;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Posición */
.gold-active .toggle-btn { left: 0; }
.cash-active .toggle-btn { left: 50%; }

/* Gradientes */
.bg-gradient-gold {
  background: linear-gradient(45deg, #ebcb59, #FFF);
}

.bg-gradient-green {
  background: linear-gradient(45deg, #00ff88, #00da74);
}

.text-gold {
  color: #ebcb59;
}

.text-green {
  color: #00b862;
}

/* =========================
   ELEMENTOS BASE
========================= */
.elements {
  width: 30%;
  pointer-events: none;
  height: 100%;
}

.elements.gold .top { left: 5%; top: 100px; position: absolute; }
.elements.cash .top { right: 5%; top: 100px; position: absolute; }

.elements.gold{
  left: 5%;
}

.elements.cash{
  right: 5%;
}

.small-streaks { position: absolute; top: 10%; }
.big { position: absolute; bottom: 40px; }

.elements img {
  display: block;
  transform: scale(0.9);
  opacity: 0.7;
  filter: brightness(0.8);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease,
              opacity 0.4s ease;
}

/* FLOAT */
@keyframes floatSoft {
  0% { transform: translateY(0px); }
  30% { transform: translateY(-10px); }
  60% { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

.float {
  animation: floatSoft 4s ease-in-out infinite;
}

/* GOLD ACTIVE */
.gold-active .gold img {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
}

.gold-active .gold .small-streaks img {
  transform: scale(1.1);
}

.gold-active .gold .big img {
  transform: scale(1.2);
}

/* CASH ACTIVE */
.cash-active .cash img {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
}

.cash-active .cash .small-streaks img {
  transform: scale(1.1);
}

.cash-active .cash .big img {
  transform: scale(1.2);
}

/* INACTIVOS */
.gold-active .cash img,
.cash-active .gold img {
  transform: scale(0.85);
  opacity: 0.3;
  filter: blur(2px) brightness(0.6);
}

/* POP IN */
.gold-active .gold .small-streaks img,
.cash-active .cash .small-streaks img {
  animation: popIn 0.5s ease;
}

.gold-active .gold .big img,
.cash-active .cash .big img {
  animation: popInBig 0.6s ease;
}

@keyframes popIn {
  0% { transform: scale(0.8); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

@keyframes popInBig {
  0% { transform: scale(0.7); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1.2); }
}

/* Hero */

.hero{
  overflow: hidden;
}

.hero-player{
  right: -5%;
  top: -10%;
}

/* Promos */

.card-img-top{
  margin: -30% 0 0 0;
}

/* Casino */

.bg-gradient2{
  background: #021A2F;
  background: radial-gradient(circle, rgba(2, 26, 47, 1) 0%, rgba(2, 26, 47, 0) 43%);
}


/* Closing */

.closing-player{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ticker {
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .ticker-track {
    animation: tickerMove 25s linear infinite;
  }

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

/* End Closing */

/* sm */
@media (max-width: 576px) {

  h2, h3, h4, h5, h6{
    font-size: .9rem;
  }

  .small{
    font-size: .8rem;
  }

}

/* sm */
@media (min-width: 576px) {}

/* md */
@media (min-width: 768px) {

    .hero{
      overflow: visible;
    }

    .hero-player{
      right: 5%;
    }

    h1{
      font-size: 3rem;
    }

    .hero-gc{
      top: 10%;
    }

    .hero-sc{
      top: 5%;
      right: -5%;
    }

    .closing-player{
      position: relative;
      top: 0;
      transform: translateY(0) !important;
    }

}

/* lg */
@media (min-width: 992px) {

    .states{
        background-size: auto;
    }

    h1{
      font-size: 4.5rem;
    }

    .st-hover{
      position: relative;
      overflow: visible;
    }

    .st-hover::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%;
      height: 120%;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1);
      
      background: radial-gradient(circle, rgba(1, 56, 119, 0.6) 0%, rgba(53, 117, 190, 0.4) 40%, rgba(255, 255, 255, 0) 70% );

      filter: blur(20px);
      opacity: 0;
      transition: all .3s ease;
      z-index: -1;
    }

    /* Hover: EXPANSIÓN */
    .st-hover:hover::before {
      transform: translate(-50%, -50%) scale(1.3); /* 👈 20% más grande */
      opacity: 1;
      display: block;
    }

}

/* xl */
@media (min-width: 1200px) {

    /*.container{
        width: 90%;
        max-width: 1600px;
    }*/

    .sportsbook-ticker-item{
        font-size: 1.2rem;
    }

}

/* xxl */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1350px;
  }
}