/* Global component overrides for EasyNaukri4U
   This file provides consistent styling across all components */

/* Force white backgrounds */
#hero-component,
#about-component,
#categories-component,
#hero-component section,
#about-component section,
#categories-component section {
    background-color: white !important;
    background-image: none !important;
}

/* Blue color overrides for consistent branding */
.text-primary, 
.text-blue-600 { 
    color: #3B82F6 !important; 
}

.bg-primary,
.bg-blue-600 { 
    background-color: #3B82F6 !important; 
}

.hover\:bg-primary-dark:hover,
.hover\:bg-blue-700:hover,
.hover\:text-blue-700:hover { 
    background-color: #2563EB !important; 
    color: white !important;
}

/* Global icon visibility fixes */
.bg-primary svg, 
[class*="bg-primary"] svg,
.bg-blue-600 svg,
[class*="bg-blue"] svg,
.text-white svg {
    color: white !important;
    fill: none !important;
    stroke: white !important;
}

/* Icon containers with various class patterns */
[class*="bg-primary"],
.bg-blue-600,
[class*="rounded"] .bg-primary,
[class*="rounded"] .bg-blue-600 {
    background-color: #3B82F6 !important;
}

/* For blue icons on white/light backgrounds */
.text-primary svg,
.text-blue-600 svg,
.bg-blue-50 svg,
.bg-primary-50 svg {
    color: #3B82F6 !important;
    stroke: #3B82F6 !important;
}

/* Specific fixes for components with unique styling */
.about-icon-container {
    width: 80px;
    height: 80px;
    background-color: #3B82F6 !important;
    border-radius: 12px;
    margin: 0 auto;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.about-icon {
    width: 40px;
    height: 40px;
    color: white !important;
    fill: none !important;
    stroke: white !important;
}

/* Component-specific background fixes */
#why-choose-section,
#featured-jobs-section {
    background-color: #f9fafb !important;
}

/* CTA section background */
#cta-component section {
    background: linear-gradient(to right, #3B82F6, #3B82F6) !important;
}

/* Ensure blue elements in white sections stand out */
.text-primary,
.text-blue-600 {
    color: #3B82F6 !important;
}