.brandGridSec{
background: radial-gradient(100% 100% at 100% 0%, rgba(255, 255, 255, 0) 0%, #FFF2F2 50%, #FFEDEC 100%) ;
padding:28px;
border-radius:14px;
}

.brandGridTitle{
font-size:20px;
font-weight:700;
margin-bottom:15px;
color:#333;
}
.brandGrid{
display: flex;
margin: 0 -8px;
flex-wrap: wrap;
}
.brandItemInner{
 flex: 0 0 20%;
 max-width: 20%;
 padding: 0 8px;
 margin-bottom: 16px;
}
.brandItem{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
padding:0px 34px 0px 18px;
border-radius:8px;
font-size:13px;
color:#373737;
text-decoration:none;
position:relative;
font-weight: 500;
line-height: 44px;
height: 44px;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Right Arrow */
.brandItem::after{
    position: absolute;
content:"";
font-size:18px;
color:#555;
background: url(/front/images/brand-icons/drop-icon.svg);
background-size: 10px;
background-repeat: no-repeat;
background-position: right center;
width: 10px;
height: 10px;
right: 16px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
}

.brandItem span{
font-size:18px;
color:#555;
}

.brandItem:hover{
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
text-decoration: none;
}
.viewAllBtn {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: #3146FF;
    border: none;
    text-align: center;
    margin: 0 auto;
    position: relative;
    outline: none;
    background: transparent;
}
.viewAllBtn::after{
    position: absolute;
    content: "";
    font-size: 18px;
    color: #555;
    background: url(/front/images/faq_up_arrow.svg);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: right center;
    width: 8px;
    height: 8px;
    right: -10px;
    top: 55%;
    transform: translateY(-50%);
}
@media (max-width: 991px) {
    .brandGridSec{
        flex-wrap: wrap;
        padding: 15px;
    }
    .brandItemInner{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }    
}
@media (max-width: 767px) {
    
    .brandItemInner{
        flex: 0 0 50%;
        max-width: 50%;
    }    

/* hide after 6 items */
.brandItemInner:nth-child(n+7){
display:none;
}

.brandItemInner.showBrand{
display:block;
}
.viewAllBtn{
    display: block;
}

}