/* ================================================================
   INFINITY MEDIA - BOLD NEOBRUTALISM v9.2

   A COMPLETELY FRESH visual approach based on neobrutalism.dev

   KEY VISUAL ELEMENTS:
   - THICK black borders (3px standard)
   - COLORED offset shadows (not just black!)
   - NO gradients, NO blur, NO soft shadows
   - Playful rotations and offsets
   - Stark color blocking
   - Dramatic hover animations
   ================================================================ */

/* ================================================================
   1. ROOT VARIABLES - Override Everything
   ================================================================ */
:root,
html,
body,
#wrapwrap,
#wrap {
    /* INFINITY MEDIA PALETTE */
    --im-horizon: #20BEC6;
    --im-magenta: #ED0180;
    --im-dusk: #0C152A;
    --im-cloud: #C9DEE8;
    --im-lead: #9EACB2;
    --im-black: #000000;
    --im-white: #FFFFFF;
    --im-cream: #FEF9E1;

    /* OVERRIDE ALL ODOO COLORS */
    --primary: #20BEC6 !important;
    --secondary: #ED0180 !important;
    --o-color-1: #20BEC6 !important;
    --o-color-2: #ED0180 !important;
    --o-color-3: #C9DEE8 !important;
    --o-color-4: #0C152A !important;
    --o-color-5: #000000 !important;
    --body-bg: #FEF9E1 !important;
    --body-color: #000000 !important;

    /* NEOBRUTALISM TOKENS */
    --nb-border-width: 3px;
    --nb-shadow-x: 5px;
    --nb-shadow-y: 5px;
    --nb-radius: 0px;
}

/* ================================================================
   2. BASE - Cream Background, Black Text
   ================================================================ */
body,
#wrapwrap {
    background: #FEF9E1 !important;
    color: #000000 !important;
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif !important;
}

#wrapwrap,
#wrap,
#wrapwrap p,
#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4, #wrapwrap h5, #wrapwrap h6,
#wrapwrap span:not([class*="fa"]):not([class*="bi"]):not([class*="icon"]),
#wrapwrap a,
#wrapwrap li,
#wrapwrap div:not([class*="fa"]):not([class*="bi"]):not([class*="icon"]),
#wrap p,
#wrap h1, #wrap h2, #wrap h3, #wrap h4, #wrap h5, #wrap h6,
#wrap span:not([class*="fa"]):not([class*="bi"]):not([class*="icon"]),
#wrap a,
#wrap li,
#wrap label,
#wrap button:not([class*="fa"]):not([class*="bi"]) {
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif !important;
}

/* ICON FONTS - Must use their own font families */
/* FontAwesome icons */
.fa, .fas, .far, .fab, .fal, .fad,
[class*="fa-"],
i.fa, i.fas, i.far, i.fab,
i[class*="fa-"] {
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Odoo UI icons */
.oi, [class*="oi-"],
i.oi, i[class*="oi-"] {
    font-family: 'odoo_ui_icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    speak: never !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Bootstrap icons */
.bi, [class*="bi-"],
i.bi, i[class*="bi-"] {
    font-family: 'bootstrap-icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Generic icon element styling */
#wrapwrap i:not([class]),
#wrap i:not([class]),
header i,
footer i {
    display: inline-block !important;
    font-style: normal !important;
}

/* Remove old styling BUT preserve icons */
#wrap .btn::before,
#wrap .btn::after,
#wrap .btn-magnetic::before,
#wrap .btn-glow::before,
#wrap .btn-shine::before,
#wrap .hero-section::before,
#wrap .hero-section::after,
#wrap .cta-section::before,
#wrap .cta-section::after,
#wrap .glitch-text::before,
#wrap .glitch-text::after,
#wrap .text-gradient::before,
#wrap .text-gradient::after {
    display: none !important;
    content: none !important;
}

/* Ensure icon pseudo-elements inherit correctly */
#wrap .fa::before,
#wrap [class*="fa-"]::before,
.neo-theme-toggle .fa::before {
    font-family: 'FontAwesome' !important;
    display: inline-block !important;
}

#wrap .oi::before,
#wrap [class*="oi-"]::before {
    font-family: 'odoo_ui_icons' !important;
    display: inline-block !important;
}

#wrap .bi::before,
#wrap [class*="bi-"]::before {
    font-family: 'bootstrap-icons' !important;
    display: inline-block !important;
}

/* ================================================================
   3. TYPOGRAPHY - Bold & Black
   ================================================================ */
#wrap h1, #wrap h2, #wrap h3, #wrap h4, #wrap h5, #wrap h6 {
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.0 !important;
    text-transform: uppercase !important;
}

#wrap p {
    font-weight: 500 !important;
    color: #000000 !important;
    line-height: 1.6 !important;
    font-size: 1.1rem !important;
}

#wrap a:not(.btn):not([class*="btn-"]):not(.cta-btn) {
    color: #ED0180 !important;
    text-decoration: none !important;
    border-bottom: 3px solid #ED0180 !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

#wrap a:not(.btn):not([class*="btn-"]):not(.cta-btn):hover {
    color: #000000 !important;
    border-bottom-color: #000000 !important;
    background: #20BEC6 !important;
}

/* ================================================================
   4. BUTTONS - The Signature Neobrutalist Element
   ================================================================ */
#wrap .btn,
#wrap .btn-primary,
#wrap .btn-secondary,
#wrap .btn-magnetic,
#wrap .btn-glow,
#wrap .btn-shine,
#wrap a.btn,
#wrap a.btn-magnetic,
#wrap a.btn-glow,
#wrap a.btn-shine,
#wrap a.btn-outline-animated,
#wrap a.cta-btn,
.s_website_form_send,
button.btn {
    display: inline-block !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 #000000 !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    text-decoration: none !important;
    border-bottom: 3px solid #000000 !important;
    position: relative !important;
}

#wrap .btn:hover,
#wrap .btn-primary:hover,
#wrap a.btn:hover,
#wrap .btn-magnetic:hover,
#wrap a.btn-magnetic:hover,
#wrap .btn-glow:hover,
#wrap a.btn-glow:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #20BEC6 !important;
    color: #000000 !important;
}

/* Secondary Button - White with black text */
#wrap .btn-secondary,
#wrap .btn-outline,
#wrap .btn-outline-primary,
#wrap .btn-outline-animated,
#wrap a.btn-outline-animated,
#wrap .btn-outline-secondary {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

#wrap .btn-secondary:hover,
#wrap .btn-outline:hover,
#wrap .btn-outline-primary:hover,
#wrap .btn-outline-animated:hover,
#wrap a.btn-outline-animated:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #ED0180 !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
}

/* Remove all button effects */
#wrap .btn::before,
#wrap .btn::after {
    display: none !important;
}

/* ================================================================
   5. CARDS - Bold Boxes with Colored Shadows
   ================================================================ */
#wrap .card,
#wrap .service-card,
#wrap .stat-item,
#wrap .glass-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
    padding: 32px !important;
    transition: all 0.15s ease !important;
    position: relative !important;
}

#wrap .card:hover,
#wrap .service-card:hover,
#wrap .stat-item:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0 #20BEC6 !important;
}

/* Alternating card shadow colors */
#wrap .card:nth-child(2n) {
    box-shadow: 6px 6px 0 #ED0180 !important;
}

#wrap .card:nth-child(2n):hover {
    box-shadow: 3px 3px 0 #ED0180 !important;
}

#wrap .card:nth-child(3n) {
    box-shadow: 6px 6px 0 #0C152A !important;
}

#wrap .card:nth-child(3n):hover {
    box-shadow: 3px 3px 0 #0C152A !important;
}

/* Service cards - shadow color matches icon color per card */
#wrap section:has(.service-card) .row > :nth-child(1) .service-card { box-shadow: 6px 6px 0 #20BEC6 !important; }
#wrap section:has(.service-card) .row > :nth-child(2) .service-card { box-shadow: 6px 6px 0 #ec4899 !important; }
#wrap section:has(.service-card) .row > :nth-child(3) .service-card { box-shadow: 6px 6px 0 #06b6d4 !important; }
#wrap section:has(.service-card) .row > :nth-child(4) .service-card { box-shadow: 6px 6px 0 #f59e0b !important; }
#wrap section:has(.service-card) .row > :nth-child(5) .service-card { box-shadow: 6px 6px 0 #10b981 !important; }
#wrap section:has(.service-card) .row > :nth-child(6) .service-card { box-shadow: 6px 6px 0 #ef4444 !important; }

#wrap section:has(.service-card) .row > :nth-child(1) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #20BEC6 !important; }
#wrap section:has(.service-card) .row > :nth-child(2) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #ec4899 !important; }
#wrap section:has(.service-card) .row > :nth-child(3) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #06b6d4 !important; }
#wrap section:has(.service-card) .row > :nth-child(4) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #f59e0b !important; }
#wrap section:has(.service-card) .row > :nth-child(5) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #10b981 !important; }
#wrap section:has(.service-card) .row > :nth-child(6) .service-card:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #ef4444 !important; }

#wrap .card h4,
#wrap .service-card h4 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin-bottom: 12px !important;
}

#wrap .card p,
#wrap .service-card p {
    font-size: 1rem !important;
    color: #000000 !important;
    opacity: 0.8 !important;
}

/* ================================================================
   6. BADGES / SECTION LABELS - Tilted Tags
   ================================================================ */
#wrap .section-label,
#wrap .badge,
#wrap p.section-label {
    display: inline-block !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    /* Smooth borders with rotation - anti-aliasing */
    transform: rotate(-2deg) translateZ(0) !important;
    -webkit-transform: rotate(-2deg) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   7. HERO SECTION - Big & Bold
   ================================================================ */
#wrap section:first-of-type,
#wrap .hero-section,
#wrap .s_cover {
    background: #FEF9E1 !important;
    padding: 80px 0 60px !important;
    position: relative !important;
    min-height: auto !important;
}

/* Hero content centering */
#wrap section:first-of-type .container,
#wrap .hero-section .container,
#wrap section:first-of-type .row,
#wrap .hero-section .row {
    text-align: center !important;
}

#wrap section:first-of-type .col-lg-8,
#wrap section:first-of-type .col-lg-10,
#wrap section:first-of-type [class*="col-"] {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Hero Title - Massive */
#wrap .hero-title,
#wrap section:first-of-type h1 {
    font-size: clamp(3rem, 10vw, 7rem) !important;
    font-weight: 900 !important;
    color: #000000 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 32px !important;
    text-align: center !important;
}

/* Highlighted Word - The Signature Box */
#wrap .text-gradient,
#wrap .glitch-text,
#wrap h1 .text-gradient {
    display: inline-block !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    padding: 8px 24px !important;
    border: 3px solid #000000 !important;
    box-shadow: 6px 6px 0 #000000 !important;
    margin: 0 8px !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    /* Smooth borders with rotation - anti-aliasing */
    transform: rotate(-3deg) translateY(-5px) translateZ(0) !important;
    -webkit-transform: rotate(-3deg) translateY(-5px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Kill all glitch effects */
#wrap .glitch-text::before,
#wrap .glitch-text::after,
#wrap .text-gradient::before,
#wrap .text-gradient::after {
    display: none !important;
    content: none !important;
}

/* Hero Subtitle */
#wrap .hero-subtitle,
#wrap section:first-of-type > .container p:not(.section-label),
#wrap section:first-of-type p {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #000000 !important;
    max-width: 550px !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Hero buttons wrapper */
#wrap section:first-of-type .btn-group,
#wrap section:first-of-type .d-flex,
#wrap .hero-section .btn-group {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

/* Hide all decorative junk */
#wrap .hero-grid,
#wrap .floating-orb,
#wrap .morphing-blob,
#wrap .particles,
#wrap .floating-shapes {
    display: none !important;
}

/* ================================================================
   8. FEATURE/STATS GRID - Colored Blocks
   ================================================================ */
#wrap section:has(.stat-item),
#wrap .stats-section,
#wrap section:has(.feature-tile) {
    background: #FFFFFF !important;
    padding: 0 !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

/* Grid container */
#wrap .feature-grid,
#wrap .row:has(.stat-item),
#wrap .row:has(.feature-tile) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual tiles - solid color blocks */
#wrap .stat-item,
#wrap .feature-tile {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 48px 32px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-right: 3px solid #000000 !important;
}

#wrap .stat-item:last-child,
#wrap .feature-tile:last-child {
    border-right: none !important;
}

/* Color pattern */
#wrap .stat-item:nth-child(1),
#wrap .feature-tile:nth-child(1) {
    background: #20BEC6 !important;
}

#wrap .stat-item:nth-child(2),
#wrap .feature-tile:nth-child(2) {
    background: #0C152A !important;
}

#wrap .stat-item:nth-child(3),
#wrap .feature-tile:nth-child(3) {
    background: #ED0180 !important;
}

#wrap .stat-item:nth-child(4),
#wrap .feature-tile:nth-child(4) {
    background: #FEF9E1 !important;
}

/* Stat text colors */
#wrap .stat-item:nth-child(1) .stat-number,
#wrap .stat-item:nth-child(1) .stat-label { color: #000000 !important; }

#wrap .stat-item:nth-child(2) .stat-number,
#wrap .stat-item:nth-child(2) .stat-label { color: #FFFFFF !important; }

#wrap .stat-item:nth-child(3) .stat-number,
#wrap .stat-item:nth-child(3) .stat-label { color: #FFFFFF !important; }

#wrap .stat-item:nth-child(4) .stat-number,
#wrap .stat-item:nth-child(4) .stat-label { color: #000000 !important; }

#wrap .stat-number {
    font-size: clamp(3rem, 6vw, 5rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

#wrap .stat-label {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* ================================================================
   9. SERVICES SECTION - Cards on Cream
   ================================================================ */
#wrap section:has(.service-card) {
    background: #FEF9E1 !important;
    padding: 100px 0 !important;
}

.im-dark-mode #wrap section:has(.service-card) {
    background: #0C152A !important;
}

