.safa-services-grid {
  --safa-sg-gap: 24px;
  --safa-sg-card-height: 300px;
  --safa-sg-card-radius: 24px;
  --safa-sg-decor-width: 28px;
  --safa-sg-decor-height: 55%;
  --safa-sg-decor-x: -14px;
  --safa-sg-arrow-size: 52px;
  --safa-sg-image-x: 0px;
  --safa-sg-image-y: 0px;
  --safa-sg-decor-y: 0px;
  --safa-sg-decor-radius: 12px;
  --safa-sg-arrow-x: 0px;
  --safa-sg-arrow-y: 0px;
  position: relative;
  width: 100%;
  font-family: Inter, var(--e-global-typography-text-font-family), Arial, sans-serif;
  overflow: visible;
}

.safa-services-grid,
.safa-services-grid * {
  box-sizing: border-box;
}

.safa-services-grid__viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.safa-services-grid__viewport.is-dragging { cursor: grabbing; }

.safa-services-grid__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform .68s cubic-bezier(.22,.8,.22,1);
}

.safa-services-grid__track.is-dragging {
  transition: none;
}

.safa-services-grid__page {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--safa-sg-gap);
  padding: 8px calc(var(--safa-sg-arrow-size) * .36) 18px calc(var(--safa-sg-arrow-size) * .36);
}

.safa-services-grid__item {
  position: relative;
  min-width: 0;
  height: var(--safa-sg-card-height);
  padding-left: max(0px, calc(var(--safa-sg-decor-width) + var(--safa-sg-decor-x)));
  padding-right: calc(var(--safa-sg-arrow-size) * .34);
}

.safa-services-grid__decor {
  position: absolute;
  z-index: 0;
  left: var(--safa-sg-decor-x);
  top: 50%;
  width: var(--safa-sg-decor-width);
  height: var(--safa-sg-decor-height);
  transform: translateY(calc(-50% + var(--safa-sg-decor-y)));
  background: var(--safa-sg-item-accent, #37AEDD);
  border-radius: var(--safa-sg-decor-radius) 0 0 var(--safa-sg-decor-radius);
  box-shadow: 0 10px 24px rgba(25, 131, 177, .16);
  transition: transform .28s ease, box-shadow .28s ease;
}

.safa-services-grid__card {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 20px 24px;
  overflow: hidden;
  border: 1px solid rgba(10,51,91,.08);
  border-radius: var(--safa-sg-card-radius);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,46,79,.14);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.safa-services-grid__visual {
  flex: 0 0 auto;
  min-height: 126px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  pointer-events: none;
}

.safa-services-grid__visual img {
  display: block;
  width: 118px;
  max-width: 100%;
  max-height: 120px;
  height: auto;
  object-fit: contain;
  transform: translate(var(--safa-sg-image-x), var(--safa-sg-image-y));
  transform-origin: center;
  -webkit-user-drag: none;
  user-select: none;
  transition: filter .28s ease, transform .28s ease;
}

.safa-services-grid__title {
  margin: 0;
  min-height: 2.35em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0A335B;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.safa-services-grid__button {
  margin-top: auto;
  min-width: 118px;
  min-height: 34px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 18px;
  background: #0A335B;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.safa-services-grid__corner-arrow {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: var(--safa-sg-arrow-size);
  height: var(--safa-sg-arrow-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--safa-sg-item-arrow, #F4D600);
  color: #0A335B;
  text-decoration: none !important;
  box-shadow: 0 9px 20px rgba(10,51,91,.18);
  transform: translate(var(--safa-sg-arrow-x), calc(8% + var(--safa-sg-arrow-y)));
  transition: transform .25s ease, box-shadow .25s ease;
}

.safa-services-grid__corner-arrow span {
  display: block;
  font-size: calc(var(--safa-sg-arrow-size) * .50);
  font-weight: 700;
  line-height: 1;
  transform: translate(-1px, 1px);
  transition: transform .25s ease;
}

.safa-services-grid__item:hover .safa-services-grid__card {
  transform: translateY(-4px);
  box-shadow: 0 19px 40px rgba(11,46,79,.18);
  border-color: rgba(10,51,91,.14);
}

.safa-services-grid__item:hover .safa-services-grid__decor {
  transform: translateY(calc(-50% + var(--safa-sg-decor-y))) translateX(-2px);
  box-shadow: 0 14px 30px rgba(25,131,177,.22);
}

.safa-services-grid__item:hover .safa-services-grid__visual img {
  transform: translate(var(--safa-sg-image-x), calc(var(--safa-sg-image-y) - 2px));
  filter: drop-shadow(0 5px 8px rgba(10,51,91,.08));
}

.safa-services-grid__item:hover .safa-services-grid__button {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(10,51,91,.15);
}

.safa-services-grid__corner-arrow:hover {
  color: #0A335B;
  transform: translate(var(--safa-sg-arrow-x), calc(4% + var(--safa-sg-arrow-y))) scale(1.04);
  box-shadow: 0 12px 24px rgba(10,51,91,.22);
}

.safa-services-grid__corner-arrow:hover span {
  transform: translate(2px, -2px);
}

.safa-services-grid__pagination {
  --safa-sg-page-track: #C9D5E0;
  --safa-sg-page-active: #0A335B;
  position: relative;
  width: 42%;
  min-width: 190px;
  max-width: 720px;
  height: 18px;
  margin: 42px auto 0;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 0;
}

.safa-services-grid__pagination::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--safa-sg-page-track);
  transform: translateY(-50%);
}

.safa-services-grid__page-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 0 !important;
  height: 18px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.safa-services-grid__page-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: transparent;
  transform: translateY(-50%);
  transition: background .3s ease, height .3s ease;
}

