* {
  box-sizing: border-box;
  outline: 0;
}
html {
  scroll-behavior: smooth;
  color-scheme: light;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: inherit;
}
a button {
  cursor: pointer;
}
body {
  background-image: url(../img/bg.png);
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  font-family: "Permanent Marker";
  overflow: hidden;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

h1 {
  color: #fff;

  font-family: "Permanent Marker";
  font-size: 52.629px;
  font-style: normal;
  font-weight: 400;
  line-height: 50.825px;
  text-transform: capitalize;
}

.bonus-box {
  width: 334.275px;
  height: 42.856px;
  position: relative;
  margin-bottom: 30px;
}
.bonus-box::before {
  content: "+100 FreeSpins";
  display: flex;

  justify-content: center;
  align-items: center;
  color: #1e2128;
  position: absolute;
  font-size: 28.531px;
  font-style: normal;
  font-weight: 400;
  line-height: 15.216px;
  text-transform: capitalize;
  z-index: -1;
  top: 20px;
  right: 64px;
  width: 334.275px;
  height: 42.856px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='301' height='44' viewBox='0 0 301 44' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M201.318 0.556998C198.096 0.560407 195.236 0.563433 192.809 0.563433C187 0.563433 179.826 0.553197 171.877 0.541854C142.961 0.500592 103.783 0.444689 82.6932 0.813649C73.6011 0.97271 -1.28738 1.07816 -10.3591 1.07816C-10.6911 1.07816 -11.0524 1.07037 -11.4243 1.06236C-12.6795 1.0353 -14.0552 1.00565 -14.8326 1.26403C-14.9699 1.30967 -15.1026 1.353 -15.2312 1.39499C-15.9228 1.62074 -16.4958 1.80782 -17.0264 2.10761C-17.6232 2.44486 -18.7414 2.47125 -19.8227 2.49677C-20.3053 2.50816 -20.7806 2.51938 -21.1988 2.55799C-22.6565 2.69259 -24.3467 2.66644 -25.9619 2.64144C-26.585 2.6318 -27.197 2.62233 -27.7801 2.62233C-30.2282 2.62233 -29.4952 3.53065 -28.9342 4.22595C-28.7466 4.45837 -28.5783 4.66699 -28.5544 4.80991C-28.4683 5.3251 -28.3551 5.83681 -28.2419 6.34835C-28.011 7.39244 -27.7801 8.43584 -27.7801 9.50678C-27.7801 11.2579 -28.9856 12.7389 -31.0923 14.3395C-31.2951 14.4935 -31.4942 14.6909 -31.7064 14.9011C-32.1787 15.3692 -32.7157 15.9014 -33.5012 16.1624C-34.3887 16.4575 -32.1086 16.6323 -30.5944 16.7485C-30.1236 16.7846 -29.7268 16.815 -29.5223 16.8416C-28.7293 16.9447 -27.8424 17.0017 -26.9702 17.0577C-24.6118 17.2091 -22.3602 17.3537 -22.3602 18.3858V21.996V22.9856C-23.1674 23.092 -23.9653 23.2003 -24.7527 23.3102C-27.5455 23.7 -26.6035 25.1595 -26.0633 25.9966C-25.9735 26.1356 -25.8949 26.2574 -25.8463 26.3544C-25.2892 27.465 -25.1902 28.5805 -25.1902 29.7054C-25.1902 30.3422 -25.2122 30.3874 -26.9641 30.642C-27.2865 30.6889 -27.6101 30.7262 -27.9197 30.7619C-29.0555 30.8928 -30.0016 31.0018 -30.0016 31.4818V32.693C-30.0016 33.3144 -29.9022 33.7122 -29.224 34.2756C-28.5479 34.8372 -28.7689 35.7187 -28.9636 36.4955C-29.0476 36.8308 -29.1268 37.1465 -29.1268 37.4086C-29.1268 37.5329 -29.2156 37.665 -29.3057 37.799C-29.5648 38.1845 -29.8346 38.5859 -28.0333 38.8621C-26.7067 39.0076 -23.894 39.6122 -21.4565 40.1362C-19.9158 40.4674 -18.525 40.7664 -17.7543 40.8969C-16.8321 41.0529 -16.4144 41.1113 -16.0868 41.157C-15.7075 41.21 -15.4491 41.2461 -14.6681 41.3975C-13.3929 41.6447 -12.0235 41.8532 -10.6545 42.0616C-9.38286 42.2553 -8.11153 42.4488 -6.91635 42.6733C-3.68281 43.2806 64.2766 43.1763 67.1914 43.0505C68.4127 42.9977 69.7217 42.9412 71.2153 42.9317C73.1901 42.9191 75.1421 42.816 77.0938 42.7129C78.9835 42.6131 80.8728 42.5133 82.7822 42.4957C85.6993 42.4687 88.6186 42.399 91.5371 42.3292C93.593 42.2801 95.6485 42.231 97.7026 42.1969C109.717 41.9973 122.022 41.896 133.983 42.4311C144.932 42.9208 156.109 43.3677 167.153 43.3677C170.457 43.3677 172.501 43.0837 175.293 42.5683C178.555 41.9661 181.249 41.9143 184.916 41.9143C189.314 41.9143 193.731 41.8416 198.148 41.7689C202.564 41.6963 206.981 41.6236 211.379 41.6236C213.587 41.6236 215.797 41.5874 218.012 41.5511C220.235 41.5147 222.463 41.4782 224.696 41.4782C225.908 41.4782 227.123 41.4836 228.339 41.4889C232.895 41.509 237.464 41.5291 241.949 41.2683L242.105 41.2592C244.612 41.1134 272.512 40.9575 275.042 40.9049C275.207 40.9015 275.366 40.8993 275.518 40.8971C276.417 40.8844 277.101 40.8747 277.812 40.6385C278.303 40.4754 278.238 40.1555 278.184 39.8838C278.167 39.8037 278.152 39.7279 278.152 39.6614C278.152 39.2956 277.716 38.9846 277.276 38.6709C277.035 38.499 276.793 38.3263 276.621 38.1434C276.06 37.5467 275.695 37.0007 275.31 36.4248C275.207 36.2709 275.103 36.1149 274.993 35.9552C274.512 35.2563 274.216 34.4285 274.216 33.7104C274.216 33.0418 274.48 33.0162 275.766 32.8914C276.042 32.8646 276.365 32.8332 276.743 32.7899C277.465 32.7072 276.162 32.2396 276.162 31.9582C276.162 31.49 280.875 31.161 280.451 30.7493C280.383 30.6837 280.313 30.6159 280.242 30.5451C279.497 29.8023 279.209 28.9667 279.097 28.1343C279.617 28.1439 280.135 28.1546 280.654 28.1654C282.206 28.1976 278.709 28.2299 280.303 28.2299C282.21 28.2299 283.615 27.9104 285.028 27.5892C286.348 27.2893 287.674 26.9878 289.422 26.9431C290.143 26.9246 290.811 26.8721 291.483 26.8192C292.33 26.7527 293.182 26.6857 294.154 26.6857C294.286 26.6857 294.437 26.687 294.601 26.6883C295.788 26.6981 297.638 26.7134 297.638 26.2997C297.638 24.3743 298.465 22.3162 299.961 20.4518C300.755 19.4617 300.604 18.3232 300.458 17.2314C300.403 16.8121 300.348 16.3997 300.348 16.0052C300.348 15.8614 300.366 15.71 300.384 15.556C300.495 14.6081 300.619 13.5602 296.67 13.5602C296.001 13.5602 295.262 13.4244 294.527 13.2892C293.951 13.1834 293.378 13.078 292.842 13.0384C292.126 12.9855 291.812 12.2899 291.636 11.9013C291.594 11.8077 291.56 11.7319 291.53 11.6872C291.046 10.9635 291.051 10.0488 291.056 9.27701C291.056 9.2045 291.057 9.13325 291.057 9.06354V6.09672V2.23629C291.057 2.15985 291.086 2.04993 291.12 1.92602C291.209 1.60075 291.324 1.17911 290.992 1.01382C290.498 0.767656 288.962 0.78253 287.789 0.805075C262.615 0.51348 217.384 0.539999 201.318 0.556998Z' fill='%231FED86'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}
.bonus-box:hover {
  filter: brightness(1.1);
  transition: 0.5s;
}

.btn {
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin-top: 24px;
  margin-bottom: 149px;
}

.btn button {
  color: #0f1419;
  text-align: center;
  font-family: Poppins;
  font-size: 14.435px;
  font-style: normal;
  font-weight: 500;
  line-height: 21.652px;
  border-radius: 7.217px;
  background: #dcff00;
  cursor: pointer;
  padding: 12px 42px;
  border: none;
}
.btn:hover button {
  background-color: #9cf893f0;
  transition: 0.9s;
}

header {
  padding: 34px 44px;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-bar__logo {
  width: 129px;
}
h4 {
  color: #dcff31;
  font-family: "Permanent Marker";
  font-size: 27.883px;
  font-style: normal;
  font-weight: 400;
  line-height: 10.017px;
  text-transform: capitalize;
  margin-bottom: 20px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 70px 47px 20px 46px;
}
.main-title {
  display: flex;
  gap: 5px;
  align-items: flex-end;
}
p strong {
  color: #dcff31;
  font-family: "Permanent Marker";
  font-size: 52.629px;
  font-style: normal;
  font-weight: 400;
  line-height: 18.907px; /* 35.926% */
  text-transform: capitalize;
}
p {
  color: #fff;
  font-family: "Permanent Marker";
  font-size: 46.437px;
  font-style: normal;
  font-weight: 400;
  line-height: 18.907px;
  text-transform: capitalize;
  margin-top: 22px;
  display: flex;
  gap: 8px;
}
#timer {
  display: flex;
  align-items: center;
  font-family: Poppins;
}

#timer .time_item {
  display: flex;
  gap: 2.5px;
  position: relative;
}

#hours::after,
#minutes::after {
  content: ":";
  display: inline-flex;
  align-items: center;
  margin: 0 6px;
  color: #fff;
  opacity: 0.9;
  font-size: 29.468px;
  font-weight: 500;
  line-height: 100%;
}

