main {
      background:
      background-size: 100%;
      background-position: top left;
      min-height: 200vh;
}

header {
      background: linear-gradient(180deg, rgb(22, 27, 39) 0%, rgba(22,27,39,0.5984594521402311) 40%, rgba(22,27,39,0) 100%);
}

.section-nav .buy-now img {
      border-radius: 100%;
}

article {
      background: url('../../../images/cubes.webp') no-repeat;
      background-position: top center;
      background-size: 100%;
}

article .btn {
      color: #004eea;
      user-select: none;
      padding: 15px 25px;
      border: 1px solid #004eea;
      border-radius: 50px;
      font-size: .9em;
      line-height: 1em;
      text-decoration: none;
      cursor: pointer;
      display: inline-block;
      font-family: SpaceGrotesk-SemiBold;
}

article .btn:hover {
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

article .btn-success {
      color: #fff;
      background: #0dc167;
      border-color: #0dc167;
}

article .btn-brand {
      background: #004eea;
      color: #fff;
}

article .btn-dark {
      background: #1d252c;
      color: #fff;
}

article .btn-light {
      background: #fff;
      border: 1px solid #fff;
      color: #1d252c;
      font-size: 1em;
      padding: 17px 30px;
}

article .btn-bordered {
      border: 1px solid #fff;
      color: #fff;
}

article .btn-transparent-light {
      color: #fff;
}

article .btn-transparent-light:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.15);
}

article .btn-small {
      font-size: 14px;
      padding: 6px 15px;
}

article .btn-large {
      font-size: 1.2em;
      padding: 15px 30px;
}

article .btn i {
      margin-left: .2em;
}

.button-wrapper {
      margin: 20px 0;
}


.light-bg {
      background: #fff;
      color: #000;
      padding: 0 0 1px;
}

.section-row {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 20px;
}

.section-col {
      width: 100%;
}

@media (min-width: 992px){
      .section-col {
            width: 50%;
      }

      .section-col-66 {
            width: 66%;
      }


      .section-col-50 {
            width: 50%;
      }

      .section-col-33 {
            width: 33%;
      }

      .light-bg {
            padding-bottom: 120px;
      }
}

.ribbon-content {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 89px;
      height: 91px;
      overflow: hidden;
}

.ribbon {
      display: inline-block;
      position: absolute;
      padding: 7px 0;
      left: -23px;
      top: 22px;
      width: 160px;
      text-align: center;
      font-size: 14px;
      line-height: 16px;
      background: linear-gradient(to right, #e10615 0%,#a1010e 100%);
      color: #fff;
      text-shadow: 0 2px 2px rgba(0,0,0,.4);
      letter-spacing: 0.05em;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      text-transform: uppercase;
      font-weight: 800;
}

.bg-gradient {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      transform: translateX(-33%);
      width: 500px;
      height: 500px;
      border-radius: 100%;
      box-shadow: 0 0 100px rgba(89,54,221,0.18);
      background: radial-gradient(circle, rgba(89,54,221,0.18) 0%, rgba(255,255,255,0) 90%);
      pointer-events: none;
      user-select: none;
}

#hero {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: center;
      padding: 40px;
      color: #fff;
      gap: 50px 100px;
      align-items: center;
}

@media (min-width: 1200px){
      #hero {
            background-position: top right;
            padding: 60px 120px 0;
      }
}

#hero-title {
      display: flex;
      flex-direction: column;
      gap: 10px;
}

#hero-title h1 {
      font-size: 3em;
      margin: 0;
}

#hero-title h2 {
      display: flex;
      gap: 20px;
      align-items: center;
      text-transform: initial;
      margin: 0;
      font-size: 2.6em;
}

#hero-title h2 img {
      width: 1em;
      height: 1em;
      aspect-ratio: 1;
}

#hero-figure {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 20px;
      width: 400px;
      max-width: 90vw;
      min-height: 230px;
      border-radius: 15px;
      background: url(../images/coupon.webp) no-repeat center/cover;
}

#hero-figure h2 {
      padding: 10px 5px;
      margin: 0;
      width: 80%;
      text-align: center;
      font-family: SpaceGrotesk-Bold;
      font-size: 3em;
      background-image: linear-gradient(to right, white 50%, rgba(255,255,255,0) 0%);
      background-position: left bottom;
      background-size: 27px 1px;
      background-repeat: repeat-x;
}

.hero-caption {
      display: flex;
      font-size: 1em;
      justify-content: center;
      align-items: center;
      gap: 20px;
      width: 100%;
      text-align: center;
}

@media (min-width: 992px){
      .hero-caption {
            display: block;
            width: 50%;
            font-size: 1.5em;
      }
}

