@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');

html {
  font-size: 16px;
}

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

body {
  font-family: 'Roboto', sans-serif;
  background-color: #ffffff;
  color: #333;
  overflow-x: hidden;
  overflow-y: hidden;
}
.back{
  position: absolute;
}

/* Recaptcha section */
.recaptcha-section {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 10;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.main {
  position: relative;
  /* display: flex;
  flex-direction: column; */
  justify-items: left;
  width: auto;
  height: auto;
  padding-left: 5vh;
  /* gap: 8vh; */
  /* margin-top: 20vh; */
  /* background-color: #0084ff; */
}

.verizon {
  display: block;
  height: auto;
  gap: 0px;
  margin-bottom: 4vh;
  line-height: 1.5;
}

.verizon-link {
  text-decoration: none;
  color: #121212;
  font-size: 36px !important;
  font-weight: 500;
}
.verizon-link-footer{
  text-decoration: none;
  color: #121212;
}

.verizon-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.2vh;
}

.captcha {
  position: relative;
  display: none;
  align-items: center;
  width: 310px;
  height: 65px;
  background: rgb(250, 250, 250);
  border: 0.2vh solid #e3e3e3;
  border-radius: 0.7vh;
  /* transform: scale(0.7); */
  margin-bottom: 7vh;
  transform-origin: left top;
  justify-content: space-between;
}
.check-wrapper{
  position: relative;
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}
.check-text-wrapper{
  display: flex;
  /* background-color: #0084ff; */
  align-items: center;
  gap: 10px;
}
.captcha-check {
  position: absolute;
  display: none;
  height: 24px;
  width: 24px;
  background: #ffffff;
  border: 2px solid #616161;
  border-radius: 0.4vh;
  /* margin-left: 2vh; */
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
  transform-origin: center;
}

.captcha-check.scale-zero {
  transform: scale(0);
}

.captcha-check:active {
  border: 0.3vh solid #faad3f;

}

.loader {
  position: absolute;
  width: 3.5vh;
  margin-left: 2vh;
  transform-origin: center;
  opacity: 1;
}

.text {
  position: relative;
  font-size: 14px;
  user-select: none;
}
.logo-wrapper{
  position: relative;
  /* right:1vh; */
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 3px;
  padding: 0 15px;
}
.logo {
  display: flex;
  /* position: absolute; */
  /* margin-left: 30vh; */
  /* margin-top: -3vh; */
  /* transform: scale(0.7); */
}

.logo-img {
  width: 70px;
}

.link {
  /* position: absolute; */
  font-size: 9px;
  color: #2e2d2d;
  /* margin-left: 35.1vh; */
  /* margin-top: 5vh; */
}

.link a {
  text-decoration: none;
  color: #2f2f2f;
  font-weight: 400;
}

.Privacy:hover {
  text-decoration: underline;
}

.Terms:hover {
  text-decoration: underline;
}

.main-line {
  width: 60vh;
  height: 0.1vh;
  background: #bcbcbc;
  /* margin-top: 20vh; */
}

.main-footer {
  justify-items: center;
  position: absolute;
  /* justify-self: center; */
  background-color: #0c5ca600;
  display: grid;
  justify-items: center;
  /* align-items: center; */
  align-self: end;
  width: 100%;
  height: 12vh;
  font-size: 1.6vh;
  margin-top: 0vh;
}

.footer-link {
  text-decoration: none;
  color: #0084ff;
}

.footer-link:hover {
  /* text-decoration:underline; */
  color: #faad3f;
}

.main-loader{
  position: relative;
  width: 40px;
  margin-bottom: 50px;
}





.circle {
  position: absolute;
  width: 200px;  /* Ширина круга */
  height: 200px; /* Высота круга (обязательно равна ширине для круговой формы) */
  border-radius: 50%; /* Делает форму круга */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transform: scale(0.1); */
  /* margin-left: -8.1vh; */
  animation:rotateCircle 4s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
@keyframes rotateCircle {
  from {
    transform: rotate(0deg) scale(0.12);
  }
  to {
    transform: rotate(360deg) scale(0.12);
  }
}

.dot {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #028127;
  border-radius: 50%;
}

/* Позиционирование точек по кругу */
.dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dot:nth-child(2) { top: 14%; left: 86%; transform: translateX(-50%); }
.dot:nth-child(3) { top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); }
.dot:nth-child(4) { top: 86%; left: 86%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(5) { top: 100%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(6) { top: 86%; left: 14%; transform: translateX(-50%) translateY(-50%); }
.dot:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%) translateX(-50%); }
.dot:nth-child(8) { top: 14%; left: 14%; transform: translateX(-50%) translateY(-50%); }






