/* Global smooth scrolling */
* {
  scroll-behavior: smooth;
}

/* Hero Box Styling */
.hero-box {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #10b981 100%);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
  margin-bottom: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.4);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.hero-description {
  font-size: 1.25rem;
  color: #bf0c0c;
  margin: 0;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-description {
    font-size: 1.1rem;
  }
  
  .hero-box {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
}

/* Expand/Collapse All Button */
.expand-collapse-all-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-top: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

.expand-collapse-all-btn span {
  position: relative;
  z-index: 1;
}

.expand-collapse-all-btn::before {
  content: "";
  position: absolute;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.2) 50%, transparent 100%);
  width: 0;
  height: 0;
  left: var(--xPos, 50%);
  top: var(--yPos, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: width 0.6s ease-out, height 0.6s ease-out;
  pointer-events: none;
}

.expand-collapse-all-btn:hover::before {
  width: 400px;
  height: 400px;
}

.expand-collapse-all-btn.collapsed-state::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.2) 50%, transparent 100%);
}

.expand-collapse-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.expand-collapse-all-btn:active {
  transform: translateY(0);
}

/* Video Section Styling - Modern Card Design */
.video-section {
  padding: 0;
}

.video-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 1.75rem 2rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border-left: 5px solid #3b82f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.video-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-header:hover::before {
  opacity: 1;
}

.video-header:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  transform: translateX(6px);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1), 0 10px 20px rgba(59, 130, 246, 0.08);
  border-left-color: #2563eb;
}

.video-collapse-icon {
  font-size: 1.75rem;
  font-weight: 400;
  color: #3b82f6;
  width: 36px;
  min-width: 36px;
  height: 36px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
}

.video-header:hover .video-collapse-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.video-section.collapsed .video-collapse-icon {
  transform: rotate(0deg);
}

.video-section:not(.collapsed) .video-collapse-icon {
  transform: rotate(180deg);
}

.video-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0;
  flex: 1;
  letter-spacing: -0.025em;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.video-content {
  overflow: visible;
  opacity: 1;
  padding: 0.5rem 0;
  height: auto;
  max-height: none;
  transition: opacity 0.3s ease, padding 0.3s ease;
}

.video-section.collapsed .video-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
}

.video-intro {
  padding: 1rem 0.5rem;
  margin-bottom: 1rem;
}

.video-intro p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.topic-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.topic-link:hover {
  text-decoration: underline;
}

/* Accordion Styling */
.accordion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: auto;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1 1 calc(33.333% - 0.5rem);
  min-width: 280px;
  height: auto;
}

.accordion-item.active {
  flex: 1 1 100%;
  order: -1;
  min-height: fit-content;
  animation: expandAccordion 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes expandAccordion {
  from {
    opacity: 0.8;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.accordion-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.accordion-header {
  width: 100%;
  padding: 1rem 1.5rem;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

.accordion-header:hover {
  background: #f9fafb;
  padding-left: 1.75rem;
}

.accordion-icon {
  font-size: 1.5rem;
  color: #6b7280;
  font-weight: 300;
  width: 24px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.accordion-item.active .accordion-icon {
  transform: rotate(135deg);
  color: #3b82f6;
}

.accordion-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  background: transparent;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: none;
  overflow: visible;
  opacity: 1;
}

.accordion-content p {
  padding: 1rem 1.5rem;
  margin: 0;
  color: #6b7280;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Data Collection Specific Styling */
.dc-wrapper {
  padding: 1.5rem;
  background: #f9fafb;
}

.dc-definition-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #6366f1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-definition-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dc-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.dc-definition-text {
  margin: 0;
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.7;
}

.dc-definition-text strong {
  color: #1f2937;
  font-weight: 600;
}

.dc-section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dc-section-heading {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.dc-stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.dc-stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.dc-stepper-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dc-stepper-item:hover .dc-stepper-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.dc-stepper-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  text-align: center;
}

.dc-stepper-line {
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%);
  margin: 0 -0.5rem;
  margin-bottom: 2rem;
}

.dc-type-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dc-type-card:last-child {
  margin-bottom: 0;
}

.dc-type-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #6366f1;
}

.dc-type-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dc-type-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.dc-type-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.dc-type-description {
  color: #6b7280;
  line-height: 1.7;
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

.dc-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dc-example-label {
  font-weight: 600;
  color: #4b5563;
  font-size: 0.875rem;
  margin-right: 0.25rem;
}

.dc-example-tag {
  background: #ffffff;
  color: #4f46e5;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #e0e7ff;
  transition: all 0.2s ease;
}

.dc-example-tag:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  transform: translateY(-1px);
}

.dc-table-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.dc-table thead {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.dc-table th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 600;
  color: #1f2937;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #d1d5db;
  border-right: 1px solid #d1d5db;
}

.dc-table th:last-child {
  border-right: none;
}

.dc-table td {
  padding: 1rem 1.5rem;
  color: #374151;
  font-size: 0.95rem;
  border-right: 1px solid #e5e7eb;
}

.dc-table td:last-child {
  border-right: none;
}

.dc-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.dc-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.dc-table tbody tr:last-child {
  border-bottom: none;
}

.dc-table tbody tr:hover {
  background-color: #f0f9ff;
}

.dc-table-label {
  font-weight: 500;
  color: #1f2937;
}

.dc-percentage-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
}

.dc-percentage-high {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.dc-percentage-low {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #4b5563;
  border: 1px solid #d1d5db;
}

/* Responsive Design for Data Collection */
@media (max-width: 768px) {
  .dc-definition-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  
  .dc-stepper-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .dc-stepper-line {
    width: 3px;
    height: 30px;
    flex: none;
    margin: 0;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%);
  }
  
  .dc-stepper-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  
  .dc-type-card {
    padding: 1.25rem;
  }
  
  .dc-table th,
  .dc-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}

.accordion-content span {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.accordion-content span:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.accordion-content span:active {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s ease;
}

.accordion-item.active .accordion-header {
  background: #f9fafb;
}

/* Responsive Accordion */
@media (max-width: 768px) {
  .video-title {
    font-size: 1.1rem;
  }
  
  .accordion-header {
    padding: 0.875rem 1rem;
  }
  
  .accordion-title {
    font-size: 0.95rem;
  }
}
/* Data Quality Specific Styling */
.dq-wrapper {
  padding: 1.5rem;
  background: transparent;
}

.dq-intro-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #10b981;
}

.dq-intro-text {
  margin: 0;
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.7;
}

.dq-intro-text strong {
  color: #1f2937;
  font-weight: 600;
}

.dq-flow-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dq-flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.dq-flow-item {
  width: 100%;
  max-width: 350px;
  display: flex;
  justify-content: center;
}

.dq-flow-box {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 2px solid #10b981;
  border-radius: 10px;
  padding: 1.25rem 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  transition: all 0.3s ease;
}

.dq-flow-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.dq-flow-box.dq-level-4 {
  background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
  border-color: #059669;
}

.dq-flow-box.dq-level-3 {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981;
}

.dq-flow-box.dq-level-2 {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #34d399;
}

.dq-flow-box.dq-level-1 {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #4ade80;
}

.dq-flow-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #065f46;
}

.dq-flow-subtitle {
  font-size: 0.9rem;
  color: #059669;
  font-weight: 500;
}

.dq-flow-arrow {
  font-size: 2rem;
  color: #10b981;
  font-weight: bold;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dq-sources-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #3b82f6;
}

.dq-sources-text {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.7;
}

.dq-sources-text strong {
  color: #1f2937;
  font-weight: 600;
}

.dq-attributes-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dq-section-heading {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.dq-attributes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dq-attribute-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.dq-attribute-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #10b981;
  background: #f0fdf4;
}

.dq-attribute-number {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.dq-attribute-content {
  flex: 1;
}

.dq-attribute-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.dq-attribute-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.6;
}

/* Responsive Design for Data Quality */
@media (max-width: 768px) {
  .dq-flow-box {
    padding: 1rem 1.5rem;
  }
  
  .dq-flow-title {
    font-size: 1rem;
  }
  
  .dq-flow-subtitle {
    font-size: 0.85rem;
  }
  
  .dq-attribute-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
}/* Business Intelligence Specific Styling */
.bi-wrapper {
  padding: 1.5rem;
  background: transparent;
}

.bi-definition-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #f59e0b;
}

.bi-definition-text {
  margin: 0;
  font-size: 1.05rem;
  color: #78350f;
  line-height: 1.7;
}

.bi-definition-text strong {
  color: #92400e;
  font-weight: 600;
}

.bi-timeline-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bi-section-heading {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.bi-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bi-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 10px;
  border-left: 3px solid #f59e0b;
  transition: all 0.3s ease;
}

.bi-timeline-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  border-left-width: 5px;
}

.bi-timeline-year {
  font-size: 1.25rem;
  font-weight: 700;
  color: #b45309;
  min-width: 60px;
  flex-shrink: 0;
}

.bi-timeline-dot {
  width: 12px;
  height: 12px;
  background: #f59e0b;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.bi-timeline-content {
  flex: 1;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}

.bi-features-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bi-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.bi-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 10px;
  border: 1px solid #fbbf24;
  transition: all 0.3s ease;
}

.bi-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
}

.bi-feature-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.bi-feature-text {
  flex: 1;
  font-size: 0.95rem;
  color: #78350f;
  line-height: 1.6;
}

.bi-need-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bi-need-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bi-need-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 3px solid #f59e0b;
  transition: all 0.3s ease;
}

.bi-need-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fffbeb;
  border-left-width: 5px;
}

.bi-need-number {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.bi-need-text {
  flex: 1;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Responsive Design for Business Intelligence */
@media (max-width: 768px) {
  .bi-timeline-item {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .bi-timeline-year {
    min-width: auto;
  }
  
  .bi-features-list {
    grid-template-columns: 1fr;
  }
}
/* Database Section Styles */
.database-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

/* Database Definition Card */
.db-definition-card {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  border: 1px solid #c7d2fe;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.1);
}

.db-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.db-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.db-definition-text {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.8;
  margin: 0;
}

.db-definition-text strong {
  color: #4338ca;
  font-weight: 600;
}

/* Database Section Card */
.db-section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Characteristics Grid */
.db-characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.db-char-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border-left: 4px solid #4338ca;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.db-char-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.15);
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.db-char-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(67, 56, 202, 0.3);
}

.db-char-content {
  flex: 1;
}

.db-char-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.2px;
}

.db-char-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}

/* Responsive Design for Database Section */
@media (max-width: 768px) {
  .db-characteristics-grid {
    grid-template-columns: 1fr;
  }
  
  .db-definition-card {
    padding: 1.5rem;
  }
  
  .db-section-card {
    padding: 1.5rem;
  }
  
  .db-char-item {
    padding: 1.25rem;
  }
  
  .db-section-heading {
    font-size: 1.3rem;
  }
}
/* OLTP Section Styles */
.oltp-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.oltp-definition-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  border: 1px solid #a7f3d0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.oltp-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.oltp-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #059669;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.oltp-definition-text {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.8;
  margin: 0;
}

.oltp-definition-text strong {
  color: #059669;
  font-weight: 600;
}

.oltp-section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.oltp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.oltp-feature-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-radius: 10px;
  border-left: 4px solid #059669;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.oltp-feature-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.oltp-feature-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.oltp-feature-content {
  flex: 1;
}

.oltp-feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.2px;
}

.oltp-feature-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}

.oltp-feature-desc strong {
  color: #059669;
  font-weight: 600;
}

/* OLAP Section Styles */
.olap-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.olap-definition-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  border: 1px solid #fcd34d;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.olap-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.olap-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #d97706;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.olap-definition-text {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.8;
  margin: 0;
}

.olap-definition-text strong {
  color: #d97706;
  font-weight: 600;
}

.olap-section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.olap-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.olap-feature-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 10px;
  border-left: 4px solid #d97706;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.olap-feature-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

.olap-feature-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.olap-feature-content {
  flex: 1;
}

.olap-feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.2px;
}

.olap-feature-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}

.olap-feature-desc strong {
  color: #d97706;
  font-weight: 600;
}

/* Responsive Design for OLTP and OLAP Sections */
@media (max-width: 768px) {
  .oltp-features-grid,
  .olap-features-grid {
    grid-template-columns: 1fr;
  }
  
  .oltp-definition-card,
  .olap-definition-card {
    padding: 1.5rem;
  }
  
  .oltp-section-card,
  .olap-section-card {
    padding: 1.5rem;
  }
  
  .oltp-feature-item,
  .olap-feature-item {
    padding: 1.25rem;
  }
  
  .oltp-section-heading,
  .olap-section-heading {
    font-size: 1.3rem;
  }
}

/* ===================================
   Data Warehouse Styling
   =================================== */

/* Wrapper */
.dw-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

/* Definition Card */
.dw-definition-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #6366f1;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.dw-definition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.dw-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.dw-definition-content {
  flex: 1;
}

.dw-definition-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.dw-definition-text {
  margin: 0;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.8;
}

.dw-definition-text strong {
  color: #1e293b;
  font-weight: 600;
}

/* Section Card */
.dw-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dw-section-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dw-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.dw-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 2px;
}

/* Characteristics Grid */
.dw-characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.dw-char-card {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dw-char-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
  border-color: #a5b4fc;
}

.dw-char-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 10px;
}

.dw-char-content {
  flex: 1;
}

.dw-char-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.dw-char-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Features List */
.dw-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dw-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dw-feature-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
  border-color: #c7d2fe;
}

.dw-feature-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.dw-feature-content {
  flex: 1;
}

.dw-feature-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.dw-feature-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Data Flow Stepper */
.dw-flow-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.dw-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  max-width: 140px;
  text-align: center;
}

.dw-flow-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
  position: relative;
  z-index: 1;
}

.dw-flow-item:hover .dw-flow-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.dw-flow-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.3;
}

.dw-flow-desc {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.dw-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 2rem;
  font-weight: 300;
  flex: 0 0 auto;
  margin-top: 36px;
  padding: 0 0.5rem;
}

/* Responsive Design */
@media (max-width: 992px) {
  .dw-characteristics-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
  
  .dw-flow-stepper {
    flex-direction: column;
    align-items: center;
  }
  
  .dw-flow-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
  
  .dw-flow-item {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .dw-wrapper {
    padding: 1.5rem;
  }
  
  .dw-definition-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .dw-icon {
    font-size: 3rem;
  }
  
  .dw-definition-title {
    font-size: 1.5rem;
  }
  
  .dw-definition-text {
    font-size: 1rem;
  }
  
  .dw-section-card {
    padding: 2rem;
  }
  
  .dw-section-heading {
    font-size: 1.35rem;
  }
  
  .dw-characteristics-grid {
    grid-template-columns: 1fr;
  }
  
  .dw-char-card {
    padding: 1.5rem;
  }
  
  .dw-feature-item {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  
  .dw-feature-item:hover {
    transform: translateX(4px);
  }
}

@media (max-width: 480px) {
  .dw-wrapper {
    padding: 1rem;
  }
  
  .dw-definition-card {
    padding: 1.5rem;
  }
  
  .dw-icon {
    font-size: 2.5rem;
  }
  
  .dw-section-card {
    padding: 1.5rem;
  }
  
  .dw-char-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .dw-char-icon {
    font-size: 1.75rem;
    width: 42px;
    height: 42px;
  }
  
  .dw-feature-item {
    padding: 1.25rem;
  }
  
  .dw-flow-icon {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
  }
}

/* ===================================
   Measurement System Terminology Styling
   =================================== */

.mst-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #faf5ff 0%, #ffffff 100%);
}

/* Header Card */
.mst-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #8b5cf6;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.mst-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.mst-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.mst-header-content {
  flex: 1;
}

.mst-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.mst-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
}

/* Terms Container */
.mst-terms-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.mst-term-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mst-term-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.mst-term-card:hover {
  transform: translateX(8px);
  border-color: #c4b5fd;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
}

.mst-term-card:hover::before {
  transform: scaleY(1);
}

.mst-term-highlight {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #a78bfa;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}

.mst-term-highlight::before {
  transform: scaleY(1);
  background: linear-gradient(180deg, #7c3aed 0%, #8b5cf6 100%);
}

.mst-term-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

.mst-term-content {
  flex: 1;
}

.mst-term-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.mst-term-definition {
  font-size: 1rem;
  font-weight: 600;
  color: #8b5cf6;
  margin: 0 0 0.75rem 0;
  font-style: italic;
}

.mst-term-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Hierarchy Card */
.mst-hierarchy-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.mst-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.mst-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
  border-radius: 2px;
}

.mst-hierarchy-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.mst-hierarchy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.mst-hierarchy-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
  position: relative;
  z-index: 1;
}

.mst-hierarchy-item:hover .mst-hierarchy-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25);
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.mst-hierarchy-kpi .mst-hierarchy-icon {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
  transform: scale(1.05);
}

.mst-hierarchy-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  text-align: center;
}

