/* Main Container: 1600px wide, Flexbox layout, vertically centered */
    .main-container {
    width: 100%;
    max-width: 1600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    background-color: transparent;
    padding: 3rem;
    border-radius: 20px;
    margin: auto;
    width: min(1400px, 90%);
}

    /* Left Panel: Contact Form */
    .left-panel {
      flex: 1;
      max-width: 600px;
    }

    .left-panel h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      /* color: #ffffff; */
    }

    .left-panel p {
      /* color: #94a3b8; */
      margin-bottom: 2rem;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group label {
      font-size: 0.875rem;
      font-weight: 600;
      /* color: #cbd5e1; */
    }

.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    color: #ffffff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: #5f8196;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 120px;
    }
.submit-btn {
    padding: 0.875rem 1.5rem;
    background-color: #ff3624;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .submit-btn:hover {
      opacity: 0.7;
    }

    .submit-btn:active {
      transform: scale(0.98);
    }

    /* Right Panel: SVG Map */
.right-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 16px;
    padding: 1.5rem;
    border: none;
    position: relative;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    position: absolute;
    top: 0;
    color: beige;
}
p.bs-eyebrow {
    color: #000a48 !important;
}
    #bs-svg {
      width: 100%;
      height: auto;
      max-height: 600px;
      overflow: visible;
      margin-top:30px;
    }

    /* SVG Borough Styling */
    #bs-svg path {
      fill: #1e293b1f;
      stroke: #334155;
      stroke-width: 1;
      stroke-linejoin: round;
      stroke-linecap: round;
      transition: fill 0.3s ease;
    }

    #bs-svg path:hover {
      fill: #334155;
    }

    /* --- CAR MOTION PATHS & ANIMATIONS --- */

    /* Route 1: Covering Western & Central Lines */
    .car-1 {
      offset-path: path("M180,190 Q240,168 300,178 L310,300 L200,308 L212,406 L300,412 L310,300 L420,290 L410,174 Q355,168 300,178 L180,190");
      animation: driveCar 22s linear infinite;
    }

    /* Route 2: Covering Middle & Eastern Lines */
    .car-2 {
      offset-path: path("M410,174 Q465,184 520,168 L540,285 L420,290 L448,478 L500,492 L555,406 L540,285 L650,300 L620,184 Q570,178 520,168 M520,168 L410,174");
      animation: driveCar 26s linear infinite;
      animation-delay: -8s; /* Stagger start position */
    }

    /* Route 3: Covering Far East & Outer Loop Lines */
    .car-3 {
      offset-path: path("M620,184 Q690,158 760,138 L782,278 L780,378 L720,468 L500,492 L555,406 L650,300 L780,378 L650,300 L620,184");
      animation: driveCar 24s linear infinite;
      animation-delay: -14s; /* Stagger start position */
    }

    @keyframes driveCar {
      0% {
        offset-distance: 0%;
      }
      100% {
        offset-distance: 100%;
      }
    }

    /* Responsive adjustment for small screens */
    @media (max-width: 1024px) {
      .main-container {
        flex-direction: column;
        padding: 2rem;
      }
      .left-panel, .right-panel {
        width: 100%;
        max-width: 100%;
      }
    }




    /* Styled Select Dropdown */
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    color: #777777;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23cbd5e1' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

.form-group select:focus {
  border-color: #5f8196;
}

.form-group select option {
  background-color: #0f172a;
  color: #ffffff;
}