#timer .digit {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 29.468px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  text-transform: uppercase;

  border-radius: 3.157px;
  background: transparent;
  padding: 4px 3px;
  border-radius: 3.157px;
  border: 0.5px solid #fff;

  width: 25px;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#preloader img {
  width: 120px;
  height: auto;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.desc {
  display: block;
}
.mobile {
  display: none;
}
.anima {
  position: absolute;
  top: 0%;
  left: 24%;
}
.gift-section {
  position: relative;
  display: grid;
  place-items: center;
  width: 1200px;
  height: 100vh;
  overflow: hidden;
}
.gift {
  position: relative;
  width: min(600px, 88vw);
  aspect-ratio: 1/1;
  transform: rotate(8.642deg);
  --coin-x: 78%;
  --coin-y: 34%;
  --m: 1;
  --coin-scale: 1;
  --outer-scale: 1;
}
.present-bottom,
.present-lid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.present-bottom {
  bottom: -24px;
  left: 83%;
  width: 100%;
  z-index: 1;
  transform-origin: center 70%;
}
.present-lid {
  bottom: -2%;
  left: 77%;
  width: 112%;
  z-index: 3;
  transform-origin: right center;
  transform: translateX(-50%) rotate(1deg);
}
.coin {
  position: absolute;
  left: var(--coin-x);
  top: var(--coin-y);
  width: auto;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
}
.coin.c1 {
  width: calc(259.948px * var(--coin-scale));
  height: calc(259.948px * var(--coin-scale));
}
.coin.c2 {
  width: calc(192px * var(--coin-scale));
  height: calc(192px * var(--coin-scale));
}
.coin.c3 {
  width: calc(212px * var(--coin-scale));
  height: calc(212px * var(--coin-scale));
}
.coin.c4 {
  width: calc(313px * var(--coin-scale));
  height: calc(313px * var(--coin-scale));
}
.coin.c5 {
  width: calc(268px * var(--coin-scale));
  height: calc(268px * var(--coin-scale));
}

