/* ============================================
   BUSINESS AUTOMATION BI - OPTIMIZED STYLESHEET
   Author: Business Automation BI Team
   Description: Clean, optimized styles for landing page
   
   TABLE OF CONTENTS:
   1. Base Styles & Reset
   2. CSS Variables (Design System)
   3. Typography
   4. Layout Utilities
   5. Button Components
   6. Header Section
   7. Hero Section
   8. Trust Bar Section
   9. Results/Metrics Cards
   10. Comparison Section
   11. Services Section
   12. Testimonials Section
   13. Pricing Section
   14. Comparison Table
   15. Process Section
   16. Team Section
   17. FAQ Section
   18. CTA Section
   19. Contact Options (Contact Page)
   20. Blog/Downloads Section
   21. Footer Section
   22. Utility Classes
   22.5. Hover Effects
   23. Responsive Design
   24. Dashboard Showcase Carousel
   ============================================ */

/* ============================================
   1. BASE STYLES & RESET
   Normalize browser defaults for consistency
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   2. CSS VARIABLES (DESIGN SYSTEM)
   Centralized color palette and design tokens
   ============================================ */
:root {
    /* Primary Colors - Main brand identity */
    --primary-navy: #004080;
    --primary-blue: #1E90FF;
    
    /* Accent Colors - Highlights and status indicators */
    --accent-gold: #FFBF00;
    --green-success: #10B981;
    --red-urgent: #EF4444;
    
    /* Grayscale Palette - Backgrounds and text */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-600: #475569;
    --gray-900: #0F172A;
    --white: #FFFFFF;
}

/* ============================================
   3. TYPOGRAPHY
   Font family, sizes, and base text styles
   ============================================ */
body {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--gray-900);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Heading styles with responsive sizing */
h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
}

/* ============================================
   4. LAYOUT UTILITIES
   Container and section spacing
   ============================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px; /* Horizontal padding for mobile */
}

/* Standard section padding */
.section {
    padding: 96px 0;
}

/* Alternate section background for visual separation */
.section-alt {
    background: var(--gray-50);
}

/* Centered section headers with bottom spacing */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header h2 {
    margin-bottom: 16px;
}

/* ============================================
   5. BUTTON COMPONENTS
   Primary and secondary button styles
   ============================================ */
.btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

/* Primary button - Main call-to-action style */
.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(30, 144, 255, 0.4);
}

.btn-primary:hover {
    background: #1565C0;
    transform: translateY(-2px);
}

/* Force white text for all primary buttons */
.btn-primary,
.btn-primary * {
    color: white !important;
}

/* Secondary button - Outlined style for secondary actions */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 14px 28px; /* Adjusted for border width */
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* Large CTA button variant */
.cta-btn-large {
    font-size: 20px;
    padding: 20px 48px;
}

/* ============================================
   6. HEADER SECTION
   Fixed navigation bar with glassmorphism effect
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border-bottom: 1px solid var(--gray-200);
    z-index: 1000; /* Ensure header stays above other content */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* Logo - Brand identity with icon and text */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    text-decoration: none;
}

.logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation Links */
.nav {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav a {
    color: var(--gray-900);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--primary-blue);
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

/* Language Switcher - Flag buttons for language selection */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switch button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.lang-switch img {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    display: block;
}

/* Active language indicator */
.lang-switch button.active img {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.lang-switch button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ============================================
   7. HERO SECTION
   Main banner with gradient background
   ============================================ */
.hero {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #002855 100%);
    color: var(--white);
    padding: 140px 0 96px; /* Extra top padding to account for fixed header */
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hero-text h1 {
    margin-bottom: 24px;
}

.hero-text p {
    font-size: 20px;
    margin-bottom: 32px;
    opacity: 0.9;
}

/* Hero Call-to-Action Buttons */
.hero-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

/* Trust Indicators - Checkmarked benefits */
.trust-indicators {
    display: flex;
    gap: 32px;
    font-size: 14px;
    opacity: 0.8;
}

.trust-indicators span::before {
    content: '✓ ';
    color: var(--green-success);
}

/* Hero Video Container - Responsive iframe wrapper */
.hero-image {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* ============================================
   8. TRUST BAR SECTION
   Client logos and key metrics display
   ============================================ */
.trust-bar {
    padding: 64px 0;
    background: var(--gray-50);
    text-align: center;
}

.trust-bar h3 {
    margin-bottom: 48px;
    color: var(--gray-600);
}

/* Client Logos Grid - Centered flex layout */
.client-logos {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    align-items: center;
}

.client-logo {
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.05);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%); /* Grayscale by default */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Color on hover */
.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================
   9. RESULTS/METRICS CARDS
   Reusable metric display cards
   ============================================ */
.results-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 64px 0;
}

.result-card {
    text-align: center;
    padding: 32px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.result-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.result-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.result-label {
    color: var(--gray-600);
    font-size: 16px;
}

/* Results section wrapper (index.html only) */
.results {
    padding: 96px 0;
    background: var(--white);
}

/* ============================================
   10. COMPARISON SECTION
   Before/After comparison cards
   ============================================ */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.comparison-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 48px;
    transition: all 0.3s ease;
}

/* Color-coded borders for before/after */
.comparison-card.before {
    border-color: var(--red-urgent);
}

.comparison-card.after {
    border-color: var(--green-success);
}

.comparison-card h3 {
    margin-bottom: 24px;
}

.comparison-card ul {
    list-style: none;
    margin-bottom: 24px;
}

.comparison-card li {
    padding: 8px 0 8px 24px;
    position: relative;
}

/* Icons for before/after states */
.comparison-card.before li::before {
    content: '❌';
    position: absolute;
    left: 0;
}

.comparison-card.after li::before {
    content: '✅';
    position: absolute;
    left: 0;
}

/* Visual container for screenshot */
.comparison-visual {
    background: var(--gray-100);
    height: 200px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

.comparison-visual {
  background: var(--gray-100);
  height: 200px;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.comparison-visual img {
  height: 100%;
  width: auto;
  display: block;
}

.comparison-visual:hover img {
    transform: scale(1.02);
}

/* Quote styling */
.comparison-quote {
    font-style: italic;
    color: var(--gray-600);
    border-left: 4px solid var(--primary-blue);
    padding-left: 24px;
}

/* ============================================
   11. SERVICES SECTION
   Service cards grid layout
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.service-card {
    background: var(--white);
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.service-card h3 {
    margin-bottom: 16px;
}

.service-card ul {
    list-style: none;
    margin: 24px 0;
}

.service-card li {
    padding: 8px 0 8px 24px;
    position: relative;
}

.service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
}

.service-card a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
}

.service-card a:hover {
    text-decoration: underline;
}

/* ============================================
   12. TESTIMONIALS SECTION
   Client testimonial cards
   ============================================ */
.testimonials {
    padding: 64px 0;
    background: var(--gray-50);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.testimonial-card {
    background: var(--white);
    border-left: 4px solid #e0e0e0;
    /* border-left: 4px solid var(--primary-blue);*/
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Avatar placeholder */
.testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* Prevent shrinking */
}

.testimonial-info h4 {
    margin-bottom: 4px;
}

.testimonial-info p {
    font-size: 14px;
    color: var(--gray-600);
}

.testimonial-title {
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary-navy);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.testimonial-metrics {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    font-size: 14px;
    font-weight: 600;
    color: var(--green-success);
}

/* ============================================
   13. PRICING SECTION
   Pricing tiers with feature lists
   ============================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 48px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Popular pricing card - highlighted and scaled */
.pricing-card.popular {
    border-color: var(--accent-gold);
    transform: scale(1.05);
}

/* Popular badge */
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: #002855;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.pricing-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 16px 0 24px;
    line-height: 1.2;
}

.pricing-features {
    list-style: none;
    margin: 24px 0;
    flex-grow: 1; /* Push button to bottom */
}

.pricing-features li {
    padding: 8px 0 8px 24px;
    position: relative;
}

.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
}

.pricing-best-for {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    font-size: 13px;
    color: var(--gray-600);
    text-align: center;
}

.pricing-note {
    text-align: center;
    margin-top: 48px;
    padding: 32px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 4px solid var(--primary-blue);
}

/* ============================================
   14. COMPARISON TABLE
   Feature comparison table
   ============================================ */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.compare-table th,
.compare-table td {
    padding: 24px 32px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.compare-table th {
    background: var(--primary-navy);
    color: var(--white);
    font-weight: 600;
}

/* Highlight last column (Business Automation BI) */
.compare-table th:last-child {
    background: var(--primary-blue);
}

.compare-table td:first-child {
    font-weight: 600;
}

/* Hover effect on table rows */
.compare-table tbody tr {
    transition: all 0.3s ease;
}

.compare-table tbody tr:hover {
    background: var(--gray-50);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Highlight your column on row hover */
.compare-table tbody tr:hover td:last-child {
    background: rgba(30, 144, 255, 0.08);
    color: var(--primary-blue);
    font-weight: 600;
}

/* ============================================
   15. PROCESS SECTION
   7-step methodology with accordion
   ============================================ */
.process {
    padding: 96px 0;
    background: var(--gray-50);
}

/* Process Timeline - Visual step indicators */
.process-timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    max-width: 1100px;
    margin: 48px auto 64px;
    flex-wrap: wrap;
}

.process-step-card {
    text-align: center;
    padding: 24px;
    background: var(--white);
    border-radius: 12px;
    flex: 0 0 130px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.process-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.process-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-blue);
}

/* Process Accordion - Detailed step descriptions */
.process-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.process-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.process-card-header {
    background: var(--white);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.process-card-header:hover {
    background: var(--gray-50);
}

.process-card-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: var(--gray-900);
}

/* Accordion content - hidden by default */
.process-card-content {
    padding: 8px 24px 24px;
    display: none;
}

.process-card.active .process-card-content {
    display: block;
}

.process-card.active .faq-icon {
    transform: rotate(180deg);
}

/* Accordion icon */
.faq-icon {
    transition: transform 0.3s ease;
    color: var(--gray-600);
    font-size: 14px;
}

.process-card-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-600);
}

/* ============================================
   16. TEAM SECTION
   Team member cards
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.team-member {
    text-align: center;
    padding: 32px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.team-photo {
    font-size: 48px;
    margin-bottom: 16px;
}

.team-role {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.team-member p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-600);
}

/* ============================================
   17. FAQ SECTION
   Accordion-style FAQ list
   ============================================ */
.faq {
    padding: 96px 0;
}

.faq-list {
    max-width: 800px;
    margin: 48px auto 0;
}

.faq-item {
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: var(--gray-50);
}

/* FAQ answer - hidden by default */
.faq-answer {
    padding: 8px 24px 24px;
    color: var(--gray-600);
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* ============================================
   18. CTA SECTION
   Call-to-action banner with gradient
   ============================================ */
.cta-final {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #002855 100%);
    color: var(--white);
    padding: 96px 0;
    text-align: center;
}

.cta-final h2 {
    margin-bottom: 24px;
}

.cta-final p {
    font-size: 20px;
    margin-bottom: 48px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.cta-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 14px;
    flex-wrap: wrap;
}

.cta-trust span::before {
    content: '✓ ';
    color: var(--green-success);
}

/* ============================================
   19. CONTACT OPTIONS (CONTACT PAGE)
   Contact method cards grid
   ============================================ */
.contact-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 96px;
}

.contact-option {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.contact-option h3 {
    margin-bottom: 16px;
}

.contact-option p {
    color: var(--gray-600);
    margin-bottom: 24px;
}

/* ============================================
   20. BLOG/DOWNLOADS SECTION
   Posts grid and filtering system
   ============================================ */
.blog-layout {
    padding: 64px 0;
}

/* Dual Filter System Container */
.filters-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
}

.filter-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    text-align: center;
}

