/*------------------------------------------------------------------
DSOUZA Industrial Services - Brand Colors Override
-------------------------------------------------------------------
Primary Brand Color (Maroon): #8B2F3C
Secondary Accent Color (Gold): #C9A14A
Primary Text Color: #111111
Secondary Text Color: #4A4A4A
Background: #FFFFFF
-------------------------------------------------------------------*/

/* CSS Custom Properties for Brand Colors */
:root {
    --brand-maroon: #8B2F3C;
    --brand-maroon-dark: #6E2530;
    --brand-maroon-light: #A63D4C;
    --brand-gold: #C9A14A;
    --brand-gold-dark: #B08A3A;
    --brand-gold-light: #D4B25C;
    --brand-text-primary: #111111;
    --brand-text-secondary: #4A4A4A;
    --brand-bg: #FFFFFF;
}

/* ==========================================================================
   PRIMARY BUTTONS & CTA - Maroon
   ========================================================================== */

/* Theme Button S2 - Primary CTA Button */
.theme-btn-s2 {
    background-color: var(--brand-maroon) !important;
    color: #fff !important;
}

.theme-btn-s2::after {
    background-color: var(--brand-maroon-dark) !important;
}

.theme-btn-s2:hover,
.theme-btn-s2:focus,
.theme-btn-s2:active {
    background-color: var(--brand-maroon-dark) !important;
    color: #fff !important;
}

/* Theme Button S3 - Secondary outline button */
.theme-btn-s3 {
    border-color: var(--brand-maroon) !important;
    color: var(--brand-maroon) !important;
}

.theme-btn-s3:hover,
.theme-btn-s3:focus {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
    color: #fff !important;
}

/* ==========================================================================
   NAVIGATION - Maroon Active States
   ========================================================================== */

/* Mobile Menu Toggle - Black lines for visibility */
.navbar-toggler span,
.icon-bar,
.open-btn .icon-bar {
    background-color: #111111 !important;
}

/* ==========================================================================
   FAQ SECTION - Fix text visibility on blue background
   ========================================================================== */

.wpo-faq-section {
    background-color: #FFFFFF !important;
}

.wpo-faq-section h2,
.wpo-faq-section h3,
.wpo-faq-section p,
.wpo-faq-section span,
.wpo-faq-box h2,
.wpo-faq-box p,
.accordion-button,
.accordion-body p {
    color: var(--brand-text-primary) !important;
}

