/* =========================================================
   whytransearch page styles.
   Loaded after styles/global.css on whytransearch.html only.
   ========================================================= */

@media (max-width: 768px) {
  .approach-card h3 {
    text-align: center;
  }
}

/* Custom scrollbar styling for button-row - visible on all screen sizes */
.how-row {
  padding: 20px 0;
  border-bottom: 2px solid var(--orange);
}

.how-row:last-child {
  border-bottom: none;
}

.how-it-works-section h3 {
  margin: 0;
}

@media (max-width: 991px) {
  /* mobile tweak */
  .how-row {
    padding: 15px 0;
  }

  .how-it-works-section h3 {
    font-size: 1.1rem;
  }
}

.overlap-card-why {
  float: right;
  position: absolute;
  top: 19%;
  left: 75%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: white;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid var(--orange);
  box-shadow: var(--shadow-medium);
  transition: var(--transition);
  width: 500px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

/* Phones and tablets (keeps the mobile rule from global.css winning over the rule above) */
@media (max-width: 991px) {
  .overlap-card-why {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    width: 90%;
    max-width: 90%;
    z-index: auto;
  }
}
@media (max-width: 991px) {
  .overlap-card-why {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.overlap-card-why:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* Phones and tablets: the fixed header is taller here (the certification bar wraps),
   so push the hero wordmark (not the footer one) down to clear it, in line with the other pages */
@media (max-width: 991px) {
  .transparent-logo:not(.tran-logo-footer) {
    padding-top: 100px !important;
  }
}


/* Desktop: the hero starts under the fixed header, so push its content down to clear it */
@media (min-width: 992px) {
  .header-grad > .content-wrapper {
    padding-top: 140px;
  }
}