.filter-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Quarterly Filter Buttons */
.filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-btn {
    padding: 12px 32px;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-900);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: var(--white);
}

/* Posts Grid - 2 columns */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Post Card */
.post-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* YouTube Video Embed - Responsive 16:9 wrapper */
.post-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: var(--gray-200);
}

.post-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Post Content */
.post-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Download Button Placeholder - Centers the button */
.download-button-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto; /* Push button to bottom of card */
    padding-top: 16px;
}

.post-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--gray-600);
    flex-wrap: wrap;
}

/* Category Badge */
.post-category {
    display: inline-block;
    color: var(--white);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.post-category.power-bi {
    background: #F2C811; /* Power BI Yellow */
    color: #1F1F1F;
}

.post-category.python {
    background: var(--green-success);
}

.post-category.sql {
    background: #336791; /* SQL Database Blue */
    color: var(--white);
}

.post-category.data-modeling {
    background: #8B5CF6; /* Data Modeling Purple */
    color: var(--white);
}

.post-category.data-modeling {
    background: #8B5CF6; /* Data Modeling Purple */
    color: var(--white);
}

.post-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--gray-900);
    line-height: 1.3;
}

.post-excerpt {
    color: var(--gray-600);
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 15px;
    flex-grow: 1;
}

.post-features {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 0;
}

