/*
 * ============================================================
 * WALTER ELECTRIC ⚡️ — Main Stylesheet
 * ============================================================
 * Uses Bootstrap's native carousel. All image content is
 * built with CSS gradients, shapes, and Bootstrap Icons.
 * Replace with real photographs when available.
 * ============================================================
 */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --color-primary: #f59e0b;
  --color-primary-dark: #d97706;
  --color-dark: #1a1a2e;
  --color-darker: #0f0f1a;
  --color-white: #ffffff;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --section-padding: 100px 0;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --nav-height: 76px;            /* Total height of the fixed navbar */
  --nav-shell-max: 1160px;       /* Centered nav pill maximum width */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-primary);
  background-color: var(--color-darker);
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
img { max-width: 100%; height: auto; }
.text-warning { color: var(--color-primary) !important; }


/* ============================================================
   3. NAVBAR — PERMANENT, CENTERED PILL + GLOBE DROPDOWN
   ============================================================
   DESIGN:
   ┌─────────────────────────────────────────────────────────┐
   │  [🌐]  Walter Electric ⚡️      Home Services About Contact │
   └─────────────────────────────────────────────────────────┘
        ↑ glob   ↑ brand            ↑ links (ms-auto)

   WHY each rule:
   - #mainNav is position:fixed → permanently at the top
   - .nav-shell is max-width + centered → floating centered pill
   - .globe-btn sits at the LEFT of the pill
   - Glass background (backdrop-filter) + rounded corners
   ============================================================ */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  z-index: 1000;
  transition: all var(--transition-normal);
  background: transparent;
  border-bottom: none;
}

/* The centered pill that holds all navbar content */
.nav-shell {
  display: flex;
  align-items: center;
  max-width: var(--nav-shell-max);
  background: rgba(15, 15, 26, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px 18px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  transition: all var(--transition-normal);
}

/* When scrolled, the pill blends into the black bar */
#mainNav.scrolled .nav-shell {
  background: rgba(15, 15, 26, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  padding-left: 18px;
  padding-right: 18px;
}

/* ─── GLOBE BUTTON (left side) ───
   Circular button with a globe icon, opens the language menu. */
.globe-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0;
  transition: all var(--transition-fast);
}

.globe-btn:hover,
.globe-btn:focus {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

/* ─── LANGUAGE DROPDOWN MENU ─── */
.lang-dropdown .dropdown-menu {
  background: rgba(20, 20, 33, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  margin-top: 8px;
}

.lang-dropdown .lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 12px;
  transition: all var(--transition-fast);
}

.lang-dropdown .lang-item i {
  color: var(--color-primary);
}

/* Highlight the currently-selected language */
.lang-dropdown .lang-item.active,
.lang-dropdown .lang-item:hover {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-primary);
}

.lang-dropdown .lang-item.active::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-left: auto;
}

/* Keep the language menu clear of the screen edge on small screens */
@media (max-width: 575px) {
  .lang-dropdown .dropdown-menu {
    min-width: 160px;
    margin-left: 0;
  }
}

/* ─── BRAND ─── */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.35rem;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
/* Small company logo mark in front of the wordmark */
.navbar-logo {
  width: 34px;
  height: auto;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ─── NAV LINKS ─── */
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  padding: 8px 16px !important;
  border-radius: 6px;
  transition: all var(--transition-fast);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
  background-color: rgba(245, 158, 11, 0.1);
}

/* ─── HAMBURGER (mobile) ─── */
.navbar-toggler { border-color: rgba(255, 255, 255, 0.3); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ============================================================
   4. HERO CAROUSEL — BOOTSTRAP NATIVE
   ============================================================
   Bootstrap's carousel provides:
   - Auto-rotation via data-bs-ride="carousel" data-bs-interval="3000"
   - Prev/next arrows via carousel-control-prev/next
   - Indicator dots via carousel-indicators
   - Swipe support on mobile (built-in)
   - Slide transition animation (built-in)

   ⚠️ OVERLAP FIX:
   The navbar is position:fixed (removed from page flow), so the
   hero would normally start behind it. We fix this by:
     1. #hero gets padding-top = --nav-height
     2. The carousel height is reduced to (100svh - --nav-height)
   Result: the hero starts BELOW the navbar and never sits
   underneath the header.
   ============================================================ */

#hero {
  padding-top: calc(var(--nav-height) + 24px);
  position: relative;
  overflow: hidden;
  contain: paint;
}

