/* =====================================================
   THEME CONTROL: FINAL INTEGRATED DUAL-MODE CSS
===================================================== */

/* --- DARK THEME: Preserved exactly as requested --- */
[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. SECTION BACKGROUNDS - Solid White for everything except Hero/Footer */
[data-theme="light"] .hire-section,
[data-theme="light"] .methodology-block,
[data-theme="light"] .faq-block,
[data-theme="light"] .service-integrations-section,
[data-theme="light"] .hire-block,
[data-theme="light"] .scroll-container,
[data-theme="light"] .news-slider,
[data-theme="light"] .key-skills {
    background-color: #ffffff !important;
}

/* 2. HERO SECTION - Dark Background Image requires White Text */
[data-theme="light"] .sectionOneHeroNew {
    background-image: var(--hero-bg-light) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

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

/* 3. PAGE CONTENT - Force Black text */
[data-theme="light"] .web-heading,
[data-theme="light"] .formTitle,
[data-theme="light"] .main-heading,
[data-theme="light"] .left-panel h2,
[data-theme="light"] .card-title,
[data-theme="light"] .card-preparing h5,
[data-theme="light"] .keySkillCardHeading,
[data-theme="light"] .heading-4 {
    color: #000000 !important;
}

[data-theme="light"] .web-subheading,
[data-theme="light"] .left-panel p,
[data-theme="light"] .card-description,
[data-theme="light"] .stat-label,
[data-theme="light"] .featured-work-slider .section-title p,
[data-theme="light"] .card-info p.text-md,
[data-theme="light"] .card-preparing .card-info p {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 4. FORM CONTAINERS */
[data-theme="light"] .form-container,
[data-theme="light"] .serviceform-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    color: #fff !important;
    border-bottom: 1px solid #cccccc !important;
}
[data-theme="light"] .hire-card,
[data-theme="light"] .card-preparing,
[data-theme="light"] .right-panel .feature-card,
[data-theme="light"] .keySkillCardBg {
    box-shadow: 0 0px 15px rgb(0 0 0 / 10%) !important;
}
[data-theme="light"] .hire-card::before{
    background: conic-gradient(transparent, rgb(63 147 210), rgb(63 147 210 / 77%), transparent 30%);
}
/* 5. CARDS - Framework & Feature Boxes */
[data-theme="light"] .hire-card-content,
[data-theme="light"] .card-preparing,
[data-theme="light"] .right-panel .feature-card,
[data-theme="light"] .keySkillCardBg {
    background-color: #ffffff !important;
    background-image: none !important;
}

[data-theme="light"] .hire-card-content p{
        color: #636060;
}
/* 6. ICON VISIBILITY - SCROLLING SECTION ONLY */
/* Forces SVGs in the NLP Development Hub specifically to turn Black */
[data-theme="light"] .scroll-container .card-icon svg {
    stroke: #000000 !important;
}

/* 7. PRESERVE COLORED LOGOS EVERYWHERE ELSE */
[data-theme="light"] .hire-icon-box img,
[data-theme="light"] .logo-container img,
[data-theme="light"] .service-clientlogo-item img {
    filter: none !important;
    opacity: 1 !important;
}

/* 8. FAQ ACCORDION - Shadow & Open State Fix */
[data-theme="light"] .faq-block .accordion .accordion-item {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    background-image: none !important;
    margin-bottom: 15px;
    border-radius: 12px !important;
    /* Forces consistent corners */
    overflow: hidden;
    box-shadow: none !important;
    /* Removes ugly shadow when open */
}

[data-theme="light"] .faq-block .accordion .accordion-button {
    color: #000000 !important;
    font-weight: 700 !important;
    background-color: #F7F8FB !important;
    border-radius: 0 !important;
}

[data-theme="light"] .faq-block .accordion .accordion-body {
    color: #000000 !important;
    background-color: #F7F8FB !important;
    border-top: 1px solid #eeeeee;
}
[data-theme="light"] .faq-block .accordion .accordion-body {
    color: #000000 !important;
    background-color: #F7F8FB !important;
    border-top: 1px solid #eeeeee;
}

/* FAQ Icon: Black Circle with White Plus */
[data-theme="light"] .faq-block .accordion .accordion-button::after {
    content: "+" !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: none !important;
    font-size: 14px !important;
}

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

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

[data-theme="light"] .footernew-top {
    background: #202020 !important;
}


/* =====================================================
   ONLY FOR THE CLIENT LOGO SLIDER SECTION
===================================================== */

/* 1. Force White Background for this specific section only */
[data-theme="light"] .service-clientlogo {
    background-color: #ffffff !important;
}

/* 2. Style individual items: White BG, Black Border, Black Logo */
[data-theme="light"] .service-clientlogo-item {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    /* Solid Black Border */
    padding: 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Force Logos to Solid Black ONLY in this section */
[data-theme="light"] .service-clientlogo-item img {
    filter: grayscale(1) brightness(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================================================
   SPECIFIC LIGHT THEME COMPONENT UPDATES
===================================================== */

/* 1. FORCE WHITE BACKGROUND (No Gradients) - All Middle Sections */
[data-theme="light"] .hire-section,
[data-theme="light"] .methodology-block,
[data-theme="light"] .faq-block,
[data-theme="light"] .service-integrations-section,
[data-theme="light"] .hire-block,
[data-theme="light"] .scroll-container,
[data-theme="light"] .news-slider,
[data-theme="light"] .key-skills,
[data-theme="light"] .service-clientlogo {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. CLIENT LOGO SLIDER ONLY - Black Logos with Black Borders */
[data-theme="light"] .service-clientlogo-item {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    /* Force black border */
    border-radius: 10px !important;
}

[data-theme="light"] .service-clientlogo-item img {
    filter:none !important;
    /* Force black logos only here */
    opacity: 1 !important;
}

/* 3. PRESERVE ORIGINAL COLORS - Tech Stack & Specialization Icons */
[data-theme="light"] .logo-container img,
[data-theme="light"] .hire-icon-box img {
    filter: none !important;
    opacity: 1 !important;
}

/* 4. CONTENT CONTRAST - Force all Grey/Faded text to Black */
[data-theme="light"] .description,
[data-theme="light"] .web-subheading,
[data-theme="light"] .card-description,
[data-theme="light"] .pointers li,
[data-theme="light"] .card-info p.text-md,
[data-theme="light"] .card-preparing .card-info p {
       color: #636060 !important;
    opacity: 1 !important;
}

/* 5. DEVELOPMENT HUB ICONS - Force SVGs to Black */
[data-theme="light"] .scroll-container .card-icon svg {
    stroke: #000000 !important;
}

/* =====================================================
   CORE DEV STACK & BENCHMARKS - LIGHT MODE FIXES
===================================================== */

/* 1. Force Solid White Background for both sections */
[data-theme="light"] .hire-integrations-section,
[data-theme="light"] .hire-counter {
    background-color: #ffffff !important;
    background-image: none !important; /* Removes any background patterns/gradients */
}

/* 2. Core Development Stack: Remove card backgrounds */
[data-theme="light"] .hire-integrations-section .integration-card {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #e0e0e0 !important; /* Keep a light border for definition */
   box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .hire-integrations-section .integration-card .card-title {
    color: #000000 !important;
}

/* 3. Engineering Benchmarks: Remove card backgrounds */
[data-theme="light"] .hire-counter .stat-card-wrapper {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #e0e0e0 !important; /* Keep a light border for definition */
    box-shadow: none;
}

[data-theme="light"] .hire-counter .stat-card-content {
    background-color: transparent !important;
    
}

/* 4. Text Contrast for Benchmarks */
[data-theme="light"] .hire-counter .stat-number {
    color: #4093D0 !important; /* Use brand blue for the large numbers */
}

[data-theme="light"] .hire-counter .stat-label {
    color: #333333 !important; /* Dark text for descriptions */
    opacity: 1 !important;
}

/* 5. Headers & Sub-headers */
[data-theme="light"] .integrations-heading,
[data-theme="light"] .hire-counter .web-heading {
    color: #000000 !important;
}

[data-theme="light"] .hire-counter .web-subheading {
    color: #444444 !important;
    opacity: 1 !important;
}

/* =====================================================
   FIX: REMOVE SIDE MARGINS & GRADIENT BLEED
===================================================== */

/* 1. Force Full Width for NLP Development Hub (scroll-container) */
[data-theme="light"] .scroll-container.container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 50px; /* Restores internal spacing for content */
    padding-right: 50px;
    background-color: #ffffff !important;
}

/* 2. Force Full Width for Engineering Benchmarks (hire-counter) */
[data-theme="light"] .hire-counter.container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 50px; /* Restores internal spacing for content */
    padding-right: 50px;
    background-color: #ffffff !important;
}

/* 3. Ensure the parent sections also kill any margin/background bleed */
[data-theme="light"] .scroll-container,
[data-theme="light"] .hire-counter {
    margin: 0 !important; 
    background-image: none !important;
}

/* 4. Development Hub SVGs - Force Black Icons */
[data-theme="light"] .scroll-container .card-icon svg {
    stroke: #000000 !important;
    fill: none !important;
}

[data-theme="light"] .news-slider .card-news {
    background-color: #0000000f !important; /* Light transparent black for news cards */
}

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

/* =====================================================
   REMOVE ANIMATED GRADIENTS - LIGHT MODE ONLY
===================================================== */

/* 1. Kill the global background animation containers/blobs */
[data-theme="light"] .gradient-bg,
[data-theme="light"] .animated-bg,
[data-theme="light"] .bg-gradients,
[data-theme="light"] .blur-gradient {
    display: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* 2. Remove gradient pseudo-elements on all sections */
[data-theme="light"] section::before,
[data-theme="light"] section::after,
[data-theme="light"] .container::before,
[data-theme="light"] .container::after {
    display: none !important;
    background: none !important;
}

/* 3. Force all main content sections to Solid White */
[data-theme="light"] .hire-section,
[data-theme="light"] .methodology-block,
[data-theme="light"] .faq-block,
[data-theme="light"] .service-integrations-section,
[data-theme="light"] .hire-block,
[data-theme="light"] .scroll-container,
[data-theme="light"] .news-slider,
[data-theme="light"] .key-skills,
[data-theme="light"] .hire-integrations-section,
[data-theme="light"] .hire-counter,
[data-theme="light"] .service-clientlogo {
    background-color: #ffffff !important;
    background-image: none !important;
    animation: none !important; /* Stop any keyframe animations */
}

/* =====================================================
   BENCHMARK STAT CARDS - FULL GRADIENT BORDER FIX
===================================================== */

/* 1. Reset standard borders and prepare for Gradient Border */
[data-theme="light"] .hire-counter .stat-card-wrapper {
    position: relative !important;
    border: none !important; /* Remove standard border */
    background-color: #ffffff !important; /* Keep card white */
    border-radius: 16px !important;
    z-index: 1 !important;
}

/* 2. Create the Full Gradient Border circling the card */
[data-theme="light"] .hire-counter .stat-card-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    z-index: -1 !important;
    margin: -1px !important; /* Thickness of the border */
    border-radius: 17px !important; /* Match card radius + margin */
    border: 3px solid#4093D0 !important; /* Solid border fallback */
}

/* 3. Remove the existing Top/Bottom separate lines to avoid conflict */
[data-theme="light"] .hire-counter .gradient-border-top,
[data-theme="light"] .hire-counter .gradient-border-bottom {
    display: none !important;
}

[data-theme="light"] .left-content .ctaa-btn {
    background-color: #3f93d2 !important;
    color: #fff;
}
[data-theme="light"] .left-content .ctaa-btn:hover {
    background-color: #000 !important;
    color: #fff;
}
[data-theme="light"] .sectionOneHeroNew .submit-btn {
    background-color: #3f93d2 !important;
    color: white !important;
}
[data-theme="light"] .sectionOneHeroNew .submit-btn:hover{
    background-color: #000 !important;
    color: white !important;
}