* {
  margin: 0;
  border: 0;
  box-sizing: inherit; }

/*
.switcher-box {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        outline: 1px solid #bb6bd9;
        outline-offset: 3px;
    }
}
*/
html {
  font-size: 62.5%;
  font-family: "Poppins", sans-serif; }
  @media only screen and (max-width: 1000px) {
    html {
      font-size: 65.25%; } }
  @media only screen and (max-width: 900px) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 600px) {
    html {
      font-size: 43.75%; } }

body {
  box-sizing: border-box;
  background-image: url("../img/background-content.jpg");
  background-repeat: no-repeat repeat;
  background-position: top center;
  background-size: 100%;
  min-height: 100vh; }

.big-circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(166, 172, 214, 0.5);
  filter: blur(150px);
  width: 100%;
  height: 130vh;
  border-radius: 200rem; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 400px) {
    .nav__menu-icon {
      transform: scaleX(-1); } }
  .nav__logo-brand {
    display: flex;
    justify-content: center;
    align-items: center; }
    @media only screen and (max-width: 600px) {
      .nav__logo-brand {
        height: 3rem; } }
    @media only screen and (max-width: 400px) {
      .nav__logo-brand {
        height: 3rem;
        order: -1; } }
    .nav__logo-brand > * {
      max-height: 100%; }
  .nav__logo-icon {
    margin-right: 0.7rem; }
  @media only screen and (max-width: 400px) {
    .nav__join-box {
      display: none; } }

.heading-primary {
  color: #231d4f;
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 1rem; }

.duration {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 900px) {
    .duration {
      flex-flow: column; } }
  .duration__text {
    flex: 0 0 50%;
    color: #848199;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 900px) {
      .duration__text {
        flex: 1; } }
    @media only screen and (max-width: 600px) {
      .duration__text {
        flex: 0 0 100%; } }

.switcher-box {
  display: flex;
  background-color: #fff;
  border-radius: 10rem;
  box-shadow: 0px 5px 7px 0px rgba(82, 67, 194, 0.23);
  overflow: hidden; }
  @media only screen and (max-width: 600px) {
    .switcher-box {
      align-self: flex-end; } }
  .switcher-box__button {
    display: inline-block;
    background: none;
    color: #231d4f;
    font-family: Poppins;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    padding: 1rem 2rem;
    width: 14rem;
    border-radius: 10rem;
    cursor: pointer; }
    @media only screen and (max-width: 900px) {
      .switcher-box__button {
        width: 9rem;
        font-size: 1.2rem; } }
    .switcher-box__button_active {
      background: #bb6bd9;
      color: #fff;
      box-shadow: 0px 5px 7px 0px rgba(82, 67, 194, 0.23); }