/* The carousel container — uniform height for all slides */
  #hero .carousel.slide {
    height: clamp(520px, calc(100svh - (var(--nav-height) + 24px)), 720px);
    min-height: 480px;
    max-height: 720px;
    overflow: hidden;
    will-change: height;
    contain: paint;
  }

/* Each slide wrapper */
#hero .carousel-inner {
  height: 100%;
  overflow: clip;
  will-change: transform;
}

#hero .carousel-item {
  height: 100%;
  position: relative;
  overflow: clip;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

/* ─────────────────────────────────────────────
   REAL PHOTO SLIDES
   ─────────────────────────────────────────────
   `object-fit: cover` fills the entire slide area.
   `object-position` controls WHICH PART of the
   portrait screenshot stays in frame.
   ───────────────────────────────────────────── */
.hero-photo-slide {
  overflow: hidden;
}

.hero-slide-img {
  position: absolute;
  top: -2px;
  left: -2px;
  /* Overscan by 2px on each side so sub-pixel rounding on mobile
     can never reveal a hairline of the background behind the photo. */
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center;
  display: block;
  /* Neutral backdrop while the photo decodes — never a colored flash */
  background-color: var(--color-darker);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* ─────────────────────────────────────────────
   CROP / POINT-OF-VIEW CONTROL CLASSES
   ─────────────────────────────────────────────
   These classes control which portion of a portrait
   screenshot remains visible when it's cropped into
   a landscape card or full-width hero.

   HOW IT WORKS:
   - object-fit: cover already crops the image to fill
     the container without distortion.
   - object-position tells the browser WHICH area
     of the image is the "anchor point" to keep.

   CLASS BREAKDOWN:
   .crop-top        → keeps the TOP of the image
                      (good for panels/machines high up)
   .crop-center-top → keeps zone slightly below top
                      (good when subject starts at ~30%)
   .crop-mid        → keeps the vertical middle
                      (good for balanced shots)
   .crop-center     → keeps center — most neutral
   ───────────────────────────────────────────── */
.crop-top img {
  object-position: center 10% !important;
}

.crop-center-top img {
  object-position: center 25% !important;
}

.crop-mid img {
  object-position: center 45% !important;
}

.crop-center img {
  object-position: center 50% !important;
}

/* ─────────────────────────────────────────────
   HERO SLIDE BACKGROUNDS
   ─────────────────────────────────────────────
   Each slide gets a unique CSS gradient background
   that visually represents its content theme.
   These are PLACEHOLDERS — replace with real photos.
   ───────────────────────────────────────────── */

/* On the homepage the real photos always cover the slide, so the
   themed gradient is never wanted there — keep it flat and dark so
   that even a stray pixel at the photo's edge shows no colour. */
#hero .hero-slide-bg {
  background: var(--color-darker);
}

/* SLIDE 1: Residential Electrician
   Visual: Deep blue → electric blue (professionalism, trust)
   Content: Lightning bolt shapes + circuit lines */
.hero-content-1 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* Circuit line pattern */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(255, 255, 255, 0.03) 48px,
      rgba(255, 255, 255, 0.03) 50px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(255, 255, 255, 0.03) 48px,
      rgba(255, 255, 255, 0.03) 50px
    ),
    /* Electric panel shape */
    radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.4) 0%, transparent 40%),
    /* Main gradient */
    linear-gradient(135deg, #0c1929 0%, #1a365d 40%, #2563eb 100%);
}

/* SLIDE 2: Industrial Installation
   Visual: Dark steel → amber glow (industrial power) */
.hero-content-2 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* Gear/industrial shapes */
    radial-gradient(circle at 80% 30%, rgba(245, 158, 11, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 25%),
    /* Grid pattern */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 30px,
      rgba(255, 255, 255, 0.02) 30px,
      rgba(255, 255, 255, 0.02) 32px
    ),
    linear-gradient(135deg, #1a1a2e 0%, #2d2d44 40%, #92400e 100%);
}

/* SLIDE 3: Solar Panel Installation
   Visual: Sun gold → sky blue → green (renewable energy) */
.hero-content-3 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* Sun rays */
    radial-gradient(circle at 75% 25%, rgba(251, 191, 36, 0.5) 0%, transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(251, 191, 36, 0.2) 0%, transparent 40%),
    /* Panel grid pattern */
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 20px,
      rgba(59, 130, 246, 0.08) 20px,
      rgba(59, 130, 246, 0.08) 22px
    ),
    linear-gradient(160deg, #064e3b 0%, #065f46 30%, #0ea5e9 70%, #fbbf24 100%);
}

