/**
 * careers-page.css
 * Meridian GeoStrategy - Join Us / Careers Page Styles
 *
 * Covers the hero banner, job listing card hover effects,
 * and arrow animations for the careers page.
 *
 * @module careers-page
 * @version 2.0.0
 * @see {@link https://meridiangeostrategy.com}
 */

/* ==========================================================================
   Hero Banner
   ========================================================================== */

.about_container {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

@media screen and (min-width: 1260px) {
  .about_container img {
    width: 100%;
    height: auto;
    margin-top: -400px;
  }
}

@media screen and (max-width: 1260px) and (min-width: 960px) {
  .about_container img {
    width: 100%;
    height: auto;
    margin-top: -220px;
  }
}

@media screen and (max-width: 960px) {
  .about_container img {
    width: 100%;
    height: 100%;
  }
}

.about-top {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   Job Listing Card Interactions
   ========================================================================== */

.join-box {
  display: block;
  width: 100%;
  height: 100%;
}

.join-box h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.capabilities-card_arrow__L_plP {
  opacity: 0;
  transform: translateX(0);
  transition: all 0.3s ease-in;
  font-weight: 500;
  color: #2d5453;
  line-height: 18px;
  font-size: 0.75rem;
  width: 46px;
  height: 14px;
  fill: none;
  margin-left: 10px;
}

.join-box:hover .capabilities-card_arrow__L_plP {
  opacity: 1;
}

.join-box:hover h3 {
  text-decoration: underline;
}