/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*=== Body ===*/

html {
    scroll-padding-top: 7.25rem; /* This creates space for your sticky nav */
}

/*.description {
  text-wrap: balance
}*/

/*=== Header ===*/
.header__container {
  z-index: 1000 !important;
}
/*=== Hero Sections ===*/
.hero-home {
 background: radial-gradient(91.6% 50% at 50% 50%, #0B1155 0%, #050324 66.98%);
}
/*=== Buttons ===*/
/* -----------------------------------------------------------
   Button hover effects (theme-safe)
   - Outline variants: left→right fill using currentColor
   - Solid variants: subtle "shine" sweep + gentle lift
   - Works with HubSpot CTAs, anchors, buttons, and inputs
   ----------------------------------------------------------- */

#hs_cos_wrapper_widget_1760068901125 .btn-custom-3256523 .cta-button {
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Shared timing + shape (adjust per wrapper if needed) */
.btn-wrapper {
  --btn-speed: 620ms;
  --btn-ease: cubic-bezier(.22,.61,.36,1);
  --btn-radius: 3px;
  /* Optional: text color after an outline fills; remove if theme handles it */
  --btn-on-fill: #fff;
}

/* Base prep for all buttons inside wrappers */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  position: relative;
  border-radius: var(--btn-radius);
  transition:
    color var(--btn-speed) var(--btn-ease),
    border-color var(--btn-speed) var(--btn-ease),
    background-color var(--btn-speed) var(--btn-ease),
    background-size var(--btn-speed) var(--btn-ease),
    filter var(--btn-speed) var(--btn-ease);
}

/* ===========================================================
   OUTLINE VARIANTS  (primary + secondary)
   - Uses currentColor for the sliding fill
   - Keeps your theme's initial border/text colors
   =========================================================== */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]),
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
  /* The gradient is the sweep layer; we don't touch base bg/border */
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
}

/* Hover/focus: slide fill in (leave border-color to theme) */
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-outline-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  background-size: 100% 100%;
  /* If your theme already switches text to a contrasting color, remove this: */
  color: var(--btn-on-fill);
}

/* ===========================================================
   SOLID VARIANTS  (primary + secondary)
   - Keep theme bg/border/text exactly as-is
   - Add a shine overlay (for elements supporting ::after)
   - Inputs get a simple brightness lift fallback
   =========================================================== */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button),
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button) {
  overflow: hidden;
  isolation: isolate; /* contains the shine layer */
}

/* Shine layer (not rendered on inputs) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button)::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges under border radius */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed) var(--btn-ease);
  pointer-events: none;
}

/* Hover/focus: sweep + gentle lift (no color overrides) */
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible {
  filter: brightness(1.05);
}
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-primary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):hover::after,
.btn-wrapper.btn-secondary-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button):focus-visible::after {
  transform: translateX(120%);
}

/* Inputs (solid variants): simple lift only; ::after not supported */
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]),
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]) {
  /* keep theme’s bg/border/text */
}
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-primary-wrapper :is(input[type=submit],input[type=button]):focus-visible,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):hover,
.btn-wrapper.btn-secondary-wrapper :is(input[type=submit],input[type=button]):focus-visible {
  filter: brightness(1.05);
}

/* ===========================================================
   Accessibility niceties
   =========================================================== */
.btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]):focus-visible {
  outline: 2px solid currentColor;  /* uses the variant’s color */
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper :is(.cta_button,.cta-button,[data-hubspot-cta-id],a,button,input[type=submit],input[type=button]) {
    transition: none;
  }
}

/* ===========================================================
   INFO VARIANT — Button + Icon + Underline
   =========================================================== */

/* Base button (target the actual anchor in your wrapper) */
.btn-wrapper.btn-info-wrapper > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;            /* space between text and icon */
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  position: relative;
  overflow: visible;
  border-radius: 0px;
}

/* Icon wrapper (HubSpot uses underscore class) */
.btn-wrapper.btn-info-wrapper .button_icon {
  display: inline-flex;
  line-height: 0;         /* kills stray baseline gaps */
}

/* SVG sizing + color inheritance */
.btn-wrapper.btn-info-wrapper .button_icon svg {
  width: 1.15em;           /* adjust size as needed */
  height: 1.15em;
  display: block;
  fill: currentColor;     /* match text color */
  transition: transform .28s ease; /* for the slide */
}

/* Slide icon slightly right on hover/focus */
.btn-wrapper.btn-info-wrapper > a:is(:hover, :focus-visible) .button_icon svg {
  transform: translateX(3px);    /* tweak to 2–4px to taste */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn-wrapper.btn-info-wrapper > a,
  .btn-wrapper.btn-info-wrapper .button_icon svg {
    transition: none;
  }
}

/*=== Sliders ===*/
.qd-slider .splide__track {
    position: relative; /* Make sure the pseudo-element is positioned relative to this element */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/*=== Bacgrounds ===
.sr-multicol-media.sr-three-col-02 {
  background: radial-gradient(65.6% 43.07% at 50% 50%, rgba(26, 18, 138, 0.36) 0%, rgba(5, 3, 36, 0.14) 89.46%);
  background-position: left center;
  background-size: 50% 100%; Adjust as needed 
  background-repeat: no-repeat;*/
}

/*=== Sr Two Col 02 ===*/
.sr-multicol-media.sr-bg-image .sr-col {
  border-right: none !important;
}

/*=== Margins ===*/
.qd-slider.margin-bottom .heading {
  margin-bottom: 5.375rem;
}

/*=== Forms ===*/
.legal-consent-container a:after {
    background: none !important;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
  margin-left: 0px !important;
  font-size: 0.8rem;
}
input:is([type="radio"], [type="checkbox"]):checked+span:before {
    background-color: transparent !important;
}
/* Robust shine sweep for HubSpot form submit (no width changes) */
.hs_submit .actions {
  position: relative;          /* anchor overlay */
  overflow: hidden;            /* clip the shine */
  /* no display/width here → HubSpot controls sizing */
}

/* Keep theme styles; no radius override */
.hs_submit .actions .hs-button[type="submit"] {
  position: relative;
  z-index: 1;
  transition: filter var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
}

/* Shine layer lives on the wrapper */
.hs_submit .actions::after {
  content: "";
  position: absolute;
  inset: -1px;                 /* cover edges, play nice with button radius */
  /* if your wrapper lacks a radius, this still looks clean due to the fade */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  transition: transform var(--btn-speed, .4s) var(--btn-ease, cubic-bezier(.22,.61,.36,1));
  pointer-events: none;
  z-index: 2;
}

/* Trigger the sweep when the INPUT is hovered/focused */
.hs_submit .actions:has(.hs-button[type="submit"]:hover)::after,
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible)::after {
  transform: translateX(120%);
}

.hs_submit .actions:has(.hs-button[type="submit"]:hover) .hs-button[type="submit"],
.hs_submit .actions:has(.hs-button[type="submit"]:focus-visible) .hs-button[type="submit"] {
  filter: brightness(1.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hs_submit .actions::after {
    transition: none;
    transform: translateX(0);
    opacity: .12;
  }
}

/*=== Badge ===*/
.sr-badge {
    display: inline-block;
    padding: .95rem 1.2rem;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .05em;
    border-radius: 999px;
    margin-bottom: .8rem;
    color: inherit;
    background: 
 color-mix(in srgb, currentColor 12%, transparent);
    border: 1px none
 color-mix(in srgb, currentColor 22%, transparent);
    align-self: flex-start;
    white-space: nowrap;
}