/* STEPS CONTAINER */ 

.steps-box {
  position: relative !important;
  overflow: visible !important;
}



.retro-stripes {
  position: absolute !important;
  left: 50% !important;
  top: 62% !important;

  width: 100vw !important;
  max-width: 100vw !important;

  transform: translateX(-50%) !important;
  z-index: 1 !important;
}

.stripe-pink,
.stripe-orange,
.stripe-navy {
  height: 16px !important;
  width: 100vw !important;
}

.stripe-pink {
  background: #f9dce6 !important;
}

.stripe-orange {
  background: #f7a660 !important;
  margin-top: 6px !important;
}

.stripe-navy {
  background: #1f3a5f !important;
  margin-top: 6px !important;
}


.steps-container {
  width: 58vw !important;
  max-width: 1150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff9f2 !important;
  position: relative !important;
  z-index: 10 !important;
}


.steps-title {
  font-size: clamp(44px, 6vw, 78px) !important;
  line-height: 0.9 !important;
  color: #1f3a5f;
  text-shadow: 3px 3px 0 #ee9db7;
  text-align: center;
  white-space: nowrap;
font-family: Broline Script;
 margin-top: 0 !important;
}
.step-title {
    font-family: "Broline Script", cursive !important;
    font-size: 52px;
    line-height: .95;
    color: #1f3a5f;
    text-align: center;
    margin: 10px 0 14px;
}


.step-divider {
  border-left:3px dotted #f7c0d0;
  height: 220px;
  position: relative;
  text-align: center;
  margin: 0 auto;
  max-width: 500px;
}

.step-divider::after {
  content: "\2726";
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    color: #f58bad;
    font-size: 18px;
    background-color: #fff9f2;
}


.steps-divider:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 3px solid #f58bad;
    z-index: 1;
}

.steps-divider-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 420px !important;
  max-width: 80% !important;
  margin: 8px auto 18px !important;
  position: relative !important;
  z-index: 10 !important;
}

.steps-divider-line::before,
.steps-divider-line::after {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  flex: 1 !important;
  background: #f58bad !important;
  border-radius: 999px !important;
}

.steps-divider-line span {
  color: #f58bad !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.step-icon {
 width: 140px !important;
    height: 140px !important;
margin-bottom: 10px !important;
}



.dots-row {
  position: relative !important;
  height: 0 !important;
  overflow: visible !important;
}

.dots-left,
.dots-right {
  position: absolute !important;
  width: 220px !important;
  height: 140px !important;
  z-index: 0 !important;

  background-image: radial-gradient(
    circle,
    rgba(245, 139, 173, 0.45) 2px,
    transparent 2px
  ) !important;

  background-size: 14px 14px !important;
  background-color: transparent !important;
}

.dots-left {
    left: 30px !important;
    bottom: 1px !important;

  mask-image: radial-gradient(
    ellipse at bottom left,
    black 20%,
    transparent 80%
  );

  -webkit-mask-image: radial-gradient(
    ellipse at bottom left,
    black 20%,
    transparent 80%
  );
}

.dots-right {
 right: 40px !important;
    bottom: 5px !important;

  mask-image: radial-gradient(
    ellipse at bottom right,
    black 20%,
    transparent 80%
  );

  -webkit-mask-image: radial-gradient(
    ellipse at bottom right,
    black 20%,
    transparent 80%
  );
}