.technology {
  padding: 40px 0;

  background: var(--bg);
}

.technology .section-tag,
.technology .section-title,
.technology .section-subtitle {
  text-align: center;

  display: block;
}

.technology-grid {
  margin-top: 60px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;
}

.tech-box {
  background: var(--bg-light);

  padding: 30px;

  border-radius: 20px;

  border: 1px solid var(--border);

  box-shadow: var(--shadow-sm);

  transition: 0.35s;
}

.tech-box:hover {
  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);
}

.tech-icon {
  width: 70px;

  height: 70px;

  background: linear-gradient(135deg, var(--primary), #5aa8ff);

  border-radius: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--text);

  font-size: 28px;

  margin-bottom: 25px;
}

.tech-box h3 {
  margin-bottom: 25px;
}

.tech-list {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.tech-list span {
  padding: 10px 18px;

  background: var(--bg);

  border-radius: 30px;

  font-size: 14px;

  font-weight: 600;

  transition: 0.3s;
}

.tech-list span:hover {
  background: var(--primary);

  color: white;
}
@media (max-width: 1100px) {
  .technology-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .technology-grid {
    grid-template-columns: 1fr;
  }
}
.tech-list span {
  color: var(--text) !important;
}