/* 🌓 THEME MASTER VARIABLES */
:root {
    --bg: #0d1117;
    --text: #ffffff;
    --card: #1a1a1a;
    --border: #30363d;
}

/* ⚪️ LIGHT MODE - THE "FORCE" OVERRIDE */
body.light-mode {
    --bg: #ffffff !important;
    --text: #000000 !important;
    --card: #f4f4f4 !important;
    --border: #d0d7de !important;
}

/* 🎨 GLOBAL STYLES */
body { 
    background-color: var(--bg) !important; 
    color: var(--text) !important; 
    transition: background-color 0.3s, color 0.3s; 
    margin: 0;
}

/* 🚀 THE "FORCE" - Ensuring every section and text is visible in Light Mode */
body.light-mode div:not(.theme-switch-wrapper), 
body.light-mode section, 
body.light-mode header, 
body.light-mode footer {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* Forces all headings, paragraphs, lists, and spans to be dark charcoal */
body.light-mode p, 
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode a,
body.light-mode li,
body.light-mode span:not(.slider) {
    color: var(--text) !important;
}

/* Fixes the "Cards" (Our Expertise, Services, etc.) so they look professional on white */
body.light-mode .card, 
body.light-mode .service-card, 
body.light-mode .advantage-card,
body.light-mode .feature-card {
    background-color: #f8f9fa !important; /* A light off-white for cards */
    border: 1px solid #dee2e6 !important;
}
/* 🔘 BUTTON PLACEMENT (FIXED TOP-RIGHT) */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    position: fixed; 
    top: 120px;      /* 👈 Moves it down past the main menu */
    right: 15px;     /* 👈 Keeps it tucked to the side */
    z-index: 10000;  /* 👈 Ensures it stays on top */
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    padding: 8px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px); /* Makes it look modern/glassy */
}

.theme-switch { display: inline-block; height: 24px; position: relative; width: 50px; }
.theme-switch input { display: none; }
.slider { background-color: #30363d; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
.slider:before { background-color: #fff; bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; border-radius: 50%; }
input:checked + .slider { background-color: #f97316; }
input:checked + .slider:before { transform: translateX(26px); }

/* 🌅 LIGHT MODE BACKGROUND OPTIMIZATION */

/* 1. This adds a white 'fog' over your big dark images so text is easy to read */
body.light-mode section[style*="background-image"] {
    position: relative;
}

body.light-mode section[style*="background-image"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7) !important; /* 70% white overlay */
    z-index: 1;
    pointer-events: none;
}

/* 2. This pushes your text and buttons to the front so they don't get 'foggy' */
body.light-mode .container, 
body.light-mode .hero-content, 
body.light-mode .topbar-inner,
body.light-mode .row,
body.light-mode .nav-links {
    position: relative;
    z-index: 5 !important;
}

/* 3. This brightens the actual images slightly */
body.light-mode [style*="background-image"] {
    filter: brightness(1.2) saturate(0.9);
}