/* kundli.click/astrology-api/assets/css/styles-api.css */

/* Global scrollbar styling for API JSON response blocks */
pre::-webkit-scrollbar { 
    height: 8px; 
    width: 8px; 
}
pre::-webkit-scrollbar-track { 
    background: #1e293b; 
    border-radius: 4px; 
}
pre::-webkit-scrollbar-thumb { 
    background: #475569; 
    border-radius: 4px; 
}
pre::-webkit-scrollbar-thumb:hover { 
    background: #64748b; 
}

/* Add any future B2B-specific custom CSS overrides here */

/* kundli.click/astrology-api/styles-api.css */

/* Auto-Scrolling Marquee * /
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 1.5rem;
    /* Creates a gradient fade on the left and right edges * /
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1.5rem;
    min-width: 100%;
    /* Adjust '40s' to change the scroll speed * /
    animation: scroll-x 40s linear infinite;
}

/* Pause scroll on mouse hover for accessibility * /
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes scroll-x {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Enhancing the brand logo cards * /
.brand-logo-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
    width: 160px; /* Fixed width ensures smooth marquee calculation * /
}
.brand-logo-card:hover {
    transform: translateY(-2px);
    border-color: #dc3546;
}
*/

/* kundli.click/astrology-api/styles-api.css */

/* Auto-Scrolling Marquee */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 2rem;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    min-width: 100%;
    animation: scroll-x 40s linear infinite;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes scroll-x {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Image Logo Optimization */
.brand-logo-card {
    width: 180px; /* Fixed width for smooth scrolling */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.brand-logo-card img {
    max-height: 50px; /* Uniform height constraint */
    width: auto;
    object-fit: contain;
    /* Professional B2B look: Grayscale by default, color on hover */
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.brand-logo-card:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.05);
}