/* =========================================================
     11. SHARED FEATURE ICON FOUNDATION
     ========================================================= */

.lw-feature-icon {
  --lw-icon-colour: var(--lw-primary);

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--lw-bg-light);
  background-color: var(--lw-icon-colour);

  border: 0;
  border-radius: 50%;

  line-height: 1;

  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lw-icon-colour) 10%, transparent), 0 6px 16px color-mix(in srgb, var(--lw-icon-colour) 20%, transparent);
}

.lw-feature-icon::before {
  color: inherit;
}

/* Solid / Feature Card */

.lw-feature-icon--card,
.lw-feature-icon--solid {
  color: var(--lw-bg-light);

  background-color: var(--lw-icon-colour);

  border: 0;
  border-radius: 50%;

  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lw-icon-colour) 10%, transparent), 0 6px 16px color-mix(in srgb, var(--lw-icon-colour) 20%, transparent);
}

/* Header / Contact */

.lw-feature-icon--header {
  color: var(--lw-icon-colour);

  background-color: color-mix(in srgb, var(--lw-icon-colour) 10%, var(--lw-bg-light));

  border: 1px solid color-mix(in srgb, var(--lw-icon-colour) 30%, transparent);

  box-shadow: none;
}

/* Top row containing icon + title */

.lw-feature-card-top {
  display: flex;
  align-items: center;
  gap: var(--lw-space-md);
}

/* Icon widget must not stretch */

.lw-feature-card-top .elementor-widget-shortcode {
  flex: 0 0 auto;
  width: auto;
}

/* Title can take remaining width */

.lw-feature-card-top .elementor-widget-heading {
  flex: 1 1 auto;
}

/* Plain */

.lw-feature-icon--plain {
  width: auto;
  height: auto;

  flex: 0 0 auto;

  color: var(--lw-icon-colour);

  background: none;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

/* Soft */

.lw-feature-icon--soft {
  color: var(--lw-icon-colour);

  background-color: color-mix(in srgb, var(--lw-icon-colour) 15%, var(--lw-bg-light));

  border: 0;
  border-radius: 50%;

  box-shadow: none;
}

/* Icon colour modifiers */

.lw-feature-icon--primary {
  --lw-icon-colour: var(--lw-primary);
}

.lw-feature-icon--secondary {
  --lw-icon-colour: var(--lw-secondary);
}

.lw-feature-icon--accent {
  --lw-icon-colour: var(--lw-accent);
}

.lw-feature-icon--success {
  --lw-icon-colour: var(--lw-success);
}

.lw-feature-icon--warning {
  --lw-icon-colour: var(--lw-warning);
}

.lw-feature-icon--danger {
  --lw-icon-colour: var(--lw-danger);
}

/* Icon sizes */

.lw-feature-icon--small {
  --lw-icon-size: 40px;
  --lw-icon-font-size: 1rem;
}

.lw-feature-icon--medium {
  --lw-icon-size: 48px;
  --lw-icon-font-size: 1.125rem;
}

.lw-feature-icon--large {
  --lw-icon-size: 64px;
  --lw-icon-font-size: 1.5rem;
}

/* =========================================================
           12. FEATURE BOXES
           ========================================================= */

.lw-features {
  background-color: var(--lw-section-bg, var(--lw-bg-light));

  color: var(--lw-section-text, var(--lw-text-primary));
}

/* Section heading */

.lw-features-heading,
.lw-features-heading .elementor-heading-title {
  color: var(--lw-section-heading, var(--lw-primary)) !important;
}

/* Feature card */

.lw-feature-card {
  position: relative;

  color: var(--lw-text-primary);

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

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

  overflow: hidden;

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

.elementor .lw-feature-card:not(.elementor-motion-effects-element-type-background) {
  background-color: color-mix(in srgb, var(--lw-feature-color) 20%, var(--lw-bg-light)) !important;
}

/* Feature card heading */

.lw-feature-card h1,
.lw-feature-card h2,
.lw-feature-card h3,
.lw-feature-card h4,
.lw-feature-card h5,
.lw-feature-card h6,
.lw-feature-card .elementor-heading-title {
  color: var(--lw-feature-color) !important;
}

/* Feature card text */

.lw-feature-card,
.lw-feature-card p,
.lw-feature-card li,
.lw-feature-card .elementor-widget-text-editor,
.lw-feature-card .elementor-widget-theme-post-content {
  color: var(--lw-text-primary);
}

/* Feature card links */

.lw-feature-card a {
  color: var(--lw-feature-color);
}

/* Feature card icon */

.lw-feature-card .lw-feature-icon {
  --lw-icon-colour: var(--lw-feature-color);

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: var(--lw-icon-size, 56px);
  height: var(--lw-icon-size, 56px);

  flex: 0 0 var(--lw-icon-size, 56px);

  color: var(--lw-bg-light) !important;

  background-color: var(--lw-icon-colour) !important;

  border: 0 !important;
  border-radius: 50% !important;

  box-sizing: border-box;

  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lw-icon-colour) 15%, transparent), 0 6px 16px color-mix(in srgb, var(--lw-icon-colour) 24%, transparent);
}

