::-webkit-scrollbar {
    width: 2px !important; /* عرض اسکرول بار */
    height: 2px;
}

/* پس‌زمینه نوار اسکرول */
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

/* ظاهر نوار اسکرول */
::-webkit-scrollbar-thumb {
    background-color: #4caf50; /* رنگ سبز */
    border-radius: 10px;
    border: 2px solid #fff; /* ایجاد خط حاشیه سفید */
}

/* حالت hover برای نوار اسکرول */
::-webkit-scrollbar-thumb:hover {
    background-color: #45a049;
}

* {
    scrollbar-width:thin;
    scrollbar-color: #22B3A1 #f0f0f0;
}
/* انیمیشن محو شدن و پایین رفتن */



.scrollable {
    overflow-y: overlay; /* باعث می‌شود اسکرول روی محتوا بیاید و جابجا نشود */
    scrollbar-width: none; /* برای فایرفاکس */
    -ms-overflow-style: none; /* برای IE و Edge قدیمی */
    
}

/* مخفی کردن scrollbar در Webkit-based مرورگرها مثل Chrome و Safari */
.scrollable::-webkit-scrollbar {
    display: none;
}

/* زمانی که موس روی المان قرار گرفت */
.scrollable:hover {
    scrollbar-width: thin; /* فایرفاکس: باریک ولی قابل مشاهده */
}

/* برای نمایش اسکرول‌بار در Webkit زمانی که موس روی المان است */
.scrollable:hover::-webkit-scrollbar {
    display: block;
    width: 2px !important;
    height: 2px;
}

/* ظاهر اسکرول‌بار در Webkit */
.scrollable:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.scrollable:hover::-webkit-scrollbar-track {
    background-color: transparent;
}