.wpo-faq-section .wpo-section-title-s2 span {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   SERVICE PAGE - Why Choose Us section padding
   ========================================================================== */

.wpo-feature-section.section-padding.pt-0,
.wpo-feature-section.pt-0 {
    padding-top: 80px !important;
}

/* Active Nav Link */
.wpo-header-style-1 .navigation>li.current-menu-item>a,
.wpo-header-style-1 .navigation>li:hover>a,
.wpo-header-style-2 .navigation>li.current-menu-item>a,
.wpo-header-style-2 .navigation>li:hover>a,
.navigation>li.current-menu-item>a,
.navigation>li:hover>a {
    color: var(--brand-maroon) !important;
}

/* Dropdown Menu Hover */
.navigation li ul li a:hover,
.navigation li ul li.current>a {
    color: var(--brand-maroon) !important;
}

/* ==========================================================================
   SECTION TITLES & HEADINGS - Gold Accents
   ========================================================================== */

/* Section title accent color */
.wpo-section-title span,
.wpo-section-title-s2 span {
    color: var(--brand-gold) !important;
}

/* Section title separator/line */
.wpo-section-title span::before,
.wpo-section-title-s2 span::before,
.wpo-section-title span::after,
.wpo-section-title-s2 span::after {
    background-color: var(--brand-gold) !important;
}

/* ==========================================================================
   ICONS & ACCENT ELEMENTS - Gold
   ========================================================================== */

/* Icon colors in service cards and feature items */
.wpo-service-item .icon i,
.wpo-feature-item .icon i,
.service-card .icon i,
.feature-item .icon i,
.wpo-service-section .icon i,
.wpo-features-section .icon i {
    color: var(--brand-gold) !important;
}

/* Icon backgrounds - Maroon */
.wpo-service-item .icon,
.wpo-feature-item .icon {
    border-color: var(--brand-maroon) !important;
}

.wpo-service-item:hover .icon,
.wpo-feature-item:hover .icon {
    background-color: var(--brand-maroon) !important;
}

.wpo-service-item:hover .icon i,
.wpo-feature-item:hover .icon i {
    color: #fff !important;
}

/* ==========================================================================
   BACK TO TOP BUTTON & SCROLL ELEMENTS
   ========================================================================== */

.back-to-top {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

.back-to-top:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* ==========================================================================
   FOOTER STYLING
   ========================================================================== */

/* Footer links hover */
.footer a:hover,
.footer-section a:hover,
.footer ul li a:hover {
    color: var(--brand-gold) !important;
}

/* Footer newsletter button */
.footer .newsletter button,
.footer-section .newsletter button {
    background-color: var(--brand-maroon) !important;
}

.footer .newsletter button:hover,
.footer-section .newsletter button:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* Footer social icons */
.footer .widget-social a:hover,
.footer-section .widget-social a:hover {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   MARQUEE & SCROLLING ELEMENTS
   ========================================================================== */

/* Marquee booking button */
.booking-btn a,
.btn-wrapper.btn-move {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

.booking-btn a:hover,
.btn-wrapper.btn-move:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* Hero section CTA buttons */
.hero-section .theme-btn,
.wpo-hero-section .theme-btn {
    background-color: var(--brand-maroon) !important;
}

/* Hero accent elements */
.hero-section .title span,
.wpo-hero-section .title span {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   SERVICE CARDS & PRODUCT CARDS
   ========================================================================== */

/* Service card hover effects */
.wpo-service-card:hover,
.service-card:hover,
.wpo-service-item:hover {
    border-color: var(--brand-maroon) !important;
}

/* Product card hover */
.product-card:hover .product-btn,
.wpo-shop-item:hover .add-to-cart {
    background-color: var(--brand-maroon) !important;
}

/* Request Quote button on products */
.product-card .product-btn,
.wpo-shop-item .add-to-cart {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

/* About section accent colors */
.about-text h5,
.about-content h5,
.wpo-about-section .wpo-about-text h5 {
    color: var(--brand-gold) !important;
}

/* Skill bars */
.skill-bar .progress-bar,
.progress-bar {
    background-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* Contact form submit button */
.contact-form button[type="submit"],
.wpo-contact-form button[type="submit"] {
    background-color: var(--brand-maroon) !important;
}

.contact-form button[type="submit"]:hover,
.wpo-contact-form button[type="submit"]:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* Contact info icons */
.office-info-item .icon i,
.contact-info .icon i {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   CAROUSEL & SLIDER ELEMENTS
   ========================================================================== */

/* Carousel dots and navigation */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--brand-maroon) !important;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: var(--brand-maroon) !important;
}

/* Swiper pagination */
.swiper-pagination-bullet-active {
    background-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

/* FAQ accordion active state */
.accordion-button:not(.collapsed) {
    background-color: rgba(139, 47, 60, 0.1) !important;
    color: var(--brand-maroon) !important;
}

.accordion-button:focus {
    border-color: var(--brand-maroon) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 47, 60, 0.25) !important;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

/* Form focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-maroon) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 47, 60, 0.15) !important;
}

/* Checkbox and radio custom styling */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb-item a:hover,
.wpo-breadcumb-area a:hover {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   PRELOADER (if applicable)
   ========================================================================== */

.preloader .loader,
#preloader .loader {
    border-top-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   MISC ELEMENTS
   ========================================================================== */

/* Selection highlight */
::selection {
    background-color: var(--brand-maroon);
    color: #fff;
}

::-moz-selection {
    background-color: var(--brand-maroon);
    color: #fff;
}

/* Links */
a:hover {
    color: var(--brand-maroon) !important;
}

/* Border accents */
.border-accent,
.accent-border {
    border-color: var(--brand-gold) !important;
}

/* Feature arrows and hover elements */
.arrow-icon,
.wpo-feature-wrap .feature-item:hover .arrow-icon {
    background-color: var(--brand-maroon) !important;
}

/* Counter/Odometer section accent */
.odometer-section .icon,
.wpo-odometer-section .icon {
    color: var(--brand-gold) !important;
}

/* Header email button */
.close-form .theme-btn-s2 {
    background-color: var(--brand-maroon) !important;
}

/* CTA Section */
.cta-section,
.wpo-cta-section {
    background-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   TEXT COLORS (as per brand guidelines)
   ========================================================================== */

body {
    color: var(--brand-text-secondary);
    background-color: var(--brand-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--brand-text-primary);
}

p {
    color: var(--brand-text-secondary);
}

/* ==========================================================================
   DARK BACKGROUND SECTIONS - White Text Override
   Critical: These sections have maroon/dark backgrounds and need WHITE text
   ========================================================================== */

/* CTA Section - Maroon background needs white text */
.wpo-cta-section,
.cta-section {
    background-color: var(--brand-maroon) !important;
}

.wpo-cta-section h1,
.wpo-cta-section h2,
.wpo-cta-section h3,
.wpo-cta-section h4,
.wpo-cta-section h5,
.wpo-cta-section h6,
.wpo-cta-section p,
.wpo-cta-section span,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6,
.cta-section p,
.cta-section span,
.cta-content h1,
.cta-content h2,
.cta-content h3,
.cta-content span,
.cta-title span,
.cta-sub-title h2,
.cta-sub-title span {
    color: #FFFFFF !important;
}

/* Hero Section S3 - Content styling */
.wpo-hero-section-s3 .hero-right-content {
    background-color: transparent !important;
}

/* Logo Size Override - Responsive (increased) */
.navbar-header {
    overflow: visible !important;
}

.navbar-brand {
    overflow: visible !important;
}

.navbar-brand img {
    max-height: none !important;
    height: auto !important;
    width: 300px !important;
    max-width: none !important;
}

@media (max-width: 991px) {
    .navbar-brand img {
        width: 380px !important;
    }
}

@media (max-width: 767px) {
    .navbar-brand img {
        width: 300px !important;
    }
}

@media (max-width: 480px) {
    .navbar-brand img {
        width: 240px !important;
    }
}

/* Hero Image Override */
.wpo-hero-section-s3 .hero-image .image {
    background: url(../images/hero-dsouza.png) no-repeat center center / cover !important;
}

/* Breadcrumb Image Override */
.breadcumb-area {
    background-image: url(../images/page-title.png) !important;
}

.breadcumb-area.page-about {
    background-image: url(../images/page-title-about.png) !important;
}

.breadcumb-area.page-service {
    background-image: url(../images/page-title-service.png) !important;
}

.breadcumb-area.page-products {
    background-image: url(../images/page-title-products.png) !important;
}

.breadcumb-area.page-contact {
    background-image: url(../images/page-title-contact.png) !important;
}

.wpo-hero-section-s3 .hero-title span {
    color: var(--brand-gold) !important;
}

.wpo-hero-section-s3 .hero-sub-title h2 {
    color: var(--brand-text-primary) !important;
}

.wpo-hero-section-s3 .hero-sub-title h2 span {
    color: var(--brand-maroon) !important;
}

.wpo-hero-section-s3 .hero-discription p {
    color: var(--brand-text-secondary) !important;
}

/* Footer - Dark background needs light text */
.footer-common,
.footer-section-s1,
.footer-section {
    background-color: #1a1a1a !important;
}

.footer-common h1,
.footer-common h2,
.footer-common h3,
.footer-common h4,
.footer-common h5,
.footer-common h6,
.footer-section-s1 h1,
.footer-section-s1 h2,
.footer-section-s1 h3,
.footer-section-s1 h4,
.footer-section-s1 h5,
.footer-section-s1 h6,
.footer h2,
.footer h3,
.footer .title {
    color: #FFFFFF !important;
}

.footer-common p,
.footer-common li,
.footer-common a,
.footer-section-s1 p,
.footer-section-s1 li,
.footer-section-s1 a,
.footer p,
.footer li,
.footer a {
    color: #cccccc !important;
}

.footer-common a:hover,
.footer-section-s1 a:hover,
.footer a:hover {
    color: var(--brand-gold) !important;
}

/* Marquee Sections - Ensure readability */
.marquee-section {
    background-color: var(--brand-maroon) !important;
}

.marquee-section h2,
.marquee-section span,
.marquee h2,
.marquee span {
    color: #FFFFFF !important;
}

/* Footer Topbar Marquee */
.footer-topbar {
    background-color: var(--brand-maroon) !important;
}

.footer-topbar h2,
.footer-topbar span,
.footer-topbar small,
.footer-topbar .marquee-s2 {
    color: #FFFFFF !important;
}

/* Breadcrumb Section - Replace blue overlay with maroon overlay (keep original background) */

/* Original: linear-gradient(249deg, rgba(16, 40, 0, 0) -3.38%, rgba(16, 40, 0, 0.16) -6.18%, rgba(9, 32, 97, 0.85) 42.42%, #141635 66.17%) */
/* Blue replaced with Maroon: rgba(9,32,97) → rgba(139,47,60), #141635 → #3D1520 */
.breadcumb-area::before,
.breadcumb-area::after,
.wpo-breadcumb-area::before,
.wpo-breadcumb-area::after {
    background: linear-gradient(249deg, rgba(16, 40, 0, 0) -3.38%, rgba(16, 40, 0, 0.16) -6.18%, rgba(139, 47, 60, 0.85) 42.42%, #3D1520 66.17%) !important;
}

.wpo-breadcumb-area h2,
.wpo-breadcumb-area .breadcrumb-item,
.wpo-breadcumb-area a,
.wpo-page-title h2,
.breadcumb-area h2,
.breadcumb-area h3,
.breadcumb-area .breadcumb-wrap h2,
.breadcumb-area .breadcumb-wrap h3 {
    color: #FFFFFF !important;
}

.wpo-breadcumb-area .breadcrumb-item.active {
    color: var(--brand-gold) !important;
}

/* Service Section - Light gray background */
.wpo-service-section {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

.wpo-service-section h2,
.wpo-service-section h3,
.wpo-service-section h4,
.wpo-service-section .wpo-section-title h2,
.wpo-service-section .wpo-section-title span {
    color: var(--brand-text-primary) !important;
}

.wpo-service-section .wpo-section-title span {
    color: var(--brand-gold) !important;
}

.wpo-service-section p,
.wpo-service-section .wpo-section-title p {
    color: var(--brand-text-secondary) !important;
}

/* Feature Section - Light background, dark text */
.wpo-feature-section {
    background-color: #FFFFFF !important;
}

.wpo-feature-section h2,
.wpo-feature-section h3 {
    color: var(--brand-text-primary) !important;
}

/* About Section - Light background */
.wpo-about-section {
    background-color: #FFFFFF !important;
}

.wpo-about-section h2,
.wpo-about-section h3 {
    color: var(--brand-text-primary) !important;
}

.wpo-about-section h2 span {
    color: var(--brand-maroon) !important;
}

/* Section Titles on Light Backgrounds */
.wpo-section-title h2,
.wpo-section-title-s2 h2 {
    color: var(--brand-text-primary) !important;
}

.wpo-section-title p,
.wpo-section-title-s2 p {
    color: var(--brand-text-secondary) !important;
}

/* Buttons on Dark Backgrounds - Ensure visibility */
.wpo-cta-section .theme-btn-s2,
.footer-topbar .btn-wrapper {
    background-color: #FFFFFF !important;
    color: var(--brand-maroon) !important;
}

.wpo-cta-section .theme-btn-s2:hover,
.footer-topbar .btn-wrapper:hover {
    background-color: var(--brand-gold) !important;
    color: #FFFFFF !important;
}

.wpo-cta-section .theme-btn-s3 {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.wpo-cta-section .theme-btn-s3:hover {
    background-color: #FFFFFF !important;
    color: var(--brand-maroon) !important;
}

/* Copyright text in footer */
.footer-lower,
.lower-footer-wrap {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.footer-lower p,
.footer-lower a,
.copyright,
.copyright a {
    color: #999999 !important;
}

.footer-lower a:hover,
.copyright a:hover {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   SERVICE CARD COMPONENT - Text Readability Fix
   ========================================================================== */

/* Fix paragraph text readability on blue/dark background */
.wpo-service-section .service-wrap .service-items .service-expanded .service-content p {
    color: #FFFFFF !important;
}

/* Fix link hover visibility on image background */
.wpo-service-section .service-wrap .service-items .service-expanded .service-content h4 a:hover {
    color: #FFFFFF !important;
}

/* ==========================================================================
   SERVICE CARD - Replace Blue Gradient with Maroon (Color Audit Fix)
   Overrides the original blue gradient on .active::before
   ========================================================================== */

/* Override the blue gradient to maroon */
.wpo-service-section .service-wrap .active::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.55%, rgba(0, 0, 0, 0) 37.62%, rgba(139, 47, 60, 0.37) 47.76%, rgba(110, 37, 48, 0.55) 60.64%, #8B2F3C 71.95%) !important;
}

@media (max-width: 991px) {
    .wpo-service-section .service-wrap .active::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.55%, rgba(0, 0, 0, 0) 30.62%, rgba(139, 47, 60, 0.37) 40.76%, rgba(110, 37, 48, 0.55) 50.64%, #8B2F3C 67.95%) !important;
    }
}

/* ==========================================================================
   COLOR AUDIT FIX - Social Icons Gold Hover
   ========================================================================== */

/* Header and Footer Social Icons */
.header-social a:hover,
.header-social a:hover i,
.footer-social a:hover,
.footer-social a:hover i,
.widget-social a:hover,
.widget-social a:hover i,
.social-links a:hover,
.social-links a:hover i,
.team-social a:hover,
.team-social a:hover i {
    color: var(--brand-gold) !important;
}

/* Social icon background on hover */
.header-social a:hover,
.footer-social a:hover,
.widget-social a:hover {
    border-color: var(--brand-gold) !important;
}

/* ==========================================================================
   COLOR AUDIT FIX - Mobile Menu Maroon Theme
   ========================================================================== */

/* Mobile menu background - generic selectors */
.mobail-wrap,
.mobile-menu,
.navbar-collapse.show,
.offcanvas-menu {
    background: var(--brand-maroon) !important;
    background-color: var(--brand-maroon) !important;
}

/* Mobile hamburger button */
.wpo-site-header .mobail-menu button {
    background-color: var(--brand-maroon) !important;
}

/* Mobile menu links - generic */
.mobail-wrap .navigation li a,
.mobile-menu .navigation li a,
.mobail-wrap a,
.mobile-menu a {
    color: #FFFFFF !important;
}

/* Mobile menu link hover - generic */
.mobail-wrap .navigation li a:hover,
.mobile-menu .navigation li a:hover,
.mobail-wrap a:hover,
.mobile-menu a:hover {
    color: var(--brand-gold) !important;
}

/* Mobile menu close button */
.mobail-wrap .close-btn,
.mobile-menu .close-btn,
.offcanvas-menu .close-btn,
.wpo-site-header .menu-close {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Mobile menu submenu indicator */
.mobail-wrap .navigation li.has-submenu>a::after,
.mobile-menu .navigation li.has-submenu>a::after {
    color: var(--brand-gold) !important;
}

/* #navbar overrides - MOBILE ONLY (slide-out panel) */
@media (max-width: 991px) {
    .wpo-site-header #navbar {
        background: var(--brand-maroon) !important;
        background-color: var(--brand-maroon) !important;
    }

    .wpo-site-header #navbar ul a {
        color: #FFFFFF !important;
    }

    .wpo-site-header #navbar ul a:hover,
    .wpo-site-header #navbar ul li.current a {
        color: var(--brand-gold) !important;
    }
}

/* ==========================================================================
   COMPREHENSIVE BLUE REMOVAL - Replace ALL #3860D2 with Brand Colors
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. BUTTONS - Replace blue backgrounds with Maroon
   ------------------------------------------------------------------------- */
.theme-btn,
.theme-btn-s2,
.theme-btn-s3 {
    background: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

.theme-btn:hover,
.theme-btn-s2:hover,
.theme-btn-s3:hover,
.theme-btn::after,
.theme-btn-s2::after,
.theme-btn-s3::after {
    background: var(--brand-maroon-dark) !important;
    background-color: var(--brand-maroon-dark) !important;
}

/* -------------------------------------------------------------------------
   2. BACK TO TOP BUTTON
   ------------------------------------------------------------------------- */
.back-to-top {
    background-color: rgba(139, 47, 60, 0.7) !important;
    border-color: var(--brand-maroon) !important;
}

.back-to-top:hover {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   3. SECTION TITLE ACCENTS - Gold for text accents
   ------------------------------------------------------------------------- */
.wpo-section-title span,
.wpo-section-title-s2 span,
.section-title span,
.about-title-left span {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   4. LINKS - Gold hover, Maroon text
   ------------------------------------------------------------------------- */
a:hover,
.navigation li a:hover,
.navigation li.current>a {
    color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   5. LOADERS/SPINNERS
   ------------------------------------------------------------------------- */
.contact-validation-active #c-loader i,
.contact-validation-active #loader i,
.contact-validation-active #loader2 i,
#preloader i,
.preloader i {
    color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   6. FORM ELEMENTS
   ------------------------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--brand-maroon) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 47, 60, 0.25) !important;
}

/* -------------------------------------------------------------------------
   7. BORDERS USING BLUE
   ------------------------------------------------------------------------- */
.wpo-feature-item:hover,
.service-item:hover,
.team-card:hover,
.blog-card:hover,
.testimonial-card:hover {
    border-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   8. ICON COLORS
   ------------------------------------------------------------------------- */
.wpo-feature-item .icon i,
.feature-item .icon i,
.wpo-service-item .icon i,
.service-item .icon i,
.contact-info .icon i,
.office-info .icon i {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   9. PAGINATION & DOTS
   ------------------------------------------------------------------------- */
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span,
.swiper-pagination-bullet-active,
.page-link:hover,
.page-item.active .page-link {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   10. ACCORDION/FAQ
   ------------------------------------------------------------------------- */
.accordion-button:not(.collapsed),
.accordion-button:focus {
    color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 47, 60, 0.25) !important;
}

.accordion-button:not(.collapsed)::after {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   11. DROPDOWN MENUS
   ------------------------------------------------------------------------- */
.navigation li ul li a:hover,
.dropdown-menu li a:hover {
    color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   12. PROGRESS BARS & SKILL BARS
   ------------------------------------------------------------------------- */
.progress-bar,
.skill-progress {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   13. TAGS & BADGES
   ------------------------------------------------------------------------- */
.tag,
.badge-primary,
.label-primary {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   14. TOOLTIPS
   ------------------------------------------------------------------------- */
.tooltip-inner {
    background-color: var(--brand-maroon) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   15. ARROW BUTTONS
   ------------------------------------------------------------------------- */
.arrow,
.arrow-btn,
.slick-arrow:hover {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   16. ODOMETER/COUNTER SECTION
   ------------------------------------------------------------------------- */
.wpo-odometer-section .odometer-value,
.odometer-section .value,
.counter-number {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   17. TAB NAVIGATION
   ------------------------------------------------------------------------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-pills .nav-link.active {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   18. SEARCH BAR
   ------------------------------------------------------------------------- */
.search-btn,
.search-submit {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   19. PRICING/PRODUCT CARDS
   ------------------------------------------------------------------------- */
.pricing-card.featured,
.pricing-card:hover,
.product-card:hover {
    border-color: var(--brand-maroon) !important;
}

.pricing-card .price,
.product-card .price {
    color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   20. BLOG ELEMENTS
   ------------------------------------------------------------------------- */
.blog-meta a:hover,
.blog-category,
.post-tag {
    color: var(--brand-gold) !important;
}

.read-more,
.read-more:hover {
    color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   21. BREADCRUMB
   ------------------------------------------------------------------------- */
.breadcrumb-item.active {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   22. CHECKBOX & RADIO
   ------------------------------------------------------------------------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   23. SELECT2 & CUSTOM DROPDOWNS
   ------------------------------------------------------------------------- */
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--brand-maroon) !important;
}

/* -------------------------------------------------------------------------
   24. VIDEO PLAY BUTTON
   ------------------------------------------------------------------------- */
.video-btn,
.play-btn {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
}

.video-btn:hover,
.play-btn:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* -------------------------------------------------------------------------
   25. TESTIMONIAL QUOTES
   ------------------------------------------------------------------------- */
.testimonial-icon,
.quote-icon {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   26. GENERAL BLUE COLOR TEXT OVERRIDE
   ------------------------------------------------------------------------- */
[style*="color: #3860D2"],
[style*="color:#3860D2"] {
    color: var(--brand-gold) !important;
}

/* -------------------------------------------------------------------------
   27. GENERAL BLUE BACKGROUND OVERRIDE
   ------------------------------------------------------------------------- */
[style*="background-color: #3860D2"],
[style*="background:#3860D2"],
[style*="background-color:#3860D2"] {
    background-color: var(--brand-maroon) !important;
}

/* ==========================================================================
   ABOUT SECTION - Brand Colors Override
   ========================================================================== */

/* About Section S2 - Replace any blue elements */
.wpo-about-section-s2 {
    background-color: #FFFFFF !important;
}

.wpo-about-section-s2 .wpo-section-title-s2 span,
.wpo-about-section-s2 .about-title-left span {
    color: var(--brand-gold) !important;
}

.wpo-about-section-s2 h2,
.wpo-about-section-s2 h3 {
    color: var(--brand-text-primary) !important;
}

.wpo-about-section-s2 p {
    color: var(--brand-text-secondary) !important;
}

/* About list active items - Gold instead of blue */
.wpo-about-section-s2 .about-list li.active span,
.about-list li.active span {
    color: var(--brand-gold) !important;
}

.wpo-about-section-s2 .about-list li.active::before,
.about-list li.active::before {
    background-color: var(--brand-gold) !important;
}

/* About list icons - Keep original styling, remove maroon */
/* Removed maroon background per user request */

/* About Section borders */
.wpo-about-section-s2 .about-list,
.about-list {
    border-color: var(--brand-gold) !important;
}

/* About list item hover - Gold instead of blue */
.wpo-about-section-s2 .about-list li:hover span,
.about-list li:hover span,
.about-list ul li:hover span {
    color: var(--brand-gold) !important;
}

.wpo-about-section-s2 .about-list li:hover::before,
.about-list li:hover::before,
.about-list ul li:hover::before {
    background-color: var(--brand-gold) !important;
}

/* About button */
.wpo-about-section-s2 .about-btn .theme-btn,
.about-btn .theme-btn {
    background-color: var(--brand-maroon) !important;
}

.wpo-about-section-s2 .about-btn .theme-btn:hover,
.about-btn .theme-btn:hover {
    background-color: var(--brand-maroon-dark) !important;
}

/* ==========================================================================
   GLOBAL SPAN/LINK HOVER - Replace ALL blue hover with Gold/Maroon
   ========================================================================== */

/* All spans inside lists on hover */
ul li span:hover,
ul li:hover span,
.about-list span:hover,
.about-right span:hover,
.about-left span:hover,
.wpo-about-section-s2 li span:hover,
.wpo-about-section-s2 ul li span:hover,
.wpo-about-section-s2 ul li:hover span {
    color: var(--brand-gold) !important;
}

/* All links hover state */
a span:hover,
span a:hover {
    color: var(--brand-gold) !important;
}

/* Make sure any color transition is to gold not blue */
li span,
.about-list li span,
.about-right li span {
    transition: color 0.3s ease !important;
}

li span:hover,
.about-list li span:hover,
.about-right li span:hover {
    color: var(--brand-gold) !important;
}

/* Fix ::before pseudo-element hover color (Blue → Gold) */
.wpo-about-section-s2 .about-list ul li span:before,
.wpo-about-section-s3 .about-list ul li span:before,
.wpo-about-section-s2 .about-list ul li:hover span:before,
.wpo-about-section-s3 .about-list ul li:hover span:before,
.about-list ul li span:before,
.about-list ul li:hover span:before {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

/* Also fix ::after if used */
.wpo-about-section-s2 .about-list ul li span:after,
.wpo-about-section-s3 .about-list ul li span:after,
.wpo-about-section-s2 .about-list ul li:hover span:after,
.wpo-about-section-s3 .about-list ul li:hover span:after,
.about-list ul li span:after,
.about-list ul li:hover span:after {
    background-color: var(--brand-gold) !important;
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

/* ==========================================================================
   ABOUT SECTION - Detailed Blue Removal
   ========================================================================== */

/* About Section items background (nth-child(1) blue fix) */
.wpo-about-section .about-max .about-wrap .about-items:nth-child(1),
.wpo-about-section-s2 .about-max .about-wrap .about-items:nth-child(1),
.wpo-about-section-s3 .about-max .about-wrap .about-items:nth-child(1) {
    background-color: var(--brand-maroon-light) !important;
}

/* About list item span:before hover blue fix */
.wpo-about-section .about-max .about-wrap .about-items .about-text ul li span:before,
.wpo-about-section .about-max .about-wrap .about-items .about-text ul li:hover span:before,
.wpo-about-section-s2 .about-max .about-wrap .about-items .about-text ul li span:before,
.wpo-about-section-s2 .about-max .about-wrap .about-items .about-text ul li:hover span:before,
.wpo-about-section-s3 .about-max .about-wrap .about-items .about-text ul li span:before,
.wpo-about-section-s3 .about-max .about-wrap .about-items .about-text ul li:hover span:before {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

/* Global catch-all for any :before/:after pseudo-elements that might still be blue on hover */
.about-items ul li:hover span:before,
.about-items ul li:hover span:after,
.about-list ul li:hover span:before,
.about-list ul li:hover span:after {
    background-color: var(--brand-gold) !important;
}

/* ==========================================================================
   SHOP SECTION & ADD TO CART - Brand Colors Override
   ========================================================================== */

/* Shop Section - Add to Cart Button */
.shop-section .add-to-cart a {
    color: var(--brand-maroon) !important;
    border: 2px solid var(--brand-maroon) !important;
    background-color: transparent !important;
}

/* Shop Section - Add to Cart Button Hover & Grid Hover */
.shop-section .add-to-cart a:hover,
.shop-section .grid:hover .add-to-cart a {
    background-color: var(--brand-maroon) !important;
    color: #fff !important;
    border-color: var(--brand-maroon) !important;
}

/* Shop Section - Product Price/Details spans if any */
.shop-section .details h3 a:hover {
    color: var(--brand-maroon) !important;
}

.shop-section .details .price {
    color: var(--brand-maroon) !important;
}

/* Pagination in Shop/Products Page */
.pg-pagination li a:hover,
.pg-pagination li.active a {
    background-color: var(--brand-maroon) !important;
    border-color: var(--brand-maroon) !important;
    color: #fff !important;
}

/* ==========================================================================
   HISTORY SECTION - Brand Colors Override
   ========================================================================== */

/* History Section item numbers (01, 02, etc.) */
.wpo-history-section .history-item h2,
.wpo-history-section-s2 .history-item h2,
.history-item h2 {
    color: var(--brand-maroon) !important;
}

/* History Section item titles */
.wpo-history-section .history-item .text h3,
.wpo-history-section-s2 .history-item .text h3,
.history-item .text h3 {
    color: var(--brand-text-primary) !important;
}

/* History Section hover effect if any blue remains */
.history-item:hover h2 {
    color: var(--brand-maroon-light) !important;
}

/* ==========================================================================
   FEATURE SECTION - Brand Colors Override
   ================================================-------------- */

/* Main Feature Icon background - Replace blue tint with Maroon tint */
.wpo-feature-section .feature-max .feature-wrap .feature-items .icon {
    background-color: rgba(139, 47, 60, 0.08) !important;
}

/* Feature Item title hover */
.wpo-feature-section .feature-max .feature-wrap .feature-items .text h3 a:hover {
    color: var(--brand-maroon) !important;
}

/* Arrow Icon - Custom colors requested: White normally, Black on hover */
.wpo-feature-section .feature-items .arrow-icon {
    background-color: var(--brand-maroon) !important;
    /* Maroon background for white icon */
    border: 1px solid var(--brand-maroon) !important;
    transition: all 0.3s ease !important;
}

/* Ensure the arrow image is White normally */
.wpo-feature-section .feature-items .arrow-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Arrow Icon Hover State - Gold background, Black icon */
.wpo-feature-section .feature-items:hover .arrow-icon {
    background-color: var(--brand-gold) !important;
    border: 1px solid var(--brand-gold) !important;
}

/* Override existing blue hover state and force Black icon */
.wpo-feature-section .feature-max .feature-wrap .feature-items:hover .arrow-icon {
    background-color: var(--brand-gold) !important;
    border: 1px solid var(--brand-gold) !important;
}

.wpo-feature-section .feature-items:hover .arrow-icon img {
    filter: brightness(0) !important;
    /* Forces image to be Black on hover */
}


/* ==========================================================================
   SERVICE SECTION - Layout & Icon Fixes
   ================================================-------------- */

/* Fix oversized icons - Constraints and transformation reset */
.wpo-service-section .service-wrap .service-items .service-default .service-bg img {
    width: 60px !important;
    height: auto !important;
    max-width: 60px !important;
    transform: rotate(0deg) !important;
    /* Reset rotation for PNGs */
    -webkit-transform: rotate(0deg) !important;
}


/* Remove white background ONLY from non-active service items (the strips) */
/* Targeted to preserve the Active card's background/design if it differs */
.wpo-service-section .service-wrap .service-items:not(.active) {
    /* Background removed as per request to restore original (white) */
    /* background: transparent !important; */
    border: none !important;
    box-shadow: none !important;
}


/* Ensure text colors are black */
.wpo-service-section .service-wrap .service-items:not(.active) .service-default .service-bg h3 {
    color: #000000 !important;
}

/* ==========================================================================
   ICON BACKGROUND REMOVAL FIXES (User Requested)
   ================================================-------------- */



/* About Section Icons - Rule removed to restore container background */
/* .wpo-about-section-s2 .about-left .about-image .about-list... removed */


.wpo-about-section-s2 .about-left .about-image .about-list .icon,
.wpo-about-section-s3 .about-left .about-image .about-list .icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Service Section Icons (Targeting everything in the chain) */
.wpo-service-section .service-wrap .service-items .service-default,
.wpo-service-section .service-wrap .service-items .service-default .service-bg,
.wpo-service-section .service-wrap .service-items .service-default .service-bg img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Feature Section Icons (Targeting ONLY the icon, restoring container background) */
.wpo-feature-section .feature-max .feature-wrap .feature-items .icon,
.wpo-feature-section .feature-max .feature-wrap .feature-items .icon img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Kill pseudo-elements on Feature icons just in case */
.wpo-feature-section .feature-max .feature-wrap .feature-items .icon::before,
.wpo-feature-section .feature-max .feature-wrap .feature-items .icon::after {
    display: none !important;
}

/* ==========================================================================
   MOBILE MENU OVERRIDES - Gold BG, White Lines
   ================================================-------------- */
/* Hamburger container */
.navbar-toggler,
.wpo-site-header .navbar-toggler {
    background-color: #8B2F3C !important;
    /* Maroon */
    border-color: #8B2F3C !important;
}

/* Hamburger lines */
.navbar-toggler span,
.navbar-toggler .icon-bar,
.wpo-site-header .navbar-toggler span,
.wpo-site-header .navbar-toggler .icon-bar {
    background-color: #FFFFFF !important;
    /* White */
}

/* ==========================================================================
   FINAL OVERRIDES - SIMPLIFIED SELECTORS
   ================================================-------------- */

/* Feature Section */
.feature-items .icon,
.feature-items .icon img,
.wpo-feature-section .icon {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Service Section */
.service-items .service-bg,
.service-items .service-bg img,
.wpo-service-section .service-bg {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* About Section */
/* Reverted background removal for the list container itself as per user request */
.about-list .icon,
.about-list .icon img {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   CONTACT PAGE - Office Info & Contact Form Brand Color Fixes
   ========================================================================== */

/* Office info card active/hover background overlay (was #3860D2) */
.office-info .office-info-item::before {
    background: var(--brand-maroon) !important;
}

/* Office info icon color - default state (was #3860D2) */
.office-info .office-info-item .office-info-icon .icon .fi:before {
    color: var(--brand-gold) !important;
}

/* Office info icon color - active/hover state (white on maroon bg) */
.office-info .office-info-item.active .office-info-icon .icon .fi:before,
.office-info .office-info-item:hover .office-info-icon .icon .fi:before {
    color: #fff !important;
}

/* Contact form submit button (was #3860D2) */
.contact-form .submitbtn .fild {
    background: var(--brand-maroon) !important;
}

.contact-form .submitbtn .fild:hover {
    background: var(--brand-maroon-dark) !important;
}

/* ==========================================================================
   HEADER - Hide Search Icon
   ========================================================================== */

.header-search-form-wrapper {
    display: none !important;
}

/* ==========================================================================
   PRELOADER - Brand Color Override
   ========================================================================== */

/* Light maroon background so the logo is visible */
.preloader {
    background-color: #F2E3E5 !important;
}

/* Center content as a column layout */
.preloader .vertical-centered-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.preloader .vertical-centered-box:after {
    display: none !important;
}

/* Enlarge the content area for the company logo */
.preloader .vertical-centered-box .content {
    max-width: 400px !important;
    font-size: inherit !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
}

.preloader .vertical-centered-box .content img {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Move spinner below the logo */
.preloader .loader-circle {
    display: none !important;
}

.preloader .loader-line-mask {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 30px auto 0 !important;
}

.preloader .loader-line-mask .loader-line {
    box-shadow: inset 0 0 0 2px var(--brand-maroon) !important;
}

/* ==========================================================================
   ACCORDION - Remove expanded arrow background
   ========================================================================== */

.accordion-button:not(.collapsed)::after {
    background-color: transparent !important;
}

/* ==========================================================================
   ODOMETER - Align h3 to bottom of counter
   ========================================================================== */

.wpo-odometer-section .odometer-content .odometer-items h3,
.wpo-odometer-section-s2 .odometer-content .odometer-items h3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 20px !important;
}

/* Spacing between odometer items on mobile */
@media (max-width: 991px) {

    .wpo-odometer-section .odometer-content .odometer-items,
    .wpo-odometer-section-s2 .odometer-content .odometer-items {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 500px) {

    .wpo-odometer-section .odometer-content .odometer-items,
    .wpo-odometer-section-s2 .odometer-content .odometer-items {
        margin-bottom: 25px !important;
    }
}

/* ==========================================================================
   FAQ SECTION SHAPES - Replace Blue with Brand Colors
   ========================================================================== */

.wpo-faq-section .shape-1 {
    background-color: var(--brand-maroon) !important;
}

.wpo-faq-section .shape-2 {
    background: var(--brand-gold) !important;
}

.wpo-faq-section .shape-3 {
    background-color: var(--brand-maroon-light) !important;
}

/* ==========================================================================
   TESTIMONIAL SECTION - Feedback Icon Brand Color
   ========================================================================== */

.wpo-testimonial-section .image .feedback {
    color: var(--brand-maroon) !important;
}

.wpo-testimonial-section .image .feedback i {
    color: var(--brand-maroon) !important;
}

/* Fix mobile sticky header top/bottom padding missing when scrolling */
@media (max-width: 991px) {
    .wpo-site-header .navigation.sticky-header {
        padding: 15px 15px !important;
    }
    
    /* Make the logo bigger on mobile view */
    .wpo-site-header .navbar-brand img {
        width: 210px !important;
        max-width: 210px !important;
    }
}