/* ============= GLOBAL ============= */
    body {
      background-color: #f8f9fa;
      color: #212529;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
    }

    /* ============= HEADER ============= */
    .header-bg {
      position: relative;
      background: url('https://images.unsplash.com/photo-1517336714731-489689fd1ca8?auto=format&fit=crop&w=1470&q=80') center center no-repeat;
      background-size: cover;
      color: white;
      padding: 60px 1rem;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
      overflow: hidden;
    }
    .header-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 160, 210, 0.55);
      z-index: 0;
      border-radius: 0 0 40% 40% / 60% 60% 0 0;
    }
    .header-bg > .container {
      position: relative;
      z-index: 1;
      max-width: 720px;
    }
    .header-bg h1 {
      font-weight: 900;
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    .header-bg p.lead {
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }

    /* ============= BUTTONS ============= */
    .btn-green {
      background-color: #00a0d2;
      color: white;
      font-weight: 600;
      border-radius: 50px;
      padding: 0.75rem 2.5rem;
      border: none;
      transition: background-color 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 160, 210, 0.4);
    }
    .btn-green:hover,
    .btn-green:focus {
      background-color: #007ba8;
      box-shadow: 0 6px 18px rgba(0, 123, 168, 0.6);
      color: white;
    }
    .btn-outline-light {
      border-radius: 50px;
      padding: 0.75rem 2.5rem;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .btn-outline-light:hover,
    .btn-outline-light:focus {
      background-color: white;
      color: #007ba8;
      box-shadow: 0 6px 18px rgba(0, 123, 168, 0.5);
    }

    /* ============= UTILITIES ============= */
    .text-custom { color: #00a0d2 !important; }
    .bg-custom { background-color: #00a0d2 !important; }
    .toggle-icon {
      float: right;
      font-size: 1rem;
      color: #00a0d2;
    }

    /* ============= COMPONENTS ============= */
    .service,
    .process-step,
    .testimonial {
      background: #fff;
      border-radius: 15px;
      padding: 1.8rem 1.5rem;
      margin: 1rem 0.5rem;
      box-shadow: 0 5px 20px rgba(0, 110, 200, 0.08);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .service:hover,
    .process-step:hover,
    .testimonial:hover {
      box-shadow: 0 9px 40px rgba(0, 113, 200, 0.18);
      transform: translateY(-6px) scale(1.05);
    }

    .service-icon,
    .feature-icon {
      color: #00a0d2;
    }
    .service-icon { font-size: 3rem; margin-bottom: 1rem; }
    .feature-icon {
      font-size: 1.6rem;
      margin-right: 12px;
      min-width: 30px;
      text-align: center;
    }
    .step-number {
      font-size: 2.25rem;
      font-weight: 900;
      margin-bottom: 0.4rem;
    }

    /* ============= LOCATION CARD ============= */
    .location-card {
      max-width: 600px;
      margin: 0 auto;
      padding: 2rem 2.5rem;
      border-radius: 15px;
      box-shadow: 0 8px 30px rgba(0, 110, 200, 0.1);
      transition: box-shadow 0.3s ease;
    }
    .location-card:hover {
      box-shadow: 0 12px 48px rgba(0, 113, 200, 0.2);
    }
    .location-card i { font-size: 1.3rem; }

    /* ============= QUOTES ============= */
    blockquote {
      font-size: 1.05rem;
      color: #444;
      quotes: "“" "”" "‘" "’";
      margin-bottom: 1rem;
    }
    blockquote::before {
      content: open-quote;
      font-size: 2.5rem;
      line-height: 0;
      vertical-align: -0.4rem;
      color: #00a0d2;
    }

    /* ============= FOOTER ============= */
    footer {
      background: #212529;
      color: white;
      padding: 40px 1rem;
      font-size: 0.9rem;
    }
    footer h5 {
      font-weight: 600;
      color: #00a0d2;
    }
    footer a {
      color: #00a0d2;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    footer a:hover {
      color: #007ba8;
      text-decoration: underline;
    }
    footer p,
    footer ul {
      margin-bottom: 0.5rem;
    }

    /* ============= NAVBAR ============= */
    .navbar .nav-link {
      color: #212529;
      transition: color 0.3s ease;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      color: #00a0d2;
    }
    .navbar-brand i {
      color: #00a0d2;
    }
    .navbar, .navbar-brand {
      padding: 0;
    }

    /* ============= CARDS (brands/devices/services) ============= */
    .card:hover {
      transform: scale(1.02);
      transition: all 0.3s ease;
      z-index: 2;
    }
    .selected-card {
      border: 2px solid #00a0d2 !important;
      box-shadow: 0 0 10px rgba(0,160,210,0.4);
    }
    .card .card {
      background-color: #f9f9f9;
      border-left: 3px solid #00a0d2;
    }
    .card .card .card {
      background-color: #f1f1f1;
      border-left: 3px dashed #00a0d2;
    }
    .card img {
      transition: transform 0.3s ease;
    }
    .card:hover img {
      transform: scale(1.05);
    }
    .card .card-body {
      flex: initial !important;
    }
    .service-card:hover {
      background-color: #f8f9fa;
      border-color: #0d6efd !important;
      transform: scale(1.02);
      z-index: 2;
    }
    .service-method-card:hover {
      background-color: #f8f9fa;
    }
    .service-method-card.border-primary {
      border-width: 2px;
    }

    /* ============= FORM WIZARD ============= */
    #appointment-form {
      padding-top: 60px;
    }
    #appointment-date,
    #time-slots label {
      cursor: pointer;
    }
    #services,
    #start-repair,
    #about,
    #contact,
    #locations {
      scroll-margin-top: 80px;
      position: relative;
    }
    #brands-section,
    #devices-section,
    #device-1,
    #appointment-form {
      scroll-margin-top: 140px;
      position: relative;
    }
    #progress-bar {
      transition: width 0.4s ease-in-out;
    }

    /* ============= NESTED CHILDREN ============= */
    .nested-children {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.4s ease;
    }
    .nested-children.show {
      max-height: 1000px;
    }

    /* ============= FORM WIZARD STEPS ============= */
    .step-indicator {
      background-color: #f8f9fa;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 160, 210, 0.08);
    }

    .step-item {
      text-align: center;
      flex: 1;
      position: relative;
      cursor: default;
    }

    .step-circle {
      width: 36px;
      height: 36px;
      margin: 0 auto 0.25rem;
      background-color: #dee2e6; /* default gray for future steps */
      border-radius: 50%;
      color: #6c757d; /* gray text for future steps */
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    /* Active step circle */
    .step-item.active .step-circle {
      background-color: #007ba8; /* darker blue */
      color: white;
      box-shadow: 0 0 8px rgba(0, 123, 168, 0.7);
      font-weight: 700;
    }

    /* Completed step circle */
    .step-item.completed .step-circle {
      background-color: #00a0d2; /* your current blue */
      color: white;
      font-weight: 600;
    }

    /* Labels */
    .step-label {
      font-size: 0.85rem;
      color: #6c757d; /* default gray */
      font-weight: 500;
      transition: color 0.3s ease, font-weight 0.3s ease;
    }

    /* Active step label */
    .step-item.active .step-label {
      color: #007ba8; /* darker blue */
      font-weight: 700;
    }

    /* Completed step label */
    .step-item.completed .step-label {
      color: #00a0d2; /* blue */
      font-weight: 600;
    }

    /* Connecting lines between steps */
    .step-item::after {
      content: "";
      position: absolute;
      top: 18px;
      right: -50%;
      width: 100%;
      height: 2px;
      background-color: #dee2e6; /* default gray */
      z-index: -1;
    }

    /* Remove line after last step */
    .step-item:last-child::after {
      display: none;
    }

    /* Completed connecting lines */
    .step-item.completed::after {
      background-color: #00a0d2; /* blue */
    }

    /* Active connecting line */
    .step-item.active::after {
      background-color: #007ba8; /* darker blue */
    }

    /* Future steps - circle and label remain gray */
    .step-item:not(.active):not(.completed) .step-circle {
      background-color: #dee2e6;
      color: #6c757d;
    }

    .step-item:not(.active):not(.completed) .step-label {
      color: #6c757d;
    }

    /* Optional: pointer cursor for active and completed steps */
    .step-item.active,
    .step-item.completed {
      cursor: pointer;
    }



    /* ============= RESPONSIVE ============= */
    @media (min-width: 992px) {
      .header-bg h1 { font-size: 4rem; }
      .service-icon { font-size: 3.5rem; }
      .feature-icon {
        font-size: 1.8rem;
        min-width: 36px;
      }
      .step-number { font-size: 2.75rem; }
    }