/* =========================================================
     17. SERVICES
     ========================================================= */

/* Service card */

.lw-service-item {
  --lw-service-color: var(--lw-primary);

  display: flex;
  flex-direction: column;

  height: 100%;

  overflow: hidden;

  background-color: color-mix(in srgb, var(--lw-service-color) 7%, var(--lw-bg-light));

  border: 1px solid color-mix(in srgb, var(--lw-service-color) 15%, transparent);

  border-radius: var(--lw-radius);

  transition: var(--lw-transition);
}

/* Service image */

.lw-service-item-image {
  flex: 0 0 auto;
}

.lw-service-item-image img {
  display: block;

  width: 100%;
  height: 200px;

  object-fit: cover;
}

/* Service content */

.lw-service-item-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 20px;
}

/* Service title */

.lw-service-item-title,
.lw-service-item-title .elementor-heading-title {
  color: var(--lw-service-color) !important;
}

/* Service description */

.lw-service-item-description,
.lw-service-item-description p,
.lw-service-item-description .elementor-widget-container {
  color: var(--lw-text-primary);
}

/* Divider area */

.lw-service-item-divider {
  margin-top: auto;

  padding-top: 18px;
}

.lw-service-item-divider .elementor-divider-separator {
  border-block-start-color: color-mix(in srgb, var(--lw-service-color) 45%, transparent) !important;
}

/* Optional CTA */

.lw-service-item-button {
  margin-top: 14px;
}

.lw-service-item-button .elementor-button {
  color: var(--lw-service-color);

  background: transparent;

  border: 1px solid var(--lw-service-color);

  border-radius: var(--lw-radius);
}

.lw-service-item-button .elementor-button:hover {
  color: var(--lw-bg-light);

  background-color: var(--lw-service-color);
}

/* Hover */

.lw-service-item:hover {
  transform: translateY(-2px);

  box-shadow: 0 8px 22px color-mix(in srgb, var(--lw-service-color) 12%, transparent);
}

/* Semantic service colour modifiers */

.lw-service-item--primary {
  --lw-service-color: var(--lw-primary);
}

.lw-service-item--secondary {
  --lw-service-color: var(--lw-secondary);
}

.lw-service-item--accent {
  --lw-service-color: var(--lw-accent);
}

.lw-service-item--feature1 {
  --lw-service-color: var(--lw-feature1);
}

.lw-service-item--feature2 {
  --lw-service-color: var(--lw-feature2);
}

.lw-service-item--feature3 {
  --lw-service-color: var(--lw-feature3);
}