.pcb-services {
  max-width: 940px;
  margin: 2.625rem auto 0;
}

.content-columns {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.left-column {
  flex: 3;
}

.right-column {
  flex: 1;
}

h2 {
  color: var(--green);
  margin-top: 0;
  font-size: 18px;
}

h3 {
  font-size: 11px;
  text-transform: uppercase;
  color: #696969;
  margin: 4px 0 8px 0;
}

h4 {
  color: var(--dark);
  margin: 1rem 0 0;
  font-size: 14px;
}

h5 {
  color: var(--dark);
  font-size: 12px;
  margin: 0 0 4px 0;
}

.left-column p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0px 0px 18px 0px;
}

/* Row container */
.image-row {
  max-width: 940px;
  margin: 0 auto;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between; /* space ONLY between items */
  gap: 2rem; /* space between the two image+text blocks */
}

.image-block {
  flex: 1;
  max-width: 50%;
}

.image-row .image-placeholder.small {
  width: 100%;
  max-width: none;
}

.image-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ensures text aligns to image left edge */
}

.image-block img {
  display: block; /* removes inline spacing issues */
  max-width: 100%;
  height: auto;
}

.image-caption {
  margin-top: 0.75rem;
  width: 100%; /* EXACT same width as image */
  font-size: 0.95rem; /* optional */
  line-height: 1.5;
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 636 / 392; /* maintains the image ratio */
  background-color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 14px;
  border: 1px solid #d0d0d0;
}

/* Shared placeholder styles */
.image-placeholder {
  background-color: #e5e5e5;
  border: 1px solid #d0d0d0;
}

/* Small placeholders */
.image-placeholder.small {
  width: calc((100% - 2rem) / 2);
  aspect-ratio: 636 / 392;
}

/* Data Table for DfT */
.table-wrapper {
  max-width: 940px;
  margin: 2rem auto;
  overflow-x: auto; /* mobile safety */
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #222;
}

.comparison-table th,
.comparison-table td {
  border: 1px solid #cfd4d9;
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

/* Header row */
.comparison-table thead th {
  background-color: #eaf6fd;
  font-weight: 700;
}

/* Feature (first) column */
.comparison-table tbody td:first-child {
  background-color: #fff7df;
  font-weight: 600;
  width: 26%;
}

/* Optional: subtle row hover for UX */
.comparison-table tbody tr:hover td {
  background-color: #f9fbfc;
}

/* Responsive font tweak */
@media (max-width: 767px) {
  .comparison-table {
    font-size: 14px;
  }
}

.divider {
  height: 1px;
  background: #ccc;
  margin-bottom: 1.5rem;
}

.divider::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--green);
}

.ul-wrap {
  margin-bottom: 33px;
}

.right-column ul {
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  padding: 0px 0px 0px 0px;
}

.right-column li {
  list-style: disc !important;
  padding: 6px 0;
  margin: 0 0 0 15px;
}

.certs {
  font-family: Arial, Helvetica, Open Sans, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #222222;
}

.str-grn {
  color: var(--green);
}

.full-width-image {
  margin: 0 0 3rem 0;
}

/* ===============================
   Contact Section
================================ */

.contact-section {
  margin: 4rem auto 0;
  max-width: 940px;
  padding: 0 0 60px;
}

.contact-columns {
  display: flex;
  gap: 40px;
}

/* Left: Form */
.contact-form {
  flex: 3;
}

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

.contact-form h2 {
  margin-top: 0;
}

.contact-form label,
.contact-form fieldset {
  margin: 16px 0 6px;
  font-weight: 600;
}

.form-group a {
  color: inherit;
  text-decoration: none;
}

.form-group a:hover {
  text-decoration: underline;
  color: var(--green);
}

#hybrid-package-section a {
  color: inherit;
  text-decoration: none;
  margin: 0 0 0 1rem;
}

#hybrid-package-section a:hover {
  text-decoration: underline;
  color: var(--green);
}

.form-group2 {
  display: block;
  margin-top: 1rem;
}

.form-group2 label {
  display: block;
  margin-bottom: 0.4rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  /*font-size: 14px;*/
  font-family: inherit;
  box-shadow: inset 0px 1px 4px rgb(0 0 0 / 10%);
  -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 1px 4px rgb(0 0 0 / 10%);
}

fieldset {
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  box-shadow: inset 0px 1px 4px rgb(0 0 0 / 10%);
  -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 1px 4px rgb(0 0 0 / 10%);
}

.contact-form select {
  width: 100%;
}

.contact-form textarea {
  resize: vertical;
  width: 100%;
}

.contact-form button {
  margin-top: 20px;
  padding: 12px 18px;
  border: none;
  background-color: #2f7d32; /* matches your green accent */
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  border-radius: 2px;
}

.contact-form button:hover {
  opacity: 0.9;
}

.required {
  color: #790000;
}

/* Right: Contact Info */
.contact-info {
  flex: 1;
}

.contact-info p {
  margin-bottom: 20px;
  font-size: 14px;
}

.contact-info a {
  color: inherit;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
  color: var(--green);
}

.contact-info h3 {
  margin: 16px 0 8px 0;
}

/* ===============================
   Responsive
================================ */
/* TABLET / MOBILE NAV */

@media screen and (max-width: 979px) {
  .pcb-services {
    margin: 2.625rem 1rem;
  }

  .left-column {
    flex: 2;
  }
}

@media (max-width: 767px) {
  .contact-columns {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .image-row {
    flex-direction: column;
  }

  .image-block,
  .image-placeholder.small {
    max-width: 100%;
    width: 100%;
  }

  h5 {
    font-size: 0.875rem;
  }

  .image-caption {
    font-size: 0.875rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 8px 8px;
  }

  .contact-form label,
  .contact-form fieldset {
    font-size: 14px;
  }

  .form-group a {
    color: var(--green);
  }

  option {
    font-size: 12px; /* Some browsers ignore this */
    -webkit-appearance: none;
  }

  select {
    font-size: 12px; /* Some browsers ignore this */
    -webkit-appearance: none;
  }

  .mbl-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 0 0;
  }

  #hybrid-package-section a {
    font-size: 0.875rem;
  }

  #hybrid-package-section a {
    color: var(--green);
    margin: 0 0 0 0;
  }
}