/* =====================================================
   THEME CONTROL: FINAL PRODUCTION CSS (DUAL-MODE)
===================================================== */

/* --- DARK THEME (Preserved) --- */
[data-theme="dark"] body {
    background-color: #000 !important;
    color: #fff !important;
}

/* --- LIGHT THEME OVERRIDES --- */
[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #121212 !important;
}

/* 1. HEADER & NAVIGATION - LIGHT MODE */
[data-theme="light"] .header,
[data-theme="light"] .navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .nav-link,
[data-theme="light"] .navbar-nav>li>a {
    color: #000000 !important;
    /* Force Black Text for Nav links */
}

/* Logo Color - Original (No CSS filters) */
.navbar-brand img,
.logo img {
    filter: none !important;
}

/* Theme Toggle Button Fix - Black Sun Icon */
[data-theme="light"] #theme-toggle .sun-icon svg {
    fill: #000000 !important;
}

/* 2. MEGA MENU & SIDEBAR FIXES - White background & Black content */
[data-theme="light"] .expertise-mega-menu,
[data-theme="light"] .hire-mega-menu {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* Remove Black Sidebar Background and force black text/icons */
[data-theme="light"] .expertise-sidebar,
[data-theme="light"] .hire-sidebar,
[data-theme="light"] .expertise-category-card,
[data-theme="light"] .hire-category-card {
    background-color: transparent !important;
    background: none !important;
}

[data-theme="light"] .expertise-category-card h3,
[data-theme="light"] .expertise-category-card p,
[data-theme="light"] .hire-category-card h3,
[data-theme="light"] .hire-category-card p,
[data-theme="light"] .menu-title,
[data-theme="light"] .menu-child,
[data-theme="light"] .menu-group h6,
[data-theme="light"] .expertise-header h3,
[data-theme="light"] .expertise-header p {
    color: #000000 !important;
}

[data-theme="light"] .nav-link svg,
[data-theme="light"] .arrow-icon svg,
[data-theme="light"] .expertise-service-icon svg,
[data-theme="light"] .dropdown-icon svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* 3. HERO SECTION - Dark Image with White Content */
[data-theme="light"] .sectionOneHeroNew {
    background-image: url('https://webshark.b-cdn.net/img/newecom/service-img-5.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

[data-theme="light"] .sectionOneHeroNew h1,
[data-theme="light"] .sectionOneHeroNew .description,
[data-theme="light"] .sectionOneHeroNew .pointers li,
[data-theme="light"] .sectionOneHeroNew .topbanner-sub1,
[data-theme="light"] .sectionOneHeroNew .topbanner-sub2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

[data-theme="light"] .marquee-button .label {
    color: #ffffff !important;
}

[data-theme="light"] .marquee-button:hover {
    background-color: #4093D0 !important;
    /* Reverts to Blue on Hover */
}


[data-theme="light"] .featured-work-slider .card-news {
    background-color: #ffffff !important;
}



/* 9. FOOTER - Stay Dark exactly like Default */
[data-theme="light"] .tw-footer {
    background-color: #000000 !important;
}

[data-theme="light"] .tw-footer * {
    color: #ffffff !important;
}

/* =====================================================
   HEADER MEGA MENU - LIGHT MODE CONTENT FIXES
===================================================== */

/* 1. Force the Hire Steps Sidebar/Right Panel to be Black on White */
[data-theme="light"] .expertise-featured,
[data-theme="light"] .hire-featured-static {
    background-color: transparent !important;
    background: none !important;
}

/* 2. Style Heading text (Featured Portfolio, HIRE IN 4 SIMPLE STEPS) */
[data-theme="light"] .expertise-featured h3,
[data-theme="light"] .hire-featured-static h3,
[data-theme="light"] .expertise-header h3 {
    color: #000000 !important;
    /* Force black for headings */
    font-weight: 700 !important;
}

/* 3. Style Paragraph descriptions and step labels */
[data-theme="light"] .expertise-featured p,
[data-theme="light"] .hire-step-item span,
[data-theme="light"] .expertise-header p {
    color: #000000 !important;
    /* High contrast black text */
    opacity: 1 !important;
}

/* 4. Fix Checkmark Icons in Hire Steps */
[data-theme="light"] .hire-step-item svg path {
    stroke: #4590C7 !important;
    /* Maintain brand blue for checks */
}

/* 5. Header Dynamic Titles (e.g., "Hire Frontend Developers", "Website Development") */
[data-theme="light"] .expertise-header h3 {
    color: #000000 !important;
}


/* 7. Dropdown Items Text (React Developers, Next.js Developers, etc.) */
[data-theme="light"] .expertise-service-item h4,
[data-theme="light"] .expertise-service-item p {
    color: #000000 !important;
}

/* =====================================================
   PORTFOLIO MEGA MENU - LIGHT MODE FIXES
===================================================== */

/* 1. Main Container: White Background & Full Height */
[data-theme="light"] .portfolio-mega-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    min-height: 500px !important;
    /* Adjust to match the height of Expertise/Hire menus */
    width: 100% !important;
}

[data-theme="light"] .portfolio-container {
    background-color: #ffffff !important;
    display: flex !important;
}

/* 2. Typography: Force all text to Black */
[data-theme="light"] .portfolio-projects h3,
[data-theme="light"] .portfolio-projects h4,
[data-theme="light"] .portfolio-header-left h3,
[data-theme="light"] .portfolio-header-left p,
[data-theme="light"] .portfolio-case-study h3,
[data-theme="light"] .portfolio-case-title,
[data-theme="light"] .portfolio-case-description,
[data-theme="light"] .portfolio-stat-content h4,
[data-theme="light"] .portfolio-stat-content p {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 3. Icons: Force SVGs to Black */
[data-theme="light"] .portfolio-stat-icon svg {
    filter: brightness(0) !important;
    /* Turns colored/white SVGs black */
}

/* 4. Sidebar/Right Panel: Remove dark background if applicable */
[data-theme="light"] .portfolio-case-study {
    background-color: transparent !important;
    background: none !important;
    border-left: 1px solid #f0f0f0 !important;
}


[data-theme="light"] .portfolio-overlay p {
    color: #ffffff !important;
}

/* =====================================================
   MEGA MENU SIDEBAR - GRADIENT BORDER LOGIC
===================================================== */

/* 1. Apply Light Grey Gradient Border to Sidebar Cards */
[data-theme="light"] .expertise-sidebar .expertise-category-card,
[data-theme="light"] .hire-sidebar .hire-category-card {
    width: 100% !important;
    background-color: #ffffff !important;
    margin-bottom: 15px !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: block !important;
    position: relative;

    /* Creating the Gradient Border effect */
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    border-image: linear-gradient(to bottom, #e0e0e0, #f5f5f5) 1 !important;
    border-style: solid !important;
    border-width: 1px !important;

    /* Fallback for standard browsers to ensure a "small" light border */
    border: 1px solid #eeeeee !important;
}

/* 2. Active State for Sidebar Cards */
[data-theme="light"] .expertise-category-card.active,
[data-theme="light"] .hire-category-card.active,
[data-theme="light"] .expertise-category-card:hover,
[data-theme="light"] .hire-category-card:hover {
    background-color: #f8f9fa !important;
    border-image: linear-gradient(to right, #4093D0, #e0e0e0) 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Typography fix for Sidebar - Pure Black */
[data-theme="light"] .expertise-sidebar h3,
[data-theme="light"] .expertise-sidebar p,
[data-theme="light"] .hire-sidebar h3,
[data-theme="light"] .hire-sidebar p {
    color: #000000 !important;
}

/* =====================================================
   PORTFOLIO SECTION - FULL SCREEN HEIGHT
===================================================== */

/* Ensure project cards inside are visible on white background */
[data-theme="light"] .featured-work-slider .card-news {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden;
}

/* =====================================================
   THEME TOGGLE - BLACK SUN ICON
===================================================== */
[data-theme="light"] #theme-toggle .sun-icon svg {
    fill: #000000 !important;
}

[data-theme="light"] #theme-toggle .sun-icon circle,
[data-theme="light"] #theme-toggle .sun-icon rect {
    fill: #000000 !important;
}

/* =====================================================
   MEGA MENU SIDEBAR - ROUNDED GRADIENT BORDER FIX
===================================================== */

/* 1. Base Sidebar Card Styling */
[data-theme="light"] .expertise-sidebar .expertise-category-card,
[data-theme="light"] .hire-sidebar .hire-category-card {
    width: 100% !important;
    background-color: #ffffff !important;
    margin-bottom: 15px !important;
    border-radius: 12px !important; /* The radius you want */
    padding: 20px !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    /* Remove standard border so the pseudo-element takes over */
    border: none !important; 
}

/* 2. The Gradient Border (Using Pseudo-element to support Radius) */
[data-theme="light"] .expertise-sidebar .expertise-category-card::before,
[data-theme="light"] .hire-sidebar .hire-category-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    z-index: -1 !important;
    margin: -1px !important; /* This creates a 1px border thickness */
    border-radius: 13px !important; /* Slightly larger than card radius to fit perfectly */
    
    /* DEFAULT: Light Grey Gradient Border */
    background: linear-gradient(to bottom, #e0e0e0, #f5f5f5) !important;
}

/* 3. ACTIVE & HOVER STATE: Change the Rounded Border to Blue Gradient */
[data-theme="light"] .expertise-category-card.active::before,
[data-theme="light"] .hire-category-card.active::before,
[data-theme="light"] .expertise-category-card:hover::before,
[data-theme="light"] .hire-category-card:hover::before {
    /* Gradient highlight with Blue */
    background: linear-gradient(to right, #4093D0, #e0e0e0) !important;
}

/* 4. Optional: Active State background and Shadow */
[data-theme="light"] .expertise-category-card.active,
[data-theme="light"] .hire-category-card.active {
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure typography stays black and sharp */
[data-theme="light"] .expertise-sidebar h3,
[data-theme="light"] .hire-sidebar h3 {
    color: #000000 !important;
    position: relative;
    z-index: 2;
}

/* =====================================================
   MEGA MENU SIDEBAR - ROUNDED GRADIENT BORDER
===================================================== */

/* 1. Base Sidebar Card: White background & Black content */
[data-theme="light"] .expertise-sidebar .expertise-category-card,
[data-theme="light"] .hire-sidebar .hire-category-card {
    top: 2px;
    width: 100% !important;
    background-color: #ffffff !important; 
    margin-bottom: 18px !important;
    border-radius: 12px !important;
    padding: 23px 18px !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    border: 1px solid #c9c8c8  !important; /* Standard border removed for pseudo-element */
}

/* 2. Default State: Grey Gradient Border circling the card */
[data-theme="light"] .expertise-sidebar .expertise-category-card::before,
[data-theme="light"] .hire-sidebar .hire-category-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    z-index: -1 !important;
    margin: -1px !important; /* This creates the 1px border thickness */
    border-radius: 13px !important; /* Match card radius + thickness */
    background: #ffffff !important;
    border: 1px solid #c9c8c8  !important;
}

/* 3. ACTIVE & HOVER STATE: Highlight with Blue/Grey Gradient */
[data-theme="light"] .expertise-category-card.active::before,
[data-theme="light"] .hire-category-card.active::before,
[data-theme="light"] .expertise-category-card:hover::before,
[data-theme="light"] .hire-category-card:hover::before {
    background: rgba(64, 147, 208, 0.05) !important; /* Light Blue background on hover/active */
    border: 1px solid #4093D0 !important;
}

/* 4. Text Content: Pure High-Contrast Black */
[data-theme="light"] .expertise-sidebar h3,
[data-theme="light"] .expertise-sidebar p,
[data-theme="light"] .hire-sidebar h3,
[data-theme="light"] .hire-sidebar p {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 5. DIVIDER LINES - Change to Light Grey */
[data-theme="light"] .expertise-main-content,
[data-theme="light"] .portfolio-projects {
    border-right: 1px solid #c9c8c8 !important; /* Light Grey Divider */
    border-left: 1px solid #c9c8c8 !important; /* Light Grey Divider */
}

/* =====================================================
   MARQUEE BUTTON & PORTFOLIO INTERACTION FIXES
===================================================== */

/* 1. START A PROJECT - Default Black state for Light Theme */
[data-theme="light"] .marquee-button {
    background-color: #000000 !important;
}

[data-theme="light"] .marquee-button .label,
[data-theme="light"] .marquee-button::before,
[data-theme="light"] .marquee-button::after {
    color: #ffffff !important; /* Force White Text */
    -webkit-text-fill-color: #ffffff !important;
}

/* 2. START A PROJECT - Hover State (Match Dark Theme Blue) */
[data-theme="light"] .marquee-button:hover {
    background-color: #4093D0 !important; /* Brand Blue from Dark Theme */
    border-color: #4093D0 !important;
}
[data-theme="light"] .marquee-button:hover .label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
[data-theme="light"] .marquee-button:hover::before,
[data-theme="light"] .marquee-button:hover::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =====================================================
   MOBILE VIEW - LIGHT MODE HEADER & MENU FIX
===================================================== */

@media (max-width: 991px) {
    /* 1. Force Black lines in the Hamburger icon */
    [data-theme="light"] .navbar-toggler-icon {
        filter: none !important; /* Flips white lines to black */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    [data-theme="light"] .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* 2. Solid White Background for Mobile Menu Wrapper */
    [data-theme="light"] .mobile-nav-wrapper,
    [data-theme="light"] .navbar-collapse,
    [data-theme="light"] .mobile-layer {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    /* 3. Mobile Sidebar Logo Fix */
    [data-theme="light"] .mobile-sidebar-logo {
        filter: none !important; /* Ensures original colors show */
    }

    /* 4. Mobile Text Links & Icons - Force Black */
    [data-theme="light"] .mobile-layer .nav-link,
    [data-theme="light"] .mobile-layer .menu-child,
    [data-theme="light"] .mobile-layer .menu-title
     {
        color: #000000 !important;
    }

    [data-theme="light"] .mobile-layer svg {
        stroke: #000000 !important;
    }

    /* 5. Close Button (X) - Force Black */
    [data-theme="light"] .close-sidebar svg {
        stroke: #000000 !important;
    }

    [data-theme="light"] .menu-group h6 a {
        color: #000000 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
    }
}

[data-theme="light"] .navbar {
    border-bottom: #c9c8c8 !important;
    background-color: #ffffff !important;
}