#wrap section:has(.service-card) .section-title {
    color: #000000 !important;
}

#wrap .service-icon-wrap {
    width: 80px !important;
    height: 80px !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

#wrap .service-icon-wrap i {
    font-size: 32px !important;
    color: #000000 !important;
}

#wrap .row > :nth-child(2n) > .service-card .service-icon-wrap {
    background: #ED0180 !important;
}

#wrap .row > :nth-child(2n) > .service-card .service-icon-wrap i {
    color: #FFFFFF !important;
}

/* ================================================================
   10. TEAM SECTION - Bold Color Blocks
   ================================================================ */
/* Light mode: team sections get light background */
#wrap section:has(.team-card),
#wrap section:has(.team-grid) {
    background: #F0F4F8 !important;
    padding: 0 !important;
}

/* Dark mode: team sections get black background */
.im-dark-mode #wrap section:has(.team-card),
.im-dark-mode #wrap section:has(.team-grid) {
    background: #000000 !important;
}

/* Team header */
#wrap section:has(.team-card) > .container > .text-center:first-child {
    padding: 24px 0 !important;
    border-bottom: 3px solid #000000 !important;
}

.im-dark-mode #wrap section:has(.team-card) > .container > .text-center:first-child {
    border-bottom-color: #20BEC6 !important;
}

#wrap section:has(.team-card) .section-title {
    color: #000000 !important;
    margin-bottom: 8px !important;
}

.im-dark-mode #wrap section:has(.team-card) .section-title {
    color: #FFFFFF !important;
}

#wrap section:has(.team-card) .section-title .text-gradient,
#wrap section:has(.team-grid-small) .section-title .text-gradient {
    background: none !important;
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
}

/* Team grid */
#wrap .team-grid,
#wrap .row:has(.team-card) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 !important;
}

#wrap .team-card {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    padding: 48px !important;
    min-height: 220px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Team colors - checkerboard */
#wrap .team-card:nth-child(1) {
    background: #20BEC6 !important;
    border-right: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
    flex-direction: row-reverse !important;
}

#wrap .team-card:nth-child(2) {
    background: #0C152A !important;
    border-bottom: 3px solid #20BEC6 !important;
}

#wrap .team-card:nth-child(3) {
    background: #0C152A !important;
    border-right: 3px solid #20BEC6 !important;
    flex-direction: row-reverse !important;
}

#wrap .team-card:nth-child(4) {
    background: #20BEC6 !important;
}

/* Team avatars */
#wrap .team-avatar {
    width: 100px !important;
    height: 100px !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

#wrap .team-card:nth-child(1) .team-avatar { background: #000000 !important; color: #20BEC6 !important; }
#wrap .team-card:nth-child(2) .team-avatar { background: #20BEC6 !important; color: #000000 !important; }
#wrap .team-card:nth-child(3) .team-avatar { background: #20BEC6 !important; color: #000000 !important; }
#wrap .team-card:nth-child(4) .team-avatar { background: #000000 !important; color: #20BEC6 !important; }

/* Team names */
#wrap .team-name {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

#wrap .team-card:nth-child(1) .team-name { color: #000000 !important; }
#wrap .team-card:nth-child(2) .team-name { color: #FFFFFF !important; }
#wrap .team-card:nth-child(3) .team-name { color: #FFFFFF !important; }
#wrap .team-card:nth-child(4) .team-name { color: #000000 !important; }

/* Team card description text colors */
#wrap .team-card:nth-child(3) p { color: #FFFFFF !important; }
#wrap .team-card:nth-child(4) p { color: #000000 !important; }

/* ================================================================
   11. TESTIMONIALS - Cards with Colored Shadows
   ================================================================ */
/* Light mode: testimonials on cream */
#wrap section:has(.testimonial-card) {
    background: #FEF9E1 !important;
    padding: 100px 0 !important;
}

/* Dark mode: testimonials on navy */
.im-dark-mode #wrap section:has(.testimonial-card) {
    background: #0C152A !important;
}

#wrap section:has(.testimonial-card) .section-title {
    color: #000000 !important;
}

.im-dark-mode #wrap section:has(.testimonial-card) .section-title {
    color: #FFFFFF !important;
}

#wrap section:has(.testimonial-card) .section-subtitle {
    color: #000000 !important;
    opacity: 0.7 !important;
}

.im-dark-mode #wrap section:has(.testimonial-card) .section-subtitle {
    color: #C9DEE8 !important;
    opacity: 1 !important;
}

#wrap .testimonial-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #20BEC6 !important;
    padding: 40px !important;
}

#wrap .testimonial-card:nth-child(2n) {
    box-shadow: 8px 8px 0 #ED0180 !important;
}

#wrap .testimonial-card::before {
    content: '"' !important;
    display: block !important;
    font-size: 5rem !important;
    font-weight: 900 !important;
    color: #20BEC6 !important;
    line-height: 0.8 !important;
    margin-bottom: 16px !important;
}

#wrap .testimonial-card:nth-child(2n)::before {
    color: #ED0180 !important;
}

#wrap .testimonial-text {
    font-size: 1.1rem !important;
    color: #000000 !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
    font-weight: 500 !important;
}

#wrap .testimonial-author {
    font-weight: 800 !important;
    color: #000000 !important;
    font-size: 1rem !important;
}

#wrap .testimonial-role {
    color: #ED0180 !important;
    font-weight: 600 !important;
}

/* ================================================================
   12. CTA SECTION - Bold Full-Width Block
   ================================================================ */
/* Light mode CTA (exclude content sections like .section-dark) */
#wrap .cta-section,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker):not(.hero-section) {
    background: #20BEC6 !important;
    padding: 100px 0 !important;
    text-align: center !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

/* Dark mode CTA - deeper teal */
.im-dark-mode #wrap .cta-section,
.im-dark-mode #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker):not(.hero-section) {
    background: #178C92 !important;
    border-top-color: #20BEC6 !important;
    border-bottom-color: #20BEC6 !important;
}

#wrap .cta-section .section-label {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: rotate(2deg) !important;
}

#wrap .cta-section h2,
#wrap .cta-section .section-title {
    color: #000000 !important;
    font-size: clamp(2rem, 5vw, 4rem) !important;
}

#wrap .cta-section .text-gradient {
    background: none !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
}

#wrap .cta-section .btn,
#wrap .cta-section .btn-magnetic,
#wrap .cta-section a.btn-magnetic,
#wrap .cta-section .cta-btn,
#wrap .cta-section a.cta-btn {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
    border-bottom: 3px solid #000000 !important;
}

#wrap .cta-section .btn:hover,
#wrap .cta-section .btn-magnetic:hover,
#wrap .cta-section a.btn-magnetic:hover,
#wrap .cta-section .cta-btn:hover {
    box-shadow: 0 0 0 #ED0180 !important;
}

/* Hide decorative elements */
#wrap .cta-section .floating-orb,
#wrap .cta-section .morphing-blob {
    display: none !important;
}

/* ================================================================
   13. QUOTE SECTION
   ================================================================ */
#wrap section:has(.quote-box) {
    background: #C9DEE8 !important;
    padding: 100px 0 !important;
}

.im-dark-mode #wrap section:has(.quote-box) {
    background: #0A1020 !important;
}

#wrap .quote-box {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #ED0180 !important;
    padding: 56px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

#wrap .quote-text {
    font-size: 1.4rem !important;
    color: #000000 !important;
    line-height: 1.7 !important;
    margin-bottom: 32px !important;
    font-weight: 500 !important;
}

#wrap .quote-avatar {
    width: 72px !important;
    height: 72px !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
}

/* ================================================================
   14. NAVIGATION - Clean & Bold
   ================================================================ */
#wrapwrap header,
header#top,
header {
    background: #FEF9E1 !important;
    border-bottom: none !important;
    padding: 0 !important;
}

header .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

header .navbar-brand,
.navbar-brand {
    font-weight: 900 !important;
    font-size: 2.2rem !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

/* Logo image sizing - bigger for visibility */
header .navbar-brand img,
header .navbar-brand span img,
.navbar-brand img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    object-fit: contain !important;
}

/* Dark mode: logo color invert */
.im-dark-mode header .navbar-brand img,
.im-dark-mode header .navbar-brand span img,
[data-theme="dark"] header .navbar-brand img,
[data-theme="dark"] header .navbar-brand span img {
    filter: brightness(0) invert(1) !important;
}

#top_menu .nav-link {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #000000 !important;
    padding: 12px 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.1s ease !important;
}

#top_menu .nav-link:hover {
    background: #20BEC6 !important;
}

#top_menu .nav-link.active {
    background: #000000 !important;
    color: #FFFFFF !important;
}

header .btn {
    padding: 10px 20px !important;
    font-size: 12px !important;
}

/* ================================================================
   15. FOOTER - Dark & Structured
   ================================================================ */
#wrapwrap footer,
footer#bottom,
#footer,
footer {
    background: #000000 !important;
    color: #FFFFFF !important;
    padding: 64px 0 32px !important;
    border-top: 3px solid #20BEC6 !important;
}

#footer h5,
footer h5 {
    color: #20BEC6 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    font-size: 0.9rem !important;
}

#footer p,
#footer li,
#footer a:not(.btn),
footer p,
footer a:not(.btn) {
    color: #FFFFFF !important;
    opacity: 0.8 !important;
    border-bottom: none !important;
}

#footer a:not(.btn):hover,
footer a:not(.btn):hover {
    color: #20BEC6 !important;
    opacity: 1 !important;
}

.o_footer_copyright {
    background: #000000 !important;
    padding: 24px 0 !important;
    margin-top: 40px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.o_footer_copyright * {
    color: #FFFFFF !important;
    opacity: 0.5 !important;
}

/* ================================================================
   16. FORMS - Bold Inputs
   ================================================================ */
#wrap input[type="text"],
#wrap input[type="email"],
#wrap input[type="tel"],
#wrap textarea,
#wrap select,
.form-control {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.1s ease !important;
}

#wrap input:focus,
#wrap textarea:focus,
.form-control:focus {
    outline: none !important;
    box-shadow: 5px 5px 0 #20BEC6 !important;
}

/* ================================================================
   17. VIDEO SECTION
   ================================================================ */
/* Light mode: video on cloud */
#wrap section:has(video) {
    background: #C9DEE8 !important;
    padding: 100px 0 !important;
}

/* Dark mode: video on dark */
.im-dark-mode #wrap section:has(video) {
    background: #0A1020 !important;
}

#wrap .glass-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #000000 !important;
    padding: 16px !important;
}

#wrap .glass-card video {
    border: none !important;
    width: 100% !important;
    display: block !important;
}

/* ================================================================
   18. SECTION TITLES
   ================================================================ */
#wrap .section-title,
#wrap h2 {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 16px !important;
    line-height: 1.0 !important;
}

#wrap .section-subtitle {
    font-size: 1.1rem !important;
    color: #000000 !important;
    opacity: 0.7 !important;
    max-width: 600px !important;
    margin: 0 auto 48px !important;
}

/* ================================================================
   19. THEME TOGGLE
   ================================================================ */
.neo-theme-toggle {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
    width: 60px !important;
    height: 60px !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-size: 24px !important;
    transition: all 0.1s ease !important;
    /* CENTER THE ICON */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.neo-theme-toggle * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.neo-theme-toggle:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 #000000 !important;
}

/* ================================================================
   20. DARK MODE - .im-dark-mode class + data-theme="dark"
   ================================================================ */
.im-dark-mode body,
.im-dark-mode #wrapwrap,
.im-dark-mode,
[data-theme="dark"] body,
[data-theme="dark"] #wrapwrap {
    background: #0C152A !important;
}

/* Dark mode: ALL text defaults to white (except buttons and cards) */
.im-dark-mode #wrap h1,
.im-dark-mode #wrap h2,
.im-dark-mode #wrap h3,
.im-dark-mode #wrap h4,
.im-dark-mode #wrap h5,
.im-dark-mode #wrap h6,
.im-dark-mode #wrap p,
.im-dark-mode #wrap span:not([class*="fa"]):not([class*="oi"]):not([class*="icon"]):not(.btn *):not(.text-gradient),
.im-dark-mode #wrap li,
.im-dark-mode #wrap label,
.im-dark-mode #wrap a:not(.btn):not([class*="social"]):not([class*="btn-"]),
[data-theme="dark"] #wrap h1,
[data-theme="dark"] #wrap h2,
[data-theme="dark"] #wrap h3,
[data-theme="dark"] #wrap p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Dark mode: ALL buttons - force readable text (high specificity) */
.im-dark-mode .btn-magnetic,
.im-dark-mode .btn-glow,
.im-dark-mode .btn-shine,
.im-dark-mode .cta-btn,
.im-dark-mode #wrap .btn-magnetic,
.im-dark-mode #wrap .btn-glow,
.im-dark-mode .im-theme .btn-magnetic,
.im-dark-mode .im-theme .btn-glow,
.im-dark-mode .hero-section .btn-magnetic,
.im-dark-mode .section-dark .btn-magnetic {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    background: #20BEC6 !important;
}

