/**
 * services-page.css
 * Meridian GeoStrategy - What We Do Page Styles
 *
 * Covers the hero banner, practice card hover effects,
 * and responsive image positioning for the services overview page.
 *
 * @module services-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: 1450px) {
  .about_container img {
    width: 100%;
    height: auto;
    margin-top: -372px;
  }
}

@media screen and (max-width: 1450px) 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%);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  font-family: "Raleway", sans-serif;
}

/* ==========================================================================
   Practice Card Interactions
   ========================================================================== */

.practice-card:hover .arrow-icon {
  transform: translateX(5px);
}

.practice-card:hover {
  cursor: pointer;
}

.practice-card:hover h3 {
  text-decoration: underline;
}

.practice-card:hover p {
  text-decoration: underline;
}