.label {
  color: white;
  padding: 8px;
}

.promo {
  background-color: ;
} /* Orange */ 
.popular {
  background-color: #f44336;
  padding: 8px 14px;
} /* Red */ 
.toggle {
  color: hsl(234, 14%, 74%);
  display: flex;
  justify-content:center;  
  padding:0 2px;
}
.toggle-btn {
  margin: 0 1rem;
}
.checkbox {
  display: none;
}
.sub {
  background: linear-gradient(
    135deg,
    rgb(137 192 79) 0%,
    rgb(108 175 35) 100%
  );
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* height: 25px;
  width: 50px; */
  height: 1.6rem;
  width: 4rem;
  border-radius: 5.6rem;
  padding: 0.3rem;
}
.circle {
  background-color: #fff;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
}
.checkbox:checked + .sub {
  justify-content: flex-end;
}
.cards {
  display: flex;
  justify-content: center;
  width: 100%;
  
}

.card {
  background: #fff;
  color: hsl(233, 13%, 49%);
  word-wrap: break-word;
  flex: 1 1 0;
  margin: 0.5%;
}

.price-ul {
  margin: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.price-ul li {
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 84%;
  padding-bottom: 5px;
}

.price-ul li.packdesc{
  font-size: 14px;
    text-align:center;
  }

.price-ul li.price {
  font-size: 20px;
  color: hsl(232, 13%, 33%);
  padding-top:2px;
  padding-bottom:25px;
  font-weight:bold;
}

.card.active .price {
  color: #fff;
}

.btn {
  font-size:14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    rgb(137 192 79) 0%,
    rgb(108 175 35) 100%
  );
  color: #fff;
  outline: none;
  border: 0;
  width:100%;
  margin:35px 0px;
}
.btn:hover{
  cursor: pointer;
  color: #48b12a;
  background: white;
  border: 1px solid #48b12a;
}
.active-btn {
  background: #fff;
  color: hsl(89.22deg 47.33% 52.35%);
 
}
.active-btn:hover{
  background: #48b12a;
  color: white;
  border: 1px solid white;
  cursor: pointer;
}
.bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
  text-align:center;
  font-size:12px;
}
.card.active .bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
  text-align:center;
}
.pack {
  font-size: 22px;
  font-weight: bold;
  margin-top:30px;
  margin-bottom:30px;
  color:green;
}

.packdesc {
 font-size:14px;
}

.month {
  font-size: 12px;
  text-align:center;
  padding-top:10px;
  color:#48b12a;
  padding-bottom:0px;
 }


ol li, ul li{
  margin: 0.25rem;

}

@media (max-width: 280px) {
  .price-ul {
    margin: 1rem;
  }
  h1 {
    font-size: 1vw;
  }
  .toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    }
  .cards {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .card {
    transform: scale(0.8);
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(0.8);
  }
}

@media (min-width: 280px) and (max-width: 320px) {
  .price-ul {
    margin: 20px;
  }
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    margin-bottom: 1rem;
    min-height: 0px;
  }
  .cards .card.active {
    transform: scale(1);
  } 
}

@media (min-width: 320px) and (max-width: 414px) {
 
   .cards {
    display: block;
    padding: 0 10px;
  }
  
    .card {
    margin-bottom: 1rem;
    min-height: 0px;
  }
 
  .toggle{
  margin-bottom: 0px;
  }
  
  .pack {
  font-size:6vw;
    margin-bottom: 0px;
    
      }
  
  .sub {
  height:1.35rem;
    width:2.8rem;
  }
  
  .circle {
  height:1.25rem;
  width:1.25rem;
  }
  
  ul li.packdesc{
  font-size: 3.5vw;
  }
  
  .month{
  font-size: 3.0vw;
  }
 
  ul li.price {
   font-size: 5.5vw;
  }
  
   .bottom-bar{
  font-size: 3.35vw;
  }
  
   .cards .card.active {
    transform: scale(1);
  
  }
  
  .subtitle{
  font-size: 5vw;
    margin:0px 10px;
  
  } 
}

@media (min-width: 414px) and (max-width: 768px) {

  .price-ul li.packdesc {
  font-size : 14px;
  }
  
  .month{
   font-size : 12px;
  }
  
     .cards {
    display: grid;
    padding: 0 10px;
  }
  
  .card{
         max-width:100%;
      margin:2% 10%;

    
  }
 
  .toggle{
  margin-bottom: 0px;
  }
  
  .pack {
  font-size:4vw;
    margin-bottom: 0px;
    
      }
  
  .sub {
  height:1.35rem;
    width:2.8rem;
  }
  
  .circle {
  height:1.25rem;
  width:1.25rem;
  }
  
  ul li.packdesc{
  font-size: 2.2vw;
  }
  
  .month{
  font-size: 2vw;
  }
 
  ul li.price {
   font-size: 4vw;
  }
  
   .bottom-bar{
  font-size: 12px;
  }
  
  .cards .card.active {
    transform: scale(1);
    margin:50px 10%;
  
  }
  
  .subtitle{
  font-size: 3vw;
    margin:0px 100px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .cards {
    display: flex;
  }
  .card {
    margin-bottom: 1rem;
    margin-right: 1rem;
    max-width :360px;
    min-height :820px;


  }
  .cards .card.active {
    transform: scale(1);
    max-width :360px;

  }
  .pack {
    font-size: 2vw;
    margin-bottom: 5px;
    
      }
  
  .toggle{
  font-size:20px;
  }
  
  .sub {
  height:1.35rem;
    width:2.8rem;
  }
  
  .circle {
  height:1.25rem;
  width:1.25rem;
  }
  
  ul li.packdesc{
  font-size: 1.6vw;
  }
  
  .month{
  font-size: 1.5vw;
  }
 
  ul li.price {
   font-size: 2.8vw;
  }
  
   .bottom-bar{
  font-size: 12px;
  }
  
 .cards .card.active {
    transform: scale(1);
  
  }
  
  .subtitle{
  font-size: 2.2vw;
    margin:0px 250px;
  
  }
}

.arrow {
  border: solid black;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  }
}