:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    background: linear-gradient(120deg, #ffffff 0%, #f8f9fa 100%);
}

body.dark-mode {
    background: linear-gradient(120deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #ffffff;
}

.dark-mode .bg-white {
    background-color: #2d2d2d;
}

.dark-mode .bg-gray-50 {
    background-color: #363636;
}

.dark-mode .text-gray-800 {
    color: #ffffff;
}

.dark-mode .text-gray-700 {
    color: #e0e0e0;
}

.dark-mode .text-gray-600 {
    color: #cccccc;
}

.dark-mode .border-gray-300 {
    border-color: #404040;
}

.dark-mode .bg-gray-100 {
    background-color: #404040;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #363636;
    color: #ffffff;
    border-color: #404040;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #888888;
}

.hero-animation {
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.admin-card:hover {
    transform: scale(1.03);
}

.dept-card:hover {
    transform: translateY(-5px);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #F68909;
}