.hero {
  display: flex;
  align-items: center;
    background: #270a3a;
    height: 530px;
    margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  // padding: 118px 0;
  @media screen and (min-width: 768px) {
    width: 100%;
    max-width: 100vw;
  }

  @media screen and (min-width: 1200px) {
    max-width: 100vw;
    // min-height: 530px;
    display: flex;
      align-items: center;
      background: #270a3a;
      height: 0px;
      // margin: 0 auto;
  }
}

  .hero__block {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
  }

  .hero__slotsstar {
    position: absolute;
    height: 248px;
      width:  365px;
      top: -1016px;
      margin-left: 33px;

    @media screen and (min-width: 768px) {
      height: 260px;
      width: 358px;
      top: -970px;
      margin-left: 30px;
    }

    @media screen and (min-width: 1200px) {
          position: absolute;
            height: 269px;
              width: 396px;
              top: -680px;
              margin-left: 39px;
  }
    @media screen and (min-width: 1600px) {
      position: absolute;
        height: 269px;
        width: 396px;
        top: -625px;
        margin-left: 39px;
    }
}

    .hero__slots {
      padding-top: 24px;
        background-color: #fff;
        margin: 0px auto;
        height: 150px;
        width: 460px;
        border-radius: 0 0 50% 50% / 0 0 30px 30px;
        width: 295px;

      @media screen and (min-width: 768px) {
        padding-top: 49px;
          background-color: #fff;
          margin: 0px auto;
          height: 145px;
          width: 460px;
          border-radius: 0 0 50% 50% / 0 0 30px 30px;
        width: 295px;
      }

      @media screen and (min-width: 1200px) {
        padding-top: 97px;
      background-color: #fff;
      margin: 0px auto;
      height: 215px;
      width: 331px;
      border-radius: 0 0 50% 50% / 0 0 30px 30px;
    }
  }

    .hero__logo {
      display: block;
      margin: 0 auto;
      width: 110px;
      height: 110px;
      @media screen and (min-width: 1200px) {
        width: 110px;
        height: 110px;
      }
    }

    .hero__5stars {
      display: block;
        margin: 0 auto;
        width: 132px;
          height: 42px;
        @media screen and (min-width: 1200px) {
          display: block;
            margin: 0 auto;
            width: 132px;
            height: 47px;
        }
    }

    .title__hero {
      font-size: 20px;
        font-family: Fredoka One;
        color: #fff;
        text-transform: uppercase;
        line-height: 1.2;
        text-align: center;
      @media screen and (min-width: 768px) {
        font-size: 22px;
          font-family: Fredoka One;
          color: #fff;
          text-transform: uppercase;
          line-height: 1.2;
          text-align: center;
      }
      @media screen and (min-width: 1200px) {
      font-size: 22px;
        font-family: Fredoka One;
        color: #fff;
        text-transform: uppercase;
        line-height: 1.2;
        text-align: center;
      }
    }
  
    .accent-color {
      color: rgb(249, 218, 73);
    }

      .hero__box {
      background-color: #804cb9;
        border-radius: 0 0 15% 15%;
        border: 4px solid #d8b367;
        border-style: solid;
        border-width: 2px;
        border-radius: 20px;
        -webkit-box-shadow: 0px 0px 10px 3px #f9da49;
          box-shadow: 0px 0px 10px 3px #f9da49;
        /* margin-top: -760px; */
        margin-top: -794px;
        margin-left: 3px;

        @media screen and (min-width: 768px) {
        background-color: #804cb9;
        border-radius: 0 0 15% 15%;
        border: 4px solid #d8b367;
        border-style: solid;
          border-width: 2px;
          border-radius: 20px;
          -webkit-box-shadow: 0px 0px 10px 3px #f9da49;
            box-shadow: 0px 0px 10px 3px #f9da49;
          margin-top: -750px;
          margin-left: 3px;
        }
        
          @media screen and (min-width: 1200px) {
            background-color: #804cb9;
              border-radius: 0 0 15% 15%;
              border: 4px solid #d8b367;
              border-style: solid;
              border-width: 2px;
              border-radius: 20px;
            -webkit-box-shadow: 0px 0px 10px 3px #f9da49;
            box-shadow: 0px 0px 10px 3px #f9da49;
              margin-top: -520px;
              margin-left: 9px;
      }

             @media screen and (min-width: 1600px) {
              margin-top: -450px;
             }
    }

      .hero__item {
        margin-bottom: 5%;
      }

      // .hero__item-margin {
      //   margin-bottom: 10%;
      // }

      .link__hero {
        font-size: 12px;
        position: relative;
        text-decoration: underline;
        color: #fff;
      }

.tc-tooltip {
    font-size: 10px;
    text-decoration: underline;
    display: block;
    color: #fff;
    position: relative;
}

     .desktop-tooltip {
    display: none;
}

.tooltip-content {
    display: none;
    background: #fff;
    padding: 10px;
    position: absolute;
    margin: 10px 0 0;
    color: #000;
    z-index: 99;
    font-size: 12px;
    // width: 450px;
    left: 0;
    right: 0;
}

 .tc-tooltip:hover~.tooltip-content{
  display: none;
   @media screen and (min-width: 1200px) {
 	display: block;
   }
 }