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


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background: radial-gradient(circle at center, #2c5364, #0f2027);
}
.container {
    max-width: 428px;
    min-height: 100vh;
    padding: 0%;
    position: relative;
    background-color: #ffffff;
    z-index: 2;
    height: auto;
}

a{
  text-decoration: none;
}
.row{
width: 100% !important;
margin-left: 0  !important;
margin-right: 0  !important;
padding: 0 !important;
}
.w-fit{
  width: fit-content;
}
.w-30{
  width: 28%;
}
.w-60{
  width: 37%;
}
.w-58{
width: 36%;
}
.w-40{
width: 40%;
}
.fs10{
  font-size: 10px;
  margin-top: 10px;
}
.fs14{
font-size: 12px;

}
.fs37{
  font-size: 37px;
}
.fs38{
  font-size: 38px;
}
.fs30{
  font-size: 30px;
}

.lh-0{
line-height: 1;
}

.text-bg-gradient{
background: linear-gradient(90deg, #A417C6 0%, #16267D 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.gradient-bg-btn{
background-color: #AD275A;
border: 2px solid #FFFFFF !important;
border-radius: 20px !important;
color: #ffffff !important;

}
.bg-lite-secondary{
  background-color: #EEEEEE;
}

.br-orange{
border: 1px solid #F56357;
}
.br-blue{
border: 1px solid #4895FF;
}
.br-purple{
border: 1px solid #162676;
}
.br-lightpurple{
border: 1px solid #7986BF;
}
.br-yellow{
border: 1px solid #FAB400;
}
.br-darkgreen{
  border: 1px solid #0EBC9D;
}
.br-green{
border: 1px solid #4CAF50;
}
.br-gray{
border: 1px solid #37474F;
}
.br-lightblue{
border: 1px solid #00A0ED;
}

.br-black{
border: 1px solid #1D2943;
}
.br-red{
border: 1px solid #CE4949;
}
.br-sian{
border: 1px solid #2A70AB;
}
.br-pink{
border: 1px solid #D32F72;
}

.gradient-border{
border-radius: 12px !important;
background: linear-gradient(white, white) padding-box, 
linear-gradient(90deg, #A417C6 0%, #16267D 100%) border-box;
border: 1px solid transparent;
}

.gap-y-3{
  gap: 15px 0;
}

.input{
  border: 1px solid #CACACA;
  border-radius: 10px;
  display: block;
  width: 100%;
  padding: 8px;
  margin-top: 6px;
}

.input:focus{
  border: 1px solid #CACACA;
  outline:none ;
}

/* swithch toggle  */
.switch-wrapper {
  position: absolute;
  display: inline-flex;
  /* padding: 4px; */
  border: 1px solid #AD275A;
  margin-bottom: 40px;
  border-radius: 30px;
  background: #AD275A;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);

  top: 4px;
  right: 4px;
}

.switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: rgb(255, 255, 255);
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: #AD275A;
 
}

.switch-wrapper
  [type="radio"]:checked#monthly
  + label[for="yearly"]
  ~ .highlighter {
  transform: none;
}

.switch-wrapper
  [type="radio"]:checked#yearly
  + label[for="monthly"]
  ~ .highlighter {
  transform: translateX(100%);
}

.switch-wrapper label {
  font-size: 12px;
  z-index: 1;
  min-width: 59px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 25px;
  transition: color 0.25s ease-in-out;
  color: #AD275A;
  font-weight: 600;
}


.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: #AD275A;
  transition: transform 0.25s ease-in-out;
}

#results span{
  font-size: 14px;
}
.btn-counter-container{
  margin: 7px 0;
  width: 100%;
  display: none;
  justify-content: center;
}