.breadcrumb-item+.breadcrumb-item::before {
  color: #F58220 !important;
}

:root {
  --primary-color: #271C73;
  --text-color: #fff;
  --heading-color: #271C73;
  --border-color: #ccc;
  --secondary-color: #F58220;
  --bs-primary: #271C73;
  /* deep purple like in your image */
}
.header-button .th-btn{
  background-color: var(--secondary-color);
}
.header-button .th-btn:before {
background-color: #fff;
}

.th-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;
  vertical-align: middle;
  display: inline-block;
  border: none;
  text-transform: uppercase;
  /* text-align: center; */
  background-color: var(--secondary-color);
  color: var(--text-color);
  font-family: var(--title-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  padding: 20.5px 29px;
  box-shadow: 0px 6px 16px rgba(13, 94, 244, 0.24);
  /* border-radius: 5px; */
}

.th-btn:before {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 600%;
  background-color: #0F2239;
  transform: translateX(-50%) translateY(-50%) rotate(60deg);
  z-index: -1;
  transition: 0.7s ease;
}

.header-button .th-btn:before {
  background-color: #fff;
}

.th-btn:hover, .th-btn.active {
color: var(--bs-primary)  !important
}

.th-btn:hover::before, .th-btn.active::before {
height: 560%;
}

.th-btn.white-btn{
background-color: #fff;
color: var(--theme-color);
}
.header-button .th-btn{
  background-color: var(--secondary-color);
}

.header-button a {
  height: auto;
  display: flex
;
  align-items: center;
  gap: 15px;
  margin-left: 0px;
  position: fixed;
  right: -68px;
  top: 400px;
  overflow: hidden;
  z-index: 88888;
  transform: rotate(90deg);
  /* width: fit-content; */
  width: 180px;
}