#services{
  background: #E9EBEB;
  padding: 0;
  margin-top: 0;

  --svc-title-offset: 94px;

  --i7-x: 438;
  --i7-y: 2830;
  --i7-w: 520;
  --i7-h: 370;
  --svc-arrow-shift-y: -10px;
}

#services .section-title{
  margin: 0;
  text-align: center;
  position: relative;
  transform: translateY(var(--svc-title-offset));
}

#services .svc-canvas{
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2305;
  overflow: hidden;
  background: #E9EBEB;
  margin-top: var(--svc-title-offset);
}

#services .svc-img{
  position: absolute;
  display: block;
  height: auto;
  object-fit: cover;
}

#services .svc-img.i2{
  left: 50.572917%;
  top: 9.0238612%;
  width: 25%;
  aspect-ratio: 480 / 584;
}

#services .svc-img.i3{
  left: 24.479167%;
  top: 14.5336226%;
  width: 25.3125%;
  aspect-ratio: 486 / 583;
}

#services .svc-img.i5{
  left: 24.479167%;
  top: 45.2928416%;
  width: 18.854167%;
  aspect-ratio: 362 / 639;
}

#services .svc-img.i6{
  left: 48.422396%;
  top: 59.6095445%;
  width: 27.150521%;
  aspect-ratio: 521.29 / 743;
}

#services .svc-img.i7{
  left:  calc(var(--i7-x) / 1920 * 100%);
  top:   calc((var(--i7-y) - 1081) / 2305 * 100%);
  width:  calc(var(--i7-w) / 1920 * 100%);
  height: calc(var(--i7-h) / 2305 * 100%);
  object-fit: cover;
}

#services .svc-img.i8{
  left: 40.15625%;
  top: 40.9544469%;
  width: 35.4166667%;
  aspect-ratio: 680 / 400;
}

#services .svc-img.i3{ z-index: 2; }
#services .svc-img.i5{ z-index: 2; }
#services .svc-img.i8{ z-index: 1; }

#services .svc-card{
  position: absolute;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 20px 21px 26px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
}

#services .svc-card.i1{
  left: 27.34375%;
  top: 8.6767896%;
  width: 21.875%;
  min-height: 176px;
  z-index: 3;
}

#services .svc-card.i4{
  left: 51.666667%;
  top: 30.3687636%;
  width: 20.833333%;
  min-height: 160px;
  z-index: 3;
}

#services .svc-card__title{
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  color: #114D59;
}

#services .svc-card.i4 .svc-card__title{
  white-space: nowrap;
}

#services .svc-card__rule{
  display: block;
  width: 52px;
  height: 2px;
  background: #114D59;
  margin-top: 8px;
}

#services .svc-card__body{
  margin-top: 12px;
}

#services .svc-card__lead,
#services .svc-card__text{
  margin: 0;
  font-size: 10.8px;
  line-height: 1.5;
  color: #114D59;
}

#services .svc-card__more{
  margin-top: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

#services .svc-card__tagline{
  margin-top: 8px;
  font-size: 10.8px;
  line-height: 1.5;
  color: #83743B;
}

#services .svc-card__list{
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
}

#services .svc-card__list li{
  position: relative;
  padding-left: 12px;
  font-size: 10.8px;
  line-height: 1.5;
  color: #83743B;
}

#services .svc-card__list li::before{
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

#services .svc-card__arrow{
  position: absolute;
  left: 20px;
  bottom: 4px;
  width: calc(72px * 1.7);
  height: calc(18px * 1.7);
  color: #114D59;
  transition: color .2s ease;
  transform: translateY(var(--svc-arrow-shift-y));
}

#services .svc-card:hover .svc-card__arrow{
  color: #83743B;
}

#services .svc-card__arrow{
  position: absolute;
  left: 20px;
  bottom: 4px;
  width: calc(72px * 1.7);
  height: calc(18px * 1.7);
  color: #114D59;
  transition: color .2s ease;
}

#services .svc-card__arrow svg{
  width: 40%;
  height: 40%;
  shape-rendering: geometricPrecision;
}

#services .svc-card__arrow line{
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  fill: none;
}

#services .svc-card__arrow polygon{
  fill: currentColor;
  stroke: none;
}

#services .svc-card.i1[aria-expanded="false"] .svc-card__lead{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#services .svc-card.i4[aria-expanded="false"] .svc-card__lead{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#services .svc-card[aria-expanded="true"] .svc-card__more{
  max-height: 520px;
}

#services .svc-card:focus{
  outline: none;
}

#services .svc-card:focus-visible{
  outline: 2px solid rgba(17,77,89,.35);
  outline-offset: 4px;
}

#services .svc-card[aria-expanded="true"] .svc-card__arrow{
  display: none;
}

@media (max-width: 991.98px){
  #services{
    --svc-title-offset: 0px;
  }

  #services .section-title{
    transform: none;
    margin: 0;
    padding: 28px 0 18px;
  }

  #services .svc-canvas{
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    margin-top: 0;
    padding: 0 14px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }


  #services .svc-img,
  #services .svc-card{
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
  }


  #services .svc-img{
    display: block !important;
    width: min(92vw, 520px) !important;
    max-width: 520px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 8px;
  }


  #services .svc-card{
    position: relative !important; 
    width: min(92vw, 560px) !important;
    min-height: 0 !important;
    padding: 18px 18px 34px;
    margin: 0 auto;
  }

  #services .svc-card.i4 .svc-card__title{
    white-space: normal;
  }

  #services .svc-card__title{
    font-size: 18px;
    line-height: 1.15;
  }

  #services .svc-card__rule{
    width: 56px;
  }

  #services .svc-card__lead,
  #services .svc-card__text{
    font-size: 14px;
    line-height: 1.55;
  }

  #services .svc-card__tagline{
    font-size: 14px;
    line-height: 1.55;
  }

  #services .svc-card__list li{
    font-size: 14px;
    line-height: 1.55;
  }


  #services .svc-card__arrow{
    position: absolute;
    left: 18px;
    bottom: 10px;
    width: 62px;
    height: 16px;
  }

  #services .svc-card__arrow svg{
    width: 100%;
    height: 100%;
  }


  #services .svc-img.i2{ order: 2; }
  #services .svc-img.i3{ order: 4; }
  #services .svc-card.i1{ order: 1; }
  #services .svc-img.i8{ order: 5; }
  #services .svc-card.i4{ order: 3; }
  #services .svc-img.i5{ order: 6; }
  #services .svc-img.i6{ order: 8; }
  #services .svc-img.i7{ order: 7; }
}

@media (max-width: 420px){
  #services .section-title{
    padding: 24px 0 16px;
  }

  #services .svc-canvas{
    padding: 0 12px 28px;
    gap: 16px;
  }

  #services .svc-img{
    width: 100% !important;
  }

  #services .svc-card{
    width: 100% !important;
    padding: 16px 16px 30px;
  }

  #services .svc-card__title{
    font-size: 17px;
  }

  #services .svc-card__lead,
  #services .svc-card__text,
  #services .svc-card__tagline,
  #services .svc-card__list li{
    font-size: 13.5px;
  }

  #services .svc-card__arrow{
    width: 56px;
    height: 14px;
  }
}