.safa-services-grid__page-button.is-active::after {
  height: 3px;
  background: var(--safa-sg-page-active);
}

@media (max-width: 1024px) {
  .safa-services-grid__page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: calc(var(--safa-sg-arrow-size) * .32);
  }
}

@media (max-width: 767px) {
  .safa-services-grid {
    overflow: visible;
  }

  .safa-services-grid__viewport {
    width: 100%;
    overflow: hidden;
  }

  /* Mobile: one complete service card per view. The page itself clips any
     neighbouring slide, while the active item is centered with enough inner
     breathing room for both the cyan accent and the yellow corner button. */
  .safa-services-grid__page {
    grid-template-columns: 1fr;
    place-items: stretch center;
    overflow: hidden;
    padding: 10px 18px 22px;
  }

  .safa-services-grid__item {
    width: min(100%, 360px);
    max-width: 360px;
    height: var(--safa-sg-card-height);
    margin-inline: auto;
    /* Keep a small safe gutter, but let the cyan accent overlap the white card. */
    padding-left: 22px;
    padding-right: max(28px, calc(var(--safa-sg-arrow-size) * .60));
  }

  /* Mobile fix: the accent must sit BEHIND the white card, not beside it.
     The responsive Elementor control --safa-sg-decor-x remains active here.
     With the default -14px, the accent starts at 8px while the card starts at
     22px, producing a real overlap instead of the visible gap. */
  .safa-services-grid__decor {
    left: calc(22px + var(--safa-sg-decor-x));
  }

  .safa-services-grid__card {
    width: 100%;
    padding: 34px 24px 26px;
  }

  .safa-services-grid__visual {
    min-height: 150px;
  }

  .safa-services-grid__title {
    min-height: auto;
    margin-top: 4px;
    font-size: 19px;
  }

  .safa-services-grid__button {
    margin-top: 22px;
  }

  .safa-services-grid__pagination {
    width: 72%;
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .safa-services-grid__track,
  .safa-services-grid__card,
  .safa-services-grid__decor,
  .safa-services-grid__visual img,
  .safa-services-grid__button,
  .safa-services-grid__corner-arrow,
  .safa-services-grid__corner-arrow span,
  .safa-services-grid__page-button::after {
    transition: none !important;
  }
}