/* Dark mode: Outline/secondary buttons */
.im-dark-mode .btn-outline-animated,
.im-dark-mode #wrap .btn-outline-animated,
.im-dark-mode .im-theme .btn-outline-animated,
.im-dark-mode .hero-section .btn-outline-animated,
.im-dark-mode .section-darker .btn-outline-animated {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

/* Dark mode: CTA button - white on black */
.im-dark-mode .cta-section .btn,
.im-dark-mode .cta-section .cta-btn,
.im-dark-mode .cta-section .btn-magnetic {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

/* Dark mode: Generic .btn fallback */
.im-dark-mode #wrap .btn,
.im-dark-mode #wrap a.btn,
.im-dark-mode .im-theme .btn {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Ensure ALL text inside buttons inherits correctly */
.im-dark-mode .btn *,
.im-dark-mode a.btn *,
.im-dark-mode [class*="btn-"] * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Dark mode: Hero section */
.im-dark-mode #wrap .hero-section,
.im-dark-mode #wrap section:first-of-type,
[data-theme="dark"] #wrap section:first-of-type {
    background: #0C152A !important;
}

/* Dark mode: Hero subtitle readable */
.im-dark-mode #wrap .hero-section p,
.im-dark-mode #wrap section:first-of-type p {
    color: #C9DEE8 !important;
    -webkit-text-fill-color: #C9DEE8 !important;
}

/* Dark mode: Section backgrounds */
.im-dark-mode .section-dark {
    background: #0C152A !important;
}

.im-dark-mode .section-darker {
    background: #0A1020 !important;
}

/* Dark mode: Cards */
.im-dark-mode #wrap .card,
.im-dark-mode #wrap .service-card,
[data-theme="dark"] #wrap .card,
[data-theme="dark"] #wrap .service-card {
    background: #1A2340 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

.im-dark-mode #wrap .card h4,
.im-dark-mode #wrap .service-card h4,
.im-dark-mode #wrap .card p,
.im-dark-mode #wrap .service-card p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap section:has(.service-card),
[data-theme="dark"] #wrap section:has(.service-card) {
    background: #0C152A !important;
}

/* Dark mode: Service icon boxes stay colorful */
.im-dark-mode #wrap .service-icon-wrap {
    background: #20BEC6 !important;
}

.im-dark-mode #wrap .service-icon-wrap i {
    color: #000000 !important;
}

/* Dark mode: Header */
.im-dark-mode header,
.im-dark-mode #wrapwrap header,
.im-dark-mode header#top,
[data-theme="dark"] header {
    background: #0C152A !important;
    border-bottom: none !important;
}

.im-dark-mode .navbar-brand,
.im-dark-mode #top_menu .nav-link,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] #top_menu .nav-link {
    color: #FFFFFF !important;
}

.im-dark-mode #top_menu .nav-link:hover {
    background: #20BEC6 !important;
    color: #000000 !important;
}

.im-dark-mode #top_menu .nav-link.active {
    background: #20BEC6 !important;
    color: #000000 !important;
}

/* Dark mode: Search & phone buttons */
.im-dark-mode header .btn.rounded-circle,
.im-dark-mode header .o_navlink_background {
    background: #0C152A !important;
    border-color: #20BEC6 !important;
    color: #FFFFFF !important;
}

.im-dark-mode header .btn.rounded-circle i,
.im-dark-mode header .o_navlink_background i {
    color: #20BEC6 !important;
}

/* Dark mode: Header action buttons */
.im-dark-mode header .btn:not(.rounded-circle):not(.o_navlink_background),
.im-dark-mode header a.btn:not(.rounded-circle) {
    background: #20BEC6 !important;
    color: #000000 !important;
}

/* Dark mode: Phone button */
.im-dark-mode header a[href^="tel"] {
    background: #0C152A !important;
    border-color: #20BEC6 !important;
}

.im-dark-mode header a[href^="tel"]::before {
    color: #20BEC6 !important;
}

/* Dark mode: Links */
.im-dark-mode #wrap a:not(.btn):not([class*="btn-"]):not(.cta-btn) {
    color: #20BEC6 !important;
    border-bottom-color: #20BEC6 !important;
}

/* Dark mode: About section */
.im-dark-mode .section-darker {
    background: #0A1020 !important;
}

/* Dark mode: Quote/testimonial cards stay white for contrast */
.im-dark-mode #wrap .testimonial-card,
.im-dark-mode #wrap .quote-box {
    background: #FFFFFF !important;
}

.im-dark-mode #wrap .testimonial-card p,
.im-dark-mode #wrap .testimonial-card .testimonial-author,
.im-dark-mode #wrap .quote-box p {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Dark mode: Badges / labels */
.im-dark-mode #wrap .section-label,
.im-dark-mode #wrap .badge {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   21. RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
    #wrap .feature-grid,
    #wrap .row:has(.stat-item),
    #wrap .row:has(.feature-tile) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #wrap .stat-item:nth-child(2),
    #wrap .feature-tile:nth-child(2) {
        border-right: none !important;
    }

    #wrap .team-grid,
    #wrap .row:has(.team-card) {
        grid-template-columns: 1fr !important;
    }

    #wrap .team-card {
        flex-direction: column !important;
        text-align: center !important;
        border-right: none !important;
        border-bottom: 3px solid #000000 !important;
    }

    #wrap .team-card:nth-child(1),
    #wrap .team-card:nth-child(3) {
        flex-direction: column !important;
    }
}

@media (max-width: 768px) {
    #wrap .hero-title,
    #wrap section:first-of-type h1 {
        font-size: clamp(2rem, 12vw, 4rem) !important;
    }

    #wrap .text-gradient.glitch-text,
    #wrap h1 .text-gradient {
        transform: rotate(-2deg) !important;
        padding: 4px 12px !important;
        margin: 4px !important;
    }

    #wrap .btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    #wrap .feature-grid,
    #wrap .row:has(.stat-item) {
        grid-template-columns: 1fr !important;
    }

    #wrap .stat-item {
        border-right: none !important;
        border-bottom: 3px solid #000000 !important;
    }

    #wrap .stat-item:last-child {
        border-bottom: none !important;
    }
}

@media (max-width: 480px) {
    #wrap .hero-title {
        font-size: 2rem !important;
    }

    #wrap .section-title {
        font-size: 1.5rem !important;
    }

    #wrap .team-avatar {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ================================================================
   22. UTILITY CLASSES
   ================================================================ */
.nb-rotate-left { transform: rotate(-3deg) !important; }
.nb-rotate-right { transform: rotate(3deg) !important; }
.nb-shadow-horizon { box-shadow: 6px 6px 0 #20BEC6 !important; }
.nb-shadow-magenta { box-shadow: 6px 6px 0 #ED0180 !important; }
.nb-shadow-black { box-shadow: 6px 6px 0 #000000 !important; }

/* ================================================================
   23. CONTRAST FIXES - Ensure all text is readable
   ================================================================ */

/* Dark backgrounds need white text - always-dark sections */
#wrap section[style*="background"]:has([style*="#0C152A"]) *,
#wrap section:has(.team-card) p,
#wrap section:has(.team-card) span,
#wrap section:has(.testimonial-card) p:not(.testimonial-text),
#wrap section:has(.testimonial-card) .section-subtitle {
    color: #FFFFFF !important;
}

/* section-dark/darker white text ONLY in dark mode */
.im-dark-mode #wrap .section-dark h1,
.im-dark-mode #wrap .section-dark h2,
.im-dark-mode #wrap .section-dark h3,
.im-dark-mode #wrap .section-dark h4,
.im-dark-mode #wrap .section-dark h5,
.im-dark-mode #wrap .section-dark p,
.im-dark-mode #wrap .section-dark li,
.im-dark-mode #wrap .section-dark label,
.im-dark-mode #wrap .section-dark span:not([class*="fa"]):not([class*="oi"]):not([class*="icon"]):not(.text-gradient),
.im-dark-mode #wrap .section-dark a:not(.btn):not([class*="btn-"]):not([class*="social"]),
.im-dark-mode #wrap .section-darker h1,
.im-dark-mode #wrap .section-darker h2,
.im-dark-mode #wrap .section-darker h3,
.im-dark-mode #wrap .section-darker h4,
.im-dark-mode #wrap .section-darker h5,
.im-dark-mode #wrap .section-darker p,
.im-dark-mode #wrap .section-darker li,
.im-dark-mode #wrap .section-darker label,
.im-dark-mode #wrap .section-darker span:not([class*="fa"]):not([class*="oi"]):not([class*="icon"]):not(.text-gradient),
.im-dark-mode #wrap .section-darker a:not(.btn):not([class*="btn-"]):not([class*="social"]) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Cloud/light blue backgrounds need dark text */
#wrap section:has(.quote-box) h2,
#wrap section:has(.quote-box) p,
#wrap section:has(.quote-box) .section-title,
#wrap section:has(.quote-box) .section-subtitle,
#wrap section:has(video) h2,
#wrap section:has(video) p,
#wrap section:has(video) .section-title {
    color: #000000 !important;
}

/* CTA section - dark text on teal background */
#wrap .cta-section p,
#wrap .cta-section .section-subtitle {
    color: #000000 !important;
    opacity: 0.9 !important;
}

/* Ensure card text is always readable */
#wrap .service-card h4,
#wrap .service-card p,
#wrap .card h4,
#wrap .card p,
#wrap .testimonial-card p,
#wrap .quote-box p {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Stats section - ensure numbers are visible */
#wrap .stat-item:nth-child(1) *,
#wrap .feature-tile:nth-child(1) * {
    color: #000000 !important;
}

#wrap .stat-item:nth-child(2) *,
#wrap .stat-item:nth-child(3) *,
#wrap .feature-tile:nth-child(2) *,
#wrap .feature-tile:nth-child(3) * {
    color: #FFFFFF !important;
}

#wrap .stat-item:nth-child(4) *,
#wrap .feature-tile:nth-child(4) * {
    color: #000000 !important;
}

/* Service section titles and text */
#wrap section:has(.service-card) .section-title,
#wrap section:has(.service-card) .section-subtitle,
#wrap section:has(.service-card) h2,
#wrap section:has(.service-card) > .container > .text-center p {
    color: #000000 !important;
}

/* ================================================================
   24. HEADER CONTACT BUTTON FIX
   ================================================================ */
header .btn,
header a.btn,
#wrapwrap header .btn,
#wrapwrap header a.btn,
header .btn-primary,
header a.btn-primary,
.o_header_standard .btn,
nav .btn,
#top .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #000000 !important;
    text-decoration: none !important;
    transition: all 0.1s ease !important;
}

header .btn:hover,
header a.btn:hover,
#wrapwrap header .btn:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #20BEC6 !important;
    color: #000000 !important;
}

/* ================================================================
   25. HIDE "PARTNER" TEXT
   ================================================================ */
/* Hide Partner label/text in partner sections */
.partner-label,
.partner-title,
[class*="partner"] > span:first-child,
[class*="partner"] .card-subtitle,
.s_references .card-body span,
.s_references .partner-name + span,
.s_references small,
#wrap section:has([class*="partner"]) .card small,
#wrap section:has([class*="partner"]) .card-body > span:not(.partner-name):not([class*="fa"]),
#wrap [class*="client"] small,
#wrap [class*="partner"] small {
    display: none !important;
}

/* Hide any text that literally says "Partner" */
#wrap span:not([class]):not([id]) {
    /* Only hide if it contains "Partner" - done via content matching if needed */
}

/* ================================================================
   26. SOCIAL ICONS FIX
   ================================================================ */
.s_social_media a,
.o_share_links a,
footer .social-icons a,
footer a[href*="facebook"],
footer a[href*="twitter"],
footer a[href*="linkedin"],
footer a[href*="instagram"],
footer a[href*="youtube"],
[class*="social"] a,
.s_references .social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: #20BEC6 !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    margin: 4px !important;
    transition: all 0.1s ease !important;
}

.s_social_media a:hover,
footer [class*="social"] a:hover {
    background: #ED0180 !important;
    transform: translate(2px, 2px) !important;
}

.s_social_media i,
footer [class*="social"] i,
footer a[href*="facebook"] i,
footer a[href*="twitter"] i,
footer a[href*="linkedin"] i,
footer a[href*="instagram"] i {
    color: #000000 !important;
    font-size: 18px !important;
}

/* ================================================================
   27. SEARCH & PHONE BUTTONS - Fixed Size Icons
   ================================================================ */
/* Search button in header - target the specific Odoo classes */
header .btn.rounded-circle,
header .o_navlink_background,
header .btn.rounded-circle.p-1,
#o_main_nav .btn.rounded-circle,
#o_main_nav .o_navlink_background,
header .o_searchbar_form button,
header button[type="submit"],
header .btn-search,
.o_search_modal_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: #FEF9E1 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    cursor: pointer !important;
    box-shadow: 3px 3px 0 #000000 !important;
    line-height: 1 !important;
}

/* Remove the rounded-circle effect */
header .rounded-circle,
#o_main_nav .rounded-circle {
    border-radius: 0 !important;
}

/* Search icon inside the button */
header .btn.rounded-circle i,
header .o_navlink_background i,
#o_main_nav .btn.rounded-circle i,
header .btn i.fa,
header .btn i.oi,
header .btn i[class*="fa-"],
header .btn i[class*="oi-"] {
    font-family: 'FontAwesome', 'odoo_ui_icons' !important;
    font-size: 18px !important;
    color: #000000 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Force search icon to show magnifying glass */
header .btn i.fa-search::before,
header .btn i.oi-search::before,
header .btn.rounded-circle i::before,
header .o_navlink_background i::before {
    content: "\f002" !important;
    font-family: 'FontAwesome' !important;
    display: inline-block !important;
}

/* If using Odoo icons (oi-search) */
header .btn i.oi-search::before {
    content: "\e808" !important;
    font-family: 'odoo_ui_icons' !important;
}

header .btn.rounded-circle:hover,
header .o_navlink_background:hover,
#o_main_nav .btn.rounded-circle:hover {
    background: #20BEC6 !important;
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #000000 !important;
}

/* Phone button */
header a[href^="tel"],
#wrapwrap header a[href^="tel"],
.phone-btn,
a.phone-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.1s ease !important;
}

header a[href^="tel"]:hover {
    background: #20BEC6 !important;
}

/* ================================================================
   28. FOOTER ICONS FIX
   ================================================================ */
#footer .fa,
footer .fa,
#footer [class*="fa-"],
footer [class*="fa-"] {
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    color: #FFFFFF !important;
}

#footer .oi,
footer .oi,
#footer [class*="oi-"],
footer [class*="oi-"] {
    font-family: 'odoo_ui_icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-block !important;
    color: #FFFFFF !important;
}

#footer a i,
footer a i {
    color: #20BEC6 !important;
}

#footer a:hover i,
footer a:hover i {
    color: #ED0180 !important;
}