@keyframes lidOpenFlow {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  60% {
    transform: translateX(-50%) rotate(44deg);
  }
  85% {
    transform: translateX(-50%) rotate(36deg);
  }
  100% {
    transform: translateX(-50%) rotate(38deg);
  }
}
@keyframes baseOpenFlow {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  60% {
    transform: translateX(-50%) rotate(-13deg);
  }
  85% {
    transform: translateX(-50%) rotate(-9deg);
  }
  100% {
    transform: translateX(-50%) rotate(-10deg);
  }
}
@keyframes lidCloseFlow {
  0% {
    transform: translateX(-50%) rotate(38deg);
  }
  35% {
    transform: translateX(-50%) rotate(-5deg);
  }
  70% {
    transform: translateX(-50%) rotate(2deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}
@keyframes baseCloseFlow {
  0% {
    transform: translateX(-50%) rotate(-10deg);
  }
  35% {
    transform: translateX(-50%) rotate(3deg);
  }
  70% {
    transform: translateX(-50%) rotate(-1deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

@keyframes coinFlow1 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  45% {
    opacity: 1;
    transform: translate(
      calc(-50% - (682.466px * var(--m))),
      calc(-50% - (211.866px * var(--m)))
    );
  }
  100% {
    opacity: 1;
    transform: translate(
      calc(-50% - (524.974px * var(--m))),
      calc(-50% - (162.974px * var(--m)))
    );
  }
}
@keyframes coinFlow2 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  45% {
    opacity: 1;
    transform: translate(
      calc(-50% + (247px * var(--m))),
      calc(-50% - (371.8px * var(--m)))
    );
  }
  100% {
    opacity: 1;
    transform: translate(
      calc(-50% + (190px * var(--m))),
      calc(-50% - (286px * var(--m)))
    );
  }
}
@keyframes coinFlow3 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + (130px * var(--m))));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + (100px * var(--m))));
  }
}
@keyframes coinFlow4 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  45% {
    opacity: 1;
    transform: translate(
      calc(-50% + (308.75px * var(--m))),
      calc(-50% + (284.05px * var(--m)))
    );
  }
  100% {
    opacity: 1;
    transform: translate(
      calc(-50% + (237.5px * var(--m))),
      calc(-50% + (218.5px * var(--m)))
    );
  }
}
@keyframes coinFlow5 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  45% {
    opacity: 1;
    transform: translate(
      calc(-50% - (380.9px * var(--m))),
      calc(-50% + (501.8px * var(--m)))
    );
  }
  100% {
    opacity: 1;
    transform: translate(
      calc(-50% - (293px * var(--m))),
      calc(-50% + (386px * var(--m)))
    );
  }
}

