/* service-detail.css */
/* Shared page-specific styles for all Service Detail pages */

/*.service-detail-hero {}
.service-detail-intro {}
.service-detail-problems {}
.service-detail-included {}
.service-detail-deliverables {}
.service-detail-relevance {}
.service-detail-inputs {}
.service-detail-flow {}
.service-detail-timeframe {}
.service-detail-next {}*/

/* =========================================
   SERVICE PAGE — INTRO ICON
   ========================================= */

.service-intro {
  position: relative;
  overflow: visible;
}

.service-intro .container {
  position: relative;
}

.service-intro-icon {
  position: absolute;
  /*right: -12px;*/
  right: 25%;
  /*bottom: -18px;*/
  bottom: -25%;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 8;
}

.service-intro-icon .service-shell {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 170px;
  height: 170px;
  transform: translate(0, 0) scale(1);
  /*transform: scale(0.98);*/
  transform-origin: right bottom;
  filter: drop-shadow(0 8px 16px rgba(25, 33, 43, 0.08));
}

.service-intro-icon .service-shell__frame {
  background: transparent;
  box-shadow: none;
}

.card-why {
  background: none;
  backdrop-filter: blur(30px);
}

@media (max-width: 900px) {
  .service-intro-icon {
    /*right: -6px;*/
    right: 20%;
    /*bottom: -10px;*/
    bottom: -25%;
    width: 92px;
    height: 92px;
  }

  .service-intro-icon .service-shell {
    width: 150px;
    height: 150px;
    transform: scale(0.75);
  }
}

@media (max-width: 640px) {
  .service-intro-icon {
    display: none;
  }
}