/*************** mixins ***********************/
.btn {
  min-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border: thin solid transparent;
  border-radius: 1rem;
  padding: 0.7rem 2rem;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.btn-primary {
  background: #4285F4;
  color: #ffffff;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background: rgb(17.805, 101.89, 241.195);
  border-color: #4285F4;
  color: #ffffff;
}

.btn-primary-light {
  background: rgba(66, 133, 244, 0.1490196078);
  border-color: rgba(66, 133, 244, 0.1490196078);
  color: rgb(0, 0, 0);
}

.btn-primary-light:hover, .btn-primary-light:active, .btn-primary-light:focus {
  background: rgba(17.805, 101.89, 241.195, 0.1490196078);
  border-color: rgba(17.805, 101.89, 241.195, 0.1490196078);
  color: rgb(0, 0, 0);
}

.btn-primary-outline {
  background: transparent;
  border-color: #4285F4;
  color: #4285F4;
}

.btn-primary-outline:hover, .btn-primary-outline:active, .btn-primary-outline:focus {
  background: #4285F4;
  border-color: #4285F4;
  color: #ffffff;
}

.btn-secondary {
  background: #b7b7bd;
  border-color: #b7b7bd;
  color: rgb(0, 0, 0);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background: rgb(209.6086956522, 209.6086956522, 213.3913043478);
  border-color: rgb(209.6086956522, 209.6086956522, 213.3913043478);
  color: rgb(0, 0, 0);
}

.btn-secondary-outline {
  background: transparent;
  border-color: #b7b7bd;
  color: #b7b7bd;
}

.btn-secondary-outline:hover, .btn-secondary-outline:active, .btn-secondary-outline:focus {
  background: #b7b7bd;
  border-color: #b7b7bd;
  color: rgb(0, 0, 0);
}

.btn-secondary-light {
  background: #b7b7bd;
  border-color: #b7b7bd;
  color: rgb(0, 0, 0);
}

.btn-secondary-light:hover, .btn-secondary-light:active, .btn-secondary-light:focus {
  background: rgb(156.3913043478, 156.3913043478, 164.6086956522);
  border-color: rgb(156.3913043478, 156.3913043478, 164.6086956522);
  color: rgb(0, 0, 0);
}

.btn-secondary-light-outline {
  background: transparent;
  border-color: #b7b7bd;
  color: #b7b7bd;
}

.btn-secondary-light-outline:hover, .btn-secondary-light-outline:active, .btn-secondary-light-outline:focus {
  background: #b7b7bd;
  border-color: #b7b7bd;
  color: rgb(0, 0, 0);
}

.btn-success {
  background: #05822c;
  border-color: #05822c;
  color: #ffffff;
}

.btn-success:hover, .btn-success:active, .btn-success:focus {
  background: rgb(6.8888888889, 179.1111111111, 60.6222222222);
  border-color: rgb(6.8888888889, 179.1111111111, 60.6222222222);
  color: #ffffff;
}

.btn-success-light {
  background: #065920;
  border-color: #065920;
  color: rgb(0, 0, 0);
}

.btn-success-light:hover, .btn-success-light:active, .btn-success-light:focus {
  background: rgb(2.7789473684, 41.2210526316, 14.8210526316);
  border-color: rgb(2.7789473684, 41.2210526316, 14.8210526316);
  color: rgb(0, 0, 0);
}

.btn-success-outline {
  background: transparent;
  border-color: #05822c;
  color: #05822c;
}

.btn-success-outline:hover, .btn-success-outline:active, .btn-success-outline:focus {
  background: #05822c;
  border-color: #05822c;
  color: #ffffff;
}

.btn-info {
  background: #1565c0;
  border-color: #1565c0;
  color: #ffffff;
}

.btn-info:hover, .btn-info:active, .btn-info:focus {
  background: rgb(33.2535211268, 125.6478873239, 230.7464788732);
  border-color: rgb(33.2535211268, 125.6478873239, 230.7464788732);
  color: #ffffff;
}

.btn-info-light {
  background: #519ed3;
  border-color: #519ed3;
  color: rgb(0, 0, 0);
}

.btn-info-light:hover, .btn-info-light:active, .btn-info-light:focus {
  background: rgb(48.6422018349, 133.7660550459, 192.3577981651);
  border-color: rgb(48.6422018349, 133.7660550459, 192.3577981651);
  color: rgb(0, 0, 0);
}

.btn-info-outline {
  background: transparent;
  border-color: #1565c0;
  color: #1565c0;
}

.btn-info-outline:hover, .btn-info-outline:active, .btn-info-outline:focus {
  background: #1565c0;
  border-color: #1565c0;
  color: #ffffff;
}

.btn-danger {
  background: #dd0417;
  border-color: #dd0417;
  color: #ffffff;
}

.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
  background: rgb(250.84, 25.16, 44.92);
  border-color: rgb(250.84, 25.16, 44.92);
  color: #ffffff;
}

