/**
 * service-detail.css
 * Meridian GeoStrategy - Service Detail Page Styles
 *
 * Covers the hero banner with dark background, breadcrumb navigation,
 * responsive insight button visibility, and article card interactions
 * for individual service category pages.
 *
 * @module service-detail
 * @version 2.0.0
 * @see {@link https://meridiangeostrategy.com}
 */

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

.about_container {
  width: 100%;
  height: 260px;
  background-color: #381551;
}

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

/* ==========================================================================
   Breadcrumb Navigation
   ========================================================================== */

.breadcrumb_link__TcUen {
  display: flex;
}

.breadcrumb_link__TcUen span {
  margin-left: 10px;
}

/* ==========================================================================
   Responsive - Insight Button Visibility
   ========================================================================== */

@media screen and (min-width: 850px) {
  .linear-title {
    margin-top: 100px;
    color: #381551;
  }

  .insight-btn {
    display: none !important;
  }
}

@media screen and (max-width: 850px) {
  .insight-btn {
    display: inline-block !important;
  }
}

/* ==========================================================================
   Article Card Interactions
   ========================================================================== */

.rounded-lg {
  cursor: pointer;
}

.expertise-item2 a {
  display: block;
  width: 100%;
  height: 100%;
}

.expertise-item2:hover .insight-btn {
  display: inline-block !important;
}