/* ================================================================
   INFINITY MEDIA - BOLD NEOBRUTALISM v6.0

   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) {
    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):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,
.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;
    position: relative !important;
}

#wrap .btn:hover,
#wrap .btn-primary:hover,
#wrap a.btn: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 .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 {
    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),
#wrap .service-card:nth-child(2n) {
    box-shadow: 6px 6px 0 #ED0180 !important;
}

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

#wrap .card:nth-child(3n),
#wrap .service-card:nth-child(3n) {
    box-shadow: 6px 6px 0 #0C152A !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: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !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;
}

#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 .service-card:nth-child(2n) .service-icon-wrap {
    background: #ED0180 !important;
}

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

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

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

#wrap section:has(.team-card) .section-title {
    color: #FFFFFF !important;
    font-size: 1rem !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
}

#wrap section:has(.team-card) .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: #FEF9E1 !important;
    border-right: 3px solid #000000 !important;
    flex-direction: row-reverse !important;
}

#wrap .team-card:nth-child(4) {
    background: #ED0180 !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: #ED0180 !important; color: #FFFFFF !important; }
#wrap .team-card:nth-child(4) .team-avatar { background: #FFFFFF !important; color: #ED0180 !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: #000000 !important; }
#wrap .team-card:nth-child(4) .team-name { color: #FFFFFF !important; }

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

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

#wrap section:has(.testimonial-card) .section-subtitle {
    color: #C9DEE8 !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
   ================================================================ */
#wrap .cta-section,
#wrap section:last-of-type:has(.btn):not(:first-of-type) {
    background: #20BEC6 !important;
    padding: 100px 0 !important;
    text-align: center !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !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 {
    background: #000000 !important;
    color: #FFFFFF !important;
    box-shadow: 5px 5px 0 #ED0180 !important;
}

#wrap .cta-section .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;
}

#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: 3px solid #000000 !important;
    padding: 0 !important;
}

header .navbar {
    background: transparent !important;
}

header .navbar-brand,
.navbar-brand {
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !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
   ================================================================ */
#wrap section:has(video) {
    background: #C9DEE8 !important;
    padding: 100px 0 !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
   ================================================================ */
[data-theme="dark"] body,
[data-theme="dark"] #wrapwrap {
    background: #0C152A !important;
}

[data-theme="dark"] #wrap h1,
[data-theme="dark"] #wrap h2,
[data-theme="dark"] #wrap h3,
[data-theme="dark"] #wrap p {
    color: #FFFFFF !important;
}

[data-theme="dark"] #wrap section:first-of-type {
    background: #0C152A !important;
}

[data-theme="dark"] #wrap .card,
[data-theme="dark"] #wrap .service-card {
    background: #000000 !important;
    box-shadow: 6px 6px 0 #20BEC6 !important;
}

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

[data-theme="dark"] header {
    background: #0C152A !important;
    border-bottom-color: #20BEC6 !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] #top_menu .nav-link {
    color: #FFFFFF !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 */
#wrap section[style*="background"]:has([style*="#0C152A"]) *,
#wrap .section-dark *,
#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;
}

/* 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;
    margin-bottom: 24px !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"]),
#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),
#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 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 .hero-section,
#wrap section.s_cover {
    padding-top: 100px !important;
    padding-bottom: 80px !important;
}

/* Sections with colored backgrounds - full bleed */
#wrap section:has(.team-card),
#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) {
    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 .service-card,
#wrap .testimonial-card {
    padding: 32px !important;
    margin-bottom: 24px !important;
}

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

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

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

/* Row with cards */
#wrap section:has(.service-card) .row,
#wrap section:has(.card) .row {
    margin-bottom: 32px !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;
    }
}

/* ================================================================
   END - BOLD NEOBRUTALISM v6.4
   ================================================================ */