.mst-hierarchy-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 2rem;
  font-weight: 300;
  flex: 0 0 auto;
  padding: 0 0.5rem;
}

/* Responsive */
@media (max-width: 992px) {
  .mst-hierarchy-flow {
    flex-direction: column;
  }
  
  .mst-hierarchy-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
}

@media (max-width: 768px) {
  .mst-wrapper {
    padding: 1.5rem;
  }
  
  .mst-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .mst-header-icon {
    font-size: 3rem;
  }
  
  .mst-header-title {
    font-size: 1.5rem;
  }
  
  .mst-term-card {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  
  .mst-term-number {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  
  .mst-hierarchy-card {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .mst-wrapper {
    padding: 1rem;
  }
  
  .mst-header-card {
    padding: 1.5rem;
  }
  
  .mst-term-card {
    padding: 1.25rem;
  }
  
  .mst-hierarchy-icon {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
  }
}

/* ===================================
   Types of Decision Styling
   =================================== */

.tod-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #f0f9ff 0%, #ffffff 100%);
}

/* Header Card */
.tod-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #3b82f6;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.tod-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.tod-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.tod-header-content {
  flex: 1;
}

.tod-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.tod-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
}

/* Matrix Card */
.tod-matrix-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: visible;
}

.tod-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.tod-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  border-radius: 2px;
}

/* Matrix Container */
.tod-matrix-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  min-height: 400px;
}

/* Axis Labels */
.tod-axis-label {
  position: absolute;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

.tod-axis-top {
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.tod-axis-right {
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

.tod-axis-bottom {
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.tod-axis-left {
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

/* Decision Boxes */
.tod-decision-box {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  z-index: 2;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
}

.tod-decision-box:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tod-strategic {
  border-color: #fecaca;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.tod-strategic:hover {
  border-color: #ef4444;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}

.tod-tactical {
  border-color: #fde68a;
  background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%);
}

.tod-tactical:hover {
  border-color: #f59e0b;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}

.tod-operational {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.tod-operational:hover {
  border-color: #22c55e;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.tod-decision-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.tod-decision-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
}

.tod-decision-tags {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tod-tag {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tod-tag-impact {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.tod-tag-freq {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.tod-tag-balanced {
  background: #fefce8;
  color: #ca8a04;
  border: 1px solid #fde68a;
}

/* Arrows */
.tod-arrow {
  display: none;
  position: absolute;
  font-size: 2rem;
  color: #cbd5e1;
  font-weight: 300;
}

.tod-arrow-1 {
  top: 25%;
  left: 15%;
}

.tod-arrow-2 {
  top: 25%;
  right: 15%;
}

.tod-arrow-3 {
  bottom: 25%;
  left: 15%;
}

.tod-arrow-4 {
  bottom: 25%;
  right: 15%;
}

/* Details Grid */
.tod-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tod-detail-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.tod-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tod-detail-strategic {
  border-left: 5px solid #ef4444;
}

.tod-detail-tactical {
  border-left: 5px solid #f59e0b;
}

.tod-detail-operational {
  border-left: 5px solid #22c55e;
}

.tod-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f1f5f9;
}

.tod-detail-icon {
  font-size: 2rem;
}

.tod-detail-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.tod-detail-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tod-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-radius: 8px;
}

.tod-detail-label {
  font-weight: 600;
  color: #475569;
}

.tod-detail-value {
  font-weight: 700;
  color: #1e293b;
}

.tod-detail-desc {
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}

.tod-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.tod-example-label {
  font-weight: 600;
  color: #475569;
  width: 100%;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.tod-example-tag {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 6px;
  color: #475569;
  font-weight: 500;
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease;
}

.tod-example-tag:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px) {
  .tod-matrix-container {
    padding: 4rem 1.5rem;
  }
  
  .tod-details-grid {
    grid-template-columns: 1fr;
  }
  
  .tod-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .tod-wrapper {
    padding: 1.5rem;
  }
  
  .tod-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .tod-header-icon {
    font-size: 3rem;
  }
  
  .tod-header-title {
    font-size: 1.5rem;
  }
  
  .tod-matrix-card {
    padding: 2rem;
  }
  
  .tod-matrix-container {
    padding: 3rem 1rem;
  }
  
  .tod-decision-box {
    padding: 1.5rem;
  }
  
  .tod-detail-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .tod-wrapper {
    padding: 1rem;
  }
  
  .tod-header-card {
    padding: 1.5rem;
  }
  
  .tod-matrix-card {
    padding: 1.5rem;
  }
  
  .tod-matrix-container {
    padding: 2.5rem 0.75rem;
  }
  
  .tod-decision-box {
    padding: 1.25rem;
  }
  
  .tod-decision-icon {
    font-size: 2rem;
  }
  
  .tod-detail-card {
    padding: 1.25rem;
  }
}

/* ===================================
   Data Mining Styling
   =================================== */

.dm-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #fef3f2 0%, #ffffff 100%);
}

/* Definition Card */
.dm-definition-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #f97316;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.dm-definition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15);
}

.dm-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.dm-definition-content {
  flex: 1;
}

.dm-definition-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.dm-definition-text {
  margin: 0;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.8;
}

.dm-definition-text strong {
  color: #ea580c;
  font-weight: 600;
}

/* Concept Card */
.dm-concept-card {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(249, 115, 22, 0.1);
  border: 2px solid #fed7aa;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.dm-concept-card:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15);
  border-color: #fb923c;
}

.dm-concept-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.dm-concept-content {
  flex: 1;
}

.dm-concept-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.dm-concept-desc {
  margin: 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
}

.dm-concept-desc strong {
  color: #ea580c;
  font-weight: 600;
}

/* Section Card */
.dm-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dm-section-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dm-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.dm-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  border-radius: 2px;
}

/* Process Stepper */
.dm-process-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.dm-process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 200px;
  text-align: center;
}

.dm-process-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
  position: relative;
  z-index: 1;
}

.dm-process-item:hover .dm-process-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 6px 24px rgba(249, 115, 22, 0.25);
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.dm-process-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e293b;
  line-height: 1.3;
}

.dm-process-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

.dm-process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fb923c;
  font-size: 2.5rem;
  font-weight: 300;
  flex: 0 0 auto;
  margin-top: 40px;
  padding: 0 1rem;
}

/* Techniques Grid */
.dm-techniques-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.dm-technique-card {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dm-technique-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15);
  border-color: #fb923c;
}

.dm-technique-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.1);
}

.dm-technique-card:hover .dm-technique-icon {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.dm-technique-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

.dm-technique-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Applications List */
.dm-applications-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dm-app-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.dm-app-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.12);
  border-color: #fed7aa;
}

.dm-app-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #f97316;
  font-size: 1.75rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
  transition: all 0.3s ease;
}

.dm-app-item:hover .dm-app-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.dm-app-content {
  flex: 1;
}

.dm-app-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.dm-app-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 992px) {
  .dm-process-stepper {
    flex-direction: column;
    align-items: center;
  }
  
  .dm-process-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
  
  .dm-process-item {
    max-width: 250px;
  }
  
  .dm-techniques-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .dm-wrapper {
    padding: 1.5rem;
  }
  
  .dm-definition-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .dm-icon {
    font-size: 3rem;
  }
  
  .dm-definition-title {
    font-size: 1.5rem;
  }
  
  .dm-definition-text {
    font-size: 1rem;
  }
  
  .dm-concept-card {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem;
  }
  
  .dm-section-card {
    padding: 2rem;
  }
  
  .dm-section-heading {
    font-size: 1.35rem;
  }
  
  .dm-techniques-grid {
    grid-template-columns: 1fr;
  }
  
  .dm-technique-card {
    padding: 1.75rem;
  }
  
  .dm-app-item {
    padding: 1.5rem;
    gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  .dm-wrapper {
    padding: 1rem;
  }
  
  .dm-definition-card {
    padding: 1.5rem;
  }
  
  .dm-icon {
    font-size: 2.5rem;
  }
  
  .dm-concept-card {
    padding: 1.5rem;
  }
  
  .dm-concept-icon {
    width: 56px;
    height: 56px;
    font-size: 2rem;
  }
  
  .dm-section-card {
    padding: 1.5rem;
  }
  
  .dm-process-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
  
  .dm-technique-card {
    padding: 1.5rem;
  }
  
  .dm-technique-icon {
    width: 64px;
    height: 64px;
    font-size: 2.5rem;
  }
  
  .dm-app-item {
    padding: 1.25rem;
  }
  
  .dm-app-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

/* ===================================
   Data Warehouse Approaches Styling
   =================================== */

.dwa-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #f0fdf4 0%, #ffffff 100%);
}

/* Header Card */
.dwa-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #10b981;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.dwa-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.dwa-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.dwa-header-content {
  flex: 1;
}

.dwa-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.dwa-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Comparison Container */
.dwa-comparison-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Approach Cards */
.dwa-approach-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dwa-approach-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, transparent 100%);
  transition: all 0.3s ease;
}

.dwa-kimball {
  border-color: #dbeafe;
}

.dwa-kimball::before {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.dwa-kimball:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
  border-color: #93c5fd;
}

.dwa-inmon {
  border-color: #ddd6fe;
}

.dwa-inmon::before {
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.dwa-inmon:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
  border-color: #c4b5fd;
}

/* Approach Header */
.dwa-approach-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #f1f5f9;
}

.dwa-approach-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dwa-kimball .dwa-approach-number {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.dwa-inmon .dwa-approach-number {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.dwa-approach-header-content {
  flex: 1;
}

.dwa-approach-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.dwa-approach-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  margin: 0;
  font-style: italic;
}

/* Approach Body */
.dwa-approach-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dwa-concept-tag {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #93c5fd;
  align-self: flex-start;
}

.dwa-concept-tag-alt {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  border-color: #c4b5fd;
}

.dwa-approach-desc {
  margin: 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
}

.dwa-approach-desc strong {
  color: #1e293b;
  font-weight: 700;
}

/* Diagram Card */
.dwa-diagram-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.75rem;
  border: 2px dashed #cbd5e1;
}

.dwa-diagram-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1.25rem 0;
  text-align: center;
}

.dwa-diagram-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.dwa-diagram-item {
  background: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  color: #475569;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.dwa-diagram-item:hover {
  transform: scale(1.05);
  border-color: #94a3b8;
}

.dwa-diagram-center {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.dwa-diagram-arrow {
  font-size: 1.75rem;
  color: #94a3b8;
  font-weight: 300;
}

.dwa-diagram-dots {
  font-size: 1.5rem;
  color: #94a3b8;
  font-weight: 700;
}

.dwa-diagram-label {
  margin: 0.75rem 0 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  font-style: italic;
}

/* Section Card */
.dwa-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.dwa-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.dwa-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  border-radius: 2px;
}

/* Comparison Table */
.dwa-comparison-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
}

.dwa-table-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  border-bottom: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.dwa-table-row:last-child {
  border-bottom: none;
}

.dwa-table-row:not(.dwa-table-header):hover {
  background: #f8fafc;
}

.dwa-table-header {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  font-weight: 700;
}

.dwa-table-cell {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  border-right: 1px solid #e2e8f0;
}

.dwa-table-cell:last-child {
  border-right: none;
}

.dwa-cell-criterion {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  font-weight: 700;
  color: #1e293b;
}

.dwa-criterion-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.dwa-cell-kimball {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.dwa-table-header .dwa-cell-kimball {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  font-weight: 700;
}

.dwa-cell-inmon {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

.dwa-table-header .dwa-cell-inmon {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  font-weight: 700;
}

.dwa-cell-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .dwa-comparison-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .dwa-table-row {
    grid-template-columns: 150px 1fr 1fr;
  }
  
  .dwa-table-cell {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .dwa-wrapper {
    padding: 1.5rem;
  }
  
  .dwa-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .dwa-header-icon {
    font-size: 3rem;
  }
  
  .dwa-header-title {
    font-size: 1.5rem;
  }
  
  .dwa-comparison-container {
    gap: 1.5rem;
  }
  
  .dwa-approach-card {
    padding: 1.75rem;
  }
  
  .dwa-section-card {
    padding: 2rem;
  }
  
  .dwa-section-heading {
    font-size: 1.35rem;
  }
  
  .dwa-table-row {
    grid-template-columns: 1fr;
  }
  
  .dwa-table-cell {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .dwa-cell-criterion {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  }
}

@media (max-width: 480px) {
  .dwa-wrapper {
    padding: 1rem;
  }
  
  .dwa-header-card {
    padding: 1.5rem;
  }
  
  .dwa-header-icon {
    font-size: 2.5rem;
  }
  
  .dwa-comparison-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .dwa-approach-card {
    padding: 1.5rem;
  }
  
  .dwa-approach-number {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }
  
  .dwa-section-card {
    padding: 1.5rem;
  }
  
  .dwa-table-cell {
    padding: 0.875rem;
    font-size: 0.85rem;
  }
  
  .dwa-diagram-card {
    padding: 1.25rem;
  }
}

/* ===================================
   Business Analytics (BA) Styling
   =================================== */

.ba-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 100%);
}

/* Definition Card */
.ba-definition-card {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #3b82f6;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.ba-definition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.ba-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.ba-definition-content {
  flex: 1;
}

.ba-definition-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.ba-definition-text {
  margin: 0;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.8;
}

.ba-definition-text strong {
  color: #1e40af;
  font-weight: 600;
}

/* Section Card */
.ba-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.ba-section-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ba-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.ba-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  border-radius: 2px;
}

/* Three Pillars Grid */
.ba-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.ba-pillar-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ba-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.ba-pillar-past {
  border-top: 4px solid #3b82f6;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.ba-pillar-past:hover {
  border-color: #2563eb;
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.2);
}

.ba-pillar-present {
  border-top: 4px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.ba-pillar-present:hover {
  border-color: #059669;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.2);
}

.ba-pillar-future {
  border-top: 4px solid #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
}

.ba-pillar-future:hover {
  border-color: #d97706;
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.2);
}

.ba-pillar-icon {
  font-size: 3rem;
  margin: 0 auto 0.5rem;
}

.ba-pillar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.ba-pillar-questions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.ba-pillar-main-q {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e293b;
}

.ba-pillar-sub-q {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  font-style: italic;
}

.ba-pillar-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}

/* Flow Stepper */
.ba-flow-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.ba-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 180px;
  text-align: center;
}

.ba-flow-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
  position: relative;
  z-index: 1;
}

.ba-flow-past {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.ba-flow-present {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.ba-flow-future {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.ba-flow-action {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.ba-flow-item:hover .ba-flow-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ba-flow-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e293b;
  line-height: 1.3;
}

.ba-flow-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
}

.ba-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 2.5rem;
  font-weight: 300;
  flex: 0 0 auto;
  margin-top: 40px;
  padding: 0 0.5rem;
}

/* Responsive */
@media (max-width: 992px) {
  .ba-pillars-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  
  .ba-flow-stepper {
    flex-direction: column;
    align-items: center;
  }
  
  .ba-flow-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
  
  .ba-flow-item {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .ba-wrapper {
    padding: 1.5rem;
  }
  
  .ba-definition-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .ba-icon {
    font-size: 3rem;
  }
  
  .ba-definition-title {
    font-size: 1.5rem;
  }
  
  .ba-definition-text {
    font-size: 1rem;
  }
  
  .ba-section-card {
    padding: 2rem;
  }
  
  .ba-section-heading {
    font-size: 1.35rem;
  }
  
  .ba-pillars-grid {
    grid-template-columns: 1fr;
  }
  
  .ba-pillar-card {
    padding: 1.75rem;
  }
}

@media (max-width: 480px) {
  .ba-wrapper {
    padding: 1rem;
  }
  
  .ba-definition-card {
    padding: 1.5rem;
  }
  
  .ba-icon {
    font-size: 2.5rem;
  }
  
  .ba-section-card {
    padding: 1.5rem;
  }
  
  .ba-pillar-card {
    padding: 1.5rem;
  }
  
  .ba-pillar-icon {
    font-size: 2.5rem;
  }
  
  .ba-flow-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
}

/* ===================================
   BI vs. BA Styling
   =================================== */

.bivba-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #faf5ff 0%, #ffffff 100%);
}

/* Header Card */
.bivba-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #8b5cf6;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.bivba-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.bivba-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.bivba-header-content {
  flex: 1;
}

.bivba-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.bivba-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Comparison Container */
.bivba-comparison-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Compare Cards */
.bivba-compare-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bivba-compare-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  transition: all 0.3s ease;
}

.bivba-bi-card {
  border-color: #bfdbfe;
}

.bivba-bi-card::before {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.bivba-bi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
  border-color: #93c5fd;
}

.bivba-ba-card {
  border-color: #d8b4fe;
}

.bivba-ba-card::before {
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.bivba-ba-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
  border-color: #c4b5fd;
}

/* Card Header */
.bivba-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #f1f5f9;
}

