:root {
  --primary-color:#fe5f50;
  --secondary-color:#FFCB00;
  --bg-color:#f8f9fa;
  --text-color:#0a3d47;
  --col-primary: #296eb3;
  --col-secondary: #003b81;
  --col-background: #e8e8e8;
  --col-light: #e8e8e8;
  --col-dark: #022f64;

  --col-free: #7dbaff;
  --col-bronze: #b85a24;
  --col-silver: #8a8a8a;
  --col-gold: #e2a922;
}
.bg-yellow{
  background:linear-gradient(to right, #fff09236,var(--secondary-color),#fe5f502d);
  
}
body {
 
  background: var(--col-background);
  font-family: "Noto Sans", sans-serif;
}
.button-learn{
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
@media(max-width:1000px) {
  .button-learn{
    position: relative;

   
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  
}

.price_table {
  margin: 9rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* align-items: start; */
  column-gap: 2rem;
  row-gap: 2rem;
  /* max-width: 80em; */
}

@media(max-width:1000px)
{
  .price_table{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}


.package {
  border-radius: 4px;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;

  h2 {
    margin: 0;
    padding: 1rem;
    background: var(--text-color);
    font-size: 2rem;
    text-align: center;
    font-weight: normal;
    color: white;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 0.4rem;
      left: 0;
      bottom: 0;
    }
  }
  .price {
    padding: 0.2rem 1rem;
    background: linear-gradient(
      45deg,
      var(--text-color) 0%,
      var(--text-color) 100%
    );
    color: white;
    text-shadow: 0 4px 0 var(--text-color);
  }
  p {
    padding: 1rem;
  }
  .package p{
    font-size: 2rem;
  }
  .price {
    font-size: 1.5rem;
    font-weight: normal;
    text-align: center;
    box-shadow: inset 0 10px 4px -6px rgba(0, 0, 0, 0.1);
  }
  .big {
    display: inline;
    font-size: 3rem;
    font-weight: 700;
  }
  ul {
    list-style: none;
    padding: 0 0 1rem 0;
    margin: 0;
    /* border-bottom: 1px solid var(--text-color ); */
  }
  li {
    padding: 0.8em .5em;
    /* font-size: 0.9em; */
    &:nth-child(odd) {
      background: var(--col-light);
    }
  }
  button {
    cursor: pointer;
    padding: .5em 1.5em;
    font-size: 1.8rem;
    display: block;
    color: white;
    margin: 1rem auto;
    border: none;
    border-radius: 5px;
    background: linear-gradient(
      0deg,
      var(--primary-color) 0%,
     #ff867b 100%
    );
    transition: all 0.2s;
   
  }
  button:hover,
    button:focus {
    
      box-shadow: 0 0 0 4px white, 0 0 0 5px var(--primary-color);
      outline: 0;
    }

}

.package_free h2::after {  
  background: linear-gradient( 90deg, var(--col-gold) 0%, white 50%, var(--col-gold) 100% );
}


.package_bronze h2::after {
  background: linear-gradient(
    90deg,
    var(--col-bronze) 0%,
    white 50%,
    var(--col-bronze) 100%
  );
}

.package_silver h2::after {
  background: linear-gradient( 90deg, var(--col-gold) 0%, white 50%, var(--col-gold) 100% );
}


.package_gold h2::after {
  background: linear-gradient(
    90deg,
    var(--col-gold) 0%,
    white 50%,
    var(--col-gold) 100%
  );
}

.membership-form {
  padding-bottom: 10rem;  
  
}