.otp-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.5rem;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 7px;
}

.header-otp {
  margin-bottom: 32px;
}

.timer-container {
  width: 57px;
  background: #fee2e2;
}

.timer-container p {
  font-size: 14px;
  margin: 13px 0;
}

.timer-parent {
  margin-bottom: 32px;
}

.otp-input-container {
  margin-bottom: 32px;
}

.verificaton-button {
  background: #36649a;
  color: white;
  margin-bottom: 16px;
}

.verificaton-button:hover {
  background: #36649a;
  color: white;
  margin-bottom: 16px;
}
.cancel-otp {
  border: 1px solid #36649a;
  color: 36649A;
}

.cancel-otp:hover {
  background: #36649a;
  color: white;
}

@media (max-width: 576px) {
  .otp-input {
    width: 40px;
    height: 45px;
    font-size: 1.2rem;
    margin: 4px;
  }

  .verificaton-button,
  .cancel-otp {
    font-size: 1rem;
  }

  .timer-container p {
    font-size: 13px;
  }
}