.bivba-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bivba-bi-card .bivba-card-icon {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.bivba-ba-card .bivba-card-icon {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.bivba-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Card Body */
.bivba-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bivba-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bivba-feature-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.bivba-feature-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.bivba-feature-content {
  flex: 1;
}

.bivba-feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.35rem 0;
}

.bivba-feature-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* Section Card */
.bivba-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.bivba-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.bivba-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
  border-radius: 2px;
}

/* Differences Grid */
.bivba-differences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.bivba-diff-card {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bivba-diff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
  border-color: #c4b5fd;
}

.bivba-diff-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.bivba-diff-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

.bivba-diff-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
  .bivba-comparison-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bivba-wrapper {
    padding: 1.5rem;
  }
  
  .bivba-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .bivba-header-icon {
    font-size: 3rem;
  }
  
  .bivba-header-title {
    font-size: 1.5rem;
  }
  
  .bivba-comparison-container {
    gap: 1.5rem;
  }
  
  .bivba-compare-card {
    padding: 1.75rem;
  }
  
  .bivba-section-card {
    padding: 2rem;
  }
  
  .bivba-section-heading {
    font-size: 1.35rem;
  }
  
  .bivba-differences-grid {
    grid-template-columns: 1fr;
  }
  
  .bivba-feature-item {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .bivba-wrapper {
    padding: 1rem;
  }
  
  .bivba-header-card {
    padding: 1.5rem;
  }
  
  .bivba-header-icon {
    font-size: 2.5rem;
  }
  
  .bivba-compare-card {
    padding: 1.5rem;
  }
  
  .bivba-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.75rem;
  }
  
  .bivba-section-card {
    padding: 1.5rem;
  }
  
  .bivba-diff-card {
    padding: 1.5rem;
  }
  
  .bivba-diff-icon {
    font-size: 2rem;
  }
}

/* ===================================
   Types of Business Analytics Styling
   =================================== */

.tba-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #fef3c7 0%, #ffffff 100%);
}

/* Header Card */
.tba-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #f59e0b;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.tba-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.tba-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.tba-header-content {
  flex: 1;
}

.tba-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.tba-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Section Card */
.tba-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.tba-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.tba-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  border-radius: 2px;
}

/* Types Grid */
.tba-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.tba-type-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tba-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transition: all 0.3s ease;
}

.tba-descriptive::before {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.tba-diagnostic::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.tba-predictive::before {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.tba-prescriptive::before {
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.tba-type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.tba-type-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tba-type-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.tba-type-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

.tba-type-question {
  font-size: 1rem;
  font-weight: 600;
  color: #f59e0b;
  margin: 0 0 1rem 0;
  font-style: italic;
}

.tba-type-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Decision Grid */
.tba-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tba-decision-card {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 2rem;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.tba-decision-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
  border-color: #fed7aa;
}

.tba-decision-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.tba-decision-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.tba-decision-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Domains Grid */
.tba-domains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.tba-domain-item {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid #fef3c7;
  transition: all 0.3s ease;
  text-align: center;
}

.tba-domain-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15);
  border-color: #fbbf24;
}

.tba-domain-icon {
  font-size: 2rem;
}

.tba-domain-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

/* Responsive */
@media (max-width: 992px) {
  .tba-types-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  
  .tba-domains-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .tba-wrapper {
    padding: 1.5rem;
  }
  
  .tba-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .tba-header-icon {
    font-size: 3rem;
  }
  
  .tba-header-title {
    font-size: 1.5rem;
  }
  
  .tba-section-card {
    padding: 2rem;
  }
  
  .tba-section-heading {
    font-size: 1.35rem;
  }
  
  .tba-types-grid {
    grid-template-columns: 1fr;
  }
  
  .tba-decision-grid {
    grid-template-columns: 1fr;
  }
  
  .tba-domains-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (max-width: 480px) {
  .tba-wrapper {
    padding: 1rem;
  }
  
  .tba-header-card {
    padding: 1.5rem;
  }
  
  .tba-section-card {
    padding: 1.5rem;
  }
  
  .tba-type-card {
    padding: 1.75rem;
  }
  
  .tba-decision-card {
    padding: 1.5rem;
  }
  
  .tba-domain-item {
    padding: 1.25rem;
  }
}

/* ===================================
   Tools used for BI Styling
   =================================== */

.bit-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 100%);
}

/* Header Card */
.bit-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #14b8a6;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.bit-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
}

.bit-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.bit-header-content {
  flex: 1;
}

.bit-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.bit-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Categories Container */
.bit-categories-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Category Card */
.bit-category-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bit-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  transition: all 0.3s ease;
}

.bit-extraction {
  border-color: #ddd6fe;
}

.bit-extraction::before {
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.bit-extraction:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
}

.bit-reporting {
  border-color: #bfdbfe;
}

.bit-reporting::before {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.bit-reporting:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

.bit-analyzing {
  border-color: #a7f3d0;
}

.bit-analyzing::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.bit-analyzing:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
}

/* Category Header */
.bit-category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid #f1f5f9;
}

.bit-category-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bit-extraction .bit-category-icon {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.bit-reporting .bit-category-icon {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.bit-analyzing .bit-category-icon {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.bit-category-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Category Body */
.bit-category-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bit-tool-item {
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 10px;
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bit-tool-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bit-tool-badge {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.bit-tool-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* Section Card */
.bit-section-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.bit-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e2e8f0;
  position: relative;
}

.bit-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%);
  border-radius: 2px;
}

/* Flow Stepper */
.bit-flow-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.bit-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 200px;
  text-align: center;
}

.bit-flow-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 3px solid #ffffff;
}

.bit-flow-extract {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.bit-flow-report {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.bit-flow-analyze {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.bit-flow-item:hover .bit-flow-icon {
  transform: scale(1.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bit-flow-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e293b;
}

.bit-flow-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

.bit-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 2.5rem;
  font-weight: 300;
  flex: 0 0 auto;
  margin-top: 40px;
  padding: 0 0.5rem;
}

/* Responsive */
@media (max-width: 992px) {
  .bit-categories-container {
    grid-template-columns: 1fr;
  }
  
  .bit-flow-stepper {
    flex-direction: column;
    align-items: center;
  }
  
  .bit-flow-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
}

@media (max-width: 768px) {
  .bit-wrapper {
    padding: 1.5rem;
  }
  
  .bit-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .bit-header-icon {
    font-size: 3rem;
  }
  
  .bit-header-title {
    font-size: 1.5rem;
  }
  
  .bit-category-card {
    padding: 1.75rem;
  }
  
  .bit-section-card {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .bit-wrapper {
    padding: 1rem;
  }
  
  .bit-header-card {
    padding: 1.5rem;
  }
  
  .bit-category-card {
    padding: 1.5rem;
  }
  
  .bit-section-card {
    padding: 1.5rem;
  }
  
  .bit-flow-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
}

/* ===================================
   BI Component Framework Styling
   =================================== */

.bicf-wrapper {
  padding: 2rem;
  background: linear-gradient(to bottom, #fdf4ff 0%, #ffffff 100%);
}

/* Header Card */
.bicf-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdf4ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #a855f7;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.3s ease;
}

.bicf-header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15);
}

.bicf-header-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.bicf-header-content {
  flex: 1;
}

.bicf-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.bicf-header-desc {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Layer Cards */
.bicf-layer-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bicf-layer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bicf-business-layer {
  border-left: 5px solid #3b82f6;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.bicf-program-layer {
  border-left: 5px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.bicf-development-layer {
  border-left: 5px solid #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

/* Layer Header */
.bicf-layer-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid #f1f5f9;
  position: relative;
}

.bicf-layer-header::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
  border-radius: 2px;
}

.bicf-layer-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.bicf-layer-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.bicf-layer-desc {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
  margin: 0 0 2rem 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 10px;
  border-left: 3px solid #e2e8f0;
}

/* Sublayer Cards */
.bicf-sublayer-card {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: 2px solid #f1f5f9;
}

.bicf-sublayer-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bicf-sublayer-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.bicf-sublayer-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.bicf-sublayer-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}

/* Requirement Items */
.bicf-requirement-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bicf-requirement-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
  border-color: #93c5fd;
}

.bicf-req-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.bicf-req-content {
  flex: 1;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
}

.bicf-req-label {
  color: #1e293b;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.bicf-req-text {
  display: block;
  color: #64748b;
}

/* Metrics Grid */
.bicf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.bicf-metric-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.75rem;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.bicf-metric-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
  border-color: #93c5fd;
}

.bicf-metric-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.bicf-metric-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

.bicf-metric-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.bicf-formula {
  margin-top: 1rem;
}

.bicf-formula-label {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}

