/* Keep the Services background full-width inside boxed themes and Elementor containers. */
.tga-services-section {
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
}

@media (max-width: 620px) {
  .tga-services-section {
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
  }
}

/* Version 1.2: compact cards with elegant transparent ornaments. */
.tga-service-card {
  min-height: 260px;
  padding: 25px 26px 24px;
  background:
    radial-gradient(circle at 94% 88%, transparent 0 56px, color-mix(in srgb, var(--tga-services-gold) 17%, transparent) 57px 58px, transparent 59px),
    radial-gradient(circle at 94% 88%, transparent 0 86px, color-mix(in srgb, var(--tga-services-gold) 9%, transparent) 87px 88px, transparent 89px),
    linear-gradient(145deg, color-mix(in srgb, var(--tga-services-card) 97%, var(--tga-services-gold)), var(--tga-services-card));
}

.tga-service-card::after {
  right: -55px;
  bottom: -55px;
  width: 122px;
  height: 122px;
  opacity: .45;
  box-shadow:
    0 0 0 28px color-mix(in srgb, var(--tga-services-gold) 5%, transparent),
    0 0 0 56px color-mix(in srgb, var(--tga-services-gold) 3%, transparent);
}

.tga-service-icon {
  margin-bottom: 20px;
}

/* Uploaded SVG and PNG icons use the same size and theme color as built-in icons. */
.tga-service-icon .tga-custom-icon-mask {
  display: block;
  width: 31px;
  height: 31px;
  background: currentColor;
  -webkit-mask: var(--tga-icon-url) center / contain no-repeat;
  mask: var(--tga-icon-url) center / contain no-repeat;
}

@media (max-width: 620px) {
  .tga-service-card {
    min-height: 0;
    padding: 19px 15px 20px;
  }

  .tga-service-icon .tga-custom-icon-mask {
    width: 24px;
    height: 24px;
  }
}