/* LineCraft shared theme (Orbixe): footer + purple electricity + transparent sections */

/* Sub-page sections: light grey bands go transparent so the electricity shows through;
   dark bands switch to the site's deep-purple/black palette so they match the nav. */
body.lc-static-nav .bg-grey, body.lc-static-nav .after-bg-grey, body.lc-static-nav .bg-grey-2,
body.lc-static-nav .community-content, body.lc-static-nav .white-box, body.lc-static-nav .grey-box {
  background: transparent !important; box-shadow: none !important;
}
body.lc-static-nav .bg-dark-blue, body.lc-static-nav .bg-theme {
  background: linear-gradient(135deg, #0b0716, #1a0b33) !important;
  border-top: 1px solid rgba(168,85,247,0.35); border-bottom: 1px solid rgba(168,85,247,0.35);
}
body.lc-static-nav .container { position: relative; z-index: 2; }
body.lc-static-nav .elec-bg { opacity: 1; }
html, body { background: #ffffff; }

/* ===== Bottom-of-page cleanup ===== */
/* "Utility Companies" title was white-on-white after going transparent */
.brand-bg .title.text-white { color: #111 !important; }
.brand-bg .owl-carousel .item img { filter: none; opacity: .9; }

/* Outage map: transparent section, the iframe itself gets a thin glowing frame */
.bg-black.sec-pad {
  background: transparent !important;
  position: relative; z-index: 2;
  padding: 40px 16px !important;
}
.bg-black.sec-pad .iframe-width {
  display: block; margin: 0 auto;
  width: 100% !important; max-width: 1100px;
  /* The widget renders at a fixed aspect — lock it so nothing gets cropped */
  aspect-ratio: 992 / 593;
  height: auto !important;
  padding: 0 !important;
  border-radius: 16px;
  border: 1px solid rgba(168,85,247,0.45);
  box-shadow: 0 0 24px rgba(124,58,237,0.25);
  background: #fff;
}

/* Footer: dark text on the transparent page, thin purple rule on top */
.footer { padding: 56px 0 28px !important; border-top: 1px solid rgba(168,85,247,0.35); margin-top: 20px; margin-bottom: 0 !important; position: relative; z-index: 2; }
body { margin-bottom: 0 !important; padding-bottom: 0 !important; overflow-x: hidden; }
.elec-bg { bottom: auto; }
.footer .f-logo { height: auto; width: clamp(180px, 26vw, 260px); filter: none; }
.footer .text-white, .footer .ft-20 { color: #111 !important; }
.footer .f-links, .footer a { color: #333 !important; text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
.footer .f-links:hover, .footer a:hover { color: #7c3aed !important; text-shadow: 0 0 10px rgba(168,85,247,0.5); }
.footer .text-grey-2 { color: #555 !important; }
.footer .mail-icon { fill: #333 !important; }
.footer img[src*="f-call"], .footer .social-box img { filter: brightness(0) saturate(100%) invert(14%); }
.footer .social-box {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.5);
  background: rgba(168,85,247,0.08) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.footer .social-box:hover { box-shadow: 0 0 18px rgba(168,85,247,0.6); transform: translateY(-2px); }
.footer .f-ul { list-style: none; padding: 0; margin: 0; }
.footer .f-ul li { margin-bottom: 8px; }
.footer .s-footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; display: flex; flex-direction: column; align-items: center; }
.footer .s-footer p { font-size: 13px; color: #777 !important; }
.footer .s-footer .powered-by {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #05060f, #150a2e) !important;
  border: 1px solid rgba(34,211,238,0.45);
  box-shadow: 0 0 18px rgba(34,211,238,0.22), 0 0 30px rgba(124,58,237,0.25);
  text-decoration: none !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.footer .s-footer .powered-by img {
  height: 44px; width: 44px; object-fit: cover; object-position: 50% 35%;
  border-radius: 50%; display: block;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.5), 0 0 12px rgba(34,211,238,0.5);
}
.footer .s-footer .powered-by .pb-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.footer .s-footer .powered-by small  { color: rgba(226,232,240,0.6) !important; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.footer .s-footer .powered-by strong { color: #fff !important; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; text-shadow: 0 0 10px rgba(34,211,238,0.6); }
.footer .s-footer .powered-by:hover { box-shadow: 0 0 28px rgba(34,211,238,0.6), 0 0 48px rgba(124,58,237,0.5); transform: translateY(-2px); }


/* ===== FULL-PAGE PURPLE ELECTRICITY (behind everything) ===== */
.elec-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.0s ease 1.1s;
}
body.intro-done .elec-bg { opacity: 1; }
.elec-bg .bolt {
  position: absolute;
  display: block;
  will-change: transform, opacity, filter;
  transform-origin: 50% 0%;
  animation:
    boltDrift var(--dur, 30s) ease-in-out var(--off, 0s) infinite alternate,
    boltBreathe var(--pulse, 7s) ease-in-out var(--off, 0s) infinite;
}
.elec-bg .bolt.flash {
  animation:
    boltDrift var(--dur, 30s) ease-in-out var(--off, 0s) infinite alternate,
    boltBreathe var(--pulse, 7s) ease-in-out var(--off, 0s) infinite,
    boltFlash 0.9s ease-out 1;
}
@keyframes boltDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(var(--dx, 18px), var(--dy, -10px), 0) scale(1.03); }
}
@keyframes boltBreathe {
  0%,100% { opacity: var(--o, 0.85); filter: drop-shadow(0 0 0 rgba(168,85,247,0)); }
  50%     { opacity: 1;              filter: drop-shadow(0 0 10px rgba(168,85,247,0.55)); }
}
@keyframes boltFlash {
  0%   { filter: brightness(1)   drop-shadow(0 0 0   rgba(200,150,255,0)); }
  12%  { filter: brightness(2.2) drop-shadow(0 0 28px rgba(200,150,255,1)); }
  30%  { filter: brightness(1.2) drop-shadow(0 0 10px rgba(200,150,255,0.6)); }
  45%  { filter: brightness(1.9) drop-shadow(0 0 22px rgba(200,150,255,0.9)); }
  100% { filter: brightness(1)   drop-shadow(0 0 0   rgba(200,150,255,0)); }
}
.shape01 { animation: shapeFloatA 22s ease-in-out infinite, shapeGlowA 6s ease-in-out infinite; }
.shape02 { animation: shapeFloatB 26s ease-in-out infinite, shapeGlowB 8s ease-in-out infinite; }
.shape03 { animation: shapeFloatA 30s ease-in-out infinite reverse, shapeGlowA 7s ease-in-out infinite; }
.shape04 { animation: shapeFloatB 24s ease-in-out infinite reverse, shapeGlowB 9s ease-in-out infinite; }
.shape05 { animation: shapeFloatA 28s ease-in-out infinite, shapeGlowB 10s ease-in-out infinite; }
.shape06 { animation: shapeFloatB 32s ease-in-out infinite reverse, shapeGlowA 8s ease-in-out infinite; }
.shape07 { animation: shapeFloatA 26s ease-in-out infinite reverse, shapeGlowA 9s ease-in-out infinite; }

@keyframes shapeFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18px, 10px) scale(1.03); }
}
@keyframes shapeFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(14px, -12px) scale(1.04); }
}
@keyframes shapeGlowA {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 2px rgba(224,23,34,0.0)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 10px rgba(224,23,34,0.45)); }
}
@keyframes shapeGlowB {
  0%, 100% { opacity: 0.75; filter: drop-shadow(0 0 1px rgba(224,23,34,0.0)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 14px rgba(224,23,34,0.55)); }
}

