@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Raleway&display=swap');

/* Start Default / Main */
html, body, .container-fluid{
  background-color: #000 !important;
  background-image: url(../img/StepsBack.jpg);
  background-size: cover;
  background-position: center;
}

h1{
  font-family: 'Bowlby One', cursive;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

h2, h3, p {
  font-family: 'Raleway', sans-serif;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a{
  color: green !important;
  text-decoration: none !important;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
/* End Default / Main */

/* Start Colors */
:root {
  --main-color: #fff;
  --secondary-color: #eeff07;
  --third-color: #eeff07;
}

.btn-success {
    color: #04610f !important;
    font-size: 25px !important;
    background-color: #00ff1f !important;
    border: 3px solid #00ff1f !important;
}

.btn-success:hover {
    color: #04610f !important;
    background-color: #eef806 !important;
    border: 3px solid #00ff1f !important;
}

.btn-success:active {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

/* End Colors */

.link{
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.hero{
  display: inline-block;
  height: 75vh;
  background-size: cover;
  background-position: left;
  background-image: url(../img/background.jpg);
  background-attachment: fixed;
}

.main-text{
  padding: 15px;
  margin-bottom: 50px;
  background-color: #181818c9;
  border-radius: 10px;
}

.main-text h2{
  color: var(--main-color);
  text-align: center;
}

.bonus{
  margin-top: 30px;
  line-height: 35px;
  font-size: 60px;
  color: var(--secondary-color) !important;
}

.bonus span{
  font-size: 30px;
  color: var(--secondary-color) !important;
  line-height: 0;
}

.main-text .price{
  color: var(--main-color);
  text-align: center;
  font-size: 1.6rem;
}

.main-text h2{
  color: var(--main-color);
  text-align: center;
  font-size: 1rem;
}

.ndp{
  color: var(--main-color);
}

.btn-block{
  width: 100%;
}

.steps{
  border-top: 3px solid var(--third-color);
  /* height: 30vh; */
}

.logo{
  cursor: pointer;
  padding: 10px;
  margin-top: -15%;
  margin-bottom: 20%;
  background-color: #000;
  border-radius: 10px;
  border: 1px solid var(--third-color);
}

.deposit{
  color: var(--main-color);
}

.mid-star{
  padding: 30px;
}

.star{
  margin: 10px;
}

.steps-square{
  display: none;
  border-radius: 10px;
  padding: 50px;
  margin: 30px;
  background-color: #000;
  cursor: pointer;
}

.steps-square:hover{
  border: 1px solid var(--third-color);
  /*Shadow ------------*/
  box-shadow: 8px 6px 7px rgba(84, 84, 84, 0.2)  ;
  -webkit-box-shadow: 8px 6px 7px rgba(84, 84, 84, 0.2)  ;
  -moz-box-shadow: 8px 6px 7px rgba(84, 84, 84, 0.2)  ;
}

.steps-square h1{
  font-size: 3rem;
  color: var(--third-color);
}

.steps-square h3{
  font-size: 24px;
  padding-bottom: 5px;
  color: var(--main-color);
}

.terms-text{
  display: none ;
  text-align: center;
  padding: 5px;
  color: #989898;
}

.pay{
  margin-bottom: 50px;
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 50px;
  }

  .bonus span{
    font-size: 21px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.6rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -15%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 50px;
  }

  .bonus span{
    font-size: 21px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.6rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -6%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }

  .pay{
    margin-bottom: 0px;
  }

 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .steps{
    height: 10vh;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 50px;
  }

  .bonus span{
    font-size: 21px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.6rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -5%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 20px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 60px;
  }

  .bonus span{
    font-size: 23px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.8rem;
    margin-top: 20px;
  }

  .main-text h2{
    text-align: center;
    font-size: 1.5rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -3%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    margin-top: 5px;
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1366px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 70px;
  }

  .bonus span{
    font-size: 30px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.6rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1.5rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -4%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    margin-top: 5px;
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 70px;
  }

  .bonus span{
    font-size: 30px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 1.9rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1.6rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -3%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    margin-top: 18px;
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 70px;
  }

  .bonus span{
    font-size: 30px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 2.2rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 1.9rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -3%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
    width: auto;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    font-size: 3.2rem;
  }

  .steps-square h3{
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1900px) {
  .head-space{
    height: 10vh;
  }

  .hero{
    display: inline-block;
    height: 60vh;
  }

  #view0{
    height: 20vh;
  }

  .stars{
    height: 5vh;
  }

  .step{
    height: 100%;
  }

  .main-text{
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 10px;
  }

  .main-text h2{
    text-align: center;
  }

  .bonus{
    margin-top: 30px;
    line-height: 35px;
    font-size: 80px;
  }

  .bonus span{
    font-size: 35px;
    line-height: 0;
  }

  .main-text .price{
    text-align: center;
    font-size: 2.6rem;
  }

  .main-text h2{
    text-align: center;
    font-size: 2rem;
  }

  .btn-block{
    width: 100%;
  }

  .logo{
    padding: 10px;
    margin-top: -2.5%;
    border-radius: 10px;
    border: 1px solid var(--third-color);
  }

  .mid-star{
    padding: 30px;
  }

  .star{
    margin: 10px;
  }

  .steps-square{
    border-radius: 10px;
    padding: 5px;
    margin: 30px;
    cursor: pointer;
  }

  .steps-square:hover{
    border: 1px solid var(--third-color);
  }

  .steps-square h1{
    font-size: 4.2rem;
  }

  .steps-square h3{
    font-size: 31px;
    padding-bottom: 5px;
    color: var(--main-color);
  }

  .terms-text{
    display: none ;
    text-align: center;
    padding: 5px;
  }
 }