.post-features li {
    padding: 6px 0;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.5;
}

.post-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.post-link {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    background: var(--primary-blue);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.post-link:hover {
    background: #1565C0;
    transform: translateY(-2px);
}

/* ============================================
   21. FOOTER SECTION
   Footer with social links and legal info
   ============================================ */
.footer {
    background: var(--primary-navy);
    color: var(--white);
    padding: 48px 0 24px;
    text-align: center;
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.footer h4 {
    margin-bottom: 16px;
}

.footer p {
    opacity: 0.8;
    margin-bottom: 24px;
}

/* Social Media Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    margin-top: 32px;
    font-size: 14px;
    opacity: 0.7;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ============================================
   22. UTILITY CLASSES
   Helper classes for common patterns
   ============================================ */
.text-center {
    text-align: center;
}

.mt-xl {
    margin-top: 48px;
}

.mb-xl {
    margin-bottom: 48px;
}

/* Reduce space between contact and footer */
#audit {
    padding-bottom: 48px;
}

/* ============================================
   22.5. HOVER EFFECTS
   Apply lift effect to all cards throughout the site
   ============================================ */

/* Result/Metrics cards hover effect */
.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Comparison cards hover effect */
.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Testimonial cards hover effect */
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Pricing cards hover effect */
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Process step cards hover effect */
.process-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Team member cards hover effect */
.team-member:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================
   23. RESPONSIVE DESIGN
   Media queries for tablet and mobile
   ============================================ */

/* Tablet and small desktop (1024px and below) */
@media (max-width: 1024px) {
    /* Scale down typography */
    h1 {
        font-size: 40px;
    }
    
    h2 {
        font-size: 32px;
    }
    
    /* Convert multi-column grids to single column */
    .hero-content,
    .comparison-grid,
    .services-grid,
    .testimonials-grid,
    .team-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    /* Remove popular card scaling on smaller screens */
    .pricing-card.popular {
        transform: scale(1);
    }
    
    /* Adjust metrics grid to 2 columns */
    .results-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact options to 2 columns */
    .contact-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Posts grid to single column */
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Dual filter system responsive */
    .filters-container {
        gap: 24px;
    }
    
    .filter-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .filter-buttons {
        gap: 8px;
    }
    
    .filter-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Reduce padding on comparison cards for tablet */
    .comparison-card {
        padding: 32px; /* Reduced from 48px */
    }
    
    .comparison-grid {
        gap: 32px; /* Reduced from 48px */
    }
}

@media (max-width: 768px) {
    /* Hide desktop navigation - mobile menu should be implemented */
    .nav-links {
        display: none;
    }
    
    /* KEEP language switcher visible on mobile */
    .lang-switch {
        display: flex !important;
        gap: 6px;
    }
    
    .lang-switch img {
        width: 24px;
        height: 17px;
    }
    
    /* Make header more compact */
    .header-content {
        gap: 12px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .logo-icon img {
        width: 32px;
        height: 32px;
    }
    
    /* Further scale down typography */
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 28px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    /* Adjust hero padding for mobile */
    .hero {
        padding: 100px 0 64px;
    }
    
    /* Stack CTA buttons vertically */
    .hero-ctas {
        flex-direction: column;
    }
    
    .hero-ctas .btn {
        width: 100%;
    }
    
    /* Stack trust indicators */
    .trust-indicators {
        flex-direction: column;
        gap: 16px;
    }

    /* Reduce client logos size on mobile (50% of desktop) */
    .client-logos {
        gap: 24px;
    }
    
    .client-logo {
        width: 75px;  /* 50% de 150px */
        height: 30px; /* 50% de 60px */
    }

    
    /* Single column for all metric grids */
    .results-metrics {
        grid-template-columns: 1fr;
    }
    
    /* Single column for contact options */
    .contact-options {
        grid-template-columns: 1fr;
    }
    
    /* Adjust process timeline for mobile */
    .process-timeline {
        gap: 12px;
    }
    
    .process-step-card {
        flex: 0 0 100px;
        padding: 16px;
    }
    
 .process-icon {
        font-size: 32px;
    }
    
    /* Fix comparison cards overflow on mobile */
    .comparison-card {
        padding: 24px 16px; /* Reduced padding for mobile */
    }
    
    .comparison-grid {
        gap: 24px; /* Reduced gap between cards */
    }
    
    .comparison-visual {
        height: 150px; /* Smaller height on mobile */
    }
    
    .comparison-visual img {
        width: 100%; /* Make images responsive */
        height: auto;
        object-fit: cover;
    }
    
    .comparison-quote {
        font-size: 14px;
        padding-left: 16px;
    }
}
/* ============================================
   TRAINING PAGE - CUSTOM STYLES
   ============================================ */

/* Module bullet points styling - more spacing and green checkmarks */
.faq-answer ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.faq-answer ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.faq-answer ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
    font-size: 18px;
}

/* ============================================
   MOBILE FIXES - Language Switcher & Comparison Table
   ============================================ */

/* Keep language switcher visible on mobile */
@media (max-width: 768px) {
    .lang-switch {
        display: flex !important;
        margin-left: auto;
        gap: 6px;
    }
    
    .lang-switch img {
        width: 24px;
        height: 17px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .logo-icon img {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   TABLE RESPONSIVE - Scrollable horizontalement
   ============================================ */

.compare-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .compare-table {
        min-width: 800px;
        font-size: 14px;
    }
    
    .compare-table th,
    .compare-table td {
        padding: 16px;
        font-size: 14px;
    }
    
    /* Indicator that table is scrollable */
    .compare-table-wrapper::before {
        content: '👉 Swipe to see the full table.';
        display: block;
        text-align: center;
        padding: 8px;
        background: #1E90FF;
        color: white;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px 8px 0 0;
    }
    
    /* Custom scrollbar */
    .compare-table-wrapper::-webkit-scrollbar {
        height: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-thumb {
        background: #1E90FF;
        border-radius: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #003366;
    }
}

@media (max-width: 768px) {
    .compare-table {
        min-width: 650px;
        font-size: 12px;
    }
    
    .compare-table th,
    .compare-table td {
        padding: 12px 8px;
        font-size: 12px;
    }
}

/* ============================================
   MOBILE MENU HAMBURGER
   ============================================ */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--primary-navy);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Show hamburger on mobile, hide regular nav */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 70px);
        background: white;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .nav-links.active {
        right: 0;
    }
    
    .nav-links a {
        padding: 12px 16px;
        border-radius: 8px;
        transition: background 0.3s ease;
    }
    
    .nav-links a:hover {
        background: var(--gray-100);
    }
    
    .nav-links .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Hamburger animation when active */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* Overlay when menu is open */
@media (max-width: 768px) {
    .nav-overlay {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    .nav-overlay.active {
        display: block;
    }
}

.section-header + .compare-table-wrapper {
    margin-top: -24px;
}

/* ============================================
   DASHBOARD SHOWCASE CAROUSEL SECTION
   Interactive Power BI dashboard carousel
   ============================================ */

.dashboard-showcase {
    background: var(--gray-50);
}

.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 60px;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    background: white;
}

.carousel-slide {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.carousel-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carousel-content {
    padding: 30px;
}

.carousel-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    text-align: center;
}

.carousel-content p {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 25px;
}

/* Iframe Container - Responsive */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 62.25%; /* 16:10 aspect ratio for Power BI dashboards */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    font-size: 40px;
    font-weight: 300;
    color: #0066cc;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.carousel-nav:hover {
    background: #0066cc;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

/* Pagination Dots */
.carousel-dots {
    text-align: center;
    padding: 25px 0;
    background: white;
    border-radius: 0 0 16px 16px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #d0d0d0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background: #999;
    transform: scale(1.2);
}

.dot.active {
    background: #0066cc;
    width: 30px;
    border-radius: 6px;
}

/* Responsive Design for Carousel */
@media (max-width: 1024px) {
    .carousel-container {
        padding: 0 50px;
    }
    
    .carousel-content h3 {
        font-size: 24px;
    }
    
    .carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 35px;
    }
}

@media (max-width: 768px) {
    .dashboard-showcase {
        padding: 60px 0;
    }
    
    .carousel-container {
        padding: 0 40px;
    }
    
    .carousel-content {
        padding: 20px;
    }
    
    .carousel-content h3 {
        font-size: 20px;
    }
    
    .carousel-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
    
    .dot.active {
        width: 25px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 30px;
    }
    
    .carousel-content {
        padding: 15px;
    }
    
    .carousel-content h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .carousel-content p {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 25px;
    }
    
    .carousel-dots {
        padding: 20px 0;
    }
    
    .dot {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
    
    .dot.active {
        width: 20px;
    }
}