.navbar {
    /* डार्क ओवरले के साथ बैकग्राउंड इमेज ताकि टेक्स्ट साफ़ दिखे */
    background: linear-gradient(rgba(21, 27, 38, 0.7), rgba(21, 27, 38, 0.7)), url('https://images.pexels.com/photos/32237/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid #ffc107;
}
/* Vertical Slideshow Styles */
.vertical-slideshow-container {
    height: 40px; /* एक लाइन के टेक्स्ट के लिए ऊंचाई */
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0;
    display: flex;
}

.slideshow-label {
    background-color: #dc3545;
    color: white;
    padding: 8px 15px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0; /* सुनिश्चित करें कि लेबल सिकुड़े नहीं */
}

.slideshow-content-wrapper {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 15px;
}

.slideshow-content {
    list-style: none;
    padding: 0;
    margin: 0;
    animation: continuous-slide-up 28s linear infinite; /* एनीमेशन की गति (28 सेकंड) */
}

.slideshow-content:hover {
    animation-play-state: paused; /* माउस ले जाने पर एनीमेशन रोकें */
}

.slideshow-content li {
    line-height: 40px; /* कंटेनर की ऊंचाई से मेल खाएं */
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* लंबी सुर्खियों के लिए ... दिखाएं */
}

.slideshow-content a {
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

.slideshow-content a:hover {
    color: #0d6efd;
}

/* Continuous Vertical Scrolling Animation */
@keyframes continuous-slide-up {
    0% {
        transform: translateY(0%);
    }
    100% {
        /* <ul> की आधी ऊंचाई तक स्क्रॉल करें क्योंकि हमने लिस्ट को दोगुना किया है */
        transform: translateY(-50%);
    }
}