/* =====================================================
   SUB SERVICE PAGE - LIGHT THEME INTEGRATION
===================================================== */

/* 1. GLOBAL BACKGROUND & ANIMATION REMOVAL */
[data-theme="light"] body,
[data-theme="light"] main,
[data-theme="light"] .service-hero-banner,
[data-theme="light"] .service-clientlogo,
[data-theme="light"] .about-section,
[data-theme="light"] .solution-section,
[data-theme="light"] .service-feature-wrapper,
[data-theme="light"] .servicecs-section,
[data-theme="light"] .service-industries,
[data-theme="light"] .faq-block {
    background-color: #ffffff !important;
    background-image: none !important;
}
[data-theme="light"] .get-service-block{
    background-color: #F7F8FB !important;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 50px;
}
/* Kill global background animation containers */
[data-theme="light"] .gradient-bg,
[data-theme="light"] .g-blob {
    display: none !important;
    visibility: hidden !important;
}

/* 2. HERO SECTION - PURE BLACK TEXT (Original Style Preserved) */
[data-theme="light"] .service-tophero-heading,
[data-theme="light"] .service-tophero-content,
[data-theme="light"] .service-hero-heading,
[data-theme="light"] .feature-list li span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

[data-theme="light"] .feature-list .icon-wrapper svg {
    color: #4093D0 !important;
    /* Keep brand blue for checkmarks */
}