/* Footer social icons wrapper */
#footer .s_social_media,
footer .s_social_media {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#footer .s_social_media a,
footer .s_social_media a {
    background: transparent !important;
    border: 2px solid #20BEC6 !important;
}

#footer .s_social_media a:hover,
footer .s_social_media a:hover {
    background: #20BEC6 !important;
}

#footer .s_social_media a i,
footer .s_social_media a i {
    color: #20BEC6 !important;
}

#footer .s_social_media a:hover i,
footer .s_social_media a:hover i {
    color: #000000 !important;
}

/* ================================================================
   29. ALL BUTTONS - Uniform Size
   ================================================================ */
/* Make ALL buttons same size throughout the site */
#wrap .btn,
#wrap .btn-primary,
#wrap .btn-secondary,
#wrap .btn-outline,
#wrap .btn-outline-primary,
#wrap .btn-outline-secondary,
#wrap .btn-outline-animated,
#wrap .btn-magnetic,
#wrap .btn-glow,
#wrap .btn-shine,
#wrap a.btn,
#wrapwrap .btn,
.s_website_form_send,
button.btn {
    padding: 18px 36px !important;
    font-size: 15px !important;
    min-width: 180px !important;
    min-height: 56px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* Header buttons - slightly smaller */
header .btn,
header a.btn,
#wrapwrap header .btn,
nav .btn {
    padding: 12px 24px !important;
    font-size: 13px !important;
    min-width: 140px !important;
    min-height: 48px !important;
}

/* ================================================================
   30. PHONE ICON IN HEADER - Replace number with icon
   ================================================================ */
header a[href^="tel"],
#wrapwrap header a[href^="tel"] {
    font-size: 0 !important; /* Hide text */
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    position: relative !important;
}

header a[href^="tel"]::before,
#wrapwrap header a[href^="tel"]::before {
    content: "\f095" !important; /* FontAwesome phone icon */
    font-family: 'FontAwesome' !important;
    font-size: 20px !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

header a[href^="tel"]:hover,
#wrapwrap header a[href^="tel"]:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #000000 !important;
}

/* ================================================================
   31. WHAT WE DO TILES - Keep Original Layout
   ================================================================ */
/* Don't break the original layout - just ensure consistent card styling */
#wrap .service-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    padding: 32px !important;
}

/* View All Services button - add spacing */
#wrap section:has(.service-card) > .container > .text-center:last-child {
    margin-top: 32px !important;
}

/* ================================================================
   32. TEAM SECTION - Hide Partners text & social icons
   ================================================================ */
/* Hide "Partners" text/label */
#wrap section:has(.team-card) .partner-label,
#wrap section:has(.team-card) .card-subtitle,
#wrap section:has(.team-card) small,
#wrap section:has(.team-card) .team-role,
#wrap section:has(.team-card) span:not(.team-name):not(.team-avatar):not([class*="fa"]):not(.text-gradient),
#wrap .team-card small,
#wrap .team-card .partner-text,
#wrap .team-card > div > span:last-child {
    display: none !important;
}

/* Hide social icons in team cards */
#wrap section:has(.team-card) .s_social_media,
#wrap section:has(.team-card) .social-icons,
#wrap section:has(.team-card) [class*="social"],
#wrap section:has(.team-card) a[href*="facebook"],
#wrap section:has(.team-card) a[href*="twitter"],
#wrap section:has(.team-card) a[href*="linkedin"],
#wrap section:has(.team-card) a[href*="instagram"],
#wrap .team-card .s_social_media,
#wrap .team-card .social-links,
#wrap .team-card a.social-link {
    display: none !important;
}

/* Team card - show only avatar and name */
#wrap .team-card {
    padding: 40px 32px !important;
}

#wrap .team-avatar {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 16px !important;
}

#wrap .team-name {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* ================================================================
   33. READY TO START BOX - Smooth Borders
   ================================================================ */
#wrap .cta-section,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker),
#wrap section:has(.cta-section),
#wrap [class*="ready"],
#wrap [class*="start-project"] {
    /* Smooth borders - anti-aliasing */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform: translateZ(0) !important;
}

#wrap .cta-section .container,
#wrap .cta-section .row {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* CTA box if it has a border */
#wrap .cta-section > .container > div,
#wrap .cta-section .cta-box,
#wrap section:last-of-type .card {
    border-radius: 0 !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* ================================================================
   34. FOOTER SOCIAL ICONS - Match Theme
   ================================================================ */
/* Remove ALL old circular backgrounds and styles */
#footer .s_social_media a::before,
#footer .s_social_media a::after,
footer .s_social_media a::before,
footer .s_social_media a::after,
#footer [class*="social"] a::before,
#footer [class*="social"] a::after,
footer [class*="social"] a::before,
footer [class*="social"] a::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Restyle footer social icons to match neobrutalism theme */
#footer .s_social_media,
footer .s_social_media,
#footer [class*="social"],
footer [class*="social"] {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}

#footer .s_social_media a,
footer .s_social_media a,
#footer [class*="social"] a,
footer [class*="social"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #20BEC6 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    transition: all 0.1s ease !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

#footer .s_social_media a:hover,
footer .s_social_media a:hover,
#footer [class*="social"] a:hover,
footer [class*="social"] a:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #ED0180 !important;
}

#footer .s_social_media a i,
#footer .s_social_media a .fa,
footer .s_social_media a i,
footer [class*="social"] a i {
    font-family: 'FontAwesome' !important;
    font-size: 20px !important;
    color: #000000 !important;
    font-weight: normal !important;
    background: none !important;
    border-radius: 0 !important;
}

#footer .s_social_media a:hover i,
footer .s_social_media a:hover i,
footer [class*="social"] a:hover i {
    color: #FFFFFF !important;
}

/* Remove any circular icon wrappers */
#footer .s_social_media a > span,
footer .s_social_media a > span,
#footer .s_social_media a > div,
footer .s_social_media a > div {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ================================================================
   35. SOCIAL MEDIA ICONS FIX - Force correct icons
   ================================================================ */
/* Base styling for all social icons */
.s_social_media a i,
footer .s_social_media a i,
#footer .s_social_media a i,
footer a[href*="facebook"] i,
footer a[href*="twitter"] i,
footer a[href*="linkedin"] i,
footer a[href*="instagram"] i,
footer a[href*="youtube"] i {
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 20px !important;
}

/* Force specific icon content for each social platform */
.fa-facebook::before,
footer a[href*="facebook"] i::before {
    content: "\f09a" !important;
    font-family: 'FontAwesome' !important;
}

.fa-twitter::before,
footer a[href*="twitter"] i::before {
    content: "\f099" !important;
    font-family: 'FontAwesome' !important;
}

.fa-linkedin::before,
footer a[href*="linkedin"] i::before {
    content: "\f0e1" !important;
    font-family: 'FontAwesome' !important;
}

.fa-instagram::before,
footer a[href*="instagram"] i::before,
#footer a[href*="instagram"] i::before,
.s_social_media a[href*="instagram"] i::before {
    content: "\f16d" !important;
    font-family: 'FontAwesome' !important;
}

.fa-youtube::before,
footer a[href*="youtube"] i::before {
    content: "\f167" !important;
    font-family: 'FontAwesome' !important;
}

/* ================================================================
   36. ALL BUTTONS HOVER ANIMATION
   ================================================================ */
/* Ensure ALL buttons have the shift animation on hover */
#wrap .btn,
#wrap .btn-primary,
#wrap .btn-secondary,
#wrap .btn-outline,
#wrap a.btn,
#wrapwrap .btn,
button.btn {
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease !important;
}

#wrap .btn:hover,
#wrap .btn-primary:hover,
#wrap a.btn:hover,
#wrapwrap .btn:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #000000 !important;
}

/* ================================================================
   37. CONSISTENT SPACING SYSTEM
   ================================================================ */

/* === SECTION SPACING === */
/* All main sections get consistent vertical padding */
#wrap > section,
#wrap .im-theme > section,
#wrap section.s_text_image,
#wrap section.s_image_text,
#wrap section.s_three_columns,
#wrap section.s_features,
#wrap section.s_references,
#wrap section.s_comparisons,
#wrap section.s_call_to_action,
#wrap section[data-snippet],
#wrap .oe_structure > section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Hero section - more top padding for header clearance */
#wrap > section:first-of-type,
#wrap .im-theme > section:first-of-type,
#wrap .hero-section,
#wrap section.s_cover {
    padding-top: 100px !important;
    padding-bottom: 80px !important;
}

/* Sections with colored backgrounds - full bleed (horizontal only) */
#wrap section:has(.stat-item),
#wrap section:has(.feature-tile) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* CTA section */
#wrap .cta-section,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* === CONTAINER SPACING === */
#wrap .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (min-width: 768px) {
    #wrap .container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (min-width: 1200px) {
    #wrap .container {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}

/* === SECTION TITLE SPACING === */
#wrap .section-title,
#wrap section h2:first-of-type {
    margin-bottom: 16px !important;
}

#wrap .section-subtitle,
#wrap section > .container > .text-center > p:first-of-type {
    margin-bottom: 48px !important;
}

#wrap .section-label,
#wrap .badge {
    margin-bottom: 16px !important;
}

/* === HEADING SPACING === */
#wrap h1 {
    margin-bottom: 24px !important;
}

#wrap h2 {
    margin-bottom: 16px !important;
}

#wrap h3, #wrap h4 {
    margin-bottom: 12px !important;
}

/* === PARAGRAPH SPACING === */
#wrap p {
    margin-bottom: 16px !important;
}

#wrap p:last-child {
    margin-bottom: 0 !important;
}

/* === BUTTON SPACING === */
#wrap .btn {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Hero buttons */
#wrap section:first-of-type .btn,
#wrap .hero-section .btn {
    margin: 8px !important;
}

/* Button groups */
#wrap .btn + .btn,
#wrap .btn-group .btn {
    margin-left: 16px !important;
}

/* === CARD SPACING === */
#wrap .card,
#wrap .testimonial-card {
    padding: 32px !important;
    margin-bottom: 24px !important;
}

#wrap .service-card {
    padding: 32px !important;
}

/* Cards in grid - remove bottom margin on last row */
#wrap .row > [class*="col"]:last-child .card {
    margin-bottom: 0 !important;
}

/* === ROW SPACING === */
#wrap .row {
    margin-bottom: 24px !important;
}

#wrap .row:last-child {
    margin-bottom: 0 !important;
}

/* Row with cards - flex alignment for consistent card tops */
#wrap section:has(.service-card) .row,
#wrap section:has(.card) .row {
    margin-bottom: 32px !important;
    align-items: stretch !important;
}

/* Make columns flex containers so cards fill height evenly */
#wrap section:has(.service-card) .row > [class*="col"] {
    display: flex !important;
    flex-direction: column !important;
}

/* Service cards fill their column height */
#wrap section:has(.service-card) .row > [class*="col"] > .service-card {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

/* === ICON WRAPPER SPACING === */
#wrap .service-icon-wrap {
    margin-bottom: 20px !important;
}

/* === TEAM SECTION SPACING === */
#wrap .team-card {
    padding: 40px 32px !important;
}

#wrap .team-avatar {
    margin-bottom: 16px !important;
}

#wrap .team-name {
    margin-bottom: 8px !important;
}

/* === TESTIMONIAL SPACING === */
#wrap .testimonial-card {
    padding: 40px !important;
}

#wrap .testimonial-text {
    margin-bottom: 24px !important;
}

#wrap .testimonial-author {
    margin-bottom: 4px !important;
}

/* === STATS SECTION SPACING === */
#wrap .stat-item {
    padding: 48px 24px !important;
}

#wrap .stat-number {
    margin-bottom: 8px !important;
}

/* === QUOTE BOX SPACING === */
#wrap .quote-box {
    padding: 48px !important;
}

#wrap .quote-text {
    margin-bottom: 32px !important;
}

/* === HEADER SPACING === */
header,
#wrapwrap header {
    padding: 16px 0 !important;
}

header .navbar {
    padding: 0 !important;
}

header .navbar-brand {
    margin-right: 32px !important;
}

#top_menu .nav-item {
    margin: 0 4px !important;
}

#top_menu .nav-link {
    padding: 12px 16px !important;
}

header .btn {
    margin-left: 16px !important;
}

/* === FOOTER SPACING === */
#footer,
footer {
    padding-top: 64px !important;
    padding-bottom: 32px !important;
}

#footer h5,
footer h5 {
    margin-bottom: 20px !important;
}

#footer ul,
footer ul {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

#footer li,
footer li {
    margin-bottom: 8px !important;
}

#footer .s_social_media {
    margin-top: 24px !important;
}

.o_footer_copyright {
    padding: 24px 0 !important;
    margin-top: 48px !important;
}

/* === FORM SPACING === */
#wrap .form-group,
#wrap .s_website_form_field {
    margin-bottom: 20px !important;
}

#wrap input,
#wrap textarea,
#wrap select {
    margin-bottom: 0 !important;
}

#wrap label {
    margin-bottom: 8px !important;
}

/* === RESPONSIVE SPACING === */
@media (max-width: 991px) {
    #wrap > section,
    #wrap section[data-snippet] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    #wrap > section:first-of-type {
        padding-top: 80px !important;
    }

    #wrap .card,
    #wrap .service-card {
        padding: 24px !important;
    }

    #wrap .team-card {
        padding: 32px 24px !important;
    }

    #wrap .quote-box {
        padding: 32px !important;
    }
}

@media (max-width: 767px) {
    #wrap > section,
    #wrap section[data-snippet] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    #wrap > section:first-of-type {
        padding-top: 64px !important;
    }

    #wrap .section-subtitle {
        margin-bottom: 32px !important;
    }

    #wrap .card,
    #wrap .service-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }

    #wrap .stat-item {
        padding: 32px 16px !important;
    }

    #wrap .team-card {
        padding: 24px 16px !important;
    }

    #wrap .testimonial-card {
        padding: 24px !important;
    }

    #wrap .quote-box {
        padding: 24px !important;
    }

    #footer,
    footer {
        padding-top: 48px !important;
    }
}

