/* ==============================================================
   1. CUSTOM SCROLLBAR DESIGN (For PC & Mobile)
   ============================================================== */
::-webkit-scrollbar { 
    height: 6px; 
    width: 6px; 
}
::-webkit-scrollbar-thumb { 
    background: #888; 
    border-radius: 4px; 
}
::-webkit-scrollbar-track { 
    background: #e5e7eb; 
}
/* Dark Mode Scrollbar */
.dark ::-webkit-scrollbar-track { 
    background: #1f2937; 
}

/* ==============================================================
   2. HIDE SCROLLBAR (Horizontal scroll categories ke liye)
   ============================================================== */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ==============================================================
   3. IMPORTANT ALERTS ANIMATION (Marquee Effect)
   ============================================================== */
.marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite; /* Speed yahan se kam-zyada kar sakte hain */
}
/* Animation Keyframes */
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* Hover karne par news ruk jaye (Optional, user padh sake) */
.marquee:hover span {
    animation-play-state: paused;
}

/* ==============================================================
   4. JOB DETAILS POST PAGE TABLE DESIGN
   ============================================================== */
.job-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 20px; 
}
.job-table th, .job-table td { 
    border: 1px solid #d1d5db; 
    padding: 10px; 
}
/* Dark Mode Table Borders */
.dark .job-table th, .dark .job-table td { 
    border-color: #4b5563; 
}

/* ==============================================================
   5. MOBILE HORIZONTAL CAROUSEL (For Related Posts)
   ============================================================== */
.related-scroll { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
}
.related-scroll > div { 
    scroll-snap-align: start; 
    flex: 0 0 85%; 
}
@media (min-width: 768px) {
    .related-scroll { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        overflow-x: visible; 
    }
    .related-scroll > div { 
        flex: none; 
    }
}