/* Custom CSS */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #030712;
    /* bgMain */
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    /* slate-800 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #10b981;
    /* accentGreen */
}

/* Ensure body takes up full space for canvas behind */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: #030712;
}

/* Clean up input autofill styles for dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #030712 inset !important;
    -webkit-text-fill-color: white !important;
}

/* Infinite Marquee Slider for Academic Degrees */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    width: 100%;
    -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 {
    display: flex;
    min-width: 100%;
    flex-shrink: 0;
    animation: scroll 30s linear infinite;
}

@media (max-width: 768px) {
    .marquee-content {
        animation: scroll 25s linear infinite;
    }

    .marquee-content-reverse {
        animation: scroll 30s linear infinite;
    }
}

.marquee-content-reverse {
    animation-direction: reverse;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

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