/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&family=Noto+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #00c7b6;
    border-radius: 10px;
}

/* Hero Pattern for Login Page */
.hero-pattern {
    background-color: #0f172a;
    background-image: radial-gradient(circle at 2px 2px, rgba(37, 99, 235, 0.2) 1px, transparent 0);
    background-size: 32px 32px;
}

/* Hover effects */
.course-card:hover .enroll-overlay {
    opacity: 1;
    transform: translateY(0);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.active-cat {
    background-color: #e8f2f2;
    color: #0f1a1a;
    border-left: 4px solid #22c3c3;
}