@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
/* line 4, ../scss/home.scss */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
/* line 9, ../scss/home.scss */
body .top, body .bottom {
  position: absolute;
}
/* line 13, ../scss/home.scss */
body .top {
  right: 0;
  top: -30%;
}
/* line 18, ../scss/home.scss */
body .bottom {
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 770px) {
  /* line 4, ../scss/home.scss */
  body {
    height: 100%;
  }
}

/* line 29, ../scss/home.scss */
header .container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  padding: 0 30px 50px;
}
/* line 33, ../scss/home.scss */
header .container .title h1 {
  color: #6d708d;
  font-weight: 700;
  font-size: 30px;
}
/* line 37, ../scss/home.scss */
header .container .options {
  display: flex;
  align-items: center;
  gap: 30px;
}
/* line 40, ../scss/home.scss */
header .container .options p {
  color: #b3b5c6;
  font-weight: 700;
}
@media screen and (max-width: 770px) {
  /* line 29, ../scss/home.scss */
  header .container {
    padding: 50px 30px;
  }
}

/* line 53, ../scss/home.scss */
main .container .annualy {
  display: flex;
  justify-content: center;
}
/* line 56, ../scss/home.scss */
main .container .annualy.active {
  display: none;
}
@media screen and (max-width: 770px) {
  /* line 53, ../scss/home.scss */
  main .container .annualy {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
}
/* line 65, ../scss/home.scss */
main .container .monthly {
  display: none;
}
/* line 68, ../scss/home.scss */
main .container .monthly.active {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 770px) {
  /* line 65, ../scss/home.scss */
  main .container .monthly {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
}
/* line 77, ../scss/home.scss */
main .container .card {
  background-color: #f6f6fe;
  width: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;
}
/* line 84, ../scss/home.scss */
main .container .card .top {
  display: flex;
  justify-content: center;
}
/* line 87, ../scss/home.scss */
main .container .card .top p {
  color: #6d708d;
  font-weight: 700;
}
/* line 92, ../scss/home.scss */
main .container .card .content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* line 95, ../scss/home.scss */
main .container .card .content p {
  color: #494c5f;
  font-weight: 700;
  font-size: 20px;
}
/* line 99, ../scss/home.scss */
main .container .card .content span {
  color: #494c5f;
  font-weight: 700;
  font-size: 50px;
}
/* line 104, ../scss/home.scss */
main .container .card ul {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #b3b5c6;
  border-bottom: 1px solid #b3b5c6;
}
/* line 109, ../scss/home.scss */
main .container .card ul li {
  border-bottom: 1px solid #b3b5c6;
  padding: 15px 0;
  color: #6d708d;
  font-weight: 700;
  display: flex;
  justify-content: center;
}
/* line 117, ../scss/home.scss */
main .container .card .learn {
  background-color: #a3a8f0;
  width: 100%;
  height: 40px;
  border-radius: 10px;
}
/* line 123, ../scss/home.scss */
main .container .card .learn span {
  color: #f6f6fe;
  font-weight: 700;
  letter-spacing: 2px;
}
/* line 128, ../scss/home.scss */
main .container .card .learn:hover {
  background-color: transparent;
  border: 1px solid #a3a8f0;
}
/* line 132, ../scss/home.scss */
main .container .card .learn:hover span {
  color: #a3a8f0;
  font-weight: 700;
}
/* line 139, ../scss/home.scss */
main .container .card-principal {
  background-image: linear-gradient(#a3a8f0, #696fdd);
  width: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;
}
/* line 146, ../scss/home.scss */
main .container .card-principal .top {
  display: flex;
  justify-content: center;
}
/* line 149, ../scss/home.scss */
main .container .card-principal .top p {
  color: #f6f6fe;
  font-weight: 700;
}
/* line 154, ../scss/home.scss */
main .container .card-principal .content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* line 157, ../scss/home.scss */
main .container .card-principal .content p {
  color: #f6f6fe;
  font-weight: 700;
  font-size: 20px;
}
/* line 161, ../scss/home.scss */
main .container .card-principal .content span {
  color: #f6f6fe;
  font-weight: 700;
  font-size: 50px;
}
/* line 166, ../scss/home.scss */
main .container .card-principal ul {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #f6f6fe;
  border-bottom: 1px solid #f6f6fe;
}
/* line 171, ../scss/home.scss */
main .container .card-principal ul li {
  border-bottom: 1px solid #b3b5c6;
  padding: 15px 0;
  color: #f6f6fe;
  font-weight: 700;
  display: flex;
  justify-content: center;
}
/* line 179, ../scss/home.scss */
main .container .card-principal .learn {
  background-color: #f6f6fe;
  width: 100%;
  height: 40px;
  border-radius: 10px;
}
/* line 185, ../scss/home.scss */
main .container .card-principal .learn span {
  color: #a3a8f0;
  font-weight: 700;
  letter-spacing: 2px;
}
/* line 190, ../scss/home.scss */
main .container .card-principal .learn:hover {
  background-color: transparent;
  border: 1px solid #f6f6fe;
}
/* line 194, ../scss/home.scss */
main .container .card-principal .learn:hover span {
  color: #f6f6fe;
  font-weight: 700;
}

/* line 204, ../scss/home.scss */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* line 212, ../scss/home.scss */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* line 219, ../scss/home.scss */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

/* line 231, ../scss/home.scss */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

/* line 243, ../scss/home.scss */
input:checked + .slider {
  background-color: #696fdd;
}

/* line 247, ../scss/home.scss */
input:focus + .slider {
  box-shadow: 0 0 1px #696fdd;
}

/* line 251, ../scss/home.scss */
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* line 257, ../scss/home.scss */
.slider.round {
  border-radius: 34px;
}

/* line 261, ../scss/home.scss */
.slider.round:before {
  border-radius: 50%;
}