/* ===== THEME BUTTON ===== */
.theme-btn {
    background: none;
    border: 1px solid #111;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    padding: 5px;
}

.theme-btn:hover {
    background: #111;
    color: #fff;
}

.theme-btn svg {
    width: 18px;
    height: 18px;
}

/* ===== DARK MODE ===== */
body.dark {
    color: #f0f0f0;
    background-image: url("https://ettqan.top//img/background 2.png");
}

body.dark header {
    background: rgba(0,0,0,0.85);
    border-bottom: 1px solid #222;
}

body.dark .nav-links a {
    color: #f0f0f0;
}

body.dark .nav-links a:hover {
    color: #aaa;
}

body.dark .nav-links a.active {
    color: #f0f0f0;
    border-bottom-color: #f0f0f0;
}

body.dark .login-btn {
    color: #f0f0f0;
    border-color: #f0f0f0;
}

body.dark .login-btn:hover {
    background: #f0f0f0;
    color: #111;
}

body.dark .mobile-menu {
    background: rgba(0,0,0,0.9);
}

body.dark .mobile-menu a {
    color: #f0f0f0;
    border-bottom-color: #222;
}

body.dark .mobile-menu a.active {
    color: #f0f0f0;
    border-right-color: #f0f0f0;
}

body.dark .service,
body.dark .work-card,
body.dark .about-card {
    background: #111;
    border-color: #222;
    box-shadow: 0 2px 12px rgba(255,255,255,0.03);
}

body.dark .service h3,
body.dark .work-card h3,
body.dark .about-card h3 {
    color: #f0f0f0;
}

body.dark .service p,
body.dark .work-card p,
body.dark .about-card p {
    color: #aaa;
}

body.dark .about-icon svg {
    stroke: #f0f0f0;
}

body.dark footer {
    color: #aaa;
    border-top-color: #222;
}

body.dark footer svg {
    fill: #f0f0f0;
}

body.dark .theme-btn {
    color: #f0f0f0;
    border-color: #f0f0f0;
}

body.dark .theme-btn:hover {
    background: #f0f0f0;
    color: #111;
}

body.dark .burger span {
    background: #f0f0f0;
}

body.dark .hero h1 {
    color: #f0f0f0;
}

body.dark .hero p {
    color: #aaa;
}

body.dark .work-btn {
    background: rgba(255,255,255,0.15);
}

body.dark .work-btn:hover {
    background: #fff;
    color: #111;
}