@font-face {
  font-family: race-sport;
  src: url("./assets/fonts/Race-Sport.ttf");
}
.yellow-color {
  color: #e9c12d;
}

.title {
  font-family: "race-sport";
  font-weight: 400;
}

.title.main-title {
  font-size: calc(3.375rem + 0.8vw);
  line-height: 1.06;
  letter-spacing: 0.05em;
}

.pt img{width: 100px;height: 80px;}

@media screen and (max-width: 1024px) {
  .title.main-title {
    font-size: calc(2.375rem + 1.5vw);
  }
  .pt img {
    width: 78px;
    height: 42px;
  }
}

.btn-close {
  background-color: white;
  border-radius: 20px;
}

.btn-custom-primary {
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: calc(26px + 3vmin);
  color: white;
  background: linear-gradient(90deg, #8d084c 0%, #EA2087 100%);;
  border-radius: 39px;
  font-family: "Bangers";
}

.modal-content {
  background-color: #17185c;
  border: 1px solid white;
  border-radius: 25px;
}

/* Hero */

.hero {
  background-color: #17185c;
  padding: 5vh 0;
}

.hero__right {
  position: relative;
}

.hero__roulet {
  position: absolute;
  inset: 0;
  width: 100%;
  transition: rotate 5s ease-in-out;
}

/* Roulete animation */

.firstRotate {
  transform: rotate(705deg);
  transition: transform 3s ease-in-out;
}

.secondRotate {
  transform: rotate(1160deg);
}

.thirdRotate {
  transform: rotate(2135deg);
  transition: transform 3s ease-in-out;
}

/* Button arrow animation */

@keyframes scale {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.arrow-right {
  animation: 3s ease-in-out 1s infinite both running scale;
}
.arrow-left {
  animation: 3s ease-in-out 1s infinite both running scale;
}