/* 3. CONTENT TYPOGRAPHY - HIGH CONTRAST BLACK */
[data-theme="light"] .web-heading,
[data-theme="light"] .web-subheading,
[data-theme="light"] .service-head1,
[data-theme="light"] .service-para,
[data-theme="light"] .feature-text-content h3,
[data-theme="light"] .feature-text-content p,
[data-theme="light"] .slide-title,
[data-theme="light"] .slide-desc,
[data-theme="light"] .accordion-button {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 4. BENCHMARK STAT CARDS - FULL GRADIENT BORDER FIX (From Hire Page) */
[data-theme="light"] .stat-card-wrapper {
    position: relative !important;
    border: none !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    z-index: 1 !important;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .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;
    border-radius: 17px !important;
    background: linear-gradient(to right, #4093D0, #e0e0e0) !important;
}

[data-theme="light"] .stat-number {
    color: #000 !important;
    /* Brand blue for numbers */
}

[data-theme="light"] .stat-label {
    color: #000000 !important;
}
[data-theme="light"] .solution-card::before{
    background: conic-gradient(transparent, rgb(63 147 210), rgb(63 147 210 / 77%), transparent 30%);
}

/* 5. SOLUTION CARDS - PURE WHITE (From About Page) */
[data-theme="light"] .solution-card {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0px 15px rgb(0 0 0 / 10%) !important;
    border-radius: 16px !important;
}

[data-theme="light"] .solution-icon-box img {
    filter: brightness(0) !important;
    /* Force icons to black */
}


[data-theme="light"] .rail-segment.active {
    background-color: #4093D0 !important;
}

/* 7. SWIPER NAVIGATION - WHITE BG, BLACK ARROW (From Portfolio Page) */
[data-theme="light"] .nav-btn,
[data-theme="light"] .feature-mobile-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .nav-btn i,
[data-theme="light"] .feature-mobile-btn::after {
    color: #000000 !important;
}

/* 8. SERVICE CASE STUDIES OVERLAY FIX */
[data-theme="light"] .servicecs-card__content h3,
[data-theme="light"] .servicecs-card__content p {
    color: #ffffff !important;
    /* Keep white for readability over images */
}

/* 9. CLIENT LOGO SLIDER - BLACK BORDERS (From Hire Page) */
[data-theme="light"] .service-clientlogo-item {
    background-color: #ffffff !important;
    border: 1px solid #000 !important;
}

[data-theme="light"] .service-clientlogo-item img {
    filter: none !important;
}

[data-theme="light"] .custom-cta-btn.service-banner-cta {
    background-color: #fff !important;
    color: #000 !important;
    /* #4093d0 */
}

[data-theme="light"] .custom-cta-btn.service-banner-cta:hover {
    background-color: #fff !important;
    color:#000 !important;
}

[data-theme="light"] .serviceform-card {
    background-color: #ffffff !important;
    border: 0px solid #e0e0e0 !important;
}

[data-theme="light"] .btn {
    background-color: #000000 !important;
}

/* =====================================================
   FIX: PLAIN WHITE BACKGROUND FOR ABOUT SECTION
===================================================== */

[data-theme="light"] .about-section-container {
    background-color: #ffffff !important;
    /* Force plain white */
    background-image: none !important;
    /* Remove any gradient overlays */
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .about-section-container {
    padding: 50px 10px !important;
    /* Maintain spacing without the box look */
}

[data-theme="light"] .stat-card-content {
    background-color: #ffffff !important;
    /* Remove inner card background */
    border: 1px solid #3f93d2 !important;
    border-radius: 15px;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .gradient-border-top,
[data-theme="light"] .gradient-border-bottom {
    display: none !important;
    /* Hide gradient borders */
}

[data-theme="light"] .solution-card-content,
[data-theme="light"] .solution-card-content:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* =====================================================
   VERTICAL FEATURE SCROLL - LIGHT THEME FIXES
===================================================== */

/* 1. Force Heading to Black (Override Gradient & Transparent Fill) */
[data-theme="light"] .feature-text-content h3 {
    background: none !important;
    /* Removes the white/grey gradient */
    -webkit-text-fill-color: #000000 !important;
    /* Overrides transparent fill */
    color: #000000 !important;
}

/* 2. Force Paragraph Description to Black */
[data-theme="light"] .feature-text-content p {
    color: #000000 !important;
    opacity: 0.8 !important;
    /* Slight opacity for modern readability */
}

/* 3. Vertical Rail Visibility (Left Side) */
[data-theme="light"] .progress-rail {
    background-color: none !important;
    /* Faded grey track */
}

[data-theme="light"] .rail-segment {
    background-color: #cccccc !important;
    /* Inactive segment color */
}

[data-theme="light"] .rail-segment.active {
    background-color: #4093D0 !important;
    /* Active segment brand blue */
}

/* 4. Mobile Swiper version of the same section */
[data-theme="light"] .feature-mobile-text-content h3 {
    color: #000000 !important;
}

[data-theme="light"] .feature-mobile-text-content p {
    color: #333333 !important;
}

[data-theme="light"] .slide-title,
[data-theme="light"] .slide-desc {
    color: #ffffff !important;
}

/* =====================================================
   FAQ SECTION - EXACT HIRE PAGE MATCH (LIGHT MODE)
===================================================== */

/* 1. Reset Accordion Item Background & Borders */
[data-theme="light"] .faq-block .accordion .accordion-item {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    background-image: none !important;
    margin-bottom: 15px !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important; /* Removes any dark theme glow */
}

/* 2. Style the Question Button (Black Bold Text) */
[data-theme="light"] .faq-block .accordion .accordion-button {
    color: #000000 !important;
    font-weight: 700 !important;
    background-color: #F7F8FB !important;
    border-radius: 0 !important;
}

/* 3. Style the Answer Body (Black Text on White BG) */
[data-theme="light"] .faq-block .accordion .accordion-body {
    color: #000000 !important;
    background-color: #F7F8FB !important;
    border-top: 1px solid #eeeeee !important;
}

/* 4. THE ICON FIX: Black Circle with White Plus sign */
[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; /* Removes default Bootstrap arrow */
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Change icon to Minus when the item is expanded */
[data-theme="light"] .faq-block .accordion .accordion-button:not(.collapsed)::after {
    content: "-" !important;
}

/* 5. Force Header Text to Black */
[data-theme="light"] .faq-block .web-heading {
    color: #000000 !important;
}

/* =====================================================
   DYNAMIC HERO BACKGROUND - LIGHT MODE ONLY
===================================================== */

/* Light Mode: Apply the dynamic variable and ensure white text contrast */
[data-theme="light"] .service-hero-banner {
    background-image: var(--hero-bg-light) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Light Mode Content: White text is required for dark hero images */
[data-theme="light"] .service-hero-banner .service-hero-heading,
[data-theme="light"] .service-hero-banner .service-tophero-heading,
[data-theme="light"] .service-hero-banner .service-tophero-content,
[data-theme="light"] .service-hero-banner .feature-list li span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Maintain brand blue checkmarks for visibility */
[data-theme="light"] .service-hero-banner .icon-wrapper svg {
    color: #4093D0 !important;
}

[data-theme="light"] .solution-card-content p {
    color: #636060 !important;
}

/* =====================================================
   HERO FEATURE ICONS - WHITE FOR LIGHT THEME HERO
===================================================== */

[data-theme="light"] .feature-list .icon-wrapper svg {
    color: #ffffff !important;           /* Force icon color to white */
    fill: #ffffff !important;            /* Handle fill-based SVGs */
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;               /* Ensure full visibility */
}

/* Optional: Slight shadow to make white icons pop on busy backgrounds */
[data-theme="light"] .feature-list .icon-wrapper {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

[data-theme="light"] .service-clientlogo-track {
    gap: 60px !important;
}

/* =====================================================
   CONSULTATION FORM - LIGHT THEME INTEGRATION
===================================================== */

/* 1. Card Container - Pure White with Full Spread Shadow */
[data-theme="light"] .serviceform-card {
    background-color: #ffffff !important;
    border: none !important;
    /* Approved spread shadow for Light Mode */
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
}

/* 2. Typography - Force Black */
[data-theme="light"] .service-form-heading,
[data-theme="light"] .form-subheading {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 3. Input Fields - Hire Page Bottom-Border Style */
[data-theme="light"] .serviceform-control {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #cccccc !important; /* Standard Light Grey Border */
    border-radius: 0 !important;
    color: #000000 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[data-theme="light"] .serviceform-control:focus {
    border-bottom: 1px solid #4093D0 !important; /* Brand Blue on Focus */
    box-shadow: none !important;
}

/* 4. Placeholder Color Fix */
[data-theme="light"] .serviceform-control::placeholder {
    color: #888888 !important;
    opacity: 1;
}

/* 5. Submit Button - Force Black to Match Hero CTA */
[data-theme="light"] .serviceform-btn {
    background-color: #4093D0!important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="light"] .serviceform-btn:hover {
    background-color: #000000 !important; /* Brand Blue on Hover */
}

/* 6. Error Text Styling */
[data-theme="light"] .error-text {
    color: #dc3545 !important; /* Bootstrap Danger Red */
    font-size: 12px !important;
    margin-top: 5px !important;
}

/* =====================================================
   FIX: PHONE INPUT FLAG OVERLAP (LIGHT MODE)
===================================================== */

[data-theme="light"] .iti {
    width: 100% !important;
    display: block !important;
}

[data-theme="light"] .iti__flag-container {
    padding-bottom: 5px !important; /* Aligns flag with bottom-border style */
}

[data-theme="light"] #sf-phone {
    /* Adjust this value (50px to 80px) based on your specific flag width */
    padding-left: 55px !important; 
}

/* Ensure the placeholder color stays consistent with other fields */
[data-theme="light"] #sf-phone::placeholder {
    color: #888888 !important;
}

/* =====================================================
   FIX: PHONE DROPDOWN LIGHT MODE BACKGROUND
===================================================== */

[data-theme="light"] .iti__country-list {
    background-color: #ffffff !important; /* Force white background */
    border: 1px solid #e0e0e0 !important;   /* Professional light border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure the country names and codes are black in the list */
[data-theme="light"] .iti__country-list .iti__country-name,
[data-theme="light"] .iti__country-list .iti__dial-code {
    color: #000000 !important;
}

/* Adjust hover state for list items to a subtle light grey */
[data-theme="light"] .iti__country-list .iti__country:hover,
[data-theme="light"] .iti__country-list .iti__country.iti__highlight {
    background-color: #f8f9fa !important;
}

/* Ensure the divider line between countries is visible but light */
[data-theme="light"] .iti__divider {
    border-bottom: 1px solid #eeeeee !important;
}
[data-theme="light"] .integration-card {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}


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

[data-theme="light"] .service-industries .slide-desc{
    opacity: 0;
}

/* Ensure description is completely hidden in light theme when not hovered */
[data-theme="light"] .service-industries .swiper-slide .slide-desc {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}

/* Show description on hover in light theme */
[data-theme="light"] .service-industries .swiper-slide:hover .slide-desc {
    opacity: 1 !important;
}