/* ==========================================
   ULTIMATE FIX - REMOVE WHITE BACKGROUNDS
   Maximum specificity overrides
   ========================================== */

/* Ultra-specific targeting for section titles */
section.categories-section .container .row .col-12.text-center.mb-5,
section.categories-section .container .row .col-12.text-center.mb-5 h2,
section.categories-section .container .row .col-12.text-center.mb-5 h2.section-title,
section.facility-section .container .row .col-lg-6 h2,
section.facility-section .container .row .col-lg-6 h2.section-title,
section.about-section .container .row .col-lg-6 h2,
section.about-section .container .row .col-lg-6 h2.section-title,
section.distributor-section .container .row .col-lg-8 h2,
section.distributor-section .container .row .col-lg-8 h2.section-title {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Target the exact div structure from index.php */
.categories-section .container .row .col-12.text-center.mb-5,
.facility-section .container .row .col-lg-6,
.about-section .container .row .col-lg-6,
.distributor-section .container .row .col-lg-8 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Remove backgrounds from ALL section title elements */
h2.section-title.animate-fade-in-up,
h2.section-title.text-white,
h2.section-title {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove backgrounds from paragraphs after section titles */
p.section-subtitle,
p.section-subtitle.animate-fade-in-up,
p.facility-text,
p.about-text,
p.distributor-text {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Override Bootstrap's text-center class */
.text-center {
    background: transparent !important;
}

/* Override Bootstrap's mb-5 class */
.mb-5 {
    background: transparent !important;
}

/* Override Bootstrap's col classes */
.col-12,
.col-lg-6,
.col-lg-8,
[class*="col-"] {
    background: transparent !important;
}

/* Override animation classes */
.animate-fade-in-up,
.animate-fade-in-down,
.animate-fade-in-left,
.animate-fade-in-right {
    background: transparent !important;
}

/* Remove pseudo-element backgrounds */
.section-title::before,
.section-title::after,
h2::before,
h2::after,
h1::before,
h1::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Nuclear option - remove ALL backgrounds from section children */
section * {
    background-color: transparent !important;
}

/* But keep specific section backgrounds */
section.categories-section,
section.facility-section,
section.about-section,
section.distributor-section,
section.bg-light,
section.bg-dark,
section.bg-primary {
    background-color: revert !important;
}

/* Keep card backgrounds */
.category-card,
.product-card,
.card,
.feature-card,
.stat-card,
.value-card,
.contact-card {
    background: var(--bg-white) !important;
    background-color: #ffffff !important;
}

/* Keep footer background - Original colors */
.footer,
footer.footer,
footer.bg-dark {
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%) !important;
}

/* Keep navbar background */
.navbar,
nav.navbar {
    background: linear-gradient(135deg, rgba(10, 36, 99, 0.95) 0%, rgba(30, 58, 138, 0.9) 100%) !important;
}

/* Keep button backgrounds */
.btn {
    background: revert !important;
    background-color: revert !important;
}

/* Keep form element backgrounds */
.form-control,
.form-select,
input,
textarea,
select {
    background-color: #ffffff !important;
}