/* Feature card hover */

.lw-feature-card:hover .lw-feature-icon {
  transform: translateY(-2px);

  box-shadow: 0 0 0 7px color-mix(in srgb, var(--lw-icon-colour) 20%, transparent), 0 8px 20px color-mix(in srgb, var(--lw-icon-colour) 32%, transparent);
}

/* Feature colour cycle */

.lw-feature-grid .e-loop-item:nth-of-type(3n + 1) {
  --lw-feature-color: var(--lw-feature1);
}

.lw-feature-grid .e-loop-item:nth-of-type(3n + 2) {
  --lw-feature-color: var(--lw-feature2);
}

.lw-feature-grid .e-loop-item:nth-of-type(3n) {
  --lw-feature-color: var(--lw-feature3);
}

/* Smart feature grid columns */

@media (min-width: 1025px) {
  /* Exactly 2 items */

  .lw-feature-grid .elementor-loop-container:has(> .e-loop-item + .e-loop-item):not(:has(> .e-loop-item + .e-loop-item + .e-loop-item)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Exactly 1 item */

  .lw-feature-grid .elementor-loop-container:has(> .e-loop-item):not(:has(> .e-loop-item + .e-loop-item)) {
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: none !important;

    margin-inline: 0 !important;
  }

  .lw-feature-grid .elementor-loop-container:has(> .e-loop-item):not(:has(> .e-loop-item + .e-loop-item)) > .e-loop-item {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lw-feature-icon,
  .lw-feature-card,
  .elementor-button {
    transition: none;
  }

  .lw-feature-card:hover .lw-feature-icon {
    transform: none;
  }
}

/* =========================================================
           19. FONT AWESOME FEATURE ICON FIX
        
           Keep at very end of framework.css
           ========================================================= */

i.fas.lw-feature-icon,
i.far.lw-feature-icon,
i.fab.lw-feature-icon,
i.fa.lw-feature-icon {
  --lw-icon-size: 56px;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: var(--lw-icon-size) !important;
  height: var(--lw-icon-size) !important;

  min-width: var(--lw-icon-size) !important;
  max-width: var(--lw-icon-size) !important;

  min-height: var(--lw-icon-size) !important;
  max-height: var(--lw-icon-size) !important;

  flex: 0 0 var(--lw-icon-size) !important;

  padding: 0 !important;
  margin: 0;

  box-sizing: border-box !important;

  line-height: 1 !important;

  border-radius: 50% !important;

  position: relative;
  inset: auto;
}

i.fas.lw-feature-icon::before,
i.far.lw-feature-icon::before,
i.fab.lw-feature-icon::before,
i.fa.lw-feature-icon::before {
  position: static !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;

  transform: none !important;
}