.pricingSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  padding-top: min(70px, 7vw);
}
.pricingSection .subheader {
  margin: 1vh 0;
}
.pricingSection ul {
  list-style: none;
  text-align: left;
  margin: 0 2vw;
}
.pricingSection li {
  padding: 0.5vh 0;
  font-size: min(1.6vw, 16px);
  line-height: calc(1.4 * min(1.6vw, 16px));
}
ul > li:before {
  display: inline-flex;
  margin-right: min(0.5vw, 5px);
  border-radius: 50%;
  width: min(2vw, 20px);
  height: min(2vw, 20px);
  font-size: min(1.6vw, 16px);
  align-items: center;
  justify-content: center;
  text-align: center;
}
ul > li.green:before {
  content: "✓";
  color: white;
  background-color: var(--accent);
}
ul > li.primary:before {
  content: "✓";
  color: white;
  background-color: var(--primary);
}

.pricingSection .buttonContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: min(6vh, 60px) 0;
}
.pricingSection .grouping {
  border: 1px solid gray;
  border-radius: min(3vw, 30px);
}
.pricingSection .groupingBox {
  display: flex;
  flex-direction: row;
}
.pricingSection .buttonBox {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}
.pricingSection .buttonBox p {
  font-size: min(1.2vw, 12px);
  line-height: calc(1.4 * min(1.2vw, 12px));
}
.pricingSection .separator {
  width: min(30px, 3vw);
}
.pricingSection .titleBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5% 0;
  margin-top: 5%;
}
.pricingSection .bodyBox {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pricingSection .first {
  color: var(--first);
}
.pricingSection .second {
  color: var(--second);
}
.pricingSection .third {
  color: var(--third);
}
.pricingSection .priceBox {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: center;
  border-top: min(0.3vw, 3px) solid var(--primary);
  border-bottom: min(0.3vw, 3px) solid var(--primary);
  padding: 5% 0;
  width: 85%;
  font-size: min(1.6vw, 16px);
  line-height: calc(1.4 * min(1.6vw, 16px));
}
.pricingSection .priceBox h1 {
  font-size: min(4.5vw, 45px);
  line-height: calc(1 * min(4.5vw, 45px));
  padding: 0;
  margin: 0;
}
.pricingSection .infoBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: min(0.3vw, 3px) solid var(--primary);
  padding: 5% 0;
  margin-bottom: 10%;
  width: 85%;
  font-size: min(1.6vw, 16px);
  line-height: calc(1.4 * min(1.6vw, 16px));
}

.ribbon {
  width: min(7.5vw, 75px);
  height: min(7.5vw, 75px);
  overflow: hidden;
  position: absolute;
  top: max(-0.5vw, -5px);
  left: max(-0.5vw, -5px);
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  height: min(0.5vw, 5px);
  width: min(0.5vw, 5px);
  background: var(--primary);
}
.ribbon::before {
  top: 0;
  right: 0;
}
.ribbon::after {
  bottom: 0;
  left: 0;
}
.ribbon span {
  position: absolute;
  display: block;
  width: min(12vw, 120px);
  background-color: var(--accent);
  color: white;
  text-transform: uppercase;
  text-align: center;
  left: -40%;
  top: 30%;
  transform: rotate(-45deg);
  font-size: min(1.5vw, 15px);
}

.ribbon_back {
  width: min(7.5vw, 75px);
  height: min(7.5vw, 75px);
  overflow: hidden;
  position: absolute;
  top: max(-0.5vw, -5px);
  right: max(-0.5vw, -5px);
}
.ribbon_back::before,
.ribbon_back::after {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  height: min(0.5vw, 5px);
  width: min(0.5vw, 5px);
  background: var(--primary);
}
.ribbon_back::before {
  top: 0;
  left: 0;
}
.ribbon_back::after {
  bottom: 0;
  right: 0;
}
.ribbon_back span {
  position: absolute;
  display: block;
  width: min(12vw, 120px);
  background-color: var(--accent);
  color: white;
  text-transform: uppercase;
  text-align: center;
  right: -40%;
  top: 30%;
  transform: rotate(45deg);
  font-size: min(1.5vw, 15px);
}

