.elementor-13 .elementor-element.elementor-element-bb086b9{--display:flex;--margin-top:61px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-13 .elementor-element.elementor-element-bb086b9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-13 .elementor-element.elementor-element-05b6681{--spacer-size:62px;}.elementor-13 .elementor-element.elementor-element-2656933{width:100%;max-width:100%;}.elementor-13 .elementor-element.elementor-element-2656933 > .elementor-widget-container{margin:-290px 0px -303px 0px;}.elementor-13 .elementor-element.elementor-element-2656933.elementor-element{--align-self:center;}.elementor-13 .elementor-element.elementor-element-faa5264{--spacer-size:155px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-13 .elementor-element.elementor-element-eb49101{text-align:center;font-family:"DM Sans", Sans-serif;font-size:18px;font-weight:400;color:var( --e-global-color-accent );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13 .elementor-element.elementor-element-06b716d .elementor-button{background-color:var( --e-global-color-primary );font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:500;}body.elementor-page-13:not(.elementor-motion-effects-element-type-background), body.elementor-page-13 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-bb086b9{--width:100%;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-bb086b9{--min-height:42px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}}/* Start custom CSS for html, class: .elementor-element-2656933 *//* Whitlock blue button */
#trackerForm #check{
  background: #2857a4 !important;   /* Whitlock blue */
  color: #fff !important;            /* white label */
  border: 1px solid #2857a4 !important;
  box-shadow: 0 8px 20px rgba(40,87,164,.20);
}
#trackerForm #check:hover{ filter: brightness(1.05); }
#trackerForm #check:active{ transform: translateY(1px) scale(.99); }

/* Add a border to the main container */
.card{
  border: 2px solid #2857a4;         /* Whitlock blue border */
  border-radius: 14px;               /* keep your rounded look */
}

/* ==== DOT AT PROGRESS END (pulsing, not moving) ==== */
.bar{
  --bar-h: 16px;              /* adjust 14–20px to taste */
  position: relative;
  height: var(--bar-h);
  overflow: hidden;
}

/* keep your existing sheen/pulse on the fill */
.bar > span{
  position: relative;
  background: linear-gradient(90deg, var(--brand), #3f8cff);
  background-size: 200% 100%;
  animation:
    barFlow 2.2s linear infinite,
    barPulse 1.2s ease-in-out infinite;
}

/* dot sits at the right edge of the filled span and pulses */
.bar > span::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;                               /* anchor at end of the fill */
  transform: translate(-50%, -50%) scale(1);
  width:  calc(var(--bar-h) - 2px);
  height: calc(var(--bar-h) - 2px);
  border-radius: 50%;
  background: #fff;                         /* white center for contrast */
  border: 2px solid var(--brand);           /* Whitlock blue ring */
  box-shadow:
    0 0 0 3px rgba(40,87,164,.18),
    0 0 12px rgba(63,140,255,.35);
  animation: dotPulse 1.1s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, box-shadow;
}

/* stronger breathing effect on the bar (optional) */
@keyframes barPulse {
  0%,100% { filter: brightness(1); transform: scaleY(1); box-shadow: none; }
  50%     { filter: brightness(1.22); transform: scaleY(1.06);
            box-shadow: inset 0 0 12px rgba(40,87,164,.28); }
}

/* sheen across the fill (as before) */
@keyframes barFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* dot pulses in place at the end of the progress */
@keyframes dotPulse {
  0%,100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 8px rgba(63,140,255,.25); }
  50%     { transform: translate(-50%, -50%) scale(1.28); box-shadow: 0 0 18px rgba(63,140,255,.55); }
}


/* Progressive sweeping ring spinner (big & clear) */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.loading{
  display: none;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;                 /* bigger label */
  text-align: center;
  letter-spacing: .2px;
  --load-size: 44px;               /* spinner size */
  --ring-thickness: 6px;           /* ring thickness */
}

.loading::before{
  content: "";
  display: inline-block;
  width: var(--load-size);
  height: var(--load-size);
  margin-right: 12px;
  border-radius: 50%;
  vertical-align: -8px;

  /* track + fill in one layer: 0→--angle is brand, rest is faint track */
  background: conic-gradient(
    var(--brand) 0deg,
    var(--brand) var(--angle),
    rgba(40,87,164,.22) var(--angle),
    rgba(40,87,164,.22) 360deg
  );

  /* cut a hole to make it a ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 0);

  /* one full sweep per cycle = “progressive rotation to a complete turn” */
  animation: sweep 1.2s linear infinite;
}

@keyframes sweep {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .loading::before{ animation: none; background: rgba(40,87,164,.22); }
}/* End custom CSS */