/* SLIDE 4: Generator Installation
   Visual: Charcoal → amber (reliable backup power) */
.hero-content-4 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* Generator body shape */
    radial-gradient(ellipse at 65% 55%, rgba(245, 158, 11, 0.25) 0%, transparent 30%),
    /* Voltage lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(245, 158, 11, 0.06) 60px,
      rgba(245, 158, 11, 0.06) 62px
    ),
    linear-gradient(135deg, #111827 0%, #1f2937 40%, #78350f 100%);
}

/* SLIDE 5: Residential Wiring
   Visual: Navy → teal (safe, trustworthy home services) */
.hero-content-5 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* House silhouette */
    radial-gradient(ellipse at 30% 60%, rgba(20, 184, 166, 0.2) 0%, transparent 35%),
    /* Wire pattern */
    repeating-linear-gradient(
      120deg,
      transparent,
      transparent 40px,
      rgba(20, 184, 166, 0.05) 40px,
      rgba(20, 184, 166, 0.05) 42px
    ),
    linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #0d9488 100%);
}

/* SLIDE 6: Complete Energy Solutions
   Visual: Deep purple → gold (comprehensive services) */
.hero-content-6 .hero-slide-bg {
  position: absolute;
  inset: 0;
  background:
    /* Energy burst */
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.2) 0%, transparent 40%),
    /* Grid overlay */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 80px,
      rgba(255, 255, 255, 0.02) 80px,
      rgba(255, 255, 255, 0.02) 82px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(255, 255, 255, 0.02) 80px,
      rgba(255, 255, 255, 0.02) 82px
    ),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 35%, #7c3aed 65%, #f59e0b 100%);
}


/* ─────────────────────────────────────────────
   HERO OVERLAY
   Semi-transparent gradient over the background.
   Makes white text readable on any slide color.
   ───────────────────────────────────────────── */
.hero-overlay {
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    rgba(15, 15, 26, 0.75) 0%,
    rgba(15, 15, 26, 0.4) 50%,
    rgba(15, 15, 26, 0.15) 100%
  );
  z-index: 1;
}


/* ─────────────────────────────────────────────
   HERO SLIDE ICON (large icon on each slide)
   Positioned above the title for visual impact.
   ───────────────────────────────────────────── */
.hero-slide-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.15);
  border: 2px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: var(--color-primary);
  backdrop-filter: blur(10px);
}


/* ─────────────────────────────────────────────
   HERO TEXT CONTENT
   Anchored to the BOTTOM of the slide (Bootstrap's
   .carousel-caption uses 15% side insets, which we widen
   to the full slide so the caption stays centred).
   ───────────────────────────────────────────── */
.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 2;
  padding: 1rem 5rem 56px;   /* side padding clears the arrows,
                                bottom space clears the dots */
}

.hero-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.hero-btn {
  background-color: var(--color-primary);
  color: var(--color-dark);
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.hero-btn:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}


/* ─────────────────────────────────────────────
   HERO ARROWS (Bootstrap carousel control overrides)
   Bootstrap provides the arrow icons via carousel-control-prev/next-icon.
   We override the visual style to match our design.
   ───────────────────────────────────────────── */
.hero-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(15, 15, 26, 0.5);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
  opacity: 1;
  z-index: 10;
}

.hero-arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.hero-arrow-left { left: 20px; }
.hero-arrow-right { right: 20px; }

/* Bootstrap's built-in arrow icons — white color */
.hero-arrow .carousel-control-prev-icon,
.hero-arrow .carousel-control-next-icon {
  filter: none;
}


/* ============================================================
   5. SERVICES SECTION
   ============================================================ */
.services-section {
  padding: var(--section-padding);
  background-color: var(--color-darker);
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-white);
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────
   SERVICE CARD
   ─────────────────────────────────────────────
   Each card has a CSS-based visual (replaces a photo).
   The visual uses gradients, icons, and decorative shapes
   to represent the service type.

   STRUCTURE:
   ┌─────────────────────┐
   │   [CSS VISUAL]      │  ← gradient + icon + shapes
   │                     │
   ├─────────────────────┤
   │   Title             │
   │   Description       │
   │   Get a Quote →     │
   └─────────────────────┘
   ───────────────────────────────────────────── */
