/* SECTION */
.sector-section {
  padding: 60px 20px;
}

/* GRID */
.sector-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sector-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* CARD BASE */
.card {
  padding: 24px;
  border-radius: 16px;
  border: 2px solid;
  background: linear-gradient(to bottom right, var(--bg-light), #ffffff);
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* CONTENT */
.card-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.card-text {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
}

/* COLOR VARIANTS */
.card-blue {
  --bg-light: #eff6ff;
  --border-hover: #3b82f6;
  border-color: #bfdbfe;
}

.card-purple {
  --bg-light: #faf5ff;
  --border-hover: #a855f7;
  border-color: #e9d5ff;
}

.card-green {
  --bg-light: #f0fdf4;
  --border-hover: #22c55e;
  border-color: #bbf7d0;
}

.card-cyan {
  --bg-light: #ecfeff;
  --border-hover: #06b6d4;
  border-color: #a5f3fc;
}

.card-orange {
  --bg-light: #fff7ed;
  --border-hover: #f97316;
  border-color: #fed7aa;
}

.card-red {
  --bg-light: #fef2f2;
  --border-hover: #ef4444;
  border-color: #fecaca;
}

.card-pink {
  --bg-light: #fdf2f8;
  --border-hover: #ec4899;
  border-color: #fbcfe8;
}

.card-yellow {
  --bg-light: #fefce8;
  --border-hover: #eab308;
  border-color: #fef08a;
}

.card-indigo {
  --bg-light: #eef2ff;
  --border-hover: #6366f1;
  border-color: #c7d2fe;
}

.card-teal {
  --bg-light: #f0fdfa;
  --border-hover: #14b8a6;
  border-color: #99f6e4;
}

.card-violet {
  --bg-light: #f5f3ff;
  --border-hover: #8b5cf6;
  border-color: #ddd6fe;
}

.card-rose {
  --bg-light: #fff1f2;
  --border-hover: #f43f5e;
  border-color: #fecdd3;
}
