body {
  background-color: #fafafa;
  font-family: "Segoe UI", sans-serif;
}

.card {
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.category-card {
  border: none;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.breadcrumb {
  background: none;
  padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #6c757d;
}

/* Category specific styling */
.category-header {
  border-radius: 20px;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.category-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-size: 50px 50px;
}

/* Health Category */
.health-category {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #ff8a80 100%);
  color: white;
}

.health-category .fa-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Finance Category */
.finance-category {
  background: linear-gradient(135deg, #51cf66 0%, #40c057 50%, #69db7c 100%);
  color: white;
}

.finance-category .fa-coins {
  animation: bounce 2s ease-in-out infinite;
}

/* Math Category */
.math-category {
  background: linear-gradient(135deg, #339af0 0%, #228be6 50%, #74c0fc 100%);
  color: white;
}

.math-category .fa-calculator {
  animation: pulse 2s ease-in-out infinite;
}

/* Conversion Category */
.conversion-category {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #67e8f9 100%);
  color: white;
}

.conversion-category .fa-exchange-alt {
  animation: rotate 3s linear infinite;
}

/* Date-Time Category */
.datetime-category {
  background: linear-gradient(135deg, #ffd43b 0%, #fab005 50%, #ffe066 100%);
  color: #333;
}

.datetime-category .fa-calendar {
  animation: swing 2s ease-in-out infinite;
}

/* Construction Category */
.construction-category {
  background: linear-gradient(135deg, #868e96 0%, #495057 50%, #adb5bd 100%);
  color: white;
}

.construction-category .fa-hard-hat {
  animation: shake 2s ease-in-out infinite;
}

/* Automotive Category */
.automotive-category {
  background: linear-gradient(135deg, #343a40 0%, #212529 50%, #495057 100%);
  color: white;
}

.automotive-category .fa-car {
  animation: drive 3s ease-in-out infinite;
}

/* Business Category */
.business-category {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #8b5cf6 100%);
  color: white;
}

.business-category .fa-briefcase {
  animation: briefcase 2s ease-in-out infinite;
}

/* Gaming Category */
.gaming-category {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #a855f7 100%);
  color: white;
}

.gaming-category .fa-dice {
  animation: dice-roll 2s ease-in-out infinite;
}

/* Academic Category */
.academic-category {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #14b8a6 100%);
  color: white;
}

.academic-category .fa-graduation-cap {
  animation: graduate 2s ease-in-out infinite;
}

/* Animations */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes drive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes briefcase {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(10deg); }
}

@keyframes dice-roll {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
}

@keyframes graduate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(5deg); }
}

/* Category Cards */
.category-card {
  transition: all 0.3s ease;
  border: none;
}

.health-category .card {
  border-left: 4px solid #ff6b6b;
}

.finance-category .card {
  border-left: 4px solid #51cf66;
}

.math-category .card {
  border-left: 4px solid #339af0;
}

.conversion-category .card {
  border-left: 4px solid #22d3ee;
}

.datetime-category .card {
  border-left: 4px solid #ffd43b;
}

.construction-category .card {
  border-left: 4px solid #868e96;
}

.automotive-category .card {
  border-left: 4px solid #343a40;
}

.business-category .card {
  border-left: 4px solid #7c3aed;
}

.gaming-category .card {
  border-left: 4px solid #9333ea;
}

.academic-category .card {
  border-left: 4px solid #0d9488;
}

/* Custom Bootstrap Color Classes */
.text-purple {
  color: #9333ea !important;
}

.text-teal {
  color: #0d9488 !important;
}

.btn-purple {
  background-color: #9333ea;
  border-color: #9333ea;
  color: white;
}

.btn-purple:hover {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

.btn-teal {
  background-color: #0d9488;
  border-color: #0d9488;
  color: white;
}

.btn-teal:hover {
  background-color: #0f766e;
  border-color: #0f766e;
  color: white;
}

.btn-indigo {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

.btn-indigo:hover {
  background-color: #6d28d9;
  border-color: #6d28d9;
  color: white;
}

.btn-outline-indigo {
  color: #7c3aed;
  border-color: #7c3aed;
}

.btn-outline-indigo:hover {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

.btn-outline-purple {
  color: #9333ea;
  border-color: #9333ea;
}

.btn-outline-purple:hover {
  background-color: #9333ea;
  border-color: #9333ea;
  color: white;
}

.btn-outline-teal {
  color: #0d9488;
  border-color: #0d9488;
}

.btn-outline-teal:hover {
  background-color: #0d9488;
  border-color: #0d9488;
  color: white;
}

@media (max-width: 768px) {
  .card-body {
    padding: 1rem;
  }
  
  .fa-4x {
    font-size: 2.5em !important;
  }
}
.faq-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: 'Segoe UI', Arial, sans-serif;
}
  .faq-section summary {
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    color: #333;
  }
  .faq-section details {
    border-bottom: 1px solid #ddd;
    padding: 6px 0;
  }
  .faq-section details[open] summary {
    color: #007BFF;
  }
  .faq-section p, .faq-section ul {
    margin-left: 10px;
    color: #555;
  }