/*=====================================
INDUSTRIES
=====================================*/

.industries {
  position: relative;
  padding: 112px 0;
  overflow: hidden;
  background: #f8faff;
}

.industries-container {
  position: relative;
  z-index: 1;
  width: min(92%, 1320px);
  margin: auto;
}

.industries-heading {
  margin: 0 auto 54px;
  text-align: center;
}

.industries-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4264f5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .65px;
}

.industries-heading h2 {
  margin: 15px 0 11px;
  color: #0f172a;
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.15;
}

.industries-heading h2 span {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.industries-heading p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

.industry-card {
  overflow: hidden;
  border: 1px solid #eaf0f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
  transition: transform .28s ease, box-shadow .28s ease;
}

.industry-card:hover {
  position: relative;
  z-index: 1;
  transform: translateY(-6px);
  box-shadow: 0 18px 32px rgba(15, 23, 42, .11);
}

.industry-image {
  position: relative;
  height: 107px;
  background-image: linear-gradient(135deg, var(--industry-tint), transparent 75%), url('../images/industries-sprite.png');
  background-size: 100% 100%, 500% auto;
  background-position: 0 0, var(--industry-position);
  transition: transform .35s ease;
}

.industry-card:hover .industry-image {
  transform: scale(1.045);
}

.industry-count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--industry-color);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .16);
}

.industry-content {
  min-height: 93px;
  padding: 13px 13px 14px;
}

.industry-content h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.industry-content h3 i {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--industry-soft);
  color: var(--industry-color);
  font-size: 13px;
}

.industry-content p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.industry-card--red { --industry-color: #fb4b5c; --industry-soft: #fff0f1; --industry-tint: rgba(237, 102, 90, .38); }
.industry-card--blue { --industry-color: #2563eb; --industry-soft: #eff6ff; --industry-tint: rgba(45, 100, 230, .30); }
.industry-card--orange { --industry-color: #fb7a19; --industry-soft: #fff5e9; --industry-tint: rgba(227, 119, 39, .35); }
.industry-card--slate { --industry-color: #64748b; --industry-soft: #f1f5f9; --industry-tint: rgba(61, 91, 127, .31); }
.industry-card--green { --industry-color: #10b981; --industry-soft: #ecfdf5; --industry-tint: rgba(20, 151, 107, .30); }
.industry-card--purple { --industry-color: #7c3aed; --industry-soft: #f5f3ff; --industry-tint: rgba(81, 37, 174, .36); }
.industry-card--amber { --industry-color: #f59e0b; --industry-soft: #fffbeb; --industry-tint: rgba(222, 156, 40, .30); }
.industry-card--cyan { --industry-color: #06b6d4; --industry-soft: #ecfeff; --industry-tint: rgba(15, 150, 176, .33); }
.industry-card--indigo { --industry-color: #4f7ee9; --industry-soft: #eef4ff; --industry-tint: rgba(39, 78, 178, .34); }
.industry-card--pink { --industry-color: #ec4899; --industry-soft: #fdf2f8; --industry-tint: rgba(198, 47, 127, .34); }

@media (max-width: 1050px) {
  .industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-image { height: 125px; }
  .industry-content { min-height: 102px; padding: 15px; }
  .industry-content h3 { font-size: 13px; }
  .industry-content p { font-size: 11px; }
}

@media (max-width: 680px) {
  .industries { padding: 78px 0; }
  .industries-container { width: min(90%, 480px); }
  .industries-heading { margin-bottom: 38px; }
  .industries-heading p { font-size: 14px; }
  .industries-break { display: none; }
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .industry-image { height: 100px; }
  .industry-content { min-height: 105px; padding: 12px; }
  .industry-content h3 { gap: 6px; font-size: 11px; }
  .industry-content h3 i { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
  .industry-content p { font-size: 10px; }
}

@media (max-width: 390px) {
  .industries-grid { grid-template-columns: 1fr; }
  .industry-image { height: 130px; }
  .industry-content { min-height: 0; }
}