.bicf-formula-box {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bicf-metric-example {
  background: linear-gradient(135deg, #fafafa 0%, #f8fafc 100%);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
}

.bicf-metric-example strong {
  color: #1e293b;
  display: block;
  margin-bottom: 0.25rem;
}

/* Program Management Grid */
.bicf-pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.bicf-pm-item {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2px solid #d1fae5;
  transition: all 0.3s ease;
}

.bicf-pm-item:hover {
  transform: translateX(8px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.bicf-pm-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.bicf-pm-text {
  font-size: 0.95rem;
  color: #1e293b;
  font-weight: 600;
  flex: 1;
}

/* Development Process */
.bicf-dev-process {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.bicf-dev-item {
  flex: 1;
  min-width: 200px;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-radius: 12px;
  padding: 2rem;
  border: 2px solid #fef3c7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.bicf-dev-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
}

.bicf-dev-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.bicf-dev-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.bicf-dev-number {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.bicf-dev-title {
  font-size: 1rem;
  color: #1e293b;
  font-weight: 700;
}

.bicf-dev-arrow {
  flex-shrink: 0;
  font-size: 2.5rem;
  color: #cbd5e1;
  font-weight: 300;
}

/* Overview Card */
.bicf-overview-card {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-top: 2rem;
  border: 2px solid #e9d5ff;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.12);
}

.bicf-overview-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.bicf-overview-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.bicf-overview-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.bicf-overview-desc {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .bicf-metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .bicf-pm-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  
  .bicf-dev-process {
    flex-direction: column;
    align-items: center;
  }
  
  .bicf-dev-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
}

@media (max-width: 768px) {
  .bicf-wrapper {
    padding: 1.5rem;
  }
  
  .bicf-header-card {
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .bicf-header-icon {
    font-size: 3rem;
  }
  
  .bicf-header-title {
    font-size: 1.5rem;
  }
  
  .bicf-layer-card {
    padding: 2rem;
  }
  
  .bicf-layer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .bicf-sublayer-card {
    padding: 1.75rem;
  }
  
  .bicf-metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .bicf-pm-grid {
    grid-template-columns: 1fr;
  }
  
  .bicf-overview-card {
    padding: 2rem;
  }
  
  .bicf-overview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .bicf-wrapper {
    padding: 1rem;
  }
  
  .bicf-header-card {
    padding: 1.5rem;
  }
  
  .bicf-layer-card {
    padding: 1.5rem;
  }
  
  .bicf-layer-number {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .bicf-layer-title {
    font-size: 1.3rem;
  }
  
  .bicf-sublayer-card {
    padding: 1.5rem;
  }
  
  .bicf-requirement-item {
    padding: 1rem;
  }
  
  .bicf-metric-card {
    padding: 1.5rem;
  }
  
  .bicf-pm-item {
    padding: 1rem;
  }
  
  .bicf-dev-item {
    padding: 1.5rem;
  }
  
  .bicf-dev-icon {
    width: 56px;
    height: 56px;
    font-size: 1.75rem;
  }
  
  .bicf-overview-card {
    padding: 1.5rem;
  }
  
  .bicf-overview-icon {
    width: 48px;
    height: 48px;
    font-size: 1.75rem;
  }
}

/* ============================================
   MDDM (Multi-dimensional Data Modeling) Styles
   ============================================ */

.mddm-wrapper {
  padding: 2rem;
  background: #f8f9fa;
}

/* Section Header */
.mddm-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e5e7eb;
}

.mddm-header-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.mddm-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

/* Challenges Grid */
.mddm-challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.mddm-challenge-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #ef4444;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  gap: 1.25rem;
}

.mddm-challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-left-color: #dc2626;
}

.mddm-challenge-number {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.mddm-challenge-content {
  flex: 1;
}

.mddm-challenge-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.75rem 0;
}

.mddm-challenge-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #6b7280;
  margin: 0;
}

.mddm-highlight {
  color: #1f2937;
  font-weight: 600;
  background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* Definition Card */
.mddm-definition-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid #3b82f6;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.mddm-def-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.mddm-def-content {
  flex: 1;
}

.mddm-def-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 1.25rem 0;
}

.mddm-def-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0 0 1rem 0;
}

.mddm-def-text:last-child {
  margin-bottom: 0;
}

/* Section Card */
.mddm-section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mddm-section-card:last-child {
  margin-bottom: 0;
}

.mddm-section-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

/* Benefits Grid */
.mddm-benefits-grid {
  display: grid;
  gap: 1.5rem;
}

.mddm-benefit-item {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  display: flex;
  gap: 1.25rem;
  transition: all 0.3s ease;
}

.mddm-benefit-item:hover {
  background: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.mddm-benefit-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.mddm-benefit-content {
  flex: 1;
}

.mddm-benefit-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

.mddm-benefit-list {
  margin: 0.75rem 0 0 0;
  padding-left: 1.5rem;
  color: #6b7280;
}

.mddm-benefit-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.mddm-benefit-list li:last-child {
  margin-bottom: 0;
}

/* Data Flow Stepper */
.mddm-flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
}

.mddm-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.mddm-flow-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mddm-flow-item:hover .mddm-flow-icon {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.mddm-flow-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mddm-flow-arrow {
  font-size: 1.5rem;
  color: #9ca3af;
  font-weight: 300;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .mddm-challenges-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .mddm-flow-container {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .mddm-wrapper {
    padding: 1.5rem;
  }
  
  .mddm-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .mddm-header-icon {
    font-size: 2rem;
  }
  
  .mddm-section-title {
    font-size: 1.5rem;
  }
  
  .mddm-challenges-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .mddm-challenge-card {
    padding: 1.5rem;
  }
  
  .mddm-definition-card {
    flex-direction: column;
    padding: 2rem;
  }
  
  .mddm-def-icon {
    font-size: 2.5rem;
  }
  
  .mddm-def-title {
    font-size: 1.5rem;
  }
  
  .mddm-section-card {
    padding: 1.5rem;
  }
  
  .mddm-section-heading {
    font-size: 1.25rem;
  }
  
  .mddm-flow-container {
    flex-direction: column;
  }
  
  .mddm-flow-arrow {
    transform: rotate(90deg);
    margin: 0;
  }
}

@media (max-width: 480px) {
  .mddm-wrapper {
    padding: 1rem;
  }
  
  .mddm-challenge-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .mddm-challenge-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .mddm-challenge-heading {
    font-size: 1rem;
  }
  
  .mddm-challenge-text {
    font-size: 0.875rem;
  }
  
  .mddm-definition-card {
    padding: 1.5rem;
  }
  
  .mddm-def-title {
    font-size: 1.35rem;
  }
  
  .mddm-def-text {
    font-size: 0.95rem;
  }
  
  .mddm-flow-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
  
  .mddm-benefit-item {
    flex-direction: column;
    padding: 1.25rem;
  }
}
/* Key MDDM Concepts Styles */
.mddm-concepts-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mddm-concept-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mddm-concept-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #f59e0b;
}

.mddm-concept-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mddm-concept-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mddm-concept-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.mddm-concept-body {
  padding: 2rem;
}

.mddm-concept-description {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0 0 1.5rem 0;
}

/* Reasons Section */
.mddm-reasons-section {
  margin-top: 1.5rem;
}

.mddm-subsection-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.mddm-reason-item {
  background: #f9fafb;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.mddm-reason-item:last-child {
  margin-bottom: 0;
}

.mddm-reason-item:hover {
  background: #f0f9ff;
  border-left-color: #2563eb;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.mddm-reason-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.mddm-reason-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #6b7280;
  margin: 0;
}

/* Examples Section */
.mddm-examples-section {
  margin-top: 1.5rem;
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.25rem;
}

.mddm-example-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  display: block;
}

.mddm-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mddm-example-tag {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
  transition: all 0.3s ease;
}

.mddm-example-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.mddm-example-tag.fact-tag {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.mddm-example-tag.fact-tag:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Hierarchy Section */
.mddm-hierarchy-example {
  margin-top: 1.5rem;
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
}

.mddm-hierarchy-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mddm-hierarchy-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mddm-hierarchy-badge {
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mddm-hierarchy-badge.level-1 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.mddm-hierarchy-badge.level-2 {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.mddm-hierarchy-badge.level-3 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.mddm-hierarchy-text {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
}

.mddm-hierarchy-arrow {
  font-size: 1.5rem;
  color: #9ca3af;
  font-weight: 300;
}

.mddm-hierarchy-note {
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
  margin: 0;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

/* Info Box */
.mddm-info-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border: 2px solid #3b82f6;
  padding: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  gap: 1.25rem;
}

.mddm-info-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.mddm-info-content {
  flex: 1;
}

.mddm-info-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 0.75rem 0;
}

.mddm-info-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 0.75rem 0;
}

.mddm-info-drill {
  font-size: 0.95rem;
  color: #4b5563;
  margin: 0;
}

.mddm-info-drill strong {
  color: #1e40af;
  font-weight: 700;
}

/* Grain Example */
.mddm-grain-example {
  margin-top: 1.5rem;
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
}

.mddm-grain-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 1rem 0;
}

.mddm-grain-text:last-child {
  margin-bottom: 0;
}

/* Schema Example */
.mddm-schema-example {
  margin-top: 1.5rem;
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
  border-left: 4px solid #8b5cf6;
}

.mddm-schema-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* Responsive Design for Concepts */
@media (max-width: 768px) {
  .mddm-concept-header {
    padding: 1.25rem 1.5rem;
  }
  
  .mddm-concept-number {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .mddm-concept-title {
    font-size: 1.25rem;
  }
  
  .mddm-concept-body {
    padding: 1.5rem;
  }
  
  .mddm-hierarchy-chain {
    flex-direction: column;
  }
  
  .mddm-hierarchy-arrow {
    transform: rotate(90deg);
  }
  
  .mddm-info-box {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .mddm-concept-header {
    padding: 1rem 1.25rem;
  }
  
  .mddm-concept-number {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .mddm-concept-title {
    font-size: 1.1rem;
  }
  
  .mddm-concept-body {
    padding: 1.25rem;
  }
  
  .mddm-concept-description {
    font-size: 0.95rem;
  }
  
  .mddm-reason-item {
    padding: 1.25rem;
  }
  
  .mddm-examples-section,
  .mddm-hierarchy-example,
  .mddm-grain-example,
  .mddm-schema-example {
    padding: 1.25rem;
  }
  
  .mddm-info-box {
    padding: 1.25rem;
  }
}
/* ============================================
   Types of Dimensions Styles
   ============================================ */

.dimensions-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Dimension Main Card (for SCD) */
.dimension-main-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #10b981;
  transition: all 0.3s ease;
}

.dimension-main-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.2);
}

.dimension-main-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dimension-number {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.75rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.dimension-header-content {
  flex: 1;
}

.dimension-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.dimension-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
}

.dimension-main-body {
  padding: 2rem;
}

.dimension-reason-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.dimension-reason-label {
  font-weight: 700;
  color: #92400e;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.dimension-reason-text {
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.6;
}

.scd-types-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.scd-type-card {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.scd-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.scd-type-card.type-1:hover {
  border-color: #ef4444;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.2);
}

.scd-type-card.type-2:hover {
  border-color: #f59e0b;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.scd-type-card.type-3:hover {
  border-color: #f59e0b;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
}

.scd-type-header {
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.scd-type-badge {
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  flex-shrink: 0;
}

.scd-type-card.type-1 .scd-type-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.scd-type-card.type-2 .scd-type-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.scd-type-card.type-3 .scd-type-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.scd-type-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.scd-type-body {
  padding: 1.5rem;
}

.scd-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 1.25rem 0;
}

.mddm-highlight-red {
  color: #dc2626;
  font-weight: 700;
  background: #fee2e2;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.scd-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scd-point {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  align-items: flex-start;
}

.scd-point.advantage {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-left: 3px solid #10b981;
}

.scd-point.disadvantage {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-left: 3px solid #ef4444;
}

.scd-point-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.scd-point.advantage .scd-point-label {
  color: #065f46;
}

.scd-point.disadvantage .scd-point-label {
  color: #991b1b;
}

.scd-point-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

.dimension-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.dimension-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: #f59e0b;
}

.dimension-card-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.dimension-card-number {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.dimension-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.dimension-card-body {
  padding: 1.75rem 2rem;
}

.dimension-card-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0;
}

.dimension-example-box {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1.25rem;
}

.dimension-example-label {
  font-weight: 700;
  color: #1e40af;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.dimension-example-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #1e40af;
  margin: 0;
}

.junk-points-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.junk-point-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #f9fafb;
  padding: 1.25rem;
  border-radius: 10px;
  border-left: 4px solid #6366f1;
  transition: all 0.3s ease;
}

.junk-point-item:hover {
  background: #f0f9ff;
  border-left-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.junk-bullet {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.junk-point-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

@media (max-width: 1024px) {
  .scd-types-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dimension-main-header {
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .dimension-number {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  .dimension-title {
    font-size: 1.5rem;
  }
  .dimension-subtitle {
    font-size: 0.95rem;
  }
  .dimension-main-body {
    padding: 1.5rem;
  }
  .dimension-card-header {
    padding: 1.25rem 1.5rem;
  }
  .dimension-card-number {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .dimension-card-title {
    font-size: 1.2rem;
  }
  .dimension-card-body {
    padding: 1.5rem;
  }
  .scd-type-body {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .dimensions-container {
    gap: 1.5rem;
  }
  .dimension-main-header {
    padding: 1.25rem;
  }
  .dimension-number {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }
  .dimension-title {
    font-size: 1.35rem;
  }
  .dimension-main-body {
    padding: 1.25rem;
  }
  .dimension-reason-box {
    flex-direction: column;
    padding: 1rem;
  }
  .scd-types-container {
    gap: 1.25rem;
  }
  .scd-type-header {
    padding: 1rem 1.25rem;
  }
  .scd-type-body {
    padding: 1rem;
  }
  .dimension-card-header {
    padding: 1rem 1.25rem;
  }
  .dimension-card-body {
    padding: 1.25rem;
  }
  .junk-point-item {
    padding: 1rem;
  }
  .junk-bullet {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
}

/* ============================================
   Types of Schemas Styles
   ============================================ */

.schema-intro-box {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-left: 4px solid #8b5cf6;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.schema-intro-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #5b21b6;
  margin: 0;
}

.schemas-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Schema Cards */
.schema-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.schema-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.schema-card.star-schema {
  border-color: #f59e0b;
}

.schema-card.star-schema:hover {
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.25);
}

.schema-card.snowflake-schema {
  border-color: #06b6d4;
}

.schema-card.snowflake-schema:hover {
  box-shadow: 0 8px 28px rgba(6, 182, 212, 0.25);
}

.schema-card.constellation-schema {
  border-color: #10b981;
}

.schema-card.constellation-schema:hover {
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.25);
}

.schema-card-header {
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.star-schema .schema-card-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.snowflake-schema .schema-card-header {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.constellation-schema .schema-card-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.schema-card-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.schema-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.schema-card-body {
  padding: 2rem;
}

.schema-description-box {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #e5e7eb;
}

.schema-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0;
}

/* Schema Diagrams */
.schema-diagram {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px solid #e2e8f0;
}

/* Star Schema Diagram */
.star-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.schema-diagram-center {
  display: flex;
  justify-content: center;
}

.schema-fact-table {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 3px solid #f59e0b;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
  min-width: 180px;
  text-align: center;
}

.schema-table-header {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
}

.fact-header {
  color: #92400e;
}

.schema-diagram-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
}

.schema-dimension-table {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  border-radius: 10px;
  padding: 1.25rem 1rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  text-align: center;
  transition: all 0.3s ease;
}

.schema-dimension-table:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.dim-header {
  color: #1e40af;
  font-size: 0.95rem;
}

/* Snowflake Schema Diagram */
.snowflake-diagram {
  border-color: #a5f3fc;
}

.schema-snowflake-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.schema-left-dimensions,
.schema-right-dimensions,
.schema-middle-dimensions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 auto;
}

.schema-center-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 auto;
}

.schema-middle-dimensions {
  align-items: center;
}

.schema-dimension-table.small {
  padding: 0.875rem 0.75rem;
  min-width: 120px;
}

.dim-header-small {
  color: #0e7490;
  font-size: 0.85rem;
}

/* Constellation Schema Diagram */
.constellation-diagram {
  border-color: #ddd6fe;
}

.schema-constellation-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.schema-fact-tables-group {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.schema-fact-table.small-fact {
  padding: 1.25rem 1.5rem;
  min-width: 160px;
}

.fact-header-small {
  color: #92400e;
  font-size: 0.95rem;
}

.schema-shared-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.25rem;
  width: 100%;
  max-width: 600px;
}

.schema-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #78350f;
  font-style: italic;
}

/* Schema Points */
.schema-points-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schema-point {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 10px;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.schema-point.advantage {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-left: 4px solid #10b981;
}

.schema-point.disadvantage {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-left: 4px solid #ef4444;
}

.schema-point:hover {
  transform: translateX(4px);
}

.schema-point-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.schema-point.advantage .schema-point-icon {
  background: #10b981;
  color: #ffffff;
}

.schema-point.disadvantage .schema-point-icon {
  background: #ef4444;
  color: #ffffff;
}

.schema-point-content {
  flex: 1;
}

.schema-point-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.schema-point.advantage .schema-point-label {
  color: #065f46;
}

.schema-point.disadvantage .schema-point-label {
  color: #991b1b;
}

.schema-point-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}

/* Responsive Design for Schemas */
@media (max-width: 768px) {
  .schemas-container {
    gap: 2rem;
  }
  
  .schema-card-header {
    padding: 1.5rem 1.5rem;
  }
  
  .schema-card-number {
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
  }
  
  .schema-card-title {
    font-size: 1.25rem;
  }
  
  .schema-card-body {
    padding: 1.5rem;
  }
  
  .schema-diagram {
    padding: 1.5rem;
  }
  
  .schema-snowflake-layout {
    flex-direction: column;
    align-items: center;
  }
  
  .schema-diagram-dimensions {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 480px) {
  .schema-intro-box {
    padding: 1.25rem 1.5rem;
  }
  
  .schema-intro-text {
    font-size: 0.95rem;
  }
  
  .schema-card-header {
    padding: 1.25rem;
  }
  
  .schema-card-number {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
  
  .schema-card-title {
    font-size: 1.1rem;
  }
  
  .schema-card-body {
    padding: 1.25rem;
  }
  
  .schema-description-box {
    padding: 1.25rem;
  }
  
  .schema-diagram {
    padding: 1.25rem;
  }
  
  .schema-diagram-dimensions {
    grid-template-columns: 1fr;
  }
  
  .schema-fact-tables-group {
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .schema-shared-dimensions {
    grid-template-columns: 1fr;
  }
  
  .schema-point {
    padding: 1rem;
  }
}

/* ============================================
   Types of Facts Styles
   ============================================ */

.facts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Fact Cards */
.fact-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

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

.fact-card.additive-fact {
  border-color: #10b981;
}

.fact-card.additive-fact:hover {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
}

.fact-card.semi-additive-fact {
  border-color: #f59e0b;
}

.fact-card.semi-additive-fact:hover {
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.3);
}

.fact-card.non-additive-fact {
  border-color: #ef4444;
}

.fact-card.non-additive-fact:hover {
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.3);
}

.fact-card-header {
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
}

.additive-fact .fact-card-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.semi-additive-fact .fact-card-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.non-additive-fact .fact-card-header {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.fact-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 2rem;
  color: #ffffff;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fact-header-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fact-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.additive-fact .fact-number {
  color: #059669;
}

.semi-additive-fact .fact-number {
  color: #d97706;
}

.non-additive-fact .fact-number {
  color: #dc2626;
}

.fact-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.fact-card-body {
  padding: 2rem;
}

.fact-description {
  margin-bottom: 1.5rem;
}

.fact-description-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0;
}

.fact-example-box {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e5e7eb;
}

.fact-example-label {
  font-weight: 700;
  color: #1f2937;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.875rem;
  display: block;
}

.fact-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.fact-tag {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.fact-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fact-tag.additive {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.fact-tag.semi-additive {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.fact-tag.non-additive {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.fact-example-content {
  margin-top: 0.5rem;
}

.fact-example-detail {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

.fact-capability-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.additive-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.semi-additive-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.non-additive-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.fact-capability-icon {
  font-size: 1.1rem;
  font-weight: 900;
}

/* Facts Comparison Section */
.facts-comparison-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
}

.facts-comparison-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #e5e7eb;
}

.facts-comparison-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
}

.facts-table-header {
  display: grid;
  grid-template-columns: 1fr 1.5fr 2fr;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: #ffffff;
}

.facts-table-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 2fr;
  transition: all 0.3s ease;
}

.facts-table-row:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.facts-table-row.additive-row {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.facts-table-row.additive-row:hover {
  background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
}

.facts-table-row.semi-additive-row {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.facts-table-row.semi-additive-row:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

.facts-table-row.non-additive-row {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.facts-table-row.non-additive-row:hover {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
}

.facts-table-cell {
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
  display: flex;
  align-items: center;
}

.facts-table-cell.header-cell {
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.facts-table-badge {
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.facts-table-badge.additive {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.facts-table-badge.semi-additive {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.facts-table-badge.non-additive {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Responsive Design for Facts */
@media (max-width: 1024px) {
  .facts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .facts-container {
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .fact-card-header {
    padding: 1.5rem 1.5rem;
  }
  
  .fact-icon {
    width: 48px;
    height: 48px;
    font-size: 1.75rem;
  }
  
  .fact-number {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .fact-title {
    font-size: 1.2rem;
  }
  
  .fact-card-body {
    padding: 1.5rem;
  }
  
  .facts-comparison-section {
    padding: 1.5rem;
  }
  
  .facts-comparison-title {
    font-size: 1.35rem;
  }
  
  .facts-table-header,
  .facts-table-row {
    grid-template-columns: 1fr;
  }
  
  .facts-table-cell {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .facts-table-cell:last-child {
    border-bottom: none;
  }
  
  .facts-table-header .facts-table-cell {
    background: rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 480px) {
  .fact-card-header {
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .fact-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
  
  .fact-number {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }
  
  .fact-title {
    font-size: 1.1rem;
  }
  
  .fact-card-body {
    padding: 1.25rem;
  }
  
  .fact-example-box {
    padding: 1rem;
  }
  
  .fact-capability-badge {
    padding: 0.625rem 1rem;
    font-size: 0.8rem;
  }
  
  .facts-comparison-section {
    padding: 1.25rem;
  }
  
  .facts-comparison-title {
    font-size: 1.2rem;
  }
  
  .facts-table-cell {
    padding: 0.875rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   Unix/Shell Scripting Styles
   ============================================ */

.unix-wrapper {
  padding: 2rem;
  background: #f8f9fa;
}

/* Unix Section Header */
.unix-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e5e7eb;
}

.unix-header-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.unix-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

/* Unix Features Grid */
.unix-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}

.unix-feature-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.unix-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
  border-color: #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.unix-feature-number {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.unix-feature-content {
  flex: 1;
}

.unix-feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
}

/* Unix in BI Styles */
.unix-bi-intro-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-left: 4px solid #3b82f6;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.unix-bi-intro-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1e40af;
  margin: 0;
}

.unix-highlight {
  color: #1e3a8a;
  font-weight: 700;
  background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

.unix-bi-points-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.unix-bi-point-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #3b82f6;
  display: flex;
  gap: 1.25rem;
  transition: all 0.3s ease;
}

.unix-bi-point-card:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  border-left-color: #2563eb;
}

.unix-bi-point-number {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.unix-bi-point-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.unix-bi-point-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* Responsive Design for Unix */
@media (max-width: 768px) {
  .unix-wrapper {
    padding: 1.5rem;
  }
  
  .unix-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .unix-header-icon {
    font-size: 2rem;
  }
  
  .unix-section-title {
    font-size: 1.5rem;
  }
  
  .unix-features-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  
  .unix-feature-card {
    padding: 1.25rem;
  }
  
  .unix-feature-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .unix-feature-title {
    font-size: 1rem;
  }
  
  .unix-bi-intro-box {
    padding: 1.5rem;
  }
  
  .unix-bi-intro-text {
    font-size: 1rem;
  }
  
  .unix-bi-points-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .unix-bi-point-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .unix-wrapper {
    padding: 1.25rem;
  }
  
  .unix-section-title {
    font-size: 1.35rem;
  }
  
  .unix-features-grid {
    grid-template-columns: 1fr;
  }
  
  .unix-feature-card {
    padding: 1rem;
    gap: 1rem;
  }
  
  .unix-feature-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  
  .unix-feature-title {
    font-size: 0.95rem;
  }
  
  .unix-bi-intro-box {
    padding: 1.25rem 1.5rem;
  }
  
  .unix-bi-intro-text {
    font-size: 0.95rem;
  }
  
  .unix-bi-point-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .unix-bi-point-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .unix-bi-point-text {
    font-size: 0.9rem;
  }
}

/* ============================================
   Unix File System Styles
   ============================================ */

/* File System Introduction */
.unix-fs-intro-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #0284c7;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}

.unix-fs-intro-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #075985;
  margin: 0;
  font-weight: 500;
}

/* File System Blocks */
.unix-fs-blocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.unix-fs-block-card {
  background: #ffffff;
  border: 2px solid #e0f2fe;
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.unix-fs-block-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
}

.unix-fs-block-number {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.unix-fs-block-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unix-fs-block-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0e7490;
  margin: 0;
  line-height: 1.3;
}

.unix-fs-block-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

/* File System Flow */
.unix-fs-flow-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.unix-fs-flow-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unix-fs-flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.unix-fs-flow-step-box {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #ffffff;
  padding: 1rem 1.75rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.unix-fs-flow-step-box:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);
}

.unix-fs-flow-arrow {
  font-size: 1.75rem;
  color: #06b6d4;
  font-weight: 700;
  flex-shrink: 0;
}

/* Root Directory Box */
.unix-fs-root-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.unix-fs-root-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #92400e;
  margin: 0;
  text-align: center;
  font-weight: 500;
}

.unix-fs-highlight {
  color: #78350f;
  font-weight: 800;
  background: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  box-shadow: 0 2px 4px rgba(120, 53, 15, 0.2);
}

/* File System Features */
.unix-fs-features-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 2px solid #e0f2fe;
}

.unix-fs-features-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0e7490;
  margin: 0 0 1.75rem 0;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 3px solid #06b6d4;
}

.unix-fs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.unix-fs-feature-item {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 2px solid #5eead4;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.1);
}

.unix-fs-feature-item:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.25);
  border-color: #14b8a6;
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
}

.unix-fs-feature-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(20, 184, 166, 0.4);
}

.unix-fs-feature-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #115e59;
  margin: 0;
  font-weight: 500;
}

/* Responsive Design for File System */
@media (max-width: 768px) {
  .unix-fs-intro-box {
    padding: 1.25rem 1.5rem;
  }
  
  .unix-fs-intro-text {
    font-size: 1rem;
  }
  
  .unix-fs-blocks-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
  }
  
  .unix-fs-block-card {
    padding: 1.5rem;
  }
  
  .unix-fs-block-number {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  
  .unix-fs-block-title {
    font-size: 1.05rem;
  }
  
  .unix-fs-block-desc {
    font-size: 0.9rem;
  }
  
  .unix-fs-flow-container {
    padding: 1.5rem;
  }
  
  .unix-fs-flow-title {
    font-size: 1.05rem;
  }
  
  .unix-fs-flow-steps {
    flex-direction: column;
  }
  
  .unix-fs-flow-arrow {
    transform: rotate(90deg);
  }
  
  .unix-fs-root-box {
    padding: 1.25rem 1.5rem;
  }
  
  .unix-fs-root-text {
    font-size: 1rem;
  }
  
  .unix-fs-features-section {
    padding: 1.5rem;
  }
  
  .unix-fs-features-title {
    font-size: 1.25rem;
  }
  
  .unix-fs-features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .unix-fs-intro-box {
    padding: 1rem 1.25rem;
  }
  
  .unix-fs-intro-text {
    font-size: 0.95rem;
  }
  
  .unix-fs-blocks-container {
    grid-template-columns: 1fr;
  }
  
  .unix-fs-block-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .unix-fs-block-number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  
  .unix-fs-block-title {
    font-size: 1rem;
  }
  
  .unix-fs-block-desc {
    font-size: 0.85rem;
  }
  
  .unix-fs-flow-container {
    padding: 1.25rem;
  }
  
  .unix-fs-flow-title {
    font-size: 1rem;
  }
  
  .unix-fs-flow-step-box {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .unix-fs-root-box {
    padding: 1rem 1.25rem;
  }
  
  .unix-fs-root-text {
    font-size: 0.95rem;
  }
  
  .unix-fs-highlight {
    font-size: 1.05rem;
  }
  
  .unix-fs-features-section {
    padding: 1.25rem;
  }
  
  .unix-fs-features-title {
    font-size: 1.15rem;
  }
  
  .unix-fs-feature-item {
    padding: 1rem 1.25rem;
  }
  
  .unix-fs-feature-number {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }
  
  .unix-fs-feature-text {
    font-size: 0.9rem;
  }
}








/* ============================================
   File Access Permissions Styles
   ============================================ */

/* Permissions Introduction */
.unix-perm-intro-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  padding: 1.25rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.unix-perm-intro-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #92400e;
  margin: 0;
  font-weight: 500;
}

.unix-perm-highlight {
  color: #78350f;
  font-weight: 800;
  background: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(120, 53, 15, 0.2);
}

/* Permission Classes */
.unix-perm-classes-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.unix-perm-class-card {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.unix-perm-class-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.25);
  border-color: #2563eb;
}

.unix-perm-class-number {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.unix-perm-class-content {
  flex: 1;
}

.unix-perm-class-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0;
  line-height: 1.4;
}

/* Permission Types */
.unix-perm-types-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #10b981;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}

.unix-perm-types-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 1.25rem 0;
  text-align: center;
}

.unix-perm-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
}

.unix-perm-type-item {
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.unix-perm-type-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.unix-perm-type-label {
  font-size: 1rem;
  font-weight: 600;
  color: #047857;
}

.unix-perm-code {
  background: #064e3b;
  color: #d1fae5;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Permission Modes Section */
.unix-perm-modes-section {
  margin-bottom: 2rem;
}

.unix-perm-modes-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 2rem 0;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 3px solid #e5e7eb;
}

.unix-perm-mode-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.unix-perm-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.unix-perm-mode-card.absolute-mode {
  border-color: #8b5cf6;
}

.unix-perm-mode-card.absolute-mode:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

.unix-perm-mode-card.symbolic-mode {
  border-color: #ec4899;
}

.unix-perm-mode-card.symbolic-mode:hover {
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
}

.unix-perm-mode-header {
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.absolute-mode .unix-perm-mode-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.symbolic-mode .unix-perm-mode-header {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.unix-perm-mode-badge {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.unix-perm-mode-header-content {
  flex: 1;
}

.unix-perm-mode-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}

.unix-perm-mode-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
}

.unix-perm-mode-body {
  padding: 2rem;
}

/* Permission Values Grid */
.unix-perm-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.unix-perm-value-item {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 2px solid #a78bfa;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.3s ease;
}

.unix-perm-value-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

.unix-perm-value-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b21b6;
}

.unix-perm-value-number {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

/* Symbols Grid */
.unix-perm-symbols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.unix-perm-symbol-item {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid #f9a8d4;
}

.unix-perm-symbol-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
}

.unix-perm-symbol-code {
  background: #831843;
  color: #fce7f3;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
}

/* Operations Box */
.unix-perm-operations-box {
  background: #fef2f2;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border-left: 4px solid #ec4899;
}

.unix-perm-operation-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.unix-perm-operation-label {
  font-weight: 700;
  color: #9f1239;
  font-size: 1rem;
}

.unix-perm-operation-code {
  background: #881337;
  color: #fce7f3;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Examples */
.unix-perm-examples {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.unix-perm-example-item {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #6b7280;
  transition: all 0.3s ease;
}

.unix-perm-example-item:hover {
  border-left-color: #10b981;
  background: #f0fdf4;
}

.unix-perm-example-label {
  font-weight: 700;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unix-perm-example-code {
  background: #1f2937;
  color: #10b981;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.unix-perm-example-desc {
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.5rem;
}

/* Note Box */
.unix-perm-note-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.unix-perm-note-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.unix-perm-note-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #78350f;
  margin: 0;
}

.unix-perm-note-text strong {
  color: #92400e;
  font-weight: 700;
}

.unix-perm-note-code {
  background: #78350f;
  color: #fef3c7;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ============================================
   Path Types Styles
   ============================================ */

/* Path Types Container */
.unix-path-types-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.unix-path-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.unix-path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.unix-path-card.absolute-path {
  border-color: #06b6d4;
}

.unix-path-card.absolute-path:hover {
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.3);
}

.unix-path-card.relative-path {
  border-color: #8b5cf6;
}

.unix-path-card.relative-path:hover {
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.3);
}

.unix-path-card-header {
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.absolute-path .unix-path-card-header {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.relative-path .unix-path-card-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.unix-path-number {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.unix-path-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.unix-path-card-body {
  padding: 2rem;
}

.unix-path-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 1.5rem 0;
}

.unix-path-code {
  background: #374151;
  color: #fbbf24;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
}

.unix-path-example-box {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #10b981;
}

.unix-path-example-label {
  font-weight: 700;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unix-path-example-code {
  background: #1f2937;
  color: #10b981;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* PWD Box */
.unix-pwd-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.unix-pwd-icon {
  font-size: 2.25rem;
  flex-shrink: 0;
}

.unix-pwd-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.unix-pwd-code {
  background: #78350f;
  color: #fef3c7;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(120, 53, 15, 0.3);
}

.unix-pwd-text {
  font-size: 1.05rem;
  color: #92400e;
  font-weight: 500;
  font-style: italic;
}

/* Responsive Design for Permissions and Paths */
@media (max-width: 768px) {
  .unix-perm-intro-box,
  .unix-perm-types-box,
  .unix-perm-note-box,
  .unix-pwd-box {
    padding: 1.25rem 1.5rem;
  }
  
  .unix-perm-classes-container,
  .unix-path-types-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .unix-perm-mode-header {
    padding: 1.5rem;
  }
  
  .unix-perm-mode-body {
    padding: 1.5rem;
  }
  
  .unix-perm-values-grid,
  .unix-perm-symbols-grid {
    grid-template-columns: 1fr;
  }
  
  .unix-path-card-header,
  .unix-path-card-body {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .unix-perm-intro-box,
  .unix-perm-types-box,
  .unix-perm-note-box,
  .unix-pwd-box {
    padding: 1rem 1.25rem;
  }
  
  .unix-perm-class-card {
    padding: 1.25rem;
  }
  
  .unix-perm-class-number {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  
  .unix-perm-mode-badge,
  .unix-path-number {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }
  
  .unix-perm-mode-title,
  .unix-path-card-title {
    font-size: 1.35rem;
  }
  
  .unix-pwd-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   Shell Features and Basic Commands Styles
   ============================================ */

/* Command Structure Box */
.unix-shell-structure-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.unix-shell-structure-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 1.25rem 0;
}

.unix-shell-structure-code {
  background: #1e3a8a;
  color: #60a5fa;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
  margin-bottom: 1rem;
}

.unix-shell-structure-note {
  font-size: 1rem;
  color: #1e40af;
  margin: 1rem 0 0 0;
  font-weight: 500;
}

.unix-shell-highlight {
  color: #1e3a8a;
  font-weight: 800;
  background: #fef3c7;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

/* Shell Info Section */
.unix-shell-info-section {
  margin-bottom: 2.5rem;
}

.unix-shell-info-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #10b981;
}

.unix-shell-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.unix-shell-info-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #10b981;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.unix-shell-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
  border-color: #059669;
}

.unix-shell-info-number {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.unix-shell-info-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #065f46;
  margin: 0;
  font-weight: 500;
}

/* Shell Commands Section */
.unix-shell-commands-section {
  margin-bottom: 2.5rem;
}

.unix-shell-commands-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #f59e0b;
}

.unix-shell-commands-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.unix-shell-command-type {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.unix-shell-command-type:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
  border-color: #d97706;
}

.unix-shell-command-badge {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.unix-shell-command-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #92400e;
  margin: 0;
  font-weight: 500;
}

.unix-shell-file-code {
  background: #78350f;
  color: #fef3c7;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Shell Features Section */
.unix-shell-features-section {
  margin-bottom: 2.5rem;
}

.unix-shell-features-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #8b5cf6;
}

.unix-shell-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.unix-shell-feature-item {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 2px solid #a78bfa;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.unix-shell-feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

.unix-shell-feature-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

.unix-shell-feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.unix-shell-cmd-code {
  background: #2e1065;
  color: #e9d5ff;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
}

.unix-shell-feature-desc {
  font-size: 0.875rem;
  color: #5b21b6;
  font-style: italic;
  font-weight: 500;
}

/* Shell Commands Table Section */
.unix-shell-table-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
}

.unix-shell-table-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 3px solid #ec4899;
}

.unix-shell-table-wrapper {
  overflow-x: auto;
}

.unix-shell-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.unix-shell-table thead {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: #ffffff;
}

.unix-shell-table thead th {
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  text-align: left;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unix-shell-table thead th:first-child {
  border-top-left-radius: 10px;
}

.unix-shell-table thead th:last-child {
  border-top-right-radius: 10px;
}

.unix-shell-table tbody tr {
  transition: all 0.3s ease;
}

.unix-shell-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.unix-shell-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.unix-shell-table tbody tr:hover {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15);
}

.unix-shell-table tbody td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  line-height: 1.7;
}

.unix-shell-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.unix-shell-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.unix-shell-table tbody tr:last-child td {
  border-bottom: none;
}

.unix-shell-table-cmd {
  background: #1f2937;
  color: #34d399;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}

.unix-shell-table-example {
  display: block;
  margin-top: 0.5rem;
  padding-left: 1rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.unix-shell-table-example code {
  background: #374151;
  color: #fbbf24;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Responsive Design for Shell Commands */
@media (max-width: 768px) {
  .unix-shell-structure-box {
    padding: 1.5rem;
  }
  
  .unix-shell-structure-code {
    font-size: 1.05rem;
    padding: 0.875rem 1.5rem;
  }
  
  .unix-shell-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .unix-shell-info-card,
  .unix-shell-command-type {
    padding: 1.25rem 1.5rem;
  }
  
  .unix-shell-features-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .unix-shell-table-section {
    padding: 1.5rem;
  }
  
  .unix-shell-table thead th,
  .unix-shell-table tbody td {
    padding: 1rem 1.25rem;
  }
  
  .unix-shell-table-cmd {
    font-size: 0.85rem;
    padding: 0.375rem 0.625rem;
  }
}

@media (max-width: 480px) {
  .unix-shell-structure-box {
    padding: 1.25rem;
  }
  
  .unix-shell-structure-title {
    font-size: 1.15rem;
  }
  
  .unix-shell-structure-code {
    font-size: 0.95rem;
    padding: 0.75rem 1.25rem;
  }
  
  .unix-shell-info-card {
    padding: 1rem 1.25rem;
    gap: 1rem;
  }
  
  .unix-shell-info-number,
  .unix-shell-command-badge {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
  
  .unix-shell-command-type {
    padding: 1rem 1.25rem;
    gap: 1rem;
  }
  
  .unix-shell-features-grid {
    grid-template-columns: 1fr;
  }
  
  .unix-shell-feature-item {
    padding: 1rem 1.25rem;
  }
  
  .unix-shell-feature-number {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .unix-shell-cmd-code {
    font-size: 0.85rem;
    padding: 0.375rem 0.625rem;
  }
  
  .unix-shell-table-section {
    padding: 1.25rem;
  }
  
  .unix-shell-table-title {
    font-size: 1.35rem;
  }
  
  .unix-shell-table {
    font-size: 0.85rem;
  }
  
  .unix-shell-table thead th,
  .unix-shell-table tbody td {
    padding: 0.875rem 1rem;
  }
  
  .unix-shell-table-cmd {
    font-size: 0.8rem;
    padding: 0.325rem 0.5rem;
  }
  
  .unix-shell-table-example {
    font-size: 0.8rem;
    padding-left: 0.75rem;
  }
}

/* ============================================
   Redirection and Piping Styles
   ============================================ */

/* Redirection Operators Container */
.unix-redir-operators-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.unix-redir-operator-card {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

.unix-redir-operator-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
  border-color: #2563eb;
}

.unix-redir-operator-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.unix-redir-operator-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.unix-redir-operator-code {
  background: #1e3a8a;
  color: #60a5fa;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 3px 10px rgba(30, 58, 138, 0.3);
  width: fit-content;
}

.unix-redir-operator-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #1e40af;
  margin: 0;
  font-weight: 500;
}

/* Redirection Example Box */
.unix-redir-example-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 3px solid #10b981;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.unix-redir-example-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.unix-redir-example-code {
  background: #064e3b;
  color: #6ee7b7;
  padding: 1.25rem 2rem;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.3);
  margin-bottom: 1rem;
}

.unix-redir-example-desc {
  font-size: 1.05rem;
  color: #047857;
  margin: 1rem 0 0 0;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   Utility Commands Styles
   ============================================ */

.unix-util-command-section {
  margin-bottom: 2rem;
}

.unix-util-command-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.unix-util-command-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.unix-util-command-card.ps-command {
  border-color: #8b5cf6;
}

.unix-util-command-card.ps-command:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

.unix-util-command-card.nohup-command {
  border-color: #f59e0b;
}

.unix-util-command-card.nohup-command:hover {
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}

.unix-util-command-card.zip-command {
  border-color: #10b981;
}

.unix-util-command-card.zip-command:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}

.unix-util-command-card.unzip-command {
  border-color: #ec4899;
}

.unix-util-command-card.unzip-command:hover {
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
}

.unix-util-command-header {
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ps-command .unix-util-command-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.nohup-command .unix-util-command-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.zip-command .unix-util-command-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.unzip-command .unix-util-command-header {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.unix-util-command-badge {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.unix-util-command-title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unix-util-command-name {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-block;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ps-command .unix-util-command-name {
  color: #7c3aed;
}

.nohup-command .unix-util-command-name {
  color: #d97706;
}

.zip-command .unix-util-command-name {
  color: #059669;
}

.unzip-command .unix-util-command-name {
  color: #db2777;
}

.unix-util-command-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  line-height: 1.5;
}

.unix-util-command-body {
  padding: 2rem;
}

/* Utility Options List */
.unix-util-options-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.unix-util-option-item {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 2px solid #a78bfa;
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.unix-util-option-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

.unix-util-option-number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

.unix-util-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.unix-util-option-code {
  background: #2e1065;
  color: #e9d5ff;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
  width: fit-content;
}

.unix-util-option-desc {
  font-size: 0.875rem;
  color: #5b21b6;
  font-style: italic;
  font-weight: 500;
}

/* Utility Code Block */
.unix-util-code-block {
  background: #1f2937;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid #374151;
}

.unix-util-pre {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.unix-util-pre code {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.8;
  color: #34d399;
  font-weight: 600;
  display: block;
}

/* Responsive Design for Redirection and Utility */
@media (max-width: 768px) {
  .unix-redir-operators-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .unix-redir-operator-card {
    padding: 1.5rem;
  }
  
  .unix-redir-operator-number {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  
  .unix-redir-operator-code {
    font-size: 1.25rem;
    padding: 0.625rem 1rem;
  }
  
  .unix-redir-example-box {
    padding: 1.5rem;
  }
  
  .unix-redir-example-code {
    font-size: 1.15rem;
    padding: 1rem 1.5rem;
  }
  
  .unix-util-command-header {
    padding: 1.5rem;
  }
  
  .unix-util-command-body {
    padding: 1.5rem;
  }
  
  .unix-util-options-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .unix-redir-operator-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .unix-redir-operator-number {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
  
  .unix-redir-operator-code {
    font-size: 1.15rem;
    padding: 0.5rem 0.875rem;
  }
  
  .unix-redir-example-box {
    padding: 1.25rem;
  }
  
  .unix-redir-example-code {
    font-size: 1.05rem;
    padding: 0.875rem 1.25rem;
  }
  
  .unix-util-command-header {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .unix-util-command-badge {
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
  }
  
  .unix-util-command-name {
    font-size: 1.35rem;
    padding: 0.425rem 0.875rem;
  }
  
  .unix-util-command-subtitle {
    font-size: 0.9rem;
  }
  
  .unix-util-command-body {
    padding: 1.25rem;
  }
  
  .unix-util-option-item {
    padding: 1rem;
  }
  
  .unix-util-option-number {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }
  
  .unix-util-option-code {
    font-size: 0.85rem;
    padding: 0.375rem 0.625rem;
  }
  
  .unix-util-code-block {
    padding: 1.25rem;
  }
  
  .unix-util-pre code {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* ===========================
   TEXT PROCESSING COMMANDS STYLES (VIDEO 8)
   =========================== */

.unix-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.unix-text-command-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.unix-text-command-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Color variants for each command */
.unix-text-command-card.tr-command {
  border-left-color: #06b6d4;
  background: linear-gradient(135deg, #ecfeff 0%, #f8fafc 100%);
}

.unix-text-command-card.cut-command {
  border-left-color: #ec4899;
  background: linear-gradient(135deg, #fdf2f8 0%, #f8fafc 100%);
}

.unix-text-command-card.head-tail-command {
  border-left-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 100%);
}

.unix-text-command-card.cmp-command {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #f8fafc 100%);
}

.unix-text-command-card.comm-command {
  border-left-color: #8b5cf6;
  background: linear-gradient(135deg, #f5f3ff 0%, #f8fafc 100%);
}

.unix-text-command-card.wc-command {
  border-left-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}

.unix-text-command-card.sort-command {
  border-left-color: #eab308;
  background: linear-gradient(135deg, #fefce8 0%, #f8fafc 100%);
}

.unix-text-command-card.grep-command {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #f8fafc 100%);
}

.unix-text-command-header {
  margin-bottom: 1rem;
}

.unix-text-command-header h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.unix-text-command-desc {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.unix-text-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.unix-text-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem;
}

.unix-text-option strong {
  font-size: 1.1rem;
  font-family: 'Courier New', monospace;
  color: #1e293b;
  background: #f1f5f9;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  min-width: 3rem;
  text-align: center;
}

.unix-text-option span {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  flex: 1;
}

.unix-text-code-block {
  background: #1e293b;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.75rem 0;
  border-left: 3px solid #10b981;
  transition: all 0.3s ease;
}

.unix-text-code-block:hover {
  border-left-width: 5px;
  transform: translateX(2px);
}

.unix-text-code-block code {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #10b981;
  display: block;
  margin-bottom: 0.5rem;
}

.unix-text-code-block .code-comment {
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: italic;
  margin: 0;
  padding-left: 1rem;
}

.unix-text-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.unix-text-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: #475569;
  line-height: 1.6;
}

.unix-text-list li::before {
  content: "";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .unix-text-wrapper {
    gap: 1rem;
  }
  
  .unix-text-command-card {
    padding: 1rem;
  }
  
  .unix-text-command-header h4 {
    font-size: 1.25rem;
  }
  
  .unix-text-option {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .unix-text-option strong {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .unix-text-command-card {
    padding: 0.75rem;
  }
  
  .unix-text-code-block {
    padding: 0.75rem;
  }
  
  .unix-text-code-block code {
    font-size: 0.85rem;
    word-break: break-all;
  }
}
/* ========================================
   Modern AWK Section Styling
   ======================================== */

.awk-modern-wrapper {
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.awk-hero-section {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 3rem 2rem;
  border-radius: 20px;
  margin-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.25);
  position: relative;
  overflow: hidden;
}

.awk-hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.awk-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.awk-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.awk-hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

/* Code Cards */
.awk-code-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
}

.awk-code-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.awk-code-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #667eea;
  position: relative;
}

.awk-code-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.awk-code-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
  display: block;
}

.awk-code-content {
  padding: 0;
  background: #1e293b;
}

.awk-code-block {
  margin: 0;
  padding: 1.75rem;
  overflow-x: auto;
  background: #1e293b;
}

.awk-code-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #e2e8f0;
  display: block;
  white-space: pre;
  letter-spacing: 0.3px;
}

/* Features Section */
.awk-features-section {
  margin-top: 4rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.awk-features-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 2.5rem 0;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}

.awk-features-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.awk-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.awk-feature-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

.awk-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.awk-feature-card:hover::before {
  transform: scaleX(1);
}

.awk-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
}

.awk-feature-number {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.awk-feature-content {
  flex: 1;
}

.awk-feature-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.awk-feature-text {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .awk-modern-wrapper {
    padding: 1.5rem 0;
  }

  .awk-hero-section {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .awk-hero-title {
    font-size: 2.2rem;
  }

  .awk-hero-subtitle {
    font-size: 1.1rem;
  }

  .awk-hero-badge {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }

  .awk-code-header {
    padding: 1rem 1.25rem;
  }

  .awk-code-label {
    font-size: 0.95rem;
  }

  .awk-code-block {
    padding: 1.25rem;
  }

  .awk-code-block code {
    font-size: 0.85rem;
  }

  .awk-features-section {
    padding: 2rem 1.5rem;
    margin-top: 3rem;
  }

  .awk-features-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .awk-features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .awk-feature-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .awk-hero-section {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .awk-hero-title {
    font-size: 1.8rem;
  }

  .awk-hero-subtitle {
    font-size: 1rem;
  }

  .awk-code-card {
    margin-bottom: 1.5rem;
    border-radius: 12px;
  }

  .awk-code-block {
    padding: 1rem;
  }

  .awk-code-block code {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .awk-feature-card {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .awk-feature-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .awk-feature-heading {
    font-size: 1rem;
  }

  .awk-feature-text {
    font-size: 0.9rem;
  }
}

/* Code Syntax Highlighting */
.awk-code-block code {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Smooth Scrollbar for Code Blocks */
.awk-code-block::-webkit-scrollbar {
  height: 8px;
}

.awk-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.awk-code-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.awk-code-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========================================
   Modern SED Section Styling
   ======================================== */

.sed-modern-wrapper {
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.sed-hero-section {
  text-align: center;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 3rem 2rem;
  border-radius: 20px;
  margin-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(240, 147, 251, 0.25);
  position: relative;
  overflow: hidden;
}

.sed-hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.sed-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.sed-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.sed-hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

/* Commands Section */
.sed-commands-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2.5rem;
  border-radius: 20px;
  margin-bottom: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.sed-commands-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 2rem 0;
  text-align: center;
}

.sed-commands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}

.sed-command-badge {
  background: #ffffff;
  padding: 1.75rem 1.25rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

.sed-command-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sed-command-badge:hover::before {
  transform: scaleX(1);
}

.sed-command-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(240, 147, 251, 0.2);
}

.sed-badge-number {
  display: block;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #ffffff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 35px;
  margin: 0 auto 1rem auto;
  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.sed-badge-code {
  display: block;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f5576c;
  margin-bottom: 0.5rem;
}

.sed-badge-label {
  display: block;
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 500;
}

/* Sample Section */
.sed-sample-section {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
}

.sed-sample-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #f093fb;
  position: relative;
}

.sed-sample-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.sed-sample-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
}

.sed-sample-content {
  padding: 0;
  background: #1e293b;
}

.sed-sample-block {
  margin: 0;
  padding: 1.75rem;
  overflow-x: auto;
  background: #1e293b;
}

.sed-sample-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #e2e8f0;
  display: block;
  white-space: pre;
}

/* Examples Container */
.sed-examples-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sed-example-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
}

.sed-example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.sed-example-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #f093fb;
  position: relative;
}

.sed-example-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.sed-example-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
}

.sed-example-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.sed-code-section {
  background: #1e293b;
  padding: 1.75rem;
}

.sed-code-block {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.sed-code-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #e2e8f0;
  display: block;
  white-space: pre;
}

.sed-output-section {
  background: #0f172a;
  padding: 1.75rem;
  border-top: 1px solid #334155;
}

.sed-output-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sed-output-block {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.sed-output-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #94a3b8;
  display: block;
  white-space: pre;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sed-modern-wrapper {
    padding: 1.5rem 0;
  }

  .sed-hero-section {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .sed-hero-title {
    font-size: 2.2rem;
  }

  .sed-hero-subtitle {
    font-size: 1.1rem;
  }

  .sed-hero-badge {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }

  .sed-commands-section {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .sed-commands-title {
    font-size: 1.3rem;
  }

  .sed-commands-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
  }

  .sed-command-badge {
    padding: 1.5rem 1rem;
  }

  .sed-sample-header,
  .sed-example-header {
    padding: 1rem 1.25rem;
  }

  .sed-sample-label,
  .sed-example-title {
    font-size: 0.95rem;
  }

  .sed-sample-block,
  .sed-code-section,
  .sed-output-section {
    padding: 1.25rem;
  }

  .sed-sample-block code,
  .sed-code-block code {
    font-size: 0.85rem;
  }

  .sed-examples-container {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .sed-hero-section {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .sed-hero-title {
    font-size: 1.8rem;
  }

  .sed-hero-subtitle {
    font-size: 1rem;
  }

  .sed-commands-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .sed-command-badge {
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
  }

  .sed-badge-code {
    font-size: 1.3rem;
  }

  .sed-badge-label {
    font-size: 0.85rem;
  }

  .sed-example-card {
    margin-bottom: 1.5rem;
    border-radius: 12px;
  }

  .sed-sample-block,
  .sed-code-section,
  .sed-output-section {
    padding: 1rem;
  }

  .sed-sample-block code,
  .sed-code-block code,
  .sed-output-block code {
    font-size: 0.8rem;
    line-height: 1.6;
  }
}

/* Smooth Scrollbar for SED Code Blocks */
.sed-sample-block::-webkit-scrollbar,
.sed-code-block::-webkit-scrollbar,
.sed-output-block::-webkit-scrollbar {
  height: 8px;
}

.sed-sample-block::-webkit-scrollbar-track,
.sed-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.sed-output-block::-webkit-scrollbar-track {
  background: #020617;
  border-radius: 4px;
}

.sed-sample-block::-webkit-scrollbar-thumb,
.sed-code-block::-webkit-scrollbar-thumb,
.sed-output-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.sed-sample-block::-webkit-scrollbar-thumb:hover,
.sed-code-block::-webkit-scrollbar-thumb:hover,
.sed-output-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========================================
   Shell Scripting Constructs Styling
   ======================================== */

.shell-modern-wrapper {
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.shell-hero-section {
  text-align: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  padding: 3rem 2rem;
  border-radius: 20px;
  margin-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(79, 172, 254, 0.25);
  position: relative;
  overflow: hidden;
}

.shell-hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.shell-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.shell-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.shell-hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

/* Section Card */
.shell-section-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shell-section-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.shell-section-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.5rem 2rem;
  border-bottom: 3px solid #4facfe;
  position: relative;
}

.shell-section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.shell-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.shell-section-content {
  padding: 2rem;
}

/* Code Examples */
.shell-code-example {
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.shell-code-block {
  margin: 0;
  padding: 1.75rem;
  overflow-x: auto;
}

.shell-code-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #e2e8f0;
  display: block;
  white-space: pre;
}

/* Note Box */
.shell-note-box {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-left: 4px solid #fb923c;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.shell-note-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.shell-note-text {
  margin: 0;
  color: #9a3412;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Loop Cards */
.shell-loop-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.5rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shell-loop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.15);
}

.shell-loop-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.shell-loop-content {
  flex: 1;
}

.shell-loop-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 1rem 0;
}

/* Subsection */
.shell-subsection {
  margin-bottom: 2.5rem;
}

.shell-subsection-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

/* Operator Groups */
.shell-operator-group {
  background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e5e7eb;
}

.shell-operator-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 1.25rem 0;
}

.shell-operator-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.shell-operator-item {
  background: #ffffff;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.shell-operator-item:hover {
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
  transform: translateX(3px);
}

.shell-operator-code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.shell-operator-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* Examples Container */
.shell-examples-container {
  margin-top: 2rem;
}

/* Control Commands */
.shell-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.shell-control-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 1.75rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shell-control-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.2);
}

.shell-control-code {
  display: block;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: #4facfe;
  margin-bottom: 0.75rem;
}

.shell-control-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Function Cards */
.shell-function-card {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  border: 1px solid #fde047;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shell-function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(250, 204, 21, 0.2);
}

.shell-function-header {
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid #fbbf24;
}

.shell-function-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.shell-function-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #78350f;
  margin: 0;
}

.shell-function-card .shell-code-example {
  margin: 0;
  border-radius: 0;
}

/* String Functions */
.shell-string-functions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.shell-string-function {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.shell-string-function:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #4facfe;
  transform: translateX(5px);
}

.shell-string-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.shell-string-content {
  flex: 1;
}

.shell-string-name {
  display: block;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  color: #0c4a6e;
  background: rgba(79, 172, 254, 0.1);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

.shell-string-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shell-modern-wrapper {
    padding: 1.5rem 0;
  }

  .shell-hero-section {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .shell-hero-title {
    font-size: 2rem;
  }

  .shell-hero-subtitle {
    font-size: 1.1rem;
  }

  .shell-hero-badge {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }

  .shell-section-header {
    padding: 1.25rem 1.5rem;
  }

  .shell-section-title {
    font-size: 1.3rem;
  }

  .shell-section-content {
    padding: 1.5rem;
  }

  .shell-code-block {
    padding: 1.25rem;
  }

  .shell-code-block code {
    font-size: 0.85rem;
  }

  .shell-loop-card {
    flex-direction: column;
    padding: 1.5rem;
  }

  .shell-loop-number {
    align-self: flex-start;
  }

  .shell-operator-list {
    grid-template-columns: 1fr;
  }

  .shell-control-grid {
    grid-template-columns: 1fr;
  }

  .shell-string-function {
    flex-direction: column;
    padding: 1.25rem;
  }

  .shell-string-number {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .shell-hero-section {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .shell-hero-title {
    font-size: 1.75rem;
  }

  .shell-hero-subtitle {
    font-size: 1rem;
  }

  .shell-section-header {
    padding: 1rem 1.25rem;
  }

  .shell-section-content {
    padding: 1.25rem;
  }

  .shell-code-block {
    padding: 1rem;
  }

  .shell-code-block code {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .shell-loop-card,
  .shell-operator-group {
    padding: 1.25rem;
  }

  .shell-string-name {
    font-size: 0.8rem;
  }
}

/* Smooth Scrollbar for Shell Code Blocks */
.shell-code-block::-webkit-scrollbar {
  height: 8px;
}

.shell-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.shell-code-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.shell-code-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========================================
   SQL Sections Styling (Video 9, 10, 11)
   ======================================== */

.sql-modern-wrapper {
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.sql-hero-section {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 3rem 2rem;
  border-radius: 20px;
  margin-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.25);
  position: relative;
  overflow: hidden;
}

.sql-hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.sql-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.sql-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.sql-hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto;
}

/* Types Section */
.sql-types-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sql-type-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sql-type-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.sql-type-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 3px solid #667eea;
  position: relative;
}

.sql-type-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.sql-type-badge {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sql-type-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.sql-type-content {
  padding: 2rem;
}

.sql-type-intro {
  font-size: 1.05rem;
  color: #64748b;
  margin: 0 0 1.75rem 0;
  font-style: italic;
}

/* Database List */
.sql-db-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sql-db-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.sql-db-item:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #667eea;
  transform: translateX(5px);
}

.sql-db-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sql-db-content {
  flex: 1;
}

.sql-db-name {
  display: inline-block;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: #5b21b6;
  background: rgba(102, 126, 234, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.sql-db-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Content Card */
.sql-content-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.sql-content-text {
  margin: 0;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
}

/* Code Card */
.sql-code-card {
  background: #1e293b;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sql-code-content {
  padding: 0;
}

.sql-code-block {
  margin: 0;
  padding: 2rem;
  overflow-x: auto;
}

.sql-code-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #e2e8f0;
  display: block;
  white-space: pre;
}

/* Note Box */
.sql-note-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.15);
}

.sql-note-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sql-note-text {
  margin: 0;
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.7;
}

.sql-note-text strong {
  color: #92400e;
}

/* Data Types Section */
.sql-datatypes-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sql-datatype-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.sql-datatype-item:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #667eea;
  transform: translateX(5px);
}

.sql-datatype-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sql-datatype-content {
  flex: 1;
}

.sql-datatype-name {
  display: inline-block;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: #5b21b6;
  background: rgba(102, 126, 234, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.sql-datatype-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sql-modern-wrapper {
    padding: 1.5rem 0;
  }

  .sql-hero-section {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .sql-hero-title {
    font-size: 2rem;
  }

  .sql-hero-subtitle {
    font-size: 1rem;
  }

  .sql-hero-badge {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }

  .sql-type-header {
    padding: 1.25rem 1.5rem;
  }

  .sql-type-title {
    font-size: 1.3rem;
  }

  .sql-type-content {
    padding: 1.5rem;
  }

  .sql-db-item,
  .sql-datatype-item {
    flex-direction: column;
    padding: 1.25rem;
  }

  .sql-db-number,
  .sql-datatype-number {
    align-self: flex-start;
  }

  .sql-content-card {
    padding: 1.5rem;
  }

  .sql-code-block {
    padding: 1.5rem;
  }

  .sql-code-block code {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .sql-hero-section {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .sql-hero-title {
    font-size: 1.75rem;
  }

  .sql-hero-subtitle {
    font-size: 0.95rem;
  }

  .sql-type-header {
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .sql-type-badge {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .sql-type-title {
    font-size: 1.2rem;
  }

  .sql-content-card {
    padding: 1.25rem;
  }

  .sql-content-text {
    font-size: 0.95rem;
  }

  .sql-code-block {
    padding: 1.25rem;
  }

  .sql-code-block code {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .sql-db-name,
  .sql-datatype-name {
    font-size: 0.95rem;
  }
}

/* Smooth Scrollbar for SQL Code Blocks */
.sql-code-block::-webkit-scrollbar {
  height: 8px;
}

.sql-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.sql-code-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.sql-code-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========================================
   ROLLUP and CUBE Operators Styling
   ======================================== */

.rollup-intro-section {
  margin-bottom: 3rem;
}

.rollup-intro-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 2rem 0;
  text-align: center;
  padding: 1rem 0;
  border-bottom: 3px solid #667eea;
}

.operator-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 5px solid;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.operator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.rollup-card {
  border-left-color: #667eea;
}

.cube-card {
  border-left-color: #8b5cf6;
}

.operator-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.cube-card .operator-number {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.operator-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a202c;
  margin: 1rem 0 0.75rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.operator-desc {
  margin: 0.75rem 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
}

.operator-note {
  margin: 1rem 0 0 0;
  font-size: 0.95rem;
  color: #64748b;
  font-style: italic;
}

/* Sample Data Section */
.rollup-sample-section {
  margin-bottom: 3rem;
}

.sql-sample-card {
  background: #1e293b;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #334155;
}

.sql-sample-header {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #667eea;
  position: relative;
}

.sql-sample-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.sql-sample-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #cbd5e1;
  display: block;
}

.sql-sample-content {
  padding: 0;
  background: #0f172a;
}

.sql-sample-block {
  margin: 0;
  padding: 1.75rem;
  overflow-x: auto;
}

.sql-sample-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #e2e8f0;
  display: block;
  white-space: pre;
}

/* Example Section */
.rollup-example-section {
  margin-bottom: 2.5rem;
}

.rollup-example-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

/* Example Card */
.sql-example-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sql-example-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.sql-example-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #667eea;
  position: relative;
}

.sql-example-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.sql-example-label {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  display: block;
}

.sql-example-code {
  background: #1e293b;
  padding: 0;
  border-top: 1px solid #334155;
}

.sql-output-content {
  background: #0f172a;
  padding: 0;
  border-top: 1px solid #334155;
}

.sql-output-block {
  margin: 0;
  padding: 1.75rem;
  overflow-x: auto;
}

.sql-output-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #94a3b8;
  display: block;
  white-space: pre;
}

/* Responsive Design for ROLLUP/CUBE */
@media (max-width: 768px) {
  .rollup-intro-title {
    font-size: 1.2rem;
  }

  .operator-card {
    padding: 1.5rem;
  }

  .operator-title {
    font-size: 1.2rem;
  }

  .operator-desc {
    font-size: 0.95rem;
  }

  .sql-sample-header,
  .sql-example-header {
    padding: 1rem 1.25rem;
  }

  .sql-sample-label,
  .sql-example-label {
    font-size: 0.95rem;
  }

  .sql-sample-block,
  .sql-code-block,
  .sql-output-block {
    padding: 1.25rem;
  }

  .sql-sample-block code,
  .sql-code-block code,
  .sql-output-block code {
    font-size: 0.85rem;
  }

  .rollup-example-section {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .rollup-intro-title {
    font-size: 1.1rem;
  }

  .operator-card {
    padding: 1.25rem;
    border-left-width: 4px;
  }

  .operator-number {
    width: 35px;
    height: 35px;
    font-size: 1rem;
    margin-right: 0.75rem;
  }

  .operator-title {
    font-size: 1.1rem;
    margin: 0.75rem 0 0.5rem 0;
  }

  .operator-desc {
    font-size: 0.9rem;
  }

  .rollup-example-title {
    font-size: 1.1rem;
  }

  .sql-sample-block,
  .sql-code-block,
  .sql-output-block {
    padding: 1rem;
  }

  .sql-sample-block code,
  .sql-code-block code,
  .sql-output-block code {
    font-size: 0.8rem;
    line-height: 1.6;
  }
}

/* Smooth Scrollbar for Sample/Code/Output Blocks */
.sql-sample-block::-webkit-scrollbar,
.sql-code-block::-webkit-scrollbar,
.sql-output-block::-webkit-scrollbar {
  height: 8px;
}

.sql-sample-block::-webkit-scrollbar-track,
.sql-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.sql-output-block::-webkit-scrollbar-track {
  background: #020617;
  border-radius: 4px;
}

.sql-sample-block::-webkit-scrollbar-thumb,
.sql-code-block::-webkit-scrollbar-thumb,
.sql-output-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.sql-sample-block::-webkit-scrollbar-thumb:hover,
.sql-code-block::-webkit-scrollbar-thumb:hover,
.sql-output-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========================================
   TOP and INTO Clauses Styling
   ======================================== */

/* TOP and INTO Clause Introduction Section */
.clause-intro-section {
  margin: 2.5rem 0;
}

.clause-intro-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  border-left: 5px solid #667eea;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clause-intro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.clause-intro-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #667eea;
  margin: 0 0 1rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.clause-intro-text {
  margin: 0;
  font-size: 1rem;
  color: #334155;
  line-height: 1.8;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  background: #ffffff;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Clause Examples Section */
.clause-examples-section {
  margin-bottom: 3rem;
}

.clause-examples-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

/* INTO Clause Features */
.into-features-section {
  margin: 2.5rem 0;
}

.into-features-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 2rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
  text-align: center;
}

.into-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.into-feature-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  border: 2px solid #e2e8f0;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.into-feature-card:hover {
  transform: translateY(-8px);
  border-color: #8b5cf6;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

.into-feature-number {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.into-feature-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.75rem 0;
}

.into-feature-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* INTO Clause Note Box */
.into-note-section {
  margin: 3rem 0;
}

.into-note-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 5px solid #f59e0b;
  display: flex;
  gap: 1.5rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.into-note-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.into-note-content {
  flex: 1;
}

.into-note-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #b45309;
  margin: 0 0 0.5rem 0;
}

.into-note-text {
  margin: 0;
  font-size: 0.95rem;
  color: #92400e;
  line-height: 1.6;
}

/* ========================================
   Video 10: ANSI_NULLS and CONCAT_NULL_YIELDS_NULL
   ======================================== */

.null-setting-section {
  margin: 2.5rem 0;
}

.null-setting-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.null-setting-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.null-setting-number {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.null-setting-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.null-behavior-subsection {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.null-behavior-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 1rem 0;
}

.null-behavior-list {
  margin: 0;
  padding-left: 1.5rem;
  list-style: none;
}

.null-behavior-list li {
  margin: 0.75rem 0;
  color: #475569;
  line-height: 1.7;
  font-size: 0.95rem;
}

.null-behavior-list li code {
  background: #f1f5f9;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  color: #667eea;
}

/* ========================================
   Video 10: Temporary Tables
   ======================================== */

.temp-table-types-section {
  margin: 2.5rem 0;
}

.temp-table-types-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 2rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
  text-align: center;
}

.temp-table-type-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.temp-table-type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #8b5cf6;
}

.temp-table-type-number {
  display: inline-flex;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: #ffffff;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.temp-table-type-content {
  flex: 1;
}

.temp-table-type-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.75rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.temp-table-type-desc {
  margin: 0 0 1rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.temp-table-code-box {
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #334155;
  margin: 0;
}

.temp-table-code-box .sql-code-block {
  margin: 0;
  padding: 1.25rem;
  background: #1e293b;
  border: none;
}

/* ========================================
   Video 10: IDENTITY Column
   ======================================== */

.identity-description-section {
  margin: 2.5rem 0;
}

.identity-desc-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 5px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.identity-desc-text {
  margin: 0;
  font-size: 1rem;
  color: #92400e;
  line-height: 1.7;
}

.identity-example-section {
  margin: 2.5rem 0;
}

.identity-example-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.identity-note-section {
  margin: 2.5rem 0 0 0;
}

.identity-note-box {
  background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 5px solid #667eea;
  display: flex;
  gap: 1.5rem;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.identity-note-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.identity-note-content {
  flex: 1;
}

.identity-note-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #4338ca;
  margin: 0 0 0.5rem 0;
}

.identity-note-text {
  margin: 0;
  font-size: 0.95rem;
  color: #4f46e5;
  line-height: 1.6;
}

.identity-note-text code {
  background: rgba(102, 126, 234, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: #4338ca;
}

/* ========================================
   Video 10: TRUNCATE vs. DELETE
   ======================================== */

.truncate-comparison-section {
  margin: 2.5rem 0;
}

.comparison-table-wrapper {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.comparison-table thead {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.comparison-table th {
  padding: 1.25rem;
  text-align: left;
  font-weight: 700;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.comparison-table th:last-child {
  border-right: none;
}

.table-header-feature {
  min-width: 150px;
}

.table-header-truncate {
  min-width: 180px;
}

.table-header-delete {
  min-width: 180px;
}

.comparison-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.comparison-table tbody tr:hover {
  background-color: #f9fafb;
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

.table-cell-feature {
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: #1f2937;
  background: #f3f4f6;
  border-right: 2px solid #e5e7eb;
  min-width: 150px;
}

.table-cell-content {
  padding: 1rem 1.25rem;
  color: #475569;
  line-height: 1.6;
  border-right: 1px solid #e5e7eb;
}

.table-cell-content:last-child {
  border-right: none;
}

/* ========================================
   Video 10: Ranking Functions
   ======================================== */

.ranking-intro-section {
  margin: 2rem 0 2.5rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 12px;
  border-left: 5px solid #10b981;
}

.ranking-intro-text {
  margin: 0;
  font-size: 1rem;
  color: #065f46;
  line-height: 1.7;
  font-weight: 500;
}

.ranking-function-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 1.75rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #10b981;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ranking-function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15);
  border-left-color: #059669;
}

.ranking-function-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ranking-function-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.ranking-function-desc {
  margin: 0 0 1rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ranking-function-code {
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #334155;
  margin: 1rem 0 0 0;
}

.ranking-function-code .sql-code-block {
  margin: 0;
  padding: 1.25rem;
  background: #1e293b;
  border: none;
  font-size: 0.9rem;
}

/* Responsive Design for TRUNCATE and Ranking Functions */
@media (max-width: 768px) {
  .comparison-table {
    font-size: 0.85rem;
  }

  .comparison-table th {
    padding: 0.85rem;
  }

  .table-cell-feature,
  .table-cell-content {
    padding: 0.85rem;
  }

  .table-header-feature {
    min-width: 120px;
  }

  .table-header-truncate {
    min-width: 140px;
  }

  .table-header-delete {
    min-width: 140px;
  }

  .ranking-function-card {
    padding: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .ranking-function-title {
    font-size: 1.1rem;
  }

  .ranking-function-desc {
    font-size: 0.9rem;
  }

  .ranking-intro-section {
    padding: 1.25rem;
  }

  .ranking-intro-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .comparison-table-wrapper {
    overflow-x: auto;
  }

  .comparison-table {
    font-size: 0.8rem;
    min-width: 500px;
  }

  .comparison-table th {
    padding: 0.65rem;
  }

  .table-cell-feature,
  .table-cell-content {
    padding: 0.65rem;
  }

  .table-header-feature {
    min-width: 100px;
  }

  .table-header-truncate {
    min-width: 120px;
  }

  .table-header-delete {
    min-width: 120px;
  }

  .ranking-function-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-left-width: 4px;
  }

  .ranking-function-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .ranking-function-title {
    font-size: 1rem;
    margin: 0.35rem 0 0.5rem 0;
  }

  .ranking-function-desc {
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
  }

  .ranking-function-code .sql-code-block {
    padding: 0.85rem;
    font-size: 0.8rem;
  }

  .ranking-intro-section {
    padding: 1rem;
    margin: 1.5rem 0 2rem 0;
  }

  .ranking-intro-text {
    font-size: 0.9rem;
  }
}

/* ========================================
   Video 11: Conversion Functions
   ======================================== */

.conversion-functions-section {
  margin: 2.5rem 0;
}

.conversion-function-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #3b82f6;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversion-function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
  border-left-color: #2563eb;
}

.conversion-func-number {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.conversion-func-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.conversion-func-desc {
  margin: 0 0 1rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.conversion-func-examples {
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #334155;
  margin: 1rem 0 0 0;
}

.conversion-func-examples .sql-code-block {
  margin: 0;
  padding: 1.25rem;
  background: #1e293b;
  border: none;
  font-size: 0.9rem;
}

/* ========================================
   Video 11: Date and Time Functions
   ======================================== */

.date-functions-section {
  margin: 2.5rem 0;
}

.date-function-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.75rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
  border-left-color: #7c3aed;
}

.date-func-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.date-func-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.35rem 0 0.75rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.date-func-desc {
  margin: 0 0 1rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.date-func-examples {
  background: #1e293b;
  border-radius: 12px;
  overflow: auto;
  border: 1px solid #334155;
  margin: 1rem 0 0 0;
  max-height: 400px;
}

.date-func-examples .sql-code-block {
  margin: 0;
  padding: 1.25rem;
  background: #1e293b;
  border: none;
  font-size: 0.9rem;
  line-height: 1.6;
  min-width: 100%;
}

/* Responsive Design for Video 11 */
@media (max-width: 768px) {
  .conversion-function-card {
    padding: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .conversion-func-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .conversion-func-title {
    font-size: 1.1rem;
  }

  .conversion-func-desc {
    font-size: 0.9rem;
  }

  .conversion-func-examples .sql-code-block {
    padding: 1rem;
    font-size: 0.85rem;
  }

  .date-function-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .date-func-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .date-func-title {
    font-size: 1.05rem;
    margin: 0.25rem 0 0.5rem 0;
  }

  .date-func-desc {
    font-size: 0.9rem;
  }

  .date-func-examples .sql-code-block {
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .conversion-function-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-left-width: 4px;
  }

  .conversion-func-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
  }

  .conversion-func-title {
    font-size: 1rem;
    margin: 0.35rem 0 0.5rem 0;
  }

  .conversion-func-desc {
    font-size: 0.88rem;
    margin: 0 0 0.75rem 0;
  }

  .conversion-func-examples .sql-code-block {
    padding: 0.85rem;
    font-size: 0.8rem;
  }

  .date-function-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
  }

  .date-func-number {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .date-func-title {
    font-size: 1rem;
    margin: 0.3rem 0 0.5rem 0;
  }

  .date-func-desc {
    font-size: 0.88rem;
    margin: 0 0 0.75rem 0;
  }

  .date-func-examples {
    max-height: 300px;
  }

  .date-func-examples .sql-code-block {
    padding: 0.85rem;
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* ========================================
   Video 11: Error Handling (TRY...CATCH)
   ======================================== */

.error-handling-intro-section {
  margin: 2rem 0 2.5rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-radius: 12px;
  border-left: 5px solid #ef4444;
}

.error-handling-intro-text {
  margin: 0;
  font-size: 1rem;
  color: #7f1d1d;
  line-height: 1.7;
  font-weight: 500;
}

.error-handling-example-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.1);
  border: 1px solid #fecaca;
}

.error-handling-header {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #ef4444;
  position: relative;
}

.error-handling-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.error-handling-label {
  font-size: 1rem;
  font-weight: 600;
  color: #7f1d1d;
  display: block;
}

.error-handling-code {
  background: #1e293b;
  padding: 0;
  border-top: 1px solid #334155;
}

.error-handling-code .sql-code-block {
  margin: 0;
  padding: 1.75rem;
  background: #1e293b;
  border: none;
  font-size: 0.9rem;
}

.error-functions-section {
  margin: 2.5rem 0 0 0;
}

.error-functions-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.error-function-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid #ef4444;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.error-func-number {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.error-func-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.35rem 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.error-func-desc {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

/* ========================================
   Video 11: Stored Procedures
   ======================================== */

.stored-proc-advantages-section {
  margin: 2.5rem 0;
}

.stored-proc-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.advantages-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.advantage-item {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid #8b5cf6;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.advantage-number {
  display: inline-flex;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.advantage-text {
  margin: 0;
  font-size: 0.95rem;
  color: #5b21b6;
  line-height: 1.6;
  font-weight: 500;
}

.proc-types-section {
  margin: 2.5rem 0;
}

.proc-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.proc-type-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  border: 2px solid #e2e8f0;
  border-left: 5px solid #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.proc-type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
  border-left-color: #6d28d9;
}

.proc-type-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.proc-type-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
}

.proc-type-desc {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.stored-proc-examples-section {
  margin: 2.5rem 0;
}

.proc-example-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
  border: 1px solid #e2e8f0;
  border-left: 5px solid #8b5cf6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.proc-example-card:hover {
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
  transform: translateY(-2px);
}

.proc-example-header {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid #8b5cf6;
  position: relative;
}

.proc-example-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
}

.proc-example-label {
  font-size: 1rem;
  font-weight: 600;
  color: #5b21b6;
  display: block;
}

.proc-example-code {
  background: #1e293b;
  padding: 0;
  border-top: 1px solid #334155;
}

.proc-example-code .sql-code-block {
  margin: 0;
  padding: 1.75rem;
  background: #1e293b;
  border: none;
  font-size: 0.9rem;
}

.proc-operations-section {
  margin: 2.5rem 0 0 0;
}

.operations-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.operation-item {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid #6366f1;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.operation-number {
  display: inline-flex;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.operation-text {
  margin: 0;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.6;
}

.operation-text strong {
  color: #1f2937;
}

/* Responsive Design for Error Handling & Stored Procedures */
@media (max-width: 768px) {
  .error-handling-example-card {
    margin-bottom: 2rem;
  }

  .error-handling-header {
    padding: 1rem 1.25rem;
  }

  .error-handling-label {
    font-size: 0.95rem;
  }

  .error-handling-code .sql-code-block {
    padding: 1.25rem;
    font-size: 0.85rem;
  }

  .error-functions-title {
    font-size: 1.05rem;
  }

  .error-function-item {
    padding: 1.25rem;
    gap: 1rem;
  }

  .advantages-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .advantage-item {
    padding: 1.25rem;
  }

  .proc-type-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .proc-type-card {
    padding: 1.5rem;
  }

  .proc-example-header {
    padding: 1rem 1.25rem;
  }

  .proc-example-label {
    font-size: 0.95rem;
  }

  .proc-example-code .sql-code-block {
    padding: 1.25rem;
    font-size: 0.85rem;
  }

  .operations-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .operation-item {
    padding: 1.25rem;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .error-handling-intro-section {
    padding: 1rem;
    margin: 1.5rem 0 2rem 0;
  }

  .error-handling-intro-text {
    font-size: 0.9rem;
  }

  .error-handling-example-card {
    margin-bottom: 1.5rem;
  }

  .error-handling-header {
    padding: 0.85rem 1rem;
  }

  .error-handling-code .sql-code-block {
    padding: 1rem;
    font-size: 0.8rem;
  }

  .error-functions-title {
    font-size: 1rem;
  }

  .error-function-item {
    padding: 1rem;
    gap: 0.75rem;
    border-left-width: 3px;
  }

  .error-func-number {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .error-func-name {
    font-size: 0.95rem;
  }

  .error-func-desc {
    font-size: 0.85rem;
  }

  .advantage-item {
    padding: 1rem;
    gap: 0.75rem;
    border-left-width: 3px;
  }

  .advantage-number {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .advantage-text {
    font-size: 0.9rem;
  }

  .proc-type-card {
    padding: 1.25rem;
    border-left-width: 4px;
  }

  .proc-type-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .proc-type-name {
    font-size: 1rem;
    margin: 0.35rem 0 0.5rem 0;
  }

  .proc-type-desc {
    font-size: 0.9rem;
  }

  .proc-example-header {
    padding: 0.85rem 1rem;
  }

  .proc-example-code .sql-code-block {
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .operation-item {
    padding: 1rem;
    gap: 0.75rem;
    border-left-width: 3px;
  }

  .operation-number {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .operation-text {
    font-size: 0.9rem;
  }
}

/* ========================================
   Video 11: Example SQL Snippets
   ======================================== */

.sql-snippets-section {
  margin: 2.5rem 0;
}

.snippet-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.75rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #06b6d4;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.snippet-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(6, 182, 212, 0.2);
  border-left-color: #0891b2;
}

.snippet-number {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.snippet-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 1rem 0;
  line-height: 1.5;
}

.snippet-card .sql-code-block {
  margin: 0;
  padding: 1.25rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  font-size: 0.9rem;
  max-height: 500px;
  overflow-y: auto;
}

/* Scrollbar styling for snippet code blocks */
.snippet-card .sql-code-block::-webkit-scrollbar {
  width: 8px;
}

.snippet-card .sql-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.snippet-card .sql-code-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.snippet-card .sql-code-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Responsive Design for SQL Snippets */
@media (max-width: 768px) {
  .snippet-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .snippet-number {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    margin-bottom: 0.65rem;
  }

  .snippet-title {
    font-size: 1rem;
    margin: 0.35rem 0 0.85rem 0;
  }

  .snippet-card .sql-code-block {
    padding: 1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .snippet-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
  }

  .snippet-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .snippet-title {
    font-size: 0.95rem;
    margin: 0.3rem 0 0.75rem 0;
  }

  .snippet-card .sql-code-block {
    padding: 0.9rem;
    font-size: 0.8rem;
    line-height: 1.4;
    max-height: 400px;
  }
}

/* ========================================
   Video 12: Basic Probability Concepts
   ======================================== */

.prob-concepts-section {
  margin: 2.5rem 0;
}

.prob-concept-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.75rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prob-concept-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.2);
  border-left-color: #d97706;
}

.prob-concept-number {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.prob-concept-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
}

.prob-concept-desc {
  margin: 0 0 0.75rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.prob-concept-example {
  margin: 0;
  color: #059669;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
}

/* Probability Formula Section */
.prob-formula-section {
  margin: 2.5rem 0;
}

.prob-formula-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.prob-formula-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 6px solid #f59e0b;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.formula-box {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid #f59e0b;
}

.formula-text {
  margin: 0;
  font-size: 1.1rem;
  color: #1f2937;
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prob-example-card {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 16px;
  padding: 1.75rem;
  border-left: 6px solid #0284c7;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.15);
}

.prob-example-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0 0 1rem 0;
}

.prob-example-text {
  margin: 0;
  color: #0c4a6e;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Event Types Section */
.event-types-section {
  margin: 2.5rem 0;
}

.event-types-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.event-type-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.75rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
  border-left-color: #7c3aed;
}

.event-type-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.event-type-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
}

.event-type-desc {
  margin: 0 0 0.75rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.event-type-example {
  margin: 0;
  color: #5b21b6;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.75rem;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 8px;
}

/* Probability Rules Section */
.prob-rules-section {
  margin: 2.5rem 0;
}

.prob-rules-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 1.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.prob-rule-card {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border-left: 6px solid #ef4444;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prob-rule-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.15);
}

.rule-number {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 1rem;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
  vertical-align: middle;
}

.rule-text {
  margin: 0;
  color: #7f1d1d;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 500;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  display: inline;
}

/* Probability Notation Section */
.prob-notation-section {
  margin: 2.5rem 0 0 0;
}

.prob-notation-box {
  background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
  border-radius: 16px;
  padding: 2rem;
  border-left: 6px solid #667eea;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.prob-notation-text {
  margin: 0.75rem 0;
  font-size: 0.95rem;
  color: #4338ca;
  line-height: 1.7;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prob-notation-text:first-child {
  margin-top: 0;
}

/* Responsive Design for Video 12 */
@media (max-width: 768px) {
  .prob-concept-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .prob-concept-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .prob-concept-title {
    font-size: 1.1rem;
  }

  .prob-concept-desc,
  .prob-concept-example {
    font-size: 0.9rem;
  }

  .prob-formula-card {
    padding: 1.5rem;
  }

  .formula-box {
    padding: 1.25rem;
  }

  .formula-text {
    font-size: 1rem;
  }

  .prob-example-card {
    padding: 1.5rem;
  }

  .prob-example-text {
    font-size: 0.9rem;
  }

  .event-type-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .event-type-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .event-type-name {
    font-size: 1rem;
  }

  .prob-rule-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
  }

  .rule-text {
    font-size: 0.95rem;
  }

  .prob-notation-box {
    padding: 1.5rem;
  }

  .prob-notation-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .prob-concept-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
  }

  .prob-concept-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  .prob-concept-title {
    font-size: 1rem;
  }

  .prob-concept-desc,
  .prob-concept-example {
    font-size: 0.85rem;
  }

  .prob-formula-card {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .formula-box {
    padding: 1rem;
  }

  .formula-text {
    font-size: 0.95rem;
  }

  .prob-example-card {
    padding: 1.25rem;
  }

  .prob-example-text {
    font-size: 0.85rem;
  }

  .event-type-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
  }

  .event-type-number {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .event-type-name {
    font-size: 0.95rem;
  }

  .event-type-desc,
  .event-type-example {
    font-size: 0.85rem;
  }

  .prob-rule-card {
    padding: 1rem;
    margin-bottom: 0.85rem;
    border-left-width: 4px;
  }

  .rule-number {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    margin-right: 0.75rem;
  }

  .rule-text {
    font-size: 0.9rem;
  }

  .prob-notation-box {
    padding: 1.25rem;
  }

  .prob-notation-text {
    margin: 0.5rem 0;
    font-size: 0.85rem;
  }
}

/* ========================================
   Video 12: Counting Techniques
   ======================================== */

.counting-rules-section {
  margin: 2.5rem 0;
}

.counting-rule-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 2px solid #e2e8f0;
  border-left: 6px solid #10b981;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.counting-rule-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.2);
  border-left-color: #059669;
}

.counting-rule-number {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.counting-rule-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0.5rem 0 0.75rem 0;
}

.counting-rule-desc {
  margin: 0 0 1.5rem 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
}

.counting-rule-example {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid #0284c7;
}

.example-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0 0 0.75rem 0;
}

.example-text {
  margin: 0 0 1rem 0;
  color: #0c4a6e;
  font-size: 0.95rem;
  line-height: 1.7;
}

.formula-highlight {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.25rem;
  border: 2px solid #0284c7;
  margin: 1rem 0 0 0;
}

.formula-content {
  margin: 0;
  font-size: 1.1rem;
  color: #0c4a6e;
  font-weight: 700;
  text-align: center;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  line-height: 1.8;
}

/* Responsive Design for Counting Techniques */
@media (max-width: 768px) {
  .counting-rule-card {
    padding: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .counting-rule-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .counting-rule-title {
    font-size: 1.15rem;
  }

  .counting-rule-desc {
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
  }

  .counting-rule-example {
    padding: 1.25rem;
  }

  .example-subtitle {
    font-size: 0.95rem;
  }

  .example-text {
    font-size: 0.9rem;
  }

  .formula-highlight {
    padding: 1rem;
  }

  .formula-content {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .counting-rule-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-left-width: 4px;
  }

  .counting-rule-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  .counting-rule-title {
    font-size: 1.05rem;
    margin: 0.35rem 0 0.5rem 0;
  }

  .counting-rule-desc {
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
  }

  .counting-rule-example {
    padding: 1rem;
    border-left-width: 3px;
  }

  .example-subtitle {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
  }

  .example-text {
    font-size: 0.85rem;
    margin: 0 0 0.85rem 0;
  }

  .formula-highlight {
    padding: 0.9rem;
    border-width: 2px;
  }

  .formula-content {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}





  .null-setting-title {
    font-size: 1.1rem;
  }

  .null-behavior-subsection {
    padding: 1.25rem;
  }

  .null-behavior-title {
    font-size: 1rem;
  }

  .temp-table-type-card {
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
  }

  .temp-table-type-number {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .temp-table-type-name {
    font-size: 1.05rem;
  }

  .temp-table-types-title {
    font-size: 1.1rem;
  }

  .identity-desc-card {
    padding: 1.5rem;
  }

  .identity-desc-text {
    font-size: 0.95rem;
  }

  .identity-note-box {
    padding: 1.5rem;
  }

  .identity-note-icon {
    font-size: 1.75rem;
  }

  .identity-note-title {
    font-size: 1rem;
  }

  .identity-note-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .null-setting-card {
    padding: 1.25rem;
  }

  .null-setting-number {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }

  .null-setting-title {
    font-size: 1rem;
  }

  .null-behavior-subsection {
    padding: 1rem;
    margin: 1rem 0;
  }

  .null-behavior-list li {
    font-size: 0.9rem;
  }

  .temp-table-type-card {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  .temp-table-type-number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .temp-table-type-name {
    font-size: 1rem;
  }

  .temp-table-type-desc {
    font-size: 0.9rem;
  }

  .temp-table-types-title {
    font-size: 1rem;
  }

  .identity-desc-card {
    padding: 1rem;
  }

  .identity-desc-text {
    font-size: 0.9rem;
  }

  .identity-example-title {
    font-size: 1.05rem;
  }

  .identity-note-box {
    padding: 1rem;
    gap: 0.75rem;
    flex-direction: column;
  }

  .identity-note-icon {
    font-size: 1.5rem;
  }

  .identity-note-title {
    font-size: 0.95rem;
  }

  .identity-note-text {
    font-size: 0.85rem;
  }
}


/* Responsive Design for TOP and INTO Clauses */
@media (max-width: 768px) {
  .clause-intro-card {
    padding: 1.75rem;
  }

  .clause-intro-title {
    font-size: 1.05rem;
  }

  .clause-intro-text {
    font-size: 0.95rem;
    padding: 0.75rem;
  }

  .clause-examples-title {
    font-size: 1.1rem;
  }

  .into-features-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }

  .into-feature-card {
    padding: 1.5rem;
  }

  .into-feature-number {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .into-feature-name {
    font-size: 1rem;
  }

  .into-feature-desc {
    font-size: 0.9rem;
  }

  .into-note-box {
    padding: 1.5rem;
    gap: 1rem;
    flex-direction: column;
  }

  .into-note-icon {
    font-size: 1.75rem;
  }

  .into-note-title {
    font-size: 1rem;
  }

  .into-note-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .clause-intro-card {
    padding: 1.25rem;
    border-left-width: 4px;
  }

  .clause-intro-title {
    font-size: 0.95rem;
  }

  .clause-intro-text {
    font-size: 0.85rem;
    padding: 0.65rem;
  }

  .clause-examples-title {
    font-size: 1rem;
  }

  .into-features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .into-feature-card {
    padding: 1.25rem;
  }

  .into-feature-number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }

  .into-feature-name {
    font-size: 0.95rem;
  }

  .into-feature-desc {
    font-size: 0.85rem;
  }

  .into-note-box {
    padding: 1rem;
    gap: 0.75rem;
  }

  .into-note-icon {
    font-size: 1.5rem;
  }

  .into-note-title {
    font-size: 0.95rem;
  }

  .into-note-text {
    font-size: 0.85rem;
  }
}


/* Smooth Scrollbar for Code Blocks */
.awk-code-block::-webkit-scrollbar {
  height: 8px;
}

.awk-code-block::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.awk-code-block::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.awk-code-block::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}