/*
 * Private Eyes About page — "Security & Compliance" section
 * Scope: the portable .pe-about-security-compliance root.
 * Replaces the former "Integrated Partners" row only; every other About
 * section (intro, "What makes Private Eyes Different?", testimonials)
 * is untouched and keeps the theme's default styling.
 */

.pe-about-security-compliance__col .wpb_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pe-about-security-compliance__preview {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  margin: 0 0 24px;
  border: 1px solid #e2e2e2;
}

.pe-about-security-compliance__preview--pbsa {
  max-width: 170px;
  border: none;
}

/*
 * Shared title-alignment slot: only at the widths where WPBakery's own
 * grid (.vc_col-sm-3/5 / .vc_col-sm-2/5) actually splits the two columns
 * side by side. Fixing width+height together lets object-fit:contain
 * show each real image at its own natural, un-cropped ratio while both
 * boxes share one height — so the SOC 3 cover (tall) and the PBSA mark
 * (short, vertically centered in the same box) bring the two <h3>
 * titles to the same baseline. No markup change: this targets the
 * existing <img> tags only. Removed entirely below 768px so mobile
 * stacking keeps each image at its natural height (no artificial box).
 */
@media only screen and (min-width: 768px) {
  .pe-about-security-compliance__preview {
    width: 200px;
    height: 260px;
    object-fit: contain;
  }

  .pe-about-security-compliance__preview--pbsa {
    width: 170px;
    height: 260px;
  }
}

.pe-about-security-compliance__col h3 {
  margin: 0 0 12px;
}

.pe-about-security-compliance__col p {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.pe-about-security-compliance__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px !important;
}

.pe-about-security-compliance .pe-about-security-compliance__cta .qbutton {
  margin: 0;
  background-color: #799a05;
  border-color: #799a05;
  color: #fff;
}

.pe-about-security-compliance .pe-about-security-compliance__cta .qbutton:hover {
  background-color: transparent;
  color: #799a05;
}

.pe-about-security-compliance__filetype {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #8a8a8a;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .pe-about-security-compliance__col {
    padding-bottom: 24px;
  }

  .pe-about-security-compliance__col p {
    max-width: 320px;
  }
}