/* Make sure the shapes render above transparent section backgrounds
   but still sit behind the actual text content. */
.shape01, .shape02, .shape03, .shape04,
.shape05, .shape06, .shape07 { z-index: 0; position: relative; }
.container { position: relative; z-index: 2; }

/* -------- GIF-based purple lightning strikes spanning the page -------- */
html, body { position: relative; } 
/* Hero section fills the full viewport.
   Background starts black for cinematic intro, fades to white when done.
   After the intro the hero shrinks so the logo sits with less empty space. */
body .hero-sec {
  position: relative !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #000 !important;
  /* Handoff happens the instant the video hits its white/logo frame:
     our logo is placed pixel-for-pixel over the video's logo, the video
     drops out, then hero + logo glide together to the settled layout. */
  transition:
    background 0s,
    height 0.75s cubic-bezier(.7,0,.25,1) 0.15s,
    min-height 0.75s cubic-bezier(.7,0,.25,1) 0.15s !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.intro-done .hero-sec {
  background: #ffffff !important;
  /* Just enough room for the logo + a little breathing space — no void */
  height: clamp(220px, 30vh, 340px) !important;
  min-height: clamp(220px, 30vh, 340px) !important;
}



/* ============ Brand color: deep purple everywhere the template used blue ============ */
:root { --lc-purple: #7c3aed; --lc-purple-2: #a855f7; --lc-ink: #0b0716; --lc-ink-2: #1a0b33; }

/* Template's static red shapes off on every page (purple electricity replaces them) */
.shape01, .shape02, .shape03, .shape04, .shape05, .shape06, .shape07 { display: none !important; }

/* Footer is transparent on every page (template painted it blue) */
.footer { background: transparent !important; }

/* Page-top banners: keep the photo untouched, just title legibility + purple edge */
.inner-hero-bg { position: relative; border-bottom: 2px solid rgba(168,85,247,0.6); }
.inner-hero-bg .hero-title, .inner-hero-bg h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.75); }

