/* ================================================================ BPI Dark Mode — Full Site Override Applied when is present ================================================================ */ /* ── Toggle button ─────────────────────────────────────────────── */ .bpi-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: #1a1a2e; font-size: 16px; transition: background .2s, color .2s, transform .3s; flex-shrink: 0; outline: none; } .bpi-theme-toggle:hover { background: rgba(48,111,193,.1); color: #306FC1; } .bpi-theme-toggle i { transition: transform .4s cubic-bezier(.4,0,.2,1); pointer-events: none; } /* Sun icon spins in */ .bpi-dark .bpi-theme-toggle i { transform: rotate(180deg); } /* ── CSS Variables ─────────────────────────────────────────────── */ :root { --bpi-bg: #ffffff; --bpi-bg-2: #f8faff; --bpi-bg-3: #f1f5f9; --bpi-surface: #ffffff; --bpi-border: #e2e8f0; --bpi-border-2: #E6F0FB; --bpi-text: #1e293b; --bpi-text-2: #475569; --bpi-text-muted: #94a3b8; --bpi-header-bg: #ffffff; --bpi-topbar-bg: #09071B; --bpi-shadow: rgba(0,0,0,.08); --bpi-card-bg: #ffffff; --bpi-input-bg: #f8faff; --bpi-overlay: rgba(0,0,0,.45); } .bpi-dark { --bpi-bg: #0f172a; --bpi-bg-2: #1e293b; --bpi-bg-3: #162032; --bpi-surface: #1e293b; --bpi-border: #334155; --bpi-border-2: #2d3f55; --bpi-text: #e2e8f0; --bpi-text-2: #94a3b8; --bpi-text-muted: #64748b; --bpi-header-bg: #0f172a; --bpi-topbar-bg: #020617; --bpi-shadow: rgba(0,0,0,.35); --bpi-card-bg: #1e293b; --bpi-input-bg: #162032; --bpi-overlay: rgba(0,0,0,.7); } /* ================================================================ DARK MODE OVERRIDES ================================================================ */ /* ── html / body ── */ .bpi-dark body, .bpi-dark .body-wrapper { background-color: #0f172a !important; color: #e2e8f0 !important; } /* ── TOP HEADER BAR ── */ .bpi-dark header.header-5 .top-header { background-color: #020617 !important; } /* ── MAIN HEADER ── */ .bpi-dark header.header-5 .main-header-wraper { background-color: #0f172a !important; border-color: #1e293b !important; box-shadow: 0 1px 0 #1e293b; } .bpi-dark header.header-5.stop .main-header-wraper { background-color: #0f172a !important; } /* Toggle button dark state */ .bpi-dark .bpi-theme-toggle { color: #e2e8f0; } .bpi-dark .bpi-theme-toggle:hover { background: rgba(48,111,193,.2); color: #7ab3f5; } /* ── NAV LINKS ── */ .bpi-dark .bpi-nav-link { color: #cbd5e1 !important; } .bpi-dark .bpi-nav-link:hover { color: #7ab3f5 !important; background: rgba(48,111,193,.12) !important; } .bpi-dark .bpi-nav-item.bpi-active > .bpi-nav-link { color: #7ab3f5 !important; } .bpi-dark .bpi-nav-item.bpi-active > .bpi-nav-link::after { background: #7ab3f5; } .bpi-dark .bpi-chevron { color: #475569; } /* ── MEGA MENU — dark mode handled in bpi-nav.css via html.bpi-dark selectors ── */ .bpi-dark .bpi-mega-foot { border-top-color: #334155 !important; } .bpi-dark .bpi-mega-foot-link { color: #94a3b8 !important; border-color: #334155 !important; } .bpi-dark .bpi-mega-foot-link:hover { background: #306FC1 !important; color: #fff !important; } /* ── SEARCH ── */ .bpi-dark .search-toggle { color: #94a3b8 !important; } .bpi-dark .search-toggle:hover { color: #7ab3f5 !important; } .bpi-dark .search-box { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .search-input { background: transparent !important; color: #e2e8f0 !important; } .bpi-dark .search-input::placeholder { color: #475569 !important; } /* ── HERO / BANNER SECTIONS ── */ .bpi-dark .hero-wrapper, .bpi-dark .banner-slider-area, .bpi-dark .hero-section, .bpi-dark .banner-wrapper { background-color: #0f172a !important; } /* ── GENERIC SECTIONS ── */ .bpi-dark section, .bpi-dark .section-padding, .bpi-dark .features-wrapper, .bpi-dark .our-pricing-wrapper { background-color: #0f172a; } .bpi-dark .section-bg, .bpi-dark .bpi-pricing-section, .bpi-dark .bpi-contact-section { background-color: #0a1628 !important; } /* ── HEADINGS & TEXT ── */ .bpi-dark h1, .bpi-dark h2, .bpi-dark h3, .bpi-dark h4, .bpi-dark h5, .bpi-dark h6 { color: #e2e8f0 !important; } .bpi-dark p { color: #94a3b8; } .bpi-dark a { color: #7ab3f5; } .bpi-dark a:hover { color: #93c5fd; } /* ── CARDS (generic) ── */ .bpi-dark .single-pricing-plan, .bpi-dark .single-blog-post, .bpi-dark .single-team-member, .bpi-dark .single-service, .bpi-dark .single-portfolio, .bpi-dark .single-product, .bpi-dark .contact-page-wrap .single-contact-card, .bpi-dark .single-why-choose, .bpi-dark .features-card { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ── PRICING CARDS ── */ .bpi-dark .bpi-price-card { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .bpi-price-card:hover { border-color: rgba(48,111,193,.4) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4) !important; } .bpi-dark .bpi-price-card.is-featured { background: linear-gradient(145deg, #1a3a6b 0%, #0a1e3d 100%) !important; } .bpi-dark .bpi-price-name { color: #e2e8f0 !important; } .bpi-dark .bpi-price-tagline { color: #64748b !important; } .bpi-dark .bpi-price-divider { background: #334155 !important; } .bpi-dark .bpi-price-label { color: #475569 !important; } .bpi-dark .bpi-price-amount { color: #f1f5f9 !important; } .bpi-dark .bpi-price-period { color: #64748b !important; } .bpi-dark .bpi-price-features li { color: #94a3b8 !important; } .bpi-dark .bpi-price-check { background: rgba(48,111,193,.2) !important; color: #7ab3f5 !important; } .bpi-dark .bpi-price-btn { border-color: #334155 !important; color: #7ab3f5 !important; } .bpi-dark .bpi-price-btn:hover { background: #306FC1 !important; color: #fff !important; border-color: #306FC1 !important; } .bpi-dark .bpi-price-card.is-featured .bpi-price-btn { background: #306FC1 !important; border-color: #306FC1 !important; color: #fff !important; } .bpi-dark .bpi-pricing-note { color: #64748b !important; } .bpi-dark .bpi-pricing-eyebrow { background: rgba(48,111,193,.15) !important; } /* ── CONTACT FORM ── */ .bpi-dark .bpi-contact-info-card, .bpi-dark .bpi-contact-form-card { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .bpi-contact-info-title, .bpi-dark .bpi-form-title { color: #e2e8f0 !important; } .bpi-dark .bpi-contact-info-label { color: #7ab3f5 !important; } .bpi-dark .bpi-contact-info-icon { background: rgba(48,111,193,.15) !important; } .bpi-dark .bpi-contact-info-text { color: #94a3b8 !important; } .bpi-dark .bpi-form-label { color: #cbd5e1 !important; } .bpi-dark .bpi-form-subtitle { color: #64748b !important; } .bpi-dark .bpi-form-eyebrow { background: rgba(48,111,193,.15) !important; } .bpi-dark .bpi-form-divider { background: #334155 !important; } .bpi-dark .bpi-form-input, .bpi-dark .bpi-form-select, .bpi-dark .bpi-form-textarea { background: #162032 !important; border-color: #334155 !important; color: #e2e8f0 !important; } .bpi-dark .bpi-form-input::placeholder, .bpi-dark .bpi-form-textarea::placeholder { color: #475569 !important; } .bpi-dark .bpi-form-input:focus, .bpi-dark .bpi-form-select:focus, .bpi-dark .bpi-form-textarea:focus { background: #1e293b !important; border-color: #306FC1 !important; } /* Select2 dark */ .bpi-dark .select2-dropdown { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .select2-results__option { color: #cbd5e1 !important; background: transparent; } .bpi-dark .select2-results__option:hover, .bpi-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #306FC1 !important; color: #fff !important; } .bpi-dark .bpi-phone-code .select2-container--default .select2-selection--single, .bpi-dark .bpi-services-select .select2-container--default .select2-selection--single { background: #162032 !important; border-color: #334155 !important; } .bpi-dark .bpi-phone-code .select2-container--default .select2-selection--single .select2-selection__rendered, .bpi-dark .bpi-services-select .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; } .bpi-dark .select2-search__field { background: #162032 !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* ── ABOUT SECTION ── */ .bpi-dark .about-wrapper { background-color: #0f172a !important; } .bpi-dark .about-wrapper .section-title h1, .bpi-dark .about-wrapper .section-title p { color: #e2e8f0 !important; } .bpi-dark .contant-about-us p { color: #94a3b8 !important; } /* ── WHY US SECTION ── */ .bpi-dark .why-choose-wrapper, .bpi-dark .why-choose-us-wrapper, .bpi-dark .about-us-wrapper { background-color: #0a1628 !important; } .bpi-dark .single-why-choose-us, .bpi-dark .why-choose-card { background: #1e293b !important; border-color: #334155 !important; } /* Why Us icon-box cards — always show border, lift on hover */ .bpi-dark .about-icon-box { background: #1e293b !important; border: 1.5px solid #334155 !important; border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .bpi-dark .about-icon-box:hover { transform: translateY(-4px); border-color: rgba(48,111,193,.55) !important; box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; } .bpi-dark .about-icon-box h3 { color: #e2e8f0 !important; } .bpi-dark .about-icon-box span, .bpi-dark .about-icon-box p { color: #94a3b8 !important; } .bpi-dark .why-choose-us-wrapper h1, .bpi-dark .why-choose-us-wrapper h2, .bpi-dark .why-choose-us-wrapper h3 { color: #e2e8f0 !important; } .bpi-dark .why-choose-us-wrapper p { color: #94a3b8 !important; } .bpi-dark .about-us-wrapper .section-title h1 { color: #e2e8f0 !important; } .bpi-dark .about-us-wrapper p { color: #94a3b8 !important; } /* ── SERVICES SECTION ── */ .bpi-dark .our-services-wrapper, .bpi-dark .features-wrapper { background-color: #0a1628 !important; } .bpi-dark .single-service-item, .bpi-dark .service-card { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .single-service-item h4, .bpi-dark .single-service-item p { color: #e2e8f0 !important; } .bpi-dark .service-card p { color: #94a3b8 !important; } /* Services feature cards — bottom spacing, image rounding, hover lift */ .bpi-dark .single-features-item { background: #1e293b !important; border: 1.5px solid #334155 !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .bpi-dark .single-features-item:hover { transform: translateY(-5px); border-color: rgba(48,111,193,.55) !important; box-shadow: 0 14px 36px rgba(0,0,0,.35) !important; } .bpi-dark .single-features-item .icon img { border-radius: 10px !important; background: rgba(255,255,255,.06); padding: 4px; } .bpi-dark .single-features-item .content h3 { color: #e2e8f0 !important; } .bpi-dark .single-features-item .content h3 a { color: #e2e8f0 !important; } .bpi-dark .single-features-item .content h3 a:hover { color: #7ab3f5 !important; } .bpi-dark .single-features-item .content p { color: #94a3b8 !important; } /* ── TEAM SECTION ── */ .bpi-dark .features-wrapper { background-color: #0f172a !important; } .bpi-dark .single-team-member .member-team h4 { color: #e2e8f0 !important; } .bpi-dark .single-team-member .member-team p { color: #94a3b8 !important; } .bpi-dark .our-team-member-title { color: #e2e8f0 !important; } .bpi-dark .our-team-member-description { color: #94a3b8 !important; } /* ── PRODUCT CATALOG SECTION ── */ .bpi-dark .product-catalog-wrapper, .bpi-dark .product-catalog-section, .bpi-dark .case-study-carousel-wrapper { background-color: #0a1628 !important; } /* Kill the light-blue ::before strip that bleeds through in dark mode */ .bpi-dark .case-study-carousel-wrapper::before { background-color: #0a1628 !important; } /* Navigation arrows (work-process-nav) */ .bpi-dark .case-study-carousel-wrapper .work-process-nav div { background-color: #1e293b !important; color: #e2e8f0 !important; border: 1px solid #334155 !important; } .bpi-dark .case-study-carousel-wrapper .work-process-nav div:hover { background-color: #306FC1 !important; color: #fff !important; border-color: #306FC1 !important; } /* Section title — readable, not blinding white */ .bpi-dark .case-study-carousel-wrapper .section-title h1 { color: #94a3b8 !important; } .bpi-dark .case-study-carousel-wrapper .section-title span { color: #64748b !important; } .bpi-dark .case-study-carousel-wrapper .section-title .theme-btn-sm { color: #7ab3f5 !important; } /* Carousel cards — bottom spacing */ .bpi-dark .case-study-items .single-case-item, .bpi-dark .case-study-2 .single-case-item { margin-bottom: 16px !important; border-radius: 12px !important; } /* Card white content panel → dark surface */ .bpi-dark .case-study-items .single-case-item .contents, .bpi-dark .case-study-2 .single-case-item .contents { background-color: #1e293b !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; } /* Card name & category text */ .bpi-dark .case-study-items .single-case-item .content-visible h3, .bpi-dark .case-study-2 .single-case-item .content-visible h3 { color: #e2e8f0 !important; } .bpi-dark .case-study-items .single-case-item .content-visible span, .bpi-dark .case-study-2 .single-case-item .content-visible span { color: #7ab3f5 !important; } /* Hover overlay panel → dark surface */ .bpi-dark .case-study-items .single-case-item .overlay-content, .bpi-dark .case-study-2 .single-case-item .overlay-content { background-color: #162032 !important; border-top: 1px solid #334155; } .bpi-dark .case-study-items .single-case-item .overlay-content h3, .bpi-dark .case-study-2 .single-case-item .overlay-content h3 { color: #e2e8f0 !important; } .bpi-dark .case-study-items .single-case-item .overlay-content span, .bpi-dark .case-study-2 .single-case-item .overlay-content span { color: #94a3b8 !important; } .bpi-dark .single-product-item, .bpi-dark .product-card { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .single-product-item h4, .bpi-dark .single-product-item p { color: #e2e8f0 !important; } /* ── PORTFOLIO / BLOG ── */ .bpi-dark .portfolio-wrapper, .bpi-dark .blog-wrapper { background-color: #0f172a !important; } .bpi-dark .single-blog-post, .bpi-dark .single-portfolio-item { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .single-blog-post .post-meta, .bpi-dark .single-blog-post .post-title, .bpi-dark .single-blog-post p { color: #94a3b8 !important; } .bpi-dark .single-blog-post .post-title:hover, .bpi-dark .single-blog-post .post-title a:hover { color: #7ab3f5 !important; } /* ── SECTION TITLES ── */ .bpi-dark .section-title h1, .bpi-dark .section-title h2, .bpi-dark .section-title h4 { color: #e2e8f0 !important; } .bpi-dark .section-title p { color: #94a3b8 !important; } .bpi-dark .theme-btn-sm { background: rgba(48,111,193,.18) !important; color: #7ab3f5 !important; } /* ── THEME BUTTON ── */ .bpi-dark .theme-btn { background: linear-gradient(135deg, #306FC1, #2558a3) !important; color: #fff !important; } .bpi-dark .theme-btn.off-white { background: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; border-color: #334155 !important; } .bpi-dark .theme-btn-skill { background: rgba(48,111,193,.15) !important; color: #7ab3f5 !important; border-color: #334155 !important; } /* ── FOOTER ── */ .bpi-dark .footer-wrapper, .bpi-dark footer { background-color: #020617 !important; } .bpi-dark .footer-wrapper .footer-title { color: #e2e8f0 !important; } .bpi-dark .footer-wrapper p, .bpi-dark .footer-wrapper li, .bpi-dark .footer-wrapper a { color: #64748b !important; } .bpi-dark .footer-wrapper a:hover { color: #7ab3f5 !important; } .bpi-dark .footer-wrapper .footer-bottom { border-top-color: #1e293b !important; } .bpi-dark .copyright-text { color: #475569 !important; } .bpi-dark .footer-social a { color: #64748b !important; } .bpi-dark .footer-social a:hover { color: #7ab3f5 !important; } .bpi-dark .footer-line { background: #1e293b !important; } /* ── SCROLL TO TOP ── */ .bpi-dark .scrollup { background: #306FC1 !important; } /* ── PAGE BANNER ── */ .bpi-dark .page-meeting-wrap { background-color: #020617 !important; } .bpi-dark .page-heading h1 { color: #e2e8f0 !important; } /* ── BREADCRUMB ── */ .bpi-dark .breadcrumb-wrapper { background-color: #0a1628 !important; } .bpi-dark .breadcrumb-item, .bpi-dark .breadcrumb-item a { color: #94a3b8 !important; } .bpi-dark .breadcrumb-item.active { color: #7ab3f5 !important; } /* ── STACKS / TECH SECTION ── */ .bpi-dark .stacks-development-wrapper, .bpi-dark .project-case-study-wrapper { background-color: #0a1628 !important; } .bpi-dark .single-stack-item { background: #1e293b !important; border-color: #334155 !important; } .bpi-dark .single-stack-item p { color: #94a3b8 !important; } /* Stacks section heading + label text visibility */ .bpi-dark .project-case-study-wrapper .section-title h1 { color: #e2e8f0 !important; } .bpi-dark .project-case-study-wrapper .section-title .theme-btn-sm, .bpi-dark .project-case-study-wrapper .section-title a { color: #7ab3f5 !important; } .bpi-dark .project-case-study-wrapper p { color: #94a3b8 !important; } /* Decorative circle — hide or dim in dark mode */ .bpi-dark .project-case-study-wrapper__circle { opacity: .12; } /* ── SCHEDULE MEETING SECTION ── */ .bpi-dark .schedule-meeting-wrap { background-color: #0a1628 !important; } .bpi-dark .schedule-meeting-wrap h2 { color: #e2e8f0 !important; } .bpi-dark .schedule-meeting-wrap p { color: #94a3b8 !important; } /* ── PRELOADER ── */ .bpi-dark .preloader { background-color: #0f172a !important; } /* ── MODALS / POPUPS ── */ .bpi-dark .modal-content { background-color: #1e293b !important; border-color: #334155 !important; } .bpi-dark .modal-header { border-bottom-color: #334155 !important; } .bpi-dark .modal-footer { border-top-color: #334155 !important; } .bpi-dark .modal-title { color: #e2e8f0 !important; } /* ── TABLES ── */ .bpi-dark table { color: #e2e8f0 !important; } .bpi-dark th { background: #162032 !important; color: #e2e8f0 !important; } .bpi-dark td { border-color: #334155 !important; } .bpi-dark tr:nth-child(even) { background: #162032 !important; } /* ── SERVICE / PRODUCT DETAIL PAGES ── */ .bpi-dark .service-detail-wrapper, .bpi-dark .product-detail-wrapper { background-color: #0f172a !important; } .bpi-dark .service-detail-content, .bpi-dark .product-detail-content { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } .bpi-dark .service-detail-content h1, .bpi-dark .service-detail-content h2, .bpi-dark .service-detail-content h3, .bpi-dark .product-detail-content h1, .bpi-dark .product-detail-content h2 { color: #e2e8f0 !important; } /* ── CAROUSEL / SWIPER ── */ .bpi-dark .swiper-button-next, .bpi-dark .swiper-button-prev { color: #306FC1 !important; } .bpi-dark .swiper-pagination-bullet { background: #334155 !important; } .bpi-dark .swiper-pagination-bullet-active { background: #306FC1 !important; } .bpi-dark .owl-dot span { background: #334155 !important; } .bpi-dark .owl-dot.active span { background: #306FC1 !important; } /* ── HERO SLIDER TEXT ── */ .bpi-dark .hero-slide-content h1, .bpi-dark .hero-slide-content h2 { color: #f1f5f9 !important; } .bpi-dark .hero-slide-content p { color: #94a3b8 !important; } /* ── IMAGE OVERLAYS ── */ .bpi-dark .img-overlay { background: rgba(15,23,42,.6) !important; } /* ── BORDERS ── */ .bpi-dark .border, .bpi-dark .border-top, .bpi-dark .border-bottom { border-color: #334155 !important; } .bpi-dark hr { border-color: #334155 !important; } /* ── HEADER GUTTER ── */ .bpi-dark .header-gutter { background: #0f172a !important; } /* ── HAMBURGER TOGGLE — visible in dark mode ── */ .bpi-dark .bpi-hamburger span { background-color: #e2e8f0 !important; } .bpi-dark .bpi-hamburger:hover span { background-color: #7ab3f5 !important; } /* Open state (X) */ .bpi-dark .bpi-hamburger.is-open span { background-color: #e2e8f0 !important; }