/* Graphite Mono: modern black navigation, white surfaces, and neutral graphite actions. */
:root { --primary-color: #111111; --secondary-color: #3a3a3a; --accent-color: #5a5a5a; --body-bg: #ffffff; --surface-blue: #f5f5f5; --surface-warm: #f0f0f0; --slate-50: #fafafa; --slate-100: #f0f0f0; --slate-200: #dedede; --slate-300: #bfbfbf; --slate-400: #929292; --slate-500: #707070; --slate-600: #555555; --slate-700: #3a3a3a; --slate-800: #262626; --slate-900: #1f1f1f; --shadow-glow: 0 0 20px 0 rgba(58, 58, 58, 0.16); }
body { background-color: var(--body-bg); color: var(--slate-800); } a { color: var(--primary-color); } a:hover { color: var(--accent-color); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #a3a3a3 !important; outline-offset: 3px; }
.header-style-four .pearo-nav .navbar, .header-style-four .pearo-nav, .header-style-four .navbar-area, .header-style-four .navbar-area.is-sticky { background-color: var(--primary-color) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); } .top-header { background-color: #000000; border-bottom-color: #262626; } .top-header .top-header-right-side ul li .icon { background-color: var(--secondary-color); color: #ffffff !important; }
.top-header .top-header-right-side ul li a.default-btn, .default-btn, .btn-primary, .btn-secondary { background-color: var(--secondary-color); color: #ffffff !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.22); } .top-header .top-header-right-side ul li a.default-btn span, .default-btn span, .top-header .top-header-right-side ul li a.default-btn:hover span, .top-header .top-header-right-side ul li a.default-btn:focus span, .default-btn:hover span, .default-btn:focus span { background-color: #000000 !important; } .default-btn:hover, .btn-primary:hover, .btn-secondary:hover { background-color: #111111; color: #ffffff !important; }
.page-heading, .page-title-area { background: linear-gradient(135deg, #000000 0%, #2b2b2b 100%) !important; } .page-heading::before, .page-title-area::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, transparent 70%); } .title-divider, .page-title-content::after, .card-accent { background-color: #ffffff; }
/* The base stylesheet assigns headings an explicit dark colour, even on dark panels. */
.top-header h1, .top-header h2, .top-header h3, .top-header h4, .top-header h5, .top-header h6, .top-header p, .top-header span, .top-header a, .page-heading h1, .page-heading h2, .page-heading h3, .page-heading h4, .page-heading h5, .page-heading h6, .page-heading p, .page-heading span, .page-heading a, .page-title-area h1, .page-title-area h2, .page-title-area h3, .page-title-area h4, .page-title-area h5, .page-title-area h6, .page-title-area p, .page-title-area span, .page-title-area a, .single-feedback-item .feedback-desc h1, .single-feedback-item .feedback-desc h2, .single-feedback-item .feedback-desc h3, .single-feedback-item .feedback-desc h4, .single-feedback-item .feedback-desc h5, .single-feedback-item .feedback-desc h6, .single-feedback-item .feedback-desc p, .single-feedback-item .feedback-desc span, .single-feedback-item .feedback-desc a, .footer-area h1, .footer-area h2, .footer-area h3, .footer-area h4, .footer-area h5, .footer-area h6, .footer-area p, .footer-area span, .footer-area a, .footer-area li, .footer_bottom p, .footer_bottom span, .footer_bottom a { color: #ffffff !important; }
.header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li, .header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li > a, .header-style-four .pearo-nav .navbar .navbar-nav ul li a { color: #ffffff !important; } .header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li:hover, .header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li:hover > a, .header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li.active, .header-style-four .pearo-nav .navbar .navbar-nav > .th-mainul > li.active > a, .top-header .top-header-right-side ul li a:hover { color: #d4d4d4 !important; } .header-style-four .pearo-nav .navbar .navbar-nav ul li ul { border-top-color: var(--secondary-color); } .header-style-four .pearo-nav .navbar .navbar-nav ul li ul li a { color: var(--slate-800) !important; } .header-style-four .pearo-nav .navbar .navbar-nav ul li ul li a:hover, .header-style-four .pearo-nav .navbar .navbar-nav ul li ul li a:focus, .header-style-four .pearo-nav .navbar .navbar-nav ul li ul li a:active { background-color: var(--secondary-color) !important; color: #ffffff !important; }
.services-box .content h3 a, .team-name a, .blog-name a, .vs-gallery-name a, .nav-stacked li a { color: var(--slate-800) !important; } .services-box .content h3 a:hover, .team-name a:hover, .blog-name a:hover, .vs-gallery-name a:hover { color: var(--accent-color) !important; } .nav-stacked li.active a, .nav-stacked li a:hover, .accordion:hover, .accordion.vs_active { border-color: var(--secondary-color) !important; color: var(--primary-color) !important; } .form-control:focus { border-color: var(--secondary-color) !important; box-shadow: 0 0 0 4px rgba(58, 58, 58, 0.18) !important; }
.single-feedback-item .feedback-desc, .single-feedback-item .feedback-desc::before { background-color: var(--primary-color); } .single-feedback-item .feedback-desc p { color: #ffffff; } .single-feedback-item .client-info h3 { color: var(--slate-900); } .socialShare a:hover { background-color: var(--secondary-color); color: #ffffff; } .footer-area { background-color: #000000; } .footer-widget h3 { border-bottom-color: #ffffff !important; } .footer-widget ul li a:hover, .single-footer-widget .footer-quick-links li a:hover, .single-footer-widget .footer-contact-info li a:hover { color: #d4d4d4; } .footer_bottom { background-color: #000000 !important; border-top-color: var(--slate-700); } .go-top { background-color: var(--secondary-color); } .go-top::before { background-color: #000000; } .fa-folder, .fa-clock-o, .fa-keyboard-o, .fa-map-marker, .fa-phone, .fa-envelope-o, .C-usp-flag, .T-usp-title, .about-content span, .services-box .content .read-more-btn { color: var(--secondary-color); } th { background-color: var(--primary-color); color: #ffffff; }
.usp-counter-item div[style*="font-size: 3rem"] { color: #ffffff !important; }
.home-gallery-grid button[aria-label], .usp-counter-carousel button[aria-label] { background-color: #111111 !important; color: #ffffff !important; }
.home-gallery-grid button[aria-label]:hover, .home-gallery-grid button[aria-label]:focus, .usp-counter-carousel button[aria-label]:hover, .usp-counter-carousel button[aria-label]:focus { background-color: #3a3a3a !important; color: #ffffff !important; }
@media (max-width: 1199px) { .header-style-four .pearo-responsive-nav, .header-style-four .navbar-area { background-color: var(--primary-color) !important; } .header-style-four .pearo-responsive-nav .mean-container a.meanmenu-reveal, .header-style-four .pearo-responsive-nav .mean-container a.meanmenu-reveal.meanclose { color: #ffffff !important; } .header-style-four .pearo-responsive-nav .mean-container a.meanmenu-reveal span { background-color: #ffffff !important; } .mean-container .mean-nav { background-color: #ffffff; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16); } .mean-container .mean-nav ul li a, .mean-container .mean-nav ul li li a { border-top-color: var(--slate-100); color: var(--slate-800); } .mean-container .mean-nav ul li a:hover, .mean-container .mean-nav ul li a:focus { background-color: var(--surface-warm); color: var(--primary-color); } }