/* ================================================================
   38. FOOTER - Hide Home Icon & Fix Social Icons
   ================================================================ */
/* Hide the fa-home "Extra page" link in footer social media */
/* Use #footer ID for specificity to override Section 34 rules */
#footer .s_social_media a.text-800,
#footer .s_social_media a[href="/"],
#footer .s_social_media a[aria-label="Extra page"],
footer .s_social_media a.text-800,
footer .s_social_media a[href="/"],
footer .s_social_media a[aria-label="Extra page"],
.s_social_media a.text-800,
.s_social_media a[href="/"],
.s_social_media a[aria-label="Extra page"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Also hide the home icon itself as extra safety */
#footer .fa-home,
#footer i.fa-home,
footer .fa-home,
footer i.fa-home,
.s_social_media .fa-home {
    display: none !important;
}

/* Remove rounded-circle and shadow-sm from ALL social icons */
footer .s_social_media a i.rounded-circle,
footer .s_social_media a i.shadow-sm,
.s_social_media i.rounded-circle,
.s_social_media i.shadow-sm,
footer i.rounded-circle,
footer i.shadow-sm {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
}

/* ================================================================
   39. ABOUT SECTION - Hide "Partner" Text
   ================================================================ */
/* Hide "Partner" role text everywhere */
.quote-role,
.im-theme .quote-role,
#wrap .quote-role,
.im-theme .section-darker .quote-role,
.im-theme .section-darker .partner-label,
.im-theme .section-darker small,
#wrap .quote-box small,
#wrap .quote-box .partner-text,
.team-role {
    display: none !important;
}

/* ================================================================
   40. BUTTON TEXT COLOR FIXES
   ================================================================ */
/* "Explore Services" secondary button - ensure text is black, not magenta */
#wrap .btn-secondary,
#wrap .btn-outline-primary,
#wrap .btn-outline,
.im-theme .btn-secondary,
.im-theme .btn-outline {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

/* CTA section button */
.cta-section .btn,
.im-theme .cta-section .btn {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

.cta-section .btn:hover,
.im-theme .cta-section .btn:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #ED0180 !important;
}

/* ================================================================
   41. DARK MODE - Footer adjustments
   ================================================================ */
.im-dark-mode footer,
.im-dark-mode #footer {
    background: #000000 !important;
    border-top-color: #20BEC6 !important;
}

.im-dark-mode footer h5,
.im-dark-mode #footer h5 {
    color: #20BEC6 !important;
}

.im-dark-mode footer p,
.im-dark-mode footer a:not(.btn),
.im-dark-mode footer li {
    color: #FFFFFF !important;
}

/* ================================================================
   42. DARK MODE - Theme Toggle Icon Fix
   ================================================================ */
/* Light mode: show sun, hide moon */
.neo-theme-toggle .icon-sun {
    opacity: 1 !important;
}

.neo-theme-toggle .icon-moon {
    opacity: 0 !important;
}

/* Dark mode: show moon, hide sun */
.im-dark-mode .neo-theme-toggle .icon-sun,
[data-theme="dark"] .neo-theme-toggle .icon-sun {
    opacity: 0 !important;
}

.im-dark-mode .neo-theme-toggle .icon-moon,
[data-theme="dark"] .neo-theme-toggle .icon-moon {
    opacity: 1 !important;
}

/* ================================================================
   43. INNER PAGE SECTION BACKGROUNDS - Light Mode Defaults
   ================================================================ */
/* Light mode: section-dark = white background */
#wrap .section-dark {
    background: #FFFFFF !important;
}

/* Light mode: section-darker = cloud/light gray background */
#wrap .section-darker {
    background: #C9DEE8 !important;
}

/* Override Odoo's o_colored_level dark backgrounds in light mode */
#wrap .section-dark.o_colored_level,
#wrap .section-darker.o_colored_level {
    background-color: inherit !important;
}

/* ================================================================
   44. DARK MODE - Section Overrides (Comprehensive)
   ================================================================ */
/* Dark mode backgrounds override light defaults */
.im-dark-mode #wrap .section-dark,
.im-dark-mode #wrap .section-dark.o_colored_level {
    background: #0C152A !important;
}

.im-dark-mode #wrap .section-darker,
.im-dark-mode #wrap .section-darker.o_colored_level {
    background: #0A1020 !important;
}

/* Dark mode: Glass cards */
.im-dark-mode #wrap .glass-card {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
}

.im-dark-mode #wrap .glass-card h3,
.im-dark-mode #wrap .glass-card h4,
.im-dark-mode #wrap .glass-card p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Dark mode: Bullet list markers */
.im-dark-mode #wrap .section-dark ul li::marker,
.im-dark-mode #wrap .section-darker ul li::marker {
    color: #20BEC6 !important;
}

/* Dark mode: Section links */
.im-dark-mode #wrap .section-dark a:not(.btn):not([class*="btn-"]):not([class*="social"]),
.im-dark-mode #wrap .section-darker a:not(.btn):not([class*="btn-"]):not([class*="social"]) {
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
    border-bottom-color: #20BEC6 !important;
}

/* Dark mode: Service images */
.im-dark-mode #wrap .section-dark img,
.im-dark-mode #wrap .section-darker img {
    border-color: #20BEC6 !important;
}

/* ================================================================
   45. LIGHT MODE - Glass Cards & Content Elements
   ================================================================ */
/* Light mode glass cards */
#wrap .section-dark .glass-card,
#wrap .section-darker .glass-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

/* Light mode glass card text */
#wrap .glass-card h3,
#wrap .glass-card h4,
#wrap .glass-card p {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Light mode: section-dark/darker text defaults to dark */
#wrap .section-dark h1,
#wrap .section-dark h2,
#wrap .section-dark h3,
#wrap .section-dark h4,
#wrap .section-dark h5,
#wrap .section-dark p,
#wrap .section-dark li,
#wrap .section-dark label,
#wrap .section-darker h1,
#wrap .section-darker h2,
#wrap .section-darker h3,
#wrap .section-darker h4,
#wrap .section-darker h5,
#wrap .section-darker p,
#wrap .section-darker li,
#wrap .section-darker label {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   46. ABOUT PAGE - Team Leads & Management
   ================================================================ */
/* Team grid for small team members (about page) */
#wrap .team-grid-small {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    padding: 24px !important;
}

#wrap .team-member-simple {
    text-align: center !important;
    padding: 16px !important;
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 4px 4px 0 #20BEC6 !important;
    transition: all 0.1s ease !important;
}

#wrap .team-member-simple:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #20BEC6 !important;
}

.im-dark-mode #wrap .team-member-simple {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
}

#wrap .team-avatar-small {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    box-shadow: 3px 3px 0 #ED0180 !important;
}

.im-dark-mode #wrap .team-avatar-small {
    border-color: #20BEC6 !important;
}

#wrap .team-member-simple h6,
#wrap .team-member-simple p,
#wrap .team-member-simple small {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.im-dark-mode #wrap .team-member-simple h6,
.im-dark-mode #wrap .team-member-simple p,
.im-dark-mode #wrap .team-member-simple small {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   47. SERVICES PAGE - Layout Fixes
   ================================================================ */
/* Service detail sections - ensure rows align content */
#wrap .section-dark .row,
#wrap .section-darker .row {
    align-items: center !important;
}

/* Service section images */
#wrap .section-dark img[data-shape],
#wrap .section-darker img[data-shape],
#wrap .section-dark .glass-card img,
#wrap .section-darker .glass-card img {
    max-width: 100% !important;
    height: auto !important;
}

/* Service bullet lists - light mode */
#wrap .section-dark ul,
#wrap .section-darker ul {
    padding-left: 20px !important;
}

#wrap .section-dark ul li,
#wrap .section-darker ul li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

/* ================================================================
   48. RESPONSIVE IMPROVEMENTS
   ================================================================ */
/* Fix empty space below footer - ensure wrapwrap takes full height */
#wrapwrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

#wrapwrap #wrap {
    flex: 1 !important;
}

/* Scroll progress bar */
#im-scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    background: #ED0180 !important;
    z-index: 100000 !important;
    transition: width 0.1s ease !important;
}

/* Mobile nav improvements */
@media (max-width: 991px) {
    header .navbar-toggler {
        border: 3px solid #000000 !important;
        border-radius: 0 !important;
        padding: 8px 12px !important;
        box-shadow: 3px 3px 0 #000000 !important;
    }

    .im-dark-mode header .navbar-toggler {
        border-color: #20BEC6 !important;
        box-shadow: 3px 3px 0 #20BEC6 !important;
        color: #FFFFFF !important;
    }

    /* Mobile menu */
    header .navbar-collapse {
        background: #FEF9E1 !important;
        border: 3px solid #000000 !important;
        padding: 16px !important;
        margin-top: 8px !important;
    }

    .im-dark-mode header .navbar-collapse {
        background: #0C152A !important;
        border-color: #20BEC6 !important;
    }

    /* Stack header buttons */
    header .btn {
        margin: 8px 0 !important;
        width: 100% !important;
    }
}

/* Tablet services layout */
@media (max-width: 992px) {
    #wrap .section-dark .row > [class*="col-lg"],
    #wrap .section-darker .row > [class*="col-lg"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }

    /* About page team grid */
    #wrap .team-grid-small {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
    /* Feature tiles single column */
    #wrap .feature-grid,
    #wrap .row:has(.feature-tile) {
        grid-template-columns: 1fr !important;
    }

    #wrap .feature-tile {
        border-right: none !important;
        border-bottom: 3px solid #000000 !important;
        min-height: 120px !important;
        padding: 32px 16px !important;
    }

    #wrap .feature-tile:last-child {
        border-bottom: none !important;
    }

    /* Service cards on mobile */
    #wrap .glass-card {
        margin-bottom: 24px !important;
    }

    /* About page team grid on mobile */
    #wrap .team-grid-small {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #wrap .team-avatar-small {
        width: 56px !important;
        height: 56px !important;
        font-size: 1rem !important;
    }

    /* CTA section responsive */
    #wrap .cta-section h2,
    #wrap section:last-of-type h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }

    /* Buttons full width on mobile */
    #wrap .section-dark .btn,
    #wrap .section-darker .btn,
    #wrap .cta-section .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    #wrap .team-grid-small {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    #wrap .team-member-simple {
        padding: 8px !important;
    }

    #wrap .team-avatar-small {
        width: 48px !important;
        height: 48px !important;
        font-size: 0.875rem !important;
    }
}

/* ================================================================
   49. HERO BUTTONS - Consistent Neobrutalist Pair
   ================================================================ */
/* Primary hero button: teal bg, black text, black shadow */
#wrap section:first-of-type .btn-magnetic,
#wrap section:first-of-type .btn-primary,
#wrap .hero-section .btn-magnetic,
#wrap .hero-section .btn-primary {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #000000 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#wrap section:first-of-type .btn-magnetic:hover,
#wrap .hero-section .btn-magnetic:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Secondary hero button: white bg, magenta shadow */
#wrap section:first-of-type .btn-outline-animated,
#wrap section:first-of-type .btn-secondary,
#wrap .hero-section .btn-outline-animated {
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#wrap section:first-of-type .btn-outline-animated:hover,
#wrap .hero-section .btn-outline-animated:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #ED0180 !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Dark mode hero buttons */
.im-dark-mode #wrap section:first-of-type .btn-magnetic,
.im-dark-mode #wrap .hero-section .btn-magnetic {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: 5px 5px 0 #FFFFFF !important;
}

.im-dark-mode #wrap section:first-of-type .btn-magnetic:hover,
.im-dark-mode #wrap .hero-section .btn-magnetic:hover {
    box-shadow: 0 0 0 #FFFFFF !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap section:first-of-type .btn-outline-animated,
.im-dark-mode #wrap .hero-section .btn-outline-animated {
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

.im-dark-mode #wrap section:first-of-type .btn-outline-animated:hover,
.im-dark-mode #wrap .hero-section .btn-outline-animated:hover {
    box-shadow: 0 0 0 #ED0180 !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   50. "LAHORE BASED" TILE - Dark Mode Visibility
   ================================================================ */
/* In dark mode, 4th tile cream bg is invisible - use teal instead */
.im-dark-mode #wrap .stat-item:nth-child(4),
.im-dark-mode #wrap .feature-tile:nth-child(4) {
    background: #20BEC6 !important;
}

.im-dark-mode #wrap .stat-item:nth-child(4) *,
.im-dark-mode #wrap .feature-tile:nth-child(4) * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   51. TESTIMONIAL CARDS - Dark Mode Text Fix (High Specificity)
   ================================================================ */
/* Cards stay white - need .section-dark prefix to beat dark section rules */
.im-dark-mode #wrap .section-dark .testimonial-card,
.im-dark-mode #wrap .section-darker .testimonial-card,
.im-dark-mode #wrap section .testimonial-card,
[data-theme="dark"] #wrap .testimonial-card {
    background: #FFFFFF !important;
    border-color: #000000 !important;
}

/* ALL text inside testimonial cards forced black - beats .section-dark p rule */
.im-dark-mode #wrap .section-dark .testimonial-card p,
.im-dark-mode #wrap .section-dark .testimonial-card div,
.im-dark-mode #wrap .section-dark .testimonial-card span,
.im-dark-mode #wrap .section-darker .testimonial-card p,
.im-dark-mode #wrap .section-darker .testimonial-card div,
.im-dark-mode #wrap .section-darker .testimonial-card span,
.im-dark-mode #wrap section .testimonial-card p,
.im-dark-mode #wrap section .testimonial-card div,
.im-dark-mode #wrap section .testimonial-card span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Restore magenta for role text */
.im-dark-mode #wrap .section-dark .testimonial-card .testimonial-role,
.im-dark-mode #wrap .section-darker .testimonial-card .testimonial-role,
.im-dark-mode #wrap section .testimonial-card .testimonial-role {
    color: #ED0180 !important;
    -webkit-text-fill-color: #ED0180 !important;
}