.service-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}


/* ─────────────────────────────────────────────
   SERVICE CARD PHOTO
   ─────────────────────────────────────────────
   STRUCTURE:
   ┌─────────────────────┐
   │   [PHOTO 200px]     │  ← real image, object-fit: cover
   │   .crop-* class     │     controls point of view
   ├─────────────────────┤
   │   Title             │
   │   Description       │
   │   Get a Quote →     │
   └─────────────────────┘

   WHY object-fit: cover?
   - Images are portrait screenshots (tall)
   - Cards have a fixed 200px photo area (landscape)
   - cover fills the area without stretching — crops instead
   - .crop-* classes choose WHICH part of the photo shows
   ───────────────────────────────────────────── */
.service-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* Crop to fill — no distortion */
  transition: transform 0.5s ease;
}

/* Zoom effect on photo when hovering the card */
.service-card:hover .service-card-img img {
  transform: scale(1.08);
}


/* Card body (text below visual) */
.service-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-white);
}

.service-card-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  flex: 1;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 16px;
  transition: all var(--transition-fast);
}

.service-card-link:hover {
  color: var(--color-primary-dark);
  gap: 10px;
}


/* ============================================================
   6. ABOUT SECTION
   ============================================================ */
.about-section {
  padding: var(--section-padding);
  background-color: var(--color-primary-dark);
}

/* About visual block — layered gradient panels */
.about-visual-block {
  position: relative;
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* REAL PHOTO — base layer behind the gradient tints.
   Drop your photo at asset/images/about/about.png to replace it. */
.about-visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: 0;
}

/* POV anchor for the about photo (with .crop-* on block) */
.about-visual-block.crop-center-top .about-visual-photo {
  object-position: center 30% !important;
}
.about-visual-block.crop-mid .about-visual-photo {
  object-position: center 45% !important;
}
.about-visual-block.crop-center .about-visual-photo {
  object-position: center 50% !important;
}
.about-visual-block.crop-top .about-visual-photo {
  object-position: center 15% !important;
}

/* ─────────────────────────────────────────────
   HOMEPAGE ABOUT VISUAL — the company logo with
   a rounded edge (the photo and floating chips
   were removed from the homepage; about.html
   keeps its own hero photo)
   ───────────────────────────────────────────── */
.about-logo-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.about-visual-layer {
  position: absolute;
  border-radius: 12px;
}

/* ─────────────────────────────────────────────
   REDESIGNED ABOUT VISUAL — native Bootstrap
   ─────────────────────────────────────────────
   The photo is the base. On top we stack a soft
   amber glow, one floating brand chip (bottom-left),
   one floating stat card (bottom-right) and a
   small solar pill (top). All four floaters are
   plain-vanilla .card / .badge composition — no
   absolute-transform tricks needed beyond the
   mandatory panel-in panel.

   LAYERING (z-index root order):
   .about-visual-glow    z:1  soft amber light
   .about-visual-*chip   z:2  brand + stat + pill
   ───────────────────────────────────────────── */

/* Amber glow — sits above the photo, under the chips */
.about-visual-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 22%, rgba(245, 158, 11, 0.28) 0%, transparent 45%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.15) 0%, rgba(17, 24, 39, 0.55) 100%);
  pointer-events: none;
}

/* Shared floating "glass" appearance for chips + stat */
.about-visual-2d {
  position: absolute;
  z-index: 2;
}

/* Brand chip — bottom-left */
.about-visual-chip {
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(70, 70, 95, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.35);
  backdrop-filter: blur(10px);
  color: var(--color-white);
}

.about-visual-chip i.bi-lightning-charge {
  font-size: 1.9rem;
  color: var(--color-primary);
  text-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
}

.about-visual-chip strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.1;
}

/* Floating stat card — pinned to image BOTTOM-RIGHT END EDGE, transparent */
.about-visual-stat {
  right: 20px;
  bottom: 20px;
  width: 210px;
  background: transparent;
  color: var(--color-white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Stat number — amber on photo */
.about-visual-stat .stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

/* Stat label — light, readable over the transparent card */
.about-visual-stat .stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.85);
}

/* Secondary line inside the stat card ("Licensed electricians") */
.about-visual-stat .about-stat-small {
  color: rgba(255, 255, 255, 0.75);
}

/* Solar ticker pill — bottom-center */
.about-visual-pill {
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  background: rgba(15, 15, 26, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--color-white);
  padding: 10px 16px;
}

