.scrolled-header {
  background-color: white !important;
}
.scrolled-header #logo,
.scrolled-header nav a,
.scrolled-header #menu-icon,
.scrolled-header #dropdownButton,
.scrolled-header #dropdown-icon,
.scrolled-header #quote,
.scrolled-header #quote div,
.scrolled-header #globe-icon {
  color: black !important;
  fill: black !important;
  stroke: black !important;
}
.scrolled-header #logo:hover,
.scrolled-header nav a:hover,
.scrolled-header #menu-icon:hover,
.scrolled-header #dropdownButton:hover,
.scrolled-header #dropdown-icon:hover,
.scrolled-header #quote:hover,
.scrolled-header #quote div:hover,
.scrolled-header #globe-icon:hover {
  color: #444 !important;
  fill: #444 !important;
  stroke: #444 !important;
}
.swiper-button-prev {
  direction: rtl;
}

.accordion-item {
  background-color: #f0f8ff;
  overflow: hidden;
  transition: width 0.5s ease-in-out, flex-grow 0.5s ease-in-out,
    max-height 0.5s ease-in-out;
}

/* --- Desktop Specific (>= md: 768px) --- */
@media (min-width: 768px) {
  .writing-mode-vertical-lr {
    writing-mode: vertical-lr;
  }
  .accordion-item:not(.active-desktop) {
    width: 80px;
    flex-shrink: 0;
  }
  .accordion-item.active-desktop {
    width: auto;
    flex-grow: 1;
  }

  /* Collapsed Header Layout: Number top, Text bottom */
  .accordion-item:not(.active-desktop) .collapsed-header {
    justify-content: space-between; /* Push number and text apart */
  }
  /* Hide expanded content in collapsed items */
  .accordion-item:not(.active-desktop) .expanded-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out,
      padding 0.5s ease-in-out, margin 0.5s ease-in-out;
  }
  /* Hide collapsed header in expanded items */
  .accordion-item.active-desktop .collapsed-header {
    display: none;
  }

  /* Expanded Content takes full height and scrolls */
  .accordion-item.active-desktop .expanded-content {
    max-height: 1500px; /* یک مقدار بزرگ برای پوشش محتوا */
    opacity: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Enable scrolling */
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out 0.1s,
      padding 0.5s ease-in-out, margin 0.5s ease-in-out;
    /* Basic scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
  }
  .accordion-item.active-desktop .expanded-content::-webkit-scrollbar {
    width: 6px;
  }
  .accordion-item.active-desktop .expanded-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  .accordion-item.active-desktop .expanded-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
  .accordion-item.active-desktop
    .expanded-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;
  }
}

/* --- Mobile Specific (< md: 768px) --- */
@media (max-width: 767.98px) {
  .accordion-item.active-mobile .expanded-content {
    max-height: 1500px;
    opacity: 1;
  }
  .accordion-item:not(.active-mobile) .expanded-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out,
      padding 0.5s ease-in-out, margin 0.5s ease-in-out;
  }
  .expanded-content {
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out 0.1s,
      padding 0.5s ease-in-out, margin 0.5s ease-in-out;
  }
  .collapsed-header .vertical-text-container {
    display: none;
  }
  /* Hide desktop scrollbar styles on mobile */
  .accordion-item .expanded-content {
    scrollbar-width: none;
  }
  .accordion-item .expanded-content::-webkit-scrollbar {
    display: none;
  }
  .swiper {
    --swiper-navigation-size: 24px;
  }
}