/* Restore teal for quote marks */
.im-dark-mode #wrap section .testimonial-card::before {
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
}

.im-dark-mode #wrap section .testimonial-card:nth-child(2n)::before {
    color: #ED0180 !important;
    -webkit-text-fill-color: #ED0180 !important;
}

/* ================================================================
   52. QUOTE BOX - Dark Mode Text Fix (High Specificity)
   ================================================================ */
/* Quote box stays white */
.im-dark-mode #wrap .section-dark .quote-box,
.im-dark-mode #wrap .section-darker .quote-box,
.im-dark-mode #wrap section .quote-box,
[data-theme="dark"] #wrap .quote-box {
    background: #FFFFFF !important;
    border-color: #000000 !important;
}

/* ALL text inside quote box forced black - beats .section-dark/darker rules */
.im-dark-mode #wrap .section-dark .quote-box p,
.im-dark-mode #wrap .section-dark .quote-box div,
.im-dark-mode #wrap .section-dark .quote-box span,
.im-dark-mode #wrap .section-darker .quote-box p,
.im-dark-mode #wrap .section-darker .quote-box div,
.im-dark-mode #wrap .section-darker .quote-box span,
.im-dark-mode #wrap section .quote-box p,
.im-dark-mode #wrap section .quote-box div,
.im-dark-mode #wrap section .quote-box span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   53. "DISCOVER OUR STORY" BUTTON - Consistent Neobrutalism
   ================================================================ */
/* About section button - match neobrutalism style */
#wrap section:has(.quote-box) .btn,
#wrap section:has(.quote-box) a.btn {
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #000000 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

#wrap section:has(.quote-box) .btn:hover,
#wrap section:has(.quote-box) a.btn:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap section:has(.quote-box) .btn,
.im-dark-mode #wrap section:has(.quote-box) a.btn {
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 5px 5px 0 #20BEC6 !important;
}

.im-dark-mode #wrap section:has(.quote-box) .btn:hover,
.im-dark-mode #wrap section:has(.quote-box) a.btn:hover {
    box-shadow: 0 0 0 #20BEC6 !important;
}

/* ================================================================
   54. CTA SECTION - Improved Contrast
   ================================================================ */
/* Light mode CTA: teal bg with black text and white button */
#wrap .cta-section p,
#wrap .cta-section .section-subtitle,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) p {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 0.85 !important;
}

/* CTA button - black bg, white text with magenta shadow */
#wrap .cta-section .btn,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) .btn {
    background: #000000 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

#wrap .cta-section .btn:hover,
#wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) .btn:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #ED0180 !important;
}

/* Dark mode CTA */
.im-dark-mode #wrap .cta-section .btn,
.im-dark-mode #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) .btn {
    background: #000000 !important;
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
    border-color: #20BEC6 !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

.im-dark-mode #wrap .cta-section p,
.im-dark-mode #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap .cta-section h2,
.im-dark-mode #wrap .cta-section .section-title,
.im-dark-mode #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) h2 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   55. SECTION HEADING SIZES - Bigger & Bolder
   ================================================================ */
/* Main section titles - increase size */
#wrap section:has(.service-card) h2,
#wrap section:has(.testimonial-card) h2,
#wrap section:has(video) h2,
#wrap section:has(.quote-box) h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;
}

/* Team section heading area - tighter spacing */
#wrap section:has(.team-card) > .container > .text-center {
    margin-bottom: 48px !important;
}

/* "MEET THE VISIONARIES" subtitle */
#wrap section:has(.team-card) .section-subtitle,
#wrap section:has(.team-card) > .container > .text-center > p:not(.section-label) {
    font-size: 0.95rem !important;
    letter-spacing: 1px !important;
    opacity: 0.7 !important;
}

/* ================================================================
   56. DARK MODE - Header Logo
   ================================================================ */
.im-dark-mode header .navbar-brand,
[data-theme="dark"] header .navbar-brand {
    color: #FFFFFF !important;
}

/* ================================================================
   57. VIEW ALL SERVICES BUTTON - Match style
   ================================================================ */
#wrap section:has(.service-card) .btn {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0 #000000 !important;
}

#wrap section:has(.service-card) .btn:hover {
    transform: translate(5px, 5px) !important;
    box-shadow: 0 0 0 #000000 !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap section:has(.service-card) .btn {
    box-shadow: 5px 5px 0 #FFFFFF !important;
}

/* ================================================================
   58. DARK MODE - Services section text
   ================================================================ */
.im-dark-mode #wrap section:has(.service-card) .section-title,
.im-dark-mode #wrap section:has(.service-card) h2,
.im-dark-mode #wrap section:has(.service-card) > .container > .text-center p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   59. DARK MODE - Video/Showreel section text
   ================================================================ */
.im-dark-mode #wrap section:has(video) h2,
.im-dark-mode #wrap section:has(video) p,
.im-dark-mode #wrap section:has(video) .section-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   60. DARK MODE - Quote/About section text
   ================================================================ */
.im-dark-mode #wrap section:has(.quote-box) h2,
.im-dark-mode #wrap section:has(.quote-box) .section-title,
.im-dark-mode #wrap section:has(.quote-box) > .container > .row > [class*="col"] > h2,
.im-dark-mode #wrap section:has(.quote-box) > .container > .row > [class*="col"] > p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   61. RESPONSIVE - Section padding overrides (match :has specificity)
   ================================================================ */

/* Tablet: reduce section padding for :has() sections */
@media (max-width: 991px) {
    #wrap section:has(.service-card),
    #wrap section:has(.testimonial-card),
    #wrap section:has(.quote-box),
    #wrap section:has(video) {
        padding: 60px 0 !important;
    }

    #wrap .cta-section,
    #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) {
        padding: 60px 0 !important;
    }
}

/* Mobile: further reduce padding */
@media (max-width: 767px) {
    #wrap section:has(.service-card),
    #wrap section:has(.testimonial-card),
    #wrap section:has(.quote-box),
    #wrap section:has(video) {
        padding: 40px 0 !important;
    }

    #wrap .cta-section,
    #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) {
        padding: 40px 0 !important;
    }

    /* Reduce header row spacing inside sections */
    #wrap section .row.align-items-center {
        margin-bottom: 16px !important;
    }

    /* Section titles smaller on mobile */
    #wrap .section-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        margin-bottom: 12px !important;
    }

    /* Section subtitles tighter on mobile */
    #wrap .section-subtitle {
        margin-bottom: 24px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    #wrap section:has(.service-card),
    #wrap section:has(.testimonial-card),
    #wrap section:has(.quote-box),
    #wrap section:has(video) {
        padding: 32px 0 !important;
    }

    #wrap .cta-section,
    #wrap section:last-of-type:has(.btn):not(:first-of-type):not(.section-dark):not(.section-darker) {
        padding: 32px 0 !important;
    }
}

/* ================================================================
   62. RESPONSIVE - Theme toggle button mobile sizing
   ================================================================ */
@media (max-width: 767px) {
    .neo-theme-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        bottom: 16px !important;
        right: 16px !important;
        border-width: 2px !important;
        box-shadow: 3px 3px 0 #000000 !important;
    }

    .neo-theme-toggle:hover {
        transform: translate(3px, 3px) !important;
        box-shadow: 0 0 0 #000000 !important;
    }
}

/* ================================================================
   63. RESPONSIVE - Hero section mobile button sizing
   ================================================================ */
@media (max-width: 767px) {
    /* Hero buttons full width on mobile */
    #wrap section:first-of-type .btn-magnetic,
    #wrap section:first-of-type .btn-outline-animated {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    /* CTA button sizing on mobile */
    #wrap .cta-section .btn-magnetic,
    #wrap .cta-section .cta-btn,
    #wrap .cta-section a.btn-magnetic,
    #wrap .cta-section a.cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    /* Discover Our Story button */
    #wrap section:has(.quote-box) .btn-glow,
    #wrap section:has(.quote-box) a.btn-glow {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
}

/* ================================================================
   64. RESPONSIVE - Testimonial cards mobile layout
   ================================================================ */
@media (max-width: 767px) {
    #wrap .testimonial-card {
        margin-bottom: 16px !important;
    }

    /* Quote box mobile */
    #wrap .quote-box {
        box-shadow: 5px 5px 0 #ED0180 !important;
    }
}

/* ================================================================
   65. DARK MODE - Glass cards in section-dark/darker (specificity fix)
   ================================================================ */
/* Override the light-mode section-specific glass-card rules */
.im-dark-mode #wrap .section-dark .glass-card,
.im-dark-mode #wrap .section-darker .glass-card {
    background: #1A2340 !important;
    border: 3px solid #20BEC6 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

.im-dark-mode #wrap .section-dark .glass-card h3,
.im-dark-mode #wrap .section-dark .glass-card h4,
.im-dark-mode #wrap .section-dark .glass-card p,
.im-dark-mode #wrap .section-darker .glass-card h3,
.im-dark-mode #wrap .section-darker .glass-card h4,
.im-dark-mode #wrap .section-darker .glass-card p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   65b. Process cards - per-card colored shadows matching icons
   ================================================================ */
/* Light mode: Discovery=teal, Concept=pink, Design=cyan, Deliver=amber */
#wrap .section-dark .row > .col-md-6:nth-child(1) .glass-card,
#wrap .section-dark .row > .col-lg-3:nth-child(1) .glass-card {
    box-shadow: 6px 6px 0 #8b5cf6 !important;
}
#wrap .section-dark .row > .col-md-6:nth-child(2) .glass-card,
#wrap .section-dark .row > .col-lg-3:nth-child(2) .glass-card {
    box-shadow: 6px 6px 0 #ec4899 !important;
}
#wrap .section-dark .row > .col-md-6:nth-child(3) .glass-card,
#wrap .section-dark .row > .col-lg-3:nth-child(3) .glass-card {
    box-shadow: 6px 6px 0 #06b6d4 !important;
}
#wrap .section-dark .row > .col-md-6:nth-child(4) .glass-card,
#wrap .section-dark .row > .col-lg-3:nth-child(4) .glass-card {
    box-shadow: 6px 6px 0 #f59e0b !important;
}

/* Dark mode: same per-card colors */
.im-dark-mode #wrap .section-dark .row > .col-md-6:nth-child(1) .glass-card,
.im-dark-mode #wrap .section-dark .row > .col-lg-3:nth-child(1) .glass-card {
    box-shadow: 6px 6px 0 #8b5cf6 !important;
}
.im-dark-mode #wrap .section-dark .row > .col-md-6:nth-child(2) .glass-card,
.im-dark-mode #wrap .section-dark .row > .col-lg-3:nth-child(2) .glass-card {
    box-shadow: 6px 6px 0 #ec4899 !important;
}
.im-dark-mode #wrap .section-dark .row > .col-md-6:nth-child(3) .glass-card,
.im-dark-mode #wrap .section-dark .row > .col-lg-3:nth-child(3) .glass-card {
    box-shadow: 6px 6px 0 #06b6d4 !important;
}
.im-dark-mode #wrap .section-dark .row > .col-md-6:nth-child(4) .glass-card,
.im-dark-mode #wrap .section-dark .row > .col-lg-3:nth-child(4) .glass-card {
    box-shadow: 6px 6px 0 #f59e0b !important;
}

/* ================================================================
   66. DARK MODE - Stat numbers/labels (Portfolio, About pages)
   ================================================================ */
.im-dark-mode #wrap .stat-number,
.im-dark-mode #wrap .stat-label,
.im-dark-mode .stat-number,
.im-dark-mode .stat-label {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Keep stat items on the homepage with their specific tile colors */
.im-dark-mode #wrap .feature-tile:nth-child(1) .stat-number,
.im-dark-mode #wrap .feature-tile:nth-child(1) .stat-label,
.im-dark-mode #wrap .feature-tile:nth-child(4) .stat-number,
.im-dark-mode #wrap .feature-tile:nth-child(4) .stat-label {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   67. DARK MODE - Team name small (About page team leads grid)
   ================================================================ */
.im-dark-mode #wrap .team-name-small,
.im-dark-mode #wrap .team-member-simple div,
.im-dark-mode #wrap .team-member-simple span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Keep avatar text as-is (it has colored backgrounds) */
.im-dark-mode #wrap .team-avatar-small {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   68. DARK MODE - Contact page form
   ================================================================ */
.im-dark-mode #wrap .s_website_form input,
.im-dark-mode #wrap .s_website_form textarea,
.im-dark-mode #wrap .s_website_form select {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
    color: #FFFFFF !important;
}

.im-dark-mode #wrap .s_website_form label {
    color: #FFFFFF !important;
}

/* ================================================================
   69. FIX - Innovation card gradient variable
   ================================================================ */