.hero-price-wrapper {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(20%, 30%);
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 150px;
      height: 150px;
      aspect-ratio: 1;
      border-radius: 100%;
      padding: 30px;
      background: #000;
      color: #fff;
      font-family: SpaceGrotesk-SemiBold;
      font-size: 1.15em;
      box-shadow: 25px 25px 100px rgba(255,255,255,.3);
      text-decoration: none;
}

.hero-price {
      font-size: 2.2em;
      transform: scaleY(1.15);
}

.hero-price small {
      font-size: .7em;
}

.hero-price sup {
      font-size: .5em;
}

.hero-price-period {
      font-family: SpaceGrotesk;
      font-size: .95em;
      transform: translateY(-5px);
}

.hero-cta-btn {
      padding: 5px 20px;
      margin: 10px 0;
      background: #0dc167;
      color: #fff;
      text-decoration: none;
      border-radius: 50px;
      font-family: SpaceGrotesk-SemiBold;
}

.light-bg section .section-row {
      padding: 40px;
}

@media (min-width: 992px){
      .light-bg section .section-row {
            padding: 120px;
      }
}

.section-alternate {
      margin-bottom: 30px;
      align-items: center;
}

@media (max-width: 992px) {
      .section-alternate .section-col:first-of-type {
            position: absolute;
            z-index: 1;
            opacity: .1;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
      }
}


.section-row h2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 0 30px;
      font-family: SpaceGrotesk-Bold;
      font-size: 2.4em;
      line-height: 1;
}

.section-row h3 {
      font-family: SpaceGrotesk-SemiBold;
      font-size: 2em;
      margin: 0 0;
}

.section-row h4 {
      font-size: 1.2em;
      margin: 0;
}

@media (min-width: 992px){
      .section-row h3 {
            font-size: 3em;
      }

      .section-row h2 {
            margin: 0 0 30px;
            font-size: 2.5em;
      }

      .section-alternate:nth-of-type(2n+1) .section-col h2 {
            align-items: flex-end;
      }

      .section-alternate:nth-of-type(2n+1) .section-col h3 {
            text-align: right;
      }

      .section-alternate .section-col.illustration img {
            transform: translateX(-100px);
      }

      .section-alternate .section-col.content {
            line-height: 2em;
      }

      .section-alternate:nth-of-type(2n+1) {
            flex-direction: row-reverse;
      }

      .section-alternate:nth-of-type(2n+1) .section-col.illustration img {
            transform: translateX(100px);
      }

      .section-alternate:nth-of-type(2n+1) .section-col .section-alternate-text {
            text-align: right;
      }
}

.section-alternate-text {
      line-height: 1.5em;
}

.section-alternate-text.solid {
      max-width: 400px;
      margin-left: auto;
      font-size: 1em;
      color: #96acbc;
}

.section-alternate-text p {
      margin: 0 0 30px;
}

.stars {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin: 10px 0 0;
      color: #0dc167;
      font-size: 1.5em;
}

.why-choose h3 {
      color: #f00;
      font-size: 3.25em;
}

.expertly-developed h2 {
      margin: 0;
}

.expertly-developed h3 {
      color: #009ee1;
      margin: 0 0 30px;
      line-height: 1;
}

.everything-package {
      background: #f0f4f9;
}

.everything-package h2 {
      margin: 0;
      line-height: 1.2em;
}

.everything-package h3 {
      line-height: 1.3em;
      margin: 0 0 30px;
      font-size: 2.4em;
}

.everything-package h3 br {
      display: none;
}

.everything-package h3 strong {
      font-weight: normal;
      color: #009ee2;
}

@media (min-width: 992px){
      .everything-package h3 br {
            display: block;
      }

      .light-bg section .section-row {
            padding: 40px 120px;
            margin: 0;
      }
}


#cta {
      display: flex;
      justify-content: center;
      margin: 0;
}

#cta h2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px 40px;
      padding: 20px;
      width: 100%;
      background: #2c376c;
      color: #fff;
      text-align: center;
      font-size: 1.3em;
}

#cta i {
      font-size: 2em;
}

@media (min-width: 992px){

      #cta h2{
            border-radius: 15px;
            flex-direction: row;
            padding: 25px 100px;
            font-size: 1.85em;
            width: auto;
      }

      #cta i {
            transform: rotate(270deg);
      }
}

.pricing-indicator-wrapper {
      display: flex;
      justify-content: center;
      gap: 10px;
      font-size: 1.15em;
}

.pricing-indicator-wrapper label {
      cursor: pointer;
}

.pricing-indicator-input {
      display: none;
}

.period-indicator {
      position: relative;
      width: 50px;
      height: 20px;
      border-radius: 50px;
      background: #0dc167;
}

.period-indicator-inner {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
}

.period-indicator-inner[for="period-yearly"] {
      display: none;
}

:checked + .period-indicator .period-indicator-inner[for="period-yearly"] {
      display: block;
}

.period-indicator::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 29px;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #f0f4f9;
      box-shadow: 0 0 5px rgba(0,0,0,.2);
      transition: all .5s ease;
      pointer-events: none;
      user-select: none;
}