.gift:not(.open):not(:hover):not(:active) .coin {
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .gift:hover .present-lid {
    animation: lidOpenFlow 0.4s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
  }
  .gift:hover .present-bottom {
    animation: baseOpenFlow 0.36s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
  }
  .gift:hover .c1 {
    animation: coinFlow1 0.5s 0.12s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }
  .gift:hover .c2 {
    animation: coinFlow2 0.5s 0.14s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }
  .gift:hover .c3 {
    animation: coinFlow3 0.44s 0.12s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }
  .gift:hover .c4 {
    animation: coinFlow4 0.5s 0.16s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }
  .gift:hover .c5 {
    animation: coinFlow5 0.5s 0.18s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }
}

.gift.open .present-lid {
  animation: lidOpenFlow 0.4s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}
.gift.open .present-bottom {
  animation: baseOpenFlow 0.36s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}
.gift.open .c1 {
  animation: coinFlow1 0.5s 0.12s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.gift.open .c2 {
  animation: coinFlow2 0.5s 0.14s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.gift.open .c3 {
  animation: coinFlow3 0.44s 0.12s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.gift.open .c4 {
  animation: coinFlow4 0.5s 0.16s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.gift.open .c5 {
  animation: coinFlow5 0.5s 0.18s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

@keyframes baseOpenFlowM {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  60% {
    transform: translateX(-50%) rotate(-19deg);
  }
  85% {
    transform: translateX(-50%) rotate(-12deg);
  }
  100% {
    transform: translateX(-50%) rotate(-14deg);
  }
}
@keyframes mCoin1Spring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  38% {
    opacity: 1;
    transform: translate(calc(-50% - 170px), calc(-50% + 14px));
  }
  66% {
    transform: translate(calc(-50% - 136px), calc(-50% + 4px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(-50% - 144px), calc(-50% + 8px));
  }
}
@keyframes mCoin2Spring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  40% {
    opacity: 1;
    transform: translate(calc(-50% - 110px), calc(-50% + 136px));
  }
  68% {
    transform: translate(calc(-50% - 66px), calc(-50% + 92px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(-50% - 74px), calc(-50% + 103px));
  }
}
@keyframes mCoin3Appear {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 302px), calc(-50% + 46px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(-50% - 302px), calc(-50% + 46px));
  }
}
@keyframes mCoin4Appear {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 79px), calc(-50% + 155px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(-50% + 79px), calc(-50% + 155px));
  }
}
@keyframes mCoin5Appear {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 199px), calc(-50% + 185px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(-50% - 199px), calc(-50% + 185px));
  }
}
.mob-float {
  position: absolute;
  display: none;
  z-index: 2;
  transform: translate3d(0, 0, 0) scale(1);
}
.mob-float.m1 {
  top: 20%;
  left: 105%;
  width: 40px;
}
.mob-float.m2 {
  top: -9%;
  right: 2%;
  width: 75px;
}
.mob-float.m3 {
  bottom: 54%;
  left: -4%;
  width: 80px;
}