/* Modal section............................................................. */
.modal-section {
    display: none;
    width: 100vw;
    height: 100vh;
    place-content: center;
    background-color: white;
    position: relative;
}

.side-loader{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 10vh;
  width: 6vh;
  height: 6vh;
  border: 0.1vh solid #cbcbcb;
  background: white;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  z-index: 0;
}
.side-loader-mask {
  position: absolute;
  left: 0;
  top: 10vh;
  background: white;
  z-index: 11;
  width: 6vh;
  height: 6vh;
}
.data{
  position: absolute;
  width: 4vh;
  height: 4vh;
  z-index: 1000;
}

.block-wrapper{
  display: grid;
  flex-direction: column;
  align-content: center;
  background: rgb(255, 255, 255);
  z-index: 100;
}
.modal-block {
  position: relative;
    display: flex;
    flex-direction: column;
    width: 35vh;
    height: auto;
    border: 0.1vh solid #cbcbcb;
    border-radius: 0.1vh;
    padding-top: 0.8vh;
    opacity: 0;
    background-color:white;
    transform: translateY(-12vh);
    transition: opacity 0.5s ease;
    z-index: 1000;
}

.header {
    background-color: rgb(246 130 31);
    width: 95%;
    height: 9vh;
    color: #ffffff;
    justify-self: center;
    align-content: center;
    display: flex;
    justify-content: center;
}

.header-content {
    /* display: grid; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
    justify-self: center;
    gap: 0.2vh;

}

.complete {
    font-size: 1.4vh;
    letter-spacing: -0.02vh;
}

.verification {
    font-size: 1.8vh;
    letter-spacing: -0.02vh;
    text-transform: uppercase;
    font-weight: 900;
}

.not-robot {
    font-size: 1.4vh;
    letter-spacing: -0.02vh;
}

/* text method 0 */
.text-method-0 {
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-self: center;
    gap: 1.5vh;
    padding-top: 2vh;
    padding-bottom: 4vh;
    font-size: 1.4vh;
    height: auto;
    z-index: 100;
}

.text-method-0 ol{
    display: grid;
    gap: 1.5vh;
    padding-left: 1.3vh;
    width: 100%;
}

/* text method 1 */
.text-method-1 {
    width: 85%;
    display: none;
    flex-direction: column;
    justify-self: center;
    gap: 1.5vh;
    padding-top: 2vh;
    padding-bottom: 4vh;
    font-size: 1.4vh;
    height: auto;
    z-index: 100;
}

.text-method-1 ol{
    display: grid;
    gap: 1.5vh;
    padding-left: 1vh;
    width: 100%;
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #b3b3b300;
    border-top: 0.1vh solid #b3b3b3;
    width: 100%;
    height: 6vh;
    align-self: end;
}

.icons{
    display: flex;
    background-color: rgba(0, 255, 255, 0);
    justify-self: left;
    align-self: center;
    justify-content: space-around;
}

.icons img {
    width: 2.3vh;
    margin-left: 2vh;
    cursor: pointer;
}

.icons img:hover {
    transform: scale(1.1);
    filter: brightness(120%);
}

.verify-error-msg {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.4vh;
    line-height: 1.35;
    color: #c62828;
    padding: 0.8vh 1vh;
    margin-bottom: 0.3vh;
    background: #ffebee;
    border: 0.1vh solid #e57373;
    border-radius: 0.5vh;
}

.verify-button {
    display: grid;
    justify-self: end;
    align-self: center;
    place-items: center;
    width: 14vh;
    height: 5.6vh;
    background: rgb(255 102 51);
    border-radius: 0.7vh;
    color: #fff;
    font-size: 2.1vh;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: -0.1vh;
    transform: scale(0.7);
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease-in-out;
}

.verify-button:hover {
    transform: scale(0.7);
    filter: brightness(110%);
    color: #ffffff;
    /*background: rgb(7 0 51);
	cursor: not-allowed;*/
}