:root {
    --gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* ================================================================
   70. Service card icon colors - varied per card
   ================================================================ */
/* Home page - 6 service cards in one row */
#wrap section:has(.service-card) .row > :nth-child(1) .service-icon-wrap { background: #20BEC6 !important; }
#wrap section:has(.service-card) .row > :nth-child(2) .service-icon-wrap { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important; }
#wrap section:has(.service-card) .row > :nth-child(3) .service-icon-wrap { background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%) !important; }
#wrap section:has(.service-card) .row > :nth-child(4) .service-icon-wrap { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
#wrap section:has(.service-card) .row > :nth-child(5) .service-icon-wrap { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; }
#wrap section:has(.service-card) .row > :nth-child(6) .service-icon-wrap { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; }

#wrap section:has(.service-card) .row > :nth-child(1) .service-icon-wrap i { color: #000000 !important; }
#wrap section:has(.service-card) .row > :nth-child(2) .service-icon-wrap i,
#wrap section:has(.service-card) .row > :nth-child(3) .service-icon-wrap i,
#wrap section:has(.service-card) .row > :nth-child(4) .service-icon-wrap i,
#wrap section:has(.service-card) .row > :nth-child(5) .service-icon-wrap i,
#wrap section:has(.service-card) .row > :nth-child(6) .service-icon-wrap i { color: #FFFFFF !important; }

/* Services page - per-section icon colors (S1-S4 don't use .service-card) */
#wrap section:has(.fa-paint-brush) .service-icon-wrap { background: #20BEC6 !important; }
#wrap section:has(.fa-pencil) .service-icon-wrap { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important; }
#wrap section:has(.fa-pencil) .service-icon-wrap i { color: #FFFFFF !important; }
#wrap section:has(.fa-bullhorn) .service-icon-wrap { background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%) !important; }
#wrap section:has(.fa-bullhorn) .service-icon-wrap i { color: #FFFFFF !important; }
#wrap section:has(.fa-code) .service-icon-wrap { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
#wrap section:has(.fa-code) .service-icon-wrap i { color: #FFFFFF !important; }

/* ================================================================
   71. Portfolio filter buttons
   ================================================================ */
.filter-btn {
    display: inline-block !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    margin: 4px !important;
    box-shadow: 4px 4px 0 #000000 !important;
    transition: all 0.15s ease !important;
}

.filter-btn:hover {
    background: #20BEC6 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #000000 !important;
}

.filter-btn.active {
    background: #000000 !important;
    color: #FFFFFF !important;
    box-shadow: 4px 4px 0 #20BEC6 !important;
}

.im-dark-mode .filter-btn {
    background: #1A2340 !important;
    color: #FFFFFF !important;
    border-color: #20BEC6 !important;
    box-shadow: 4px 4px 0 #20BEC6 !important;
}

.im-dark-mode .filter-btn:hover {
    background: #20BEC6 !important;
    color: #000000 !important;
}

.im-dark-mode .filter-btn.active {
    background: #20BEC6 !important;
    color: #000000 !important;
    box-shadow: 4px 4px 0 #ED0180 !important;
}

/* ================================================================
   71b. Portfolio logo grid (neobrutalism)
   ================================================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.portfolio-item {
    animation: portfolioFadeInUp 0.5s ease forwards;
}

.portfolio-card {
    background: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.portfolio-card:hover {
    transform: translate(3px, 3px);
}

/* Alternating neobrutalist colored shadows */
.portfolio-item:nth-child(3n+1) .portfolio-card {
    box-shadow: 6px 6px 0 #20BEC6;
}
.portfolio-item:nth-child(3n+1) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #20BEC6;
}
.portfolio-item:nth-child(3n+2) .portfolio-card {
    box-shadow: 6px 6px 0 #ED0180;
}
.portfolio-item:nth-child(3n+2) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #ED0180;
}
.portfolio-item:nth-child(3n+3) .portfolio-card {
    box-shadow: 6px 6px 0 #0C152A;
}
.portfolio-item:nth-child(3n+3) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #0C152A;
}

.portfolio-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f8f8f8;
}

.portfolio-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.portfolio-info {
    padding: 12px 16px;
    border-top: 3px solid #000000;
}

.portfolio-info h4 {
    font-size: 0.9rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portfolio-tag {
    display: inline-block;
    background: #20BEC6;
    color: #000000;
    padding: 2px 8px;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    border: 2px solid #000000;
    letter-spacing: 0.5px;
}

/* Dark mode portfolio */
.im-dark-mode .portfolio-card {
    background: #1A2340;
    border-color: #20BEC6;
}

.im-dark-mode .portfolio-image {
    background: #0f1a30;
}

.im-dark-mode .portfolio-info {
    border-top-color: #20BEC6;
}

.im-dark-mode .portfolio-info h4 {
    color: #FFFFFF;
}

.im-dark-mode .portfolio-tag {
    border-color: #20BEC6;
}

.im-dark-mode .portfolio-item:nth-child(3n+1) .portfolio-card {
    box-shadow: 6px 6px 0 #20BEC6;
}
.im-dark-mode .portfolio-item:nth-child(3n+2) .portfolio-card {
    box-shadow: 6px 6px 0 #ED0180;
}
.im-dark-mode .portfolio-item:nth-child(3n+3) .portfolio-card {
    box-shadow: 6px 6px 0 #C9DEE8;
}
.im-dark-mode .portfolio-item:nth-child(3n+1) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #20BEC6;
}
.im-dark-mode .portfolio-item:nth-child(3n+2) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #ED0180;
}
.im-dark-mode .portfolio-item:nth-child(3n+3) .portfolio-card:hover {
    box-shadow: 3px 3px 0 #C9DEE8;
}

/* Portfolio animation */
@keyframes portfolioFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Portfolio responsive */
@media (max-width: 1200px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .portfolio-image { padding: 16px; }
    .portfolio-info { padding: 8px 12px; }
    .portfolio-info h4 { font-size: 0.75rem; }
    .portfolio-tag { font-size: 0.6rem; padding: 1px 6px; }
}

/* ================================================================
   71c. Careers / Jobs page styling
   ================================================================ */

/* -- Jobs search topbar -- */
.o_website_hr_recruitment_jobs_list > nav.navbar {
    background: #FFFFFF !important;
    border-bottom: 3px solid #000000 !important;
    backdrop-filter: none !important;
    padding: 8px 0 !important;
    min-height: unset !important;
}

.o_website_hr_recruitment_jobs_list > nav .navbar-brand {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.o_website_hr_recruitment_jobs_list .o_searchbar_form {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    max-width: 320px !important;
}

/* Use #wrap prefix to beat global #wrap input[type="text"] specificity (0,1,1,1) */
#wrap .o_website_hr_recruitment_jobs_list .o_searchbar_form input,
#wrap .o_website_hr_recruitment_jobs_list input.oe_search_box {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: unset !important;
}

#wrap .o_website_hr_recruitment_jobs_list .o_searchbar_form input::placeholder {
    color: #9EACB2 !important;
}

#wrap .o_website_hr_recruitment_jobs_list .o_searchbar_form button,
#wrap .o_website_hr_recruitment_jobs_list .oe_search_button {
    background: #20BEC6 !important;
    color: #000000 !important;
    border: none !important;
    border-left: 3px solid #000000 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
}

/* Override Odoo's input-group sizing */
#wrap .o_website_hr_recruitment_jobs_list .input-group > .form-control,
#wrap .o_website_hr_recruitment_jobs_list .input-group-lg > .form-control {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: unset !important;
}

#wrap .o_website_hr_recruitment_jobs_list .input-group > .btn,
#wrap .o_website_hr_recruitment_jobs_list .input-group-lg > .btn {
    font-size: 14px !important;
    padding: 8px 14px !important;
}

/* Tighten the search nav bar */
#wrap .o_website_hr_recruitment_jobs_list > nav .input-group {
    margin-bottom: 0 !important;
}

/* -- Job card grid -- */
.jobs-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* -- Job listing cards -- */
.job-card-link {
    display: block;
    color: inherit !important;
}

.job-card {
    background: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 0;
    padding: 24px 28px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.job-card:hover {
    transform: translate(3px, 3px);
}

/* Alternate shadows */
.job-card-link:nth-child(3n+1) .job-card {
    box-shadow: 6px 6px 0 #20BEC6;
}
.job-card-link:nth-child(3n+2) .job-card {
    box-shadow: 6px 6px 0 #ED0180;
}
.job-card-link:nth-child(3n+3) .job-card {
    box-shadow: 6px 6px 0 #0C152A;
}
.job-card-link:nth-child(3n+1) .job-card:hover {
    box-shadow: 3px 3px 0 #20BEC6;
}
.job-card-link:nth-child(3n+2) .job-card:hover {
    box-shadow: 3px 3px 0 #ED0180;
}
.job-card-link:nth-child(3n+3) .job-card:hover {
    box-shadow: 3px 3px 0 #0C152A;
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.job-card-header h3 {
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
    margin: 0 !important;
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.job-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8f8f8;
    border: 2px solid #000000;
    padding: 3px 10px;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000000;
}

.job-meta-tag i {
    color: #ED0180;
    font-size: 0.7rem;
}

.job-card-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.job-card-desc p {
    margin: 0 !important;
}

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #000000;
    padding-top: 14px;
    margin-top: 4px;
}

.job-positions-tag {
    background: #20BEC6;
    color: #000000;
    padding: 3px 10px;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    border: 2px solid #000000;
    letter-spacing: 0.5px;
}

.job-apply-arrow {
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ED0180;
}

.job-apply-arrow i {
    margin-left: 6px;
    transition: transform 0.15s ease;
}

.job-card:hover .job-apply-arrow i {
    transform: translateX(4px);
}

/* -- Right sidebar cards -- */
#jobs_grid_right .sidebar-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#jobs_grid_right .sidebar-card .card-body {
    background: transparent !important;
    background-color: transparent !important;
}

#jobs_grid_right .sidebar-card.mt-4 {
    box-shadow: 6px 6px 0 #ED0180 !important;
}

#jobs_grid_right .card-title {
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #000000 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid #000000 !important;
}

#jobs_grid_right .card-text {
    font-size: 0.85rem !important;
    color: #000000 !important;
    line-height: 1.6 !important;
}

#jobs_grid_right hr {
    border-top: 3px solid #000000 !important;
    opacity: 1 !important;
    margin: 16px 0 !important;
}

#jobs_grid_right h6 {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.75rem !important;
    color: #000000 !important;
    margin-bottom: 12px !important;
}

#jobs_grid_right .sidebar-list li {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
}

#jobs_grid_right .sidebar-list .fa-check {
    color: #20BEC6 !important;
    font-weight: 900 !important;
}

#jobs_grid_right .sidebar-list .fa-envelope,
#jobs_grid_right .sidebar-list .fa-phone,
#jobs_grid_right .sidebar-list .fa-map-marker {
    color: #ED0180 !important;
}

/* Use double-ID specificity to beat CTA rule (0,1,4,1) */
#wrap #jobs_grid_right .sidebar-buttons .sidebar-btn,
#wrap #jobs_grid_right .sidebar-buttons .sidebar-btn-primary,
#wrap #jobs_grid_right .sidebar-btn,
#wrap #jobs_grid_right .sidebar-btn-primary,
#wrap #jobs_grid_right section .btn.sidebar-btn,
#wrap #jobs_grid_right section .btn.sidebar-btn-primary {
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

#wrap #jobs_grid_right .sidebar-btn:hover,
#wrap #jobs_grid_right .sidebar-btn-primary:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 #000000 !important;
}

#wrap #jobs_grid_right .sidebar-buttons .sidebar-btn-primary,
#wrap #jobs_grid_right .sidebar-btn-primary,
#wrap #jobs_grid_right section .btn.sidebar-btn-primary {
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 3px 3px 0 #000000 !important;
}

/* -- Job detail page -- */
.js_hr_recruitment .job-description-content h2 {
    font-weight: 800 !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 3px solid #000000 !important;
}

.js_hr_recruitment .job-description-content h2:first-child {
    margin-top: 0 !important;
}

.js_hr_recruitment .job-description-content p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #000000 !important;
    margin-bottom: 16px !important;
}

.js_hr_recruitment .job-description-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 24px !important;
}

.js_hr_recruitment .job-description-content ul li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 10px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #000000 !important;
}

.js_hr_recruitment .job-description-content ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 10px !important;
    height: 10px !important;
    background: #20BEC6 !important;
    border: 2px solid #000000 !important;
}

.js_hr_recruitment .job-description-content strong {
    font-weight: 800 !important;
}

/* Neobrutalist Apply Now button - specificity must beat #wrap a:not(.btn)... (0,1,3,1) */
#wrap a:not(.btn):not([class*="btn-"]):not(.cta-btn)[href*="/jobs/apply/"],
#wrap a[href*="/jobs/apply/"] {
    display: inline-block !important;
    padding: 14px 36px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 #000000 !important;
    transition: all 0.15s ease !important;
}

#wrap a:not(.btn):not([class*="btn-"]):not(.cta-btn)[href*="/jobs/apply/"]:hover,
#wrap a[href*="/jobs/apply/"]:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 #000000 !important;
    background: #ED0180 !important;
    border-bottom: 3px solid #000000 !important;
}

/* Back to careers link - specificity must match #wrap a:not(.btn)... (0,1,3,1) */
#wrap .section-label a:not(.btn):not([class*="btn-"]) {
    color: #0C152A !important;
    -webkit-text-fill-color: #0C152A !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 2px solid #0C152A !important;
    border-bottom: 2px solid #0C152A !important;
    padding: 6px 16px !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

#wrap .section-label a:not(.btn):not([class*="btn-"]):hover {
    background: #0C152A !important;
    border-color: #0C152A !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap .section-label a:not(.btn):not([class*="btn-"]) {
    color: rgba(255,255,255,0.7) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.7) !important;
    border-color: rgba(255,255,255,0.3) !important;
    border-bottom-color: rgba(255,255,255,0.3) !important;
}

.im-dark-mode #wrap .section-label a:not(.btn):not([class*="btn-"]):hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: #20BEC6 !important;
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
}

/* Job detail meta tags (location, type, dept) - override inline white color */
#wrap .hero-section .d-flex > span {
    color: #0C152A !important;
    -webkit-text-fill-color: #0C152A !important;
}

.im-dark-mode #wrap .hero-section .d-flex > span {
    color: rgba(255,255,255,0.8) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.8) !important;
}

/* -- Dark mode: Careers -- */
.im-dark-mode .o_website_hr_recruitment_jobs_list > nav.navbar {
    background: #1A2340 !important;
    border-bottom-color: #20BEC6 !important;
}

.im-dark-mode .o_website_hr_recruitment_jobs_list > nav .navbar-brand {
    color: #FFFFFF !important;
}

.im-dark-mode .o_website_hr_recruitment_jobs_list .o_searchbar_form {
    background: #0f1a30 !important;
    border-color: #20BEC6 !important;
    box-shadow: 3px 3px 0 #20BEC6 !important;
}

.im-dark-mode .o_website_hr_recruitment_jobs_list .o_searchbar_form input {
    background: #0f1a30 !important;
    color: #FFFFFF !important;
}

.im-dark-mode .job-card {
    background: #1A2340;
    border-color: #20BEC6;
}

