article {
      position: relative;
      background: #fff;
      color: #282d30;
      font-family: 'Mulish', sans-serif;
}

h1, h2, h3, h4 {
      font-family: 'Mulish', sans-serif;
}

section {
      padding: 40px 20px;
}

.headline {
      font-weight: 600;
      font-size: 1.25em;
}

.section-nav {
      margin: 0;
}

.section-nav-trigger,
.section-nav:not(.is-sticky) {
      transform: translateY(-100%);
}

.section-nav:not(.is-sticky) .menu a:not(.btn) {
      color: #000;
}

#hero {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 50px;
      background-color: #e8f6f9;
      background: 
      linear-gradient(
            90deg,
            rgba(153, 235, 246, 0.05) 0%,
            rgba(153, 235, 246, 0.15) 40%,
            rgba(0, 181, 199, 0.2) 100%
      ),
      radial-gradient(circle at 100% 40%,
            rgba(0, 181, 199, 0.55) 0%,
            rgba(0, 181, 199, 0.32) 25%,
            rgba(153, 235, 246, 0.22) 50%,
            rgba(214, 249, 255, 0.15) 70%,
            rgba(255, 255, 255, 0) 100%
      );
}

.logo {
      width: 240px;
      height: auto;
}

#hero h1,
#hero p {
      margin: 0;
      width: 100%;
      max-width: 800px;
}

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

#hero p {
      font-size: 1.7em;
}

.hero-box-wrapper {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      gap: 20px;
}

.hero-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      border: 1px solid #ececec;
      border-radius: 10px;
      padding: 20px;
      background-color: #fff;
      background-image: linear-gradient(180deg, rgba(197, 240, 242, .45) 0%, rgba(197, 240, 242, 0) 20%);
      box-shadow: 0 0 20px rgba(0,0,0,.05);
      font-weight: 600;
}

.hero-box-icon {
      display: flex;
      font-size: 2em;
      align-items: center;
      justify-content: center;
      width: 2em;
      height: 2em;
      border-radius: 50%;
      background: #282d30;
}

.hero-box-icon.brand {
      background-color: #1ac6cd;
}

.hero-box-icon.primary {
      background-color: #b760e4;
}

.hero-box-icon.secondary {
      background-color: #63c5f8;
}

.hero-box-icon.extra {
      background-color: #6681ed;
}

.hero-box-icon i {
      color: #fff;
}

.hero-stat-box-wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;     
      width: 100%;
      min-width: 300px;
      max-width: 1000px;
}

.hero-stat-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 40px;
      width: 100%;
      border: 1px solid #ececec;
      border-radius: 10px;
      padding: 20px;
      background: #282d30;
      color: #fff;
      font-size: 1.4em;
}

.hero-stat-box-number {
      font-size: 2em;
      font-weight: 800;
}

.hero-stat-box-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px 10px;
      font-weight: 800;
}

.hero-stat-box-content small {
      font-weight: 500;
      color: #96acbc;
}

#hero-bg {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      height: 600px;
      width: auto;
      pointer-events: none;
}

#forget {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: center;
      gap: 60px;
}

#forget h2 {
      font-size: 2.8em;
      line-height: 1.2;
}

#forget h2 span {
      text-transform: uppercase;
      font-weight: 900;
      color: #f00;
}

#forget p {
      font-size: 1.2em;
}

#forget small {
      font-size: 1em;
}

#screen {
      margin-bottom: -20px ;
}

#flow {
      background: #f0f4f9;
}

.flow-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
}

.flow-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
}

.flow-arrow {
      width: 200px;
      height: 1px;
      position: relative;
      background: #000;
      transform: translateY(-20px);
}

.flow-arrow::after {
      content: "";
      position: absolute;
      top: 0.5px;
      right: 4px;
      width: 10px;
      height: 10px;
      border-bottom: 1px solid;
      border-right: 1px solid;
      transform: rotate(-45deg);
      transform-origin: 0 0;
}

.flow-item-icon {
      background: #000;
      color: #fff;
      font-size: 1.5em;
      padding: 15px;
      border-radius: 50%;
      height: auto;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
}

.flow-item-description {
      font-weight: 600;
      text-align: center;
}

#interactive {
      display: flex;
      gap: 100px;
      justify-content: space-evenly;
      margin: 100px 0;
}

.interactive-labels {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      max-width: 350px;
      align-items: center;
}

