/* Centralized Color System - All colors controlled from here */
:root {
    /* Primary Brand Colors */
    --color-primary: #2563eb;        /* Blue-600 */
    --color-primary-hover: #1d4ed8;  /* Blue-700 */
    --color-primary-light: #dbeafe;  /* Blue-100 */
    
    /* Secondary Colors */
    --color-secondary: #73BD6F;      /* Green-600 */
    --color-secondary-hover: #73BD6F; /* Green-700 */
    --color-secondary-light: #d1fae5; /* Green-100 */
    
    /* Accent Colors */
    --color-accent: #dc2626;         /* Red-600 */
    --color-accent-hover: #b91c1c;   /* Red-700 */
    --color-accent-light: #fee2e2;   /* Red-100 */
    
    /* Logo Colors */
    --color-logo-1: #B1080F;         /* Logo color 1 */
    --color-logo-2: #73BD6F;         /* Logo color 2 */
    --color-logo-3: #F7D739;         /* Logo color 3 */
    
    /* Background Colors */
    --color-bg-primary: #ffffff;     /* White */
    --color-bg-secondary: #f9fafb;   /* Gray-50 */
    --color-bg-tertiary: #f3f4f6;    /* Gray-100 */
    
    /* Text Colors */
    --color-text-primary: #111827;   /* Gray-900 */
    --color-text-secondary: #374151; /* Gray-700 */
    --color-text-tertiary: #6b7280;  /* Gray-500 */
    --color-text-light: #9ca3af;     /* Gray-400 */
    
    /* Border Colors */
    --color-border: #e5e7eb;         /* Gray-200 */
    --color-border-light: #f3f4f6;   /* Gray-100 */
    
    /* Special Colors */
    --color-warning: #f59e0b;        /* Amber-500 */
    --color-warning-light: #fef3c7;  /* Amber-100 */
    --color-success: #10b981;        /* Emerald-500 */
    --color-success-light: #d1fae5;  /* Emerald-100 */
    --color-info: #3b82f6;           /* Blue-500 */
    --color-info-light: #dbeafe;     /* Blue-100 */
    
    /* Banner Colors */
    --color-banner-primary: #059669; /* Custom red */
    --color-banner-gradient-start: #10b981; /* Pink-500 */
    --color-banner-gradient-end: #059669;   /* Pink-400 */
    
    /* Yellow Background Color */
    --color-yellow-bg: #F87316; /* Amber-400 */
    
    /* Pricing Section Colors */
    --color-pricing-bg: #f9fafb;           /* Gray-50 */
    --color-pricing-card: #ffffff;         /* White */
    --color-pricing-tab-active: #73BD6F;    /* Green-600 */
    --color-pricing-tab-active-hover: #73BD6F; /* Green-700 */
    --color-pricing-tab-inactive: #6b7280;  /* Gray-500 */
    --color-pricing-tab-inactive-hover: #f3f4f6; /* Gray-100 */
    --color-pricing-welcome-bg: linear-gradient(to right, #6CB668, #73BD6F); /* Green gradient */
    --color-pricing-price: #2563eb;        /* Blue-600 */
    --color-pricing-check: #73BD6F;         /* Green-500 */
    --color-pricing-button: #73BD6F;        /* Green-600 */
    --color-pricing-button-hover: #73BD6F;  /* Green-700 */
    
    /* Shadow Colors */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-lg: rgba(0, 0, 0, 0.15);
}

/* Custom font family configuration */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom utility classes that can't be easily replicated with Tailwind */
.flex-grow-1 {
    flex-grow: 1;
}

/* Color Utility Classes using CSS Custom Properties */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-hover:hover { background-color: var(--color-secondary-hover) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-accent-hover:hover { background-color: var(--color-accent-hover) !important; }

.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-light { color: var(--color-text-light) !important; }

.border-primary { border-color: var(--color-border) !important; }
.border-light { border-color: var(--color-border-light) !important; }

.bg-banner { background-color: var(--color-banner-primary) !important; }
.bg-gradient-banner { 
    background: linear-gradient(to right, var(--color-banner-gradient-start), var(--color-banner-gradient-end)) !important; 
}
.bg-yellow-custom { background-color: var(--color-yellow-bg) !important; }

/* Pricing Section Utility Classes */
.bg-pricing-section { background-color: var(--color-pricing-bg) !important; }
.bg-pricing-card { background-color: var(--color-pricing-card) !important; }
.bg-pricing-tab-active { background-color: var(--color-pricing-tab-active) !important; }
.bg-pricing-tab-active-hover:hover { background-color: var(--color-pricing-tab-active-hover) !important; }
.text-pricing-tab-inactive { color: var(--color-pricing-tab-inactive) !important; }
.bg-pricing-tab-inactive-hover:hover { background-color: var(--color-pricing-tab-inactive-hover) !important; }
.bg-pricing-welcome { background: var(--color-pricing-welcome-bg) !important; }
.text-pricing-price { color: var(--color-pricing-price) !important; }
.text-pricing-check { color: var(--color-pricing-check) !important; }
.bg-pricing-button { background-color: var(--color-pricing-button) !important; }
.bg-pricing-button-hover:hover { background-color: var(--color-pricing-button-hover) !important; }

/* Hover effects using custom properties */
.hover-primary:hover { color: var(--color-primary) !important; }
.hover-secondary:hover { color: var(--color-secondary) !important; }
.hover-accent:hover { color: var(--color-accent) !important; }

/* Login Button Design - Matching the Image */
.btn-login-custom {
    background-color: #B1080F !important;  /* Custom red background */
    color: white !important;             /* White text */
    padding: 8px 16px !important;         /* Same height as Ask button */
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-login-custom:hover {
    background-color: #9a070d !important;   /* Darker red background on hover */
    color: white !important;               /* White text on hover */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(177, 8, 15, 0.3) !important;
}

.btn-login-custom:hover i {
    color: white !important;                /* White icon on hover */
}

/* Custom SVG fill colors using CSS Custom Properties */
.fill-gray-50 {
    fill: var(--color-bg-secondary);
}

.fill-orange-500 {
    fill: var(--color-warning);
}

.fill-blue-600 {
    fill: var(--color-primary);
}

/* Logo Color Utilities */
.bg-logo-1 { background-color: var(--color-logo-1) !important; }
.bg-logo-2 { background-color: var(--color-logo-2) !important; }
.bg-logo-3 { background-color: var(--color-logo-3) !important; }

.text-logo-1 { color: var(--color-logo-1) !important; }
.text-logo-2 { color: var(--color-logo-2) !important; }
.text-logo-3 { color: var(--color-logo-3) !important; }

.fill-logo-1 { fill: var(--color-logo-1) !important; }
.fill-logo-2 { fill: var(--color-logo-2) !important; }
.fill-logo-3 { fill: var(--color-logo-3) !important; }

/* Custom responsive breakpoints for very large screens */
@media (min-width: 1536px) {
    .hidden\:2xl\:block {
        display: block !important;
    }
}

/* Ensure proper image display */
img {
    max-width: 100%;
    height: auto;
}

/* Custom hover effects for better UX */
.hover\:-translate-y-0\.5:hover {
    transform: translateY(-2px);
}

/* Ensure proper z-index stacking */
.z-10 {
    z-index: 10;
}

/* Custom after pseudo-element styles for navigation */
.after\:content-\[\'\'\]:after {
    content: '';
}

.after\:absolute:after {
    position: absolute;
}

.after\:bottom-\[-5px\]:after {
    bottom: -5px;
}

.after\:left-0:after {
    left: 0;
}

.after\:w-0:after {
    width: 0;
}

.after\:h-0\.5:after {
    height: 2px;
}

.after\:bg-blue-600:after {
    background-color: var(--color-primary);
}

.after\:transition-all:after {
    transition: all 0.3s ease;
}

.after\:duration-300:after {
    transition-duration: 300ms;
}

.hover\:after\:w-full:hover:after {
    width: 100%;
}

/* Custom spacing to match the design image exactly */
.banner-content-spacing {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.banner-badge-spacing {
    margin-bottom: 1rem !important;
}

.banner-title-spacing {
    margin-bottom: 1.5rem !important;
}

.banner-cta-spacing {
    margin-top: 0.5rem !important;
}

@media (min-width: 768px) {
    .banner-badge-spacing {
        margin-bottom: 1.25rem !important;
    }

    .banner-title-spacing {
        margin-bottom: 2rem !important;
    }

    .banner-cta-spacing {
        margin-top: 0.75rem !important;
    }
}

/* Mobile Video Slideshow Styles */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 270px; /* Increased from 192px (h-48) to 240px (h-60) */
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pulse animation for scroll-to-top button */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.pulse {
    animation: pulse 1.5s infinite;
}

/* Pulse animation for video play buttons */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.bg-white.text-red-500.pulse {
    animation: pulse-red 1.5s infinite;
}

/* Video Section - 3 videos per row on desktop */
@media (min-width: 1024px) {
    .video-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem; /* Gap between videos */
        flex-wrap: wrap;
    }
    
    .video-container > div {
        flex: 1 1 calc(33.333% - 1rem); /* 3 videos per row with gap */
        max-width: calc(33.333% - 1rem);
        margin-top: 0 !important; /* Override any top margin */
    }
}