.bread_menu_item{background: linear-gradient(0.75turn, rgb(0 55 112), rgba(4, 127, 179, 1), rgb(0 55 112));padding:10px 160px 5px;;float: left;width: 100%;}
.menutag{width: 100%;float: left;}
.menutag ul{width: 100%;float: left;display: flex;gap: 10px;}
.menutag ul li{float: left;display: flex;gap: 5px;align-items: center;}
.menutag ul li i{font-size: 20px;color: #FFFFFF;font-style: normal;}
.menutag ul li a{float: left;font-size: 20px;color: #ffffff8a;font-weight: 400;}
.menutag ul li:last-child a{color: #fff;}
.menutag ul li:last-child {font-size: 20px;color: #fff;font-weight: 400;}
.menutag ul li:not(:last-child)::after {
    content: ">";
    margin: 0 8px;
    color: #ffffff;
    font-weight: bold;
  }


/* Define your custom scroller color as a variable */
    :root {
      --scroller-color: #fff; /* Change this to your preferred color */
    }
   
    .menu-container {
      width: 100%;
      overflow: hidden;
      position: relative;
    }
   
    .scrollable-menu {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      white-space: nowrap;
      scrollbar-width: thin; /* For Firefox */
      scrollbar-color: var(--scroller-color) transparent; /* For Firefox */
    }
   
    /* Custom scrollbar for Chrome, Safari, and newer Edge */
    .scrollable-menu::-webkit-scrollbar {
      height: 4px; /* Thin scrollbar */
    }
   
    .scrollable-menu::-webkit-scrollbar-thumb {
      background-color: var(--scroller-color);
      border-radius: 4px;
    }
   
    .scrollable-menu::-webkit-scrollbar-track {
      background: transparent;
    }
   
    .scrollable-menu ul {
      display: inline-flex;
      list-style: none;
      padding: 0;
      margin: 0;
    }
   
    .scrollable-menu li {
      display: inline-block;
      padding: 0;
      margin: 0;
    }
   
    .scrollable-menu a {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s;
    }
   
    .scrollable-menu a:hover,
    .scrollable-menu a.active {
      border-bottom-color: var(--scroller-color);
    }
   
    /* Visual indicator on the right side */
    @media (max-width: 768px) {
      .menu-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20px;
        background: linear-gradient(to right, transparent, var(--scroller-color, rgba(255,255,255,0.3)));
        pointer-events: none;
        opacity: 0.3;
      }
    }
@media screen and (max-width: 1024px){.bread_menu_item{padding: 5px 24px;}}