/*========================================
BRANDS PAGE
========================================*/

.brands-page{

padding:50px 0;

background:#f8f9fa;

}

/*========================================
HEADER
========================================*/

.brands-header{

text-align:center;

margin-bottom:35px;

}

.brands-header h2{

font-size:38px;

font-weight:700;

margin-bottom:10px;

}

.brands-header p{

color:#777;

font-size:16px;

}

/*========================================
SEARCH
========================================*/

.brand-search{

margin-bottom:25px;

}

.brand-search input{

height:50px;

border-radius:10px;

}

/*========================================
ALPHABET
========================================*/

.alphabet-filter{

display:flex;

flex-wrap:wrap;

gap:10px;

justify-content:center;

margin:25px 0 35px;

}

.alphabet-filter a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border:1px solid #ddd;

border-radius:8px;

text-decoration:none;

font-weight:600;

color:#333;

transition:.3s;

}

.alphabet-filter a:hover{

background:#D10024;

color:#fff;

border-color:#D10024;

}

/*========================================
CARD
========================================*/

.brand-card{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.brand-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 35px rgba(0,0,0,.15);

}

/*========================================
LOGO
========================================*/

.brand-logo{

height:180px;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

background:#fff;

}

.brand-logo img{

max-width:100%;

max-height:120px;

transition:.3s;

}

.brand-card:hover .brand-logo img{

transform:scale(1.08);

}

/*========================================
BODY
========================================*/

.brand-body{

padding:20px;

text-align:center;

}

.brand-body h4{

margin-bottom:10px;

font-size:20px;

}

.brand-body h4 a{

color:#222;

text-decoration:none;

}

.brand-body h4 a:hover{

color:#D10024;

}

.brand-body p{

font-size:14px;

color:#777;

height:45px;

overflow:hidden;

}

.brand-products{

margin:15px 0;

font-weight:700;

color:#D10024;

}

/*========================================
BUTTON
========================================*/

.brand-action .btn{

width:100%;

border-radius:8px;

}

/*========================================
PAGINATION
========================================*/

.pagination .page-link{

border:none;

color:#D10024;

margin:0 3px;

border-radius:8px;

}

.pagination .active .page-link{

background:#D10024;

color:#fff;

}

/*========================================
RESPONSIVE
========================================*/

@media(max-width:991px){

.brand-logo{

height:150px;

}

}

@media(max-width:768px){

.brands-header h2{

font-size:30px;

}

.brand-logo{

height:140px;

}

}

@media(max-width:576px){

.brand-card{

margin-bottom:20px;

}

.alphabet-filter{

gap:6px;

}

.alphabet-filter a{

width:36px;

height:36px;

font-size:13px;

}

}