.closing-banner {
  background: #fff;
  padding: 80px 0 100px;
  position: relative;
}

/* Gradient divider with centered heart */
.gradient-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.gradient-divider .line {
  height: 6px;
  flex: 1;
  background: linear-gradient(90deg, #7b3fe4, #e63946, #f28a69);
  border-radius: 50px;
}

.gradient-divider .heart-icon {
  margin: 0 15px;
  font-size: 1.3rem;
  color: #e63946;
}

/* =====================================
   Animated Gradient Divider - No Shadows
   ===================================== */

.gradient-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gradient-divider .line {
  height: 6px;
  flex: 1;
  background: linear-gradient(90deg, #3a0013, #e63946, #f28a69, #3a0013);
  background-size: 300% 100%;
  border-radius: 50px;
  animation: gradientFlow 6s linear infinite;
  opacity: 0.9;
}

/* Heart icon - smooth pulse */
.gradient-divider .heart-icon {
  margin: 0 15px;
  font-size: 1.3rem;
  color: #e63946;
  animation: heartPulse 2.5s ease-in-out infinite;

  --fa-primary-color: #e63946;
  --fa-secondary-color: #f28a69;
  --fa-secondary-opacity: 1;

  transform-origin: center;
}

/* Flowing gradient line */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* Clean pulse effect */
@keyframes heartPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  25% {
    transform: scale(1.3);
    opacity: 1;
  }

  40% {
    transform: scale(1);
    opacity: 0.95;
  }

  60% {
    transform: scale(1.25);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.heartbeat-divider-wrapper {
  height: 60px;
  margin-bottom: -30px;
  position: relative;
  width: 100%;
  z-index: 3;
}

/* Closing bar */
.closing-bar-sanbs {
  border-radius: 50px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.15);
  overflow: hidden;
  padding: 20px 30px;
  position: relative;
  background: linear-gradient(90deg, #9e1b34, #da291c, #f28a69);
}

/* Glass overlay */
.glass-overlay {
  backdrop-filter: blur(14px) brightness(1.05);
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.06),
    rgb(255 255 255 / 0.03)
  );
  border-radius: inherit;
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* Text */
.marquee-text-sanbs {
  color: #f9f6eb!important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 10px rgb(var(--sa-rgb), 0.4);
}

.h6, h6  {
    color: #f9f6eb!important;
}

@keyframes dashPulse {
  0% {
    stroke-dashoffset: 1000;
  }

  50% {
    stroke-dashoffset: 200;
  }

  100% {
    stroke-dashoffset: 1000;
  }
}

@keyframes shimmerText {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes textGlow {
  0%,
  100% {
    text-shadow: 0 0 10px rgb(255 200 200 / 0.2);
  }

  50% {
    text-shadow: 0 0 20px rgb(255 180 180 / 0.4);
  }
}

/* Container positioning */
.heartbeat-embedded {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55; /* adjust overall visibility */
}

.heartbeat-embedded svg {
  width: 100%;
  height: 80px; /* matches your screenshot height */
  overflow: visible;
}

/* The animated ECG line */
.heartbeat-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* stays crisp when scaled */
  stroke-dasharray: 120 24; /* “dash gap” pattern */
  stroke-dashoffset: 0;
  animation:
    hb-dash 6.8s linear infinite,
    /* traveling dash */ hb-pulse 1.4s ease-in-out infinite; /* subtle brightness pulse */
}

/* Traveling dash (moves left → right) */
@keyframes hb-dash {
  to {
    stroke-dashoffset: -1000;
  } /* equals pathLength */
}

/* Soft pulse for a “beat” feel */
@keyframes hb-pulse {
  0%,
  100% {
    opacity: 0.55;
    filter: none;
  }

  50% {
    opacity: 0.9;
    filter: brightness(1.15);
  }
}

/* Prefer-reduced-motion safe guard */
@media (prefers-reduced-motion: reduce) {
  .heartbeat-path {
    animation: none;
  }
}

/* =====================================
   Animated Gradient Divider with Button
   ===================================== */
.gradient-divider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}

/* Flowing gradient lines (same animation as heart version) */
.gradient-divider-btn .line {
  height: 6px;
  flex: 1;
  background: linear-gradient(90deg, #3a0013, #e63946, #f28a69, #3a0013);
  background-size: 300% 100%;
  border-radius: 50px;
  animation: gradientFlow 6s linear infinite;
  opacity: 0.9;
}

/* Center button (replaces heart icon) */
.gradient-divider-btn .sanbs-btn {
  color: #fff;
  font-weight: 600;
  text-transform: normal;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  border: none;
  border-radius: 50px;
  padding: 10px 26px;
  margin: 0 20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgb(158 27 52 / 0.25);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

/* Hover glow and lift */
.gradient-divider-btn .sanbs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(158 27 52 / 0.35);
  background: linear-gradient(90deg, var(--sa), var(--mh));
}

/* Shared keyframes (reuse existing animation) */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}