/* GLOBAL */
.btn-primary {
  position: relative;
  overflow: hidden;
  --bs-btn-bg: rgba(18, 48, 73, 1) !important;          /* Background color */
  --bs-btn-border-color: #214C70 !important;  /* Border color */
  
  --bs-btn-hover-bg: rgb(25, 61, 90) !important;     /* Hover states */
  --bs-btn-hover-border-color: rgba(18, 48, 73, 1) !important;
  
  --bs-btn-active-bg: rgba(18, 48, 73, 1) !important;    /* Clicked states */
  --bs-btn-active-border-color: rgba(18, 48, 73, 1) !important;
  
  --bs-btn-disabled-bg: #65717a !important;
  --bs-btn-disabled-border-color: #65717a !important;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    left: 0px;
    top: 28px;
    position: absolute;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6) 0%, transparent 100%);
    opacity: 0.49;
    transition: opacity 0.25s ease, top 0.25s ease;
  }
  &:hover:after {
    top: 28px;
    opacity: 1;
  }
}
.btn-light {
  color: rgba(18, 48, 73, 1);
  &:hover {
    color: rgba(18, 48, 73, 1) !important;
    background-color: white;
  }
}
.btn-outline-light {
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
  }
}
.btn-outline-primary {
  --bs-btn-hover-bg: rgba(33, 72, 104, 0.1) !important;
  --bs-btn-hover-border-color: rgba(18, 48, 73, 1) !important;
  
  --bs-btn-active-bg: rgba(18, 48, 73, 0.3) !important;
  color: #214C70 !important;
  border-color: #214C70 !important;
}