.interactive-label {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      width: 100%;
      padding: 20px;
      background-color: #fff;
      background-image: linear-gradient(180deg, rgba(197, 240, 242, .45) 0%, rgba(197, 240, 242, 0) 20%);
      box-shadow: 0 0 20px rgba(0,0,0,.05);    
      border-radius: 5px;  
      transition: all .2s ease-in-out;
}

.interactive-label:hover,
.interactive-label.active {
      box-shadow: 0 0 0px 3px #1ac6cd;
}

.interactive-label h4 {
      font-size: 1em;
      font-weight: 900;
      font-family: 'Mulish', sans-serif;
}

.interactive-images {
      display: none;
      position: relative;
      flex-wrap: wrap;
      gap: 20px 40px;
      align-items: flex-start;
      width: 600px;
}

.interactive-image {
      position: relative;
      background-color: #fff;
      background-image: linear-gradient(180deg, rgba(197, 240, 242, .35) 0%, rgba(197, 240, 242, 0) 15%);
      box-shadow:4px 4px 10px 11px rgba(96, 101, 204, 0.1);
      padding: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      transition: all .2s ease-in-out;
}

.interactive-image:hover,
.interactive-image.active {
      transform: translateY(-5px);
}

.interactive-image-top {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-25%, -25%);
      z-index: 2;
      width: 60px;
      box-shadow: -10px -10px 50px rgba(0,0,0,.2);
      border-radius: 100%;
}

.interactive-image-bottom {
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translate(25%, 25%);
      z-index: 2;
      width: 60px;
      box-shadow: 10px 10px 50px rgba(0,0,0,.2);
      border-radius: 100%;
}

.interactive-image-ecommerce {
      margin-top: -40px;
}

.interactive-image-simple-goal-management {
      margin-left: 50px;
      padding-left: 30px;
}

.interactive-image-advanced-filters {
      margin-top: -55px;
      margin-left: -10px;
      padding: 20px 60px;
}

.interactive-image-remarketing {
      margin-left: 20px;
      margin-top: -80px;
}

.interactive-image-unlimited-reporting {
      padding: 20px 40px;
}

.interactive-image-sep {
      width: 100%;
}

#cta {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 60px;
      margin: 40px 0 0;
      overflow: hidden;
}

#cta-blur {
      position: absolute;
      top: 65%;
      left: 50%;
      width: 100%;
      height: 80%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at 50% 50%,
            rgba(0, 181, 199, 0.45) 0%,
            rgba(0, 181, 199, 0.32) 25%,
            rgba(153, 235, 246, 0.22) 45%,
            rgba(214, 249, 255, 0.18) 65%,
            rgba(255, 255, 255, 0) 85%
      );
      border-radius: 100%;
      pointer-events: none;
}

.cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px 40px;
      background-color: #000;
      color: #fff;
      font-weight: 500;
      font-size: 1.2em;
      text-decoration: none;
      border-radius: 5px;
      box-shadow: 0 0 10px 10px #1ac6cd;
}

.cta-text {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: center;
}

.cta-text-large {
      font-size: 1.5em;
      font-weight: 600;
}

.cta-text-small {
      font-size: 1.2em;
}

.cta-text-large strong {
      color: #f00;
      font-weight: 600;
      text-transform: uppercase;
}

.cta-box-wrapper {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
}

.cta-box {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 10px 60px 10px 20px;
      width: 100%;
      border-radius: 5px;
      border: 1px solid #ececec;
      background: #fff;
}

.cta-box img {
      width: 50px;
}

#data-control {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 60px;
      background: #f0f4f9;
}

#data-control .section-col {
      display: flex;
      flex-direction: column;
}

#data-control p {
      font-size: 1.2em;
      line-height: 1.2;
      font-weight: 300;
      max-width: 400px;
}

#data-control h2 {
      font-size: 2.4em;
      line-height: 1.2;
      margin: 0;
}

#data-control h3 {
      font-size: 1.6em;
      line-height: 1;
}

#gdpr-control-data {
  margin-top: -100px;
}

#reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
      background: #f0f4f9;
}

.review-box {
      display: flex;
      flex-direction: column;
      gap: 40px;
      width: 100%;
      padding: 40px;
      max-width: 500px;
      background-color: #fff;
      background-image: linear-gradient(180deg, rgba(197, 240, 242, .45) 0%, rgba(197, 240, 242, 0) 20%);
      box-shadow: 0 0 20px rgba(0,0,0,.05);
}

.review-head {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 20px;
}

