@import url("css2.css");

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: "Instrument Sans", sans-serif;
 color: #000;
 background-color: #fff;
 text-align: center;
}

.container {
 max-width: 440px;
 margin: 0 auto;
 background: #fff;
 overflow: hidden;
}

.header {
 padding-top: 40px;
 padding-bottom: 20px;
}

.header__logo {
 display: block;
 margin: 0 auto;
 width: 100%;
 max-width: 180px;
}

.main-bg {
 background: url("../img/mainbg.png") 65% / cover no-repeat;
 border-top-left-radius: 40px;
 border-top-right-radius: 40px;
}

.overlay {
 background: rgb(0, 0, 0);
 background: linear-gradient(146deg, rgba(0, 0, 0, 0.13) 0%, rgb(0, 0, 0) 100%);
 border-top-left-radius: 40px;
 border-top-right-radius: 40px;
}

.hero__title {
 font-size: 17px;
 text-align: center;
 font-weight: bold;
 background-color: rgb(255, 255, 255, 0.76);
 display: inline-block;
 padding: 8px 12px;
 margin-block: 20px;
 border-radius: 22px;
}

.hero__subtitle {
 font-size: 40px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 margin-bottom: 150px;
}

.step__wrapper {
 transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.income {
 text-align: center;
}

.income__title {
 font-size: 25px;
 color: #fff;
 font-weight: bold;
 margin-bottom: 10px;
}

.income__amount {
 display: block;
 font-size: 35px;
 color: #fff;
 font-weight: bold;
 font-family: "Montserrat", sans-serif;
 margin-bottom: 15px;
}

.income__timer {
 font-size: 19px;
 color: #fff;
 margin-bottom: 20px;
}

.graybg {
 background-color: #ffffff63;
 padding: 15px;
 border-top-left-radius: 40px;
 border-top-right-radius: 40px;
 padding-bottom: 60px;
}

.advantages {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 15px;
 margin-bottom: 40px;
}

.advantages__item {
 display: flex;
 font-size: 14px;
 font-weight: bold;
 align-items: center;
 background-color: #fff;
 padding: 10px;
 gap: 5px;
 border-radius: 15px;
}

.advantages__item-icon {
}

.advantages__item-text {
}

.red {
 color: #dd1818 !important;
}

.btn__wrapper {
}

.gobtn {
 display: block;
 position: relative;
 margin: 0 auto;
 width: 100%;
 max-width: 370px;
 color: #fff;
 text-align: center;
 background-color: #e60004;
 padding: 15px;
 border: none;
 appearance: none;
 border-radius: 14px;
 font-size: 22px;
 font-weight: bold;
 box-shadow: 0 0px 12px #e60004;
 animation: pulse 2s infinite;
}

.gobtn::after {
 content: url(../img/ic-finger.svg);
 position: absolute;
 top: 7px;
 right: 13px;
}

.hidden {
 display: none;
}

.form-section {
 width: 100%;
 display: none;
 padding: 0px !important;
}

.form__title {
 font-size: 22px;
 text-align: center;
 font-weight: 500;
 padding: 5px;
 padding-top: 30px;
 color: #fff;
 margin-bottom: 20px;
}

.visible {
 display: block;
}

.marquee {
 width: 100%;
 overflow: hidden;
 white-space: nowrap;
 box-sizing: border-box;
 padding-block: 5px;
 background-color: #ffffff88;
}

.marquee p {
 display: inline-block;
 padding-left: 100%;
 animation: marquee 50s linear infinite;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
}

.status-label {
 display: flex;
 width: fit-content;
 align-items: center;
 background-color: #06ba12;
 color: white;
 padding: 8px 16px;
 border-radius: 50px;
 font-size: 12px;
 font-weight: bold;
 gap: 8px;
 margin-bottom: -5px;
 margin-left: 5px;
 position: relative;
 z-index: 9999;
}

.status-icon {
 position: relative;
 width: 20px;
 height: 20px;
 background-color: white;
 border-radius: 50%;
}

.status-icon::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 27px;
 height: 27px;
 background-color: rgba(255, 255, 255, 0.611);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: pulse1 1.5s infinite ease-in-out;
}

@keyframes pulse1 {
 0% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.8;
 }

 50% {
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 0;
 }

 100% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.8;
 }
}

@keyframes marquee {
 0% {
  transform: translateX(0);
 }

 100% {
  transform: translateX(-100%);
 }
}

@keyframes pulse {
 0%,
 100% {
  transform: scale(1);
  box-shadow: 0 0 10px #e60004;
 }

 50% {
  transform: scale(1.05);
  box-shadow: 0 0 25px #ff003c;
 }
}

@media (min-height: 850px) {
 .hero__subtitle {
  margin-bottom: 250px;
 }
}

@media (max-width: 375px) {
 .advantages__item {
  padding: 5px;
 }

 .advantages {
  gap: 10px;
 }
}