/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--dark-gray);
    color: #eee;
}

.dark-mode header {
    background-color: var(--dark-gray);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode nav ul li a {
    color: #eee;
}

.dark-mode .portfolio {
    background-color: #111;
}

.dark-mode .category {
    background-color: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .category:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.dark-mode .about {
    background-color: #222;
    color: #eee;
}

.dark-mode .contact {
    background-color: #111;
}

.dark-mode .contact-info,
.dark-mode .contact-form {
    background-color: #333;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .contact-form input,
.dark-mode .contact-form textarea {
    background-color: #444;
    border-color: #555;
    color: #eee;
}

.dark-mode .contact-form input::placeholder,
.dark-mode .contact-form textarea::placeholder {
    color: #aaa;
}

.dark-mode footer {
    background-color: #111;
}

.dark-mode .footer-links a,
.dark-mode .footer-contact p {
    color: #aaa;
}

.dark-mode .footer-links a:hover {
    color: #eee;
}

.dark-mode .mode-toggle {
    background-color: #eee;
}

.dark-mode .mode-toggle i {
    color: #333;
}

.dark-mode .toggle-ball {
    background-color: #333;
    transform: translateX(30px);
}

.dark-mode .hamburger span {
    background-color: #eee;
}