/* Our Brand Section - Perfect Center Align Brand Buttons */

/* Brand section container - ensure text center */
#brand .container,
.brand .container {
    text-align: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Section header - ensure perfect center */
#brand .section-header,
.brand .section-header {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 40px auto !important;
}

/* Brand selector container - ORIGINAL SPACING */
.brand-selector {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 auto 60px auto !important;
    text-align: center !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
}

/* Individual brand buttons - NO MOVEMENT AT ALL */
.brand-btn {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    float: none !important;
    clear: none !important;
}

/* Completely prevent any movement on hover */
.brand-btn:hover {
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Completely prevent any movement on active state */
.brand-btn:active {
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Prevent any movement on focus */
.brand-btn:focus {
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Original spacing on all screen sizes */
@media (max-width: 768px) {
    .brand-selector {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        margin: 0 auto 60px auto !important;
        float: none !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .brand-btn {
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: inline-flex !important;
    }
}

@media (max-width: 480px) {
    .brand-selector {
        gap: 10px !important;
    }
    
    .brand-btn {
        font-size: 14px !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: inline-flex !important;
    }
}

/* Override any inline styles and conflicting CSS */
.brand-selector[style],
.brand-btn[style] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 60px auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    position: relative !important;
}

/* Additional override for any JavaScript-added positioning */
#brand .brand-selector,
.brand .brand-selector {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    position: relative !important;
    float: none !important;
}