/* =========================================================
   Helper Class: item-grid-icon-gradient-border
   Add this class only to the Item Grid wrapper
   ========================================================= */
.item-grid-icon-gradient-border {
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}
.item-grid-icon-gradient-border .ep-item-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-grid-icon-gradient-border .ep-item-title-wrapper .ep-item-title {
  order: -1;
}
/* Grid */
.item-grid-icon-gradient-border .ep-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 56px !important;
  width: 100% !important;
  align-items: start !important;
}
/* Reset default item styles */
.item-grid-icon-gradient-border .ep-item, .item-grid-icon-gradient-border .ep-grid-column, .item-grid-icon-gradient-border .one-third, .item-grid-icon-gradient-border .one-full-mobile, .item-grid-icon-gradient-border .one-full-tablet {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
/* Main structure */
.item-grid-icon-gradient-border .ep-item-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
}
/* Icon wrapper */
.item-grid-icon-gradient-border .ep-item-media {
  order: 1 !important;
  position: relative !important;
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto 32px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: linear-gradient(#000000, #000000) padding-box, linear-gradient(135deg, #F08A3C 0%, #D13DB0 48%, #6F21D6 100%) border-box !important;
  box-shadow: 0 0 20px rgba(209, 61, 176, 0.16) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
/* Inner icon background */
.item-grid-icon-gradient-border .ep-item-media::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #0F0F0F 0%, #242426 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Remove unwanted overlays */
.item-grid-icon-gradient-border .ep-item-media::after {
  display: none !important;
}
/* Make the icon/link sit above the inner background */
.item-grid-icon-gradient-border .ep-item-media > *, .item-grid-icon-gradient-border .ep-item-media a, .item-grid-icon-gradient-border .ep-item-media span, .item-grid-icon-gradient-border .ep-item-media i, .item-grid-icon-gradient-border .ep-item-media img, .item-grid-icon-gradient-border .ep-item-media svg {
  position: relative !important;
  z-index: 3 !important;
}
/* Icon itself */
.item-grid-icon-gradient-border .ep-item-media img, .item-grid-icon-gradient-border .ep-item-media svg, .item-grid-icon-gradient-border .ep-item-media i, .item-grid-icon-gradient-border .ep-item-media .avia_image, .item-grid-icon-gradient-border .ep-item-media .av-icon-char, .item-grid-icon-gradient-border .ep-item-media .iconbox_icon, .item-grid-icon-gradient-border .ep-item-media .avia-font-entypo-fontello {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  line-height: 24px !important;
  object-fit: contain !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}
/* SVG paths */
.item-grid-icon-gradient-border .ep-item-media svg *, .item-grid-icon-gradient-border .ep-item-media path, .item-grid-icon-gradient-border .ep-item-media line, .item-grid-icon-gradient-border .ep-item-media polyline, .item-grid-icon-gradient-border .ep-item-media rect {
  stroke: #FFFFFF !important;
  fill: none !important;
}
/* Image icons */
.item-grid-icon-gradient-border .ep-item-media img, .item-grid-icon-gradient-border .ep-item-media .avia_image {
  filter: brightness(0) invert(1) !important;
}
/* Content wrapper */
.item-grid-icon-gradient-border .ep-item-contents {
  order: 2 !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  background: transparent !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* Force text order */
.item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border h3, .item-grid-icon-gradient-border h4 {
  order: 1 !important;
}
.item-grid-icon-gradient-border .ep-item-subtitle {
  order: 2 !important;
}
.item-grid-icon-gradient-border .ep-item-content {
  order: 3 !important;
}
/* Heading */
.item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border h3, .item-grid-icon-gradient-border h4 {
  color: #FFFFFF !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin: 0 0 16px !important;
  letter-spacing: 0 !important;
}
/* Subheading */
.item-grid-icon-gradient-border .ep-item-subtitle {
  color: #EDEDED !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 16px !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
}
/* Content */
.item-grid-icon-gradient-border .ep-item-content {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p, .item-grid-icon-gradient-border .ep-item-contents p {
  color: #EDEDED !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin: 0 !important;
}
/* Remove extra spacing */
.item-grid-icon-gradient-border .ep-item-content p, .item-grid-icon-gradient-border .ep-item-contents p {
  margin-bottom: 0 !important;
}
/* Remove hover/default effects */
.item-grid-icon-gradient-border .ep-item, .item-grid-icon-gradient-border .ep-item-inner, .item-grid-icon-gradient-border .ep-item-contents, .item-grid-icon-gradient-border .ep-item a {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Keep icon stable on hover */
.item-grid-icon-gradient-border .ep-item .ep-item-media {
  background: linear-gradient(#000000, #000000) padding-box, linear-gradient(135deg, #F08A3C 0%, #D13DB0 48%, #6F21D6 100%) border-box !important;
  box-shadow: 0 0 20px rgba(209, 61, 176, 0.16) !important;
}
/* =========================
   Tablet
   ========================= */
@media only screen and (max-width: 989px) {
  .item-grid-icon-gradient-border .ep-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .item-grid-icon-gradient-border .ep-item-contents {
    max-width: 420px !important;
  }
  .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border h3, .item-grid-icon-gradient-border h4 {
    font-size: 30px !important;
    margin-bottom: 16px !important;
  }
  .item-grid-icon-gradient-border .ep-item-subtitle {
    font-size: 24px !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
  }
}
/* =========================
   Mobile
   ========================= */
@media only screen and (max-width: 767px) {
  .item-grid-icon-gradient-border .ep-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }
  .item-grid-icon-gradient-border .ep-item-media {
    width: 76px !important;
    height: 76px !important;
    margin-bottom: 26px !important;
  }
  .item-grid-icon-gradient-border .ep-item-media::before {
    inset: 16px !important;
  }
  .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border h3, .item-grid-icon-gradient-border h4 {
    font-size: 26px !important;
    margin-bottom: 16px !important;
  }
  .item-grid-icon-gradient-border .ep-item-subtitle {
    font-size: 20px !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
  }
  .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p, .item-grid-icon-gradient-border .ep-item-contents p {
    font-size: 15px !important;
  }
}
/* =========================================================
   Responsive layout fix
   Tablet + Mobile: full width, icon top-left, content below
   ========================================================= */
@media only screen and (max-width: 989px) {
  /* Icon top-left */
  /* Content full width below icon */
  .item-grid-icon-gradient-border .ep-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    width: 100% !important;
  }
  .item-grid-icon-gradient-border .ep-item, .item-grid-icon-gradient-border .ep-grid-column, .item-grid-icon-gradient-border .one-third, .item-grid-icon-gradient-border .one-full-mobile, .item-grid-icon-gradient-border .one-full-tablet {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    display: block !important;
  }
  .item-grid-icon-gradient-border .ep-item-inner {
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .item-grid-icon-gradient-border .ep-item-media {
    order: 1 !important;
    margin: 0 0 28px 0 !important;
    align-self: flex-start !important;
  }
  .item-grid-icon-gradient-border .ep-item-contents {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .item-grid-icon-gradient-border .ep-item-title-wrapper {
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 0 16px !important;
  }
  .item-grid-icon-gradient-border .ep-item-subtitle {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 0 16px !important;
  }
  .item-grid-icon-gradient-border .ep-item-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p, .item-grid-icon-gradient-border .ep-item-contents p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
}
/* Mobile fine tuning */
@media only screen and (max-width: 767px) {
  .item-grid-icon-gradient-border .ep-grid {
    gap: 42px !important;
  }
  .item-grid-icon-gradient-border .ep-item-media {
    width: 76px !important;
    height: 76px !important;
    margin: 0 0 24px 0 !important;
  }
  .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .item-grid-icon-gradient-border .ep-item-subtitle {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}
/* =========================================================
   Responsive full-width fix
   Remove forced <br> breaks on tablet/mobile
   ========================================================= */
@media only screen and (max-width: 989px) {
  /* Hide manual line breaks in responsive */
  .item-grid-icon-gradient-border .ep-item, .item-grid-icon-gradient-border .ep-item-inner, .item-grid-icon-gradient-border .ep-item-contents, .item-grid-icon-gradient-border .ep-item-title-wrapper, .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border .ep-item-subtitle, .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
  .item-grid-icon-gradient-border .ep-item-title br, .item-grid-icon-gradient-border .ep-item-subtitle br, .item-grid-icon-gradient-border .ep-item-content br {
    display: none !important;
  }
  .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a {
    white-space: normal !important;
  }
  .item-grid-icon-gradient-border .ep-item-subtitle {
    white-space: normal !important;
  }
  .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p {
    white-space: normal !important;
  }
}
@media only screen and (max-width: 767px) {
  .item-grid-icon-gradient-border .ep-item, .item-grid-icon-gradient-border .ep-item-inner, .item-grid-icon-gradient-border .ep-item-contents, .item-grid-icon-gradient-border .ep-item-title-wrapper, .item-grid-icon-gradient-border .ep-item-title, .item-grid-icon-gradient-border .ep-item-title a, .item-grid-icon-gradient-border .ep-item-subtitle, .item-grid-icon-gradient-border .ep-item-content, .item-grid-icon-gradient-border .ep-item-content p {
    width: 100% !important;
    max-width: none !important;
  }
}
/* =========================================================
   More spacing between items on tablet and mobile
   ========================================================= */
@media only screen and (max-width: 989px) {
  .item-grid-icon-gradient-border .ep-grid {
    gap: 72px !important;
    row-gap: 72px !important;
  }
}
@media only screen and (max-width: 767px) {
  .item-grid-icon-gradient-border .ep-grid {
    gap: 64px !important;
    row-gap: 64px !important;
  }
}
