:root{
      --brand: rgb(109,60,94); /* #6d3c5e */
    }
    body{ font-optical-sizing:auto;
         --bs-body-font-family: 'Lato', sans-serif; /* Set the font to Lato */
         font-size: 1.10rem;
         line-height: 1.5;
         background-color: #f2eef5;
        
    }
    h1, h2, h3, h4 { color: #fff; }
    .lead { color:#fff; }
    .eyebox {
      border-left: 4px solid var(--brand);
      padding-left: 1rem;
      background: linear-gradient(90deg, rgba(109,60,94,0.06), rgba(109,60,94,0));
      border-radius: .5rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .icon-bullet{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand); display: inline-block; margin-right: .5rem; transform: translateY(-1px);
      left: 0;
      top: 0.4rem;
      background-color: #6d3c5e;  /* mauve or your brand color */
      border-radius: 50%;         /* makes it a circle */
      display: inline-block;
    }
    .section-pad{ padding-top: 2.25rem;
                  padding-bottom: 1.50rem;
                  padding-left: 0;
                  padding-right: 0;
                }
    .card-checklist .card-header{
      background: #fff(109,60,94,.08);
      border-bottom: 1px solid rgba(109,60,94,.15);
      color: var(--brand);
      font-weight: 700;
    }
    .bulletfree ul {
  list-style: none;        /* removes default bullets */
  padding-left: 0;         /* removes extra indentation */
}

.bulletfree li {
  position: relative;
  padding-left: 1.5rem;    /* space for the custom icon */
}


    .small-muted{ color:#6c757d; }
    /* Easy to extract if you want a separate stylesheet later */
    /* Hero */
    .hero{
      position:relative;
      min-height:36vh;
      display:grid;
      place-items:center;
      color:#fff;
      text-align:center
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      /* Eye exam themed image */
      background:url('/mceyeclinic/images/clinic-color-banner.png') center/cover no-repeat;
      filter:brightness(.55)
    }
    .hero .inner{position:relative;z-index:1}

    .btn-purple {
  background-color: rgb(109,60,94);
  border-color: rgb(109,60,94);
  color: #fff;
}

.btn-purple:hover,
.btn-purple:focus {
  background-color: rgb(75, 41, 65);
  border-color: rgb(75, 41, 65);
  color: #fff;
}

.purple {
    color: rgb(109,60,94);
}

.btn-outline-purple {
  border-color: rgb(109,60,94);
  color: rgb(109,60,94);
}

.card-outline-purple {
  border-color: rgb(109,60,94);
}

.btn-outline-purple:hover,
.btn-outline-purple:focus {
  border-color: rgb(75, 41, 65);
  color: rgb(75, 41, 65);
}
/* Breadcrumbs (scoped) */
    .disclaimer-breadcrumbs {
      background: #fff;
      border: 1px solid #eee;
      border-left: 4px solid var(--clinic-purple);
      border-radius: .5rem;
      padding: .5rem .75rem;
      margin-bottom: 1rem;
    }
    .disclaimer-breadcrumbs .breadcrumb { margin: 0; }
    .disclaimer-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: #888; }
    .disclaimer-breadcrumbs a { color: var(--clinic-purple); text-decoration: none; }
    .disclaimer-breadcrumbs a:hover { text-decoration: underline; }

     .accordion-button:not(.collapsed) {
  background-color: rgb(109, 60, 94); /* light purple */
  color: white; /* darker text for contrast */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0rem rgb(109, 60, 94);
}