.im-dark-mode .job-card-header h3 {
    color: #FFFFFF !important;
}

.im-dark-mode .job-meta-tag {
    background: #0f1a30;
    border-color: #20BEC6;
    color: #FFFFFF;
}

.im-dark-mode .job-card-desc,
.im-dark-mode .job-card-desc p {
    color: #C9DEE8 !important;
}

.im-dark-mode .job-card-footer {
    border-top-color: #20BEC6;
}

.im-dark-mode .job-positions-tag {
    border-color: #20BEC6;
}

.im-dark-mode .job-apply-arrow {
    color: #20BEC6;
}

.im-dark-mode #jobs_grid_right .sidebar-card {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

.im-dark-mode #jobs_grid_right .sidebar-card .card-body,
.im-dark-mode #jobs_grid_right .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

.im-dark-mode #jobs_grid_right .sidebar-card.mt-4 {
    box-shadow: 6px 6px 0 #ED0180 !important;
}

.im-dark-mode #jobs_grid_right .card-title {
    color: #FFFFFF !important;
    border-bottom-color: #20BEC6 !important;
}

.im-dark-mode #jobs_grid_right h6,
.im-dark-mode #jobs_grid_right li,
.im-dark-mode #jobs_grid_right .card-text {
    color: #FFFFFF !important;
}

.im-dark-mode #jobs_grid_right hr {
    border-top-color: #20BEC6 !important;
}

.im-dark-mode #wrap #jobs_grid_right .sidebar-btn,
.im-dark-mode #wrap #jobs_grid_right section .btn.sidebar-btn {
    background: #1A2340 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #20BEC6 !important;
    box-shadow: 3px 3px 0 #20BEC6 !important;
}

.im-dark-mode #wrap #jobs_grid_right .sidebar-btn-primary,
.im-dark-mode #wrap #jobs_grid_right section .btn.sidebar-btn-primary {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border-color: #20BEC6 !important;
    box-shadow: 3px 3px 0 #ED0180 !important;
}

.im-dark-mode .js_hr_recruitment .job-description-content h2 {
    color: #FFFFFF !important;
    border-bottom-color: #20BEC6 !important;
}

.im-dark-mode .js_hr_recruitment .job-description-content p,
.im-dark-mode .js_hr_recruitment .job-description-content li {
    color: #C9DEE8 !important;
}

.im-dark-mode .js_hr_recruitment a[href*="/jobs/apply/"] {
    border-color: #20BEC6 !important;
    box-shadow: 5px 5px 0 #20BEC6 !important;
}

.im-dark-mode .js_hr_recruitment a[href*="/jobs/apply/"]:hover {
    box-shadow: 2px 2px 0 #20BEC6 !important;
}

/* Force Apply Now button text white in all sections */
.js_hr_recruitment .section-darker a[href*="/jobs/apply/"],
.js_hr_recruitment .section-dark a[href*="/jobs/apply/"],
#wrap a[href*="/jobs/apply/"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ================================================================
   71c-fix. Sidebar padding reduction
   ================================================================ */
/* Override global #wrap .oe_structure > section { padding: 80px 0 } */
#wrap #jobs_grid_right > section,
#wrap #jobs_grid_right.oe_structure > section {
    padding: 0 !important;
}

#wrap #jobs_grid_right .container {
    padding: 0 !important;
    max-width: none !important;
}

#wrap #jobs_grid_right .row {
    margin: 0 !important;
}

#wrap #jobs_grid_right .col-lg-12 {
    padding: 0 !important;
}

/* ================================================================
   71c-fix. Dark mode: Careers page - override Odoo o_cc2 colors
   ================================================================ */
/* Force dark bg on #wrap (Odoo's o_cc2 sets it to #F3F2F2) */
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list,
[data-theme="dark"] #wrap.o_website_hr_recruitment_jobs_list {
    background-color: #0C152A !important;
    --o-cc-bg: #0C152A;
    --o-cc2-bg: #0C152A;
}

/* Force dark bg on section-dark (Odoo dark mode sets teal) */
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-dark,
[data-theme="dark"] #wrap.o_website_hr_recruitment_jobs_list .section-dark,
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-dark.o_colored_level,
[data-theme="dark"] #wrap .section-dark {
    background-color: #0C152A !important;
    background: #0C152A !important;
}

/* Force dark bg on search topbar */
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list > nav.navbar,
[data-theme="dark"] #wrap.o_website_hr_recruitment_jobs_list > nav.navbar {
    background: #1A2340 !important;
    border-bottom-color: #20BEC6 !important;
}

/* Force text readability in dark mode careers */
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-label,
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-title,
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-dark h2,
.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-dark p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap.o_website_hr_recruitment_jobs_list .section-dark .text-gradient {
    color: #20BEC6 !important;
    -webkit-text-fill-color: #20BEC6 !important;
}

/* ================================================================
   71c-fix. Bottom Apply Now button match (section-darker CTA)
   ================================================================ */
/* Ensure the CTA section bg in dark mode is dark */
.im-dark-mode #wrap.js_hr_recruitment .section-darker,
[data-theme="dark"] #wrap.js_hr_recruitment .section-darker {
    background: #0A1020 !important;
}

/* ================================================================
   71d. Apply page (job application form)
   ================================================================ */

/* -- Form card -- */
#wrap.apply-page .glass-card {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
    padding: 40px !important;
}

#wrap.apply-page .glass-card h3 {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
}

/* -- Form fields -- Use #wrap prefix to beat global #wrap input rules */
#wrap.apply-page .form-label {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#wrap.apply-page .form-label span {
    color: #ED0180 !important;
}

#wrap.apply-page input[type="text"],
#wrap.apply-page input[type="email"],
#wrap.apply-page input[type="tel"],
#wrap.apply-page textarea,
#wrap.apply-page select,
#wrap.apply-page .form-control {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease !important;
}

#wrap.apply-page .form-control:focus,
#wrap.apply-page input:focus,
#wrap.apply-page textarea:focus {
    box-shadow: 3px 3px 0 #20BEC6 !important;
    outline: none !important;
}

#wrap.apply-page .form-control::placeholder,
#wrap.apply-page input::placeholder,
#wrap.apply-page textarea::placeholder {
    color: #9EACB2 !important;
    font-weight: 600 !important;
}

/* LinkedIn field - icon removed from view */
#wrap.apply-page .fa-linkedin {
    display: none !important;
}

#wrap.apply-page input[name="linkedin_profile"] {
    padding-left: 16px !important;
}

/* File input */
#wrap.apply-page input[type="file"] {
    background: #f8f8f8 !important;
}

#wrap.apply-page small {
    color: #9EACB2 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

/* -- Submit button -- */
#wrap.apply-page .s_website_form_send,
#wrap.apply-page button[type="submit"] {
    display: inline-block !important;
    padding: 14px 36px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: #ED0180 !important;
    color: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 #000000 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#wrap.apply-page .s_website_form_send:hover,
#wrap.apply-page button[type="submit"]:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 #000000 !important;
}

/* -- Sidebar job summary card -- */
#wrap.apply-page .col-lg-4 .glass-card {
    box-shadow: 6px 6px 0 #ED0180 !important;
}

#wrap.apply-page .col-lg-4 .glass-card + .glass-card {
    box-shadow: 6px 6px 0 #0C152A !important;
}

#wrap.apply-page .col-lg-4 span {
    color: #9EACB2 !important;
    font-size: 0.8rem !important;
}

#wrap.apply-page .col-lg-4 h6 {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.85rem !important;
}

/* Job Description back button - neobrutalist */
#wrap.apply-page .col-lg-4 a[href*="/jobs/"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #000000 !important;
    margin-bottom: 20px !important;
    transition: all 0.15s ease !important;
}

#wrap.apply-page .col-lg-4 a[href*="/jobs/"]:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #000000 !important;
    background: #20BEC6 !important;
}

/* -- Apply page dark mode -- Use #wrap to beat global #wrap input rules */
.im-dark-mode #wrap.apply-page .glass-card {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
}

.im-dark-mode #wrap.apply-page .glass-card h3 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap.apply-page .form-label {
    color: #FFFFFF !important;
}

.im-dark-mode #wrap.apply-page input[type="text"],
.im-dark-mode #wrap.apply-page input[type="email"],
.im-dark-mode #wrap.apply-page input[type="tel"],
.im-dark-mode #wrap.apply-page textarea,
.im-dark-mode #wrap.apply-page select,
.im-dark-mode #wrap.apply-page .form-control {
    background: #0f1a30 !important;
    border: 3px solid #20BEC6 !important;
    color: #FFFFFF !important;
}

.im-dark-mode #wrap.apply-page .form-control::placeholder,
.im-dark-mode #wrap.apply-page input::placeholder,
.im-dark-mode #wrap.apply-page textarea::placeholder {
    color: #9EACB2 !important;
}

.im-dark-mode #wrap.apply-page input[type="file"] {
    background: #0f1a30 !important;
}

.im-dark-mode #wrap.apply-page .s_website_form_send,
.im-dark-mode #wrap.apply-page button[type="submit"] {
    border-color: #20BEC6 !important;
    box-shadow: 5px 5px 0 #20BEC6 !important;
}

.im-dark-mode #wrap.apply-page .s_website_form_send:hover,
.im-dark-mode #wrap.apply-page button[type="submit"]:hover {
    box-shadow: 2px 2px 0 #20BEC6 !important;
}

.im-dark-mode #wrap.apply-page .col-lg-4 h6 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.im-dark-mode #wrap.apply-page .col-lg-4 span {
    color: #C9DEE8 !important;
}

.im-dark-mode #wrap.apply-page .col-lg-4 a[href*="/jobs/"] {
    background: #1A2340 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #20BEC6 !important;
    box-shadow: 4px 4px 0 #20BEC6 !important;
}

.im-dark-mode #wrap.apply-page .col-lg-4 a[href*="/jobs/"]:hover {
    background: #20BEC6 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   72. Search bar / modal styling
   ================================================================ */
/* Search bar that appears at top */
#wrapwrap .o_searchbar_form,
.o_search_bar,
header .o_searchbar_form {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

#wrapwrap .o_searchbar_form input,
.o_search_bar input,
input[name="search"] {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

#wrapwrap .o_searchbar_form button,
.o_search_bar button {
    background: #20BEC6 !important;
    color: #000000 !important;
    border: none !important;
    border-left: 3px solid #000000 !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
}

/* Dark mode search bar */
.im-dark-mode #wrapwrap .o_searchbar_form,
.im-dark-mode .o_search_bar {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
    box-shadow: 4px 4px 0 #20BEC6 !important;
}

.im-dark-mode #wrapwrap .o_searchbar_form input,
.im-dark-mode .o_search_bar input,
.im-dark-mode input[name="search"] {
    background: #1A2340 !important;
    color: #FFFFFF !important;
}

.im-dark-mode #wrapwrap .o_searchbar_form button,
.im-dark-mode .o_search_bar button {
    border-left-color: #20BEC6 !important;
}

/* ================================================================
   73. Search results page
   ================================================================ */
/* Search results page heading */
#wrap .s_searchbar_input h1,
#wrap h1:first-of-type,
.o_search_result_page h1 {
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

/* Search result links - override Odoo default purple */
#wrap .o_search_result_item a,
#wrap .s_searchbar h6 a,
#wrap a[href*="/contactus"],
.o_search_result_page a:not(.btn) {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid #20BEC6 !important;
}

#wrap .o_search_result_item a:hover,
.o_search_result_page a:not(.btn):hover {
    color: #20BEC6 !important;
}

/* Search highlight text - override Odoo default */
#wrap mark,
#wrap .o_search_result_item mark,
.o_search_result_page mark {
    background: #20BEC6 !important;
    color: #000000 !important;
    padding: 2px 4px !important;
    border-radius: 0 !important;
}

/* Search result page titles */
#wrap .o_search_result_item h6,
#wrap .o_search_result_item .h6 {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Result description text */
#wrap .o_search_result_item p,
#wrap .o_search_result_item .text-muted {
    color: #000000 !important;
    opacity: 0.8 !important;
}

/* Dark mode search results */
.im-dark-mode #wrap .o_search_result_item a,
.im-dark-mode .o_search_result_page a:not(.btn) {
    color: #FFFFFF !important;
    border-bottom-color: #20BEC6 !important;
}

.im-dark-mode #wrap .o_search_result_item a:hover,
.im-dark-mode .o_search_result_page a:not(.btn):hover {
    color: #20BEC6 !important;
}

.im-dark-mode #wrap .o_search_result_item p,
.im-dark-mode #wrap .o_search_result_item .text-muted {
    color: #FFFFFF !important;
    opacity: 0.7 !important;
}

.im-dark-mode #wrap mark,
.im-dark-mode .o_search_result_page mark {
    background: #20BEC6 !important;
    color: #000000 !important;
}

/* Search results page - override any Odoo default link colors */
#wrap a.o_search_result_link,
#wrap .oe_search_result a {
    color: #000000 !important;
}

.im-dark-mode #wrap a.o_search_result_link,
.im-dark-mode #wrap .oe_search_result a {
    color: #FFFFFF !important;
}

/* Autocomplete dropdown */
.o_search_autocomplete,
.o_searchbar_dropdown {
    background: #FFFFFF !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #000000 !important;
}

.o_search_autocomplete a,
.o_searchbar_dropdown a {
    color: #000000 !important;
    font-weight: 600 !important;
}

.o_search_autocomplete a:hover,
.o_searchbar_dropdown a:hover {
    background: #20BEC6 !important;
    color: #000000 !important;
}

.im-dark-mode .o_search_autocomplete,
.im-dark-mode .o_searchbar_dropdown {
    background: #1A2340 !important;
    border-color: #20BEC6 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

.im-dark-mode .o_search_autocomplete a,
.im-dark-mode .o_searchbar_dropdown a {
    color: #FFFFFF !important;
}

/* ================================================================
   END - BOLD NEOBRUTALISM v9.2
   ================================================================ */