:checked + .period-indicator::after {
      left: 5px;
}

#pricing-section-inner {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      padding: 20px;
      margin: 0 0 50px;
}

#pricing-section h2 {
      width: 100%;
      text-align: center;
      font-size: 2em;
      font-family: SpaceGrotesk;
}

.pricing-col {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
      padding: 30px;
      background: #f0f4f9;
      border: 1px solid #8b99af;
      border-radius: 15px;
}

.pricing-col:last-child {
      background: #2e335c;
      border: 1px solid #2e335c;
      color: #fff;
}

@media (min-width: 576px){
      .pricing-col {
            width: 280px;
      }
}

@media (min-width: 992px){
      #how-it-works {
            scroll-margin-top: 100px;
      }

      #pricing-section {
            scroll-margin-top: 100px;
      }

      #pricing-section h2 {
            font-size: 4em;
      }

      .pricing-inner-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
      }

      .pricing-col-sub-divider {
            height: 80%;
            width: 2px;
            background: rgba(255,255,255,.2);
      }

      .pricing-col {
            width: 270px;
      }

      .pricing-col:last-child {
            width: 480px;
      }
}

.pricing-col .btn {
      display: flex;
      justify-content: center;
      width: 100%;
}

.pricing-col h3  {
      font-size: 2em;
      text-transform: uppercase;
      font-family: SpaceGrotesk-SemiBold;
}

.pricing-col:last-child h3 {
      color: #fff;
}

.pricing-info {
      opacity: .6;
      font-size: .8em;
      margin: 10px 0 20px;
}

.pricing-col hr {
      width: 90%;
      opacity: .4;
}

.pricing-col:last-child hr {
      color: #fff;
}

.pricing-price-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 20px 0;
}

.pricing-price {
      font-size: 2.75em;
      font-family: SpaceGrotesk-Bold;
}

.pricing-price sup {
      font-size: .6em;
}

.pricing-feature-list {
      margin: 10px 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 15px;
      font-family: SpaceGrotesk;
      color: #141515;
}

.pricing-col:last-child .pricing-feature-list {
      color: #f3ffff
}

.pricing-feature-list li {
      display: flex;
      gap: 25px;
      font-size: .8em;
      font-family: SpaceGrotesk;
      align-items: flex-start;
}

.pricing-feature-info h5 {
      font-size: 1em;
      margin: 0;
}

.pricing-feature-info span {
      font-size: .85em;
      opacity: .7;
}

.pricing-col .btn {
      margin: 25px 0;
      font-size: 1em;
      align-self: center;
      background: #0dc167;
      border-color: #0dc167;
      text-transform: uppercase;
      border-radius: 50px;
}

.check {
      position: relative;
      width: 1.5em;
      height: 1.5em;
      color: #fff;
      background: #272d4b;
      border-radius: 100%;
}

.pricing-col:last-child .check {
      background: transparent;
      border: 1px solid;
}

.pricing-inner-row .yearly {
      display: none;
}

:checked + .pricing-inner-row .monthly {
      display: none;
}

:checked + .pricing-inner-row .yearly {
      display: flex;
}

.check::before {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 2px;
      width: 60%;
      height: 2.5px;
      background: currentColor;
      transform: rotate(-45deg) translateX(4px);
}

.check::after {
      content: "";
      position: absolute;
      bottom: 6px;
      left: 2.5px;
      width: 35%;
      height: 2.5px;
      background: currentColor;
      transform: rotate(45deg);
}

.money-back-guarantee {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 1100px;
      max-width: 90%;
      margin: 0 auto 80px;
      padding: 20px 10px;
      background: #272d4b;
      background-size: contain;
      color: #fff;
      font-family: SpaceGrotesk-SemiBold;
      font-size: 1em;
      border-radius: 15px;
      text-align: center;
}


.money-back-guarantee img {
      height: 50px;
}

.money-back-guarantee-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
}

.money-back-guarantee-features {
      display: flex;
      margin: 0;
      padding: 0;
      font-size: .7em;
      gap: 30px;
      list-style: none;
}

.money-back-guarantee-features li {
      position: relative;
}

.money-back-guarantee-features li:not(:first-of-type)::before {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      background: #0dc167;
      left: 0;
      top: 50%;
      transform: translate(-20px, -50%);
}

.bottom-grid {
      display: none;
      position: absolute;
      z-index: 1;
      width: 60%;
      left: 50%;
      transform: translate(-50%, -0px);
}

@media (min-width: 992px){
      .money-back-guarantee {
            padding: 40px;
            font-size: 2.5em;
            gap: 0px 30px;
      }

      .money-back-guarantee img {
            height: auto;
      }

      .money-back-guarantee-features {
            font-size: .5em;
      }

      .bottom-grid {
            display: block;
      }
}