@font-face {
  font-family: "PoppinsRegular";
  src: url("../assets/Poppins/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PoppinsBold";
  src: url("../assets/Poppins/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "PoppinsBoldItalic";
  src: url("../assets/Poppins//Poppins-BoldItalic.ttf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  display: flex;
  justify-content: center;
}

body {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 2000px;
  -webkit-border-radius: 2000px;
  -moz-border-radius: 2000px;
  -ms-border-radius: 2000px;
  -o-border-radius: 2000px;
}
.btn:hover {
  cursor: pointer;
}
.btn::before {
  border: none;
}

.landing {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 100vh;
  max-height: 1200px;
  padding-top: 0;
  padding-bottom: 1vh;
  overflow-x: hidden;
  background-color: #2c002e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.landing main {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  min-height: -moz-fit-content;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.landing main .wrapper-image {
  position: relative;
  top: 0;
  width: 100vw;
  min-width: 260px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing main .wrapper-image .image-landing {
  width: 100%;
  height: 100%;
}
.landing main .wrapper-phone-number {
  width: 85vw;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.landing main .wrapper-phone-number .text {
  width: 68%;
  font-family: "PoppinsRegular";
  font-size: clamp(1rem, 4vw, 1.4rem);
  line-height: clamp(0.85rem, 3vw, 1.2rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing main .wrapper-phone-number .phone-number {
  font-family: "PoppinsBold", sans-serif;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing main .wrapper-phone-number:hover {
  cursor: default;
}
.landing main .wrapper-phone-number input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.landing main .wrapper-phone-number .phone-number-input {
  z-index: 100000;
  width: 100%;
  height: 90%;
  margin: 0;
  padding: 0 20px;
  color: #2c002e;
  background-color: rgb(255, 255, 255);
  border: none;
  font-family: "PoppinsBold", sans-serif;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  text-align: center;
  outline-color: #e1aa3d;
  -webkit-appearance: none;
          appearance: none;
  -moz-appearance: textfield;
  border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
}
.landing main .wrapper-phone-number .phone-number-input :hover {
  cursor: text;
}
.landing main .wrapper-pin-number {
  width: 85vw;
  max-width: 450px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: rgb(255, 255, 255);
  font-family: "PoppinsBold", sans-serif;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  line-height: clamp(1.3rem, 4.5vw, 1.6rem);
  text-align: center;
  font-weight: bolder;
}
.landing main .wrapper-pin-number .text {
  width: 68%;
  font-family: "PoppinsRegular";
  font-size: clamp(1rem, 4vw, 1.4rem);
  line-height: clamp(0.85rem, 3vw, 1.2rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing main .wrapper-pin-number:hover {
  cursor: default;
}
.landing main .wrapper-pin-number input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.landing main .wrapper-pin-number .pin-number-input {
  z-index: 100000;
  width: 80%;
  height: 5vh;
  margin: 0;
  color: #2c002e;
  background-color: rgb(255, 255, 255);
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  outline-color: #e1aa3d;
  -webkit-appearance: none;
          appearance: none;
  -moz-appearance: textfield;
  border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
}
.landing main .wrapper-pin-number .pin-number-input :hover {
  cursor: text;
}
.landing main .wrapper-btns {
  z-index: 1000;
  width: 70vw;
  max-width: 300px;
  margin-top: 0.5rem;
}
.landing main .wrapper-btns .btn {
  width: 90%;
  height: 6vh;
  min-height: 40px;
  max-height: 55px;
  margin: auto;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #e1aa3d;
  font-family: "PoppinsBold";
  font-size: clamp(1rem, 6vw, 2rem);
}
.landing main .wrapper-btns .btn:hover {
  background: #e1aa3d;
}
.landing main .wrapper-btns .btn:active {
  filter: contrast(50%);
  -webkit-filter: contrast(50%);
}
.landing main .wrapper-btns .btn-subs {
  display: flex;
}
.landing main .wrapper-btns .btn-conf {
  display: none;
}
.landing main .subscription-price {
  width: 60%;
  margin-bottom: 1rem;
  font-family: "PoppinsRegular", sans-serif;
  font-size: clamp(0.7rem, 3vw, 1rem);
  line-height: clamp(0.8rem, 3vw, 1rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing main .subscription-price:hover {
  cursor: default;
}
.landing .terms-conditions-price {
  z-index: 20;
  width: 100vw;
}
.landing .terms-conditions-price .terms {
  width: 65%;
  max-width: 600px;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.5rem;
  font-family: "PoppinsRegular", sans-serif;
  font-size: clamp(0.7rem, 3vw, 1rem);
  line-height: clamp(0.5rem, 3vw, 0.8rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing .hide {
  display: none;
}

.confirm-screen main .wrapper-phone-number {
  display: none;
}
.confirm-screen main .wrapper-pin-number {
  display: flex;
}
.confirm-screen main .wrapper-btns .btn-subs {
  display: none;
}
.confirm-screen main .wrapper-btns .btn-conf {
  display: flex;
}
.confirm-screen main .subscription-price {
  display: none;
}

.landing-wifi main {
  gap: 20px;
}
.landing-wifi main .welcome-text-wrapper {
  width: 80vw;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.landing-wifi main .welcome-text-wrapper p {
  width: 90%;
  font-family: "PoppinsBold";
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: clamp(1.8rem, 7vw, 2.4rem);
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}
.landing-wifi main .wrapper-phone-number {
  width: 85vw;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: rgb(255, 255, 255);
  font-family: "PoppinsBold", sans-serif;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  line-height: clamp(1.3rem, 4.5vw, 1.6rem);
  text-align: center;
  font-weight: bolder;
}
.landing-wifi main .wrapper-phone-number .text {
  width: 68%;
  font-family: "PoppinsRegular";
  font-size: clamp(1rem, 4vw, 1.4rem);
  line-height: clamp(0.85rem, 3vw, 1.2rem);
  text-align: center;
  color: rgb(255, 255, 255);
}
.landing-wifi main .wrapper-phone-number:hover {
  cursor: default;
}
.landing-wifi main .wrapper-phone-number input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.landing-wifi main .wrapper-phone-number .phone-number-input {
  z-index: 100000;
  width: 80%;
  height: 5vh;
  margin: 0;
  color: #2c002e;
  background-color: rgb(255, 255, 255);
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  outline-color: #e1aa3d;
  -webkit-appearance: none;
          appearance: none;
  -moz-appearance: textfield;
  border-radius: 0.6rem;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
}
.landing-wifi main .wrapper-phone-number .phone-number-input :hover {
  cursor: text;
}

.welcome main .welcome-text-wrapper {
  width: 80vw;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.welcome main .welcome-text-wrapper .welcome-text {
  width: 90%;
  font-family: "PoppinsRegular";
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: clamp(1.8rem, 7vw, 2.4rem);
  text-align: center;
  color: rgb(255, 255, 255);
}/*# sourceMappingURL=app.css.map */