/* ================= THEME VARIABLES ================= */

/* LIGHT MODE */
:root {
    --header-bg: linear-gradient(135deg, #0d6efd, #6610f2);
    --body-bg: #ffffff;
    --text-color: #111111;
    --nav-color: #ffffff;
    --hover-color: #ffd700;
    --card-bg: #ffffff;
    --select-bg: rgba(255, 255, 255, 0.12);
    --select-border: rgba(255, 255, 255, 0.3);
}

/* DARK MODE */
body.dark-mode {
    --header-bg: #000000;
    --body-bg: #000000;
    --text-color: #ffffff;
    --nav-color: #ffffff;
    --hover-color: #38bdf8;
    --card-bg: #111111;
    --select-bg: rgba(255, 255, 255, 0.08);
    --select-border: rgba(255, 255, 255, 0.2);
}

/* ================= BODY ================= */

body {
    background: var(--body-bg);
    color: var(--text-color);
    transition: 0.4s ease;
}

/* ================= GLOBAL TEXT ================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
small,
label,
li,
div {
    color: var(--text-color);
    transition: 0.4s ease;
}

/* ================= HEADER ================= */

.header {
    background: var(--header-bg);
    transition: 0.4s ease;
}

/* ================= NAV LINKS ================= */

.nav-link-custom {
    color: var(--nav-color) !important;
}

.nav-link-custom:hover {
    color: var(--hover-color) !important;
}

/* ================= CARD / SECTION ================= */

.card,
section,
.container-box {
    background: var(--card-bg);
    color: var(--text-color);
    transition: 0.4s ease;
}

/* ================= SELECT BOX ================= */

.custom-select {
    background: var(--select-bg);
    color: white;
    border: 1px solid var(--select-border);
}

.custom-select option {
    color: black;
}

.custom-select:hover {
    border-color: var(--hover-color);
}
/* ================= THEME SELECT ================= */

#themeSelect {
    background: var(--select-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--select-border) !important;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: 0.3s ease;
}

/* OPTION TEXT VISIBLE */

#themeSelect option {
    background: #ffffff;
    color: #000000;
    font-weight: 600;
}

/* DARK MODE OPTION FIX */

body.dark-mode #themeSelect option {
    background: #111111;
    color: #ffffff;
}

/* HOVER */

#themeSelect:hover {
    border-color: var(--hover-color) !important;
    color: var(--hover-color) !important;
}

/* ================= PROFILE TEXT FIX ================= */

.name,
.header small {
    color: #ffffff !important;
}

/* DARK MODE */

body.dark-mode .name,
body.dark-mode .header small {
    color: #ffffff !important;
}
/* ================= FOOTER LIGHT MODE ================= */

.footer {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: #ffffff;
    padding: 60px 0 20px;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
}

/* ================= DARK MODE FOOTER ================= */

body.dark-mode .footer {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ================= FOOTER TEXT ================= */

.footer h5,
.footer p,
.footer a,
.footer li,
.footer span {
    color: #ffffff !important;
}

/* ================= DARK MODE TEXT ================= */

body.dark-mode .footer h5,
body.dark-mode .footer p,
body.dark-mode .footer a,
body.dark-mode .footer li,
body.dark-mode .footer span {
    color: #ffffff !important;
}

/* ================= FOOTER LINKS ================= */

.footer a:hover {
    color: #ffd700 !important;
}

/* ================= DARK MODE LINK HOVER ================= */

body.dark-mode .footer a:hover {
    color: #38bdf8 !important;
}

/* ================= FOOTER HR ================= */

.footer hr {
    border-color: rgba(255, 255, 255, 0.3);
}

/* ================= DARK MODE HR ================= */

body.dark-mode .footer hr {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ================= BOTTOM TEXT ================= */

.footer .text-center p {
    color: #e0e0e0 !important;
}

/* ================= DARK MODE BOTTOM TEXT ================= */

body.dark-mode .footer .text-center p {
    color: #cccccc !important;
}

/* ================= CONTACT PAGE DARK MODE ================= */

body.dark-mode .section {
    background: #000000 !important;
    color: #ffffff !important;
}

/* MAIN CARD */

body.dark-mode .project-card,
body.dark-mode .contact-card,
body.dark-mode .card-glass {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.05);
}

/* HEADINGS */

body.dark-mode h2,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .company-name,
body.dark-mode .role {
    color: #ffffff !important;
}

/* PARAGRAPH */

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
    color: #f1f1f1 !important;
}

/* LINKS */

body.dark-mode a,
body.dark-mode .contact-link {
    color: #38bdf8 !important;
}

/* BUTTON */

body.dark-mode .more-btn {
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
}

body.dark-mode .more-btn:hover {
    color: #ffffff !important;
}

/* BACK BUTTON */

body.dark-mode .fixed-back-btn {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    background: transparent !important;
}

body.dark-mode .fixed-back-btn:hover {
    background: #38bdf8 !important;
    color: #000000 !important;
}

/* ICON */

body.dark-mode .contact-icon {
    color: #38bdf8 !important;
}

/* INPUT FIX */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

/* =========================================================
   FREELANCE PAGE DARK THEME
========================================================= */

body.dark-mode .freelance-section {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ================= HEADINGS ================= */

body.dark-mode .freelance-section h1,
body.dark-mode .freelance-section h2,
body.dark-mode .freelance-section h3,
body.dark-mode .freelance-section h4,
body.dark-mode .freelance-section h5,
body.dark-mode .freelance-section h6 {
    color: #ffffff !important;
}

/* ================= TEXT ================= */

body.dark-mode .freelance-section p,
body.dark-mode .freelance-section span,
body.dark-mode .freelance-section div,
body.dark-mode .freelance-section li {
    color: #f1f1f1 !important;
}

/* ================= LINKS ================= */

body.dark-mode .freelance-section a {
    color: #38bdf8 !important;
}

/* ================= SERVICE CARDS ================= */

body.dark-mode .service-card {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.05);
}

body.dark-mode .service-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.25);
}

/* ================= ADVANCED CARDS ================= */

body.dark-mode .adv-card {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

body.dark-mode .adv-card:hover {
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.2);
}

/* ================= STEP CARDS ================= */

body.dark-mode .step-card {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

/* ================= DETAIL BOX ================= */

body.dark-mode .detail-box {
    background: #111111 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

/* ================= BUTTONS ================= */

body.dark-mode .btn-main,
body.dark-mode .fixed-cta-btn {
    background: #111111 !important;
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
}

body.dark-mode .btn-main:hover,
body.dark-mode .fixed-cta-btn:hover {
    background: #38bdf8 !important;
    color: #000000 !important;
}

/* ================= ACTIVE CARD ================= */

body.dark-mode .active-card {
    border: 2px solid #38bdf8 !important;
}

/* ================= CLIENT SECTION ================= */

body.dark-mode .client-section {
    color: #ffffff !important;
}

/* ================= BACK BUTTON ================= */

body.dark-mode .fixed-back-btn {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    background: transparent !important;
}

body.dark-mode .fixed-back-btn:hover {
    background: #38bdf8 !important;
    color: #000000 !important;
}
/* ================= LANGUAGE SELECT ================= */

#languageSelect {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px;
    font-weight: 600;
}

/* OPTIONS */

#languageSelect option {
    background: #ffffff;
    color: #000000;
}

/* ================= DARK MODE ================= */

body.dark-mode #languageSelect {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

/* DARK MODE OPTIONS */

body.dark-mode #languageSelect option {
    background: #111111 !important;
    color: #ffffff !important;
}