.btn-primary {
  border-radius: 25rem;
  background: var(--Purple-2, #bb6bd9);
  color: #fff;
  backdrop-filter: blur(8.5px);
  padding: 1rem 2rem;
  border: none;
  cursor: pointer; }
  .btn-primary_big {
    background-color: #848199;
    font-size: 2rem;
    padding: 1.5rem 3rem; }

.plan {
  flex: 0 0 33.3333333333%;
  display: flex;
  flex-flow: column;
  color: #848199;
  font-size: 1.4rem;
  padding: 6rem 2.5rem 2rem 2.5rem;
  transform: translateY(-2rem); }
  @media only screen and (max-width: 900px) {
    .plan {
      flex: 0 0 50%; } }
  @media only screen and (max-width: 600px) {
    .plan {
      flex: 0 0 100%;
      padding: 2.5rem; } }
  .plan__price {
    color: #231d4f;
    font-size: 5rem;
    font-weight: 600; }
  .plan__heading {
    stroke-dashoffset: -140; }
  .plan__type {
    color: #231d4f;
    font-size: 3rem;
    font-weight: 300; }
  .plan__description {
    font-size: 1.6rem; }
  .plan__features {
    flex: 1; }
  .plan__list {
    list-style: none;
    padding: 0;
    margin: 2rem 0; }
  .plan__item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0; }
    .plan__item::before {
      display: inline-block;
      content: "";
      margin-right: 1rem;
      width: 2rem;
      height: 2rem;
      background-image: url("../img/check-circle-1.svg");
      background-size: cover; }
  .plan__button {
    display: inline-block;
    background-color: #848199;
    color: #fff;
    font-size: 2rem;
    padding: 1.5rem 3rem;
    border-radius: 25rem;
    outline: 1px solid rgba(0, 0, 0, 0);
    outline-offset: 2rem;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s; }
    .plan__button::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background-color: #bb6bd9;
      width: 100%;
      height: 100%;
      border-radius: 25rem;
      opacity: 0;
      transform: scale(0.5);
      z-index: -1;
      transition: transform 0.3s; }
    .plan__button:hover {
      background: none;
      outline: 1px solid #bb6bd9;
      outline-offset: 0.3rem; }
    .plan__button:hover::before {
      opacity: 1;
      transform: scale(1); }
  .plan_active {
    background-color: #231d4f;
    color: #979797;
    border-radius: 2rem;
    transform: translateY(-2rem) scale(1.02);
    transform-origin: 50% 100%; }
    @media only screen and (max-width: 900px) {
      .plan_active {
        flex: 0 0 100%;
        margin-top: 2rem; } }
  .plan_active .plan__popular-btn {
    align-self: flex-end;
    background-color: #403879;
    color: #bb6bd9;
    text-transform: uppercase;
    padding: 1rem 2rem;
    margin-top: -4rem;
    border-radius: 20rem;
    border: none; }
  .plan_active .plan__price {
    color: #f2e6e8; }
  .plan_active .plan__type {
    color: #f2e6e8; }
  @media only screen and (max-width: 900px) {
    .plan_active .plan__list {
      display: flex;
      flex-flow: row wrap; } }
  @media only screen and (max-width: 900px) {
    .plan_active .plan__item {
      flex: 0 0 50%; } }
  @media only screen and (max-width: 600px) {
    .plan_active .plan__item {
      flex: 0 0 100%; } }
  .plan_active .plan__item::before {
    background-image: url("../img/check-circle-2.svg"); }
  .plan_active .plan__button {
    background: #bb6bd9; }
    .plan_active .plan__button::before {
      background-color: #848199; }
    .plan_active .plan__button:hover {
      background: none;
      outline: 1px solid #848199; }

.content {
  position: relative;
  background-image: url("../img/background-content.jpg");
  background-size: 130%;
  background-repeat: no-repeat;
  background-position: top;
  padding: 3rem;
  max-width: 120rem;
  margin: 10rem auto;
  box-shadow: 0 0.5rem 2rem 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 1.3rem; }
  @media only screen and (max-width: 1250px) {
    .content {
      margin: 2rem; } }
  @media only screen and (max-width: 400px) {
    .content {
      margin: 0;
      padding: 2rem; } }
  .content::after, .content::before {
    background-image: url("../img/backgound-2.svg");
    background-size: 120%;
    background-repeat: no-repeat;
    width: 13rem;
    height: 13rem;
    position: absolute;
    z-index: -1; }
  .content::before {
    top: 0;
    right: 0;
    transform: translate(40%, -40%); }
  .content::after {
    left: 0;
    bottom: 0;
    transform: translate(-40%, 40%); }

.plan-subscription {
  display: flex;
  flex-flow: row wrap;
  border-radius: 2.5rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(17.5px);
  padding: 0 3rem;
  margin-top: 5rem;
  max-width: 100%;
  box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.1); }
  @media only screen and (max-width: 900px) {
    .plan-subscription {
      margin-top: 3rem; } }
  @media only screen and (max-width: 400px) {
    .plan-subscription {
      padding: 0; } }

.pricing {
  margin: 5rem auto;
  max-width: 100rem; }