/* import fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

:root {
  --font: "Montserrat", sans-serif;
  --font-size: 15px;
  --very-light-grayish-blue: #f6f6fe;
  --light-grayish-blue: #b3b5c6;
  --grayish-blue: #6d708d;
  --dark-grayish-blue: #494c5f;
  --linear-gradien-from: #a3a8f0;
  --linear-gradien-to: #696fdd;
  --white-color:#fff;
  --black-color:#000:
}

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

html {
  font-size: var(--font-size);
  font-family: var(--font);
}

body {
  background:  var(--very-light-grayish-blue) ;
  
}

.pricing-component{
  padding:4rem 0 0;
  position: relative;
}

.container{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
}

h1.our-pricing{
  font-size: 2.6rem;
  color:var(--dark-grayish-blue);
  text-align: center;
  margin: 3rem 0rem;
}

.pricing-cards{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card{
  padding: 2.6rem 2.3rem 2.3rem;
  background-color: var(--white-color);
  width:80%;
  margin-bottom: 2.5rem;
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: column;
  border-radius:1.2rem;
 box-shadow: -1px 1px 11px -1px rgba(163,168,240,0.46);
-webkit-box-shadow: -1px 1px 11px -1px rgba(163,168,240,0.46);
-moz-box-shadow: -1px 1px 11px -1px rgba(163,168,240,0.46);
}

.card .type{
  font-size: 1.5rem;
  color:var(--grayish-blue);
  margin-bottom: 20px;
}

.card .price{
font-size: 5rem;
position: relative;
color:var(--dark-grayish-blue);
margin-bottom: 30px;
}

.card .currency{
  font-size: 3rem;
  position: absolute;
  bottom:50%;
  left:-34px;
  transform: translateY(50%);
}

.features{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:100%;
  margin-bottom: 1rem;
}

.features .feature{
 padding:20px 0;
border-bottom: .1rem solid var(--light-grayish-blue);
width: 100%;
text-align: center;
color:var(--grayish-blue);
font-size: 1.3rem;
}

.features .feature:first-child{
  border-top: .1rem solid var(--light-grayish-blue);
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
  padding: 1.2rem .6rem;
  width:100%;
  text-align: center;
  border-radius: .5rem;
  font-weight: lighter;
  border:1px solid transparent;
  border-left:0px;
  border-right:0px;
  transition: all .3s linear;
  overflow: hidden;
}

.btn-primary{
  background:linear-gradient(120deg,var(--linear-gradien-from),var(--linear-gradien-to));
  color:var(--white-color)
}

.btn-primary:hover{
    border:1px var(--linear-gradien-to) solid ;
    background: var(--white-color);
    color:var(--linear-gradien-to);
}


.btn-secondary{
  background: var(--white-color);
  color:var(--linear-gradien-to)
}

.btn-secondary:hover{
    border:1px var(--white-color) solid ;
    background: transparent;
    color:var(--white-color);
}


.card:nth-child(2){
  background: linear-gradient(120deg,var(--linear-gradien-from),var(--linear-gradien-to));


}

.card:nth-child(2) .type{
  color:var(--very-light-grayish-blue)
}

.card:nth-child(2) .price{
  color:var(--white-color);
}

.card:nth-child(2) .features .feature{
  border-color: rgba(246, 246, 254,.3);
  color:var(--very-light-grayish-blue)
}


/* Toggle */
.toggle-pricing{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:70px
}

.toggle-pricing .type{
  color:var(--light-grayish-blue);

}
.toggle-pricing .type:first-child{
margin-right: 20px;
}

.toggle-pricing .type:last-child{
margin-left:20px ;
}


.switch{
  position: relative;
  display: inline-block;
  width:60px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}


.switch input{
opacity: 0;
}

.slider{
  position: absolute;
  cursor: pointer;
  width:100%;
  height: 100%;
  background:linear-gradient(120deg,var(--linear-gradien-from),var(--linear-gradien-to));
  border-radius: 34px;
  transition:.4s;
}


.slider::before{
   position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition:.4s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


.slider:hover{
  opacity: .7;
}



/* Media query */

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

  h1.our-pricing{
    font-size: 2.5rem;
  }

 .card .price{
      font-size: 3.5rem;     
      position: relative;
      text-align: center;
      left:15px;
  }

}


@media screen and (min-width:1000px){

  .pricing-cards{
    flex-direction: row;
  }

.pricing-component{
  padding:2rem  0;
}
.card:nth-child(2){
  padding: 4.4rem 2.3rem ;
}

}