.breadcrumb-sec{
  position: relative; 
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  /* padding: 0 20px;   */
  box-sizing: border-box;
}
 .component.breadcrumb-component{
  margin-top:24px;
  z-index:0;
  margin-bottom: -12px;
} 
.breadcrumb-sec ul {
  list-style: none; 
}

.breadcrumb-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hide the default scrollbar */
    white-space: nowrap;
}
.breadcrumb-list {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  position: relative; 
  display: flex;
  align-items: center;
  padding: 0 15px !important;
  margin-bottom: 0 !important;
  flex-wrap: unset !important; 
  overflow-x: scroll; /* Enable scrolling */
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.breadcrumb-list::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}
.breadcrumb li,
.breadcrumb li a,
.breadcrumb li span {
font-size: 18px;
line-height: 2.375em;
font-weight: normal;
}
.breadcrumb-list .breadcrumb-item {
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;            
  align-items: center;     
  justify-content: center;  
}
.breadcrumb-list .breadcrumb-item:last-child {
	/* padding-right: 40px; */
}
.breadcrumb li a {
  text-decoration: none;
  color: #333333;
}
.breadcrumb li:last-child span{
font-weight: bold;
}
.breadcrumb li.active {
font-weight: bold;
color: #333333;
}
.fontColor .breadcrumb li a {
color: violet;
}
.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
content: var(--bs-breadcrumb-divider, ">");
padding:0 5px;
}
.arrowSlash .breadcrumb-item + .breadcrumb-item::before {
content: var(--bs-breadcrumb-divider, "/");
padding:0 5px;
}
.arrowDivider .breadcrumb-item + .breadcrumb-item::before {
content: var(--bs-breadcrumb-divider, "|");
padding:0 5px;
font-size: 13px;
}
.arrowDivider .breadcrumb{
padding: 10px;
}
.arrowBox.breadcrumb-sec {
border: 1px solid #6F6F6F;
margin-bottom: 0 !important;
}
.arrowBox .breadcrumb-list {
padding: 5px 15px !important;
margin-bottom: 0 !important;
}
.breadcrumb-bg-fill {
background-color: #EBEBEB;
}
.breadcrumb-padding{
	padding: 5px 15px !important;
}
.breadcrumb-bg-fill .breadcrumb-list{
  padding: 5px 15px !important;
}
.arrow-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
}
.left-arrow {
  left: 0;
  cursor: pointer;
  background: transparent linear-gradient(270deg, #f5f5f500 0%, #ffffff 70%) 0%
  0% no-repeat padding-box;
  width: 52px;
  height: 52px;
}
.left-arrow::before{
  content: "";
  background-image: url(../images/left-chevron.svg);
  width: 15px;
  height: 15px;
  top: 18px;
  left: 10px;
  position: absolute;
  background-repeat: no-repeat;
}
.right-arrow {
  right: 0;
  cursor: pointer;
  background: transparent linear-gradient(90deg, #f5f5f500 0%, #ffffff 70%) 0%
  0% no-repeat padding-box;
  width: 52px;
  height: 52px;
}
.right-arrow::after{
  content: "";
  background-image: url(../images/right-chevron.svg);
  width: 15px;
  height: 15px;
  top: 18px;
  right: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.right-arrow-changed::after{
  content: "";
  background-image: url(../images/right-chevron.svg);
  width: 15px;
  height: 15px;
  top: 16px;
  right: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.left-arrow-changed::before{
  content: "";
  background-image: url(../images/left-chevron.svg);
  width: 15px;
  height: 15px;
  top: 14px !important;
  left: 10px;
  position: absolute;
  background-repeat: no-repeat;
}
.hidden {
  display: none;
}
.breadcrum-link:hover{
  text-decoration:underline;
  text-underline-offset:4px;
  }

  .breadcrumb-item+.breadcrumb-item {
    padding-left:0;
  }
  /* Media query for smaller screens */
@media (max-width: 768px) {
  .breadcrumb li,
  .breadcrumb li a,
  .breadcrumb li span {
    font-size: 12px;
  }
   .right-arrow::after{
    content: "";
    background-image: url(../images/right-chevron.svg);
    width: 15px;
    height: 15px;
    top: 10px;
    right: 4px;
    position: absolute;
    background-repeat: no-repeat;
  }
  .left-arrow::before{
    content: "";
    background-image: url(../images/left-chevron.svg);
    width: 15px;
    height: 15px;
    top: 10px;
    left: 10px;
    position: absolute;
    background-repeat: no-repeat;
  }
    .right-arrow-changed::after{
  content: "";
  background-image: url(../images/right-chevron.svg);
  width: 15px;
  height: 15px;
  top: 5px;
  right: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.left-arrow-changed::before{
  content: "";
  background-image: url(../images/left-chevron.svg);
  width: 15px;
  height: 15px;
  top: 5px !important;
  left: 10px;
  position: absolute;
  background-repeat: no-repeat;
}
}
/* Media query for even smaller screens */
@media (max-width: 576px) {
  .breadcrumb {
    padding: 6px 10px 4px !important;
    margin-bottom: 0 !important;
  }
    .right-arrow-changed::after{
  content: "";
  background-image: url(../images/right-chevron.svg);
  width: 15px;
  height: 15px;
  top: 14px;
  right: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.left-arrow-changed::before{
  content: "";
  background-image: url(../images/left-chevron.svg);
  width: 15px;
  height: 15px;
  top: 14px !important;
  left: 10px;
  position: absolute;
  background-repeat: no-repeat;
}

  .right-arrow::after{
    content: "";
    background-image: url(../images/right-chevron.svg);
    width: 15px;
    height: 15px;
    top: 14px;
    right: 4px;
    position: absolute;
    background-repeat: no-repeat;
  }
  .left-arrow::before{
    content: "";
    background-image: url(../images/left-chevron.svg);
    width: 15px;
    height: 15px;
    top: 14px;
    left: 10px;
    position: absolute;
    background-repeat: no-repeat;
  }
  .right-arrow-changed::after{
  content: "";
  background-image: url(../images/right-chevron.svg);
  width: 15px;
  height: 15px;
  top: 14px;
  right: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.left-arrow-changed::before{
  content: "";
  background-image: url(../images/left-chevron.svg);
  width: 15px;
  height: 15px;
  top: 14px !important;
  left: 10px;
  position: absolute;
  background-repeat: no-repeat;
}
}
@media (max-width:767px) {
  .component.breadcrumb-component{
    margin-top:14px;
  }
    .site-color .right-arrow-changed::after,.site-color .left-arrow-changed::before,.site-color .right-arrow::after,.site-color .left-arrow::before {
        top:9px !important
    }
}