:root {
  --clr-main-blue: #00132a;
  --clr-green: #45f4b0;
}

body {
  font-family: "Space Grotesk", sans-serif !important;
}

[data-kt-sticky-landing-header=on] .landing-header {
  height: 90px;
}

.hero {
  background-color: var( --clr-main-blue );
  & .hero__landing {
    padding-top: 100px;
    margin-top: -100px;
  }
}

.hero-subtitle {
  color: #9C9DA1;
  font-size: 1rem;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.landing-curve {
  color: var( --clr-main-blue );
}

.btn-green {
  background-color: var( --clr-green );
  color: #000;
  font-weight: 700;
  border-color: var(--clr-green);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  & hover {
    background-color: rgba(69, 244, 176, 0.8);
  }
}

.mw-80 {
  max-width: 80%;
}

.mw-85 {
  max-width: 85%;
}

.mw-90 {
  max-width: 90%;
}

.mw-95 {
  max-width: 95%;
}

.landing-dark-bg {
  background-color: var( --clr-main-blue ) !important;
}

.btn-active-success {
  &.active {
    --bs-success: var(--clr-green);
    --bs-success-inverse: #000;
  }
}

.bg-success {
  --bs-success: var(--clr-green);
}

.btn-color-green {
  color: var( --clr-green ) !important;
}

.cta-footer {
  background-color: var( --clr-green );
}

.scrolltop {
  --bs-scrolltop-bg-color: var(--clr-green);
  &:hover {
    --bs-scrolltop-bg-color-hover: var(--clr-main-blue);
  }
}

.pricing-section {
  & .text-primary {
    --bs-text-primary: var(--clr-main-blue);
  }
  & .btn-primary {
    --bs-primary: var(--clr-main-blue);
  }
}