/* Our Brand Section - Content Alignment and Gaps */

/* Brand section main container */
#brand,
.brand-section {
    padding: 60px 0 !important;
    margin: 0 !important;
}

/* Brand selector - Proper centering and gaps */
.brand-selector {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 60px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Brand buttons - Better alignment and spacing */
.brand-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px 25px !important;
    margin: 0 5px !important;
    min-width: 120px !important;
    text-align: center !important;
    gap: 8px !important;
}

/* Brand content sections - Proper alignment and gaps */
.brand-section-content,
.brand-content,
.brand-section .container,
#brand .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    padding: 0 20px !important;
}

/* Brand sections - Better spacing */
.brand-section > div,
#brand > div,
.brand-content > div {
    margin-bottom: 40px !important;
    padding: 30px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 15px !important;
    gap: 20px !important;
}

/* Brand cards - Proper grid alignment */
.brand-grid,
.brand-cards,
.brand-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    margin: 30px 0 !important;
    align-items: start !important;
}

/* Brand card items - One line layout */
.brand-card,
.brand-item,
.brand-box {
    padding: 25px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    text-align: center !important;
    gap: 15px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
}

/* Brand card content - One line display */
.brand-card .content,
.brand-item .content,
.brand-box .content,
.brand-card .text,
.brand-item .text,
.brand-box .text {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Brand card headings and text - Same line */
.brand-card h3,
.brand-card h4,
.brand-card p,
.brand-card span,
.brand-item h3,
.brand-item h4,
.brand-item p,
.brand-item span,
.brand-box h3,
.brand-box h4,
.brand-box p,
.brand-box span {
    display: inline !important;
    margin: 0 10px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Brand card images - Inline with text */
.brand-card img,
.brand-item img,
.brand-box img {
    display: inline !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle !important;
    max-width: 50px !important;
    height: auto !important;
}

/* Brand card buttons - Inline */
.brand-card button,
.brand-card .btn,
.brand-item button,
.brand-item .btn,
.brand-box button,
.brand-box .btn {
    display: inline !important;
    margin: 0 10px !important;
    padding: 8px 16px !important;
    vertical-align: middle !important;
}

/* Mobile responsive - Still try to keep one line */
@media (max-width: 768px) {
    .brand-card,
    .brand-item,
    .brand-box {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    .brand-card h3,
    .brand-card h4,
    .brand-card p,
    .brand-card span,
    .brand-item h3,
    .brand-item h4,
    .brand-item p,
    .brand-item span,
    .brand-box h3,
    .brand-box h4,
    .brand-box p,
    .brand-box span {
        margin: 0 5px !important;
        font-size: 14px !important;
    }
}

/* Brand headings - Left alignment */
.brand-section h2,
.brand-section h3,
#brand h2,
#brand h3 {
    text-align: left !important;
    margin-bottom: 30px !important;
    padding: 0 20px !important;
}

/* Main brand heading - Left aligned */
.brand-section h1,
#brand h1,
.brand-section .main-heading,
#brand .main-heading {
    text-align: left !important;
    margin-bottom: 40px !important;
    padding: 0 20px !important;
    font-size: 36px !important;
    font-weight: 700 !important;
}

/* Brand text content - Better spacing */
.brand-section p,
.brand-section .description,
#brand p,
#brand .description {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 20px !important;
    line-height: 1.6 !important;
}

/* Brand images - Proper alignment */
.brand-section img,
#brand img {
    display: block !important;
    margin: 20px auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

/* Brand lists - Better spacing */
.brand-section ul,
.brand-section ol,
#brand ul,
#brand ol {
    text-align: left !important;
    max-width: 800px !important;
    margin: 20px auto !important;
    padding: 0 40px !important;
    gap: 15px !important;
}

.brand-section li,
#brand li {
    margin-bottom: 10px !important;
    padding: 10px 0 !important;
}

/* Brand buttons in content - Better alignment */
.brand-section .btn,
.brand-section button,
#brand .btn,
#brand button {
    display: inline-block !important;
    margin: 20px 10px !important;
    padding: 12px 24px !important;
    text-align: center !important;
}

/* Mobile responsive - Better gaps and alignment */
@media (max-width: 768px) {
    .brand-selector {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        margin-bottom: 40px !important;
    }
    
    .brand-btn {
        margin: 5px 0 !important;
        min-width: 200px !important;
    }
    
    .brand-section-content,
    .brand-content {
        gap: 30px !important;
        padding: 0 15px !important;
    }
    
    .brand-grid,
    .brand-cards,
    .brand-items {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .brand-card,
    .brand-item,
    .brand-box {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .brand-section-content,
    .brand-content {
        gap: 20px !important;
        padding: 0 10px !important;
    }
    
    .brand-card,
    .brand-item,
    .brand-box {
        padding: 15px !important;
    }
}