/* ключевые кадры */
@keyframes mobBL {
  /* m1: левый-нижний */
  0% {
    transform: translate3d(-5px, 8px, 0) scale(0.92);
  }
  100% {
    transform: translate3d(-15px, 18px, 0) scale(1);
  }
}
@keyframes mobDownLeft {
  /* m2: вниз с маленьким углом влево */
  0% {
    transform: translate3d(-1px, 6px, 0) scale(0.92);
  }
  100% {
    transform: translate3d(-5px, 16px, 0) scale(1);
  }
}
@keyframes mobBR {
  /* m3: правый-нижний */
  0% {
    transform: translate3d(6px, 8px, 0) scale(0.92);
  }
  100% {
    transform: translate3d(16px, 18px, 0) scale(1);
  }
}

/* только мобильная версия */
@media screen and (max-width: 735px) {
  .mob-float {
    display: block;
  }
  .gift:hover .m1,
  .gift:active .m1 {
    animation: mobBL 1.1s cubic-bezier(0.22, 0.7, 0.25, 1) infinite alternate;
  }
  .gift:hover .m2,
  .gift:active .m2 {
    animation: mobDownLeft 1.1s 0.08s cubic-bezier(0.22, 0.7, 0.25, 1) infinite
      alternate;
  }
  .gift:hover .m3,
  .gift:active .m3 {
    animation: mobBR 1.1s 0.16s cubic-bezier(0.22, 0.7, 0.25, 1) infinite
      alternate;
  }
}
@media screen and (max-width: 735px) {
  .gift {
    --m: 0.45;
    --coin-scale: 1;
    --outer-scale: 0.7;
    transform: rotate(2deg) scale(1);
  }
  .present-bottom {
    bottom: -89px;
    left: 63%;
    width: 111%;
    z-index: 1;
    transform-origin: center 70%;
  }
  .present-lid {
    bottom: -25%;
    left: 57%;
    width: 127%;
    z-index: 3;
    transform-origin: right center;
    transform: translateX(-50%) rotate(1deg);
  }

  .coin.c1 {
    width: calc(68px / var(--outer-scale)) !important;
    height: calc(68px / var(--outer-scale)) !important;
  }
  .coin.c2 {
    width: calc(88px / var(--outer-scale)) !important;
    height: calc(88px / var(--outer-scale)) !important;
  }
  .coin.c3 {
    width: calc(76px / var(--outer-scale)) !important;
    height: calc(76px / var(--outer-scale)) !important;
  }
  .coin.c4 {
    width: calc(138px / var(--outer-scale)) !important;
    height: calc(138px / var(--outer-scale)) !important;
  }
  .coin.c5 {
    width: calc(132px / var(--outer-scale)) !important;
    height: calc(132px / var(--outer-scale)) !important;
  }

  .gift:hover .present-lid,
  .gift:active .present-lid {
    animation: lidOpenFlow 0.4s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
  }
  .gift:hover .present-bottom,
  .gift:active .present-bottom {
    animation: baseOpenFlowM 0.36s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
  }

  .gift:hover .c1,
  .gift:active .c1 {
    animation: mCoin1Spring 0.24s 0.04s cubic-bezier(0.3, 1, 0.3, 1) both;
  }
  .gift:hover .c2,
  .gift:active .c2 {
    animation: mCoin2Spring 0.26s 0.06s cubic-bezier(0.3, 1, 0.3, 1) both;
  }
  .gift:hover .c3,
  .gift:active .c3 {
    animation: mCoin3Appear 0.24s 0.08s ease-out both;
  }
  .gift:hover .c4,
  .gift:active .c4 {
    animation: mCoin4Appear 0.24s 0.1s ease-out both;
  }
  .gift:hover .c5,
  .gift:active .c5 {
    animation: mCoin5Appear 0.24s 0.12s ease-out both;
  }

  .mob-float {
    display: block;
  }
  .gift:hover .mob-float,
  .gift:active .mob-float {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
}

@media (hover: hover) and (pointer: none) {
  .mob-float {
    display: block;
  }
}

@media screen and (max-width: 735px) {
  body {
    background-image: url(../img/bg-mobile.png);

    overflow: hidden;
    height: 100%;
  }

  main {
    flex-direction: column;
    padding: 0 12px;

    overflow: hidden;
  }

  header {
    padding: 24px 115px 0 115px;
  }
  .nav-bar__logo {
    width: 129px;
  }

  .desc {
    display: none;
  }
  .mobile {
    display: block;
  }
  .btn {
    margin: 0 auto;
    width: 100%;

    padding: 0 10px;
    order: 5;
    margin-top: 249px;
    margin-bottom: 20px;
  }
  .btn button {
    font-family: Poppins;
    font-size: 14.435px;
    font-style: normal;
    font-weight: 500;
    line-height: 21.652px;
    width: 100%;

    padding: 20px 12px;
  }
  .nav-bar {
    justify-content: center;
  }
  .main-bonus {
    display: none;
  }
  .anima {
    position: absolute;
    top: 231px;
    transform: scale(0.7);
    right: 73%;
    left: 0;
  }
  .gift-section {
    position: relative;

    width: 500px;
    height: 500px;
    overflow: visible;
  }
  h1 {
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px; /* 95.652% */
    text-transform: capitalize;
  }
  .main-title {
    margin-top: 30px;
  }
  p strong {
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 88.889% */
    text-transform: capitalize;
  }
  p {
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 24px;
    margin-top: 7px;
  }
  h4 {
    font-size: 27.883px;
    font-style: normal;
    font-weight: 400;
    line-height: 10.017px; /* 35.926% */
    text-transform: capitalize;
  }
  #hours::after,
  #minutes::after,
  #timer .digit {
    font-size: 29.468px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 29.468px */
    text-transform: uppercase;
  }

  .bonus-box::before {
    font-size: 21.253px;
    font-style: normal;
    font-weight: 400;
    line-height: 11.335px;
    width: 249px;
    height: 31.923px;
    margin-bottom: 15px;
    right: 130px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='201' height='32' viewBox='0 0 201 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M127.064 0.0335463C124.664 0.0360859 122.534 0.0383401 120.726 0.0383401C116.399 0.0383401 111.055 0.0307151 105.134 0.022266C83.5939 -0.00846989 54.411 -0.0501118 38.701 0.224725C31.9283 0.343209 -23.8558 0.421758 -30.6133 0.421758C-30.8606 0.421758 -31.1298 0.415957 -31.4068 0.409986C-32.3418 0.389832 -33.3665 0.367743 -33.9456 0.560214C-34.0479 0.594212 -34.1467 0.626487 -34.2425 0.657766C-34.7577 0.825927 -35.1845 0.965278 -35.5797 1.18859C-36.0243 1.43981 -36.8573 1.45947 -37.6627 1.47847C-38.0222 1.48696 -38.3762 1.49532 -38.6878 1.52408C-39.7736 1.62434 -41.0326 1.60486 -42.2358 1.58624C-42.6999 1.57906 -43.1558 1.57201 -43.5902 1.57201C-45.4137 1.57201 -44.8678 2.24861 -44.4498 2.76653C-44.3101 2.93966 -44.1847 3.09506 -44.1669 3.20153C-44.1028 3.58529 -44.0185 3.96646 -43.9342 4.3475C-43.7621 5.12524 -43.5902 5.90246 -43.5902 6.7002C-43.5902 8.00461 -44.4881 9.10777 -46.0574 10.3C-46.2084 10.4148 -46.3568 10.5618 -46.5148 10.7184C-46.8667 11.0671 -47.2667 11.4635 -47.8517 11.658C-48.5128 11.8777 -46.8145 12.008 -45.6865 12.0945C-45.3358 12.1214 -45.0402 12.1441 -44.8879 12.1639C-44.2972 12.2407 -43.6366 12.2831 -42.9868 12.3249C-41.2301 12.4377 -39.5529 12.5454 -39.5529 13.3141V16.0034V16.7405C-40.1542 16.8198 -40.7485 16.9005 -41.3351 16.9823C-43.4154 17.2727 -42.7137 18.3598 -42.3113 18.9834C-42.2444 19.0869 -42.1859 19.1777 -42.1496 19.2499C-41.7347 20.0772 -41.6609 20.9082 -41.6609 21.746C-41.6609 22.2204 -41.6773 22.2541 -42.9823 22.4438C-43.2225 22.4787 -43.4635 22.5065 -43.6941 22.533C-44.5402 22.6305 -45.2449 22.7117 -45.2449 23.0693V23.9715C-45.2449 24.4344 -45.1709 24.7307 -44.6657 25.1504C-44.1621 25.5688 -44.3267 26.2254 -44.4717 26.804C-44.5343 27.0537 -44.5933 27.2889 -44.5933 27.4842C-44.5933 27.5767 -44.6594 27.6751 -44.7265 27.775C-44.9195 28.0621 -45.1205 28.3611 -43.7787 28.5668C-42.7905 28.6752 -40.6954 29.1256 -38.8797 29.516C-37.7321 29.7627 -36.6961 29.9854 -36.1219 30.0825C-35.435 30.1988 -35.1239 30.2423 -34.8799 30.2763C-34.5973 30.3158 -34.4048 30.3427 -33.8231 30.4555C-32.8732 30.6396 -31.8531 30.7949 -30.8334 30.9502C-29.8861 31.0944 -28.9391 31.2386 -28.0488 31.4058C-25.6402 31.8582 24.9825 31.7805 27.1537 31.6868C28.0635 31.6475 29.0385 31.6054 30.1511 31.5983C31.6221 31.5889 33.0762 31.5121 34.53 31.4353C35.9376 31.3609 37.345 31.2866 38.7673 31.2735C40.9402 31.2534 43.1148 31.2015 45.2888 31.1495C46.8202 31.1129 48.3513 31.0764 49.8814 31.0509C58.8308 30.9022 67.9967 30.8268 76.9064 31.2254C85.0628 31.5902 93.3883 31.9231 101.615 31.9231C104.076 31.9231 105.599 31.7115 107.678 31.3276C110.108 30.879 112.115 30.8404 114.846 30.8404C118.123 30.8404 121.413 30.7863 124.702 30.7322C127.992 30.678 131.282 30.6239 134.559 30.6239C136.203 30.6239 137.85 30.5969 139.499 30.5699C141.155 30.5428 142.815 30.5156 144.478 30.5156C145.381 30.5156 146.286 30.5196 147.192 30.5236C150.586 30.5385 153.989 30.5535 157.33 30.3592L157.446 30.3525C159.314 30.2438 180.096 30.1277 181.981 30.0886C182.104 30.086 182.222 30.0843 182.335 30.0827C183.005 30.0733 183.515 30.066 184.044 29.8901C184.41 29.7686 184.362 29.5303 184.321 29.3279C184.309 29.2683 184.298 29.2118 184.298 29.1623C184.298 28.8898 183.973 28.6581 183.645 28.4245C183.466 28.2964 183.285 28.1678 183.157 28.0315C182.739 27.5871 182.467 27.1803 182.181 26.7513C182.104 26.6367 182.026 26.5205 181.944 26.4015C181.586 25.8809 181.365 25.2643 181.365 24.7294C181.365 24.2314 181.562 24.2123 182.52 24.1193C182.725 24.0993 182.966 24.076 183.248 24.0437C183.786 23.9821 182.815 23.6338 182.815 23.4242C182.815 23.0754 186.326 22.8304 186.01 22.5237C185.959 22.4748 185.907 22.4243 185.854 22.3716C185.299 21.8182 185.084 21.1958 185.001 20.5758C185.389 20.5829 185.775 20.5909 186.161 20.5989C187.318 20.6229 184.712 20.647 185.899 20.647C187.32 20.647 188.367 20.409 189.419 20.1697C190.402 19.9463 191.39 19.7217 192.692 19.6884C193.23 19.6747 193.727 19.6355 194.228 19.5962C194.858 19.5466 195.493 19.4967 196.217 19.4967C196.315 19.4967 196.428 19.4976 196.55 19.4987C197.434 19.506 198.812 19.5174 198.812 19.2092C198.812 17.775 199.428 16.2419 200.543 14.8531C201.134 14.1156 201.022 13.2675 200.913 12.4543C200.872 12.1419 200.831 11.8347 200.831 11.5408C200.831 11.4337 200.844 11.321 200.858 11.2063C200.941 10.5001 201.033 9.7196 198.091 9.7196C197.593 9.7196 197.043 9.61842 196.495 9.51771C196.066 9.43889 195.639 9.36036 195.24 9.33086C194.707 9.29148 194.472 8.7733 194.342 8.48387C194.31 8.41413 194.285 8.35767 194.262 8.32439C193.902 7.78534 193.906 7.10393 193.909 6.52904C193.91 6.47503 193.91 6.42196 193.91 6.37003V4.16007V1.28444C193.91 1.2275 193.932 1.14562 193.957 1.05333C194.023 0.811033 194.109 0.496955 193.862 0.373829C193.494 0.190465 192.35 0.201545 191.476 0.218338C172.724 0.00113031 139.032 0.0208843 127.064 0.0335463Z' fill='%231FED86'/%3E%3C/svg%3E");
  }
}

@media screen and (min-width: 1550px) {
  .gift-section {
    width: 1400px;
    height: 100vh;
  }
}