.panchang-card {
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff8e8;
    border: 1px solid #e5c46a;
}

/* सिंगल लाइन ट्रैक */
.panchang-marquee {
    width: 100%;
    height: 38px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.panchang-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 80px; /* दोनों कॉपी के बीच का गैप */
    font-size: 13px;
    line-height: 38px;
    color: #57320f;
}

.panchang-item b {
    color: #7b3f20;
    font-weight: 700;
}
/* ---------- HEADER ---------- */

.panchang-title {
    height: 32px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    background: linear-gradient(
        90deg,
        #7b3f20,
        #a95722
    );

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* ---------- MARQUEE AREA ---------- */




/* ---------- MOVING TRACK ---------- */

.panchang-track {
    display: flex;
    align-items: center;

    width: max-content;
    min-width: max-content;

    white-space: nowrap;

    will-change: transform;

    animation-name: panchang-marquee-scroll;
    animation-duration: 45s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}



/* ---------- SMOOTH LOOP ---------- */

@keyframes panchang-marquee-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* ---------- PAUSE ON HOVER ---------- */

.panchang-card:hover .panchang-track {
    animation-play-state: paused;
}


/* ---------- MOBILE ---------- */

@media (max-width: 576px) {

    .panchang-card {
        margin: 10px 0;
        border-radius: 8px;
    }

    .panchang-title {
        height: 30px;
        font-size: 11px;
        padding: 0 10px;
    }

    .panchang-marquee {
        height: 34px;
    }

    .panchang-item {
        font-size: 11px;
        line-height: 34px;

        padding-left: 25px;
        padding-right: 80px;
    }

}


/* ---------- REDUCE MOTION ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {

    .panchang-track {
        animation: none;
    }

}