/* =====================================================
   TECHNOICONIC — DARK "UNICORN AGENCY" DESIGN SYSTEM
   Loaded only on pages that have opted into the new look
   (currently: Home page). Overrides page.css / style.css /
   menu.css tokens + components — does not edit those files,
   so every other page is completely unaffected.
   Reuses the existing .ti-* class names already in the PHP,
   so no markup had to change to adopt this.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Cool accent (was brand blue #257092) → sky cyan, pops on dark */
  --ti-primary: #38bdf8;
  --ti-primary-dark: #0ea5e9;
  --ti-primary-light: #7dd3fc;
  /* Warm accent (brand orange) → brighter, glows on dark */
  --ti-accent: #ff8a00;
  --ti-accent-dark: #ea580c;
  --ti-accent-light: #ffb74d;
  --ti-heading: #ffffff;
  --ti-text: #c4cedb;
  --ti-light-bg: rgba(255, 255, 255, 0.045);
  --ti-border: rgba(255, 255, 255, 0.12);
  --ti-gradient: linear-gradient(135deg, #ff6b00 0%, #ff8a00 50%, #f59e0b 100%);
  --ti-gradient-soft: rgba(255, 138, 0, 0.12);
  --ti-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.65);
  --ti-shadow-hover: 0 0 46px -8px rgba(255, 138, 0, 0.35), 0 24px 50px -18px rgba(0, 0, 0, 0.75);
  --ti-radius: 18px;
  --ti-surface: #0b0d14;
  --ti-surface-elevated: #10131c;
}

body {
  background: var(--ti-surface);
  color: var(--ti-text);
}

.ti-section-title,
.ti-main-heading,
.ti-process-box h3,
.ti-process-box h4,
.ti-detail-card h3,
.ti-feature-card h3,
.ti-service-card h3,
.ti-testimonial-card h3,
.ti-area-card h3,
.ti-areas-section h2,
.ti-faq-section .container > h2,
.accordion-button,
.ti-cta-section h2,
.ti-final-cta h2,
.ti-business-section .ti-section-title,
section h2 {
  font-family: 'Space Grotesk', Ubuntu, Arial, Helvetica, sans-serif;
}

/* ===================== BACKDROP TEXTURE ===================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

/* ===================== HEADER / NAV ===================== */
/* IMPORTANT — do not add backdrop-filter/filter/transform to EITHER .top-bar
   OR header. Both have position:fixed descendants that must stay pinned to
   the real viewport:
     - .top-bar's child `header` is itself position:fixed — a filter on
       .top-bar would make header fixed relative to .top-bar instead (it
       would then scroll away with the page instead of staying pinned).
     - header's own child `.bsnav-mobile` (the mobile slide-out menu) is
       ALSO position:fixed — a filter on header would squash that panel's
       "top:0;bottom:0" down to header's own ~64px height instead of the
       full screen, instead of a proper full-height off-canvas menu.
   Both bugs happened here already — keep this plain (no blur) so a fixed
   descendant several levels down never silently breaks again. */
.top-bar {
  background: rgba(8, 9, 14, 0.92) !important;
  border-bottom: 1px solid var(--ti-border);
}
/* Sticky-on-scroll state — toggled by JS (.scrolled class) once the page
   scrolls past the hero, so the header visibly reacts instead of sitting
   static the whole time. */
