body {
            font-family: 'Lexend', sans-serif;
        }
        .material-symbols-outlined {
            font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
            opacity: 0;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }.typewriter-text::after {
            content: "|";
            animation: blink 0.7s infinite;
            color: #137fec;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }.rotating-text-wrapper {
            display: inline-flex;
            overflow: hidden;
            vertical-align: bottom;
            height: 1.2em;}
        .rotating-text {
            display: inline-block;
            color: #137fec;
            white-space: nowrap;
            overflow: hidden;
            border-right: 0.1em solid #137fec;animation: 
                typing 3.5s steps(30, end) infinite,
                blink-caret 0.75s step-end infinite;
            width: 0;
        }@keyframes rotateWords {
            0%, 20% { content: "University"; width: 10ch; }
            25%, 45% { content: "College"; width: 7ch; }
            50%, 70% { content: "Future"; width: 6ch; }
            75%, 95% { content: "Career"; width: 6ch; }
            100% { content: "University"; width: 10ch; }
        }.typing-container {
            display: inline-flex;
        }
        .typing-text {
            color: #45ad69;
            position: relative;
        }
        .typing-text::after {
            content: "";
            position: absolute;
            right: -5px;
            top: 5%;
            height: 90%;
            width: 2px;
            background-color: #45ad69;
            animation: blink-caret 0.75s step-end infinite;
        }
        .typing-text::before {
            content: "University";
            animation: words 8s infinite;
        }
        @keyframes words {
            0%, 20% { content: "University"; }
            25%, 45% { content: "College"; }
            50%, 70% { content: "Future"; }
            75%, 100% { content: "Career"; }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #137fec; }
        }@property --num {
          syntax: "<integer>";
          initial-value: 0;
          inherits: false;
        }
        .counter-1 {
            counter-reset: num var(--num);
            animation: count1 2s ease-out forwards;
            animation-delay: 0.5s;
        }
        .counter-1::after {
            content: counter(num);
        }
        @keyframes count1 {
            from { --num: 0; }
            to { --num: 2500; }
        }
        .counter-2 {
            counter-reset: num var(--num);
            animation: count2 2.2s ease-out forwards;
            animation-delay: 0.6s;
        }
        .counter-2::after {
            content: counter(num);
        }
        @keyframes count2 {
            from { --num: 0; }
            to { --num: 15; }
        }
        .counter-3 {
            counter-reset: num var(--num);
            animation: count3 2.5s ease-out forwards;
            animation-delay: 0.7s;
        }
        .counter-3::after {
            content: counter(num);
        }
        @keyframes count3 {
            from { --num: 0; }
            to { --num: 1000000; }
        }.counter-fallback {
            display: none; 
        }
        @supports not (background: paint(something)) {}@keyframes type {
            0% { width: 0; }
            1%, 99% { opacity: 1; }
            100% { opacity: 1; }
        }#tab-ai:checked ~ .tab-content-ai { display: flex; }
        #tab-manual:checked ~ .tab-content-manual { display: flex; }
        #tab-ai:checked ~ .bg-tabs .indicator { transform: translateX(0); }
        #tab-manual:checked ~ .bg-tabs .indicator { transform: translateX(100%); }
        #tab-ai:checked ~ .bg-tabs label[for="tab-ai"] { color: #1e293b; }
        #tab-manual:checked ~ .bg-tabs label[for="tab-manual"] { color: #1e293b; }
        .search-tab-content { display: none; }
        .ai-gradient-text {
            background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .ai-gradient-border {
            background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
            padding: 2px;
            border-radius: 0.75rem;
        }
     
        @keyframes pulseGlow {
            0% {
                box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
                transform: scale(1);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
                transform: scale(1.02);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
                transform: scale(1);
            }
        }

        .blinking-helpline {
            animation: pulseGlow 2s infinite;
            border-radius: 8px;
        }
#btn-grid, #btn-list {
    padding:5px 10px;
}
#about-text p{
    margin: 0 0 0.5em 0;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.3rem !important;
}
.gap-stack-md {
    gap: 1rem;
}
.bg-primary-container\/20 {
    background-color: rgb(220 252 231 / 0.2);
}
.text-on-surface {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.font-headline-lg {
    font-weight: 700;
}
.mt-stack-md {
    margin-top: 1rem;
}
.text-headline-lg {
    font-size: 1.75rem;
    line-height: 2.25rem;
}
.gap-stack-lg {
    gap: 1.5rem;
}
.py-section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.mb-stack-lg {
    margin-bottom: 1.5rem;
}
.text-title-md {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.font-title-md {
    font-weight: 600;
}