@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&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');

:root {
    --primary-color: #7030a0;
}


/* Base Styles */
body {
    font-family: "Space Grotesk", sans-serif;
    scroll-behavior: smooth;
}

.font-body {
    font-family: "Noto Sans", sans-serif;
}

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

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
}

/* Glass Header Effect */
.glass-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Gradient Text */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #7030a0, #4a1d6e);
}

/* Fade In Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for children if needed */
.reveal-delay-100 {
    transition-delay: 0.1s;
}

.reveal-delay-200 {
    transition-delay: 0.2s;
}

.reveal-delay-300 {
    transition-delay: 0.3s;
}

/* Tab Logic */
.tab-content {
    display: none;
}

#tab-courses:checked~.grow #content-courses,
#tab-webinars:checked~.grow #content-webinars,
#tab-placement:checked~.grow #content-placement {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#tab-courses:checked~nav label[for="tab-courses"],
#tab-webinars:checked~nav label[for="tab-webinars"],
#tab-placement:checked~nav label[for="tab-placement"] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* No Scrollbar Utility */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Filled material icons for stars */
.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}