.btn-danger-light {
  background: #d13340;
  border-color: #d13340;
  color: #ffffff;
}

.btn-danger-light:hover, .btn-danger-light:active, .btn-danger-light:focus {
  background: rgb(170.544, 38.456, 49.324);
  border-color: rgb(170.544, 38.456, 49.324);
  color: #ffffff;
}

.btn-danger-outline {
  background: transparent;
  border-color: #dd0417;
  color: #dd0417;
}

.btn-danger-outline:hover, .btn-danger-outline:active, .btn-danger-outline:focus {
  background: #dd0417;
  border-color: #dd0417;
  color: #ffffff;
}

.btn-light {
  background: #e1e1e1;
  border-color: #e1e1e1;
  color: rgb(0, 0, 0);
}

.btn-light:hover, .btn-light:active, .btn-light:focus {
  background: rgb(199.5, 199.5, 199.5);
  border-color: rgb(199.5, 199.5, 199.5);
  color: rgb(0, 0, 0);
}

.btn-light-outline, .btn-light-outline:hover, .btn-light-outline:active, .btn-light-outline:focus {
  background: transparent;
  border-color: rgb(0, 0, 0) !important;
  color: rgb(0, 0, 0);
}

.packages {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 1%;
  z-index: 1;
}
.packages .package {
  width: 32%;
  max-width: 350px;
  min-height: 550px;
  max-height: 550px;
  overflow: hidden;
  background: #F6F6FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 32px 20px;
  border-radius: 20px;
}
.packages .package.recommended {
  background: #ffffff;
  border: 2px solid #4285F4;
  box-shadow: 4px 4px 12.9px 0 rgba(66, 133, 244, 0.4);
}
.packages .package.recommended .discount {
  background: #E6F5E8;
}
.packages .package.recommended .price .value {
  color: #3BB54A;
}
.packages .package .title, .packages .package .price .value {
  font-size: 22px;
  font-weight: bold;
}
.packages .package .price .for {
  font-size: 12px;
}
.packages .package .discount {
  background: rgba(66, 133, 244, 0.1019607843);
  border-radius: 0.5rem;
  padding: 4px 16px;
}
.packages .package .price .old {
  display: block;
  padding-top: 0.5rem;
}
.packages .package .features {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 10px;
  gap: 1rem;
}
.packages .package .features .feature {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  font-size: 12px;
  justify-content: flex-start;
}

.payments {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 2rem;
}
.payments .payment-box {
  width: 100%;
  border-radius: 8px;
  padding: 16px;
  border: thin solid #b7b7bd;
  margin: 0 auto;
}
.payments .payment-box .top, .payments .payment-box .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
.payments .payment-box .top .name, .payments .payment-box .content .name {
  color: #4285F4;
}
.payments .payment-box .top .name.small, .payments .payment-box .content .name.small {
  font-size: 14px;
}
.payments .payment-box .top .price, .payments .payment-box .content .price {
  color: #3BB54A;
}
.payments .payment-box .top {
  padding-bottom: 1rem;
}
.payments .payment-box .description {
  font-size: 14px !important;
}
.payments .payment-box .description.small {
  font-size: 14px;
  line-height: 1.5rem;
}
.payments .payment-box .description a {
  color: #4285F4;
  text-decoration: none;
}

.packages {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* gap: 1%; */
  z-index: 1;
  flex-wrap: wrap;
  /* gap: 25px; */
  max-height: 570px;
  overflow-y: hidden;
}

.packages.expanded {
  max-height: none;
}

.toggle-packages {
  font-size: 16px;
  font-weight: 600;
}

.packages .package {
  width: 32%;
  max-width: 350px;
  min-height: max-content;
  max-height: max-content;
  overflow: hidden;
  background: #F6F6FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 32px 20px;
  border-radius: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width: 991.98px) {
  .packages {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .packages .package {
    width: 100%;
    max-width: 350px;
  }
}

/*# sourceMappingURL=packages.css.map */