.about-visual-pill i {
  font-size: 0.9rem;
  margin-right: 4px;
}

.about-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
  line-height: 1.8;
}

.about-list { list-style: none; padding: 0; }
.about-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.about-list li:last-child { border-bottom: none; }
.about-list li i { font-size: 1.2rem; flex-shrink: 0; }


/* ============================================================
   7. CONTACT SECTION
   ============================================================ */
.contact-section {
  padding: var(--section-padding);
  background-color: var(--color-darker);
}

.contact-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  transition: all var(--transition-normal);
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.contact-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.contact-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-white);
}

.contact-card-link {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.contact-card-link:hover { color: var(--color-primary-dark); }

/* ─────────────────────────────────────────────
   CONSULTATION PANEL (single contact block)
   ───────────────────────────────────────────── */
.contact-lead {
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.contact-panel {
  background-color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(15, 15, 26, 0.08);
}

.contact-row--last { border-bottom: 0; }

.contact-row-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary);
  background: rgba(245, 158, 11, 0.15);
}

.contact-row-icon--wa {
  color: #052e16;
  background: rgba(37, 211, 102, 0.18);
}

.contact-row-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(15, 15, 26, 0.55);
  margin-bottom: 2px;
}

.contact-row-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #b45309;
  text-decoration: none;
  word-break: break-word;
}

a.contact-row-value:hover,
a.contact-row-value:focus {
  text-decoration: underline;
}

.contact-row-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(15, 15, 26, 0.58);
  margin: 6px 0 0;
}


/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer {
  padding: 40px 0;
  background-color: var(--color-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Quiet company logo sitting above the footer wordmark */
.footer-logo {
  width: 68px;
  height: auto;
  border-radius: 12px;
  opacity: 0.92;
  transition: opacity var(--transition-fast);
}
.footer-logo:hover { opacity: 1; }

.footer-brand { font-size: 1.3rem; font-weight: 700; color: var(--color-white); margin-bottom: 8px; }
.footer-copy { font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 4px; }
.footer-tagline { font-size: 0.8rem; color: rgba(255, 255, 255, 0.3); }

/* Footer links — shared by the homepage and every internal page */
.footer-link {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 500;
}
.footer-link:hover,
.footer-link:focus {
  color: var(--color-primary);
}

/* Policy row — Privacy / Terms / Refund */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 18px;
}
.footer-legal .footer-link { font-size: 0.85rem; }
.footer-legal-sep {
  color: rgba(255, 255, 255, 0.22);
  font-size: 0.8rem;
}

/* Primary page links — Home / About / FAQ / Contact */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.footer-nav .footer-link { font-size: 0.95rem; }


/* ============================================================
   8b. WHATSAPP CTA
   ------------------------------------------------------------
   WhatsApp has its own green brand colour, so it deliberately
   does NOT use the amber accent: a visitor should be able to
   tell "WhatsApp" and "call / email" apart at a glance.
   Loaded on the homepage and on every internal page.
   ============================================================ */
.btn-wa {
  --wa-green: #25d366;
  --wa-green-dark: #1da851;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wa-green);
  color: #052e16;
  font-weight: 600;
  border: 1px solid var(--wa-green);
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  line-height: 1.4;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-wa:hover,
.btn-wa:focus {
  background: var(--wa-green-dark);
  border-color: var(--wa-green-dark);
  color: #ffffff;
}

.btn-wa-lg {
  padding: 14px 32px;
  font-size: 1.05rem;
  border-radius: 999px;
}

.btn-wa-sm {
  padding: 9px 20px;
  font-size: 0.9rem;
}

/* Slightly stronger border on the dark navbar / footer backgrounds */
.btn-wa-outline {
  background: transparent;
  color: var(--wa-green);
}
.btn-wa-outline:hover,
.btn-wa-outline:focus {
  background: var(--wa-green);
  color: #052e16;
}

@media (max-width: 767px) {
  .btn-wa { padding: 11px 20px; }
}


/* ============================================================
   9. RESPONSIVE DESIGN
   ============================================================ */

/* Tablet */
@media (max-width: 991px) {

  /* ────────────────────────────────────────────
     EQUAL-HEIGHT HERO ON EVERY BREAKPOINT
     ────────────────────────────────────────────
     One window height is used for all six slides, on desktop,
     tablet and phone alike, so changing slide never changes the
     height of the page. The photo fills that window with
     `object-fit: cover`; the .crop-* classes choose which part
     of a landscape or portrait screenshot stays in frame, and
     .hero-overlay keeps the caption readable on top of it.
     ──────────────────────────────────────────── */
  #hero .carousel.slide {
    height: clamp(400px, calc(100svh - (var(--nav-height) + 24px)), 560px);
    min-height: 400px;
    max-height: 560px;
    overflow: hidden;
  }

  .hero-caption { padding: 1rem 3.25rem 52px; }

  .hero-arrow { width: 44px; height: 44px; }
  .hero-arrow-left { left: 12px; }
  .hero-arrow-right { right: 12px; }
  .about-section .row { flex-direction: column-reverse; }
  .about-visual-block { height: 350px; }

  /* Collapsed hamburger menu separates from the pill row */
  .nav-shell {
    flex-wrap: wrap;
  }
  #navbarContent {
    flex-basis: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #navbarContent .navbar-nav {
    align-items: stretch;
    text-align: center;
  }
}