/* Buttons */
.btn-theme, .btn.btn-theme {
  background: linear-gradient(135deg, var(--lc-purple), var(--lc-purple-2)) !important;
  border: 1px solid rgba(233,213,255,0.5) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(124,58,237,0.35) !important;
  border-radius: 999px !important;
}
.btn.btn-theme:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,58,237,0.5) !important; }

/* Icon boxes (service icons) */
.blue-icon-box img, .h-call-icon {
  background: linear-gradient(135deg, var(--lc-purple), var(--lc-purple-2)) !important;
  border-radius: 14px;
}
.h-call-icon { border-radius: 50%; }
.blue-icon-box img { padding: 12px; box-shadow: 0 8px 20px rgba(124,58,237,0.35); }

/* Small eyebrow titles + accents */
.small-title { color: var(--lc-purple) !important; letter-spacing: .14em; }
.timeline .timeline-date::after { box-shadow: 0 0 0 6px var(--lc-purple) !important; }
.team-profile-box { border-color: var(--lc-purple) !important; }
.review-box::before { background-color: var(--lc-purple) !important; }

/* Pills (Our Work tabs) */
.nav-pills .nav-link { background: #ffffff !important; color: var(--lc-ink) !important; border: 1px solid rgba(124,58,237,0.35) !important; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--lc-purple), var(--lc-purple-2)) !important; color: #fff !important; border-color: transparent !important; }

/* Any remaining light/lavender fills become transparent so the lightning shows */
.light-blue, .bg-light, .bg-grey, .bg-grey-2, .after-bg-grey, .community-content, .white-box, .grey-box,
[class*="light-blue"], [style*="background-color: #F3F4F7"] { background: transparent !important; }

/* Dark bands: deep purple/black, consistent everywhere */
.bg-dark-blue, .bg-theme {
  background: linear-gradient(135deg, var(--lc-ink), var(--lc-ink-2)) !important;
  border-top: 1px solid rgba(168,85,247,0.35); border-bottom: 1px solid rgba(168,85,247,0.35);
}

/* ============ Partner companies: black box with purple edge ============ */
.brand-bg.sec-pad {
  background: #000 !important;
  background-image: none !important;
  border: 1px solid rgba(168,85,247,0.55);
  border-radius: 22px;
  margin: 24px auto;
  max-width: 1240px;
  width: calc(100% - 32px);
  box-shadow: 0 0 36px rgba(124,58,237,0.25);
  position: relative; z-index: 2;
}
.brand-bg .title { color: #fff !important; }
.brand-bg .owl-carousel .item img { filter: none; opacity: 1; }

/* Catch-all: remaining template blues -> purple */
.hero-btn, .text-blue, .blue { color: inherit; }
.hero-btn { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #fff !important; }
.h-call:hover div { color: #e9d5ff !important; }
a:not(.btn):not(.nav-link):not(.f-links):not(.powered-by):hover { color: #7c3aed; }