body {
  font-family: 'Roboto';
  background-color: #F0EDF5;
}

@media (max-width: 600px) { 

.navbar-toggler {
  border: 0px;
}

.navbar-brand {
  width: 25%;
}



.navbar-nav {
  margin-left: 10px;
}

.navbar-brand img{
  width: 100%;
}


#hero {
  background: url('../img/hero_mobile.fw.png');
  background-repeat: no-repeat;
  background-position: center center; /* Centers the image */
  background-size: cover; /* Ensures the image covers the entire area */
  /*height: 50vh;*/
}

#hero h1 {
  font-size: 3em;
  font-weight: bolder;
  text-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  padding-bottom: 3%;
}

#hero h4 {
  font-weight: normal;
  padding-bottom: 3%;
}

.vip_text {
  background: var(--Gradient-Purple-to-Teal, linear-gradient(90deg, #9365FF 0%, #00D3B4 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero .get_pass {
  border-radius: 40px;
  border: 0px;
  background: linear-gradient(90deg, #00D3B4 0%, #7A42FF 100%);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25);
  color: white;
  font-weight: bolder;
  padding-top:4%;
  padding-bottom:4%;
  padding-left: 14%;
  padding-right: 14%;
}

.center_desc {
  padding-top: 5%;
}

#hero i {
  color : #C362CE;
}

#hero p {
  text-align: left;
}

.foot_image img {
  width: 50%;
}


}

@media (min-width: 600px) { 

.nav_style {
  margin-left: 2%;
  margin-right: 2%;
}
.navbar-brand img{
  width: 25%;
}

#hero {
  background: url('../img/hero.fw.png');
  background-repeat: no-repeat;
  background-position: center center; /* Centers the image */
  background-size: cover; /* Ensures the image covers the entire area */
  /*height: 50vh;*/
}

#hero h4 {
  padding-bottom: 10px;
}

#hero h1 {
  font-size: 5em;
  font-weight: bolder;
  text-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  padding-bottom: 10px;
}

.vip_text {
  background: var(--Gradient-Purple-to-Teal, linear-gradient(90deg, #9365FF 0%, #00D3B4 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#hero .get_pass {
  border-radius: 40px;
  background: linear-gradient(90deg, #00D3B4 0%, #7A42FF 100%);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25);
  color: white;
  font-weight: bolder;
  padding-top:1%;
  padding-bottom:1%;
  padding-left: 12%;
  padding-right: 12%;

}

.center_desc {
  padding-top: 2%;
  padding-left: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 33%;
}

#hero i {
  color : #C362CE;
}

#hero p {
  text-align: left;
}

#cart {
  padding: 0%;
}

#cart .card{
  padding: 0%;
}


}


#vip .card {
  padding: 3%;
  color: #2E2640;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 16px;
}

#vip .card h3 {
  padding-top: 5%;
  padding-bottom: 3%;
}

#vip i {
  font-size: 2em;
  width: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em; /* or 50% width & line-height */
}

.vip_card {
  border: 2px solid #FF94B4;
  height: 270px;
}
.vip_card i {
  background-color: #FFCCDB;
  color: #FF78A0;
  font-weight: bolder;
}

.offline_card {
  border: 2px solid #AB87FF;
  height: 270px;
}
.offline_card i {
  background-color: #DBCCFF;
  color: #9365FF;
  font-weight: bolder;
}

.remote_card {
  border: 2px solid #5DE9D4;
  height: 270px;
}
.remote_card i {
  background-color: #CCFFF7;
  color: #2CDEC4;
  font-weight: bolder;
}

.add_card {
  height: 170px;
  margin-bottom: 3%;
}

.add_card h4 {
  font-weight: bolder;
  padding-top: 3%;
  padding-left: 3%;
  padding-bottom: 0%;
}
.add_card p{
  padding: 3%;
}

#getyourpass {
  background-color: #FAFAFA;
}

#getyourpass .card {
  text-align: center;
  padding: 5%;
  color: #2E2640;  
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  height: 450px;
  padding-bottom: 30px;
  margin-bottom: 5%;
  border-radius: 16px;
}

#getyourpass .card div h1 {
  display: inline-block;
  padding: 5%;
  font-size: bolder;

}

#getyourpass button {
  margin-top: auto;
  border-radius: 24px;
}

.btn_green {
  background-color: #009881;
}

.btn_linear {
  background: linear-gradient(90deg, #00D3B4 0%, #7A42FF 100%);
}

.card_most {
  border: 2px solid var(--Gradient-Purple-to-Teal, #9365FF);
}

.card_best {
  border: 1px solid var(--Turquoise-Turquoise-40, #00B69A);
}

.overlay_card_most {
  border-radius: 24px;
  margin-top: -38px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
  color: white;
  background: linear-gradient(90deg, #00D3B4 0%, #7A42FF 100%);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.12);
}

.overlay_card_best {
  border-radius: 24px;
  margin-top: -38px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
  color: white;
  background: #00B69A;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.12);
}



.pass_desc {
  text-align: left !important;
  margin-left: 17%;
  margin-right: 5%;
}

#getyourpass h4 {
  padding-top: 3%;
}

#getyourpass h1 {
  padding-top: 4%;
  padding-bottom: 2%;
  color: #2E2640;
}

#howitworks .card {
  padding: 3%;
  background: transparent;
  border: 0px;
  text-align: center;
}

#howitworks h1 {
  padding-top: 4%;
  padding-bottom: 2%;
  color: #2E2640;
}

#howitworks h3 {
  padding-top: 4%;
  padding-bottom: 2%;

}

#howitworks i {
  color: white;
  font-size: 2em;
  width: 2em;
  line-height: 2em;
  border-radius: 1em; /* or 50% width & line-height */
  background-color: #7A42FF;
}

#howitworks {
  background-color: #DBCCFF;
}

#support {
  background-color: #1C005C;
}

#support a {
 font-size: small;
  color: #00D3B4; 
  text-decoration: none;
}

#support .card {
  padding: 3%;
  background: transparent;
  border: 0px;
  color: white;
}

#cart {
  background: #FFF;
}

#cart input {
  padding:;
}

#cart .login {
  padding: 5%;
}

#cart .purchase {
  padding: 5%;
}


.main-wrapper {
  width: 100% !important;
  text-align: center;
}

#cart .card {
  padding: 5%;
  color: #2E2640;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 16px;
}

#cart a {
  color: #00D3B4;
}

.proceed {
  background: linear-gradient(90deg, #00D3B4 0%, #7A42FF 100%);
  border: 0px;
  font-weight: bolder;
  border-radius: 16px;
  color: white;
}
.proceed:hover {
  color: white;
}


.success i {
  color: #2CDEC4;
  font-weight: bolder;
}

.not_card {
  border-radius: 16px;
  background: #DBCCFF;
  color: #2E0985;
  padding: 5%;
}

.code {
  text-align: center;
  background: #FAFAFA;
  border-radius: 16px;
  border-style: dotted;
  padding-top: 3%;
  letter-spacing: 2.56px;
}