.btn {
  --bs-border-radius: 10px !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
              transform 0.18s ease !important;
}
.btn:hover:not(:disabled) {
  transform: scale(1.04);
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.cta {
  height: 56px;
  font-size: 14px;
}
/* Text links use the brand navy (primary), never the default Bootstrap blue.
   Overriding Bootstrap's link variables recolors bare <a> and their hover state
   (incl. .link-* utilities); the explicit a/a:hover rules below reinforce it.
   Class-based colors like .text-dark / .text-primary / .btn still win, so the
   navbar links, footer text links and buttons keep their own colors. */
:root {
  --bs-link-color: #214C70;
  --bs-link-color-rgb: 33, 76, 112;
  --bs-link-hover-color: #16344e;
  --bs-link-hover-color-rgb: 22, 52, 78;
}
a {
  color: #214C70;
  transition: font-weight 0.15s ease-in-out;
  &:hover {
    color: #16344e;
    font-weight: bold;
    transition: font-weight 0.15s ease-in-out;
  }
}
.practice-tab {
  cursor: pointer;
  color: #4b4e50;
  p { color: #4b4e50; }
  &:hover {
    background-color: rgba(120, 120, 120, 0.1);
  }
  .practice-icon { filter: brightness(0); opacity: 0.5; }
  &.active {
    background-color: #e2e3e5c2;
    border: 1px solid var(--bs-secondary-border-subtle) !important;
    color: black;
    p {
      font-weight: 600;
      color: black !important;
    }
    .practice-icon { filter: brightness(0); opacity: 1; }
  }
}
* {
  font-family: "Source Sans 3", sans-serif;
}
/* NAVBAR */
.nav-bar-container {
  height: 106px;
  .container {
    height: 106px;
    .navbar {
      height: 106px;
      max-width: 1400px;
      .navbar-collapse {
        flex-grow: 0;
      }
      .navbar-brand {
        margin: 0 !important;
      }
    }
  }
}
.book-demo-btn {
  z-index: 2;
  width: 161px;
}
.logo {
  width: 161px;
}
.navbar-top-margin {
  margin-top: 106px;
}
/* HEADER IMAGE */
.image-wrapper, .footer-image-wrapper {
  border-radius: 30px !important;
  overflow: hidden !important;
  position: absolute;
  width: -webkit-fill-available;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  place-self: center; 
  inset: 0;
  height: 1250px;
  max-width: 1400px;
  background-position: right;
  background-position-y: top;
  background-size: cover;
  background-image: url('assets/images/header-bg-1.webp');
  background-repeat: no-repeat;
}
.footer-image-wrapper {
  border-radius: 0px !important;
  border-top-left-radius: 30px !important;
  border-top-right-radius: 30px !important;
  inset: unset;
  top: -30px;
  /* Pin both horizontal edges to the container instead of inheriting
     width: -webkit-fill-available, which Safari mis-sizes — pushing the
     right-anchored background to the device's right edge. With left/right
     at 0 the wrapper stays centered on the footer content in every browser. */
  left: 0;
  right: 0;
  height: 100%;
}
.footer-bg {top: 0px !important}
.image-wrapper::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom, 
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.99) 30%,
    rgba(255,255,255,0.5) 65%,
    rgba(255,255,255,0.2) 90%,
    rgba(255,255,255,0) 100%
  );
  height: 1336px;
  width: 100%;
}
/* footer image */
.footer-image-wrapper::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top, 
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.75) 30%,
    rgba(255,255,255,0.5) 65%,
    rgba(255,255,255,0.2) 90%,
    rgba(255,255,255,0) 100%
  );
  width: 100%;
}
.main-header-image-wrapper {
  .main-lower-header-image {
    width: 100%;
    -webkit-filter: drop-shadow(0px 20px 25px #00000030);
    filter: drop-shadow(0px 20px 25px #00000030);
    top: 10px;
    max-width: 1108px;
    /* Safari does not preserve aspect ratio with height: fit-content on an
       <img> (it falls back to the intrinsic height, stretching it). height:
       auto scales the height proportionally to the constrained width. */
    height: auto;
    position: relative;
    border-radius: 10px;
  }
  .listing-header-image {
    z-index: 3;
    border-radius: 16px;
    position: absolute;
    left: 10%;
    bottom: -56%;
    width: -webkit-fill-available;
    max-width: 580px;
    height: 165px !important;
  }
}
.resource-planning-header-image {
  border-radius: 15px;
  max-width: 606px;
  /* width: 100%; */
  height: 100%;
  /* This is a flex item (the row is display:flex). Without min-width:0, Safari
     refuses to shrink it below the image's intrinsic width, so the column (and
     image) overflow on narrow screens. */
  min-width: 0;
}
/* IMPORTANT: this rule is intentionally NOT nested inside the rule above.
   A nested rule that starts with a bare element selector (`img { }`, no `&`)
   is invalid CSS in Safari < 17.2, so the whole block was silently dropped on
   iOS — leaving the image completely unconstrained. A flat selector is parsed
   by every browser. */
.resource-planning-header-image img {
  border: 3px solid #f5f5f5;
  display: block;
  /* width:auto would render the image at its intrinsic size (capped at 606px),
     overflowing any column narrower than 606px — e.g. on a phone. width:100%
     makes it fill the column (the parent caps that at 606px) and height:auto
     keeps the aspect ratio, on every browser including iOS. */
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}
/* Inline SVG icons (replaces the Bootstrap Icons webfont). Sized to the current
   font-size like the font glyphs were; the small negative vertical-align keeps
   them aligned with adjacent text. Colour comes from fill:currentColor on the svg. */
svg.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.rd-img-wrapper {
  max-width: 867px;
  max-height: 584px;
  z-index: -1;
}
.rd-image {
  width: 100%;
  height: 100%;
  max-height: 876px;
  position: relative;
  top: -60px;
}

/* rocketdrive reveal animation */
:root { --rd-overlap: 25vh; }
.rd-anim-scroll {
  position: relative;
  min-height: calc(100vh + var(--rd-overlap));
}
.rd-anim-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rd-anim-scroll.rd-anim-playing .rd-anim-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 1020;
  background: #fff;
}

.rd-after-anim {
  position: relative;
  z-index: 2;
  margin-top: calc(-1.5 * var(--rd-overlap));
  padding-top: var(--rd-overlap);
}
.rd-anim-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  padding: 0 1rem;
  will-change: opacity, transform;
}
.rd-anim-visual {
  position: relative;
  width: 876px;
  height: 876px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--rd-fit, 1));
  transform-origin: center;
}
.rd-anim-logo {
  position: relative;
  z-index: 5;
  width: 280px;
  max-width: 100%;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
}
.rd-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: rgba(232, 241, 251, 0.25);
  border: 2px solid rgba(213, 227, 240, 1) !important;

  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  will-change: transform, opacity;
}
.rd-circle-1 { width: 450px; height: 450px; }
.rd-circle-2 { width: 674px; height: 674px; }
.rd-circle-3 { width: 876px; height: 876px; }
.rd-anim-scroll.rd-anim-static { height: auto; min-height: auto; }
.rd-anim-scroll.rd-anim-static + .rd-after-anim { margin-top: 0; padding-top: 0; } /* no overlap in the static fallback */
.rd-anim-static .rd-anim-stage { position: static; height: auto; flex-direction: column; gap: 2rem; padding: 4rem 0; }
.rd-anim-static .rd-anim-text { position: static; transform: none; opacity: 1; }
.rd-anim-static .rd-anim-logo { opacity: 1; transform: none; }
.rd-anim-static .rd-circle-1 { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
.rd-anim-static .rd-circle-2 { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
.rd-anim-static .rd-circle-3 { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }

/* GENERAL */
.fit-content {
  width: fit-content;
}
.icon {
  width: 18px;
  height: 18px;
}
.gap-8 {
  gap: 8px;
}
.gap-16 {
  gap: 16px;
}

/* Pain-point speech-bubble carousel */
.speech-bubble {
	position: relative;
	background: white;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
  &.right-aligned {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: unset;
  }
  .linear-gradient {
    height: 100%;
    width: 100%;
    border-radius: 15px;
    position: absolute;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));
  }
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 15px;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -15px;
	margin-bottom: -28px;
}
.speech-bubble.right-aligned:after {
  content: '';
	position: absolute;
	bottom: 0;
  left: calc(100% - 15px);
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: white;
	border-bottom: 0;
	margin-left: -15px;
	margin-bottom: -28px;
  right: 15px;
  border-right: 0;
}
.pain-track {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  will-change: transform;
}
.pain-carousel {
  position: relative;
  overflow: hidden;
  /* fade bubbles out as they leave the top and in as they enter at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
/* TAGLINE */
.rounded-tag {
  background-color: rgb(241, 246, 247);
}
/* Typography */
.text-primary {
  color: #214C70 !important;
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 40px;
}

/* images & backgrounds */
.border-light-blue {
  border: 1px solid rgba(213, 227, 240, 1) !important;
  /* opacity: 1 !important; */
}
.border-dark-blue {
  border-color: rgba(213, 227, 240, 1) !important;
  opacity: 1 !important;
}
.feature-container {
  height: 610px;
  max-width: 572px;
  overflow: hidden;
  width: 100%;
}
.feature-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  /* Fill the fixed-size container without distorting the image. object-fit:
     cover scales it to cover the box while preserving aspect ratio; the
     container's overflow:hidden crops the excess. The previous height:100% +
     width:auto + max-width clamped the width while the height stayed fixed,
     which squeezed wider images. Crop focus (object-position) and zoom anchor
     (transform-origin) are set inline per image from the Strapi settings. */
  object-fit: cover;
}
.feature-logos {
  gap: 16px;
}
.feature-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.feature-logo-divider {
  width: 1px;
  height: 48px;
  background-color: #d5e3f0;
  flex-shrink: 0;
}
/* CONTENT CARDS */
.content-card-image {
  height: 366px;
  object-fit: cover;
}
/* PRICING CARDS */
.pricing-card-active {
  background-color: #214C70;
  color: white;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3) !important;
}
.pricing-card-active h4,
.pricing-card-active p,
.pricing-card-active small,
.pricing-card-active .bi {
  color: white !important;
}
.pricing-card-inactive {
  pointer-events: none;
  box-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.08) !important;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
  }
}
.pricing-card-inactive h4,
.pricing-card-inactive p,
.pricing-card-inactive small,
.pricing-card-inactive .bi {
  color: rgba(33, 76, 112, 1) !important;
}
.pricing-original-amount {
  text-decoration: line-through;
  opacity: 0.45;
  font-size: 2rem;
}
.pricing-amount {
  font-size: 2rem;
  line-height: 1;
}
.pricing-suffix {
  font-size: 0.8rem;
  opacity: 0.75;
}
.pricing-conditions {
  font-size: 0.8rem;
  opacity: 0.8;
}
.pricing-feature-excluded {
  opacity: 0.4;
}
.pricing-badge {
  border: 1px solid rgba(213, 227, 240, 1);
  font-size: 0.75rem;
  white-space: nowrap;
}
.pricing-badge-active {
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.bg-blue-gradient {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(233, 237, 242) 100%);
  &:after {
    position: absolute;
    border-radius: 1rem;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    background: radial-gradient(ellipse at right bottom, rgba(33, 76, 112, 0.5) 0%, rgba(33, 76, 112, 0.1) 50%, rgba(33, 76, 112, 0) 100%);
  }
  &:before {
    position: absolute;
    border-radius: 1rem;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    background: radial-gradient(ellipse at top center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  }
}
.fixed-height-card-1 {
  height: 507px;
}
.offer-img {
  width: 100%;
  float: right;
}
.offer-img-2 {
  position: absolute;
  bottom: -136px;
}
.offer-img-3 {
  position: relative;
  top: 40px;
}
.calc-img {
  right: 0px;
  position: absolute;
  top: 70px;
  max-width: 670px;
  width: -webkit-fill-available;
}
.conditions {
  position: relative;
}
.conditions-img {
  width: 100%;
}
.reporting-img {
  float: right;
  height: 406px;
  width: 747px;
}
.costs-img {
  width: 100%;
  position: absolute !important;
  bottom: 0px;
}
.shadow-light {
  box-shadow: 0 0.2rem 1.75rem rgba(0, 0, 0, 0.1) !important;
}
.shadow-lg-light {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.05) !important;
}
.blue-bg {
  background-image: url('assets/images/header-bg-1.webp');
  background-color: rgba(255, 255, 255, 0.72);
  background-blend-mode: lighten;
  background-position-y: top;
  background-size: cover;
}
.bg-dark-blue {
  background-color: rgba(18, 48, 73, 1);
  background: radial-gradient(ellipse at bottom, rgba(33, 76, 112, 1) 0%, rgba(18, 48, 73, 1) 100%);

}
.calc-img-wrapper {
  width: 100%;
  height: -webkit-fill-available;
}
.footer-card-img {
  position: relative;
  right: -135px;
  bottom: -75px;
  width: 550px;
  max-height: 100%;
  height: 333px;
}
.footer-card {
  height: 350px;
  .rocky-img {
    position: absolute;
    z-index: 1;
    max-height: 400px;
    /* width tracks the height-capped box so the image keeps its aspect ratio;
       without this the width/height attributes would pin the width and stretch it. */
    width: auto;
    height: auto;
    right: 120px;
    top: -85px;
  }
}
.comparison-card-left {
  position: relative;
  z-index: 1;
  margin-right: -1rem;
}
.comparison-card-right {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1400px) {
  .footer-card-img {
    right: -115px;
    bottom: -75px;
  }
  .offer-img {
    width: 75%;
  }
  .offer-img-2 {
    position: absolute;
    bottom: -163px;
  }
  .image-wrapper {
    height: 1250px;
  }
  .image-wrapper:after {
    height: 1250px;
  }
  .footer-image-wrapper:after {
    height: 1325px;
  }
}
@media screen and (max-width: 1200px) {
  .footer-card {
    height: 660px;
    .rocky-img {
      right: 150px;
      top: 230px;
    }
  }
  .footer-card-img {
    position: relative;
    right: -300px;
    bottom: -130px;
    width: 550px;
    height: 333px;
    max-height: 100%;
  }
  .features {
    flex-direction: column;
  }
  .image-wrapper {
    height: 1150px;
  }
  .image-wrapper:after {
    height: 1150px;
  }
  .footer-image-wrapper:after {
    height: 1225px;
  }
  .offer-img-2 {
    position: relative !important;
    bottom: 0px;
  }
  .costs-img {
    position: relative !important;
    bottom: 0px;
  }
}
@media screen and (max-width: 993px) {
  .comparison-card-left {
    margin-top: -1rem;
    margin-right: 0;
  }
  .reporting-img {
    float: unset;
  }
  .footer-card {
    height: 700px;
    .rocky-img {
      right: 70px;
      top: 240px;
    }
  }
  .footer-card-img {
    position: relative;
    right: -160px;
    bottom: -130px;
    width: 550px;
    height: 333px;
  }
  .offer-img {
    width: 50%;
  }
  .image-wrapper {
    height: 1020px;
  }
  .image-wrapper:after {
    height: 1020px;
  }
  .footer-image-wrapper:after {
    height: 1093px;
  }
}
@media screen and (max-width: 768px) {
  .footer-card-img {
    right: -40px;
    bottom: -135px;
  }
  .footer-card {
    .rocky-img {
      height: 300px;
      right: 70px;
      top: 370px;
    }
  }
  .image-wrapper {
    height: 1100px;
  }
  .image-wrapper:after {
    height: 1100px;
  }
  .fixed-height-card-1 {
    height: 390px;
  }
  .footer-image-wrapper:after {
    height: 1162px;
  }
  h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  .feature-container {
    height: 436px;
  }
  .logo {
    width: 130px;
  }
  .book-demo-btn {
    width: auto;
  }
}