.quot {
      font-size: 10em;
      height: 55px;
      font-weight: 800;
      color: #1ac6cd;
}

.review-reviewer {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-top: auto;
}

.review-reviewer img {
      width: 80px;
      height: auto;
      aspect-ratio: 1;
      border-radius: 100%;
      border: 4px solid #1ac6cd;
      object-fit: cover;
}

.review-reviewer-name {
      display: flex;
      flex-direction: column;
      gap: 6px;
}

.review {
      font-style: italic;
      line-height: 1.25;
}

#pricing {
      display: flex;
      flex-direction: column;
      align-items: center;
       background: radial-gradient(circle at 50% 50%,
            rgba(0, 181, 199, 0.55) 0%,
            rgba(0, 181, 199, 0.40) 25%,
            rgba(153, 235, 246, 0.35) 45%,
            rgba(214, 249, 255, 0.25) 65%,
            rgba(255, 255, 255, 0) 85%
      );
}

#pricing h2 {
      margin: 15px 0;
      font-size: 2em;
      text-align: center;
}

#pricing p {
      margin: 0;
      font-size: 1.25em;
      max-width: 600px;
      text-align: center;
}

.pricing-table {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 30px auto;
      gap: 30px;
      max-width: 100%;
}

.pricing-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
      width: 300px;
      max-width: calc(100% - 20px);
      padding: 20px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #ececec;
}

.pricing-col h3 {
      display: flex;
      justify-content: center;
      padding: 15px 10px 10px;
      align-items: center;
      width: 100%;
      font-size: 1.5em;
      text-transform: uppercase;
      background: #000;
      color: #fff;
      border-radius: 5px;
      letter-spacing: 4px;
}

.pricing-img {
      display: flex;
      align-items: center;
      height: 40px;
}

.pricing-table-price {
      font-size: 2.5em;
      font-weight: 400;
      margin: 5px 0 20px
}

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

.pricing-table-features {
      display: flex;
      flex-direction: column;
      gap: 1em;
      list-style: none;
      padding: 0;
      margin: 0;
}

.pricing-table-features li {
      position: relative;
      padding-inline-start: 2em;
}

.pricing-table-features li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1.5em;
      height: 1.5em;
      inset-inline-start: 0;
      background-color: currentColor;
      -webkit-mask: url('../images/check-circle.svg') no-repeat center / contain;
      mask:  url('../images/check-circle.svg') no-repeat center / contain;
}

.pricing-col a {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20px 20px 15px;
      margin: 20px 0;
      background: #1ac6cd;
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
      border-radius: 7px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 2px;
}

.pricing-col.pricing-col-highlight {
      background: #101049;
      color: #fff;
      width: 400px;
      padding: 15px 40px 10px;
      border: 2px solid #1ac6cd;
}

.pricing-col.pricing-col-highlight h3 {
      background-color: transparent;
      text-transform: none;
      margin-top: -10px;
      letter-spacing: 1px;
}

.pricing-col.pricing-col-highlight img {
      width: 80px;
}

.pricing-table-plugin-list {
      list-style: none;
      display: flex;
      gap: 20px 30px;
      flex-wrap: wrap;
      padding: 0;
      margin: 20px auto 0;
}

.pricing-table-plugin-list li {
      position: relative;
      background: #171b27;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      box-sizing: revert-layer;
      border: 2px solid #383fa1;
      border-radius: 8px;
}


.pricing-table-plugin-list li:not(:last-child)::after {
      content: "+";
      position: absolute;
      right: -30px;
      width: 20px;
      height: 20px;
      font-size: 1.5em;
}

.pricing-col-highlight .pricing-table-plugin-list li img {
      width: 60px;
}


#faq-section {
      background-color: #f0f4f9;
      padding: 40px;
      margin: 0 0 50px;
}

#faq-section h2 {
      text-align: center;
      font-size: 2em;
}

.faq-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 50px;
}

.faq-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
}

.faq-col input {
      display: none;
}

.faq-wrapper {
      background: #fff;
      color: #000;
      border-radius: 5px;
}

:checked + .faq-wrapper {
      border-color: #1ac6cd;
}

.faq-wrapper label {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
      cursor: pointer;
      font-weight: 600;
      color: #282d30;
}

.faq-trigger {
      position: absolute;
      right: 15px;
      display: block;
      width: 15px;
      height: 15px;
      transform: rotate(45deg);
      transition: all .4s ease;
      border-right: 4px solid #1ac6cd;
      border-bottom: 4px solid #1ac6cd;
}

