/* Global body styling for fixed header */
body {
    padding-top: 5rem;
}

/* Custom dark scrollbar for body */
body {
    scrollbar-width: thin;
    scrollbar-color: #374151 #1f2937;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #1f2937;
}

body::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}


/* Custom scrollbar that adapts to parent background */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #374151 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}


.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}


/* scrollbar will be hidden but will work */
.no-scrollbar-to-show {
    scrollbar-width: none;
    /* Firefox */
}









@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.2s ease-out;
}