/* Custom Scrollbox Styles */
.scroll-box {
    width: 100%;
    overflow-y: scroll;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: static;
    z-index: 12;
    text-align: left;
}

.scroll-box ul {
    padding-left: 30px;
}

.scroll-box ul li {
    margin-top: 10px;
}

/* Custom scrollbar styles */
.scroll-box::-webkit-scrollbar {
    width: 10px;
}

.scroll-box::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF9900, rgba(0, 204, 255, 0.8));
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease;
}

/* Show the scrollbar only when the user scrolls */
.scroll-box::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF9900, rgba(0, 204, 255, 1));
}

/* Smooth scrolling */
.scroll-box {
    scroll-behavior: smooth;
}

/* Hide scrollbar when not needed */
.scroll-box::-webkit-scrollbar {
    opacity: 0;
}

.scroll-box:hover::-webkit-scrollbar {
    opacity: 1;
}

@media (max-width: 768px) {
    .scroll-box {
        max-width: 600px !important;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .scroll-box {
        max-width: 360px !important;
        margin: 0 auto;
    }
}