/* Add custom CSS styles below */ 

@media only screen and (min-width: 1024px) {
  .main-menu {
    position: relative;  /* يضمن أن القائمة ستكون في السياق الصحيح */
    z-index: 1000; /* تأكيد أعلى قيمة للقائمة الرئيسية */
  }

  .main-menu .sub-menu {
    visibility: hidden;
    position: absolute;
    z-index: 9999;  /* تأكيد أن القائمة المنسدلة تظهر فوق أي عناصر أخرى */
    --tw-translate-y: -0.75rem;
    transform: translate(var(--tw-translate-x), -0.75rem) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-width: 1px;
    border-color: rgba(209, 213, 219, 0.3);
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    opacity: 0;
    --tw-shadow: 5px 10px 30px #2B2D340D;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }


/* التأكد من أن السلايدر لا يغطي القائمة */
.advanced-slider {
  position: relative;
  z-index: 500; /* تأكيد أن السلايدر ليس فوق القائمة */
}


.s-user-menu-trigger {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  border-top-right-radius: 0.375rem;
  border-top-left-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255, 255, 255);
  background-color: rgb(13, 12, 12);

}