:checked + .faq-wrapper .faq-trigger {
      transform: rotate(-45deg);
}

.faq-a {
      max-height: 0;
      overflow: hidden;
      transition: all .5s ease;
      padding: 0 40px 0 40px;
      line-height: 1.4;
}

:checked + .faq-wrapper .faq-a {
      padding: 0 40px 40px 40px;
      max-height: 400px;
}


@media (min-width: 992px){
      .desktop-align-right {
            text-align: right;
      }

      section {
            padding: 80px;
      }

      .section-col {
            width: calc(50% - 60px);
      }

      #hero {
            padding-bottom: 140px;
      }

      .hero-box {
            justify-content: flex-start;
            width: auto;
      }

      #hero-bg {
            display: block;
      }

      .hero-stat-box {
            padding: 40px;
            justify-content: flex-start;
            width: auto;
      }

      #forget {
            padding-top: 0;
      }

      .flow-item-icon {
            font-size: 2em;
            padding: 25px;
      }

      #forget small {
            font-size: .9em;
      }

      .cta-box {
            width: auto;
      }

      .cta-text-large {
            font-size: 2.5em;
      }

      .cta-text-small {
            font-size: 1.85em;
      }

      #data-control .section-col {
            align-items: flex-end;
      }

      #data-control h2 {
            font-size: 2.8em;
            line-height: 1.2;
            margin: 0;
      }

      #data-control h3 {
            font-size: 2em;
            line-height: 1;
      }

      #reviews {
            padding: 20px 80px 80px;
      }

      #pricing h2 {
            font-size: 3em;
            margin: 15px 0;
      }

      #pricing p {
            font-size: 1.5em;
      }

      .pricing-table {
            margin: 100px auto;
      }

       #faq-section {
            scroll-margin-top: 100px;
            padding: 40px 120px;
      }

      #faq-section h2 {
            font-size: 3em;
      }

      .faq-col h2 {
            font-size: 3em;
      }

      .faq-col {
            width: calc(50% - 50px);
      }
}

@media (min-width: 1200px){
      #interactive {
         margin: 100px;
      }

      .interactive-images {
            display: flex;
      }
}

.comparison-wrapper {
	display: flex;
      flex-wrap: wrap;
      justify-content: center;
	width: 100%;
	margin: 0 auto;
	gap: 20px;
}

.comparison-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      height: 90px;
      background: #f3f3f7;
}

.comparison-cell {
	padding: 40px;
	background: #f3f3f7;
	width: 90%;
	border-radius: 25px;
}

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

      .comparison-wrapper:not(.wide) {
      	width: 66%;
      }

      .comparison-cell {
            width: calc(50% - 20px);
      }

      .comparison-wrapper.wide .comparison-cell {
            width: calc(25% - 20px);
            padding: 20px;
      }
}

.comparison-cell:nth-child(1),
.comparison-cell:nth-child(1) .comparison-title {
	background: #2c3539;
	color: #fff;
}

.comparison-subtitle {
      display: block;
      position: relative;
	margin: 60px 0 20px 0;
      font-size: 1.3em;
      text-decoration: none;
      color: inherit;
}

.comparison-subtitle sup {
      font-size: .75em;
}

.comparison-elements {
	display: flex;
	flex-direction: column;
	gap: 20px;
      font-family: SpaceGrotesk;
}

.comparison-elements span {
      display: flex;
      align-items: center;
      column-gap: 10px;
      height: 45px;
}

.comparison-elements .fas {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      padding: 10px;
      width: 30px;
      height: 30px;
      background: #ccc;
      color: #fff;
}

.comparison-elements .fa-check {
      background: #4fe480;
}

.comparison-elements .fa-check.basic {
      background: #ffd147;
}

.comparison-elements .fa-times {
      background: #f2280d;
}

.comparison-elements .fa-dollar-sign {
      color: #000;
}

.comparison-elements span.feature-spacer {
      display: none;
}

@media (min-width: 992px){
      .comparison-elements span.feature-spacer {
            display: block;
            width: 100%;
      }
}

#see-in-action, 
#feature-comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#see-in-action h2, 
#feature-comparison h2 {
  font-size: 2em;
  margin: 0 0 20px;
}

@media (min-width: 992px) {
  #see-in-action h2,
  #feature-comparison h2 {
    font-size: 3em;
    margin: 0 0 100px;
  }
}

.youtube-embed {
  width: 90%;
  height: auto;
  aspect-ratio: 16/9;
}