body {
      background: url('../img/heroBG.png') repeat-x;
      background-size: contain;
      background-position: top;
      font-family: sans-serif;
    }
    .logo{
      width: 150px;
      height: auto;
      margin: 10px 0;
    }
    .container h2{
      color: #7223d8 !important;
      font-family: Roboto;
      font-size: 2rem;
    }

    .hero-banner {
      width: 100%;
      max-width: 1400px;
      margin: auto;
      margin-top: -20px;
      display: block;
      border-radius: 20px;
      padding: 0 20px;
      cursor: pointer;
    }
    .play-btn {
      margin: 15px auto;
      display: block;
      max-width: 200px;
      cursor: pointer;
    }
    @keyframes breath {
    0%, 100% {
    transform: scale(1);
    }
    50% {
    transform: scale(1.20); /* Scale up slightly */
    }
    }
    .btn-breath {
    animation: breath 2s infinite; /* 3s duration, infinite repetition */
    }
    .how-to-win {
      background: url('../img/how-to-win-bg.png') repeat;
      background-size: cover;
      padding: 40px 20px;
      min-height: 400px;
    }
    .how-to-win .step {
      background: white;
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      max-width: 250px;
      width: 50%;
      margin: auto;
      border: solid 2px #cccccc;
      cursor: pointer;
      transition: all 0.5s ease-out;
    }
    .how-to-win .step:hover {
    transform: scale(120%);
    }
    .how-to-win .step h3{
      color:#7223d8;
      font-size: 4rem;
      font-weight: 800;
      margin: 0;
    }
    .how-to-win .step p{
      color:#666666;
      font-size: 0.8rem;
      font-weight: 800;
      margin: 0;
      text-transform: uppercase;
    }
    .btn-outline-secondary{
      background-color: #7223d8 !important;
      color: #FFF !important;
      text-transform: uppercase !important;
      border: none !important;
      margin-top: 40px;
      transition: all 0.5s ease-out;
    }
    .btn-outline-secondary:hover{
      background-color: #4e208a !important;
      transform: scale(120%);
    }
    .games-section img {
      width: 100%;
      border-radius: 10px;
    }
    .games{
      transition: all 0.5s ease-out;
    }
    .games:hover{
      transform: scale(110%);
      cursor: pointer;
    }
    footer {
      background: #1a1a1a;
      color: white;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
      text-transform: uppercase;
    }

    /* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {
  .how-to-win .step {
      border-radius: 10px;
      padding: 15px;
      max-width: 250px;
      width: 100%;
      height: 100%;
      margin: auto;
      cursor: pointer;
      transition: all 0.5s ease-out;
    }
}

    /* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {
    .logo{
      width: 300px;
      height: auto;
    }

    .container h2{
      font-family: Roboto;
      font-size: 3rem;
    }

    .play-btn {
      margin: auto;
      margin-top: -10px;
      margin-bottom: 30px;
      display: block;
      max-width: 350px;
      cursor: pointer;
    }

    .how-to-win {
      min-height: 700px;
    }

    .how-to-win .step {
      border-radius: 10px;
      padding: 15px;
      max-width: 250px;
      width: 100%;
      height: 100%;
      margin: auto;
      cursor: pointer;
      transition: all 0.5s ease-out;
    }

    .how-to-win .step h3{
      font-size: 7rem;
      font-weight: 800;
      margin: 0;
    }
    .how-to-win .step p{
      font-size: 1.2rem;
      font-weight: 800;
      margin: 0;
      text-transform: uppercase;
    }
}