/* ????? ??????? */
body.light-mode {
    background-color: #f0f0f0;
    color: #222;
}

/* ????? ?????? */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

    body.dark-mode .card,
    body.dark-mode .course-card,
    body.dark-mode .instructor-header {
        background-color: #1e1e1e;
        color: #e0e0e0;
        border-color: #333;
    }

    body.dark-mode .btn,
    body.dark-mode .btn-outline-primary,
    body.dark-mode .btn-outline-secondary {
        border-color: #888;
        color: #eee;
    }

        body.dark-mode .btn:hover {
            background-color: #333;
            color: white;
        }

/* ???? ??? ??????? */
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}