:root {

   --khdarkpink: #C52DCD ;
   --kh-pink:#E59BDC;
   --khpink-filter: brightness(0) saturate(100%) invert(61%) sepia(40%) saturate(3542%) hue-rotate(261deg) brightness(92%) contrast(84%);
   --khlightpink: #F9DCF7;
   --khdarkpurple: #3F3FAA;
  --khpurple-filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(6095%) hue-rotate(212deg) brightness(93%) contrast(98%);
   --khlightpurple: #C8C8EA;
   --khorange: #FF8531;
  --khorange-filter: brightness(0) saturate(100%) invert(66%) sepia(56%) saturate(3217%) hue-rotate(337deg) brightness(102%) contrast(100%);
  --khyellow: #FFC301;
  --khyellow-filter: brightness(0) saturate(100%) invert(65%) sepia(83%) saturate(540%) hue-rotate(359deg) brightness(104%) contrast(102%);
  --khcoral: #FF5A57;
  --khcoral-filter: brightness(0) saturate(100%) invert(41%) sepia(80%) saturate(924%) hue-rotate(323deg) brightness(102%) contrast(100%);
  --khlightteal: #C0EAE9;
  --khdarkteal: #0E7C96;
  --khgrayblue:#1a3656;
  --khdarkteal-filter:brightness(0) saturate(100%) invert(30%) sepia(85%) saturate(980%) hue-rotate(157deg) brightness(99%) contrast(89%);
  --darkteal: var(--khdarkteal);

  /*--Highight colors--*/
  --cream: #FAF8F5;
  --lightblue: aliceblue;
 }
.khpink-filter{ filter:var(--khpink-filter)}
.khpurple-filter {
  filter: var(--khpurple-filter)
}
.khyellow-filter {
  filter: var(--khyellow-filter)
}
.khorange-filter {
  filter: var(--khorange-filter)
}
.khcoral-filter {
  filter: var(--khcoral-filter)
}
.khdarkteal-filter {
  filter: var(--khdarkteal-filter)
}
.khdarkpink{
  color:var(--khdarkpink);
}
/* h3{
  margin-bottom: 1.5rem;
} */

#phone {
  background: #003d5b;
  color: #fff;
  padding: .5rem 2%;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200
}
#phone a {
  color: #fff;
  font-weight: 500
}
main{
  background-color: white;
  z-index: 1;
}
 #page-title {
      background: var(--khlightgray);
      padding-left: 6%;
      padding-right: 6%

 }
.container-fluid {
  padding-left: 10%;
  padding-right: 10%
}
@media screen and (max-width: 2200px) {
  .container-fluid {
    padding-left: 8%;
    padding-right: 8%
  }
}
@media screen and (max-width: 1980px) {
  .container-fluid {
    padding-left: 6%;
    padding-right: 6%
  }
}
@media screen and (max-width: 1595px) {
  .container-fluid {
    padding-left: 4%;
    padding-right: 4%
  }
}
footer{
  z-index: -1;
}
ol {
  counter-reset: steps-counter;
  list-style: none;
  padding-left: 40px;
  margin: 0 0 0 0.5rem;
}

ol li {
  padding: .5rem 0;
  counter-increment: steps-counter;
  position: relative;
  font-size: 1.1rem;
}

ol li::before {
  content: counter(steps-counter);
  color: white;
  position: absolute;
  --size: 30px;
  left: calc(-1 * var(--size) - 15px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: .5rem;
  background: var(--khblue);
  border-radius: 50%;
  text-align: center;
  font-weight: 600;

}
.btn-khpink{
  background-color: var(--khpink);
  border-color: var(--khpink);
  color:var(--khnavy);
  &:hover{
    background-color: var(--khnavy);
      border-color: var(--khnavy);
  }
}