/* Phone */
@media (max-width: 767px) {
  /* the hero height is handled once in the 991px block above */
  #hero .carousel.slide {
    height: clamp(360px, calc(100svh - (var(--nav-height) + 16px)), 520px);
    min-height: 360px;
    max-height: 520px;
    overflow: hidden;
  }
  .hero-title { font-size: 1.75rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-slide-icon { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 14px; }
  .hero-arrow { width: 40px; height: 40px; }
  .services-section, .about-section, .contact-section { padding: 60px 0; }
  .service-card-img { height: 160px; }
  .about-visual-block { height: 280px; }
  .contact-card { padding: 30px 20px; }

  /* Wide gutters (g-4 / g-5) pull the row edges 12px outside the
     viewport, because .container only has 12px of side padding at
     this size. Keeping the horizontal gutter at the default 1.5rem
     makes the row margins match the container padding exactly.
     The vertical gutter is untouched. */
  .row.g-4,
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Small phone */
@media (max-width: 575px) {
  .hero-title { font-size: 1.7rem; }
  .hero-subtitle { font-size: 0.85rem; }
  .hero-btn { padding: 10px 24px; font-size: 0.9rem; }
  .hero-arrow { width: 36px; height: 36px; }
  .hero-arrow-left { left: 8px; }
  .hero-arrow-right { right: 8px; }
  .hero-slide-icon { width: 50px; height: 50px; font-size: 1.3rem; border-radius: 12px; }

  /* Keep the logo + wordmark on one line on the smallest screens */
  .navbar-brand { font-size: 1.12rem; gap: 7px; }
  .navbar-logo { width: 28px; }
}

/* ============================================================
   12. TRUST MARQUEE — continuous service-guarantee band
   ------------------------------------------------------------
   A white "ticker" strip that scrolls left forever.

   HOW THE LOOP WORKS:
   - The track is a flex row wider than the viewport.
   - It contains TWO identical groups (A + B).
   - @keyframes translates the track from 0 to -50% of its
     own width → exactly one group width scrolls past.
   - Because A and B are identical, the jump from "end of A"
     to "start of B" is invisible → seamless infinite loop.

   EXAMPLE TIMELINE:
   t=0    |BEG|A|B|      |A|B|        |A|B|A|B| ...
   t=50%  |      |A|B|   |   |A|B|    |   |A|B|A|B| ...
   t=100% |            |A|B|          |      |A|B|A|B| ...
                                     ↑ track reset to 0
                                       (jump is invisible)
   ──────────────────────────────────────────────────────────── */
.marquee-section {
  width: 100%;
  overflow: hidden;          /* hides looping content beyond edges */
  background: var(--color-white);
  border-top: 1px solid rgba(26, 26, 46, 0.06);
  border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}

.marquee-track {
  display: flex;
  width: max-content;        /* track grows to fit both groups */
  padding: 14px 0;
  animation: marquee-scroll 22s linear infinite;
}

/* Two identical groups side by side = seamless loop source */
.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.marquee-sep {
  color: var(--color-primary);
  font-size: 0.9rem;
  margin: 0 28px;
  display: inline-flex;
  align-items: center;
}

/* Pause while the user hovers the band — better readability */
.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

/* Respect users who prefer reduced motion — static band */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
  }
  .marquee-sep { display: none; }
}

/* The keyframe — translates the track by ONE group width */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}