header {
  background: rgba(8, 9, 14, 0.92) !important;
  display: flex;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.top-bar.scrolled header {
  background: rgba(6, 7, 11, 0.98) !important;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.85);
}
.bsnav { background: transparent !important; }
.navbar-expand-lg .navbar-nav .nav-link,
.navbar-nav .nav-link { padding: 20px 18px; }
.navbar-nav .nav-item,
.navbar-nav .nav-link { color: #e8edf4 !important; }
.navbar-nav .nav-item:hover > .nav-link,
.navbar-nav .nav-item.active > .nav-link { color: var(--ti-accent) !important; }
.nav-item .caret { border-top-color: #e8edf4; }
.nav-item.active .caret, .nav-item:hover .caret { border-top-color: var(--ti-accent) !important; }
.nav-item.dropdown > .navbar-nav,
.nav-item.dropdown > .navbar-nav .navbar-nav {
  background: var(--ti-surface-elevated) !important;
  border: 1px solid var(--ti-border);
  border-radius: 12px;
  box-shadow: var(--ti-shadow);
}
.nav-item.dropdown > .navbar-nav .nav-item .nav-link { color: #e8edf4 !important; }
.nav-item.dropdown > .navbar-nav .nav-item:hover .nav-link { color: var(--ti-accent) !important; }
.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon::after,
.navbar-toggler .navbar-toggler-icon::before { background-color: #ffffff !important; }
.bsnav-mobile .navbar { background: var(--ti-surface-elevated) !important; }
.bsnav-mobile .navbar-nav .nav-item .nav-link { color: #e8edf4 !important; }

/* ===================== SMALL TITLE / SECTION TITLES ===================== */
.ti-small-title {
  background: rgba(255, 138, 0, 0.12);
  border: 1px solid rgba(255, 138, 0, 0.35);
  color: var(--ti-accent-light);
}

.ti-section-title span {
  background: linear-gradient(135deg, var(--ti-primary-light) 0%, var(--ti-accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================== HERO ===================== */
.ti-hero-section {
  background: radial-gradient(circle at 85% -10%, rgba(255, 107, 0, 0.16) 0%, transparent 55%),
              radial-gradient(circle at -5% 110%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
              var(--ti-surface);
}
@media (min-width: 992px) {
  .ti-hero-section {
    background-image: radial-gradient(circle at 85% -10%, rgba(255, 107, 0, 0.18) 0%, transparent 55%),
                       radial-gradient(circle at -5% 110%, rgba(56, 189, 248, 0.14) 0%, transparent 55%);
    background-color: var(--ti-surface);
  }
  .ti-hero-section::before { content: none; }
}
/* home hero banner: page.css's .ti-hero-section.ti-home-hero (two classes) is more specific
   than the plain .ti-hero-section rule above, so the light banner photo + white fade overlay
   was still winning here even in dark mode, leaving a light patch at the top of the homepage.
   Match that same specificity here so the dark treatment above applies on the homepage too. */
@media (min-width: 992px) {
  .ti-hero-section.ti-home-hero {
    background-image: radial-gradient(circle at 85% -10%, rgba(255, 107, 0, 0.18) 0%, transparent 55%),
                       radial-gradient(circle at -5% 110%, rgba(56, 189, 248, 0.14) 0%, transparent 55%);
    background-color: var(--ti-surface);
  }
  .ti-hero-section.ti-home-hero::before { content: none; }
}
.ti-main-heading,
.ti-sub-heading strong { color: var(--ti-heading); }
.ti-main-heading { margin-bottom: 28px; }
.ti-sub-heading { color: var(--ti-text); margin-bottom: 8px; }

/* Hero visual — fills the empty right column on desktop with a dummy
   product shot (swap assets/images/hero-dummy.png for a real photo later) */
.ti-hero-visual {
  position: relative;
  border-radius: var(--ti-radius);
  border: 1px solid var(--ti-border);
  background: var(--ti-light-bg);
  backdrop-filter: blur(14px);
  padding: 14px;
  box-shadow: var(--ti-shadow);
}
.ti-hero-visual img { width: 100%; border-radius: 12px; display: block; }
.ti-hero-visual::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--ti-radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.5), transparent 40%, rgba(56, 189, 248, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* NOTE: .ti-hero-visual is hidden below lg by the HTML's own
   "d-none d-lg-block" Bootstrap classes — no CSS override needed here,
   that would just be a duplicate of the same rule. */

.ti-service-card,
.ti-feature-card,
.ti-detail-card,
.ti-process-box,
.ti-testimonial-card,
.ti-area-card,
.ti-type-card,
.ti-img-placeholder,
.ti-industry-flex-item,
.ti-contact-card,
.accordion-item,
.accordion-button,
.accordion-body {
  background: var(--ti-light-bg) !important;
  border-color: var(--ti-border) !important;
  color: var(--ti-text);
  backdrop-filter: blur(14px);
}

.ti-service-card:hover,
.ti-feature-card:hover,
.ti-detail-card:hover,
.ti-process-box:hover,
.ti-testimonial-card:hover,
.ti-area-card:hover,
.ti-type-card:hover,
.ti-contact-card:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 138, 0, 0.4) !important;
}

.ti-service-card h3, .ti-feature-card h3, .ti-detail-card h3,
.ti-process-box h4, .ti-testimonial-card h3, .ti-area-card h3 { color: var(--ti-heading); }

.ti-service-card p, .ti-feature-card p, .ti-detail-card p,
.ti-process-box p, .ti-area-card p, .ti-type-card { color: var(--ti-text); }

.ti-why-section,
.ti-services-detail-section,
.ti-industry-section,
.ti-portfolio-section,
.ti-split-section,
.ti-testimonial-section,
.ti-areas-section,
.ti-faq-section,
.ti-process-section,
.ti-business-section {
  background: transparent;
  position: relative;
}

/* Give every section a visible seam so adjacent dark sections never
   look like one fused block, even when their fills are similar. */
.ti-why-section,
.ti-services-detail-section,
.ti-industry-section,
.ti-portfolio-section,
.ti-split-section,
.ti-testimonial-section,
.ti-areas-section,
.ti-faq-section,
.ti-process-section,
.ti-business-section,
.ti-hero-section {
  border-bottom: 1px solid var(--ti-border);
}

.ti-why-section:nth-of-type(even),
.ti-services-detail-section,
.ti-testimonial-section,
.ti-process-section {
  background: rgba(255, 255, 255, 0.02);
}

.ti-pair-section .col-lg-6:nth-child(2) { border-left: 1px solid var(--ti-border); }

section p, .ti-section-desc { color: var(--ti-text); }

/* ===================== ICON BADGES ===================== */
.ti-service-card .ti-icon,
.ti-detail-icon {
  background: rgba(255, 138, 0, 0.15);
  color: var(--ti-accent-light);
}
.ti-service-card:hover .ti-icon,
.ti-detail-card:hover .ti-detail-icon {
  background: var(--ti-gradient);
  color: #fff;
}
.ti-feature-icon {
  background: rgba(56, 189, 248, 0.14);
  color: var(--ti-primary-light);
}
.ti-feature-card:hover .ti-feature-icon {
  background: var(--ti-gradient);
  color: #fff;
}

/* ===================== PROCESS ===================== */
.ti-process-box h3 {
  color: rgba(255, 138, 0, 0.18);
  -webkit-text-stroke: 1px var(--ti-accent-light);
}

/* ===================== TECH STRIP ===================== */
.ti-tech-section {
  background: linear-gradient(120deg, #0b0d14 0%, #141a26 100%);
  border-top: 1px solid var(--ti-border);
  border-bottom: 1px solid var(--ti-border);
}
.ti-tech-section .ti-section-title { color: var(--ti-heading); }
.ti-tech-list li {
  background: rgba(255, 255, 255, 0.05);
  color: #e8edf4;
  border-color: var(--ti-border);
}
.ti-tech-list li:hover { background: var(--ti-gradient); border-color: transparent; color: #fff; }

/* ===================== INDUSTRIES ===================== */
.ti-industry-flex-item { color: var(--ti-heading); }
.ti-industry-flex-item i { color: var(--ti-primary-light); }
.ti-industry-flex-item:hover {
  background: var(--ti-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.ti-industry-flex-item:hover i { color: #fff; }

/* ===================== TESTIMONIALS ===================== */
.ti-testimonial-card::before { color: rgba(255, 138, 0, 0.22); }
.ti-testimonial-card p { color: var(--ti-text); }
.ti-testimonial-card span { color: var(--ti-accent-light); }

/* ===================== SPLIT SECTIONS ===================== */
.ti-split-list li { border-bottom-color: var(--ti-border); color: var(--ti-text); }
.ti-split-list li::before { color: var(--ti-accent); }
.ti-img-placeholder { border-style: solid; }

/* ===================== BUSINESS CHECKLIST ===================== */
.ti-business-section { background: transparent; }
.ti-check-list li {
  background: var(--ti-light-bg);
  border-color: var(--ti-border) !important;
  border-left: 3px solid var(--ti-accent);
  color: var(--ti-heading);
}
.ti-check-list li:hover { background: rgba(255, 255, 255, 0.075); border-left-color: var(--ti-primary); }

/* ===================== AREAS / LOCAL COVERAGE ===================== */
.ti-areas-section p { color: var(--ti-text); }
.ti-areas-section h2 a { color: var(--ti-accent-light); }
.ti-area-card { border-left: 3px solid var(--ti-primary); }
.ti-area-card:hover { border-left-color: var(--ti-accent); }

/* ===================== FAQ / ACCORDION ===================== */
.ti-faq-section .container > h2::before {
  background: rgba(255, 138, 0, 0.12);
  color: var(--ti-accent-light);
}
.accordion-button { color: var(--ti-heading) !important; }
.accordion-button:hover { background: rgba(255, 255, 255, 0.075) !important; color: var(--ti-primary-light) !important; }
.accordion-button::before { background: var(--ti-gradient); color: #fff; }
.accordion-button:not(.collapsed) { background: rgba(255, 138, 0, 0.12) !important; color: var(--ti-heading) !important; }
.accordion-button:not(.collapsed):hover { background: rgba(255, 138, 0, 0.18) !important; }
.accordion-button:not(.collapsed)::before { background: #fff; color: var(--ti-accent-dark); }
.accordion-body { color: var(--ti-text) !important; border-top: 2px solid var(--ti-accent); }

/* ===================== PORTFOLIO ===================== */
.ti-portfolio-img { background: var(--ti-light-bg); border: 1px solid var(--ti-border); padding: 8px; }
.ti-portfolio-img img { border-radius: 12px; }

/* ===================== CTA STRIPS ===================== */
.ti-cta-section {
  background: radial-gradient(circle at 20% 20%, rgba(255, 107, 0, 0.22) 0%, transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.16) 0%, transparent 55%),
              var(--ti-surface-elevated);
  border-top: 1px solid var(--ti-border);
  border-bottom: 1px solid var(--ti-border);
}
.ti-cta-section h2 { color: #ffffff; }

.ti-final-cta {
  background: radial-gradient(circle at 15% 30%, rgba(255, 107, 0, 0.28) 0%, transparent 55%),
              radial-gradient(circle at 85% 70%, rgba(56, 189, 248, 0.16) 0%, transparent 55%),
              var(--ti-surface-elevated);
  border-top: 1px solid var(--ti-border);
  border-bottom: none;
  position: relative;
  z-index: 1;
}
.ti-final-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--ti-gradient);
  opacity: 0.7;
}
.ti-final-cta h2 { color: #ffffff; }
.ti-final-cta p { color: var(--ti-text); }

/* ===================== BUTTONS ===================== */
.ti-btn {
  background: var(--ti-gradient);
  color: #fff !important;
  box-shadow: 0 10px 26px -6px rgba(255, 107, 0, 0.55);
}
.ti-btn:hover { color: #fff !important; box-shadow: 0 14px 32px -6px rgba(255, 107, 0, 0.7); }
.ti-btn-green { background: var(--ti-green); box-shadow: 0 10px 26px -6px rgba(37, 211, 102, 0.5); }
.ti-btn-green:hover { background: var(--ti-green-dark); }

/* ===================== OWL CAROUSEL NAV ===================== */
.owl-nav button.owl-prev, .owl-nav button.owl-next {
  background: var(--ti-surface-elevated) !important;
  color: var(--ti-accent-light) !important;
  border: 1px solid var(--ti-border);
}
.owl-nav button.owl-prev:hover, .owl-nav button.owl-next:hover {
  background: var(--ti-gradient) !important;
  color: #fff !important;
}
.owl-dots .owl-dot span { background: var(--ti-border); }
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: var(--ti-accent); }

/* ===================== FOOTER ===================== */
.new_footer_area {
  background: var(--ti-surface-elevated) !important;
  border-top: 1px solid var(--ti-border);
}
.new_footer_top {
  margin-top: 0 !important; /* base style.css sets margin-top:30px — unwanted gap above the footer with the dark theme's border-seam layout */
  background-image: none !important;
  background-color: var(--ti-surface-elevated) !important;
}
.new_footer_area .f-title, .new_footer_area h3 { color: #ffffff !important; }
.new_footer_area .f_list a,
.new_footer_area .methodology li{ color: var(--ti-text) !important; }
.new_footer_area .f_list a:hover { color: var(--ti-accent-light) !important; }
.new_footer_area .methodology li i { color: var(--ti-accent-light); }
.new_footer_area .social li a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid var(--ti-border);
}
.new_footer_area .social li a:hover { background: var(--ti-gradient) !important; }
.new_footer_area .footer_bottom {
  background: var(--ti-surface) !important;
  border-top: 1px solid var(--ti-border);
}
.new_footer_area .footer_bottom p { color: var(--ti-text) !important; }

/* Fixed bottom call/WhatsApp bar (mobile) — make it glow so it catches the eye */
#call_btn, #wpl_btn { box-shadow: var(--ti-shadow); }
#call_btn > a {
  background: var(--ti-gradient) !important;
  border-color: transparent !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  animation: tiGlowOrange 2.2s ease-in-out infinite;
}
#wpl_btn > a {
  background: #25d366 !important;
  border-color: transparent !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  animation: tiGlowGreen 2.2s ease-in-out infinite;
}
@keyframes tiGlowOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.55); }
  50% { box-shadow: 0 -4px 22px 2px rgba(255, 138, 0, 0.65); }
}
@keyframes tiGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  50% { box-shadow: 0 -4px 22px 2px rgba(37, 211, 102, 0.65); }
}
@media (max-width: 767px) {
  #call_btn > a, #wpl_btn > a {
    height: 50px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* ===================== MOBILE FULL-PAGE MENU (dark, 2026-09-23) ===================== */
@media (max-width:991px){
.bsnav-mobile .navbar{background:var(--ti-surface-elevated) !important}
.bsnav-mobile .navbar-nav .nav-item{border-bottom-color:var(--ti-border) !important}
.bsnav-mobile .navbar-nav .nav-item .nav-link{color:var(--ti-heading) !important}
.bsnav-mobile .navbar-nav .nav-item .navbar-nav{background:var(--ti-surface) !important}
.bsnav-mobile .navbar-nav .nav-item .navbar-nav .nav-item .nav-link{color:var(--ti-text) !important}
}

/* =====================================================
   UAE / DUBAI PAGE CLUSTER — dark theme
   All classes below are .ti-uae-* / .ti-p0[2-7]-* -- prefixes confirmed unique
   to the 7 UAE pages (uae.php, website-design-dubai.php, website-development-
   dubai.php, wordpress-website-design-dubai.php, ecommerce-website-design-
   dubai.php, shopify-website-design-dubai.php, landing-page-design-dubai.php),
   so nothing here can affect any other page. The UAE hero sections and a few
   "always dark" panels (Dubai skyline band, WhatsApp mockups, final CTA bands)
   were already dark navy by original design — those are untouched here.
   Elaborate device/browser/app mockup illustrations (wireframes, dashboards,
   phone screens, WhatsApp chat, receipts, SERP previews) are deliberately left
   in their light styling since they represent real, normally-light software UI.
   ===================================================== */

/* shared structural classes (uae-pages.css) — used on every one of the 7 pages */
.ti-uae-section { background: var(--ti-surface); }.ti-uae-stat,
.ti-uae-prob,
.ti-uae-svc,
.ti-uae-feat,
.ti-uae-step,
.ti-uae-cost,
.ti-uae-float{
  background: var(--ti-surface-elevated);
}
.ti-uae-float { border: 1px solid var(--ti-border); }
.ti-uae-arrow { background: var(--ti-surface-elevated); }

/* website-design-dubai.php (uae-p02) */
.ti-p02-hero {
  background: radial-gradient(700px 400px at 90% 0%, rgba(255, 107, 0, 0.16) 0%, transparent 60%),
              radial-gradient(600px 400px at 0% 100%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
              var(--ti-surface);
}

/* website-development-dubai.php (uae-p03) */
.ti-p03-hero {
  background: radial-gradient(700px 400px at 90% 0%, rgba(255, 107, 0, 0.16) 0%, transparent 60%),
              radial-gradient(600px 400px at 0% 100%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
              var(--ti-surface);
}
.ti-p03-hero .ti-p03-h1 { color: var(--ti-heading); }

/* wordpress-website-design-dubai.php (uae-p04) */
.ti-p04-hero {
  background: radial-gradient(700px 400px at 90% 0%, rgba(255, 225, 200, 0.10) 0%, transparent 60%),
              radial-gradient(600px 400px at 0% 100%, rgba(211, 232, 243, 0.10) 0%, transparent 60%),
              var(--ti-surface);
}
.ti-p04-hero .ti-p04-h1 { color: var(--ti-heading); }
.ti-p04-hero .ti-p04-sub { color: var(--ti-text) !important; }

/* ecommerce-website-design-dubai.php (uae-p05) — h1 already uses var(--ti-heading) */
.ti-p05-hero {
  background: radial-gradient(520px 320px at 8% 10%, rgba(255, 95, 74, 0.14) 0%, transparent 70%),
              radial-gradient(640px 380px at 92% 0%, rgba(238, 127, 28, 0.16) 0%, transparent 70%),
              var(--ti-surface);
}
.ti-p05-hero-photo { background-color: var(--ti-surface-elevated); }

/* shopify-website-design-dubai.php (uae-p06) — h1 already uses var(--ti-heading) */
.ti-p06-hero { background: var(--ti-surface); }
.ti-p06-panel { background: var(--ti-surface-elevated); }
.ti-p06-checks { background: rgba(255, 255, 255, 0.06); }

/* landing-page-design-dubai.php (uae-p07) */
.ti-p07-hero {
  background: radial-gradient(760px 420px at 92% 6%, rgba(246, 185, 59, 0.16) 0%, transparent 62%),
              radial-gradient(560px 380px at 0% 100%, rgba(238, 127, 28, 0.10) 0%, transparent 65%),
              var(--ti-surface);
}
.ti-p07-hero .ti-p07-h1 { color: var(--ti-heading); }


/* =====================================================
   ROUND 44 -- dark theme rolled out to the remaining
   non-UAE pages that never loaded this stylesheet before
   (404, enquiry, google-ads, privacy-policy, thank-you,
   both Burari orphan pages, and website-designing-company-
   in-north-delhi.php). These pages use older, page-specific
   CSS (style.css / services.css) with a few hardcoded light
   backgrounds -- scoped overrides below so those components
   don't end up as a light box on the new dark body.
   ===================================================== */

/* 404.php */
.page_404 { background: var(--ti-surface); }

/* thank-you.php and website-designer-burari-sant-nagar.php share this class */
.thanx { background: var(--ti-surface-elevated); }

/* google-ads.php's service-card grid */
.our-services {
  background-color: var(--ti-surface-elevated);
  box-shadow: var(--ti-shadow);
}
.our-services p,
.h4 { color: var(--ti-text); }

/* website-designing-company-in-north-delhi.php (legacy .kalkaji-* template) */
.inner-sidebar { background: var(--ti-surface-elevated); }
.kalkaji-sidebar ul li a { color: var(--ti-text); }
.kalkaji-sidebar ul li a:hover { color: var(--ti-accent); }
.kalkaji-sidebar h2,
.kalkaji-main-content h2,
.kalkaji-main-content h3 { color: var(--ti-heading); }