/* Placeholder styles for missing images */

/* Client photos placeholders */
.client-photo img {
  background-color: #e0e0e0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Enhanced placeholder styles for client photos */
.client-photo img.loading {
  opacity: 0.6;
  filter: blur(3px);
}

.client-photo img.loaded {
  opacity: 1;
  filter: blur(0);
}

.client-photo img.error {
  opacity: 0.8;
  background-color: #f0f0f0;
}

/* Client photo color variations */
.client-photo img[src*="client1.jpg"], 
.client-photo img[data-src*="client1.jpg"] {
  background-color: #1A1E5D;
}

.client-photo img[src*="client2.jpg"],
.client-photo img[data-src*="client2.jpg"] {
  background-color: #1E99FF;
}

.client-photo img[src*="client3.jpg"],
.client-photo img[data-src*="client3.jpg"] {
  background-color: #CBA198;
}

/* Client photo placeholder fallback */
.client-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  font-weight: bold;
  font-size: 18px;
}

/* Fix for missing icons */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Social links */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(30, 153, 255, 0.1);
  color: var(--color-secondary);
  margin-right: 10px;
  transition: all var(--transition-normal);
}

.social-link:hover {
  background-color: var(--color-secondary);
  color: #ffffff;
  transform: translateY(-3px);
}

.social-link i {
  font-size: 18px;
}

/* Fix for contact icons */
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(30, 153, 255, 0.1);
  color: var(--color-secondary);
  margin-right: 15px;
}

.contact-icon i {
  font-size: 20px;
}

/* Tabler icons sizing */
.ti {
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

/* Button icons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon i {
  font-size: 18px;
}