/* Hero Background Fix - overrides all other styles */

/* Target the hero and about containers and ensure they have a white background */
#hero-component,
#hero-container,
#hero-component section,
#hero-component div.relative,
#about-component,
#about-component section,
#categories-component,
#categories-component section {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* Target any backgrounds that might be being applied via gradients */
.bg-gradient-to-br,
.from-blue-50,
.via-white,
.to-purple-50 {
    background: #FFFFFF !important;
    background-image: none !important;
}

/* Make sure blue colors display correctly */
.text-primary { color: #3B82F6 !important; }
.bg-primary { background-color: #3B82F6 !important; }
.border-primary { border-color: #3B82F6 !important; }
.text-blue-500, .text-blue-600, .text-blue-700 { color: #3B82F6 !important; }
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: #3B82F6 !important; }

/* Fix icon visibility in about and categories sections */
.bg-primary svg {
    color: white !important;
    fill: none !important;
    stroke: white !important;
}

/* Ensure icon containers are properly colored */
div.bg-primary {
    background-color: #3B82F6 !important;
}

/* Ensure the CTA button has a blue background */
#hero-container button {
    background-color: #3B82F6 !important;
    color: white !important;
}

/* Fix hover states for buttons */
#hero-container button:hover {
    background-color: #2563EB !important;
}