:root {
  --blue: #2c61ff;
  --dark-blue: #000;
  --purple: #633fdf;
  --light-purple: #91adff;
  --grey: #fff;
  --color1: 125, 125, 251;
  --color2: 125, 125, 251;
  --color3: 125, 125, 251;
  --color4: 125, 125, 251;
  --color5: 125, 125, 251;
  --circle-size: 80%;
  --blending: hard-light;
}

html {
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  color: #000000 !important;
}

footer {
  margin-top: auto;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}


.dropdown .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transform: scale(0.9);
}

.dropdown .w-nav-link {
  outline: none;
  background-color: transparent;
  width: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  min-width: 200px;
}

.dropdown.active .caret {
  transform: scale(0.9) rotate(180deg);
}

.dropdown.active .dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-content a {
  color: #000;
  padding: 10px;
  text-decoration: none;
  display: block;
  border-radius: 5px;
}

.dropdown-content a:hover {
  background-color: #eaefff;
  color: #000;
}

.navbar {
  padding: 10px 0px !important;
  background-color: #ffffff !important;
}

@media screen and (max-width: 991px) {
  .navbar {
    padding: 0px !important;
  }

  .w-layout-blockcontainer {
    max-width: 728px;
  }

  .nav-menu-wrapper {
    justify-content: unset;
  }

  .cta._1 {
    margin-left: auto;
  }

  .dropdown {
    display: block;
  }

  .dropdown-content {
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    box-shadow: unset;
    border-radius: 0px;
  }

  .dropdown-content a {
    border-radius: 0px;
    border-bottom: 0px;
    text-align: left;
  }

  .dropdown-content a:hover {
    background-color: unset;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #333;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

p {
  margin-bottom: 10px;
}

a {
  text-decoration: underline;
}

.section {
  z-index: 1;
  flex-direction: column;
  align-items: stretch;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
  overflow: visible;
}

.section.black {
  background-color: #0b0b0c;
  padding-top: 30px;
  padding-bottom: 0;
}

.section.bloggers {
  overflow: hidden;
}

.section.hero {
  justify-content: center;
  padding-top: 150px;
  display: flex;
  position: relative;
}

.section.hero .heading {
  line-height: 1.25em;
  font-size: 40px;
}

.section.hero .paragraph-2 {
  font-size: 16px;
}

.section.compare.hide {
  display: none;
}

.section.faq {
  padding-bottom: 0;
}

.section.dark {
  background-color: var(--dark-blue);
  color: #fff;
}

.section._1 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section.cta-section {
  padding: 40px;
  background-color: var(--blue);
}

.container {
  z-index: 1;
  max-width: 1200px;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}

.content-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.bold {
  font-weight: 700;
}

.bold.highlight {
  color: var(--blue);
  margin-bottom: 0;
}

.tools {
  grid-column-gap: 23px;
  grid-row-gap: 23px;
  text-align: left;
  display: flex;
}

.key-tools {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 20px;
  display: grid;
}

.key-tool {
  grid-column-gap: 11px;
  grid-row-gap: 11px;
  flex-direction: column;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  display: flex;
}

.key-tool-header {
  margin-bottom: 0;
  font-weight: 700;
}

.key-tools-wrapper {
  grid-column-gap: 13px;
  grid-row-gap: 13px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.powerhouse-info {
  max-width: 750px;
}

.testimonial-wrapper {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  text-align: center;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.competitors-wrapper {
  width: 100%;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.competitor {
  width: 100%;
  height: 38px;
  text-align: left;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  display: flex;
}

.competitor.alt {
  background-color: rgba(221, 229, 255, .23);
}

.competitor.alt.left, .competitor.left {
  justify-content: flex-start;
}

.competitor-module {
  width: 100%;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.competitor-header {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.faq-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
  max-width: 36rem;
  width: 100%;
}

.faq-module {
  width: 100%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: left;
  flex-direction: column;
  margin-bottom: 15px;
  display: flex;
}

.faq-question {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem;
  display: flex;
  box-shadow: 0 6px 11px -5px rgba(0, 0, 0, .08);
  width: 100%;
}

.faq-arrow {
  max-width: 15px;
}

.faq-answer {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.results {
  width: 100%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.pricing-wrapper {
  width: 100%;
  max-width: 700px;
  margin: auto;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 15px;
  display: grid;
}

.pricing-wrapper.pricing-paid-only {
  grid-template-columns: 1fr 1fr;
  max-width: 800px;
  margin: auto;
}

.pricing {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: var(--dark-blue);
  text-align: left;
  background-color: #fff;
  border-radius: 20px;
  flex-direction: column;
  padding: 20px;
  display: flex;
  position: relative;
  box-shadow: 0 7px 14px -2px rgba(0, 0, 0, .2);
}

.pricing.highlight {
  background-image: linear-gradient(117deg, var(--purple), var(--blue));
  color: #fff;
  font-weight: 300;
}

.footer {
  width: 100%;
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  color: #fff;
  grid-template-rows: auto;
  grid-template-columns: 2.25fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 50px 0px;
  display: grid;
}

.footer-column {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  display: flex;
}

.footer-column._1 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.footer-header {
  font-weight: 700;
}

.social-wrapper {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  display: flex;
}

.social-icon {
  width: 30px;
}

.semibold {
  font-weight: 600;
}

.semibold.highlight {
  color: var(--blue);
}

.semibold.highlight-copy {
  color: var(--blue);
  color: var(--blue);
  color: var(--blue);
  color: var(--blue);
  color: var(--blue);
}

.semibold.highlight-copy-copy {
  color: var(--blue);
  font-size: 20px;
}

.semibold._1 {
  text-align: left;
  font-size: 16px;
}

.cta {
  background-color: var(--blue);
  text-align: center;
  border: 1px solid #2c61ff;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .2s ease-in-out;
}

.cta:hover {
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
  background-color: rgba(0, 0, 0, 0);
}

.cta.secondary {
  border: 1px solid var(--blue);
  color: var(--blue);
  background-color: rgba(0, 0, 0, 0);
}

.cta.secondary.black {
  color: #000;
  border-color: #000;
}

.cta.white {
  color: #000;
  background-color: #fff;
  border: 1px solid #fff;
}

.cta.white:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
}

.cta.email {
  z-index: 1;
  border-radius: 50px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  font-size: 16px;
}

.cta.email:hover {
  color: var(--dark-blue);
}

.cta.darkbg {
  min-width: 300px;
}

.cta.darkbg:hover {
  color: #fff;
  border-color: #fff;
}

.cta-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.cta-wrapper.vert {
  flex-direction: column;
}

.navbar {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, .54);
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.brand {
  max-width: 157px;
}

.nav-menu-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.blogger-wrapper-info {
  max-width: 650px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  font-weight: 300;
  display: flex;
}

.hero-content {
  width: 100%;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.hero-content-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.hero-media {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
}

.blogger-wrapper {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.blogger-media {
  flex-direction: column;
  align-items: center;
  display: none;
}

.powerhouse-wrapper {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.testimonial-content {
  width: 100%;
  height: 100%;
  color: #fff;
  background-image: url('../rectangle.html');
  background-position: 0 0;
  background-size: auto;
  justify-content: center;
  align-items: center;
  padding: 65px;
}

.testimonial {
  max-width: 481px;
  text-align: center;
}

.key-tools-icon {
  max-width: 40px;
  color: var(--light-purple);
}

.competitor-column.middle {
  background-image: linear-gradient(to top, var(--purple), #1d56ff);
  border-radius: 19px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.competitor-logo {
  max-width: 157px;
}

.check-mark {
  max-width: 26px;
}

.check-mark.smaller {
  max-width: 9px;
}

.check-mark.medium {
  max-width: 19px;
}

.check-mark.big {
  max-width: 30px;
}

.traffic-sources {
  z-index: 1;
  max-width: 42%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: -1%;
  right: auto;
}

.hero-review {
  z-index: 2;
  max-width: 68%;
  position: absolute;
  top: auto;
  bottom: -13%;
  left: auto;
  right: 0%;
}

.hero-graph {
  z-index: 0;
  max-width: 90%;
}

.slide-nav {
  font-size: 7px;
  display: none;
  top: 226px;
}

.icon-embed-xxsmall {
  width: 1rem;
  height: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon {
  max-width: 37px;
  color: var(--blue);
}

.icon.white {
  height: 48px;
  color: #fff;
}

.icon.white.rotate {
  transform: rotate(180deg);
}

.right-arrow {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.slide-wrapper {
  width: 30vw;
  padding: 25px 10px;
}

.slider {
  width: 100vw;
  background-color: rgba(221, 221, 221, 0);
}

.slide {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--dark-blue);
  background-color: #fff;
  border-radius: 9px;
  flex-direction: column;
  padding: 25px 20px;
  display: flex;
  box-shadow: 0 6px 13px -4px rgba(0, 0, 0, .2);
}

.mask {
  height: 100%;
}

.left-arrow {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  display: flex;
}

.short-paragraph {
  max-width: 298px;
}

.powerhouse-media {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-image: linear-gradient(to right, var(--dark-blue), var(--blue));
  color: #fff;
  border-radius: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  padding: 35px;
  display: grid;
  position: relative;
}

.powerhouse-graph {
  max-width: 54%;
}

.powerhouse-laptop {
  max-width: 66%;
  position: absolute;
}

.right-arrow-2 {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.mask-2 {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .2);
}

.left-arrow-2 {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.testimonial-content-wrapper {
  min-height: 325px;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  display: flex;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .2);
  border-radius: 20px;
}

.slider-2 {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding: 24px;
}

.author-block {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  display: flex;
}

.author-image {
  max-width: 62px;
  border-radius: 100px;
}

.author-info {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.verified-badge {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  color: var(--blue);
  align-items: center;
  font-weight: 300;
  display: flex;
}

.pricing-features {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 20px;
  display: grid;
}

.feature {
  /* border-bottom: 1px solid #e7e7e7; */
  grid-template-rows: auto;
  grid-template-columns: 3.25fr .25fr;
  grid-auto-columns: 1fr;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  display: grid;
}

.pro {
  color: #f90;
}

.starter {
  color: var(--blue);
}

.line {
  height: 1px;
  background-color: #000;
  margin-top: 15px;
  margin-bottom: 15px;
}

.line.black {
  background-color: #000;
  margin-top: 15px;
  margin-bottom: 15px;
}

.line.white {
  background-color: #fff;
}

.price {
  font-size: 29px;
  font-weight: 400;
  position: absolute;
  top: 18px;
  bottom: auto;
  left: auto;
  right: 8%;
}

.per-month {
  font-size: 11px;
}

.bg {
  z-index: 0;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.circle {
  width: 92%;
  height: 80%;
  opacity: .12;
  filter: blur(125px);
  background-color: #7d7dfb;
  border-radius: 100%;
  position: absolute;
  top: 334%;
  left: -315px;
}

.circle.blue {
  width: 50%;
  height: 32%;
  background-color: var(--blue);
  opacity: .16;
  top: 64%;
  bottom: auto;
  left: auto;
  right: 0%;
}

.circle.blue._2 {
  width: 110%;
  height: 103%;
  top: 279%;
  left: 45%;
}

.circle._2 {
  width: 48%;
  height: 57%;
  opacity: .21;
  top: 71%;
  left: 28%;
}

.circle._2._3 {
  background-color: var(--blue);
  top: -9%;
  left: -14%;
}

.circle._2._3._1 {
  bottom: -91%;
}

.circle._2._1 {
  opacity: .22;
  top: auto;
  bottom: -65%;
  left: 0%;
  right: auto;
}

.circle.yellow {
  width: 28%;
  height: 47%;
  opacity: .14;
  background-color: #ffd20a;
  top: 222%;
}

.circle.yellow._2 {
  width: 63%;
  opacity: .09;
  top: 563%;
  left: 58%;
}

.circle.yellow._1 {
  top: 146%;
  left: 86%;
}

.circle._6 {
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.heading {
  margin-top: 10px;
}

.body-2, .page-wrapper {
  overflow: hidden;
}

.heading-2 {
  margin-bottom: 0;
}

.heading-2._1 {
  margin-bottom: 20px;
}

.email-submission-form {
  min-height: 50px;
  min-width: 400px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
}

.email-input {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(104, 104, 104, .14);
  border-radius: 50px;
  margin-bottom: 0;
  padding: 20px;
  font-size: 16px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .08);
}

.email-input::-ms-input-placeholder {
  color: #d4d4d4;
}

.email-input::placeholder {
  color: #d4d4d4;
}

.hero-image {
  max-width: 475px;
}

.blogger-icon {
  max-width: 40px;
}

.star {
  width: 20px;
  height: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.star.black {
  width: 13px;
  height: 17px;
  font-size: 9px;
}

.star-block {
  display: flex;
}

.star-block.blue {
  color: var(--blue);
}

.users-callout {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.feature-callout {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  align-items: center;
  padding-top: 5px;
  font-size: 10px;
  display: flex;
  margin-top: 10px;
}


.hero.section .feature-callout .w-embed {
  opacity: 0.50;
}

.feature-callout._1 {
  color: var(--grey);
}

.feature-callout .text-block {
  line-height: normal;
}

.heart {
  width: 13px;
  height: 17px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.rating {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  align-items: center;
  display: flex;
}

.rating._1 {
  grid-column-gap: 4px;
  grid-row-gap: 0px;
  align-items: center;
}

.user {
  width: 14px;
  height: 19px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.trusted-by-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  margin-top: 40px;
  display: none;
}

.check {
  width: 14px;
  height: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.logo {
  max-width: 118px;
}

.tools-wrapper {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-direction: column;
  display: flex;
}

.laptop-wrapper {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.list-item {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  display: flex;
}

.footer-column-highlight {
  font-size: 20px;
  font-weight: 500;
}

.footer-column-text {
  font-size: 16px;
  font-weight: 300;
}

.medium {
  font-size: 16px;
  font-weight: 500;
}

.paragraph-2 {
  font-size: 18px;
}

.text-block {
  font-size: 13px;
}

.blogger-grid {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  padding-bottom: 20px;
}

.grid-cols-2 {
  grid-template-columns: 1fr 1fr;
}

.heading-3 {
  margin-bottom: 20px;
}

.text-block-2 {
  font-size: 16px;
}

.paragraph-4 {
  font-size: 18px;
}

.text-block-3 {
  font-size: 12px;
}

.image {
  max-width: 16rem;
  padding-bottom: 10px;
}

.paragraph-5 {
  font-size: 18px;
}

.text-block-4 {
  font-size: 12px;
}

.testimonial-section.section {
  margin-bottom: 50px;
  padding-top: 0px;
}

#features .cta.darkbg {
  margin-top: 20px;
}

#pricing .pricing .semibold {
  font-size: inherit;
}

#pricing .pricing .line {
  height: 0px;
}

.logo-grid-container h4 {
  font-size: 16px;
  margin-bottom: 15px;
}

.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}

.logo-image {
  filter: brightness(0);
  opacity: 0.35;
}

.dot-grid {
  --dot-bg: black;
  --dot-color: white;
  --dot-size: 1px;
  --dot-space: 20px;
  background:
    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    var(--dot-color);
}

@media screen and (max-width: 991px) {
  a {
    border-bottom: 1px solid var(--blue);
  }

  a.brand {
    border-bottom: 0px;
  }

  .brand {
    max-width: 125px;
  }

  .section.hero .heading {
    font-size: 30px;
  }

  .logo-grid-container h4 {
    padding: 0px 30px;
  }

  .blogger-wrapper .heading-3 {
    padding: 0px 20px;
  }

  .powerhouse-wrapper h2 {
    padding: 0px 20px;
  }

  .testimonial-section h2 {
    padding: 0px 40px;
  }

  .key-tools-wrapper h2 {
    padding: 0px 40px;
  }



  .logo-grid {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
  }

  .logo-grid .logo-wrapper:last-child {
    grid-column: span 2 / span 2;
  }

  .logo-grid .logo-wrapper:last-child .logo-image {
    padding: 0px 25%;
  }

  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .testimonial-wrapper {
    margin-top: 20px;
  }

  .faq-wrapper {
    width: 100%;
  }

  .cta {
    padding-left: 30px;
    padding-right: 30px;
  }

  .cta-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-wrapper.vert {
    align-items: center;
  }

  .menu-button {
    padding-right: 0px;
  }

  .w-nav-link {
    border-bottom: 1px solid #e5e7eb;
  }

  .menu-button.w--open {
    color: #000;
    background-color: rgba(200, 200, 200, 0);
  }

  .nav-menu {
    background-color: #fff;
  }

  .traffic-sources {
    max-width: 53%;
  }

  .hero-review {
    max-width: 83%;
    bottom: 9%;
  }

  .slide-wrapper {
    width: 42vw;
  }

  .powerhouse-media {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .powerhouse-graph {
    max-width: 67%;
  }

  .powerhouse-laptop {
    top: auto;
    bottom: -23%;
    left: auto;
    right: -11%;
  }

  .author-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .hero-image {
    position: relative;
    right: 2vw;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .testimonial-section.section {
    padding-top: 50px !important;
  }

  .users-callout {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .feature-callout.grey .text-block {
    font-size: 12px;
  }

  .section.hero {
    height: auto;
    padding-top: 120px;
  }

  .container {
    text-align: center;
  }

  .tools {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-wrap: wrap;
  }

  .key-tools {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .key-tool {
    align-items: center;
  }

  .testimonial-wrapper {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .pricing-wrapper {
    grid-column-gap: 31px;
    grid-row-gap: 31px;
    flex-direction: column;
    display: flex;
  }

  .pricing.highlight {
    width: 100%;
    align-items: stretch;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer .image {
    max-width: 125px;
    margin: auto;
  }

  .cta.white {
    align-self: center;
  }

  .cta-wrapper {
    flex-direction: row;
  }

  .blogger-wrapper-info {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: column;
    display: flex;
  }

  .hero-content {
    align-items: center;
  }

  .hero-content-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 30px;
    flex-direction: column-reverse;
    display: flex;
  }

  .blogger-wrapper {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .blogger-media {
    position: relative;
    right: 2rem;
  }

  .powerhouse-wrapper {
    flex-direction: column;
    display: flex;
  }

  .traffic-sources {
    max-width: 38%;
  }

  .hero-review {
    max-width: 66%;
    bottom: -8%;
  }

  .slide-wrapper {
    max-width: none;
  }

  .powerhouse-media {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .powerhouse-graph {
    max-width: 54%;
  }

  .powerhouse-laptop {
    z-index: 0;
    max-width: 144%;
    bottom: -50%;
  }

  .testimonial-content-wrapper {
    min-height: 30vh;
    padding: 25px;
    height: auto;
  }

  .pricing-features {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr;
  }

  .current-users {
    max-width: 357px;
  }

  .heading {
    margin-top: 0;
  }

  .hero-image {
    width: 100%;
    right: auto;
  }

  .feature-callout {
    flex-wrap: wrap;
    justify-content: center;
  }

  .rating {
    text-align: left;
    flex-wrap: wrap;
  }

  .tools-wrapper {
    z-index: 1;
    width: 358px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    position: relative;
  }

  .laptop-wrapper {
    min-height: 230px;
    position: relative;
  }
}

@media screen and (max-width: 479px) {
  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section.hero {
    padding-bottom: 20px;
  }

  .section.compare {
    display: none;
  }

  .section._1 {
    padding-top: 10px;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container.nav {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .bold.highlight {
    text-align: left;
    font-size: 18px;
  }

  .tools {
    flex-direction: column;
  }

  .key-tools {
    flex-direction: column;
    display: flex;
  }

  .key-tool-header {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
  }

  .competitor-module {
    display: flex;
  }

  .faq-question {
    grid-column-gap: 17px;
    grid-row-gap: 17px;
  }

  .faq-answer {
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph {
    padding-left: 15px;
    font-size: 15px;
  }

  .footer {
    flex-direction: column;
    padding: 20px 0px;
    display: flex;
  }

  .social-wrapper {
    justify-content: center;
  }

  .cta {
    width: 100%;
    padding: 15px 0;
  }

  .cta.w--current {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 15px;
  }

  .cta.email {
    text-align: center;
    padding: 15px 20px;
    font-size: 18px;
    display: block;
  }

  .cta.darkbg {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
  }

  .cta._1 {
    padding: 5px 10px;
    width: fit-content;
    margin-left: auto;
  }

  .cta-wrapper {
    width: 100%;
  }

  .cta-wrapper.vert {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .brand.w--current {
    padding-left: 0;
    text-decoration: none;
  }

  .hero-content-wrapper {
    flex-direction: column;
  }

  .testimonial-content {
    height: auto;
    padding: 0;
  }

  .testimonial {
    max-width: none;
  }

  .menu-button {
    display: none;
  }

  .nav-menu-wrapper {
    justify-content: unset;
  }

  .traffic-sources {
    max-width: 52%;
    top: -27%;
  }

  .hero-review {
    max-width: 98%;
    bottom: -23%;
  }

  .slide-nav {
    top: 359px;
  }

  .slide-wrapper {
    width: 94vw;
  }

  .powerhouse-media {
    height: 730px;
  }

  .powerhouse-laptop {
    bottom: 0%;
  }

  .right-arrow-2 {
    justify-content: flex-end;
  }

  .mask-2 {
    height: auto;
  }

  .left-arrow-2 {
    justify-content: flex-start;
  }

  .testimonial-content-wrapper {
    position: static;
  }

  .slider-2 {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .pricing-features {
    flex-direction: column;
    display: flex;
  }

  .current-users {
    max-width: 254px;
  }

  .email-submission-form {
    width: 100%;
    min-width: 300px;
    flex-direction: column;
  }

  .email-input {
    text-align: center;
    font-size: 17px;
    position: static;
  }

  .hero-image {
    max-width: none;
  }

  .star._1 {
    color: var(--dark-blue);
    -webkit-text-stroke-color: #000;
  }

  .users-callout {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-direction: column;
  }

  .feature-callout {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
  }

  .feature-callout.grey {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    -webkit-text-stroke-color: #fff;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding-top: 0;
  }

  .feature-callout._1 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    -webkit-text-stroke-color: #fff;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding-top: 15px;
  }

  .feature-callout._2 {
    padding-bottom: 60px;
  }

  .heart._1 {
    color: var(--dark-blue);
  }

  .rating._1 {
    align-items: center;
  }

  .user._1 {
    color: var(--dark-blue);
  }

  .trusted-by-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "Area"
      "Area"
      "Area";
  }

  .paragraph-2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .heading-3 {
    margin-bottom: 10px;
  }

  .paragraph-3 {
    text-align: left;
    font-size: 16px;
  }

  .text-block-2 {
    font-size: 17px;
  }

  /* .icon-2 {
    display: none;
  } */

  .paragraph-5 {
    font-weight: 400;
  }

  .form-block {
    width: 100%;
    margin-bottom: 5px;
  }

  .paragraph-6 {
    font-size: 16px;
    line-height: 1.4;
  }

  .paragraph-7 {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
  }
}

#w-node-_6797884c-7396-393d-eae3-10f3aadb341b-5f4d3c1d, #w-node-_474074aa-9679-2dd0-dda7-2c803a988d51-5f4d3c1d, #w-node-_0959bd8f-7113-05f7-4d19-a24547cac34e-5f4d3c1d, #w-node-e6e06174-6bff-26c1-9a72-81ad0d4e959c-5f4d3c1d, #w-node-_0c231655-b96f-7a20-781a-b8c0d9c12c9e-5f4d3c1d, #w-node-a3daefcb-15ad-2447-e343-f3452d0828b0-5f4d3c1d, #w-node-_24a465ed-6242-12ba-b37b-a4d9102556d3-5f4d3c1d, #w-node-c877f5e5-d7a1-026b-8a2e-365a286b4dee-5f4d3c1d, #w-node-_2d549d9e-5945-5fd7-85a6-9275fe62f70d-5f4d3c1d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_15befd0e-b885-8d95-44bb-87abe602ff00-5f4d3c1d {
  justify-self: start;
}

#w-node-c5dbe538-dc41-9eba-c4a6-119c02099eaf-5f4d3c1d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d7c63328-fe1c-4a26-c991-ca718a2f3e35-5f4d3c1d {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_3c20ace3-5dac-b6a5-d64c-7de69222211f-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cf5-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cf6-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cf8-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cfa-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cfb-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cfe-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429cff-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d03-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d04-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d07-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d08-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d0b-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d0c-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d10-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d11-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d14-5f4d3c1d, #w-node-d2e990d8-2dde-e007-db8b-b134fc429d15-5f4d3c1d, #w-node-feb7f88e-b245-8641-59a4-f72f77d9f927-5f4d3c1d, #w-node-feb7f88e-b245-8641-59a4-f72f77d9f92a-5f4d3c1d, #w-node-_776f1705-2679-ea34-b64a-598f64ab7348-5f4d3c1d, #w-node-cfaa13ce-8748-0bd2-870b-cf6b15ebcbaf-5f4d3c1d, #w-node-a2a5fd51-f313-c372-359f-8314ae2258b5-5f4d3c1d, #w-node-_5d05a0c3-7337-14a0-a521-506d4bab902f-5f4d3c1d, #w-node-_5d05a0c3-7337-14a0-a521-506d4bab9030-5f4d3c1d, #w-node-_0c73c49a-813d-cdf2-63d7-78aca2eb2c7a-5f4d3c1d, #w-node-_0c73c49a-813d-cdf2-63d7-78aca2eb2c7b-5f4d3c1d, #w-node-b5fa46fe-800a-f845-ad81-441261f0070a-5f4d3c1d, #w-node-aca8c229-4a99-acea-dca1-d40215168657-5f4d3c1d, #w-node-aca8c229-4a99-acea-dca1-d40215168658-5f4d3c1d, #w-node-ada790ea-72ef-08c2-75cd-214a337e11cc-5f4d3c1d, #w-node-ada790ea-72ef-08c2-75cd-214a337e11cd-5f4d3c1d, #w-node-_2392a8ec-e96e-b53b-c946-c2d66f9923d9-5f4d3c1d, #w-node-_2392a8ec-e96e-b53b-c946-c2d66f9923da-5f4d3c1d, #w-node-f27aaefd-0b1d-1c26-24e0-a97ef6882e00-5f4d3c1d, #w-node-_108b4cf4-24d1-3a63-41aa-ee708b12336d-5f4d3c1d, #w-node-_108b4cf4-24d1-3a63-41aa-ee708b12336e-5f4d3c1d, #w-node-_37e5144b-e11c-f854-8ed8-aa9bafceac4c-5f4d3c1d, #w-node-_37e5144b-e11c-f854-8ed8-aa9bafceac4d-5f4d3c1d, #w-node-_042de364-1964-be51-20b9-1f2b624ddb17-5f4d3c1d, #w-node-_9a2fe5e3-faa9-f9bb-e4f3-dc180b7552ea-5f4d3c1d, #w-node-_9a2fe5e3-faa9-f9bb-e4f3-dc180b7552ed-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940d7-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940d8-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940da-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940dc-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940dd-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e0-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e1-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e3-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e5-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e6-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940e9-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940ea-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940ed-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940ee-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f0-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f2-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f3-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f6-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f7-5f4d3c1d, #w-node-_3496b1f8-f4be-a914-e63e-7b5ffc4940f9-5f4d3c1d, #w-node-cdca6fc5-f79d-ae9b-ab7a-bb1d1dc8c887-5f4d3c1d, #w-node-_7f6a5d74-a612-4ba3-bb9d-4f2d715eb478-5f4d3c1d, #w-node-c4575c5a-b4c7-2172-5cae-fc8975365a82-5f4d3c1d, #w-node-cb32314b-b3cc-6bd8-0784-8e4411ba0c67-5f4d3c1d {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 479px) {
  #w-node-_0959bd8f-7113-05f7-4d19-a24547cac34e-5f4d3c1d {
    grid-area: Area;
  }
}

font[color="#F6A903"], font[color="#F6FF00"] {
  color: var(--blue) !important;
}

.theme-bg {
  background-color: #ffffff !important;
  background-image: none !important;
}

.effect-section .white-color {
  color: #000000 !important;
}

.gray-bg {
  background-color: #f9fafb !important;
}

.theme-after:after {
  background-color: var(--blue) !important;
}

.navbar>.container {
  display: block !important;
}

.call-to-action {
  background-color: var(--blue) !important;
  background-image: none !important;
}

.call-to-action font[color="#F6A903"], .call-to-action font[color="#F6FF00"] {
  color: #ffffff !important;
}

.call-to-action .m-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  font-weight: 400 !important;
}

.call-to-action .m-btn .fa-hand-o-right {
  display: none !important;
}

.search-box {
  border-radius: 999px !important;
  margin-right: 5px !important;
}

.search-button, .search-button.btn:hover {
  background-color: var(--blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: .375rem 20px !important;
}

.search-button .spinner-border {
  vertical-align: middle !important;
  margin-right: 5px !important;
}

.btn-success.focus, .btn-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}

.btn-info {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #ffffff !important;
}

#checkButton {
  background-color: var(--blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

.theme-bg-clean {
  background-color: #000000 !important;
}

.head-hover {
  color: var(--blue) !important;
}

a.w-nav-link:hover {
  color: #000000 !important;
}

footer a {
  color: #ffffff !important;
  border-bottom: 0px !important;
}

.m-btn.m-btn-theme2nd {
  background-color: var(--blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 400 !important;
}

.call-to-action .m-btn.m-btn-theme2nd {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  font-weight: 400 !important;
}

.hero-cta {
  padding: 10px 30px !important;
  font-size: 18px !important;
  border-radius: 999px !important;
}

.header-image {
  border-radius: 10px !important;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
  height: 100% !important;
  margin-bottom: 20px;
  padding: 0px !important;
}

.youtube-tutorials-container iframe {
  border-radius: 10px !important;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
}

.shadow-img {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  overflow: hidden;
}


.content-container .hero-image {
  border-radius: 15px;
  width: 100%;
  max-width: unset;
  margin-bottom: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.content-container {
  max-width: 800px;
  margin: 0 auto;
}

.content-container h2:first-of-type {
  margin-top: 0;
}

.content-container h2 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 40px;
  line-height: 30px;
}

.content-container h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 40px;
  line-height: 30px;
}

.content-container h4 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 40px;
  line-height: 30px;
}

.content-container p,
.content-container ul,
.content-container ul li,
.content-container ol,
.content-container ol li {
  margin-top: 20px;
  font-size: 18px;
  line-height: 30px;
}

.content-container ul li, .content-container ol li {
  margin-top: 10px;
}

.content-container a,
.content-container a:hover {
  color: #2C61FF;
  font-weight: 500;
}

.content-container a:hover {
  text-decoration: underline;
}

.content-container .callout {
  background-color: #2C61FF;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.content-container .callout h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
}

.content-container .callout a {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #fff;
  transition: all 0.3s;
}

.content-container .callout a:hover {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .content-container h2 {
    font-size: 20px;
    line-height: 26px;
    text-align: left;
  }

  .content-container h3 {
    font-size: 18px;
    line-height: 24px;
    text-align: left;
  }

  .content-container h4 {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
  }

  .content-container p,
  .content-container ul,
  .content-container ul li {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .content-container .callout {
    flex-direction: column;
    align-items: center;
  }

  .content-container .callout h2 {
    text-align: center;
  }
}


@keyframes moveInCircle {
  0% {
      transform: rotate(0deg);
  }

  50% {
      transform: rotate(180deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
      transform: translateY(-50%);
  }

  50% {
      transform: translateY(50%);
  }

  100% {
      transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
      transform: translateX(-50%) translateY(-10%);
  }

  50% {
      transform: translateX(50%) translateY(10%);
  }

  100% {
      transform: translateX(-50%) translateY(-10%);
  }
}


.gradient-bg svg {
  display: none;
}

.gradient-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
}

.gradient-bg .gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}

.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(circle at center,
      rgba(var(--color1), 0.2) 0,
      rgba(var(--color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: center center;
  animation: moveVertical 15s ease infinite;

  opacity: 1;
}

.gradient-bg .g2 {
  position: absolute;
  background: radial-gradient(circle at center,
      rgba(var(--color2), 0.2) 0,
      rgba(var(--color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 400px);
  animation: moveInCircle 10s reverse infinite;

  opacity: 1;
}

.gradient-bg .g3 {
  position: absolute;
  background: radial-gradient(circle at center,
      rgba(var(--color3), 0.2) 0,
      rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);

  transform-origin: calc(50% + 400px);
  animation: moveInCircle 20s linear infinite;

  opacity: 1;
}

.gradient-bg .g4 {
  position: absolute;
  background: radial-gradient(circle at center,
      rgba(var(--color4), 0.2) 0,
      rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 20s ease infinite;

  opacity: 0.7;
}

.gradient-bg .g5 {
  position: absolute;
  background: radial-gradient(circle at center,
      rgba(var(--color5), 0.2) 0,
      rgba(var(--color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));

  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 10s ease infinite;

  opacity: 1;
}

.starry-background {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

.starry-background #stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    500px 300px #FFF, 1200px 900px #FFF, 300px 1200px #FFF, 1800px 600px #FFF,
    600px 400px #FFF, 1300px 1000px #FFF, 400px 1300px #FFF, 1900px 700px #FFF;
  animation: animStar 50s linear infinite;
}

.starry-background #stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    500px 300px #FFF, 1200px 900px #FFF, 300px 1200px #FFF, 1800px 600px #FFF,
    600px 400px #FFF, 1300px 1000px #FFF, 400px 1300px #FFF, 1900px 700px #FFF;
}

.starry-background #stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    400px 500px #FFF, 1100px 800px #FFF, 1500px 700px #FFF,
    500px 600px #FFF, 1200px 900px #FFF, 1600px 800px #FFF;
  animation: animStar 100s linear infinite;
}

.starry-background #stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    400px 500px #FFF, 1100px 800px #FFF, 1500px 700px #FFF,
    500px 600px #FFF, 1200px 900px #FFF, 1600px 800px #FFF;
}

.starry-background #stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    300px 600px #FFF, 800px 1200px #FFF, 900px 1300px #FFF,
    400px 700px #FFF, 900px 1400px #FFF, 1000px 1500px #FFF;
  animation: animStar 150s linear infinite;
}

.starry-background #stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 
    300px 600px #FFF, 800px 1200px #FFF, 900px 1300px #FFF,
    400px 700px #FFF, 900px 1400px #FFF, 1000px 1500px #FFF;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.card-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-item {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: transform 0.5s, opacity 0.5s, z-index 0.5s, filter 0.5s;
}

.card-item.exiting {
  transform: scale(1.02) translateY(95%) !important;
}