/* ============================================
   FRILENSERI - Creative Icons System
   Lucide Icons - Modern Thin-Line Style
   ============================================ */

/* Icon Base Styles */
.icon {
  width: 1em;
  height: 1em;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-2xl { width: 4rem; height: 4rem; }

/* Creative Service Icons */
.icon-pen-tool {
  /* Lucide: pen-tool */
  stroke-width: 1.5;
}

.icon-brush {
  /* Lucide: brush */
  stroke-width: 1.5;
}

.icon-palette {
  /* Lucide: palette */
  stroke-width: 1.5;
}

.icon-layers {
  /* Lucide: layers */
  stroke-width: 1.5;
}

.icon-code {
  /* Lucide: code */
  stroke-width: 1.5;
}

.icon-monitor {
  /* Lucide: monitor */
  stroke-width: 1.5;
}

.icon-briefcase {
  /* Lucide: briefcase */
  stroke-width: 1.5;
}

.icon-laptop {
  /* Lucide: laptop */
  stroke-width: 1.5;
}

.icon-lightbulb {
  /* Lucide: lightbulb */
  stroke-width: 1.5;
}

.icon-target {
  /* Lucide: target */
  stroke-width: 1.5;
}

.icon-chart-line {
  /* Lucide: chart-line */
  stroke-width: 1.5;
}

/* Feature Icons */
.icon-check-circle {
  stroke-width: 2;
  color: var(--color-accent);
}

.icon-star {
  stroke-width: 1.5;
  fill: var(--color-accent);
  color: var(--color-accent);
}

.icon-award {
  stroke-width: 1.5;
}

/* Contact Icons */
.icon-phone {
  stroke-width: 1.5;
}

.icon-mail {
  stroke-width: 1.5;
}

.icon-map-pin {
  stroke-width: 1.5;
}

.icon-message-circle {
  stroke-width: 1.5;
}

/* Social Icons */
.icon-behance {
  stroke-width: 1.5;
}

.icon-linkedin {
  stroke-width: 1.5;
}

.icon-instagram {
  stroke-width: 1.5;
}

/* Icon Containers */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.icon-container:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: var(--shadow-glow);
}