/* Logos Block Styles */

.logos-content-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;;
}

/* Flexbox Layout (Layout 0) */
.logos-flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    justify-items: center;
}

/* Column Layout (Layout 1) */
.logo-columns {
    display: flex;
    gap: 0px;
    width:100%;
}

.logo-flexbox.three-columns {
    display:flex;
    gap:50px;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
    align-items: center;
}

.logo-flexbox.four-columns {
    display:flex;
    gap:50px;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
    align-items: center;
}

.logo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.logo-column-title {
    margin: 0;
    text-align: center;
}

.logo-column-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1;
    width: 100%;
}

/* Vertical separators - only on logo inner sections */
.logo-columns .logo-column:not(:last-child) .logo-column-inner {
    border-right: 1px solid #e5e5e5;
    padding-right: 0px;
    margin-right: 0px;
    width: 100%;
}

/* Logo Container and Image Styling */
.three-columns .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: calc(33.3% - 50px);
}

.four-columns .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: calc(25% - 50px);
}

.logo-columns * .logo-container {
    width: 100% !important;
}

.three-columns .logo-container img {
    width:100%;
    max-width: 250px;
    max-height: 250px;
}

.four-columns .logo-container img {
    width:100%;
    max-width: 250px;
    max-height: 250px;
}

/* Column Titles */
.logo-column-title {
    margin: 0 0 16px 0;
    text-align: center;
}

/* Button Wrapper */
.logos-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .logos-flexbox {
        gap: 40px;
    }
    
    .logos-flexbox.three-columns {
        max-width: 750px;
    }
    
    .logos-flexbox.four-columns {
        max-width: 1000px;
    }
    
    .logo-columns {
        gap: 0px;
    }
    
    .logo-columns.three-columns {
        gap: 0px;
    }
    
    .logo-container img {
        max-height: 70px;
    }
}

@media (max-width: 768px) {
    .logos-content-wrapper {
        gap: 24px;
    }
    
    .logos-flexbox {
        gap: 30px;
    }
    
    .logos-flexbox.three-columns,
    .logos-flexbox.four-columns {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
    }
    
    .logo-columns {
        flex-direction: column;
        gap: 0px;
    }
    
    .logo-columns.three-columns,
    .logo-columns.four-columns, .logo-column-inner {
        gap: 0px;
    }
    

    
    .logo-column {
        gap: 20px;
    }
    
    /* Remove vertical separators on mobile when columns stack */
    .logo-columns .logo-column:not(:last-child) .logo-column-inner {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .four-columns .logo-container {
        padding: 0 12px;
    }
    
    .logo-container img {
        max-height: 60px;
    }
    
    .logos-button-wrapper {
        margin-top: 16px;
    }

}

@media (max-width: 480px) {
    .logos-flexbox {
        gap: 20px;
    }
    
    .logos-flexbox.three-columns,
    .logos-flexbox.four-columns {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
    
    .logo-column {
        gap: 16px;
    }
    
    .four-columns .logo-container {
        padding: 0 8px;
    }
    
    .logo-container img {
        max-height: 50px;
    }
}