.card-cont {
  display: inline-block;
  margin: min(2vw, 20px);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card {
  width: min(18vw, 270px);
  height: min(21vw, 315px);
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transition: 0.8s ease;
  box-shadow: 0.3vw 0.3vw 0.5vw var(--primary);
  border-radius: min(2vw, 20px);
}
.card:hover,
.card:active {
  transform: perspective(800px) rotateY(180deg);
}
.card_front,
.card_back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.card_front {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.card_back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: justify;
}

.pricingSection .card_back .bodyBox {
  font-size: min(1.6vw, 16px);
  line-height: calc(1.4 * min(1.6vw, 16px));
}

@media screen and (orientation: portrait) {
  .pricingSection li {
    padding: 0.5vh 0;
    font-size: min(2.5vw, 25px);
    line-height: calc(1.4 * min(2.5vw, 25px));
  }
  ul > li:before {
    width: min(3vw, 30px);
    height: min(3vw, 30px);
    font-size: min(2.5vw, 25px);
  }

  .pricingSection .buttonContainer {
    flex-direction: column;
    margin: min(2vh, 20px) 0;
  }
  .pricingSection .grouping {
    margin: min(2vh, 20px) 0;
  }
  .pricingSection .titleBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5% 0;
    margin-top: 5%;

    font-size: min(4vw, 40px);
    line-height: calc(1.2 * min(4vw, 40px));
    letter-spacing: min(-0.1vw, -1px);
    margin: 0 1vw;
  }
  .pricingSection .priceBox {
    font-size: min(2.5vw, 25px);
    line-height: calc(1.4 * min(2.5vw, 25px));
  }
  .pricingSection .infoBox {
    font-size: min(2.5vw, 25px);
    line-height: calc(1.4 * min(2.5vw, 25px));
  }

  .card {
    width: 27vw;
    height: 30vw;
  }
  .pricingSection .card_back .bodyBox {
    font-size: min(2.5vw, 25px);
    line-height: calc(1.4 * min(2.5vw, 25px));
  }

  .ribbon {
    width: min(10vw, 100px);
    height: min(10vw, 100px);
    top: max(-1vw, -10px);
    left: max(-1vw, -10px);
  }
  .ribbon::before,
  .ribbon::after {
    height: min(1vw, 10px);
    width: min(1vw, 10px);
  }
  .ribbon span {
    width: min(16vw, 160px);
    font-size: min(2vw, 20px);
  }

  .ribbon_back {
    width: min(10vw, 100px);
    height: min(10vw, 100px);
    overflow: hidden;
    position: absolute;
    top: max(-1vw, -10px);
    right: max(-1vw, -10px);
  }
  .ribbon_back::before,
  .ribbon_back::after {
    height: min(1vw, 10px);
    width: min(1vw, 10px);
  }
  .ribbon_back span {
    width: min(16vw, 160px);
    font-size: min(2vw, 20px);
  }
}

.pricingTable-firstTable_table__getstart {
  border: 0;
  background-color: var(--primary);
  border-radius: min(2.5vw, 25px);
  cursor: pointer;
  padding: min(1vw, 10px);
  transition: all 0.4s ease;
  min-width: min(10vw, 100px);
}
.pricingTable-firstTable_table__getstart:hover {
  opacity: 0.8;
}
.button__text {
  color: white;
  transition: all 0.2s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pricingTable-firstTable_table__getstart--loading .button__text {
  visibility: hidden;
  opacity: 0;
}
.pricingTable-firstTable_table__getstart--loading {
  position: absolute;
  content: "";
  width: min(1.6vw, 16px);
  height: min(1.6vw, 16px);
  border: min(0.4vw, 4px) solid transparent;
  border-top-color: white;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}