/* =========================================================
   CORE FEATURES — FINAL FEATURE TAGS
   Scoped only to .service4-section-area
   ========================================================= */

/* Desktop/default layout */
.service4-section-area .service-box-area .service-feature-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  margin-top: 22px;

  color: #ffffff;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.4px !important;

  opacity: 1;
  visibility: visible;
}

.service4-section-area .service-box-area .service-feature-tag {
  display: inline-flex;
  align-items: center;
  width: auto;
  white-space: nowrap;
  color: #ffffff;
}

.service4-section-area .service-box-area .service-feature-tag .fa-star {
  flex: 0 0 auto;
  margin: 0 7px 1px 0;
  color: #e32f4b !important;
  transition: color 0.3s ease;
}

/* White stars on hover, focus, or active card */
.service4-section-area .service-box-area:hover .service-feature-tag .fa-star,
.service4-section-area .service-box-area:focus-within .service-feature-tag .fa-star,
.service4-section-area .service-box-area.active .service-feature-tag .fa-star,
.service4-section-area .service-box-area.is-active .service-feature-tag .fa-star {
  color: #ffffff !important;
}


/* =========================================================
   MOBILE-ONLY TWO-COLUMN LAYOUT
   Left column: items 1 and 2
   Right column: items 3 and 4
   ========================================================= */

@media screen and (max-width: 767px) {

  .service4-section-area
  .service-mobile-slider
  .service-box-area
  .service-feature-tags {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;

    width: 100% !important;
    margin-top: 18px !important;

    align-items: start !important;

    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Both column wrappers fill their complete grid cells */
  .service4-section-area
  .service-mobile-slider
  .service-feature-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  /* Left column */
  .service4-section-area
  .service-mobile-slider
  .service-feature-column--left {
    grid-column: 1 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Right column */
  .service4-section-area
  .service-mobile-slider
  .service-feature-column--right {
    grid-column: 2 !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  /* Individual tag remains inline:
     star and label stay together rather than stretching full width */
  .service4-section-area
  .service-mobile-slider
  .service-feature-tag {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    white-space: nowrap !important;

    font-size: 11px;
    line-height: 1.45;
  }

  /* Left tags begin at the left card edge */
  .service4-section-area
  .service-mobile-slider
  .service-feature-column--left
  .service-feature-tag {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Right tags terminate at the same right card edge */
  .service4-section-area
  .service-mobile-slider
  .service-feature-column--right
  .service-feature-tag {
    align-self: flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  /* Keep icon spacing consistent on mobile */
  .service4-section-area
  .service-mobile-slider
  .service-feature-tag
  .fa-star {
    flex: 0 0 auto;
    margin: 0 7px 1px 0;
  }
}