How to change the slash color " / " in breadcrumb. I’ve tried to add color in css, there is no change

<ol class="breadcrumb" style="font-size: 20px;">
   <li class="breadcrumb-item" href="/homepage/index.html">
      Home
   </li>
   <li class="breadcrumb-item">
      Package
   </li>
   <li class="breadcrumb-item">
      <span class="text-danger">Nusa Penida</span>
   </li>
</ol>

.section-details-header{
  min-height: 43px;
  background: ; 
  margin-top: -45px;
}

.section-details-content{
  color:#ffffff;
}
.breadcrumb{
  color:#fff;
 text-align: center;
 justify-content: right;
}

>Solution :

<ol class="breadcrumb" style="font-size: 20px;">
    <li class="breadcrumb-itemsection-details-header" href="/homepage/index.html">
      Home <span style='color:red'>/</span>
    </li>
   <li class="breadcrumb-item">
      Package <span style='color:red'>/</span>
   </li>
   <li class="breadcrumb-item">
      <span class="text-danger">Nusa Penida</span>
   </li>
</ol>

use style or class in same or new li tag with slash.