/**
 * Icon styling for consistent display across the site
 */

/* Standard icon sizing for practice-icon container */
.practice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  height: 60px; /* Fixed height container for consistency */
}

.practice-icon img {
  width: 48px;
  height: 48px;
  fill: var(--gold); /* Updated color */
}

/* Icon sizing for expertise cards on homepage */
.expertise-card .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  height: 60px; /* Updated height for consistency */
}

.expertise-card .icon-container img {
  width: 48px; /* Updated width for consistency */
  height: 48px; /* Updated height for consistency */
  fill: var(--gold); /* Updated color */
}

/* Icon sizing for approach/value sections */
.approach-card .approach-icon,
.value-card .value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  height: 60px; /* Updated height for consistency */
}

.approach-card .approach-icon svg,
.value-card .value-icon svg {
  width: 48px; /* Updated width for consistency */
  height: 48px; /* Updated height for consistency */
  fill: var(--gold); /* Updated color */
}

/* Icon styles for highlighting key points or sections */
.key-point-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: var(--primary);
}

.key-point-icon svg {
  width: 100%;
  height: 100%;
}

/* Icon styles for hero section */
.hero-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  fill: var(--accent);
}

.hero-icon svg {
  width: 100%;
  height: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .practice-icon img {
    width: 42px;
    height: 42px;
    fill: var(--gold); /* Updated color */
  }
  
  .expertise-card .icon-container img {
    width: 42px; /* Updated width for consistency */
    height: 42px; /* Updated height for consistency */
    fill: var(--gold); /* Updated color */
  }
  
  .approach-card .approach-icon svg,
  .value-card .value-icon svg {
    width: 42px; /* Updated width for consistency */
    height: 42px; /* Updated height for consistency */
    fill: var(--gold); /* Updated color */
  }
}